@import"https://fonts.googleapis.com/css2?family=DM+Mono&family=Yomogi&display=swap";*{box-sizing:border-box}body{margin:0;color:#fff6e3;background:#100d23;font-family:DM Mono,monospace}main{min-height:100vh;padding:26px 16px;background:radial-gradient(circle at 50% 10%,#3d1d56,transparent 38%),#100d23}.shell{max-width:800px;margin:auto}a{color:#f8d477;font-size:12px}header{padding:48px 0 25px;text-align:center}header p{color:#a99add;font-size:10px;letter-spacing:.18em}h1{font-family:Yomogi,cursive;color:#fbda68;font-size:clamp(56px,12vw,104px);margin:8px 0;letter-spacing:.06em}header span{color:#d9cdeb;font-family:Yomogi,cursive;font-size:22px}.controls,.keyboard{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}button{cursor:pointer;border:1px solid #65518c;border-radius:999px;padding:10px 15px;background:#23183b;color:#fff6e3;font:inherit;font-size:12px}button:hover,button[aria-pressed=true]{background:#fbda68;color:#21172f;border-color:#fbda68}label{font-size:12px;color:#c9bde4;margin-left:auto}.canvas-wrap{position:relative;overflow:hidden;border:1px solid #65518c;border-radius:26px;background:radial-gradient(circle at center,#292049,#161127 66%);box-shadow:0 20px 60px #05030e}.canvas-wrap canvas{display:block;width:100%!important;height:auto!important;touch-action:none}.instruction{position:absolute;width:100%;top:39%;text-align:center;pointer-events:none;color:#e6daf8;line-height:1.8;font-family:Yomogi,cursive;font-size:25px}.instruction small{font-family:DM Mono,monospace;font-size:10px;color:#988cb8}.sparkles{position:absolute;inset:0;pointer-events:none}.sparkles i{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#fff2ad;box-shadow:0 0 14px 5px #ffcf59;animation:twinkle .8s var(--d) ease-out forwards}@keyframes twinkle{0%{transform:scale(0);opacity:0}40%{transform:scale(3);opacity:1}to{transform:scale(.2);opacity:0}}.after{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:14px 0;border:1px solid #493b6f;background:#493b6f}.after div{padding:16px;background:#18122b;text-align:center}.after b{display:block;color:#f5d462;font-size:20px}.after span{color:#a99abb;font-size:10px}.keyboard{margin-top:28px}.keyboard p{width:100%;color:#b8aacf;font-size:12px;margin-bottom:0}footer{padding:40px 0 18px;text-align:center;color:#887a9d;font-size:10px}@media(max-width:600px){main{padding:18px 10px}.canvas-wrap{border-radius:18px}label{margin-left:0}.after div{padding:12px 4px}}