:root{--bg:oklch(16% .008 60);--bg-elev:oklch(20% .01 60);--bg-inset:oklch(13% .006 60);--surface-light:oklch(96% .005 80);--fg:oklch(97% .005 80);--fg-dim:oklch(78% .006 70);--fg-mute:oklch(58% .008 70);--fg-on-light:oklch(20% .01 60);--fg-on-light-dim:oklch(42% .01 60);--hairline:oklch(100% 0 0/.12);--hairline-strong:oklch(100% 0 0/.22);--hairline-light:oklch(0% 0 0/.12);--accent:oklch(78% .14 75);--accent-hi:oklch(86% .13 80);--accent-lo:oklch(62% .14 60);--accent-ink:oklch(18% .04 60);--r-sm:4px;--r-md:8px;--r-lg:14px;--r-xl:22px;--maxw:1400px;--gutter:32px;--font-display:"Inter Tight", "Neue Haas Grotesk", Helvetica, system-ui, sans-serif;--font-body:"Inter Tight", Helvetica, system-ui, sans-serif;--font-mono:"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;--ease-out:cubic-bezier(.2, .7, .2, 1);--ease-in-out:cubic-bezier(.65, .05, .36, 1)}[data-palette=bone]{--bg:oklch(96% .005 80);--bg-elev:oklch(99% .003 80);--bg-inset:oklch(92% .006 80);--surface-light:oklch(18% .01 60);--fg:oklch(20% .01 60);--fg-dim:oklch(38% .01 60);--fg-mute:oklch(55% .01 60);--fg-on-light:oklch(96% .005 80);--fg-on-light-dim:oklch(78% .006 80);--hairline:oklch(0% 0 0/.12);--hairline-strong:oklch(0% 0 0/.26);--hairline-light:oklch(100% 0 0/.14)}[data-palette=slate]{--bg:oklch(18% .012 250);--bg-elev:oklch(22% .014 250);--bg-inset:oklch(14% .01 250);--surface-light:oklch(95% .005 240);--fg:oklch(97% .004 240);--fg-dim:oklch(76% .008 240);--fg-mute:oklch(56% .01 240);--fg-on-light:oklch(22% .014 250);--accent:oklch(82% .11 85);--accent-hi:oklch(88% .1 88);--accent-lo:oklch(66% .12 75);--accent-ink:oklch(18% .03 60)}*{box-sizing:border-box}html,body{margin:0;padding:0}html{background:var(--bg);color:var(--fg);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:16px}body{font-feature-settings:"ss01", "cv11";letter-spacing:-.005em;min-height:100vh;transition:background .24s var(--ease-out), color .24s var(--ease-out);line-height:1.5;overflow-x:hidden}.eyebrow{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);font-size:11px;font-weight:500}.mono{font-family:var(--font-mono);font-feature-settings:"ss01";letter-spacing:0}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.025em;text-wrap:balance;margin:0;font-weight:500;line-height:1.02}h1{letter-spacing:-.035em;font-size:clamp(44px,6.2vw,88px);font-weight:450}h2{letter-spacing:-.03em;font-size:clamp(34px,4.2vw,60px);font-weight:450}h3{letter-spacing:-.02em;font-size:clamp(22px,2vw,28px);font-weight:500}p{text-wrap:pretty;margin:0}a{color:inherit;text-decoration:none}.accent{color:var(--accent)}.italic{font-family:Inter Tight;font-style:italic}.container{max-width:var(--maxw);padding:0 var(--gutter);margin:0 auto}section{position:relative}.section-head{border-top:1px solid var(--hairline);grid-template-columns:160px 1fr;gap:32px;padding:80px 0 48px;display:grid}.section-head .idx{font-family:var(--font-mono);color:var(--fg-mute);letter-spacing:.12em;padding-top:10px;font-size:11px}.section-head .title-block h2{max-width:900px}.section-head .title-block .lede{color:var(--fg-dim);max-width:640px;margin-top:18px;font-size:17px;line-height:1.5}@media (width<=780px){.section-head{grid-template-columns:1fr;gap:12px;padding:56px 0 32px}}.btn{letter-spacing:-.01em;cursor:pointer;transition:all .18s var(--ease-out);font-size:15px;font-weight:500;font-family:var(--font-body);color:inherit;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:999px;align-items:center;gap:10px;padding:14px 22px;display:inline-flex}.btn-primary{background:var(--accent);color:#000;font-weight:600}.btn-primary:hover{background:var(--accent-hi);transform:translateY(-1px)}.btn-ghost{border-color:var(--hairline-strong);color:var(--fg)}.btn-ghost:hover{border-color:var(--fg);background:color-mix(in oklch, var(--fg) 6%, transparent)}.btn .arrow{width:16px;height:16px;transition:transform .2s var(--ease-out);display:inline-flex}.btn:hover .arrow{transform:translate(3px)}.nav{z-index:50;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:color-mix(in oklch, var(--bg) 78%, transparent);border-bottom:1px solid var(--hairline);position:sticky;top:0}.nav-inner{height:64px;max-width:var(--maxw);padding:0 var(--gutter);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.logo{font-family:var(--font-display);letter-spacing:-.02em;align-items:center;gap:10px;font-size:15px;font-weight:600;display:inline-flex}.logo-mark{width:22px;height:22px;display:inline-flex}.nav-links{align-items:center;gap:28px;display:flex}.nav-links a{color:var(--fg-dim);font-size:13px;transition:color .15s}.nav-links a:hover{color:var(--fg)}.nav-links a.btn-primary{color:#000}@media (width<=780px){.nav-links .hide-sm{display:none}}.ba-wrap{aspect-ratio:3/2;border-radius:var(--r-lg);-webkit-user-select:none;user-select:none;touch-action:pan-y;border:1px solid var(--hairline);background:var(--bg-inset);cursor:ew-resize;width:100%;position:relative;overflow:hidden;box-shadow:0 30px 80px -40px #00000080}.ba-img-layer{width:100%;height:100%;position:absolute;inset:0}.ba-img-layer svg,.ba-img-layer img{object-fit:cover;width:100%;height:100%;display:block}.ba-after-clip{clip-path:inset(0 0 0 var(--ba-pos,50%));will-change:clip-path;transition:clip-path .28s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}.ba-handle{top:0;bottom:0;left:var(--ba-pos,50%);background:var(--accent);pointer-events:none;width:2px;transition:left .28s cubic-bezier(.4,0,.2,1);position:absolute;transform:translate(-1px);box-shadow:0 0 0 1px #00000026}.ba-knob{top:50%;left:var(--ba-pos,50%);background:var(--accent);width:52px;height:52px;color:var(--accent-ink);font-family:var(--font-mono);letter-spacing:0;box-shadow:0 6px 20px -4px #0000004d, 0 0 0 6px color-mix(in oklch, var(--accent) 15%, transparent);cursor:ew-resize;pointer-events:auto;transition:left .28s cubic-bezier(.4, 0, .2, 1), transform .12s var(--ease-out), box-shadow .16s;border-radius:999px;justify-content:center;align-items:center;font-size:11px;font-weight:600;display:flex;position:absolute;transform:translate(-50%,-50%)}.ba-wrap.dragging .ba-after-clip,.ba-wrap.dragging .ba-handle,.ba-wrap.dragging .ba-knob{transition:none}.ba-knob:hover,.ba-knob:active{box-shadow:0 6px 20px -4px #0006, 0 0 0 10px color-mix(in oklch, var(--accent) 20%, transparent);transform:translate(-50%,-50%)scale(1.08)}[data-handle=minimal] .ba-knob{background:var(--fg);width:28px;height:28px;color:var(--bg);box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--fg)}[data-handle=minimal] .ba-handle{background:var(--fg)}[data-handle=bracket] .ba-knob{border:1.5px solid var(--accent);width:44px;height:64px;color:var(--accent);box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:0 0;background:color-mix(in oklch, var(--bg) 40%, transparent);border-radius:6px;font-size:13px}[data-handle=bracket] .ba-knob:before,[data-handle=bracket] .ba-knob:after{content:"";border:1.5px solid var(--accent);width:8px;height:8px;position:absolute;top:50%;transform:translateY(-50%)rotate(45deg)}[data-handle=bracket] .ba-knob:before{border-top:none;border-right:none;left:-14px}[data-handle=bracket] .ba-knob:after{border-bottom:none;border-left:none;right:-14px}.ba-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:color-mix(in oklch, var(--bg) 60%, transparent);color:var(--fg);border:1px solid var(--hairline);z-index:2;cursor:pointer;appearance:none;font-size:10px;font-weight:inherit;transition:opacity .16s var(--ease-out), transform .16s var(--ease-out);border-radius:999px;margin:0;padding:8px 12px;line-height:1;position:absolute}.ba-label:hover{opacity:.9;transform:translateY(-1px)}.ba-label:active{transform:translateY(0)}.ba-label:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ba-label.before{top:16px;left:16px}.ba-label.after{background:var(--accent);color:var(--accent-ink);border-color:#0000;top:16px;right:16px}@media (width<=640px){.ba-label .pill-suffix{display:none}}.card{background:var(--bg-elev);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:28px;transition:border-color .16s,transform .16s}.card:hover{border-color:var(--hairline-strong)}.hairline{border:none;border-top:1px solid var(--hairline);margin:0}.input-group{flex-direction:column;gap:8px;display:flex}.input-group label{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);font-size:10px}.input-group .req{color:var(--accent);margin-left:4px}.input{border:none;border-bottom:1px solid var(--hairline-strong);font-family:var(--font-body);color:var(--fg);letter-spacing:-.01em;background:0 0;outline:none;padding:12px 0;font-size:16px;transition:border-color .18s}.input:focus{border-color:var(--accent)}.input::placeholder{color:var(--fg-mute)}.input-error{border-color:oklch(70% .18 25)!important}.err-msg{font-family:var(--font-mono);color:oklch(75% .15 25);margin-top:4px;font-size:11px}.dropzone{border:1.5px dashed var(--hairline-strong);border-radius:var(--r-lg);text-align:center;cursor:pointer;transition:all .18s var(--ease-out);background:var(--bg-inset);padding:40px 24px}.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:color-mix(in oklch, var(--accent) 6%, var(--bg-inset))}.dropzone.drag{transform:scale(1.01)}.file-chip{background:var(--bg-inset);border:1px solid var(--hairline);border-radius:var(--r-md);animation:chipIn .24s var(--ease-out);align-items:center;gap:12px;padding:10px 14px;font-size:13px;display:flex}.file-chip .fname{font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px;overflow:hidden}.file-chip .fsize{font-family:var(--font-mono);color:var(--fg-mute);font-size:11px}.file-chip .rm{width:22px;height:22px;color:var(--fg-mute);cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;transition:all .14s;display:inline-flex}.file-chip .rm:hover{background:var(--hairline-strong);color:var(--fg)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes chipIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.timeline{grid-template-columns:repeat(4,1fr);gap:0;display:grid;position:relative}.timeline:before{content:"";background:var(--hairline);height:1px;position:absolute;top:34px;left:4%;right:4%}.step{padding:0 20px 0 0;position:relative}.step-num{background:var(--bg-elev);border:1px solid var(--hairline);width:68px;height:68px;font-family:var(--font-mono);color:var(--fg);z-index:2;transition:all .24s var(--ease-out);border-radius:999px;justify-content:center;align-items:center;margin-bottom:22px;font-size:15px;display:flex;position:relative}.step:hover .step-num,.step.active .step-num{background:var(--accent);color:var(--accent-ink);border-color:#0000;transform:scale(1.05)}.step h3{margin-bottom:10px}.step p{color:var(--fg-dim);font-size:14.5px;line-height:1.55}.step .step-icon{color:var(--fg-mute);margin-bottom:16px}@media (width<=960px){.timeline{grid-template-columns:1fr;gap:32px}.timeline:before{display:none}.step{border-left:none;padding-left:0}}.tweaks{background:var(--bg-elev);border:1px solid var(--hairline-strong);border-radius:var(--r-lg);z-index:100;width:300px;transition:transform .24s var(--ease-out), opacity .24s;padding:18px;font-size:13px;position:fixed;bottom:20px;right:20px;transform:translateY(0);box-shadow:0 30px 60px -20px #0006}.tweaks.hidden{opacity:0;pointer-events:none;transform:translateY(calc(100% + 30px))}.tweaks h4{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);margin:0 0 10px;font-size:10px;font-weight:500}.tweaks-header{border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;display:flex}.tweaks-header .title{font-family:var(--font-display);letter-spacing:-.01em;font-size:14px;font-weight:600}.tweaks-group+.tweaks-group{margin-top:16px}.pill-row{flex-wrap:wrap;gap:6px;display:flex}.pill{border:1px solid var(--hairline-strong);font-family:var(--font-mono);cursor:pointer;color:var(--fg-dim);background:0 0;border-radius:999px;padding:6px 10px;font-size:11px;transition:all .14s}.pill:hover{color:var(--fg);border-color:var(--fg-mute)}.pill.active{background:var(--accent);color:var(--accent-ink);border-color:#0000}.swatch-row{gap:8px;display:flex}.swatch{border:2px solid var(--hairline-strong);cursor:pointer;border-radius:999px;width:28px;height:28px;transition:all .14s}.swatch.active{border-color:var(--fg);transform:scale(1.1)}.toast{opacity:0;pointer-events:none;background:var(--bg-elev);border:1px solid var(--accent);color:var(--fg);z-index:200;transition:all .24s var(--ease-out);border-radius:999px;align-items:center;gap:10px;padding:14px 20px;font-size:14px;display:flex;position:fixed;top:80px;left:50%;transform:translate(-50%)translateY(-20px);box-shadow:0 20px 40px -10px #0000004d}.toast.show{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.grid{display:grid}.flex{display:flex}.stack-sm>*+*{margin-top:8px}.stack>*+*{margin-top:20px}.stack-lg>*+*{margin-top:32px}.reveal{opacity:0;transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);transform:translateY(20px)}.reveal.in{opacity:1;transform:translateY(0)}@media (width<=640px){:root{--gutter:20px}.section-head{padding:48px 0 24px}.tweaks{width:auto;bottom:12px;left:12px;right:12px}}