:root{--primary-hover: color-mix(in oklab, var(--primary) 86%, #000);--on-primary: #FFFFFF;--highlight-soft: color-mix(in oklab, var(--highlight) 18%, var(--page-bg))}html[data-theme=theme-01][data-mode=light]{--page-bg: #F6F8F3;--card-bg: #FFFFFC;--panel-bg: #EAF1E8;--border-base: #D3DED0;--fg-base: #1F3127;--fg-subtle: #708276;--primary: #4E7560;--primary-soft: #DFEADF;--highlight: #D0A62C}html[data-theme=theme-01][data-mode=dark]{--page-bg: #13251B;--card-bg: #1B3024;--panel-bg: #294537;--border-base: #476252;--fg-base: #F3F7F2;--fg-subtle: #B2C2B6;--primary: #9BD3AA;--primary-soft: #2D513C;--highlight: #E6C85A;--on-primary: #183223}html[data-theme=theme-02][data-mode=light]{--page-bg: #F6F8F9;--card-bg: #FFFFFF;--panel-bg: #EAF0F2;--border-base: #D3DEE2;--fg-base: #243A46;--fg-subtle: #71828A;--primary: #5C7D89;--primary-soft: #E1EAED;--highlight: #9DB5BE;--on-primary: #FFFFFF}html[data-theme=theme-02][data-mode=dark]{--page-bg: #1B2A31;--card-bg: #243740;--panel-bg: #304852;--border-base: #4B646D;--fg-base: #F4F8F9;--fg-subtle: #BAC7CC;--primary: #8FB8C3;--primary-soft: #3A555F;--highlight: #B7CDD3;--on-primary: #17262D}html[data-theme=theme-03][data-mode=light]{--page-bg: #F3FAFA;--card-bg: #FFFFFF;--panel-bg: #E3F4F3;--border-base: #C5E1DF;--fg-base: #0E3E42;--fg-subtle: #638184;--primary: #0A7076;--primary-soft: #D4F1EF;--highlight: #21B8C4;--on-primary: #FFFFFF}html[data-theme=theme-03][data-mode=dark]{--page-bg: #052F35;--card-bg: #073D44;--panel-bg: #0B5058;--border-base: #26717A;--fg-base: #F0FCFC;--fg-subtle: #A8C9CB;--primary: #42D6D6;--primary-soft: #0D5C62;--highlight: #27C5D4;--on-primary: #063A3F}html[data-theme=theme-04][data-mode=light]{--page-bg: #FAF7F1;--card-bg: #FFFDF8;--panel-bg: #F4EADF;--border-base: #E7D5C0;--fg-base: #3F3028;--fg-subtle: #86756A;--primary: #8B6040;--primary-soft: #EDDDCA;--highlight: #C6975D;--on-primary: #FFFFFF}html[data-theme=theme-04][data-mode=dark]{--page-bg: #2B1E17;--card-bg: #38261E;--panel-bg: #4B352A;--border-base: #6F5141;--fg-base: #FCF7F1;--fg-subtle: #D4C0B2;--primary: #E0B37E;--primary-soft: #563E31;--highlight: #D6A567;--on-primary: #372215}html[data-theme=theme-05][data-mode=light]{--page-bg: #F8F6F3;--card-bg: #FFFEFC;--panel-bg: #EEE9E4;--border-base: #DCD3CA;--fg-base: #352E2A;--fg-subtle: #7A706A;--primary: #6E5B50;--primary-soft: #E9E0DA;--highlight: #A88C69;--on-primary: #FFFFFF}html[data-theme=theme-05][data-mode=dark]{--page-bg: #2A2420;--card-bg: #352E29;--panel-bg: #463C35;--border-base: #66574E;--fg-base: #FAF7F4;--fg-subtle: #C9BEB7;--primary: #B79B89;--primary-soft: #56473F;--highlight: #D0B17F;--on-primary: #2D211A}html[data-theme=theme-06][data-mode=light]{--page-bg: #F8F6F0;--card-bg: #FFFDF8;--panel-bg: #F3EBD9;--border-base: #D9C8A5;--fg-base: #0F2B4D;--fg-subtle: #6C7682;--primary: #163E69;--primary-soft: #DFE8F1;--highlight: #C79A3B;--on-primary: #FFFFFF}html[data-theme=theme-06][data-mode=dark]{--page-bg: #081D33;--card-bg: #0D2946;--panel-bg: #173858;--border-base: #31567C;--fg-base: #F6F9FC;--fg-subtle: #B8C7D6;--primary: #E0B653;--primary-soft: #1B4164;--highlight: #F0C969;--on-primary: #0D2946}:root,html[data-theme=theme-07][data-mode=light]{--page-bg: #F5F9FD;--card-bg: #FFFFFF;--panel-bg: #EAF2FA;--border-base: #CDDDEB;--fg-base: #163A61;--fg-subtle: #71889D;--primary: #2F659B;--primary-soft: #DFEAF6;--highlight: #82B7EA;--on-primary: #FFFFFF}html[data-theme=theme-07][data-mode=dark]{--page-bg: #0C2540;--card-bg: #132F4F;--panel-bg: #1D4167;--border-base: #3B6187;--fg-base: #F3F8FD;--fg-subtle: #B5C8DA;--primary: #78B6F0;--primary-soft: #254D74;--highlight: #A8D2F8;--on-primary: #0C2540}html[data-theme=theme-08][data-mode=light]{--page-bg: #FBF7F1;--card-bg: #FFFCF8;--panel-bg: #F4E5D5;--border-base: #E6CCB2;--fg-base: #4A2F20;--fg-subtle: #8A6F5F;--primary: #96521F;--primary-soft: #F3DDC8;--highlight: #D88942;--on-primary: #FFFFFF}html[data-theme=theme-08][data-mode=dark]{--page-bg: #2C190F;--card-bg: #3B2215;--panel-bg: #53301C;--border-base: #744A31;--fg-base: #FFF8F2;--fg-subtle: #D9C2B1;--primary: #E39A58;--primary-soft: #643A22;--highlight: #F1A75E;--on-primary: #3B2215}html[data-theme=theme-09][data-mode=light]{--page-bg: #F4FAF9;--card-bg: #FFFFFF;--panel-bg: #E7F1EF;--border-base: #C9DDDA;--fg-base: #123D3B;--fg-subtle: #708B89;--primary: #356F69;--primary-soft: #DDEDEA;--highlight: #74B9B0;--on-primary: #FFFFFF}html[data-theme=theme-09][data-mode=dark]{--page-bg: #0C2D2D;--card-bg: #123C3A;--panel-bg: #1A504C;--border-base: #376D68;--fg-base: #F2FBF9;--fg-subtle: #B5CECA;--primary: #86D2C9;--primary-soft: #225E59;--highlight: #62C3B7;--on-primary: #123C3A}html[data-theme=theme-10][data-mode=light]{--page-bg: #FAF8F2;--card-bg: #FFFDF8;--panel-bg: #F1ECE0;--border-base: #DFD6C3;--fg-base: #3E3B27;--fg-subtle: #7A7663;--primary: #6E6A3E;--primary-soft: #E8E3D2;--highlight: #B08D4F;--on-primary: #FFFFFF}html[data-theme=theme-10][data-mode=dark]{--page-bg: #262719;--card-bg: #343623;--panel-bg: #494A2E;--border-base: #696845;--fg-base: #FAF9F2;--fg-subtle: #CFCDBD;--primary: #C6B779;--primary-soft: #59593A;--highlight: #D0AA63;--on-primary: #2D2E1B}html[data-theme=theme-11][data-mode=light]{--page-bg: #F5F8FB;--card-bg: #FFFFFF;--panel-bg: #EAF0F5;--border-base: #D0DCE6;--fg-base: #1D3B59;--fg-subtle: #6F8192;--primary: #3F6C97;--primary-soft: #DEE9F3;--highlight: #7FA7CE;--on-primary: #FFFFFF}html[data-theme=theme-11][data-mode=dark]{--page-bg: #17283A;--card-bg: #21364C;--panel-bg: #2C465F;--border-base: #49647D;--fg-base: #F4F8FB;--fg-subtle: #B5C3CF;--primary: #78A8D2;--primary-soft: #35536D;--highlight: #9CC1E1;--on-primary: #17283A}html[data-theme=theme-12][data-mode=light]{--page-bg: #F2FBFD;--card-bg: #FFFFFF;--panel-bg: #E2F6FA;--border-base: #C4E6EC;--fg-base: #0C3A56;--fg-subtle: #63839A;--primary: #007B9F;--primary-soft: #D2F1F7;--highlight: #21C7D9;--on-primary: #FFFFFF}html[data-theme=theme-12][data-mode=dark]{--page-bg: #062A3E;--card-bg: #073A53;--panel-bg: #0A4D69;--border-base: #24728D;--fg-base: #F1FBFE;--fg-subtle: #A9CAD5;--primary: #32C7E2;--primary-soft: #0E607A;--highlight: #31D7D6;--on-primary: #062A3E}html[data-mode=dark]{--primary-hover: color-mix(in oklab, var(--primary) 84%, #FFF);--highlight-soft: color-mix(in oklab, var(--highlight) 22%, var(--page-bg))}:root{--bg: var(--page-bg);--bg-elevated: var(--card-bg);--bg-sunken: var(--panel-bg);--surface: var(--card-bg);--surface-alt: var(--panel-bg);--surface-sunken: var(--panel-bg);--surface-hover: color-mix(in oklab, var(--primary) 7%, var(--card-bg));--text: var(--fg-base);--text-strong: var(--fg-base);--text-muted: var(--fg-subtle);--text-faint: color-mix(in oklab, var(--fg-subtle) 76%, var(--page-bg));--fg: var(--fg-base);--fg-muted: var(--fg-subtle);--line: var(--border-base);--line-strong: color-mix(in oklab, var(--border-base) 72%, var(--fg-base));--border: var(--border-base);--border-subtle: color-mix(in oklab, var(--border-base) 55%, var(--card-bg));--border-strong: color-mix(in oklab, var(--border-base) 72%, var(--fg-base));--border-hover: var(--primary);--focus-ring: var(--highlight);--accent: var(--primary);--accent-strong: var(--primary-hover);--accent-soft: var(--primary-soft);--accent-ink: var(--on-primary);--brand-accent: var(--primary);--brand-accent-strong: var(--primary-hover);--brand-accent-soft: var(--primary-soft);--brand-accent-hover: var(--primary-hover);--brand-soft: var(--primary-soft);--brand-fg: var(--primary);--brand-deep: var(--primary-hover);--brand-ink: var(--fg-base);--brand-ring: color-mix(in oklab, var(--primary) 28%, transparent);--link: var(--primary);--btn-light: color-mix(in srgb, var(--primary) 70%, var(--surface));--btn-mid: var(--primary);--btn-dark: color-mix(in srgb, var(--primary) 88%, var(--primary-hover));--btn-crown: color-mix(in srgb, var(--surface) 16%, transparent);--btn-foot: color-mix(in srgb, var(--fg) 5%, transparent);--btn-rim: color-mix(in srgb, var(--surface) 19%, transparent);--btn-contact: color-mix(in srgb, var(--fg) 5%, transparent);--btn-mottle: color-mix(in srgb, var(--fg) 6%, transparent);--btn-relief: color-mix(in srgb, var(--primary-hover) 38%, transparent);--btn-dimple: color-mix(in srgb, var(--primary-hover) 17%, transparent);--btn-haze: color-mix(in srgb, var(--surface) 4.5%, transparent);--btn-hover-line: inset 0 0 0 .06em color-mix(in srgb, var(--primary-hover) 26%, transparent);--btn-press-line: inset 0 0 0 .08em color-mix(in srgb, var(--primary-hover) 18%, transparent);--success: #0F7A5A;--success-soft: #E3F5EE;--warning: #976222;--warning-soft: #FBF1E2;--danger: #C0392B;--danger-soft: #FBEAE8;--info: #1D4FD7;--info-soft: #E8EFFD;--success-fg: var(--success);--success-bg: var(--success-soft);--warn-fg: var(--warning);--warn-bg: var(--warning-soft);--warning-fg: var(--warning);--danger-fg: var(--danger);--danger-bg: var(--danger-soft);--info-fg: var(--info);--info-bg: var(--info-soft);--warn: var(--warning);--teach-expression: var(--highlight);--teach-expression-line: color-mix(in oklab, var(--highlight) 74%, var(--fg-base));--teach-level1-fg: var(--highlight);--teach-level2-fg: color-mix(in oklab, var(--highlight) 55%, var(--primary));--teach-key-bg: var(--highlight-soft);--teach-key-fg: color-mix(in oklab, var(--highlight) 62%, var(--fg-base));--teach-word-active-bg: color-mix(in oklab, var(--primary) 16%, transparent);--teach-word-active-fg: inherit;--teach-word-active-underline: color-mix(in oklab, var(--primary) 55%, transparent);--surface-1: var(--card-bg);--surface-2: var(--panel-bg);--header-glass: rgba(255, 255, 255, .66);--chip-bg: var(--primary-soft);--chip-selected-bg: var(--primary);--chip-selected-text: var(--on-primary);--sheet-option-bg: var(--primary-soft);--sheet-option-selected-bg: var(--primary);--sheet-option-selected-text: var(--on-primary);--search-bg: color-mix(in oklab, var(--card-bg) 90%, var(--panel-bg));--sheet-bg: var(--card-bg);--sheet-scrim: rgb(0 0 0 / 45%);--nav-glass: color-mix(in srgb, var(--card-bg) 88%, transparent);--nav-border: color-mix(in oklab, var(--border-base) 82%, transparent);--hero-scrim: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 92%, transparent) 0%, color-mix(in srgb, var(--card-bg) 48%, transparent) 64%, transparent 100%);--level-bg: var(--primary-soft);--level-fg: var(--primary);--tag-bg: color-mix(in oklab, var(--highlight) 18%, var(--card-bg));--tag-fg: color-mix(in oklab, var(--highlight) 68%, var(--fg-base));--vip-bg: #FBF0D2;--vip-fg: #8A5A12;--vip-border: #E3C56A;--sidebar-bg: #22323F;--sidebar-fg: #E8EFF8;--sidebar-muted: #A3B5CC;--sidebar-border: #2D4057;--sidebar-hover: rgba(255, 255, 255, .07);--sidebar-active: color-mix(in oklab, var(--primary) 18%, transparent)}html[data-mode=dark]{--header-glass: rgba(7, 17, 28, .68);--success: #4ED8A8;--success-soft: #17362D;--warning: #E5BC7E;--warning-soft: #362C1B;--danger: #F08A80;--danger-soft: #3A1F1D;--info: #7FA9F5;--info-soft: #1B2740;--vip-bg: #3A2C1B;--vip-fg: #E8C88A;--vip-border: #8D6A2A;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 14px rgba(0, 0, 0, .34);--shadow-lg: 0 14px 40px rgba(0, 0, 0, .44);--btn-light: color-mix(in srgb, var(--primary) 88%, #FFFFFF);--btn-mid: var(--primary);--btn-dark: color-mix(in srgb, var(--primary) 88%, var(--bg));--btn-crown: color-mix(in srgb, #FFFFFF 14%, transparent);--btn-foot: color-mix(in srgb, var(--bg) 22%, transparent);--btn-rim: color-mix(in srgb, #FFFFFF 20%, transparent);--btn-contact: color-mix(in srgb, var(--bg) 34%, transparent);--btn-mottle: color-mix(in srgb, var(--bg) 4%, transparent);--btn-relief: color-mix(in srgb, var(--bg) 32%, transparent);--btn-dimple: color-mix(in srgb, var(--bg) 5%, transparent);--btn-haze: color-mix(in srgb, #FFFFFF 3.5%, transparent);--btn-hover-line: inset 0 0 0 .06em color-mix(in srgb, #FFFFFF 22%, transparent);--btn-press-line: inset 0 0 0 .08em color-mix(in srgb, #FFFFFF 14%, transparent)}.player-surface{--surface: #FFFFFF;--surface-alt: #F3F7FB;--text: #17263D;--text-muted: #536983;--line: #DCE5EF;--border: #DCE5EF;--fg: #17263D;--fg-muted: #536983;--accent-on-surface: var(--primary)}html[data-mode=dark] .player-surface{--surface: #172536;--surface-alt: #1C2D41;--text: #E8EFF8;--text-muted: #A3B5CC;--line: #2D4057;--border: #2D4057;--fg: #E8EFF8;--fg-muted: #A3B5CC}html,html[data-mode] body{transition:background-color .16s ease,color .16s ease}@media (prefers-reduced-motion: reduce){html,html[data-mode] body{transition:none}}
