:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#f7f7f6;background:#111110;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #31d879;outline-offset:3px}
.app{position:relative;max-width:430px;min-height:100vh;margin:0 auto;background:#1b1b1a;overflow:hidden;padding-bottom:28px}.app-header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:calc(env(safe-area-inset-top) + 12px) 18px 20px;text-align:center}.header-copy{display:grid;gap:3px}.header-copy strong{font-size:13px;font-weight:600}.header-copy span{font-size:10px;color:#a6a6a3}.icon-button{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:#e7e7e5}.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button circle{fill:currentColor;stroke:none}.app-header .icon-button:first-child svg{width:25px;height:25px}
.player-view{padding:0 28px}.album-cover{display:block;width:min(100%,300px);aspect-ratio:1;margin:0 auto;object-fit:cover;border-radius:7px;background:#31302d;box-shadow:0 14px 38px #0005}.song-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:19px 0 14px}.song-line h1{margin:0 0 6px;font-size:23px;font-weight:650;letter-spacing:-.025em}.song-line p{margin:0;color:#b9b9b5;font-size:13px}.favorite-button{display:grid;place-items:center;width:40px;height:40px;border:0;background:none;color:#d7d7d4}.favorite-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}.favorite-button[aria-pressed="true"]{color:#31d879}.favorite-button[aria-pressed="true"] svg{fill:#31d879}.music-player{overflow:hidden;border-radius:8px;background:#242424}.music-player iframe{display:block;width:100%;height:175px;border:0}.player-caption{margin:9px 0 0;color:#858580;font-size:11px;text-align:center}
.feature-area{margin-top:32px;padding:0 22px}.feature-entry{display:flex;align-items:center;gap:13px;width:100%;padding:16px 10px 16px 15px;text-align:left;color:#f3f4f2;background:#252624;border:1px solid #353733;border-radius:10px}.feature-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:9px;background:#383b37;color:#d8eadc}.feature-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.feature-copy{display:grid;gap:5px;flex:1}.feature-copy strong{font-size:14px;font-weight:600}.feature-copy small{color:#a4a7a1;font-size:11px}.entry-arrow{width:18px;height:18px;fill:none;stroke:#91948f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:31px 2px 15px}.section-heading span{font-size:16px;font-weight:630}.section-heading small{font-size:11px;color:#888b86}.suggestion-list{display:grid}.suggestion-row{display:grid;grid-template-columns:48px 1fr 28px;align-items:center;gap:12px;width:100%;padding:10px 2px;border:0;border-bottom:1px solid #2a2c29;text-align:left;background:transparent;color:#eeefed}.suggestion-row img{width:48px;height:48px;object-fit:cover;border-radius:5px}.suggestion-row strong,.result-main strong{display:block;margin-bottom:4px;font-size:13px;font-weight:570}.suggestion-row small,.result-main small{display:block;color:#999b96;font-size:11px}.suggestion-row svg{width:17px;height:17px;fill:none;stroke:#9a9d98;stroke-width:1.7}.app-footer{margin:30px 22px 0;color:#767b75;font-size:10px;line-height:1.55;text-align:center}
.menu{position:absolute;z-index:4;right:18px;top:62px;width:230px;padding:9px 12px;border:1px solid #40423e;border-radius:9px;background:#2b2d2a;box-shadow:0 12px 30px #0008}.menu[hidden]{display:none}.menu button{width:100%;padding:10px 2px;border:0;text-align:left;background:none;color:#f5f5f2;font-size:12px}.menu p{margin:4px 2px;color:#a3a6a0;font-size:10px;line-height:1.4}
.sheet-backdrop{position:fixed;z-index:6;inset:0;background:#0009}.sheet-backdrop[hidden]{display:none}.discovery-sheet{position:fixed;z-index:7;left:50%;bottom:0;transform:translateX(-50%);width:min(430px,100%);max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:18px 18px 0 0;background:#20211f;padding:0 20px calc(env(safe-area-inset-bottom) + 25px);box-shadow:0 -12px 50px #0008}.discovery-sheet[hidden]{display:none}.sheet-grip{width:33px;height:4px;margin:9px auto 21px;border-radius:5px;background:#61645e}.sheet-header{display:flex;align-items:flex-start;justify-content:space-between}.sheet-kicker{font-size:11px;color:#9fa29b}.sheet-header h2{margin:4px 0 0;font-size:22px;font-weight:650}.close-button{display:grid;place-items:center;width:30px;height:30px;border:0;background:none;color:#b5b8b2;font-size:26px;line-height:1}
.selection-block{margin-top:28px}.selection-head{display:flex;justify-content:space-between;align-items:center}.selection-head strong,.dimension-block>strong{font-size:13px;font-weight:590}.selection-head span{font-size:12px;color:#bdc0bb;font-variant-numeric:tabular-nums}#segment-range{width:100%;margin:18px 0 5px;accent-color:#31d879}.range-labels{display:flex;justify-content:space-between;color:#8e928c;font-size:10px;font-variant-numeric:tabular-nums}.selection-block p{margin:13px 0 0;color:#8f938d;font-size:11px}.dimension-block{margin-top:28px}.dimension-tabs{display:flex;gap:11px;overflow:auto;margin-top:13px;scrollbar-width:none}.dimension-tabs::-webkit-scrollbar{display:none}.dimension{min-width:57px;padding:8px 12px;border:1px solid #494d47;border-radius:5px;background:transparent;color:#afb4ac;font-size:12px}.dimension.active{border-color:#2bcf70;background:#2bcf70;color:#122217;font-weight:650}.find-button{display:flex;align-items:center;justify-content:space-between;gap:5px;width:100%;margin-top:24px;padding:13px 14px;border:1px solid #3f5b48;border-radius:6px;background:#2b352d;color:#b9e6c7;font-size:13px;font-weight:590}.find-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.results{margin-top:30px}.results[hidden]{display:none}.results-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.results-heading strong{font-size:15px;font-weight:630}.results-heading span{color:#9da19a;font-size:11px}.result-row{display:grid;grid-template-columns:48px 1fr 54px;align-items:center;gap:12px;width:100%;padding:11px 2px;border:0;border-bottom:1px solid #363a34;text-align:left;background:none;color:#f0f1ee}.result-row img{width:48px;height:48px;object-fit:cover;border-radius:5px}.result-row .cue{color:#8fddac;text-align:right;font-size:11px}.result-row.active .result-main strong{color:#7de7a8}.result-main small{line-height:1.35}.candidate-player{margin-top:18px;padding:12px;border:1px solid #3b3e39;border-radius:8px;background:#292b28}.candidate-player[hidden]{display:none}.candidate-player-heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:9px}.candidate-player-heading strong{font-size:12px}.candidate-player-heading span{color:#a6ada3;font-size:10px}.candidate-player iframe{display:block;width:100%;height:175px;border:0;border-radius:6px}.candidate-player p{margin:9px 0 0;color:#92988e;font-size:10px;line-height:1.45}.local-controls{display:flex;gap:8px;margin-top:13px}.local-controls button{flex:1;min-width:0;padding:10px 5px;border:1px solid #535950;border-radius:5px;background:none;color:#c9d3c8;font-size:10px}.local-controls button:last-child{border-color:#31d879;color:#31d879}.local-controls button:disabled{border-color:#464944;color:#707670;cursor:default}.demo-detail{margin-top:22px;color:#969b94;font-size:11px;line-height:1.6}.demo-detail summary{cursor:pointer}.demo-detail p{margin:8px 0 0}.toast{position:fixed;z-index:9;left:50%;bottom:25px;transform:translate(-50%,12px);width:max-content;max-width:90%;padding:10px 15px;border-radius:6px;background:#393c37;color:#fafbf7;opacity:0;pointer-events:none;font-size:11px;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){body{padding:18px 0}.app{min-height:calc(100vh - 36px);border-radius:14px;box-shadow:0 25px 80px #0009}.discovery-sheet{bottom:18px;border-radius:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* 多色只落在下半屏，播放器上方保持安静。 */
body{background:#070a0d}.app{background:
  radial-gradient(ellipse 95% 42% at 4% 104%,rgba(10,119,95,.50),transparent 72%),
  radial-gradient(ellipse 87% 43% at 103% 92%,rgba(91,41,145,.39),transparent 73%),
  radial-gradient(ellipse 95% 49% at 48% 79%,rgba(16,56,103,.38),transparent 70%),
  radial-gradient(ellipse 70% 24% at 82% 67%,rgba(98,43,60,.19),transparent 75%),#111419}
.header-copy span{color:#8d9ba0}.album-cover{box-shadow:0 22px 55px #0008}.song-line p{color:#abb7b7}
.platform-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px;color:#a7b8b5;font-size:11px}
.platform-row a{color:#70dba9;text-decoration:none;font-weight:560;white-space:nowrap}.platform-row a:hover{text-decoration:underline}
.music-player{box-shadow:0 10px 30px #0005}.music-player iframe,.candidate-player iframe{filter:brightness(.94)}
.player-caption{color:#8c9f9b;line-height:1.5}
.feature-entry{position:relative;overflow:hidden;border-color:rgba(121,172,157,.28);background:linear-gradient(108deg,rgba(24,54,53,.80),rgba(26,34,46,.82) 56%,rgba(54,32,61,.78));box-shadow:0 12px 34px #0004,0 0 34px rgba(17,105,78,.08)}
.feature-entry::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,#75dfa9,#6dc6df,#b18bd8,#d898b2);opacity:.72}
.feature-mark{background:rgba(90,194,159,.14);color:#84e7bb}.feature-copy small{color:#aabbb9}
.suggestion-row{border-bottom-color:rgba(197,221,215,.13)}.suggestion-row small,.result-main small{color:#a0b2ae}
.suggestion-row img,.result-row img{background:#253335}.app-footer{color:#829d99}
.discovery-sheet{border:1px solid rgba(112,164,150,.2);border-bottom:0;background:radial-gradient(ellipse 115% 48% at 5% 104%,rgba(18,82,75,.29),transparent 68%),radial-gradient(ellipse 90% 40% at 105% 98%,rgba(71,43,105,.24),transparent 65%),#191e23}
.sheet-grip{background:#5a736f}.sheet-kicker{color:#93aaa4}.selection-block p,.range-labels{color:#91a7a1}
.segment-presets{display:flex;gap:8px;overflow-x:auto;margin-top:19px;padding-bottom:3px;scrollbar-width:none}.segment-presets::-webkit-scrollbar{display:none}
.segment-presets button{flex:none;min-width:59px;padding:7px 9px;border:1px solid rgba(124,165,153,.28);border-radius:20px;background:rgba(15,30,32,.5);color:#a9c2b9;font-size:11px;font-variant-numeric:tabular-nums}
.segment-presets button.active{border-color:#62d99f;background:rgba(49,183,115,.19);color:#b9f4ce}
.dimension{border-color:rgba(155,188,174,.29);color:#b5c4bd}.dimension.active{border-color:#5bd697;background:#5bd697;color:#102219}
.find-button{border-color:rgba(91,190,139,.46);background:linear-gradient(105deg,rgba(27,87,69,.69),rgba(38,66,74,.67));color:#d0f9df}
.results-heading span{color:#8fd8b3}.results-note{margin:0 0 6px;color:#94aaa4;font-size:11px}
.result-row{border-bottom-color:rgba(192,221,208,.13)}.result-row.active{background:rgba(69,157,121,.08)}.result-row .cue{color:#8be1b1}
.show-all-results{width:100%;margin-top:14px;padding:12px;border:1px solid rgba(125,183,162,.37);border-radius:8px;background:rgba(15,33,36,.48);color:#b8e5cf;font-size:12px}
.show-all-results[hidden]{display:none}.candidate-player{border-color:rgba(121,170,153,.27);background:rgba(21,33,39,.75)}.candidate-player .platform-row{margin:10px 0}
.toast{background:#244038;color:#e7fff0}
.listen-entry{margin-top:10px;background:linear-gradient(110deg,rgba(28,42,52,.88),rgba(39,32,58,.84) 65%,rgba(42,35,55,.84))}
.listen-entry .feature-mark{background:rgba(113,133,219,.16);color:#b4c3ff}.listen-entry .feature-mark svg{width:22px;height:22px;stroke-width:1.7}
.listen-explain{margin:18px 0 0;color:#b6c5c2;font-size:14px;line-height:1.55}
.listen-step{margin-top:24px}.listen-step-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.listen-step-title strong{font-size:15px}.listen-step-title span{color:#91aaa4;font-size:12px}
.listen-action{min-height:44px;padding:10px 15px;border:1px solid rgba(98,212,151,.56);border-radius:8px;background:linear-gradient(110deg,#244d40,#2a4850);color:#d9ffe9;font-size:14px;font-weight:600}
.listen-action.secondary{border-color:rgba(154,172,197,.35);background:rgba(32,45,54,.75);color:#d5e0e4}.listen-action:disabled{opacity:.45;cursor:default}
.sample-actions{display:flex;flex-wrap:wrap;gap:9px}.sample-actions .listen-action{flex:1 1 140px}.sample-credit{margin:9px 0 5px;color:#91aaa4;font-size:12px;line-height:1.5}.qq-connect-note a{color:#9ae4ba;text-decoration:underline;text-underline-offset:2px}
.listen-buttons{display:flex;gap:10px}.listen-buttons button{flex:1}.reference-list{margin-top:12px;color:#91a8a1;font-size:13px;line-height:1.6}.reference-list span{display:block;padding:5px 0;border-bottom:1px solid rgba(194,219,210,.1);overflow-wrap:anywhere}
.listen-status{margin:12px 0 0;color:#a7bdb5;font-size:13px;line-height:1.5}.listen-output{margin-top:26px}.listen-output[hidden]{display:none}.listen-identification{display:grid;gap:7px;margin-bottom:25px;padding:15px;border:1px solid rgba(117,189,161,.3);border-radius:9px;background:rgba(23,53,49,.65)}.listen-identification small{color:#87c8a9;font-size:12px}.listen-identification strong{font-size:18px}.listen-identification span{color:#a8beb5;font-size:12px;line-height:1.5}
#listen-results{margin-top:14px}#listen-results .result-row{grid-template-columns:1fr 54px}#listen-player{display:block;width:100%;margin-top:16px}#listen-player[hidden]{display:none}.listen-disclosure{margin:16px 0 0;color:#8fa8a0;font-size:12px;line-height:1.55}
.listen-hint{margin:11px 0 0;color:#a6b9b1;font-size:13px;line-height:1.5}.event-results-title{margin-top:27px}.join-button{width:100%;margin-top:14px}.join-button[hidden]{display:none}
#event-list{flex-wrap:wrap;overflow:visible;gap:8px}#event-list .dimension{min-width:0;font-size:13px;line-height:1.4}
.route-panel{margin-top:28px;padding-top:21px;border-top:1px solid rgba(160,200,184,.24)}.route-panel[hidden]{display:none}.route-list{display:grid;gap:11px}.route-node{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center}.route-node>span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:rgba(75,173,125,.22);color:#a2efc0;font-size:13px}.route-node strong{display:block;font-size:14px;font-weight:600}.route-node small{display:block;margin-top:3px;color:#9eb6ad;font-size:12px}.route-actions{display:flex;gap:9px;margin-top:18px}.route-actions button{flex:1;padding:9px 7px;font-size:13px}.route-panel p{color:#91aaa1;font-size:12px;line-height:1.5}.route-import{display:block;width:100%;margin-top:18px;padding:11px;border:0;background:transparent;color:#9dd7b3;font-size:13px;text-align:center}
.listen-sheet{height:96dvh;max-height:96dvh}.listen-explain{font-size:14px}.listen-step-title{margin-top:4px}.music-map{margin-top:26px;padding:19px 0 23px;border-top:1px solid rgba(174,208,194,.19);border-bottom:1px solid rgba(174,208,194,.19)}.music-map[hidden],#style-options[hidden],#event-options[hidden]{display:none}#map-player{display:block;width:100%;height:48px;margin:13px 0 15px}.map-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.map-tabs button{flex:none;min-height:37px;padding:7px 11px;border:0;border-bottom:2px solid transparent;background:transparent;color:#a8b9b3;font-size:14px}.map-tabs button.active{border-bottom-color:#62d99f;color:#e6f9ee;font-weight:600}.map-list{max-height:340px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#526b62 transparent}.map-row{display:block;width:100%;min-height:82px;margin:0 0 7px;padding:12px 14px;border:1px solid rgba(142,180,164,.18);border-radius:9px;background:rgba(19,31,35,.8);color:#e8f3ed;text-align:left}.map-row.selected{border-color:#6bd89d;background:rgba(33,75,63,.65)}.map-row.playing .map-row-time{color:#8cebb1}.map-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.map-row-time{font-size:14px;font-variant-numeric:tabular-nums}.map-row-note{color:#9cb6aa;font-size:12px}.map-graph{display:flex;align-items:end;gap:2px;height:35px}.map-graph span{flex:1;min-width:2px;height:var(--bar-height);border-radius:3px 3px 1px 1px;background:#69c79f}.map-row[data-mode="rhythm"] .map-graph span{background:#e3b675}.map-row[data-mode="timbre"] .map-graph span{background:#81a9d9}.map-pitch{display:block;width:100%;height:36px}.map-pitch polyline{fill:none;stroke:#c5b1eb;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.map-lyrics{display:grid;gap:5px;color:#dee8e1;font-size:14px;line-height:1.5}.map-lyrics small{color:#96b4a2;font-size:12px}.map-selection{display:grid;gap:10px;margin-top:15px}.map-selection label{display:flex;justify-content:space-between;font-size:14px}.map-selection input{width:100%;accent-color:#65d693}.map-selection button{width:100%}.map-lyrics-upload{display:grid;gap:3px;margin-top:9px}.map-lyrics-upload .route-import{margin:0;text-align:left;padding:8px 0}.map-lyrics-upload span{color:#99aca3;font-size:12px;line-height:1.5}.search-mode{margin-top:17px}.search-mode button{flex:1}.event-results-title{margin-top:25px}@media(min-width:700px){.listen-sheet{width:min(520px,100%);bottom:18px;height:min(850px,calc(100dvh - 36px));max-height:calc(100dvh - 36px)}}
.app{display:flex;flex-direction:column}.app-header{order:0}.feature-area{order:1;margin-top:8px}.player-view{order:2;margin-top:30px;padding-top:22px;border-top:1px solid rgba(190,219,207,.16)}.player-view .album-cover{width:min(100%,190px)}.app-footer{order:3}.reference-list button{display:block;width:100%;padding:9px 2px;border:0;border-bottom:1px solid rgba(194,219,210,.12);background:transparent;color:#c9ddd2;font-size:14px;text-align:left;overflow-wrap:anywhere}.reference-list button.active{color:#9ff0bd;font-weight:600}.feature-copy strong{font-size:16px}.feature-copy small{font-size:13px}.section-heading small,.suggestion-row small,.result-main small{font-size:12px}
.library-actions{display:flex;gap:12px;align-items:center}.library-actions .route-import{width:auto;margin-top:8px;padding:8px 0;font-size:14px}.library-actions #clear-library{color:#a8bbb2}.library-actions button:disabled{opacity:.45}.map-explain{margin:0 0 10px;color:#9db3aa;font-size:13px;line-height:1.5}
.qq-connect-note{margin-top:12px;color:#a7c2b2;font-size:14px}.qq-connect-note summary{cursor:pointer}.qq-connect-note p{margin:8px 0 0;color:#99aea4;font-size:13px;line-height:1.5}

/* The measured sound map is the primary interaction surface. */
.app{background:radial-gradient(ellipse 94% 26% at 7% 33%,rgba(20,110,108,.29),transparent 74%),radial-gradient(ellipse 72% 34% at 98% 48%,rgba(76,58,147,.24),transparent 76%),radial-gradient(ellipse 110% 35% at 23% 92%,rgba(15,80,120,.27),transparent 72%),#0b111b}
.app-header{padding-bottom:12px}.header-copy strong{font-size:14px;letter-spacing:.035em}.header-copy span{font-size:11px}
.feature-area{margin-top:0}.home-intro{position:relative;min-height:204px;padding:22px 5px 15px;isolation:isolate;overflow:hidden}.home-intro::before{content:"";position:absolute;z-index:-1;width:215px;height:215px;right:-55px;top:-45px;border-radius:50%;background:radial-gradient(circle at 38% 42%,#8feecb70 0,#5f87d145 26%,#7a54c132 48%,transparent 73%);filter:blur(7px);animation:orbit-glow 12s ease-in-out infinite alternate}.home-eyebrow{font-size:11px;color:#8ee0c5;letter-spacing:.08em}.home-intro h2{max-width:320px;margin:17px 0 12px;font-size:clamp(29px,8vw,35px);font-weight:650;line-height:1.22;letter-spacing:-.05em;color:#f2fbf9}.home-intro p{max-width:295px;margin:0;color:#b5c8ca;font-size:13px;line-height:1.6}
.feature-entry{min-height:82px;padding:15px;border:1px solid rgba(159,223,212,.29);border-radius:16px;background:linear-gradient(114deg,rgba(25,71,67,.91),rgba(20,45,67,.91) 58%,rgba(43,38,78,.9));transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.feature-entry:hover,.feature-entry:focus-visible{transform:translateY(-2px);border-color:rgba(143,241,207,.6);box-shadow:0 16px 38px #0006,0 0 26px #57d8b526}.feature-entry:active{transform:scale(.985)}.feature-entry::before{height:1px;opacity:.9}.feature-mark{width:43px;height:43px;border-radius:12px;background:#78eecb1c;color:#a2f4d4}.feature-copy strong{font-size:16px;letter-spacing:-.02em}.feature-copy small{font-size:12px;line-height:1.4}.listen-entry{min-height:70px;background:linear-gradient(112deg,rgba(29,42,61,.8),rgba(48,35,73,.7));border-color:rgba(155,171,220,.25)}.listen-entry::before{opacity:.35}.listen-entry .feature-mark{background:#a4a8f51c}.section-heading{margin-top:27px}.player-view{margin-top:29px}.app-footer{margin-top:26px}
.discovery-sheet{background:radial-gradient(ellipse 110% 38% at 7% 0%,rgba(33,85,88,.22),transparent 73%),radial-gradient(ellipse 75% 40% at 100% 96%,rgba(64,40,102,.17),transparent 70%),#111923;scrollbar-width:thin;scrollbar-color:#37534f transparent}.listen-sheet{padding-left:18px;padding-right:18px}.sheet-header h2{font-size:25px;letter-spacing:-.035em}.listen-explain{color:#b5c6c5;line-height:1.65}.music-map{margin-top:24px;padding-top:22px;border-top-color:#ffffff22}.music-map .listen-step-title{margin-bottom:13px}.sound-stage{position:relative;height:265px;overflow:hidden;border:1px solid #92d8d449;border-radius:23px;background:#07101b;cursor:crosshair;touch-action:manipulation;box-shadow:inset 0 1px 0 #ffffff29,0 18px 35px #0007,0 0 30px #55d5bb18;transition:border-color .2s,box-shadow .2s}.sound-stage:hover{border-color:#a5f3e898;box-shadow:inset 0 1px 0 #ffffff30,0 20px 40px #0008,0 0 34px #58e5cf2d}.sound-stage canvas{display:block;width:100%;height:100%}.stage-glass{position:absolute;top:18px;left:18px;display:grid;gap:5px;max-width:min(70%,225px);padding:12px 15px 13px;border:1px solid #d4eeff3b;border-radius:14px;background:linear-gradient(130deg,#ffffff22,#5bc3d90d 60%,#b980e215);box-shadow:inset 0 1px 0 #ffffff20,0 7px 28px #0003;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);pointer-events:none}.stage-kicker{font-size:10px;color:#c5e8dd;letter-spacing:.06em}.stage-glass strong{font-size:27px;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.stage-glass #stage-event{font-size:12px;color:#e5f5f2;line-height:1.42;overflow-wrap:anywhere}.stage-hint{position:absolute;right:14px;bottom:12px;color:#d6f4edb0;font-size:10px;pointer-events:none}.sound-stage:focus-visible{outline:2px solid #9ef8ca;outline-offset:3px}
#map-player{margin:14px 0 11px;accent-color:#8decc5}.map-tabs{gap:10px}.map-tabs button{position:relative;min-height:41px;padding:8px 10px;color:#9db7ba;font-size:13px}.map-tabs button.active{color:#e7fff1;border-bottom-color:#7ee9bb}.map-explain{min-height:35px;margin:2px 0 9px;color:#97aeb1;font-size:12px}.map-list{max-height:245px;padding-right:3px}.map-row{min-height:66px;padding:9px 12px;margin-bottom:5px;border-radius:12px;background:#14212bb9;transition:background .18s,border-color .18s}.map-row:hover{background:#1b3440}.map-row.selected{border-color:#7ce8c4;background:#214b4bb5}.map-row-head{margin-bottom:5px}.map-row-note{font-size:11px}.map-graph{height:20px;gap:2px;opacity:.7}.map-graph span{max-height:19px;border-radius:6px;background:linear-gradient(#a2f3d6,#3a9f9e)}.map-row[data-mode="rhythm"] .map-graph span{background:linear-gradient(#f3c795,#c57191)}.map-row[data-mode="timbre"] .map-graph span{background:linear-gradient(#b6e1ed,#6c90ce)}.map-pitch{height:23px}.map-selection{margin-top:17px}.map-selection .listen-action{border-radius:12px;background:linear-gradient(105deg,#40ab8a,#3c7999);color:#f5fff9;border-color:#81dac3;font-size:14px}.listen-identification{border-radius:15px;background:linear-gradient(135deg,#173b3c,#202c47);border-color:#90d6bb57}.result-row{transition:background .18s}.result-row:hover{background:#a6ffcf0d}.join-button{border-radius:12px;background:transparent;border-color:#7dabb07a;color:#c5dbdf;font-weight:500}.route-panel{margin-top:20px}
@keyframes orbit-glow{from{transform:translate(-13px,-5px) scale(.91)}to{transform:translate(14px,8px) scale(1.1)}}
@media(max-width:360px){.home-intro{min-height:225px}.sound-stage{height:235px}.stage-glass{max-width:77%}}
@media(prefers-reduced-motion:reduce){.home-intro::before{animation:none}.feature-entry{transition:none}}
.home-intro{min-height:235px}.home-intro>span,.home-intro>h2,.home-intro>p{position:relative;z-index:2}.home-intro::before{right:5px;top:6px;width:200px;height:200px;filter:blur(17px);opacity:.6}.home-sculpture{position:absolute;z-index:0;right:-18px;top:20px;width:190px;height:188px;perspective:480px;transform-style:preserve-3d;filter:drop-shadow(0 10px 22px #0009)}.home-sculpture::before{content:"";position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,#6cd9dd3b,transparent 68%);filter:blur(13px)}.home-ring{position:absolute;left:8px;top:15px;width:164px;height:150px;border:1.5px solid #82f5cd8a;border-radius:50%;box-shadow:0 0 15px #70e8d85e,inset 0 0 10px #749bff34;transform-style:preserve-3d;animation:home-orbit 9s linear infinite}.home-ring.ring-one{transform:rotateX(70deg) rotateZ(25deg);border-color:#9ce8d7bd}.home-ring.ring-two{transform:rotateY(64deg) rotateX(19deg);border-color:#9699f9a8;animation-duration:12s;animation-direction:reverse}.home-ring.ring-three{transform:rotateY(-52deg) rotateX(27deg);border-color:#c491e095;animation-duration:14s}.home-core{position:absolute;left:61px;top:57px;width:69px;height:69px;border-radius:50%;background:radial-gradient(circle at 32% 29%,#e6fff4 0,#8de7d9 14%,#719ed3 43%,#35548b 72%,#0d173c 100%);box-shadow:inset -14px -16px 24px #091333b8,inset 5px 7px 12px #f6ffff6b,0 0 18px #66dfc890,0 0 47px #746bca6b}.home-core::after{content:"";position:absolute;left:12px;top:10px;width:39px;height:24px;border-top:1px solid #ffffff80;border-radius:50%;transform:rotate(-23deg)}.home-note{position:absolute;color:#b4f1db;font:22px Georgia,serif;text-shadow:0 0 9px #89e8d7;animation:note-float 5s ease-in-out infinite}.home-note.note-one{right:19px;top:16px}.home-note.note-two{left:8px;bottom:11px;color:#bca5f2;animation-delay:-2.5s}.home-intro h2{margin-top:15px;text-shadow:0 2px 16px #060b16e8}.home-intro p{max-width:265px;text-shadow:0 2px 12px #06101bea}
.home-intro::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#0b111b00 31%,#0b111b40 54%,#0b111b00 91%);pointer-events:none}
.stage-glass{overflow:hidden}.stage-glass::before{content:"";position:absolute;inset:-120% -100%;background:linear-gradient(116deg,transparent 42%,#ffffff27 49%,#ffffff04 54%,transparent 62%);transform:translateX(var(--glass-shift,0%)) rotate(4deg);transition:transform .25s ease;pointer-events:none}.stage-glass>*{position:relative}.feature-entry::after{content:"";position:absolute;width:48%;height:110%;top:-70%;right:-14%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#ffffff0d,transparent);pointer-events:none;transition:top .5s,right .5s}.feature-entry:hover::after{top:10%;right:48%}
@keyframes home-orbit{0%{rotate:0deg}100%{rotate:360deg}}@keyframes note-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4px,-11px,0)}}
@media(prefers-reduced-motion:reduce){.home-ring,.home-note{animation:none}}
#map-player{display:none}.transport{display:flex;align-items:center;gap:14px;min-height:66px;margin:14px 0 13px;padding:10px 15px;border:1px solid #b4e9eb37;border-radius:19px;background:linear-gradient(115deg,#e6fff217,#8faefa0e 46%,#a484f012);box-shadow:inset 0 1px 0 #ffffff24,0 12px 24px #0004;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}#map-toggle{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #bdfff49c;border-radius:50%;background:radial-gradient(circle at 33% 28%,#c8fff5,#70d7c0 37%,#2b858c 80%);color:#0b3438;box-shadow:inset 0 1px 0 #ffffffdc,0 0 18px #71e3c160;transition:transform .2s,box-shadow .2s}#map-toggle:hover{transform:scale(1.06);box-shadow:inset 0 1px 0 #ffffffdc,0 0 24px #71e3c199}#map-toggle svg{width:19px;height:19px;fill:currentColor;transform:translateX(1px)}#map-toggle.playing svg{display:none}#map-toggle.playing::before,#map-toggle.playing::after{content:"";position:absolute;top:12px;width:3px;height:16px;border-radius:2px;background:#0b3438}#map-toggle.playing::before{left:16px}#map-toggle.playing::after{right:16px}.transport-main{flex:1;min-width:0}.transport-main input{display:block;width:100%;height:17px;margin:0;accent-color:#85eac8;background:transparent;cursor:pointer}.transport-main input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#9df1d2,#7487bf66)}.transport-main input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;margin-top:-4px;border:1px solid #e3fff5;border-radius:50%;background:#a4f2d4;box-shadow:0 0 8px #8fedc3}.transport-main input{appearance:none;-webkit-appearance:none}.transport-times{display:flex;justify-content:space-between;color:#bed4d2;font-size:11px;font-variant-numeric:tabular-nums}