:root{--bg:#1b1340;--ink:#f4efff;--coral:#ff5c7a;--ice:#bff0ff;--sun:#ffd23f;--panel:#2a1f5c}
[data-theme=light]{--bg:#f6f1ff;--ink:#1b1340;--panel:#e6dcff}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:400 18px/1.5 Rubik,sans-serif;overflow-x:hidden}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
@media(pointer:fine){body,button,input{cursor:none}}
.dot,.ring{position:fixed;left:0;top:0;pointer-events:none;z-index:99;border-radius:50%;display:none}
@media(pointer:fine){.dot,.ring{display:block}}
.dot{width:8px;height:8px;background:var(--coral);margin:-4px}
.ring{width:38px;height:38px;margin:-19px;border:2px solid var(--coral);transition:width .2s,height .2s,margin .2s}
.ring.big{width:64px;height:64px;margin:-32px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.top{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:16px 4vw;z-index:5;font-weight:800;font-size:22px}
.pill{font:800 15px Rubik;border:2px solid var(--ink);color:var(--ink);background:none;border-radius:99px;padding:10px 20px;transition:background .2s,color .2s,transform .15s ease-out}
.pill:hover{background:var(--ink);color:var(--bg)}
.hero{position:relative;height:100vh;min-height:560px}
#pc{position:absolute;inset:0;width:100%;height:100%}
.heroui{position:absolute;left:4vw;bottom:7vh;max-width:420px;display:grid;gap:10px;font-size:15px}
.heroui label{display:grid;gap:6px}
input[type=text],#word{font:800 28px Rubik;background:none;border:0;border-bottom:3px solid var(--coral);color:var(--ink);padding:4px 0;width:100%;border-radius:0}
.demo{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:4vw;padding:8vh 4vw;align-items:start}
.cap{display:grid;gap:16px;justify-items:start;position:sticky;top:90px}
h2{font:800 clamp(34px,4.6vw,60px)/1;letter-spacing:-.02em}
.chk{display:flex;gap:10px;align-items:center;font-size:15px}
input[type=checkbox]{accent-color:var(--coral);width:20px;height:20px}
#gc{width:100%;height:70vh;background:var(--panel);border-radius:28px;touch-action:none}
.stagek{position:relative;height:70vh;background:var(--panel);border-radius:28px;overflow:hidden}
#kc{position:absolute;inset:0;width:100%;height:100%}
.keyrow{position:absolute;inset:auto 0 0;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:12px;height:46%}
.key{border:0;border-radius:14px 14px 22px 22px;font:800 20px Rubik;color:#1b1340;background:hsl(var(--h) 90% 70%);transition:transform .08s,filter .2s;display:grid;align-items:end;padding-bottom:14px}
.key.on{transform:translateY(8px);filter:brightness(1.25)}
.scene{perspective:900px;display:grid;place-items:center;min-height:60vh}
.card{--rx:0;--ry:0;--gx:50%;--gy:50%;position:relative;width:min(360px,80vw);aspect-ratio:3/4.2;border-radius:28px;padding:28px;display:grid;align-content:end;gap:6px;color:#1b1340;
 background:conic-gradient(from 200deg at 30% 20%,var(--ice),var(--coral),var(--sun),var(--ice));transform:rotateX(calc(var(--rx)*1deg)) rotateY(calc(var(--ry)*1deg));transition:transform .15s;box-shadow:0 30px 60px #0006;overflow:hidden}
.card span{font-size:14px}.card strong{font:800 34px/1.05 Rubik}.card em{font-size:14px;font-style:normal}
.glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx) var(--gy),#fffd,transparent 45%);mix-blend-mode:soft-light;pointer-events:none}
footer{padding:10vh 4vw;text-align:center;opacity:.7}
@media(max-width:800px){.demo{grid-template-columns:1fr}.cap{position:static}.key{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}