:root{--surface: #fdfdf8;--surface-accent: #eeefe9;--surface-sunken: #e5e7e0;--border: #d2d3cc;--border-strong: #bfc1b7;--border-hover: #9ea096;--text: #23251d;--text-muted: #65675e;--text-faint: #9ea096;--link-hover: var(--posthog-tangerine-darker, #ff4800);--accent: var(--posthog-tangerine, #ff5c1c);--btn-face: #eb9d2a;--btn-base: #cd8407;--btn-edge: #b17816;--glass-bar: rgba(253, 253, 248, .5);--glass-window: rgba(253, 253, 248, .75);--glass-blur: blur(48px) saturate(1.4);--radius: 8px;--maxw: 1160px;--shadow-window: 0 1px 2px rgba(35, 37, 29, .06), 0 12px 32px -8px rgba(35, 37, 29, .22);--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--font-brand: "RoundHog", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;background:radial-gradient(ellipse 70% 50% at 15% 0%,#d6ebb8 0%,transparent 70%),radial-gradient(ellipse 60% 60% at 100% 100%,#7cb35a 0%,transparent 70%),radial-gradient(ellipse 50% 40% at 0% 100%,#8fc06c 0%,transparent 70%),linear-gradient(180deg,#bcdb9c,#a3cd83);background-attachment:fixed;color:var(--text);font-family:var(--font-brand);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-ligatures:none}a{color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--link-hover);text-decoration-color:currentColor}h1,h2,h3{line-height:1.2;letter-spacing:-.015em}h1{font-weight:800}h2,h3{font-weight:700}:not(pre)>code{font-family:var(--mono);font-size:.85em;padding:.1em .35em;border:1px solid var(--border);border-radius:4px;background:var(--surface-accent);overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}a>code{color:var(--posthog-cobalt, #0457ff);background:color-mix(in srgb,var(--posthog-cobalt, #0457ff) 8%,transparent);border-color:color-mix(in srgb,var(--posthog-cobalt, #0457ff) 45%,transparent)}a:hover>code{border-color:var(--posthog-cobalt, #0457ff)}a:has(>code){text-decoration:none}::selection{background:#eb9d2a4d}:focus-visible{outline:2px solid var(--btn-edge);outline-offset:2px}.prerender-list{columns:3 220px;gap:24px;list-style:none;padding:0;font-size:14px}.wallpaper{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.wallpaper-hog{position:absolute;right:-80px;bottom:-80px;width:max(min(1400px,92vw),520px);height:auto}.taskbar-wrap{position:sticky;top:0;z-index:10;padding:8px 8px 0}.taskbar{display:flex;align-items:center;gap:16px;padding:6px 8px 6px 14px;border:1px solid var(--border);border-radius:6px;background:var(--glass-bar);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 20px 40px -16px #23251d4d}.nav-brand{display:flex;align-items:center;margin-right:8px}.nav-links{display:flex;gap:2px;flex-wrap:wrap}.nav-links a,.nav-link-plain{color:var(--text);font-weight:500;font-size:15px;text-decoration:none;padding:4px 10px;border:1px solid transparent;border-radius:6px}.nav-links a:hover,.nav-link-plain:hover{color:var(--text);border-color:var(--border-strong)}.nav-links a.active{font-weight:700;background:#e5e7e0b3;border-color:var(--border)}.nav-actions{display:flex;align-items:center;gap:6px;margin-left:auto}@media(max-width:760px){.nav-link-plain{display:none}.taskbar{flex-wrap:wrap;gap:6px 12px}.nav-links{order:3;width:100%}}.page{max-width:var(--maxw);margin:16px auto 0;padding:40px 48px 64px;border:1px solid rgba(158,160,150,.55);border-radius:12px;background:var(--glass-window);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-window)}@media(max-width:1192px){.page{margin-left:8px;margin-right:8px}}@media(max-width:640px){.page{padding:28px 18px 48px}}.footer{max-width:var(--maxw);margin:12px auto 24px;padding:14px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--glass-bar);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:var(--text-muted);font-size:13px;text-align:center}@media(max-width:1192px){.footer{margin-left:8px;margin-right:8px}}@media(prefers-reduced-transparency:reduce){.taskbar,.page,.footer{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}.page-header{margin-bottom:32px}.page-header h1{font-size:34px;margin:0 0 10px}.page-header p{color:var(--text-muted);font-size:17px;margin:0;max-width:64ch}.page-header .eyebrow{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--text-muted);margin:0 0 12px;padding:1px 7px;border:1px solid var(--border);border-radius:4px;background:var(--surface-accent)}.section{margin-top:48px}.section h2{font-size:22px;margin:0 0 16px}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.grid{display:grid;gap:12px}.grid-assets{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.grid-cards,.grid-colors{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.asset{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px 12px;text-align:center}.asset-art{position:relative;height:96px;display:flex;align-items:center;justify-content:center}.asset-art svg{max-height:96px;max-width:100%;width:auto}.asset-img{height:96px;max-width:100%;width:auto;object-fit:contain;opacity:0;transition:opacity .4s ease,transform .15s ease}.asset-img.loaded{opacity:1}.asset-blur{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:contain;filter:blur(8px);transform:scale(1.05)}.asset-missing{color:var(--text-muted);font-size:24px}.asset-name{font-weight:700;font-size:14px;overflow-wrap:anywhere;max-width:100%}.asset-slug{font-family:var(--mono);font-size:12px;color:var(--text-muted);overflow-wrap:anywhere;max-width:100%}button.asset{position:relative;cursor:pointer;font:inherit;color:inherit;transition:border-color .1s ease}button.asset:hover{border-color:var(--border-hover)}button.asset:hover .asset-img.loaded{transform:scale(1.04)}.asset-open{color:var(--text-faint);font-weight:400}.asset-open:hover{color:var(--text)}.copy-menu{position:fixed;z-index:1000;display:flex;flex-direction:column;min-width:200px;padding:4px;border:1px solid var(--border-strong);border-radius:var(--radius);background:#fdfdf8d9;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 4px 12px #23251d14,0 12px 32px #23251d29}.copy-menu button{font:inherit;font-size:13px;text-align:left;color:var(--text);background:none;border:1px solid transparent;border-radius:5px;padding:6px 10px;cursor:pointer}.copy-menu button:hover:not(:disabled),.copy-menu button:focus-visible{background:#e5e7e0cc;border-color:var(--border);outline:none}.copy-menu-row{display:flex;align-items:center;gap:2px;font-size:13px;padding-left:11px}.copy-menu-row span{flex:1;color:var(--text)}.copy-menu .copy-menu-row button{padding:6px 8px;font-family:var(--mono);font-size:12px;color:var(--text-muted)}.copy-menu .copy-menu-row button:hover:not(:disabled),.copy-menu .copy-menu-row button:focus-visible{color:var(--text)}.copy-menu button:disabled{color:var(--text-muted);opacity:.6;cursor:default}.empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:64px 20px;color:var(--text-muted)}.empty-title{margin:8px 0 0;font-size:18px;font-weight:700;color:var(--text)}.empty-hint{margin:0 0 8px;font-size:14px}.btn{--face: var(--surface);--base: var(--border-strong);--edge: var(--border-hover);display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:14px;font-weight:700;line-height:1.4;color:var(--text);text-decoration:none;padding:5px 12px;border:1.5px solid var(--edge);border-radius:6px;background:var(--face);box-shadow:0 2px 0 var(--base),0 3.5px 0 var(--edge);transform:translateY(-2px);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .05s ease,box-shadow .05s ease}.btn:hover{color:var(--text);transform:translateY(-3px);box-shadow:0 3px 0 var(--base),0 4.5px 0 var(--edge)}.btn:active{transform:translateY(-.5px);box-shadow:0 .5px 0 var(--base),0 2px 0 var(--edge)}.btn-primary{--face: var(--btn-face);--base: var(--btn-base);--edge: var(--btn-edge);color:#111}.btn-primary:hover{color:#111}.btn-sm{font-size:13px;padding:2px 10px}.btn.copied{--face: color-mix(in srgb, var(--posthog-green, #47c861) 18%, var(--surface));--base: var(--posthog-green, #47c861);--edge: var(--posthog-green-darker, #35b14e);color:#1e6b2e}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.input{font:inherit;font-size:15px;color:var(--text);padding:7px 12px;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);min-width:220px;flex:1}.input::placeholder{color:var(--text-faint)}.input:hover{border-color:var(--border-hover)}.input:focus{outline:none;border-color:var(--btn-edge);box-shadow:0 0 0 3px #eb9d2a40}.count{color:var(--text-muted);font-size:14px}.seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border);border-radius:7px;background:var(--surface-sunken)}.seg button{border:1px solid transparent;border-radius:5px;background:none;font:inherit;font-size:13px;font-weight:600;padding:4px 12px;cursor:pointer;color:var(--text-muted)}.seg button:hover{color:var(--text)}.seg button.active{background:var(--surface);border-color:var(--border-strong);color:var(--text);font-weight:700;box-shadow:0 1px 2px #23251d14}.code{position:relative;background:var(--surface-accent);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;overflow:auto;font-family:var(--mono);font-size:13px;line-height:1.65}.code{--sh-keyword: #a621c8;--sh-string: #2e7d32;--sh-entity: #1663c7;--sh-class: #b45309;--sh-property: #0f766e;--sh-identifier: var(--text);--sh-sign: #65675e;--sh-jsxliterals: var(--text);--sh-comment: #85877d}.code .sh__token--comment{font-style:italic}.code pre{margin:0}.code .btn{position:absolute;top:12px;right:12px;font-family:var(--font-brand);font-size:12px;padding:1px 9px}.section-lede{color:var(--text-muted);font-size:15px;margin:0 0 16px;max-width:70ch}.logo-stage{display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--surface-accent)}.logo-stage.dark{background:#1d1f27}.frame-guide{display:flex;align-items:center;justify-content:center;flex:none;border:1px dashed rgba(0,0,0,.25)}.frame-guide.circle{border-radius:50%}.logo-stage.dark .frame-guide{border-color:#ffffff40}.copy-stage{position:relative;display:block;width:100%;padding:0;font:inherit;border:1px solid transparent;border-radius:7px;background:none;cursor:pointer}.copy-stage:hover{border-color:var(--border-hover)}.preset .logo-stage{height:120px;padding:12px}.copy-hint{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border:1px solid var(--btn-edge);border-radius:4px;background:color-mix(in srgb,var(--btn-face) 20%,var(--surface));color:#6b4706;font-size:11px;font-weight:700;line-height:1.5;pointer-events:none;transition:opacity .15s ease}.copy-hint:before{content:"";width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h9a3 3 0 0 1 3 3v10h-2V6a1 1 0 0 0-1-1H8V3Zm-3 4h9a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Zm0 2v11h9V9H5Z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h9a3 3 0 0 1 3 3v10h-2V6a1 1 0 0 0-1-1H8V3Zm-3 4h9a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Zm0 2v11h9V9H5Z'/%3E%3C/svg%3E") center / contain no-repeat}.copy-stage:hover .copy-hint{opacity:0}.copy-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;border-radius:inherit;background:color-mix(in srgb,var(--btn-face) 90%,transparent);color:#111;font-size:15px;font-weight:700;opacity:0;pointer-events:none}.copy-flash.failed{background:color-mix(in srgb,var(--posthog-coral-darker, #f00008) 85%,transparent);color:#fff}.copy-flash.show{animation:copy-flash 1.4s ease forwards}@keyframes copy-flash{0%{opacity:0}8%,70%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.copy-flash.show{animation:none;opacity:1}}.grid-presets{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:960px){.grid-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.grid-presets{grid-template-columns:1fr}}.preset{display:flex;flex-direction:column;gap:10px;padding:8px 8px 14px}.preset-body{flex:1;display:flex;flex-direction:column;padding:0 6px}.preset-body h3{font-size:15px;margin:0 0 4px}.preset-body p{font-size:13px;color:var(--text-muted);margin:0}.preset-body .download-links{justify-content:flex-start;margin-top:auto;padding-top:12px}.preset-body .download-links .btn{padding:1px 9px;font-size:12px;white-space:nowrap}.guidelines{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}@media(max-width:720px){.guidelines{grid-template-columns:1fr}}.callout{--tone: var(--border-hover);padding:16px;border:1px solid var(--tone);border-radius:4px;background:color-mix(in srgb,var(--tone) 15%,var(--surface))}.callout-do{--tone: var(--posthog-green, #47c861)}.callout-dont{--tone: var(--posthog-coral, #ff474d)}.callout-info{border-color:var(--border-strong);background:var(--surface-sunken)}.callout-title{display:flex;align-items:center;gap:8px;margin-bottom:2px;font-size:17px}.callout-title svg{flex:none;width:24px;height:24px;opacity:.75}.callout-body{padding-left:32px;font-size:15px;line-height:1.65}.callout-body ul{margin:4px 0 0;padding-left:18px}.callout-body li+li{margin-top:4px}.callout-body :not(pre)>code{background:var(--surface)}.logo-group{border-top:1px solid var(--border)}.logo-group>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:16px 0}.logo-group>summary::-webkit-details-marker{display:none}.logo-group>summary:before{content:"";width:7px;height:7px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(-45deg);transition:transform .15s ease}.logo-group[open]>summary:before{transform:rotate(45deg)}.logo-group>summary h2{font-size:22px;margin:0}.logo-group:not([open]){border-bottom:1px solid var(--border)}.builder{padding:16px;display:flex;flex-direction:column;gap:16px}.builder-controls{display:flex;flex-wrap:wrap;gap:12px 24px}.builder-stage{height:240px;padding:20px}.builder-note{color:var(--text-muted);font-size:13px;margin:-6px 0 0}.builder-control{display:flex;flex-direction:column;gap:6px}.builder-control-label{font-size:12px;font-weight:700;color:var(--text-muted)}.props-subhead{font-size:16px;margin:28px 0 12px}.props-table{overflow-x:auto}.props-table table{width:100%;border-collapse:collapse;font-size:14px}.props-table th,.props-table td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--border)}.props-table tr:last-child td{border-bottom:0}.props-table th{font-size:13px;color:var(--text-muted);background:var(--surface-accent)}.props-table .nowrap{white-space:nowrap}.props-table .nowrap code{overflow-wrap:normal}.props-table code{font-size:12.5px}.props-table+.section-lede{margin-top:12px}.imperative-jump{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:16px;align-items:stretch}@media(max-width:720px){.imperative-jump{grid-template-columns:1fr}}.imperative-jump-stage{flex-direction:column;gap:16px;padding:20px}.color-card{overflow:hidden}.color-gradient{height:72px;border-bottom:1px solid var(--border)}.color-body{padding:14px 16px}.color-name{font-weight:700;text-transform:capitalize;margin:0 0 10px}.swatch-row{display:flex;flex-direction:column;gap:2px}.swatch{display:flex;align-items:center;gap:10px;cursor:pointer;border:1px solid transparent;border-radius:6px;background:none;font:inherit;color:inherit;padding:3px;text-align:left}.swatch:hover{border-color:var(--border);background:var(--surface-accent)}.swatch-chip{width:26px;height:26px;border-radius:5px;border:1px solid rgba(0,0,0,.1);flex:none}.swatch-meta{display:flex;flex-direction:column;line-height:1.25}.swatch-tone{font-size:12px;color:var(--text-muted)}.swatch-hex{font-family:var(--mono);font-size:13px}.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:8px 0}.hero h1{font-size:clamp(34px,5vw,48px);margin:0 0 14px}.hero p{color:var(--text-muted);font-size:18px;max-width:56ch;margin:0}.hero-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:28px}.hero-actions>.btn{height:40px;font-size:15px;padding:0 16px}.hero-actions>.install{height:43.5px;transform:translateY(-2px)}.hero-art{display:flex;align-items:flex-end}.hero-art svg{width:300px;height:auto}@media(max-width:860px){.hero{grid-template-columns:1fr}.hero-art{display:none}}.install{display:inline-flex;align-items:center;gap:12px;padding:0 6px 0 14px;border:1.5px solid var(--border-strong);border-radius:6px;background:var(--surface);font-family:var(--mono);font-size:13px}.install:before{content:"$";color:var(--text-faint);margin-right:-4px}.install .btn{font-family:var(--font-brand);font-size:12px;padding:1px 9px}.nav-card{padding:8px 8px 16px;display:flex;flex-direction:column;gap:8px;height:100%;text-decoration:none;font-weight:400;color:var(--text);transition:border-color .1s ease,transform .1s ease}.nav-card:hover{color:var(--text);border-color:var(--border-hover);transform:translateY(-2px)}.nav-card h3{margin:4px 8px 0;font-size:17px}.nav-card p{margin:0 8px;color:var(--text-muted);font-size:14px}.nav-card-preview{height:110px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--surface-accent);border-radius:5px;overflow:hidden}.nav-card-preview svg{max-height:76px;width:auto}.font-specimen{padding:32px}.font-specimen-big{margin:0;font-size:clamp(56px,12vw,128px);line-height:1;letter-spacing:-.03em}.font-specimen-scale{margin:24px 0 0;font-size:clamp(20px,4vw,34px);line-height:1.35;color:var(--text-muted);overflow-wrap:anywhere}.face-card{padding:20px;display:flex;flex-direction:column;gap:12px}.face-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.face-name{font-weight:700;font-size:15px}.face-token{font-size:11.5px;color:var(--text-muted)}.face-sample{margin:0;font-size:22px;line-height:1.3}.route-loading{color:var(--text-muted);font-size:14px;opacity:0;animation:route-loading-in .15s ease-out .4s forwards}@keyframes route-loading-in{to{opacity:1}}@media(prefers-reduced-motion:reduce){.route-loading{animation-duration:0s}}.notfound{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 20px 40px}.notfound-hog{width:min(400px,76vw);height:auto;animation:notfound-hog-float 4.5s ease-in-out infinite}@keyframes notfound-hog-float{0%,to{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}@media(prefers-reduced-motion:reduce){.notfound-hog{animation:none}}.notfound-code{margin:0;font-size:72px;line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--accent)}.notfound-title{margin:8px 0 0;font-size:28px}.notfound-lede{margin:8px 0 0;max-width:46ch;color:var(--text-muted)}.notfound-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}.notfound-actions .btn{padding:6px 16px;font-size:15px}.detail-card{display:flex;flex-direction:column;gap:14px}.detail-card>.card{width:100%}.download-links{display:flex;justify-content:center;gap:10px}