:root{--bg: #0a0a0c;--bg-2: #111115;--ink: #f4f1ea;--ink-2: #a9a59c;--line: rgba(244, 241, 234, .12);--accent: #ff5b1f;--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--pad: clamp(16px, 4vw, 48px);--ease: cubic-bezier(.2, .8, .2, 1)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.3;-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 10%,transparent 75%)}a{color:inherit}h1,h2,p{margin:0}button,input{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}::selection{background:var(--accent);color:#0a0a0c}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--accent);color:#0a0a0c;padding:10px 14px;font-weight:700;border-radius:6px;text-decoration:none}.skip:focus{top:12px}.bar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:18px var(--pad);padding-top:max(18px,env(safe-area-inset-top))}.mark{font:900 22px/1 var(--sans);letter-spacing:-.04em;text-decoration:none;display:inline-flex;align-items:flex-start;gap:3px}.mdot,.kdot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}.badge{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:5px 9px}.back{margin-left:auto;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:8px 0}.back:hover{color:var(--ink)}main{position:relative;z-index:1;padding:0 var(--pad);max-width:1600px;margin:0 auto}.intro{padding:clamp(24px,5vw,56px) 0 clamp(24px,3.5vw,40px)}.eyebrow{display:flex;align-items:center;gap:10px;font:500 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}h1{font:900 clamp(40px,6.4vw,88px)/.92 var(--sans);letter-spacing:-.045em}@media(min-width:1000px){.intro{display:grid;grid-template-columns:auto minmax(0,36ch);align-items:end;gap:12px 48px}.intro .eyebrow{grid-column:1 / -1;margin-bottom:4px}.intro .lede{margin:0 0 .4em}}h1 em,.use-sec h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--ink)}.lede{margin-top:18px;max-width:58ch;color:var(--ink-2);font-size:clamp(16px,1.6vw,19px)}.lede strong{color:var(--ink)}.lab{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "stage" "b"}.pa{grid-area:a}.pb{grid-area:b}.stage{grid-area:stage;min-width:0}@media(min-width:1000px){.lab{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"a stage" "b stage";align-items:start;gap:22px 28px}.pb{align-self:start}}.panel{display:grid;gap:12px;align-content:start}.lbl{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}.tiles{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));min-height:390px}@media(min-width:1000px){.tiles{grid-template-columns:1fr;min-height:680px}}.tile{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:14px;text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:14px;background:#ffffff05;transition:border-color .2s,transform .2s var(--ease),background .2s}.tile:hover{transform:translateY(-2px);border-color:#f4f1ea4d}.tile[aria-checked=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.tile[aria-checked=true]:after{content:"";position:absolute;right:12px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}.tile .k{font:500 10px/1 var(--mono);color:var(--ink-2);letter-spacing:.14em}.tile .tn{grid-column:1 / -1;font:800 20px/1 var(--sans);letter-spacing:-.02em}.tile .sw{display:flex;gap:0;grid-column:1}.tile .sw i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.18);margin-right:-5px}.tile .aa{grid-column:2;grid-row:3;font-size:18px;line-height:18px}.tile .td{grid-column:1 / -1;font-size:13px;color:var(--ink-2);line-height:1.4;display:none}.accent{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.pick{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer}.pick input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);opacity:0;cursor:pointer}.pick:focus-within{outline:2px solid var(--accent);outline-offset:3px}.presets{display:flex;gap:6px;min-height:28px;min-width:198px}.presets button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px #ffffff26}.presets button[aria-pressed=true]{border-color:var(--ink)}output{font:500 13px/1 var(--mono);color:var(--ink-2);min-width:7ch}.reset{background:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font:500 12px/1 var(--mono);color:var(--ink-2);cursor:pointer}.reset:hover{color:var(--ink);border-color:var(--ink-2)}.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;width:max-content}.seg button{background:none;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;font:500 13px/1 var(--mono);color:var(--ink-2)}.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.use{margin-top:10px;width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;border:0;border-radius:16px;cursor:pointer;background:var(--accent);color:#0a0a0c;font:900 clamp(20px,2.2vw,26px)/1 var(--sans);letter-spacing:-.03em;transition:transform .2s var(--ease),box-shadow .2s;box-shadow:0 10px 40px -12px var(--accent)}.use:hover{transform:translateY(-2px);box-shadow:0 18px 50px -12px var(--accent)}.use span{transition:transform .2s var(--ease)}.use:hover span{transform:translate(4px)}.keys{font:400 12px/1.6 var(--mono);color:var(--ink-2);display:none}@media(hover:hover)and (pointer:fine){.keys{display:block}}kbd{font:inherit;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--ink)}.stage-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px;flex-wrap:wrap}.now{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}.now strong{color:var(--ink);font:900 22px/1 var(--sans);letter-spacing:-.02em;text-transform:none;margin-left:6px}.concept{margin-top:6px;color:var(--ink-2);font-size:14px;max-width:70ch}.open{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:8px 0;white-space:nowrap}.open:hover{color:var(--accent)}.frame-wrap{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#050506}.frame-wrap:before{content:"";display:block;height:30px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 16px 15px,#3a3a40 4px,transparent 5px),radial-gradient(circle at 32px 15px,#3a3a40 4px,transparent 5px),radial-gradient(circle at 48px 15px,#3a3a40 4px,transparent 5px)}.device{position:relative;overflow:hidden;margin:0 auto;width:100%;aspect-ratio:1280 / 800;transition:height .35s var(--ease),width .35s var(--ease)}.device iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#0a0a0c}.frame-wrap[data-device=mobile]{background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),#070708;padding:18px 0 24px}.frame-wrap[data-device=mobile]:before{display:none}.frame-wrap[data-device=mobile] .device{border:8px solid #1b1b20;border-radius:34px;box-shadow:0 0 0 1px #2a2a30,0 30px 70px -20px #000;box-sizing:content-box}.use-sec{padding:clamp(48px,8vw,96px) 0 0;scroll-margin-top:20px}.use-sec h2{font:900 clamp(34px,5.5vw,72px)/.95 var(--sans);letter-spacing:-.045em}.prompt-box{position:relative;margin-top:24px;border:1px solid var(--accent);border-radius:16px;background:var(--bg-2)}.prompt-box pre{margin:0;padding:22px 22px 76px;font:400 14px/1.65 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--ink);max-height:60vh;overflow:auto}.copy{position:absolute;right:14px;bottom:14px;background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:12px 18px;font:700 14px/1 var(--sans);cursor:pointer}.copy:hover,.copy.ok{background:var(--accent);color:#0a0a0c}.status{margin-top:10px;min-height:1.5em;font:500 13px/1.4 var(--mono);color:var(--accent)}.foot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:clamp(56px,8vw,100px) var(--pad) 0;padding:18px 0 28px;border-top:1px solid var(--line);font:500 12px/1.4 var(--mono);color:var(--ink-2)}.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}.scr{display:inline-block}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}.back+.back{margin-left:clamp(14px,3vw,28px)}.foot p a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}@media(max-width:420px){.back[href^="/projects"]{display:none}}