:root{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;color:#eef6ff;background:#071222;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html{height:100%;overscroll-behavior:none}
body{min-height:100%;margin:0;background:radial-gradient(ellipse 70% 22% at 50% -4%,#174c76 0%,transparent 100%),radial-gradient(ellipse 120% 50% at 100% 75%,#152047 0%,transparent 70%),#071222;overflow-x:hidden}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
button:focus-visible{outline:3px solid #80eaff;outline-offset:2px}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
.app{width:min(100%,450px);min-height:100dvh;margin:0 auto;padding:12px 12px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.app:before{content:"";position:absolute;top:105px;right:-130px;width:250px;height:150px;background:radial-gradient(ellipse,#7b3edd30,transparent 70%);pointer-events:none}
.app-top{min-height:61px;display:flex;justify-content:space-between;align-items:center;gap:7px;position:relative}
.icon-button{width:42px;height:42px;display:grid;place-items:center;flex:none;color:#a9d8ff;background:#101f37;border:1px solid #36567c;border-radius:50%;box-shadow:inset 0 0 14px #4989c50d;font-weight:800;font-size:21px}
.icon-button svg{width:22px}
.brand{display:flex;flex-direction:column;align-items:center;line-height:.93;text-align:center;filter:drop-shadow(0 0 12px #288ced55)}
.brand-top{font-weight:1000;font-size:clamp(25px,7.2vw,37px);letter-spacing:.045em;background:linear-gradient(105deg,#76e9ff,#a7c8ff 57%,#e79cff);color:transparent;background-clip:text;-webkit-background-clip:text}
.brand-waves{font-size:18px;letter-spacing:-2px;vertical-align:3px;color:#79dfff;-webkit-text-fill-color:#79dfff}
.brand-bottom{margin-top:6px;font-size:clamp(14px,4.6vw,21px);font-weight:850;letter-spacing:.34em;color:#d9d8ff;text-shadow:0 0 12px #8d5cf6a3}
.brand-node{font-size:9px;vertical-align:5px;color:#ed99ef;margin-left:-4px}
.status-row{display:grid;grid-template-columns:1.5fr 1fr;gap:9px}
.status-card{background:linear-gradient(110deg,#101d35e8,#0a1b33bd);border:1px solid #31476b;border-radius:15px;padding:10px 13px;min-width:0;box-shadow:inset 0 1px #a6c9ff0b}
.eyebrow{font-size:9px;color:#91aacc;font-weight:850;letter-spacing:.16em}
.stage-line,.move-line{display:flex;justify-content:space-between;gap:5px;align-items:center;margin:3px 0 2px}
.stage-line strong{font-size:20px;letter-spacing:-.035em;white-space:nowrap}
.tiny-visual{font-size:20px;color:#6b80f5;letter-spacing:2px;white-space:nowrap}
.move-line strong{font-size:23px;line-height:1}
.move-line .muted{font-size:10px}
.muted{color:#99aecb;font-size:11px;white-space:nowrap}
.section-title,.board-title{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.12em;color:#b1caeb;font-weight:800}
.instrument-section{display:flex;flex-direction:column;gap:7px}
#connected-count{color:#7bdfe8}
.instrument-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.instrument{border:1px solid #293d5a;border-radius:12px;background:#0c1b2fa8;padding:7px 3px;display:flex;gap:5px;align-items:center;justify-content:center;min-width:0;opacity:.65;transition:border-color .18s,background .18s,opacity .18s}
.instrument.is-on{opacity:1;background:#152747;border-color:var(--tone);box-shadow:inset 0 0 18px #8af6ff0b,0 0 10px color-mix(in srgb,var(--tone) 17%,transparent)}
.instrument-symbol{font-size:17px;line-height:1;color:var(--tone);font-weight:900}
.instrument-text{font-size:10px;font-weight:800;white-space:nowrap}
.instrument-light{display:block;width:18px;height:3px;border-radius:5px;background:#496078;margin-top:4px}
.instrument.is-on .instrument-light{background:var(--tone);box-shadow:0 0 8px var(--tone)}
.board-section{display:flex;flex-direction:column;gap:6px}
.board-title{padding:0 3px;font-size:10px;letter-spacing:.09em}
#goal-state{color:#97adc9}
#goal-state.is-on{color:#efadff}
.tiny-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6ce7fa;box-shadow:0 0 7px #63ddf8}
.board-shell{padding:5px;background:linear-gradient(135deg,#19365d,#091b35 55%,#31244d);border:1px solid #3b6292;border-radius:15px;box-shadow:0 12px 36px #01071172,inset 0 1px #9ccfff34}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;aspect-ratio:1;touch-action:none;user-select:none}
.tile{position:relative;aspect-ratio:1;min-width:0;padding:0;overflow:hidden;appearance:none;background:linear-gradient(145deg,#21314d,#0b172c 73%);border:1px solid #416080;border-radius:9px;color:#9cb3c9;box-shadow:inset 0 2px 6px #a8daff0a,inset 0 -3px 8px #0207117d;touch-action:none;transition:background .15s,border-color .15s,transform .09s}
.tile:before,.tile:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#6386ad;top:6px;left:6px;box-shadow:0 0 2px #000}
.tile:after{left:auto;right:6px}
.tile.is-powered{color:var(--tone);border-color:color-mix(in srgb,var(--tone) 68%,#33466d);background:linear-gradient(145deg,#243454,#0c1b33 75%);box-shadow:inset 0 2px 8px color-mix(in srgb,var(--tone) 9%,transparent),0 0 10px color-mix(in srgb,var(--tone) 20%,transparent)}
.tile.is-selected{outline:3px solid #e2b1ff;outline-offset:-3px;background:#2a2553}
.tile:active{transform:scale(.95)}
.tile .wire{width:100%;height:100%;position:absolute;inset:0;overflow:visible}
.tile .wire .rail{fill:none;stroke:#8294af;stroke-width:20;stroke-linecap:round;opacity:.51}
.tile .wire .inner{fill:none;stroke:#bec9da;stroke-width:9;stroke-linecap:round;opacity:.63}
.tile .wire .signal{fill:none;stroke:currentColor;stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 6px currentColor);animation:breathe 1.65s ease-in-out infinite alternate}
.tile .glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:51%;height:51%;border-radius:50%;background:#0e1931e8;box-shadow:0 0 0 2px #a8c7ff32,0 4px 13px #03060c88;color:inherit;padding:5px}
.tile.is-powered .glyph{box-shadow:0 0 0 2px currentColor,0 0 18px currentColor}
.tile .glyph svg{width:100%;height:100%;display:block}
.tile[data-kind="drums"]{--tone:#ff587c}
.tile[data-kind="bass"]{--tone:#48afff}
.tile[data-kind="piano"]{--tone:#ffd55a}
.tile[data-kind="synth"]{--tone:#63f5bc}
.tile[data-kind="source"]{--tone:#ff6289}
.tile[data-kind="goal"]{--tone:#ce9bff}
.tile[data-kind="wire"]{--tone:#68d8ff}
.tile.is-powered[data-kind="source"] .glyph,.tile.is-powered[data-kind="goal"] .glyph{animation:core-pulse 1.5s ease-in-out infinite}
@keyframes breathe{from{opacity:.67}to{opacity:1}}
@keyframes core-pulse{50%{transform:translate(-50%,-50%) scale(1.06)}}
.board-note{min-height:23px;display:grid;place-items:center;text-align:center;color:#a9bdd7;font-size:11px;line-height:1.45;padding:0 4px}
.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.control{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;min-height:66px;min-width:0;border:1px solid #355478;background:linear-gradient(160deg,#162944,#0c1a30);color:#dbe7fb;border-radius:14px;font-size:11px;font-weight:850;padding:5px 3px;box-shadow:inset 0 1px #9cd2f40d}
.control.active{border-color:#59c7ff;background:linear-gradient(160deg,#184877,#133057);color:#f2faff;box-shadow:0 0 15px #36baff28}
.control:nth-child(2).active{border-color:#cf8cff;background:linear-gradient(160deg,#4a2a77,#28194b)}
.control-icon{font-size:27px;line-height:1.15;font-weight:400}
.control.play{background:linear-gradient(150deg,#0f674f,#084c43);border-color:#50ffc6;color:#b9ffea;box-shadow:inset 0 1px #c3ffe22a,0 0 14px #2ce7ae24}
.control.play.is-playing{background:linear-gradient(150deg,#246f68,#103f44)}
.play-glyph{font-size:23px}
.mix-footer{margin-top:auto;border:1px solid #294368;background:linear-gradient(100deg,#0f1e35,#0a1930);border-radius:14px;min-height:54px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:7px}
.mix-hint{font-size:10px;color:#a2bedf;margin-top:4px}
.equalizer{display:flex;align-items:center;justify-content:center;gap:3px;height:36px;flex:1;max-width:180px;min-width:55px;overflow:hidden}
.bar{width:4px;min-width:3px;height:calc(6px + var(--h) * 1px);border-radius:6px;background:var(--c);opacity:.7;box-shadow:0 0 6px var(--c)}
.is-playing .bar{animation:jump var(--d) ease-in-out infinite alternate;opacity:1;animation-delay:var(--delay)}
@keyframes jump{to{height:6px;opacity:.6}}
.star{font-size:15px;color:#ffd36a;letter-spacing:-2px;white-space:nowrap}
.overlay{position:fixed;inset:0;z-index:10;background:#020819cc;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:20px}
.dialog{width:min(100%,390px);background:linear-gradient(145deg,#1a3050,#0c1830);border:1px solid #5697cc;border-radius:23px;padding:28px 24px 24px;box-shadow:0 24px 90px #000c;position:relative}
.dialog-kicker{font-size:10px;color:#81d8f8;font-weight:900;letter-spacing:.2em}
.dialog h2{font-size:29px;letter-spacing:-.035em;margin:8px 0 15px}
.dialog p{font-size:13px;line-height:1.85;color:#c8d7ed}
.red{color:#ff587c}.purple{color:#d19cff}
.dialog-button{width:100%;margin-top:15px;min-height:48px;background:linear-gradient(110deg,#5ee0ef,#8e9bff);color:#091633;border:0;border-radius:12px;font-weight:900}
.win-dialog{text-align:center}
.win-emblem{font-size:41px;margin:0 auto 9px;background:linear-gradient(90deg,#48bcff,#ff97da);color:transparent;background-clip:text;-webkit-background-clip:text}
.win-stars{font-size:33px;color:#ffd56f;letter-spacing:7px;margin:17px auto 10px;text-shadow:0 0 14px #f8b33a6e}
.link-button{color:#afcdec;background:none;border:none;font-size:12px;margin-top:14px}
@media (max-width:360px){.app{padding:8px;gap:7px}.status-card{padding:8px 9px}.instrument{gap:3px}.instrument-text{font-size:9px}.instrument-symbol{font-size:14px}.control{min-height:56px}.control-icon{font-size:23px}.mix-footer{min-height:48px}}
@media (max-height:760px) and (min-width:350px){.app{gap:6px;padding-top:7px}.app-top{min-height:51px}.status-card{padding:7px 12px}.instrument{padding:5px 2px}.board-section{gap:4px}.control{min-height:57px}.mix-footer{min-height:47px}.board-note{min-height:18px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important}}