:root{
  --bg:#06070a;
  --panel:#0d0f14;
  --panel2:#13161d;
  --line:#252a34;
  --text:#f4efe6;
  --muted:#8b909d;
  --acc1:#9d84ff;
  --acc2:#efe7ff;
  --acc3:#5b49cc;
  --ok:#79efc4;
  --bad:#ff6d84;
  --white:#fbfbfd;
  --noteZoom:1;
  --keyZoom:1;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
body{overscroll-behavior:none}
button,input{font:inherit}
button{color:inherit}
input[type="range"]{appearance:none;-webkit-appearance:none;background:transparent}
input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:#232833}
input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--acc1);margin-top:-6px;border:0;box-shadow:0 0 0 3px rgba(157,132,255,.12)}
input[type="range"]::-moz-range-track{height:4px;border-radius:999px;background:#232833}
input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--acc1);border:0}
.view{display:none;min-height:100dvh}
.view.active{display:block}
button{appearance:none;-webkit-appearance:none;border-radius:0}
.topbar{
  height:72px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #141822;background:rgba(6,7,10,.92);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20
}
.topbar-right{display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.14em}
.brand img{width:32px;height:32px}
.brand.compact{justify-self:center}
.version{font-size:10px;color:#646977;border:1px solid var(--line);padding:6px 9px;border-radius:999px}
.ghost,.primary,.filter,.tab,.status-btn,.theme-swatch,.dot{
  border:1px solid var(--line);background:#0d1015;color:var(--text)
}
.ghost{padding:10px 12px}
.ghost.small{padding:8px 10px;font-size:12px}
.ghost.square{width:38px;height:38px;display:grid;place-items:center}
.ghost.wide{width:100%;padding:11px 12px;text-align:left}
.primary{
  background:linear-gradient(135deg,var(--acc2),#ffffff);color:#0a0b0d;border-color:transparent;
  font-weight:800;letter-spacing:.12em
}
.primary.small{padding:10px 13px}
.primary.huge{width:100%;padding:20px 18px;display:flex;justify-content:space-between;align-items:center;font-size:14px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--acc1);margin:0 0 14px}
.home-wrap{max-width:1380px;margin:auto;padding:34px 18px 80px}
.hero h1{font-size:clamp(42px,7vw,92px);line-height:.9;letter-spacing:-.075em;margin:0}
.lead{max-width:640px;color:#a0a5b1;font-size:17px;line-height:1.55;margin:16px 0 0}
.search-zone{margin-top:38px}
.search-bar{
  max-width:1040px;height:68px;border-bottom:1px solid #3d4350;display:flex;align-items:center;gap:14px
}
.search-bar:focus-within{border-color:var(--acc1)}
.search-bar span{font-size:28px;color:#9095a1}
.search-bar input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:26px;letter-spacing:-.02em
}
.search-bar input::placeholder{color:#4f5460}
.search-results{max-width:1040px;display:none;border-left:1px solid var(--line)}
.search-results.show{display:block}
.search-item{
  width:100%;display:grid;grid-template-columns:38px 1fr auto auto;gap:12px;align-items:center;
  padding:12px;border:0;border-bottom:1px solid #171b22;background:transparent;text-align:left
}
.search-item:hover{background:#0b0d11}
.search-item > span{font-size:11px;color:#5d6370}
.search-item strong{display:block;font-size:14px}
.search-item small{display:block;font-size:11px;color:#7b808d;margin-top:3px}
.search-item em{font-style:normal;font-size:11px;color:#676d79}
.search-like{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:#0c0f14}
.search-loading{padding:15px;color:#7b808d;font-size:12px}
.section-head{
  margin-top:48px;padding-bottom:12px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap
}
.section-head > b{font-size:10px;letter-spacing:.2em}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filter{padding:8px 10px;font-size:11px}
.filter.active{background:rgba(157,132,255,.12);border-color:#4c3ea3;color:#cfbfff}
.track-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
.track{
  min-height:86px;border:0;border-bottom:1px solid #171b22;background:transparent;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:40px 1fr auto auto;gap:12px;align-items:center;padding:12px
}
.track:nth-child(odd){border-right:1px solid #171b22}
.track:hover{background:#0a0c10}
.track > span{font-size:11px;color:#5c616d}
.track strong{display:block;font-size:15px}
.track small{display:block;font-size:11px;color:#7b808d;margin-top:3px}
.track .tag{font-style:normal;font-size:10px;border:1px solid var(--line);padding:5px 8px}
.track .like{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:#0d1015}
.like.active,.search-like.active,#setupFavorite.active{color:#ffd2de;border-color:#66414c;background:rgba(255,109,132,.08)}

.setup-wrap{max-width:1380px;margin:auto;padding:28px 18px 60px;display:grid;grid-template-columns:minmax(280px,430px) minmax(0,1fr);gap:30px}
.setup-art{display:grid;place-items:center}
.art-card{
  width:min(430px,100%);aspect-ratio:1;background:#0a0c11;border:1px solid #171b22;position:relative;overflow:hidden
}
.art-ring{position:absolute;border:1px solid #2e3440;border-radius:50%}
.ring1{width:66%;height:66%;transform:rotate(22deg)}
.ring2{width:106%;height:42%;transform:rotate(-36deg)}
.art-bar{position:absolute;width:6px;height:54%;background:var(--acc1);box-shadow:0 0 34px rgba(157,132,255,.45);transform:rotate(18deg)}
.art-card span{position:absolute;left:18px;bottom:16px;font-size:10px;font-weight:800;letter-spacing:.18em;color:#797f8d}
.setup-pane h2{font-size:clamp(40px,5vw,70px);line-height:.94;letter-spacing:-.06em;margin:0}
.artist{color:#8d929f;margin:10px 0 26px}
.preview-card{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px;border:1px solid var(--line);background:#0b0d12;margin-bottom:20px
}
.preview-thumb{
  width:64px;height:64px;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc1),#171a22);
  font-size:11px;font-weight:800;letter-spacing:.14em
}
.preview-copy{min-width:0}
.preview-copy small{display:block;font-size:10px;letter-spacing:.16em;color:#818694}
.preview-copy b{display:block;font-size:15px;margin-top:4px}
.preview-copy span{display:block;color:#8b909d;font-size:12px;margin-top:3px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.setting-block label{display:block;font-size:10px;letter-spacing:.16em;color:#7e8391;margin-bottom:8px;font-weight:800}
.seg{display:grid;gap:8px}
.seg.two{grid-template-columns:1fr 1fr}
.seg.three{grid-template-columns:1fr 1fr 1fr}
.seg button{
  border:1px solid var(--line);background:#0b0d12;color:var(--text);padding:14px;text-align:left
}
.seg button b{display:block;font-size:14px}
.seg button small{display:block;font-size:11px;color:#858a97;margin-top:5px}
.seg button.active{border-color:#4c3ea3;background:rgba(157,132,255,.09);color:#dacfff}
.theme-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.theme-swatch{padding:10px;display:grid;justify-items:center;gap:8px;background:#0b0d12}
.theme-swatch i{
  display:block;width:100%;height:24px;background:linear-gradient(90deg,var(--c1),var(--c2));border-radius:999px
}
.theme-swatch span{font-size:11px}
.theme-swatch.active{border-color:#4c3ea3;background:rgba(157,132,255,.09)}
.compact-controls .slider-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.compact-controls span{font-size:12px;color:#8c919d}
.help-note{display:block;color:#6e7380;font-size:11px;margin-top:12px;line-height:1.45}

.game-view{height:100dvh;overflow:hidden}
.rotate-gate{
  height:100dvh;display:grid;place-content:center;justify-items:center;text-align:center;padding:20px
}
.rotate-gate img{width:58px;margin-bottom:16px;animation:turn 2.2s ease-in-out infinite}
.rotate-gate b{font-size:24px}
.rotate-gate span{font-size:11px;color:#79808d;margin-top:4px}
@keyframes turn{0%,20%,100%{transform:rotate(0)}55%,75%{transform:rotate(90deg)}}
.landscape-shell{display:none}
@media (orientation:landscape){
  .rotate-gate{display:none}
  .landscape-shell{display:grid;grid-template-rows:62px 1fr minmax(146px,26vh);height:100dvh}
}
.game-topbar{
  display:grid;grid-template-columns:44px minmax(180px,1fr) auto;gap:14px;align-items:center;padding:0 12px;border-bottom:1px solid #151922
}
.game-title b{display:block;font-size:13px}
.game-title small{display:block;color:#7b808d;font-size:10px;margin-top:3px}
.game-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-self:end}
.tabs{display:flex;border:1px solid var(--line);background:#0d1015}
.tab{padding:9px 12px;font-size:10px;letter-spacing:.1em;font-weight:800;border:0;background:transparent}
.tab.active{background:#f1eee6;color:#08090a}
.status-btn{padding:10px 12px;font-size:10px;letter-spacing:.1em;font-weight:800}
.status-btn.mic-btn i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#636874;margin-right:7px}
.status-btn.mic-btn.live i{background:var(--ok);box-shadow:0 0 10px rgba(121,239,196,.7)}
.game-main{display:grid;grid-template-columns:minmax(0,1fr) 170px;min-height:0}
.panel{display:none;min-height:0}
.panel.shown{display:grid}
#flowPanel{grid-template-rows:58px 1fr}
.flow-head{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid #161b23;gap:12px}
.expected-box small{display:block;font-size:8px;letter-spacing:.16em;color:#79808c;font-weight:800}
.expected-box b{font-size:26px}
.expected-box span{display:block;font-size:11px;color:#8e93a0;margin-top:2px}
.listen-box{text-align:right}
.listen-box b{display:block;font-size:14px}
.listen-box span{display:block;font-size:11px;color:#8e93a0;margin-top:4px}
.listen-box.good b{color:var(--ok)}
.listen-box.bad b{color:var(--bad)}
.note-field{position:relative;overflow:hidden;background:#07080b;min-height:0}
#particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.field-glow{
  position:absolute;inset:0;background:radial-gradient(circle at 50% 20%, rgba(157,132,255,.14), transparent 46%)
}
.lanes{position:absolute;inset:0;background:
repeating-linear-gradient(to right, rgba(255,255,255,.05) 0 1px, transparent 1px 12.5%),
repeating-linear-gradient(to bottom, transparent 0 70px, rgba(255,255,255,.045) 70px 71px)}
#noteRail{position:absolute;inset:0;z-index:2}
.note{
  position:absolute;width:12.2%;height:calc(38px * var(--noteZoom));transform-origin:center;
  display:grid;place-items:center;font-weight:800;letter-spacing:.03em;color:#0b0c0f;
  background:linear-gradient(180deg,var(--acc2),var(--acc1));box-shadow:0 0 24px rgba(157,132,255,.24);
  border:1px solid rgba(255,255,255,.24)
}
.note.future{opacity:.55;filter:saturate(.8)}
.note.current{box-shadow:0 0 36px rgba(157,132,255,.34)}
.note.missed{background:linear-gradient(180deg,#ffb0bc,#ff6d84)}
.hit-line{position:absolute;left:4%;right:4%;bottom:34px;height:24px;border-bottom:1px solid var(--acc1);z-index:1}
.hit-line:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;box-shadow:0 0 20px rgba(157,132,255,.7)}
.hit-line span{position:absolute;right:0;bottom:7px;color:var(--acc1);font-size:8px;font-weight:900;letter-spacing:.18em}
.score-panel{background:#ece8df;color:#111217;grid-template-rows:52px 1fr}
.score-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #cec9bf}
.score-head b{font-size:10px;letter-spacing:.14em}
.score-head span{font-size:12px;color:#6c6863}
.score-wrap{overflow:auto;padding:18px}
.score-wrap svg{width:100%;min-width:820px;height:auto}
.staff{stroke:#7d7972;stroke-width:1}
.stem{stroke:#111217;stroke-width:1.5}
.head{fill:#111217}
.head.current{fill:var(--acc3)}
.barline{stroke:#9c9790;stroke-width:1.2}
.side-panel{
  border-left:1px solid #171b22;background:#090b0f;padding:12px 10px;display:flex;flex-direction:column;gap:10px
}
.side-box small{display:block;font-size:8px;letter-spacing:.16em;color:#7a7f8d;font-weight:800}
.side-box strong{display:block;font-size:30px;line-height:1.1;margin-top:6px}
.side-box span{display:block;font-size:11px;color:#8e93a0;margin-top:4px;line-height:1.35}
.progress-box{margin-top:auto}
.progress-box span{font-size:11px;color:#8e93a0}
.progress-track{height:4px;background:#212633;margin-top:7px}
.progress-track b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc1),var(--acc2))}
.controller-wrap{border-top:1px solid #171b22;background:#090b0f;display:grid;grid-template-rows:44px 1fr;min-height:0}
.controller-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 12px;border-bottom:1px solid #151922;flex-wrap:wrap
}
.mini-controls{display:flex;align-items:center;gap:8px}
.mini-controls span{font-size:11px;color:#8b909d}
.themes-inline .dot{width:20px;height:20px;border-radius:50%;padding:0}
.dot[data-theme="lyra"]{background:linear-gradient(135deg,#9d84ff,#ffffff)}
.dot[data-theme="aurora"]{background:linear-gradient(135deg,#6ff2d2,#70a7ff)}
.dot[data-theme="sunset"]{background:linear-gradient(135deg,#ff7f6e,#ffcf70)}
.dot[data-theme="rainbow"]{background:linear-gradient(135deg,#ff5c7a,#7f7aff)}
.dot.active{outline:2px solid #f2eee5}
#controller{min-height:0}
.piano{
  height:100%;display:flex;position:relative;padding:8px 10px 8px;gap:2px;max-width:1260px;margin:auto;transform:scaleY(.98)
}
.key{
  border:0;user-select:none;-webkit-user-select:none;cursor:pointer;transition:transform .06s, background .08s
}
.key.white{
  flex:1;min-width:0;background:#ece8df;color:#6d717b;height:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:12px
}
.key.white.active{background:linear-gradient(180deg,var(--acc2),var(--acc1));color:#0a0b0f;transform:translateY(3px)}
.key.white.target{box-shadow:inset 0 -5px 0 var(--acc3)}
.key.black{
  position:absolute;z-index:3;top:8px;width:4.2%;height:58%;background:#11131a;color:#8f95a1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:10px
}
.key.black.active{background:var(--acc3);color:#ffffff;transform:translateY(2px)}
.key.black.target{outline:1px solid var(--acc1)}
.uke{
  height:100%;max-width:1240px;margin:auto;padding:14px 24px;display:grid;align-content:space-evenly;gap:22px
}
.string{
  height:2px;background:#9b9ea6;position:relative
}
.string b{position:absolute;left:-16px;top:-8px;font-size:10px;color:#7b808d}
.string:before, .string:after{
  content:"";position:absolute;top:-12px;width:1px;height:24px;background:#2d323d
}
.string:before{left:34%}
.string:after{left:68%}
.string.target{background:var(--acc1);box-shadow:0 0 18px rgba(157,132,255,.8)}
.string.active{height:3px}

@media (max-width: 980px){
  .setup-wrap{grid-template-columns:1fr}
  .setup-art{display:none}
  .settings-grid{grid-template-columns:1fr}
  .track-list{grid-template-columns:1fr}
  .track:nth-child(odd){border-right:0}
}
@media (orientation:landscape) and (max-width: 980px){
  .game-main{grid-template-columns:minmax(0,1fr)}
  .side-panel{
    position:absolute;right:10px;top:74px;width:170px;max-height:calc(100dvh - 90px);overflow:auto;
    background:rgba(10,11,15,.92);backdrop-filter:blur(10px);border:1px solid #171b22;z-index:4
  }
  .game-topbar{grid-template-columns:38px minmax(110px,1fr) auto}
  .game-actions{max-width:100%;gap:8px}
}
@media (max-width: 720px){
  .home-wrap{padding-left:14px;padding-right:14px}
  .hero h1{font-size:50px}
  .search-bar input{font-size:22px}
  .preview-card{grid-template-columns:50px 1fr;grid-template-areas:"a b" "c c";align-items:start}
  .preview-thumb{grid-area:a;width:50px;height:50px}
  .preview-copy{grid-area:b}
  .preview-card .primary{grid-area:c;width:100%}
  .seg.two,.seg.three,.theme-row{grid-template-columns:1fr}
}