:root{--bg:#0c1016;--panel:#151b23;--panel-2:#1a222c;--line:#293441;--line-soft:rgba(255,255,255,.075);--text:#f3f5f8;--muted:#8d98a7;--dim:#626e7d;--accent:#efa865;--accent-2:#d98349;--good:#6dd5a1;--bad:#ef7d7d;--radius:14px;color-scheme:dark}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 50% 24%,#19232e 0,#10161d 35%,#0c1016 76%);font-family:Inter,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;overflow-x:hidden}button,select,input{font:inherit}button{color:inherit}button:focus-visible,[tabindex]:focus-visible{outline:2px solid #f4b36f;outline-offset:3px}.ambient{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at center,black,transparent 72%)}.app-shell{position:relative;width:min(1180px,100%);min-height:100vh;margin:auto;padding:0 34px 26px}.topbar{height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line-soft)}.brand{display:flex;align-items:center;gap:11px;color:var(--text);font-size:14px;font-weight:680;letter-spacing:.015em;text-decoration:none}.brand-mark,.welcome-mark{display:grid;place-items:center;border:1px solid #d79258;border-radius:50%;color:#ffbd79;font-family:Georgia,serif;box-shadow:0 0 24px rgba(235,159,91,.1)}.brand-mark{width:30px;height:30px}.topnav{display:flex;gap:7px;padding:4px;background:#111820;border:1px solid #242e39;border-radius:12px}.topnav button{min-width:70px;height:34px;border:0;border-radius:8px;background:transparent;color:#768392;font-size:12px;cursor:pointer}.topnav button:hover{color:#cfd5dc}.topnav .active{background:#222b36;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)}.icon-btn{display:grid;place-items:center;width:42px;height:42px;border:1px solid #2a3541;border-radius:12px;background:#161d25;color:#a8b1bd;cursor:pointer}.topbar>.icon-btn{justify-self:end}.icon-btn:hover{background:#202933;color:#fff}.mode-head{width:min(820px,100%);display:flex;align-items:end;justify-content:space-between;margin:24px auto 7px}.eyebrow{color:#d99357;font-size:9px;font-weight:760;letter-spacing:.22em}h1{margin:7px 0 2px;font-size:25px;font-weight:640;letter-spacing:.01em}.mode-head p{margin:0;color:var(--muted);font-size:12px}.key-chip{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:9px 13px;border:0;border-right:2px solid #e6a467;background:linear-gradient(90deg,transparent,rgba(230,164,103,.07));cursor:pointer}.key-chip span{color:#778494;font-size:8px;letter-spacing:.22em}.key-chip strong{font-size:13px;letter-spacing:.07em}.mode-tabs{width:min(820px,100%);display:flex;justify-content:center;gap:5px;margin:6px auto 0}.mode-tabs button{padding:7px 13px;border:0;border-bottom:1px solid #27313c;background:transparent;color:#697686;font-size:11px;cursor:pointer}.mode-tabs button:hover{color:#d9dee4}.mode-tabs .active{border-color:#df9a59;color:#efb377}.stage{display:flex;flex-direction:column;align-items:center}.circle-zone{position:relative;width:min(610px,67vh,82vw);aspect-ratio:1}.circle-svg{width:100%;height:100%;overflow:visible}.direction{position:absolute;top:50%;z-index:1;color:#5c6877;font-size:9px;letter-spacing:.08em;white-space:nowrap}.direction-left{left:-97px;transform:rotate(-83deg)}.direction-right{right:-99px;transform:rotate(83deg)}.sector{cursor:pointer;outline:none}.sector path{transition:filter .2s ease,opacity .2s ease,stroke .2s ease,transform .2s ease;transform-origin:400px 400px}.sector:hover path,.sector:focus-visible path{filter:brightness(1.23)}.sector.selected path{filter:brightness(1.2) drop-shadow(0 0 9px currentColor);stroke:#f4dcc6!important;stroke-width:3}.sector.playing path{filter:brightness(1.35) drop-shadow(0 0 14px currentColor);stroke:#fff!important;stroke-width:3}.sector.correct path{filter:brightness(1.22) drop-shadow(0 0 13px #4ad190);stroke:var(--good)!important;stroke-width:4}.sector.wrong path{filter:brightness(.92) drop-shadow(0 0 11px #ea6060);stroke:var(--bad)!important;stroke-width:4}.sector.candidate path{stroke:#f2c068!important;stroke-width:3;stroke-dasharray:7 5}.major-label,.minor-label,.signature-label,.degree-label{pointer-events:none;text-anchor:middle;dominant-baseline:middle;fill:#fff}.major-label{font-size:30px;font-weight:650;letter-spacing:-.035em;text-shadow:0 1px 7px rgba(0,0,0,.35)}.major-label.compact{font-size:20px}.minor-label{font-size:19px;font-weight:560;fill:#e9edf2}.signature-label{font-size:11px;fill:rgba(255,255,255,.55)}.degree-badge circle{fill:#121923;stroke:#687485;stroke-width:1}.degree-label{font-size:11px;font-weight:700;fill:#d8dee6}.circle-center{pointer-events:none}.center-disc{fill:url(#centerFill);stroke:#3b4655;stroke-width:1.4}.center-inner{fill:none;stroke:rgba(255,255,255,.045)}.center-kicker,.center-title,.center-detail{text-anchor:middle}.center-kicker{fill:#8793a2;font-size:10px;letter-spacing:.22em}.center-title{fill:#fff;font-size:28px;font-weight:630}.center-detail{fill:#8d99a8;font-size:12px}.center-play circle{fill:#25303c;stroke:#4a5665}.center-play path{fill:#eda25d}.progression-path{fill:none;stroke:#f0ad69;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 7;filter:drop-shadow(0 0 6px rgba(242,164,91,.7));animation:pathFlow 1.1s linear infinite}.progression-node{fill:#f6b16f;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 7px #f2a359)}@keyframes pathFlow{to{stroke-dashoffset:-34}}.task-panel{width:min(700px,100%);min-height:66px;margin-top:-4px;padding:12px 18px;border-top:1px solid var(--line-soft);text-align:center}.task-copy{transition:.2s ease}.task-label{color:#d99458;font-size:9px;font-weight:750;letter-spacing:.18em}.task-panel h2{margin:5px 0 3px;font-size:17px;font-weight:620}.task-panel p{margin:0;color:var(--muted);font-size:11px}.answer-grid{display:flex;justify-content:center;gap:7px;margin:5px auto 10px}.answer-grid button{min-width:57px;height:42px;padding:0 15px;border:1px solid #2a3541;border-radius:9px;background:#151c24;color:#8995a4;cursor:pointer;transition:.18s ease}.answer-grid button:hover:not(:disabled){color:#fff;border-color:#687789;transform:translateY(-1px);background:#1d2630}.answer-grid button:disabled{cursor:default;opacity:.48}.answer-grid button.answer-correct{border-color:var(--good);color:#a8f0cb;background:rgba(58,161,112,.16)}.answer-grid button.answer-wrong{border-color:var(--bad);color:#ffc2c2;background:rgba(203,80,80,.14)}.progress-slots{display:flex;justify-content:center;gap:8px;margin-top:10px}.progress-slot{min-width:54px;padding:7px 10px;border:1px dashed #465362;border-radius:8px;color:#e9edf1;background:#131a22}.progress-slot.current{border-style:solid;border-color:#e5a361;box-shadow:0 0 12px rgba(228,155,84,.12)}.progress-slot.empty{color:#687483}.feedback{margin:8px auto 0;padding:10px 14px;border:1px solid #2d3945;border-radius:10px;background:#131a22;color:#cbd2da;font-size:12px}.feedback.good{border-color:rgba(77,197,138,.42);color:#a5edc8}.feedback.bad{border-color:rgba(229,104,104,.45);color:#ffc0c0}.feedback strong{color:#fff}.compare-row{display:flex;justify-content:center;gap:8px;margin-top:8px}.compare-row button{padding:6px 10px;border:1px solid #3c4855;border-radius:7px;background:#1b242e;color:#cbd3dc;cursor:pointer}.control-dock{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #2b3542;border-radius:14px;background:rgba(20,27,35,.88);box-shadow:0 18px 45px rgba(0,0,0,.28);backdrop-filter:blur(14px)}.control{min-height:44px;padding:0 19px;border-radius:9px;border:1px solid #303b48;cursor:pointer}.control.secondary{background:#1a222c;color:#bac2cc}.control.secondary:hover{background:#222c37;color:#fff}.control.primary{min-width:145px;border-color:#e1a36a;background:linear-gradient(135deg,#f1b374,#d78347);color:#18130f;font-weight:740;box-shadow:0 8px 24px rgba(222,137,73,.2)}.control.primary:hover{filter:brightness(1.08)}.control.primary:disabled{filter:saturate(.2);opacity:.58;cursor:wait}.control.ghost{background:transparent;color:#8995a4}.stats-strip{width:min(700px,100%);margin:17px auto 0;padding-top:14px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;gap:25px}.stats-strip>div{display:flex;align-items:baseline;gap:7px}.stats-strip span{color:#6f7b8a;font-size:9px;letter-spacing:.08em}.stats-strip strong{font-size:13px;font-weight:630}.stats-strip i{width:1px;height:20px;background:#29313a}.shortcut kbd{padding:3px 6px;border:1px solid #313c49;border-radius:4px;color:#9ca7b4;background:#121820;font-size:8px;box-shadow:0 2px 0 #090c10}.hidden{display:none!important}.drawer{position:fixed;z-index:20;top:0;right:0;width:min(380px,92vw);height:100vh;padding:24px;background:#131a22;border-left:1px solid #303a46;box-shadow:-24px 0 70px rgba(0,0,0,.42);transform:translateX(105%);transition:transform .25s ease;overflow:auto}.drawer.open{transform:translateX(0)}.drawer-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:26px}.drawer-head span{color:#7f8b99;font-size:10px;letter-spacing:.15em}.drawer-head h2{margin:4px 0;font-size:22px}.setting-group{margin:20px 0;padding-top:18px;border-top:1px solid var(--line-soft)}.setting-group h3{margin:0 0 14px;color:#d9a16b;font-size:10px;letter-spacing:.15em;text-transform:uppercase}.setting-group label{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:49px;color:#adb6c1;font-size:12px}.setting-group select{min-width:145px;height:36px;padding:0 10px;border:1px solid #34404d;border-radius:8px;background:#1a222b;color:#e5e9ee}.setting-group input[type=range]{width:145px;accent-color:#e49b59}.setting-group input[type=checkbox]{width:39px;height:21px;accent-color:#e49b59}.scrim{position:fixed;z-index:15;inset:0;background:rgba(3,6,9,.65);backdrop-filter:blur(2px)}.modal{width:min(520px,calc(100vw - 32px));padding:30px;border:1px solid #35414e;border-radius:18px;background:#151c24;color:#eef1f4;box-shadow:0 28px 100px rgba(0,0,0,.6);text-align:center}.modal::backdrop{background:rgba(4,7,11,.7);backdrop-filter:blur(5px)}.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:1px solid #34404c;border-radius:9px;background:#1c252f;color:#a6b0bc;cursor:pointer}.modal h2{margin:8px 0 20px}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.summary-grid div{padding:14px 8px;border:1px solid #2d3844;border-radius:10px;background:#111820}.summary-grid span{display:block;color:#778494;font-size:10px}.summary-grid strong{display:block;margin-top:5px;font-size:21px}.mode-stats{margin-top:17px;text-align:left}.mode-stat{display:grid;grid-template-columns:1fr auto;gap:4px;padding:11px 4px;border-bottom:1px solid var(--line-soft);font-size:12px}.mode-stat span{color:#8995a3}.welcome{max-width:470px}.welcome-mark{width:62px;height:62px;margin:0 auto 17px;font-size:29px}.welcome h2{font-size:24px}.welcome p{margin:0 auto 25px;max-width:360px;color:#98a3b1;font-size:13px;line-height:1.75}
@media(max-width:760px){.app-shell{padding:0 15px 24px}.topbar{grid-template-columns:1fr auto;height:62px}.topnav{display:none}.mode-head{margin-top:18px}.mode-head h1{font-size:21px}.mode-head p{font-size:11px}.key-chip{padding:7px 9px}.mode-tabs{justify-content:flex-start;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.mode-tabs button{flex:0 0 auto;padding:7px 10px}.circle-zone{width:min(94vw,570px)}.direction{display:none}.task-panel{min-height:74px;padding:10px 8px}.answer-grid{width:100%;display:grid;gap:5px}.degree-answers{grid-template-columns:repeat(7,1fr)}.text-answers{grid-template-columns:repeat(2,1fr)}.answer-grid button{min-width:0;padding:0 5px}.control-dock{width:100%;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:5px}.control{min-width:0!important;padding:0 6px;font-size:11px}.control.ghost{grid-column:1/-1}.stats-strip{gap:14px}.shortcut{display:none!important}.progress-slots{gap:4px;overflow:auto}.progress-slot{min-width:43px;padding:7px 6px}.major-label{font-size:27px}.major-label.compact{font-size:18px}.minor-label{font-size:17px}}
@media(max-width:430px){.mode-head{align-items:center}.eyebrow{font-size:8px}.key-chip strong{font-size:11px}.circle-zone{width:97vw;margin-left:-1.5vw}.task-panel h2{font-size:15px}.stats-strip{margin-top:14px}.summary-grid{grid-template-columns:1fr}.drawer{padding:19px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}