:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#09111f;--bg-accent:#10233f;--panel:#080f1cd1;--panel-border:#89c6ff29;--text:#ecf5ff;--muted:#9ab3cc;--cyan:#57d5ff;--lime:#cffc67;--coral:#ff8a65;--lava:#ff6b2c;--shadow:0 28px 90px #00000061;font-family:Trebuchet MS,Segoe UI,sans-serif}*{box-sizing:border-box}body{height:100vh;min-height:100vh;color:var(--text);background:radial-gradient(circle at 0 0,#57d5ff2e,#0000 26%),radial-gradient(circle at 100% 100%,#cffc6724,#0000 24%),linear-gradient(140deg,#08101d 0%,#0c1b31 48%,#142946 100%);margin:0;overflow:hidden}.shell{grid-template-columns:300px minmax(0,1fr) 300px;gap:18px;height:100vh;padding:16px;display:grid}.panel,.stage-wrap{border:1px solid var(--panel-border);background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:24px}.panel{flex-direction:column;gap:12px;min-height:0;padding:16px;display:flex}.left-panel{padding-top: 50px}.left-panel,.right-panel{overflow:hidden}.eyebrow{color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-size:12px}h1,h2,p{margin:0}h1{font-size:36px;line-height:.95}h2{letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;font-size:15px}.lede{color:var(--muted);margin-top:10px;font-size:15px;line-height:1.4}.card{background:#ffffff0a;border:1px solid #ffffff0f;border-radius:16px;padding:14px}.card p+p{margin-top:6px}.card p{font-size:14px;line-height:1.35}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.level-button{appearance:none;color:var(--text);font:inherit;cursor:pointer;background:#57d5ff14;border:1px solid #57d5ff38;border-radius:12px;padding:10px 0;font-weight:700;transition:background .14s,border-color .14s,transform .14s}.level-button:hover{background:#57d5ff29;border-color:#57d5ff61;transform:translateY(-1px)}.level-button.is-active{color:var(--lime);background:#cffc6729;border-color:#cffc6766}.kbd{min-width:24px;color:var(--cyan);background:#57d5ff1f;border:1px solid #57d5ff3d;border-radius:999px;justify-content:center;align-items:center;margin:0 1px;padding:2px 8px;font-weight:700;display:inline-flex}.stage-wrap{place-items:center;padding:12px;display:grid;overflow:hidden}canvas{width:min(100%,136.8vh - 76.608px);height:auto;max-height:calc(100vh - 56px);display:block}.hud-line{color:var(--muted);justify-content:space-between;gap:16px;padding:6px 0;display:flex}.hud-line strong{color:var(--text)}.tag-list{flex-wrap:wrap;gap:8px;display:flex}.tag{color:#ffd8ca;white-space:nowrap;appearance:none;cursor:pointer;font-size:12px;line-height:1;font:inherit;background:#ff8a651f;border:1px solid #ff8a6542;border-radius:999px;align-items:center;padding:6px 10px;transition:background .14s,border-color .14s,transform .14s;display:inline-flex}.tag:hover,.tag:focus-visible,.tag.is-active{background:#ff8a6533;border-color:#ffb4a06b;outline:none;transform:translateY(-1px)}.tag-description{color:var(--muted);min-height:38px;margin-top:12px}@media (width<=1280px){.shell{grid-template-columns:270px minmax(0,1fr) 270px;gap:14px;padding:12px}h1{font-size:32px}}@media (width<=1100px){.shell{grid-template-columns:1fr;height:auto;min-height:100vh;overflow:auto}body{height:auto;overflow:auto}}