:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--night:#091a20;--night-soft:#102a31;--ink:#f7edda;--muted:#b9c8c4;--brass:#edbd62;--brass-light:#ffe0a0;--wine:#7f2f35;--teal:#17616a;--wood:#5a382b;--mint:#73d4bd;--danger-soft:#ffb5a8;--line:#edbd6247;font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif}*{box-sizing:border-box}html{background:var(--night);min-width:320px}body{min-width:320px;min-height:100dvh;color:var(--ink);background:radial-gradient(circle at 50% 18%, #edbd621a, transparent 30rem), var(--night);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;margin:0}button{font:inherit}button:focus-visible,summary:focus-visible{outline:4px solid var(--brass-light);outline-offset:4px}main{opacity:1;width:min(1180px,100%);min-height:100dvh;padding:max(18px, env(safe-area-inset-top)) clamp(16px, 3vw, 38px) max(24px, env(safe-area-inset-bottom));margin:0 auto}[hidden]{display:none!important}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:end;gap:20px;padding-bottom:14px;display:flex}.stage-link{border:1px solid var(--brass);min-height:44px;color:var(--brass-light);white-space:nowrap;padding:11px 14px;font-size:.82rem;font-weight:800;text-decoration:none}.eyebrow{color:var(--brass);letter-spacing:.24em;margin:0 0 3px;font:700 .72rem/1.1 Georgia,serif}h1,h2,p{margin-top:0}h1{margin-bottom:0;font:700 clamp(1.55rem,4vw,2.35rem)/1.1 Georgia,Noto Serif TC,serif}.song-status{text-align:right;align-items:center;gap:12px;display:flex}.song-status strong{color:var(--brass-light);font:700 clamp(1.05rem,3vw,1.45rem)/1 Georgia,serif}.status-stack{justify-items:end;gap:4px;display:grid}.status-stack small{color:var(--muted);letter-spacing:.08em;font:700 .72rem/1 ui-monospace,monospace}#room-badge{color:var(--brass);font-size:.62rem}.status-lamp{color:var(--muted);align-items:center;gap:7px;font-size:.92rem;display:inline-flex}.status-lamp:before{background:var(--brass);width:9px;height:9px;box-shadow:0 0 12px var(--brass);content:"";border-radius:50%}.mode-switch{border:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:16px 0 14px;display:grid}.mode-button{min-height:66px;color:var(--muted);cursor:pointer;background:#ffffff05;border:0;border-bottom:4px solid #0000;padding:10px 16px}.mode-button+.mode-button{border-left:1px solid var(--line)}.mode-button span,.mode-button small{display:block}.mode-button span{font-size:1.1rem;font-weight:800}.mode-button small{margin-top:2px;font-size:.78rem}.mode-button.is-active{border-bottom-color:var(--brass);color:var(--ink);background:#edbd6214}.stage{border:1px solid #edbd6257;border-bottom:12px solid var(--wood);background:linear-gradient(90deg, var(--wine) 0 6%, transparent 6% 94%, var(--wine) 94%), radial-gradient(ellipse at 50% -5%, #ffe0a052, transparent 54%), linear-gradient(#12333a 0 66%, #1a2728 66% 100%);min-height:clamp(245px,34vw,360px);position:relative;overflow:hidden;box-shadow:inset 0 -30px 60px #00000061}.stage:before,.stage:after{z-index:0;content:"";background:repeating-linear-gradient(90deg,#7f2f35f0 0 18px,#5c1f26f0 18px 34px);width:15%;height:75%;position:absolute;top:0}.stage:before{left:-5%;transform:skew(8deg)}.stage:after{right:-5%;transform:skew(-8deg)}.stage-sign{z-index:2;color:var(--brass-light);text-align:center;letter-spacing:.28em;opacity:.76;font:700 clamp(.62rem,1.5vw,.85rem)/1 Georgia,serif;position:absolute;inset:15px 0 auto}.beat-lights{z-index:3;gap:12px;display:flex;position:absolute;top:42px;left:50%;transform:translate(-50%)}.beat-light{border:1px solid var(--brass);background:0 0;border-radius:50%;width:7px;height:7px}.beat-light.is-current{background:var(--brass-light);box-shadow:0 0 16px var(--brass)}.ensemble{z-index:2;position:absolute;inset:68px 8% 10px}.performer{transform-origin:50% 100%;text-align:center;width:clamp(58px,11vw,112px);height:clamp(125px,20vw,205px);animation:4.8s ease-in-out infinite alternate idle-sway;position:absolute;bottom:4%}.performer:nth-child(2){animation-delay:-.8s}.performer:nth-child(3){animation-delay:-1.6s}.performer:nth-child(4){animation-delay:-2.4s}.performer:nth-child(5){animation-delay:-3.2s}.performer--piano{left:2%;transform:scale(.88)}.performer--trumpet{bottom:9%;left:22%}.performer--drums{bottom:12%;left:44%;transform:scale(1.08)}.performer--vibes{bottom:8%;right:20%}.performer--bass{right:1%;transform:scale(.92)}.performer-head{aspect-ratio:1;background:#d6a877;border-radius:48% 48% 44% 44%;width:29%;position:absolute;top:0;left:50%;transform:translate(-50%)}.performer-head:before{content:"";background:#e3ddd1;border-radius:70% 70% 32% 32%;position:absolute;inset:-10% -8% 50%}.performer-body{background:#285d61;border-radius:38% 38% 12% 12%;width:56%;height:49%;position:absolute;top:22%;left:50%;transform:translate(-50%)}.performer--trumpet .performer-body,.performer--bass .performer-body{background:#704048}.performer--drums .performer-body{background:#3d4d71}.performer--vibes .performer-body{background:#6a5939}.instrument-shape{z-index:2;color:var(--brass);text-shadow:0 3px 12px #000;white-space:nowrap;font:800 clamp(1.3rem,4vw,2.7rem)/1 Georgia,serif;position:absolute;top:45%;left:50%;transform:translate(-50%)}.performer b{color:var(--muted);font-size:clamp(.7rem,1.6vw,.92rem);position:absolute;bottom:0;left:0;right:0}.play-area{margin-top:18px}.play-heading{justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px;display:flex}.play-heading p{color:var(--brass);margin-bottom:3px;font-size:.86rem;font-weight:700}.play-heading h2{margin-bottom:0;font:700 clamp(1.3rem,3vw,1.9rem)/1.15 Georgia,Noto Serif TC,serif}.instrument-pads{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.instrument-pad{border:1px solid var(--line);border-bottom:6px solid var(--pad-color,var(--brass));min-height:132px;color:var(--ink);cursor:pointer;touch-action:manipulation;background:#ffffff08;padding:16px 10px 14px}.instrument-pad--piano{--pad-color:#d49b60}.instrument-pad--trumpet{--pad-color:#edbd62}.instrument-pad--drums{--pad-color:#c35b5f}.instrument-pad--vibes{--pad-color:#58a2a5}.instrument-pad--bass{--pad-color:#73b08a}.instrument-pad span,.instrument-pad strong,.instrument-pad small{display:block}.pad-mark{min-height:35px;color:var(--pad-color);font:800 2rem/1 Georgia,serif}.instrument-pad strong{margin-top:7px;font-size:clamp(1rem,2vw,1.2rem)}.instrument-pad small{color:var(--muted);margin-top:5px;font-size:.76rem}.instrument-pad.is-playing{border-color:var(--pad-color);background:color-mix(in srgb, var(--pad-color) 13%, transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--pad-color) 26%, transparent)}body[data-seat]:not([data-seat=all]) .instrument-pads{grid-template-columns:minmax(0,540px);justify-content:center}body[data-seat]:not([data-seat=all]) .instrument-pad{min-height:180px;display:none}body[data-seat=piano] [data-instrument=piano],body[data-seat=trumpet] [data-instrument=trumpet],body[data-seat=drums] [data-instrument=drums],body[data-seat=vibes] [data-instrument=vibes],body[data-seat=bass] [data-instrument=bass]{grid-column:auto;display:block}body[data-seat]:not([data-seat=all]) .performer{opacity:.12;filter:grayscale(.8)}body[data-seat=piano] [data-performer=piano],body[data-seat=trumpet] [data-performer=trumpet],body[data-seat=drums] [data-performer=drums],body[data-seat=vibes] [data-performer=vibes],body[data-seat=bass] [data-performer=bass]{opacity:1;filter:none}.rhythm-surface,.flow-surface{border:2px solid var(--brass);width:100%;min-height:clamp(280px,42vh,430px);color:var(--ink);cursor:pointer;touch-action:manipulation;background:linear-gradient(#12343b,#0d262b);place-items:center;display:grid;position:relative;overflow:hidden}.tile-track{opacity:.72;grid-template-columns:repeat(4,1fr);display:grid;position:absolute;inset:0}.tile-lane{background:linear-gradient(#0000 0 70%,#edbd620a);border-right:1px solid #edbd6229}.tile-lane:last-of-type{border-right:0}.rhythm-tile{border:2px solid var(--brass-light);opacity:0;will-change:transform, opacity;background:linear-gradient(#ffe4a9,#e7a947);border-radius:18px;width:calc(25% - 14px);height:28%;position:absolute;top:0;left:0;box-shadow:0 0 30px #edbd6252}.hit-line{background:var(--brass);height:6px;position:absolute;bottom:13%;left:0;right:0;box-shadow:0 0 24px #edbd62ad}.hit-line b{color:var(--brass-light);letter-spacing:.08em;font-size:.74rem;position:absolute;bottom:12px;right:14px}.rhythm-copy{z-index:2;text-align:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0514189e;border-radius:20px;max-width:88%;padding:18px;position:relative}.rhythm-copy small,.rhythm-copy strong,.rhythm-copy em{display:block}.rhythm-copy small{color:var(--brass-light);font-size:1rem;font-weight:800}.rhythm-copy strong{margin:12px 0;font:800 clamp(3rem,12vw,6.5rem)/.9 Georgia,Noto Serif TC,serif}.rhythm-copy em{color:var(--muted);font-size:clamp(.78rem,2vw,1rem);font-style:normal}.rhythm-surface.is-hit-window{background:linear-gradient(#19464b,#0d292e);box-shadow:inset 0 0 70px #edbd622e}.rhythm-surface.is-together,.flow-surface.is-together{border-color:var(--mint);box-shadow:inset 0 0 70px #73d4bd38}.flow-surface{background:radial-gradient(circle at 78% 22%,#edbd6221,#0000 28%),#102d32;border-color:#58a2a5}.flow-scene{opacity:.8;position:absolute;inset:0}.flow-scene svg{width:100%;height:100%}.flow-path-shadow,.flow-path{fill:none;stroke-linecap:round}.flow-path-shadow{stroke:#00000057;stroke-width:42px}.flow-path{stroke:#58a2a594;stroke-width:18px;stroke-dasharray:3 15}.flow-marker,.flow-goal{aspect-ratio:1;border-radius:50%;width:34px;position:absolute;top:0;left:0}.flow-marker{z-index:2;background:var(--brass-light);box-shadow:0 0 0 8px #edbd6229, 0 0 36px var(--brass);opacity:0;will-change:transform, opacity}.flow-goal{border:5px solid var(--mint);top:21%;left:auto;right:5.2%;box-shadow:0 0 24px #73d4bd70}.flow-copy{z-index:3;text-align:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#051418ad;border-radius:20px;max-width:88%;padding:18px 24px;position:relative}.flow-copy small,.flow-copy strong,.flow-copy em{display:block}.flow-copy small{color:var(--mint);font-size:1rem;font-weight:800}.flow-copy strong{margin:12px 0;font:800 clamp(2.8rem,10vw,5.6rem)/.92 Georgia,Noto Serif TC,serif}.flow-copy em{color:var(--muted);font-size:clamp(.78rem,2vw,1rem);font-style:normal}.flow-surface.is-hit-window{border-color:var(--brass);background:radial-gradient(circle at 78% 22%,#edbd6240,#0000 30%),#15383d}.feedback-row{justify-content:space-between;gap:14px;min-height:54px;padding:15px 2px 8px;display:flex}.feedback-row strong{color:var(--brass-light)}.feedback-row span{color:var(--muted);text-align:right}.transport-row{border-top:1px solid var(--line);align-items:start;gap:12px;margin-top:8px;padding-top:12px;display:flex}.transport-button,.observer-actions button{border:1px solid var(--line);min-height:48px;color:var(--ink);cursor:pointer;background:0 0;padding:10px 18px}.transport-button:disabled{cursor:not-allowed;opacity:.45}.comfort-panel,.observer-panel{color:var(--muted)}.observer-panel{margin-left:auto}.comfort-panel summary,.observer-panel summary{cursor:pointer;min-height:48px;padding:12px 8px}.comfort-content,.observer-content{border:1px solid var(--line);background:#0d252b;width:min(620px,100vw - 32px);padding:16px;box-shadow:0 18px 46px #00000042}.comfort-content{width:min(430px,100vw - 32px)}.comfort-content>p:first-child{color:var(--brass-light);margin-bottom:14px;font-size:.86rem}.setting{border-bottom:1px solid #edbd621f;grid-template-columns:minmax(130px,1fr) minmax(145px,1.2fr);align-items:center;gap:14px;min-height:54px;padding:8px 0;display:grid}.setting span{color:var(--ink);font-weight:700}.setting select,.start-pace select{border:1px solid var(--line);min-height:46px;color:var(--ink);font:inherit;background:#12343b;border-radius:0;padding:8px 34px 8px 12px}.setting input[type=range]{width:100%;min-height:42px;accent-color:var(--brass)}.setting--range span{justify-content:space-between;display:flex}.setting--range output{color:var(--brass-light)}.setting--check{grid-template-columns:34px 1fr}.setting--check input{width:25px;height:25px;accent-color:var(--brass)}.settings-status{min-height:1.2em;color:var(--mint);margin:12px 0 0;font-size:.86rem}.observer-content p{color:var(--brass-light);margin-bottom:14px}.observer-content dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;display:grid}.observer-content dl div{border-left:3px solid var(--brass);background:#ffffff08;padding:10px}.observer-content dt{font-size:.76rem}.observer-content dd{color:var(--ink);margin:5px 0 0;font-weight:800}.observer-actions{gap:8px;margin-top:14px;display:flex}body.is-onboarding{overflow:hidden}.start-layer{z-index:20;background:#030c0feb;place-items:center;padding:20px;display:grid;position:fixed;inset:0;overflow-y:auto}.start-panel{border:1px solid var(--brass);border-top:9px solid var(--brass);text-align:center;background:#102a31;width:min(520px,100%);padding:clamp(30px,8vw,58px);box-shadow:0 22px 80px #000}.start-panel p{color:var(--brass);letter-spacing:.12em;margin-bottom:5px;font-weight:800}.start-panel h2{margin-bottom:10px;font:700 clamp(2.1rem,8vw,4rem)/1.1 Georgia,Noto Serif TC,serif}.start-panel span,.start-panel small{color:var(--muted);display:block}.start-mode-options{border:0;grid-template-columns:1fr 1fr;gap:9px;margin:24px 0 12px;padding:0;display:grid}.start-mode-options legend{width:100%;color:var(--brass-light);grid-column:1/-1;margin-bottom:9px;font-weight:800}.start-mode-options button{border:1px solid var(--line);min-height:74px;color:var(--muted);cursor:pointer;background:#ffffff08;padding:10px}.start-mode-options button strong,.start-mode-options button small{display:block}.start-mode-options button strong{color:var(--ink);font-size:1.05rem}.start-mode-options button small{margin-top:3px;font-size:.75rem}.start-mode-options button.is-selected{border:2px solid var(--brass);background:#edbd621a}.start-room{text-align:left;grid-template-columns:1fr 1.4fr auto;align-items:center;gap:9px;margin:12px 0 0;display:grid}.start-room label{color:var(--ink);font-weight:800}.start-room input{border:1px solid var(--line);width:100%;min-height:48px;color:var(--ink);background:#12343b;padding:9px 11px;font:700 1rem/1 ui-monospace,monospace}.start-room button{border:1px solid var(--brass);min-height:48px;color:var(--brass-light);cursor:pointer;background:0 0;padding:9px 12px;font-weight:800}.ensemble-status{min-height:1.3em;margin-top:8px;font-weight:700;color:var(--mint)!important}.start-pace{text-align:left;grid-template-columns:1fr 1.35fr;align-items:center;gap:12px;margin:12px 0 0;display:grid}.start-pace>span{color:var(--ink);font-weight:800}#start-button{color:#172326;background:var(--brass);cursor:pointer;border:0;width:100%;min-height:76px;margin:22px 0 12px;font-size:1.35rem;font-weight:900}#start-button:disabled{opacity:.66}.start-error{border:1px solid var(--danger-soft);color:var(--danger-soft);background:#7f2f352e;margin:14px 0 0;padding:12px;font-weight:700}@keyframes idle-sway{0%{margin-bottom:0}to{margin-bottom:3px}}@media (width<=720px){main{padding-inline:12px}.topbar{align-items:center}.stage-link{padding-inline:9px;font-size:.72rem}.status-lamp{font-size:.76rem}.song-status{display:block}.song-status strong{margin-top:5px;display:block}.stage{min-height:220px}.ensemble{inset-inline:3%}.performer--piano{left:0}.performer--trumpet{left:19%}.performer--drums{left:41%}.performer--vibes{right:18%}.performer--bass{right:-1%}.instrument-pads{grid-template-columns:repeat(2,minmax(0,1fr))}.instrument-pad--bass{grid-column:1/-1}.instrument-pad{min-height:118px}.feedback-row{display:block}.feedback-row span{text-align:left;margin-top:5px;display:block}.observer-content dl{grid-template-columns:repeat(2,minmax(0,1fr))}.transport-row{flex-wrap:wrap}.observer-panel{margin-left:0}}@media (width<=420px){h1{font-size:1.45rem}.topbar{gap:8px}.stage-link{min-height:38px;padding:8px;font-size:.66rem}.mode-button{min-height:61px;padding-inline:8px}.mode-button span{font-size:.93rem}.mode-button small{font-size:.68rem}.stage{min-height:190px}.ensemble{top:61px}.performer{height:115px}.performer b{font-size:.62rem}.play-heading{display:block}.instrument-pad{min-height:108px;padding:12px 6px 10px}.pad-mark{min-height:28px;font-size:1.6rem}.comfort-panel,.observer-panel{width:100%;margin-left:0}.comfort-content,.observer-content{width:100%}.setting{grid-template-columns:1fr;gap:5px}.start-room{grid-template-columns:1fr auto}.start-room label{grid-column:1/-1}.setting--check{grid-template-columns:34px 1fr}.observer-actions{grid-template-columns:1fr;display:grid}.start-panel{padding:28px 20px}.start-mode-options button{min-height:70px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}body.is-reduced-motion *,body.is-reduced-motion :before,body.is-reduced-motion :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}