.admin-banner{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 16px;background:#5d3a4d;color:#ffe8d6;font-size:.9rem;font-weight:700;letter-spacing:.02em}.admin-banner-logout{border:1px solid rgba(255,232,214,.55);border-radius:999px;background:transparent;color:#ffe8d6;font:inherit;font-size:.8rem;padding:2px 12px;cursor:pointer}.admin-banner-logout:hover{background:#ffe8d626}.piano-dock{width:100%;background:linear-gradient(180deg,#7c4a63,#5d3a4d);padding:10px 10px 0;box-sizing:border-box;box-shadow:0 -6px 24px #5d3a4d59;border-radius:22px 22px 0 0;line-height:0}.piano-svg{width:100%;height:auto;max-height:32vh;display:block}.white-key{fill:#fffdf7;stroke:#d9cfc4;stroke-width:1}.black-key{fill:#33313b;stroke:#1f1e25;stroke-width:1}.glow{fill:#ffb347;pointer-events:none;transition:opacity .3s ease-out}.glow.on{transition:opacity 30ms ease-in;filter:drop-shadow(0 0 7px #ffb347)}.bubble{transition:opacity .3s ease-out;opacity:1}.bubble.off{opacity:0}.hint-glow{fill:#2a9d8f;pointer-events:none;animation:hint-pulse 1.1s ease-in-out infinite}@keyframes hint-pulse{0%,to{opacity:.15}50%{opacity:.55}}.hint-name{animation:hint-pulse 1.1s ease-in-out infinite;animation-direction:alternate}.flash-overlay{fill:#e05263;pointer-events:none;animation:flash-fade .45s ease-out forwards}@keyframes flash-fade{0%{opacity:.45}to{opacity:0}}.bubble-text{font-size:12px;font-weight:700;fill:#fff;font-family:inherit}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-size:.95rem;font-weight:600;background:#fff;box-shadow:0 2px 8px #5d3a4d1f}.status-pill .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.status-pill.connected{color:#1d7a4f}.status-pill.connected .dot{background:#2ecc71;box-shadow:0 0 6px #2ecc71}.status-pill.waiting{color:#9a6a12}.status-pill.waiting .dot{background:#f5a623;animation:pulse 1.4s ease-in-out infinite}.status-pill.problem{color:#b23a48}.status-pill.problem .dot{background:#e05263}.status-pill.demo{color:#6b4ba1}.status-pill.demo .dot{background:#9b59b6;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.game{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative}.game-top{display:flex;align-items:center;gap:18px;width:90%;justify-content:space-between}.game-title{font-size:1.4rem;font-weight:700;color:#5d3a4d}.streak{font-size:1.5rem;font-weight:800;color:#b8860b;background:#fff;border-radius:999px;padding:6px 18px;box-shadow:0 2px 8px #5d3a4d1f}.pill-btn{border:none;border-radius:999px;padding:10px 20px;font:inherit;font-weight:700;color:#5d3a4d;background:#fff;box-shadow:0 2px 8px #5d3a4d26;cursor:pointer}.pill-btn:hover{transform:translateY(-1px)}.pill-btn.big{font-size:1.3rem;padding:12px 34px}.pill-btn.go{background:#2ecc71;color:#fff}.pill-btn.stop{background:#f5a623;color:#fff}.stave-wrap{position:relative;width:66vw;background:#fff;border-radius:24px;padding:10px 24px;box-shadow:0 8px 32px #5d3a4d26}.stave-frame{position:relative}.stave-host{width:100%;line-height:0;display:flex;justify-content:center}.stave-ghost-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.ghost-overlay{animation:ghost-fade 1.5s ease-out forwards}@keyframes ghost-fade{0%{opacity:.9}60%{opacity:.7}to{opacity:0}}.sweep-cursor{position:absolute;top:8%;height:84%;left:24px;width:4px;border-radius:2px;background:linear-gradient(180deg,#ff8a5c,#e2618b);box-shadow:0 0 8px #e2618b99;opacity:0;pointer-events:none;will-change:transform}.hint-row{min-height:44px;display:flex;align-items:center}.hint-bubble{background:#fdf1e3;color:#9a6a12;font-size:1.2rem;font-weight:700;border-radius:999px;padding:8px 24px;animation:hint-pop .25s ease-out}@keyframes hint-pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.game-bottom{display:flex;align-items:center;gap:40px}.beat-counter{display:flex;gap:22px}.beat-num{font-size:2.6rem;font-weight:800;color:#d8bfcd;width:52px;height:52px;line-height:52px;text-align:center;border-radius:50%;transition:all 80ms ease-out}.beat-num.on{color:#fff;background:#e2618b;transform:scale(1.25);box-shadow:0 0 16px #e2618b80}.success-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;overflow:hidden;display:flex;align-items:center;justify-content:center}.success-burst{text-align:center;animation:burst-in .35s cubic-bezier(.2,1.6,.4,1)}.success-word{font-size:5rem;font-weight:900;color:#ff8a5c;text-shadow:0 4px 0 #ffffff,0 8px 24px rgba(226,97,139,.4)}.success-note{font-size:3rem;font-weight:800;color:#2ecc71;text-shadow:0 3px 0 #ffffff}@keyframes burst-in{0%{transform:scale(.2) rotate(-6deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.confetti{position:absolute;top:-20px;border-radius:2px;animation-name:confetti-fall;animation-timing-function:ease-in;animation-fill-mode:forwards}@keyframes confetti-fall{to{transform:translateY(105vh) rotate(var(--spin, 540deg))}}.streak{white-space:nowrap}.streak-threshold{font-size:1rem;font-weight:700;color:#c9a86a}.level-done-badge{margin-left:10px;color:#2ecc71;font-weight:900}.hint-bubble.intro{background:#eef6ff;color:#3a6ea8}.success-plus{font-size:2rem;font-weight:900;color:#b8860b;text-shadow:0 2px 0 #ffffff;margin-top:6px}.success-sight{font-size:2.8rem;font-weight:900;color:#ffb300;text-shadow:0 3px 0 #ffffff,0 6px 20px rgba(255,179,0,.55);margin-top:8px;animation:sight-pop .5s cubic-bezier(.2,1.8,.4,1)}@keyframes sight-pop{0%{transform:scale(.3) rotate(-4deg);opacity:0}70%{transform:scale(1.15) rotate(1deg)}to{transform:scale(1) rotate(0);opacity:1}}.feedback-slot{display:grid;align-items:center;justify-items:center;min-height:2.4em;flex:1;min-width:0}.feedback-slot>*{grid-area:1 / 1}.feedback-title{transition:opacity .18s ease}.feedback-title.yield{opacity:0}.feedback-band{display:flex;align-items:baseline;gap:12px;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:100%}.feedback-band.in{opacity:1;transform:translateY(0);transition:opacity .18s cubic-bezier(.2,1,.4,1),transform .18s cubic-bezier(.2,1,.4,1)}.band-word{font-size:1.5rem;font-weight:900;letter-spacing:.04em;color:#e2618b}.band-chip{font-size:1.1rem;font-weight:900;color:#b8860b;background:#fdf1e3;border-radius:999px;padding:2px 12px}.band-star{color:#f0b429;margin-left:2px}.band-detail{font-size:.95rem;font-weight:600;color:#a58a99;overflow:hidden;text-overflow:ellipsis}.band-word.shimmer{color:#b8860b;background:linear-gradient(100deg,#b8860b 20%,#ffe9a8 40%,#ffd24d,#ffe9a8 60%,#b8860b 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gold-shimmer .9s ease-out 1}@keyframes gold-shimmer{0%{background-position:120% 0}to{background-position:-60% 0}}.streak{position:relative}.star-burst{position:absolute;left:50%;top:50%;pointer-events:none}.star-particle{position:absolute;border-radius:50%;background:#f0b429;animation:star-pop ease-out forwards}@keyframes star-pop{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}.complete-banner{position:absolute;bottom:calc(100% + 10px);left:-12vw;right:-12vw;height:60px;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:30}.complete-banner-sweep{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,#5d3a4d 12%,#8a4a6a 50%,#5d3a4d 88%,transparent);transform:translate(-100%);animation:banner-sweep 2.2s cubic-bezier(.6,0,.2,1) forwards}@keyframes banner-sweep{0%{transform:translate(-100%)}18%{transform:translate(0)}82%{transform:translate(0)}to{transform:translate(100%)}}.complete-banner-text{position:relative;color:#ffe8d6;font-size:1.6rem;font-weight:900;letter-spacing:.18em;display:flex;align-items:baseline;gap:16px;animation:banner-text 2.2s ease forwards}.complete-banner-sub{font-size:.95rem;font-weight:700;letter-spacing:.04em;color:#e8bfa8}@keyframes banner-text{0%,12%{opacity:0}25%,80%{opacity:1}to{opacity:0}}.pass-counter{position:absolute;top:8px;right:16px;font-size:.85rem;font-weight:700;color:#c5afba;pointer-events:none}.levels-page{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:18px;padding:8px 4vw;overflow-y:auto}.levels-top{display:flex;align-items:center;width:100%;justify-content:space-between}.levels-heading{font-size:1.8rem;color:#5d3a4d;margin:0}.levels-top-spacer{width:96px}.levels-note{color:#8a6a7c;font-size:1.1rem}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;width:100%}.level-card{display:flex;flex-direction:column;gap:8px;text-align:left;border:none;border-radius:20px;padding:16px 18px;font:inherit;color:#5d3a4d;background:#fff;box-shadow:0 4px 16px #5d3a4d1f;cursor:pointer;transition:transform .12s ease-out}.level-card:hover:not(:disabled){transform:translateY(-3px)}.level-card.locked{opacity:.55;cursor:not-allowed;background:#f3e9ef}.level-card.complete{outline:3px solid #2ecc71}.level-card-head{display:flex;align-items:center;gap:10px}.level-num{font-size:1.4rem;font-weight:800;background:#e2618b;color:#fff;border-radius:50%;min-width:40px;height:40px;line-height:40px;text-align:center}.level-card.locked .level-num{background:#c8b2be}.level-name{font-size:1.2rem;font-weight:800;flex:1}.level-check{font-size:1.4rem;font-weight:900;color:#2ecc71}.level-intro{margin:0;font-size:.95rem;color:#8a6a7c;min-height:2.6em}.level-progress{height:10px;border-radius:999px;background:#f3e4ec;overflow:hidden}.level-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#ff8a5c,#e2618b);transition:width .3s ease-out}.level-stars{font-weight:800;color:#b8860b}.act-section{width:100%}.act-title{margin:10px 0 12px;font-size:1.15rem;color:#8a6a7c;letter-spacing:.02em;border-bottom:2px solid #f3e4ec;padding-bottom:6px}.level-card.coming-soon{opacity:.6;cursor:not-allowed;background:#f7f2f5}.coming-soon-chip{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a6a7c;background:#eee3ea;border-radius:999px;padding:3px 10px}.admin-chip{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#2a7a68;background:#ddf2ec;border-radius:999px;padding:3px 10px}.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;position:relative}.header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:18px 28px}.header-title h1{margin:0;font-size:2.1rem;color:#5d3a4d;letter-spacing:.5px}.logo{display:inline-block;transform:rotate(-8deg)}.tagline{margin:4px 0 0;color:#8a6275;font-size:1.05rem}.header-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.demo-toggle,.range-select{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 16px;font-weight:600;color:#5d3a4d;font-size:.95rem;box-shadow:0 2px 8px #5d3a4d1f;cursor:pointer}.demo-toggle input{accent-color:#9b59b6;width:16px;height:16px;cursor:pointer}.range-select select{border:none;background:#fdf1e3;border-radius:8px;padding:4px 8px;font:inherit;color:#5d3a4d;cursor:pointer}.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 24px}.stage-idle{display:flex;flex-direction:column;align-items:center;gap:20px;max-height:100%;overflow-y:auto;padding:12px 0}.marquee{text-align:center;font-family:Palatino Linotype,Palatino,Book Antiqua,Georgia,Times New Roman,serif;animation:marquee-rise .9s cubic-bezier(.22,1,.36,1) both}.marquee-overline{font-size:clamp(1rem,2.2vw,1.4rem);letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:#8a6275}.marquee-title{margin:8px 0 0;font-size:clamp(2.6rem,6vw,4.4rem);font-weight:700;letter-spacing:.02em;color:#5d3a4d;text-shadow:0 1px 0 rgba(255,251,244,.85),0 3px 6px rgba(93,58,77,.22)}.marquee-flourish{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;color:#c08552;font-size:1.1rem}.marquee-rule{height:1px;width:min(110px,22vw);background:linear-gradient(90deg,transparent,#c08552)}.marquee-rule.flip{background:linear-gradient(90deg,#c08552,transparent)}.marquee-sub{margin:10px 0 0;font-style:italic;font-size:clamp(.95rem,1.8vw,1.15rem);color:#8a6275;animation:marquee-fade .7s ease-out .45s both}@keyframes marquee-rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes marquee-fade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.marquee,.marquee-sub{animation:none}}.play-note-btn{border:none;border-radius:999px;padding:18px 42px;font:inherit;font-size:1.5rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff8a5c,#e2618b);box-shadow:0 8px 24px #e2618b59;cursor:pointer;transition:transform .12s ease-out}.play-note-btn:hover{transform:translateY(-2px) scale(1.03)}.idle-slot{display:grid;place-items:center;min-height:2.2em;font-size:1.3rem}.idle-slot>*{grid-area:1 / 1;margin:0;transition:opacity .15s ease,transform .15s ease}.idle-slot>.faded{opacity:0;transform:translateY(4px);pointer-events:none}.idle-hint{color:#b08ba0;font-size:1.3rem;font-weight:600;text-align:center}.idle-notes{color:#5d3a4d;font-size:1.3rem;font-weight:800;letter-spacing:.06em;text-align:center}.help-card{background:#fff;border-radius:24px;padding:32px 40px;max-width:520px;text-align:center;box-shadow:0 8px 32px #5d3a4d26}.help-emoji{font-size:3rem}.help-card h2{color:#5d3a4d;margin:12px 0}.help-card p{color:#7a5a6b;font-size:1.05rem;line-height:1.5}.help-hint{background:#fdf1e3;border-radius:14px;padding:12px 16px}.admin-link{position:absolute;right:18px;bottom:214px;font-size:.78rem;font-weight:600;color:#c5afba;text-decoration:none;z-index:5}.admin-link:hover{color:#8a6275;text-decoration:underline}.admin-page,.admin-gate{max-width:1080px;margin:0 auto;padding:28px 24px 80px;color:#5d3a4d}.admin-gate{max-width:420px;text-align:center;padding-top:12vh}.admin-gate h1{margin-bottom:4px}.admin-gate form{display:flex;gap:10px;margin-top:18px}.admin-gate input{flex:1}.admin-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}.admin-header h1{font-size:1.6rem;margin:0}.admin-header-actions{display:flex;align-items:center;gap:14px}.admin-header-actions a{color:#e2618b;font-weight:700;text-decoration:none}.admin-error{background:#fdecea;color:#b23b2e;border-radius:12px;padding:10px 16px;margin:10px 0;font-weight:600}.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px #5d3a4d1f}.admin-table th,.admin-table td{text-align:left;padding:10px 14px;border-bottom:1px solid #f3e4ec;vertical-align:top}.admin-table th{background:#fdf1f6;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}.admin-table tr:last-child td{border-bottom:none}.cell-name{font-weight:800}.cell-intro{font-size:.85rem;color:#8a6a7c;max-width:420px}.cell-actions{white-space:nowrap}.admin-page .pill-btn,.admin-gate .pill-btn{border:none;border-radius:999px;padding:8px 18px;font:inherit;font-weight:700;color:#5d3a4d;background:#fff;box-shadow:0 2px 8px #5d3a4d26;cursor:pointer}.admin-page .pill-btn.small{padding:5px 14px;font-size:.9rem;margin-right:8px}.admin-page .pill-btn.primary,.admin-gate .pill-btn.primary{background:#e2618b;color:#fff}.admin-page .pill-btn.danger{background:#fdecea;color:#b23b2e}.admin-page .pill-btn:disabled,.admin-gate .pill-btn:disabled{opacity:.5;cursor:default}.add-level{margin-top:18px}.admin-page input,.admin-page select,.admin-page textarea,.admin-gate input{font:inherit;color:inherit;border:2px solid #eed6e2;border-radius:10px;padding:7px 10px;background:#fff}.admin-page input:focus,.admin-page select:focus,.admin-page textarea:focus,.admin-gate input:focus{outline:none;border-color:#e2618b}.admin-form{margin-top:22px;background:#fff;border-radius:16px;padding:20px 24px;box-shadow:0 4px 16px #5d3a4d1f}.admin-form h2{margin:0 0 14px;font-size:1.25rem}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 16px;margin-bottom:14px}.form-grid label,.form-row fieldset label.inline{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:700}.form-grid label.wide{grid-column:span 2}.form-grid label.full{grid-column:1 / -1}.form-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px}.form-row fieldset{border:2px solid #f3e4ec;border-radius:12px;padding:10px 14px;display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;max-width:380px}.form-row legend{font-size:.85rem;font-weight:800;padding:0 6px}label.check{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}.feature-grid-box{border:2px solid #f3e4ec;border-radius:12px;padding:10px 14px;margin-bottom:14px}.feature-grid-box legend{font-size:.85rem;font-weight:800;padding:0 6px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 14px}.feature-check{font-size:.9rem}.field-hint{margin:8px 0 0;font-size:.75rem;font-weight:600;color:#a58a99}.feature-chip-row{display:flex;flex-wrap:wrap;gap:4px;max-width:220px}.feature-chip{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:700;white-space:nowrap}.feature-chip.supported{background:#e8f5e4;color:#3d7a3a}.feature-chip.unsupported{background:#fdf4e3;color:#9a6a12}.feature-chip.none{color:#c5afba;background:none;padding-left:0}.raw-json{margin:8px 0 14px}.raw-json summary{cursor:pointer;font-weight:700;color:#8a6a7c}.raw-json textarea{width:100%;margin-top:10px;font-family:ui-monospace,Cascadia Code,Menlo,monospace;font-size:.85rem;line-height:1.45}.form-actions{display:flex;gap:12px;justify-content:flex-end}.cell-feature-note{margin-top:4px;font-size:.8rem;font-weight:700;color:#9a6a12}.admin-note{background:#fdf4e3;color:#9a6a12;border-radius:12px;padding:10px 16px;margin-bottom:14px;font-weight:600}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}body{font-family:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Segoe UI,system-ui,sans-serif;background:linear-gradient(160deg,#fff7ec,#ffe8d6 55%,#ffd9c4);color:#4a3540}