:root{--bg: #3d3d3d;--panel: #282828;--panel-2: #303030;--btn: #545454;--text: #e6e6e6;--muted: #9a9a9a;--line: #1f1f1f;--line-soft: #4a4a4a;--accent: #e87d0d;--accent-hover: #ff9f3c;--select: #5680c2;--radius: 4px;--pixel: "Pixelify Sans", ui-monospace, monospace;font-family:Inter,SF Pro Text,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}#app{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line)}.center{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px;box-shadow:0 6px 24px #00000073}.center h1{margin:0;font-family:var(--pixel);color:var(--accent);font-size:22px;text-shadow:2px 2px 0 rgba(0,0,0,.5)}.center p{margin:4px 0 8px;color:var(--muted);font-size:11px}.center a{color:var(--text);font-size:12px;text-decoration:none;background:var(--btn);border:1px solid var(--line);border-radius:var(--radius);padding:4px 10px;display:inline-block}.center a:hover{background:#656565}.quad{position:relative;min-width:0;background:var(--bg);display:grid;grid-template-columns:minmax(120px,34%) minmax(0,1fr);align-items:center;gap:12px;padding:28px 28px 22px;overflow:hidden}.quad header{position:absolute;top:14px;left:18px;right:18px;display:flex;align-items:baseline;gap:10px}.quad .key{font-family:var(--pixel);font-size:30px;color:var(--accent);text-shadow:2px 2px 0 rgba(0,0,0,.55);line-height:1}.quad .what{font-family:var(--pixel);font-size:18px}.quad .finger{margin-left:auto;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.quad .note{position:absolute;left:18px;right:18px;bottom:12px;margin:0;color:var(--muted);font-size:12px;line-height:1.4}.hand{width:100%;max-height:66%}.hand .palm,.hand .digit{fill:#2c2c2c;stroke:#1a1a1a;stroke-width:2}.hand .digit.on{fill:#3a2c1e;stroke:var(--accent)}.hand .btn{fill:#545454;stroke:#1a1a1a;stroke-width:1.5;transition:fill .12s,transform .12s;transform-box:fill-box;transform-origin:center}.hand .btn.on{fill:var(--accent)}.hand .btn.on.press{fill:var(--accent-hover);transform:scale(.72)}.hand .ripple{fill:none;stroke:var(--accent-hover);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}.hand .ripple.go{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(2.6)}}.hand .label{fill:var(--muted);font-size:11px;font-family:system-ui,sans-serif;text-anchor:middle}.hand .label.on{fill:var(--accent);font-weight:700}.effect{display:flex;flex-direction:column;gap:12px;min-width:0}.chips{display:flex;gap:4px;flex-wrap:wrap}.chip{flex:1;min-width:52px;text-align:center;font-size:11px;font-weight:600;padding:6px 0;border-radius:var(--radius);background:var(--btn);border:1px solid var(--line);color:var(--text);transition:background .25s,color .25s}.chip.on{color:#1d1d1d}.big{font-family:var(--pixel);font-size:clamp(26px,4.4vw,52px);line-height:1;text-shadow:3px 3px 0 rgba(0,0,0,.55);transition:color .25s}.big.small{font-size:clamp(20px,3vw,34px)}.sub{color:var(--muted);font-size:12px}.meter{position:relative;height:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:3px;overflow:hidden}.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);transition:width .35s}.row{display:flex;align-items:flex-end;gap:14px}.cube{background:#ffd43b;border:1px solid var(--line);border-radius:2px;transition:width .35s,height .35s;box-shadow:2px 2px #0006}.stage{position:relative;height:120px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.stage .grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(#4a4a4a55 1px,transparent 1px),linear-gradient(90deg,#4a4a4a55 1px,transparent 1px);background-size:16px 16px}.stage .start{position:absolute;width:14px;height:14px;border:2px dashed var(--muted);border-radius:50%}.stage .cam{position:absolute;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:18px solid var(--accent);transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),transform .7s}.stage .piece{position:absolute;width:18px;height:18px;background:#ffd43b;border:1px solid var(--line);bottom:10px;transition:opacity .3s}.rpy{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font-variant-numeric:tabular-nums}.rpy div{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:4px 8px}.rpy span{display:block;font-size:9px;color:var(--muted);letter-spacing:.08em}.rpy b{font-size:15px;font-weight:600;transition:color .3s}.rpy b.zero{color:var(--accent)}@media(max-width:760px){#app{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(260px,1fr));position:static;min-height:100%}.center{position:static;transform:none;margin:0;border-radius:0}body{overflow:auto}}.quad.left .note{right:140px}.quad.right .note{left:140px}.quad.top{padding-bottom:56px}.quad.bottom{padding-top:96px}.quad.bottom header{top:58px}.center{padding:8px 14px}.center h1{font-size:18px}.center p{margin:2px 0 6px}@media(max-width:760px){.quad.left .note,.quad.right .note{left:18px;right:18px}.quad.bottom header{top:14px}.quad.bottom{padding-top:28px}}