:root{--bg: #16150f;--panel: #1d1c14;--panel-2: #24231a;--border: #383627;--border-soft: #2b2a1e;--ink: #e7e3d4;--text: #e7e3d4;--muted: #a29e8c;--faint: #6e6b5b;--accent: #4cbb6c;--accent-soft: rgba(76, 187, 108, .14);--screen: #0f0f09;--on-ink: #16150f;--radius-lg: 2px;--radius-md: 2px;--radius-sm: 1px;--font-pixel: "Silkscreen", "IBM Plex Mono", monospace;--font-display: "IBM Plex Mono", ui-monospace, "PingFang SC", "Hiragino Sans", monospace;--font-body: "IBM Plex Sans", -apple-system, "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", sans-serif;--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--hairline: 1px}@media(min-resolution:2dppx){:root{--hairline: .5px}}*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-autospace:normal}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:#4cbb6c47}html{scrollbar-width:thin;scrollbar-color:var(--border) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border)}::-webkit-scrollbar-thumb:hover{background:var(--accent)}::-webkit-scrollbar-track{background:transparent}html:lang(ja) body,html:lang(zh) body{line-height:1.75}html:lang(ja) .card-blurb,html:lang(zh) .card-blurb{line-height:1.65}html:lang(ja) .hero-title,html:lang(zh) .hero-title{letter-spacing:0}html:lang(ja) .hero-title,html:lang(ja) .tagline,html:lang(ja) .card-blurb{word-break:auto-phrase}.tagline,.card-blurb,.ctl-hint,.p-desc{hanging-punctuation:allow-end}.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:20;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}.page{position:relative;max-width:1040px;margin:0 auto;padding:0 28px 90px}.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;margin:0 -28px;padding:12px 28px;background:#16150ff0;border-bottom:1px solid var(--border)}.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-pixel);font-weight:400;font-size:15px;letter-spacing:.02em}.nav-links{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}.nav-links a{transition:color .15s}.nav-links a:hover{color:var(--accent)}.lang-switch{display:inline-flex;border:1px solid var(--ink);overflow:hidden}.lang-btn{font-family:var(--mono);font-size:11px;color:var(--muted);padding:3px 8px;border-right:1px solid var(--ink);transition:color .15s,background .15s}.lang-btn:last-child{border-right:none}.lang-btn:hover{color:var(--ink)}.lang-btn.active{color:#16150f;background:var(--ink)}.hero{padding:76px 0 56px}.hero-eyebrow{margin:0 0 20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.hero-title{margin:0;font-family:var(--font-display);font-size:clamp(34px,5.4vw,56px);font-weight:600;line-height:1.12;letter-spacing:-.015em;max-width:720px;text-wrap:balance}.hero-title em{font-style:normal;color:var(--accent)}.hero-title:after{content:"";display:inline-block;width:.45em;height:.82em;margin-left:.12em;vertical-align:baseline;transform:translateY(.1em);background:var(--accent);animation:cursor-blink 1.15s steps(2,start) infinite}@keyframes cursor-blink{to{visibility:hidden}}@media(prefers-reduced-motion:reduce){.hero-title:after{animation:none;opacity:.6}}.tagline{max-width:600px;color:var(--muted);font-size:16px;margin:22px 0 30px}.install{display:inline-flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--ink);padding:9px 9px 9px 16px;box-shadow:3px 3px #00000080}.install code{font-family:var(--mono);font-size:13px}.install code:before{content:"$ ";color:var(--accent)}.install button,.code-head button{font-size:12px;font-family:var(--mono);color:var(--muted);background:var(--panel-2);border:1px solid var(--border);padding:5px 12px;transition:color .15s,border-color .15s,background .15s}.install button:hover,.code-head button:hover{color:#16150f;background:var(--ink);border-color:var(--ink)}.specimens{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:52px}.specimen{display:flex;flex-direction:column;align-items:stretch;gap:7px;transition:transform .12s}.specimen:hover{transform:translateY(-2px)}.specimen-stage{--bkt: var(--border);--arm: 10px;position:relative;display:flex;align-items:center;justify-content:center;height:76px;background:var(--screen);background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.025) 2px 3px)}.specimen:hover .specimen-stage{--bkt: var(--accent)}.specimen-name{font-family:var(--font-pixel);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center;transition:color .2s}.specimen:hover .specimen-name{color:var(--accent)}.eyebrow-block{margin:76px 0 18px}.eyebrow{font-family:var(--font-pixel);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}.eyebrow:after{content:"";display:inline-block;width:42px;height:3px;background:var(--accent);vertical-align:middle;margin-left:14px}.playground{display:grid;grid-template-columns:1fr 384px;gap:16px;align-items:start;scroll-margin-top:76px}.preview{position:sticky;top:64px;display:flex;flex-direction:column;overflow:hidden;height:360px;transition:background .25s}.aperture:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:linear-gradient(var(--bkt) 0 0) top left / var(--arm) 1px,linear-gradient(var(--bkt) 0 0) top left / 1px var(--arm),linear-gradient(var(--bkt) 0 0) top right / var(--arm) 1px,linear-gradient(var(--bkt) 0 0) top right / 1px var(--arm),linear-gradient(var(--bkt) 0 0) bottom left / var(--arm) 1px,linear-gradient(var(--bkt) 0 0) bottom left / 1px var(--arm),linear-gradient(var(--bkt) 0 0) bottom right / var(--arm) 1px,linear-gradient(var(--bkt) 0 0) bottom right / 1px var(--arm);background-repeat:no-repeat;transition:background .15s}.preview{--bkt: var(--ink);--arm: 18px}.preview.dark{background:var(--screen);background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.02) 2px 3px)}.preview.light{--panel: #ffffff;--panel-2: #ffffff;--border: #c6c1b0;--ink: #1d1b16;--on-ink: #faf9f4;--text: #1d1b16;--muted: #605c50;--faint: #8f8a7a;background:#faf9f4;background-image:radial-gradient(rgba(29,27,22,.08) 1px,transparent 1.5px);background-size:22px 22px}.hud{position:absolute;top:12px;z-index:2}.hud-tl{left:12px}.hud-tr{right:12px}.hud-br{top:auto;bottom:12px;right:12px;display:flex;gap:6px}.hud-bl{top:auto;bottom:12px;left:12px;display:flex;align-items:center}.hud-br .label-btn{height:22px;padding:0 8px;gap:5px;font-size:11px}.hud-br .label-btn:disabled{opacity:.5;cursor:wait}.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:52px 40px 40px}.preview-name{font-family:var(--mono);font-size:12px;line-height:22px;color:var(--faint)}.controls{background:var(--panel);border:1px solid var(--ink);padding:20px;display:flex;flex-direction:column;gap:22px}.ctl-section{display:flex;flex-direction:column;gap:9px}.ctl-title{margin:0 0 3px;font-family:var(--font-pixel);font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}.ctl-row{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:10px;min-height:24px}.ctl-label{font-size:12.5px;color:var(--muted);white-space:nowrap}.ctl-value{font-family:var(--mono);font-size:11px;color:var(--faint);width:52px;text-align:right;font-variant-numeric:tabular-nums;background:none;border:none;border-bottom:1px dashed transparent;padding:0 0 1px;outline:none;cursor:text;transition:color .15s,border-color .15s}.ctl-value:hover{color:var(--muted);border-bottom-color:var(--border)}.ctl-value:focus{color:var(--text);border-bottom-color:var(--accent);border-bottom-style:solid}.ctl-caption{margin:-4px 0 0;padding-left:98px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint)}.feel-targets{display:flex;flex-direction:column;gap:9px;margin:0 -6px;padding:0 6px}.feel-targets.flash{animation:ctl-flash .7s ease}@keyframes ctl-flash{0%{background:var(--accent-soft)}to{background:transparent}}.ctl-row select{grid-column:2 / 4;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23605c50'/%3E%3C/svg%3E") no-repeat right 10px center,var(--panel);color:var(--text);border:1px solid var(--border);font-size:13px;padding:5px 26px 5px 10px;outline:none;transition:border-color .15s}.ctl-row select:hover{border-color:var(--ink)}.ctl-row select:focus{border-color:var(--accent)}.ctl-row .segmented{grid-column:2 / 4;justify-self:start}.finetune{border-top:1px solid var(--border-soft);padding-top:14px}.finetune summary{list-style:none;cursor:pointer;font-family:var(--font-pixel);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);-webkit-user-select:none;user-select:none;transition:color .15s}.finetune summary::-webkit-details-marker{display:none}.finetune summary:before{content:"▸";display:inline-block;margin-right:7px;transition:transform .15s}.finetune[open] summary:before{transform:rotate(90deg)}.finetune summary:hover{color:var(--ink)}.finetune-body{display:flex;flex-direction:column;gap:9px;padding-top:12px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:2px;outline:none;background:linear-gradient(90deg,var(--accent) var(--fill, 50%),var(--border) var(--fill, 50%))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:14px;border-radius:0;background:var(--ink);border:none;transition:background .15s}input[type=range]::-webkit-slider-thumb:hover{background:var(--accent)}input[type=range]::-moz-range-thumb{width:10px;height:14px;border-radius:0;background:var(--ink);border:none}.segmented{display:inline-flex;background:var(--panel);border:1px solid var(--border);padding:2px;gap:2px}.seg-btn{font-size:12px;font-family:var(--mono);color:var(--muted);padding:2px 9px;transition:color .15s,background .15s}.seg-btn:hover{color:var(--text)}.seg-btn.active{background:var(--ink);color:var(--on-ink)}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:34px;height:22px;border:1px solid var(--border);transition:transform .12s,border-color .15s,box-shadow .15s}.swatch:hover{transform:translateY(-1px)}.swatch.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent)}.custom-toggle{align-self:flex-start;font-size:12px;font-family:var(--mono);color:var(--muted);border:1px dashed var(--border);padding:4px 10px;transition:color .15s,border-color .15s}.custom-toggle:hover,.custom-toggle.active{color:var(--ink);border-color:var(--accent);border-style:solid}.custom-stops{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.custom-stops .stop{position:relative;display:inline-flex}.custom-stops input[type=color]{width:34px;height:24px;padding:0;border:1px solid var(--border);background:var(--panel);cursor:pointer}.stop-remove{position:absolute;top:-7px;right:-7px;width:15px;height:15px;line-height:13px;font-size:11px;text-align:center;background:var(--panel);border:1px solid var(--border);color:var(--muted)}.stop-remove:hover{color:var(--ink);border-color:var(--accent)}.stop-add{font-size:12px;font-family:var(--mono);color:var(--muted);border:1px dashed var(--border);padding:3px 8px}.stop-add:hover{color:var(--ink);border-color:var(--accent)}.codeblock{background:var(--panel);border:1px solid var(--ink);overflow:hidden}.code-head{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--ink)}.code-dots{display:inline-flex;gap:6px}.code-dots i{width:9px;height:9px;border:1px solid var(--ink)}.code-dots i:nth-child(1){background:#d0453e}.code-dots i:nth-child(2){background:#e0a63c}.code-dots i:nth-child(3){background:#17843b}.code-actions{display:inline-flex;align-items:center;gap:6px}.icon-btn,button.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;color:var(--muted);background:var(--panel-2);border:1px solid var(--border);cursor:pointer;transition:color .15s,background .15s,border-color .15s}.icon-btn:hover{color:var(--on-ink);background:var(--ink);border-color:var(--ink)}.label-btn,button.label-btn{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--panel-2);border:1px solid var(--border);cursor:pointer;transition:color .15s,background .15s,border-color .15s}.label-btn:hover,button.label-btn:hover{color:var(--on-ink);background:var(--ink);border-color:var(--ink)}.codeblock pre{margin:0;padding:16px 20px;overflow-x:auto;font-size:11.5px;line-height:1.45;background:var(--screen);background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.02) 2px 3px)}.codeblock code{font-family:var(--mono);color:#a9b39c}.tok-tag{color:#62c986}.tok-attr{color:#c7a0e8}.tok-str{color:#a3cf74}.tok-num{color:#6fb8d8}.tok-kw{color:#e08585}.tok-punct{color:#5d665a}.gallery{scroll-margin-top:76px}.gallery-filters{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--border);padding:4px 12px;transition:color .15s,border-color .15s,background .15s}.chip:hover{color:var(--ink);border-color:var(--ink)}.chip.active{color:#16150f;border-color:var(--ink);background:var(--ink)}.chip-count{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}.chip.active .chip-count{color:#17843b}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.card{--accent-card: #17843b;display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--panel);border:1px solid var(--border);padding:10px 10px 12px;gap:10px;transition:border-color .15s,transform .12s,box-shadow .15s}.card:hover{border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:3px 3px #0000008c}.card-stage{position:relative;display:flex;align-items:center;justify-content:center;height:122px;width:100%;background:var(--screen);background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.025) 2px 3px);border:1px solid var(--border);overflow:hidden;cursor:pointer}.card-stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--accent-card) 14%,transparent),transparent 72%);opacity:.4;transition:opacity .25s}.card:hover .card-stage:after{opacity:1}.card-scale{position:relative}.card-cta{position:absolute;bottom:8px;left:50%;transform:translate(-50%,6px);font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#c9d0bd;background:#14160fd9;border:1px solid #3a3d30;padding:3px 10px;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}.card:hover .card-cta{opacity:1;transform:translate(-50%)}.card-meta{display:flex;flex-direction:column;gap:3px;padding:0 1px}.card-title{font-family:var(--font-pixel);font-size:11px;letter-spacing:.04em;text-transform:uppercase;text-align:left}.card-blurb{font-size:12.5px;color:var(--muted);line-height:1.5;text-align:left}.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}.reveal.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}.props{display:flex;flex-direction:column;gap:14px}.props-caption{margin:0;font-family:var(--font-pixel);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}.props-group{display:flex;flex-direction:column;gap:10px;margin-top:10px}.props-scroll{overflow-x:auto;border:1px solid var(--ink);background:var(--panel)}.props-table{width:100%;border-collapse:collapse;font-size:12.5px}.props-table th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:10px 14px 8px;border-bottom:1px solid var(--ink)}.props-table td{padding:8px 14px;border-bottom:var(--hairline) solid var(--border-soft);vertical-align:top;line-height:1.5}.props-table tr:last-child td{border-bottom:none}.p-name{font-family:var(--mono);font-size:12px;color:var(--accent);white-space:nowrap}.p-type{font-family:var(--mono);font-size:11px;color:var(--muted);max-width:320px}.p-def{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap}.p-desc{color:var(--muted);min-width:180px}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%);z-index:30;font-family:var(--mono);font-size:12px;color:var(--on-ink);background:var(--ink);padding:7px 16px;box-shadow:3px 3px #00000080;animation:toast-in .16s cubic-bezier(.22,.9,.36,1)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(6px)}}.footer{margin-top:88px;padding-top:22px;border-top:1px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.footer-brand{display:flex;align-items:center;gap:9px;font-family:var(--font-pixel);font-size:12px}.footer-meta{color:var(--faint);font-size:12px;font-family:var(--mono)}@media(max-width:920px){.playground{grid-template-columns:1fr}.preview{height:300px;top:56px;z-index:3}.hero{padding-top:48px}.specimens{grid-template-columns:repeat(2,1fr)}.specimen:nth-child(5){grid-column:1 / -1}.nav-links{gap:14px}}@media(max-width:600px){.nav-links a[href^="#"]{display:none}.nav-links{gap:12px}}