@font-face{font-family:Ar;src:url(f/ar.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:JB;src:url(f/jb.woff2) format('woff2');font-weight:100 800;font-display:swap}
:root{--ink:#1d1714;--cl:#d97757;--cl2:#b8532f;--paper:#f6ebdf;--dc:#5865f2}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;background:#f2dcc8;color:var(--ink);font-family:Ar,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
a{color:inherit}
.top{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,3vw,36px);pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;gap:9px;align-items:center;text-decoration:none;font-weight:800;font-stretch:118%;letter-spacing:.04em}
.brand img{filter:invert(52%) sepia(52%) saturate(640%) hue-rotate(332deg) brightness(92%)}
.gh{font:500 13px JB,monospace;text-decoration:none;background:rgba(246,235,223,.85);padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.dots{display:flex;gap:6px}
.dots button{width:26px;height:4px;border:0;border-radius:2px;background:rgba(29,23,20,.18);cursor:pointer;transition:background .4s,width .4s}
.dots button.on{background:var(--cl);width:42px}
#panels{position:fixed;inset:0;z-index:3;pointer-events:none}
#panels::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,228,212,.97) 0,rgba(246,228,212,.93) 33%,rgba(246,228,212,0) 54%);pointer-events:none}
.pn{position:absolute;left:clamp(20px,6vw,96px);top:50%;transform:translateY(-50%);width:min(470px,40vw);opacity:0;visibility:hidden}
.pn.on{visibility:visible}
.pn *{pointer-events:auto}
.k{font:500 12px/1 JB,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--cl2);margin-bottom:18px}
h1,h2{font-weight:850;font-stretch:112%;line-height:.94;letter-spacing:-.01em;font-size:clamp(40px,min(5.6vw,9.5vh),88px);margin-bottom:22px}
h1{font-size:clamp(44px,min(6.4vw,11vh),104px)}
h1 em,h2 em{font-style:normal;color:var(--cl)}
.b{font-size:clamp(15px,1.15vw,18px);line-height:1.55;max-width:42ch;color:#3b302a;margin-bottom:22px}
.sn{display:block;font:500 12.5px/1.4 JB,monospace;background:var(--ink);color:#f6ebdf;padding:10px 12px;border-radius:6px;margin-bottom:22px;overflow-wrap:anywhere;width:max-content;max-width:100%}
.cta{display:inline-flex;align-items:center;gap:8px;font:600 15px Ar,sans-serif;font-stretch:110%;text-decoration:none;background:var(--ink);color:var(--paper);padding:14px 20px;border-radius:999px;transition:transform .25s,background .25s}
.cta:hover{transform:translateY(-2px);background:var(--cl2)}
.cta.dc{background:var(--dc)}
.cta.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.again{margin-top:22px;background:none;border:0;font:500 13px JB,monospace;color:var(--ink);opacity:.7;cursor:pointer;text-decoration:underline}
.hint{font:500 13px JB,monospace;opacity:.75;display:flex;gap:10px;align-items:center}
.hk{display:inline-block;padding:5px 9px;border:1.5px solid var(--ink);border-radius:5px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}
.ft{position:fixed;z-index:4;bottom:12px;right:clamp(16px,3vw,36px);font:400 10.5px JB,monospace;color:rgba(29,23,20,.85);background:rgba(246,235,223,.92);padding:4px 9px;border-radius:6px;max-width:60vw;text-align:right}
#loader{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:#f2dcc8;transition:opacity .8s}
#loader.done{opacity:0;pointer-events:none}
.lw{display:flex;gap:14px;align-items:center;font:500 13px JB,monospace}
.lw b{font-weight:500}.lw i{font-style:normal;opacity:.6}
.lc{width:32px;height:22px;background:var(--cl);-webkit-mask:url(i/claudecode.svg) center/contain no-repeat;mask:url(i/claudecode.svg) center/contain no-repeat;animation:hop .7s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(-8px)}}
.ns{position:fixed;inset:auto 20px 40px;z-index:9}
@media (max-width:760px){
 #panels::before{display:none}
 .pn{left:18px;right:18px;width:auto;top:auto;bottom:calc(46px + env(safe-area-inset-bottom));transform:none;background:rgba(246,235,223,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:18px 18px 20px;border-radius:16px}

 h1{font-size:clamp(38px,11.5vw,56px);margin-bottom:14px}
 h2{font-size:clamp(30px,8.6vw,42px);margin-bottom:12px}
 .k{margin-bottom:10px}
 .b{font-size:14.5px;margin-bottom:14px;line-height:1.5}
 .sn{font-size:11px;margin-bottom:14px}
 .cta{padding:12px 17px;font-size:14px}
 .dots button{width:14px}.dots button.on{width:26px}
 .ft{left:18px;right:18px;max-width:none;text-align:center;bottom:max(10px,env(safe-area-inset-bottom));font-size:9.5px}
 .pn[data-i="0"] .hint{display:none}
}
@media (prefers-reduced-motion:reduce){.hk,.lc{animation:none}}

.pn>*{opacity:0;translate:0 22px;transition:opacity .55s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.pn.show>*{opacity:1;translate:0 0}
.pn.show>*:nth-child(2){transition-delay:.07s}.pn.show>*:nth-child(3){transition-delay:.14s}.pn.show>*:nth-child(4){transition-delay:.21s}.pn.show>*:nth-child(5){transition-delay:.28s}.pn.show>*:nth-child(6){transition-delay:.35s}
.pn{opacity:1}
@media (max-width:760px){.pn{opacity:0;transition:opacity .45s}.pn.show{opacity:1}.pn[data-i="0"]{opacity:1}}