:root{--ink-000:#09090a;--ink-050:#101012;--ink-100:#17171a;--ink-200:#1f1f23;--ink-300:#2a2a30;--ink-400:#3a3a42;--text:#f6f6f8;--text-dim:#a3a3ac;--text-faint:#6d6d76;--accent:#fcc000;--accent-ink:#09090a;--accent-glow:#fcc00029;--radius-card:24px;--radius-panel:18px;--radius-ctl:12px;--radius-pill:999px;--pad:20px;--gap:14px;--font-display:"Bricolage Grotesque", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;--font-body:"Instrument Sans", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;--font-mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--shadow-lift:0 24px 60px -24px #000000e6;--ease:cubic-bezier(.22, .61, .36, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--ink-000);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.55;overflow-x:hidden}*{-webkit-tap-highlight-color:transparent}button,[role=slider],.stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}h1,h2,h3,p,figure{margin:0}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}img,canvas,svg{max-width:100%;display:block}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}::selection{background:var(--accent);color:var(--accent-ink)}.shell{width:min(1320px,100% - 40px);margin-inline:auto}.display{font-family:var(--font-display);letter-spacing:-.035em;text-wrap:balance;font-size:clamp(2.6rem,6.4vw,5.1rem);font-weight:700;line-height:.98}.display .tint{color:var(--accent);transition:color .35s var(--ease)}.section-title{font-family:var(--font-display);letter-spacing:-.03em;font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700;line-height:1.05}.lede{color:var(--text-dim);max-width:46ch;font-size:clamp(1rem,1.4vw,1.125rem)}.eyebrow{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);font-size:.7rem}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.nav{z-index:40;-webkit-backdrop-filter:blur(18px)saturate(140%);backdrop-filter:blur(18px)saturate(140%);background:#09090ab8;border-bottom:1px solid #ffffff0f;position:sticky;top:0}.nav__inner{align-items:center;gap:18px;height:62px;display:flex}.brand{font-family:var(--font-display);letter-spacing:-.02em;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;display:flex}.brand__dot{background:var(--accent);width:15px;height:15px;transition:background .35s var(--ease);border-radius:50%}.nav__links{gap:4px;margin-left:auto;display:flex}.nav__link{border-radius:var(--radius-pill);color:var(--text-dim);padding:7px 13px;font-size:.88rem;transition:color .2s,background .2s}.nav__link:hover{color:var(--text);background:#ffffff0f}.nav__link.is-current{color:var(--text);background:#ffffff1a}.lang{border-radius:var(--radius-pill);background:var(--ink-200);gap:2px;padding:3px;display:flex}.lang__opt{border-radius:var(--radius-pill);color:var(--text-dim);padding:5px 11px;font-size:.78rem;transition:color .2s,background .2s}.lang__opt.is-on{background:var(--text);color:var(--ink-000);font-weight:600}.hero{padding:clamp(40px,6vw,76px) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden}.hero:before{content:"";background:radial-gradient(58% 46% at 18% 12%, var(--accent-glow) 0%, transparent 62%);pointer-events:none;height:120%;transition:background .5s var(--ease);position:absolute;inset:-30% -10% auto}.hero__grid{flex-direction:column;gap:clamp(30px,4vw,46px);display:flex;position:relative}.hero__copy{flex-direction:column;gap:20px;display:flex}.hero__copy .display{max-width:17ch}.hero__actions{flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px;display:flex}.hero__samples{align-items:center;gap:10px;min-width:0;display:flex}.hero__samples-label{color:var(--text-faint);white-space:nowrap;font-size:.8rem}@media (max-width:480px){.hero__samples-label{display:none}}.hero__hint{color:var(--text-faint);align-items:center;gap:8px;font-size:.84rem;display:flex}.hero__hint svg{opacity:.8;flex:none}.btn{border-radius:var(--radius-pill);letter-spacing:-.01em;transition:transform .18s var(--ease), background .2s, color .2s, opacity .2s;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:.92rem;font-weight:600;display:inline-flex}.btn:active{transform:scale(.975)}.btn--primary{background:var(--accent);color:var(--accent-ink);transition:background .35s var(--ease), color .35s var(--ease), transform .18s var(--ease)}.btn--primary:hover{filter:brightness(1.08)}.btn--ghost{background:var(--ink-200);color:var(--text)}.btn--ghost:hover{background:var(--ink-300)}.btn--quiet{color:var(--text-dim);padding:10px 14px}.btn--quiet:hover{color:var(--text);background:#ffffff0f}.btn[disabled]{opacity:.4;cursor:not-allowed}.editor{background:var(--ink-100);border-radius:var(--radius-card);box-shadow:var(--shadow-lift);border:1px solid #ffffff12;position:relative;overflow:hidden}.editor__bar{border-bottom:1px solid #ffffff0f;align-items:center;gap:10px;padding:10px 12px;display:flex}.editor__swatch{background:var(--accent);width:22px;height:22px;transition:background .35s var(--ease);border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px #ffffff40}.editor__hex{font-family:var(--font-mono);letter-spacing:.02em;color:var(--text);font-size:.82rem}.editor__coverage{font-family:var(--font-mono);color:var(--text-faint);font-size:.74rem}.editor__stage{background:#000;padding:12px;position:relative}.stage{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;max-width:100%;line-height:0;position:relative}.stage__canvas{border-radius:10px;width:100%;height:100%}.stage__overlay{pointer-events:none;position:absolute;inset:0;overflow:visible}.stage__shape{fill:#ffffff1a;stroke:var(--text);stroke-width:1.5px;vector-effect:non-scaling-stroke}.stage__path{fill:#ffffff24;stroke:var(--text);stroke-width:1.5px;vector-effect:non-scaling-stroke}.stage__handle{fill:var(--text);stroke:#00000073;stroke-width:1px;vector-effect:non-scaling-stroke;pointer-events:auto;cursor:grab}.stage__rotate{fill:var(--accent);stroke:#00000080;stroke-width:1px;vector-effect:non-scaling-stroke;pointer-events:auto;cursor:grab}.stage__link{stroke:var(--text);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-dasharray:3 3}.dropzone{text-align:center;border-radius:var(--radius-panel);border:1px dashed #ffffff29;flex-direction:column;align-items:center;gap:16px;width:100%;padding:40px 24px;display:flex}.dropzone.is-over{border-color:var(--accent);background:var(--accent-glow)}.dropzone__text{color:var(--text-dim);max-width:34ch;font-size:.9rem;line-height:1.5}.samples{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.samples__btn{background:var(--ink-300);width:62px;height:62px;transition:transform .18s var(--ease), box-shadow .2s;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.samples__btn:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #ffffff4d}.samples__btn img{object-fit:cover;width:100%;height:100%}.sample-tile{aspect-ratio:3/4;border-radius:var(--radius-panel);background:var(--ink-100);width:100%;transition:box-shadow .2s;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff12}.sample-tile:hover{box-shadow:inset 0 0 0 1px #ffffff47}.sample-tile img{object-fit:cover;width:100%;height:100%}.panel{background:var(--ink-050);border-top:1px solid #ffffff0f}.panel__head{text-align:left;align-items:center;gap:9px;width:100%;padding:11px 14px;display:flex}.panel__title{letter-spacing:-.01em;font-size:.86rem;font-weight:600}.panel__icon{width:17px;height:17px;color:var(--accent);transition:color .35s var(--ease);flex:none}.panel__chevron{color:var(--text-faint);margin-left:auto}.panel__body{flex-direction:column;gap:14px;min-height:172px;padding:0 14px 16px;display:flex}.panel__label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-size:.72rem}.slider{flex-direction:column;gap:2px;display:flex}.slider__row{color:var(--text-dim);justify-content:space-between;align-items:baseline;gap:10px;font-size:.8rem;display:flex}.slider__row .mono{color:var(--text);font-size:.78rem}.slider input[type=range]{appearance:none;width:100%;height:26px;accent-color:var(--accent);cursor:pointer;background:0 0}.slider input[type=range]::-webkit-slider-runnable-track{background:var(--ink-400);border-radius:999px;height:4px}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);border-radius:50%;width:18px;height:18px;margin-top:-7px;box-shadow:0 1px 4px #00000080}.slider input[type=range]::-moz-range-track{background:var(--ink-400);border-radius:999px;height:4px}.slider input[type=range]::-moz-range-progress{background:var(--accent);border-radius:999px;height:4px}.slider input[type=range]::-moz-range-thumb{background:var(--text);border:0;border-radius:50%;width:18px;height:18px}.seg{background:var(--ink-200);border-radius:14px;flex-wrap:wrap;gap:3px;padding:3px;display:flex}.seg__opt{min-width:0;color:var(--text-dim);text-align:center;white-space:nowrap;text-overflow:ellipsis;border-radius:11px;flex:auto;padding:8px;font-size:.78rem;transition:background .2s,color .2s;overflow:hidden}.seg__opt:hover{color:var(--text)}.seg__opt.is-on{background:var(--text);color:var(--ink-000);font-weight:600}.modes{background:var(--ink-100);border-top:1px solid #ffffff0f;gap:4px;padding:10px 8px;display:flex}.mode{color:var(--text-dim);letter-spacing:.01em;border-radius:var(--radius-ctl);flex-direction:column;flex:1;align-items:center;gap:6px;padding:4px 0;font-size:.68rem;display:flex}.mode__disc{background:var(--ink-200);width:46px;height:46px;color:var(--text-dim);transition:background .25s var(--ease), color .25s;border-radius:50%;place-items:center;display:grid}.mode__disc svg{width:21px;height:21px}.mode:hover .mode__disc{background:var(--ink-300);color:var(--text)}.mode.is-on{color:var(--text)}.mode.is-on .mode__disc{background:var(--text);color:var(--ink-000)}.shapes{gap:4px;display:flex}.shape{color:var(--text-dim);flex-direction:column;flex:1;align-items:center;gap:5px;padding:4px 0;font-size:.68rem;display:flex}.shape__disc{background:var(--ink-200);width:38px;height:38px;transition:background .25s var(--ease), color .25s;border-radius:50%;place-items:center;display:grid}.shape__disc svg{width:17px;height:17px}.shape.is-on{color:var(--text)}.shape.is-on .shape__disc{background:var(--text);color:var(--ink-000)}.swatches{flex-wrap:wrap;gap:7px;display:flex}.swatch{width:28px;height:28px;transition:transform .16s var(--ease), box-shadow .2s;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff2e}.swatch:hover{transform:scale(1.12)}.swatch.is-on{box-shadow:0 0 0 2px var(--ink-050), 0 0 0 4px var(--text)}.ratios{grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.ratio{border-radius:var(--radius-ctl);background:var(--ink-200);font-family:var(--font-mono);color:var(--text-dim);padding:9px 4px;font-size:.7rem;transition:background .2s,color .2s}.ratio:hover{color:var(--text)}.ratio.is-on{background:var(--text);color:var(--ink-000);font-weight:600}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border-radius:var(--radius-pill);background:var(--ink-200);color:var(--text-dim);padding:8px 14px;font-size:.78rem;transition:background .2s,color .2s}.chip:hover{color:var(--text)}.chip.is-on{background:var(--accent);color:var(--accent-ink);font-weight:600}.tip{position:relative}.tip:after{content:attr(data-tip);background:var(--ink-300);color:var(--text);font-family:var(--font-body);letter-spacing:0;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s var(--ease), transform .14s var(--ease);z-index:30;border-radius:9px;padding:6px 10px;font-size:.72rem;font-weight:500;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)translateY(-4px);box-shadow:0 6px 20px -6px #000c}.tip:hover:after,.tip:focus-visible:after{opacity:1;transform:translate(-50%)translateY(0)}.tip--end:after{left:auto;right:0;transform:translateY(-4px)}.tip--end:hover:after,.tip--end:focus-visible:after{transform:translateY(0)}.toast{border-radius:var(--radius-pill);background:var(--ink-300);color:var(--text);z-index:60;align-items:center;gap:8px;padding:11px 18px;font-size:.84rem;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 12px 32px -10px #000000d9}.notice{border-radius:var(--radius-ctl);background:var(--ink-200);color:var(--text-dim);align-items:flex-start;gap:9px;max-width:46ch;padding:11px 13px;font-size:.82rem;line-height:1.5;display:flex}.notice svg{color:var(--accent);flex:none;margin-top:2px}.band{border-top:1px solid #ffffff0f;padding:clamp(56px,8vw,108px) 0}.band__head{flex-direction:column;gap:14px;max-width:62ch;margin-bottom:clamp(28px,4vw,48px);display:flex}.compare{grid-template-columns:repeat(4,1fr);align-items:start;gap:16px;display:grid}.compare__item{flex-direction:column;gap:10px;display:flex}.compare__figure{border-radius:var(--radius-panel);background:var(--ink-100);width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff12}.compare__figure canvas{width:100%;height:100%;display:block}.compare__meta{align-items:center;gap:9px;display:flex}.compare__chip{border-radius:50%;flex:none;width:13px;height:13px;box-shadow:inset 0 0 0 1px #ffffff40}.compare__label{color:var(--text-dim);font-size:.84rem}.compare__hex{font-family:var(--font-mono);color:var(--text-faint);margin-left:auto;font-size:.72rem}.live{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,56px);display:grid}.live__frame{border-radius:var(--radius-card);aspect-ratio:3/4;box-shadow:inset 0 0 0 1px #ffffff14, var(--shadow-lift);background:#000;place-items:center;display:grid;position:relative;overflow:hidden}.live__frame canvas,.live__frame video{object-fit:cover;grid-area:1/1;width:100%;height:100%}.live__video{opacity:0;pointer-events:none}.live__idle{text-align:center;color:var(--text-faint);flex-direction:column;grid-area:1/1;align-items:center;gap:12px;max-width:30ch;padding:32px;font-size:.86rem;display:flex}.live__controls{flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px;display:flex}.live__shutter{background:var(--ink-200);width:54px;height:54px;box-shadow:inset 0 0 0 3px var(--text);transition:transform .16s var(--ease), background .2s;border-radius:50%}.live__shutter:hover{background:var(--ink-300)}.live__shutter:active{transform:scale(.94)}.footer{color:var(--text-faint);border-top:1px solid #ffffff0f;padding:40px 0 56px;font-size:.82rem}.footer__row{flex-wrap:wrap;align-items:baseline;gap:10px 26px;display:flex}.footer__note{max-width:62ch;color:var(--text-faint);opacity:.85;margin-top:12px;font-size:.76rem;line-height:1.6}.footer a{color:var(--text-dim);border-bottom:1px solid #ffffff2e;text-decoration:none}.footer a:hover{color:var(--text)}@media (min-width:760px){.panel__body{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px 24px;display:grid}.panel__label,.swatches,.ratios,.seg,.shapes,.chips{grid-column:1/-1}.panel__body>.btn{grid-column:1/-1;justify-self:start}}@media (min-width:1100px){.panel__body{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:1000px){.compare{grid-template-columns:repeat(2,1fr)}.live{grid-template-columns:1fr;gap:32px}.live__frame{max-width:460px;margin-inline:auto}}@media (max-width:640px){.shell{width:calc(100% - 24px)}.nav__inner{grid-template-columns:1fr auto;grid-template-areas:"brand lang""links links";gap:8px 12px;height:auto;padding:10px 0 12px;display:grid}.brand{grid-area:brand}.nav__links{scrollbar-width:none;grid-area:links;gap:6px;margin-left:0;overflow-x:auto}.nav__links::-webkit-scrollbar{display:none}.nav__link{background:var(--ink-200);flex:none;padding:9px 14px;font-size:.82rem}.lang{grid-area:lang}.lang__opt{padding:7px 11px}.display{font-size:clamp(2rem,9vw,2.6rem)}.hero{padding-top:24px}.hero__copy{gap:16px}.editor{border-radius:18px}.editor__stage{padding:8px}.compare{grid-template-columns:1fr 1fr;gap:12px}.compare__hex{display:none}.ratios{grid-template-columns:repeat(4,1fr)}.band{padding:44px 0}}@media (max-width:380px){.compare{grid-template-columns:1fr}.nav__link{padding:9px 12px;font-size:.78rem}}@media (hover:none){.swatch{width:32px;height:32px}.swatch:hover{transform:none}.ratio{padding:11px 4px}.chip{padding:10px 16px}.seg__opt{padding:10px 8px}.iconbtn{width:40px;height:40px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.stage.svelte-18yasnq{justify-content:center;align-items:center;width:100%;display:flex}.stage__frame.svelte-18yasnq{border-radius:12px;line-height:0;position:relative;overflow:hidden}.stage__inner.svelte-18yasnq{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;line-height:0;position:relative}.stage__canvas.svelte-18yasnq{border-radius:6px;width:100%;height:100%}.stage__overlay.svelte-18yasnq{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.stage__compose.svelte-18yasnq{pointer-events:none;max-width:none;position:absolute}.stage__before.svelte-18yasnq{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.stage__split.svelte-18yasnq{cursor:ew-resize;touch-action:none;place-items:center;width:44px;margin-left:-22px;display:grid;position:absolute;top:0;bottom:0}@media (pointer:fine){.stage__split.svelte-18yasnq{width:24px;margin-left:-12px}}.stage__split-line.svelte-18yasnq{background:var(--text);width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 0 1px #00000059}.stage__split-grip.svelte-18yasnq{background:var(--text);border-radius:50%;place-items:center;width:32px;height:32px;display:grid;position:relative;box-shadow:0 2px 10px #0000008c}.stage__split-grip.svelte-18yasnq:before,.stage__split-grip.svelte-18yasnq:after{content:"";border-block:4px solid #0000;width:0;height:0;position:absolute}.stage__split-grip.svelte-18yasnq:before{border-right:5px solid var(--ink-000);left:6px}.stage__split-grip.svelte-18yasnq:after{border-left:5px solid var(--ink-000);right:6px}.stage__split.svelte-18yasnq:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}.stage-skeleton.svelte-18yasnq{background:var(--ink-100);border-radius:12px;place-items:center;width:100%;min-height:240px;display:grid;box-shadow:inset 0 0 0 1px #ffffff0d}.stage-skeleton__dot.svelte-18yasnq{border:2px solid var(--ink-400);border-top-color:var(--accent);border-radius:50%;width:26px;height:26px;animation:.7s linear infinite svelte-18yasnq-stage-spin}@keyframes svelte-18yasnq-stage-spin{to{transform:rotate(1turn)}}.stage__brush.svelte-18yasnq{pointer-events:none;border-radius:50%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px #0000008c,inset 0 0 0 1.5px #ffffffe6}.stage__loupe.svelte-18yasnq{background:var(--ink-000);pointer-events:none;border-radius:50%;width:108px;height:108px;position:absolute;overflow:hidden;transform:translate(-50%,calc(-100% - 18px));box-shadow:0 0 0 2px #ffffffe6,0 10px 26px -8px #000c}.stage__loupe.is-below.svelte-18yasnq{transform:translate(-50%,18px)}.stage__loupe-view.svelte-18yasnq{width:100%;height:100%;display:block}.stage__loupe-reticle.svelte-18yasnq{border-radius:50%;width:11px;height:11px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px #0009,inset 0 0 0 1.5px #fffffff2}.stage__error.svelte-18yasnq{color:#f6f6f8;font-family:var(--font-body);text-align:left;background:#000c;border-radius:10px;padding:10px 12px;font-size:.8rem;line-height:1.5;position:absolute;inset:auto 12px 12px}.editor__bar-actions.svelte-nmz6rb{gap:6px;margin-left:auto;display:flex}.iconbtn.svelte-nmz6rb{background:var(--ink-200);width:34px;height:34px;color:var(--text);border-radius:50%;place-items:center;transition:background .2s;display:grid}.iconbtn.svelte-nmz6rb:hover{background:var(--ink-300)}.iconbtn.is-on.svelte-nmz6rb{background:var(--accent);color:var(--accent-ink)}.iconbtn.svelte-nmz6rb:disabled{opacity:.4;cursor:not-allowed}.sr.svelte-nmz6rb{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.panel__chevron.svelte-nmz6rb{width:15px;height:15px;color:var(--text-faint);margin-left:auto;transform:rotate(180deg)}.panel__collapsed.svelte-nmz6rb{background:var(--ink-050);width:100%;color:var(--text-dim);text-align:left;border-top:1px solid #ffffff0f;padding:11px 16px;font-size:.82rem}.panel__collapsed.svelte-nmz6rb:hover{color:var(--text)}.frame-pick.svelte-nmz6rb{align-items:center;gap:10px;margin-top:10px;display:flex}.frame-pick.svelte-nmz6rb input:where(.svelte-nmz6rb){cursor:pointer;background:0 0;border:0;border-radius:8px;width:36px;height:28px;padding:0;box-shadow:inset 0 0 0 1px #ffffff40}.frame-pick.svelte-nmz6rb input:where(.svelte-nmz6rb)::-webkit-color-swatch-wrapper{padding:2px}.frame-pick.svelte-nmz6rb input:where(.svelte-nmz6rb)::-webkit-color-swatch{border:0;border-radius:6px}.live__canvas.svelte-1oj8xfy{cursor:crosshair}.live__panel.svelte-1oj8xfy{border-radius:var(--radius-panel);background:var(--ink-100);max-width:420px;margin-top:22px;padding:16px;box-shadow:inset 0 0 0 1px #ffffff0f}