@property --m-acc{syntax:"<color>";inherits:true;initial-value:#d3aa54}@property --m-soft{syntax:"<color>";inherits:true;initial-value:#0000}@property --m-line{syntax:"<color>";inherits:true;initial-value:#0000}@property --m-glow{syntax:"<color>";inherits:true;initial-value:#0000}@property --m-amb{syntax:"<color>";inherits:true;initial-value:#0000}.modes-page{--mo-ease:cubic-bezier(.2, .7, .2, 1);--mo-on-acc:#120c04;transition:--m-acc .7s,--m-soft .7s,--m-line .7s,--m-glow .7s,--m-amb 1.2s;position:relative}@supports (color:lab(0% 0 0)){.modes-page{--mo-on-acc:lab(3.71299% 1.09463 3.77601)}}.mo-ambient{pointer-events:none;z-index:0;background:radial-gradient(1000px 520px at 50% -160px, var(--m-amb), transparent 70%);position:fixed;inset:0}.mo-chapter{z-index:2;padding:40px 32px 110px;position:relative}.mo-inner{max-width:1160px;margin:0 auto}.modes-page em{font-family:var(--font-display);color:var(--m-acc);font-style:italic;font-weight:400}.modes-page b{color:var(--ink);font-weight:400}.modes-page button{font-family:inherit}.modes-page button:focus-visible{outline:2px solid color-mix(in oklab, var(--m-acc) 60%, transparent);outline-offset:2px}.mo-crumb{font:400 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-subtle);align-items:center;gap:8px;margin-bottom:12px;display:flex}.mo-crumb .here{color:var(--ink)}.mo-hero{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;display:flex}.mo-hero h1{letter-spacing:-.03em;margin:0;font-size:clamp(30px,4.5vw,48px);font-weight:400;line-height:1}.mo-hero p{max-width:52ch;color:var(--ink-muted);text-wrap:pretty;margin:0;font-size:15px;line-height:1.6}.mo-spectrum{margin-top:26px}.mo-spec-bar{opacity:.9;background:linear-gradient(90deg,#6addf7,#ecbd51,#fb9d59,#68ceaa,#8ca2e4,#ef6661,#a185b7);background:linear-gradient(90deg,lab(82.1563% -28.4789 -23.4324),lab(79.3382% 9.4277 59.3369),lab(73.8123% 31.6311 50.3442),lab(75.9391% -37.6911 8.44592),lab(66.7343% 4.61593 -36.3614),lab(61.2026% 53.402 31.0145),lab(59.4839% 18.5235 -22.4677));border-radius:999px;height:8px;position:relative}.mo-spec-marker{border:3px solid var(--bg);background:var(--m-acc);width:18px;height:18px;box-shadow:0 0 16px var(--m-glow);transition:left .8s var(--mo-ease);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.mo-spec-ends{font:400 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-subtle);justify-content:space-between;margin:8px 2px 0;display:flex}.mo-spec-tiles{grid-template-columns:repeat(7,minmax(96px,1fr));gap:6px;margin-top:12px;padding-bottom:4px;display:grid;overflow-x:auto}.mo-tile{cursor:pointer;border:1px solid var(--line);min-width:0;color:var(--ink-muted);transition:all .3s var(--mo-ease);background:0 0;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;display:flex}.mo-tile:hover{border-color:var(--line-strong)}.mo-tile .dot{background:var(--c);border-radius:50%;width:10px;height:10px}.mo-tile b{text-align:center;-webkit-hyphens:auto;hyphens:auto;max-width:100%;color:inherit;font-size:12px;font-weight:500;line-height:1.2}.mo-tile .alt{font:400 10px/1 var(--font-mono);color:var(--ink-subtle);text-align:center}.mo-tile[data-on]{border-color:var(--c);background:color-mix(in oklab, var(--c) 14%, transparent);color:var(--ink)}.mo-tile[data-on] .alt{color:var(--c)}.mo-grid{flex-wrap:wrap;align-items:flex-start;gap:28px;margin-top:30px;display:flex}.mo-panel{box-sizing:border-box;background:var(--bg-elevated);border:1px solid var(--line);border-radius:16px;flex-direction:column;flex:400px;align-items:center;gap:16px;width:100%;min-width:0;max-width:560px;margin:0 auto;padding:22px;display:flex;position:sticky;top:76px}.mo-wheel-box{aspect-ratio:1;flex:none;width:100%;max-width:380px;position:relative}.mo-wheel{width:380px;height:380px;transform:scale(var(--wheel-scale,1));transform-origin:0 0;position:absolute;top:0;left:0}.mo-w-disc{background:var(--bg-sunken);border:1px solid var(--line);border-radius:50%;position:absolute;inset:0}.mo-w-dash{border:1px dashed var(--line);border-radius:50%;position:absolute;inset:52px}.mo-w-chroma{width:40px;height:20px;font:500 11.5px/1 var(--font-sans);color:var(--ink-faint);transition:transform 1.2s var(--mo-ease), color .6s;justify-content:center;align-items:center;margin:-10px 0 0 -20px;display:flex;position:absolute;top:50%;left:50%}.mo-w-chroma[data-s=in]{color:var(--ink)}.mo-w-chroma[data-s=tonic]{color:var(--m-acc)}.mo-w-ghost,.mo-w-shape{transition:clip-path 1.1s var(--mo-ease);position:absolute;inset:52px}.mo-w-ghost{background:var(--ink);opacity:.08}.mo-w-shape{background-color:var(--m-acc);opacity:.88}.mo-w-beam{transform-origin:50% 100%;pointer-events:none;width:2px;height:130px;transition:transform .32s var(--mo-ease), opacity .4s;background:linear-gradient(#f5f3f0e6,#0000);background:linear-gradient(lab(95.9605% .135928 1.90176/.9),#0000);margin-left:-1px;position:absolute;top:50%;left:50%}.mo-w-tp{width:22px;height:16px;font:500 10px/1 var(--font-mono);color:var(--ink-subtle);pointer-events:none;transition:transform 1.1s var(--mo-ease), background .6s, color .6s;border-radius:6px;justify-content:center;align-items:center;margin:-8px 0 0 -11px;display:flex;position:absolute;top:50%;left:50%}.mo-w-tp[data-half]{background:var(--m-soft);color:var(--m-acc)}.mo-w-tp[data-half][data-hide]{background:var(--bg-elevated-2);color:var(--ink-muted)}.mo-w-center{pointer-events:none;color:var(--mo-on-acc);flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:absolute;inset:0}.mo-w-center .word{font:italic 400 34px/1 var(--font-display);animation:mo-word .8s var(--mo-ease) both}.mo-w-center .name{font:500 11px/1 var(--font-mono);opacity:.75}.mo-w-dot{cursor:pointer;width:36px;height:36px;font:italic 400 15px/1 var(--font-display);background:var(--bg-elevated);color:var(--ink);border:1px solid var(--line-input);transition:transform 1.1s var(--mo-ease), background .5s, color .5s, box-shadow .4s;border-radius:50%;justify-content:center;align-items:center;margin:-18px 0 0 -18px;padding:0;display:flex;position:absolute;top:50%;left:50%}.mo-w-dot[data-tonic]{border:2px solid var(--m-acc)}.mo-w-dot[data-char]{background:var(--ink);color:var(--mo-on-acc);box-shadow:0 0 20px var(--m-glow)}.mo-w-dot[data-on]{box-shadow:0 0 0 6px var(--m-soft), 0 0 28px var(--m-glow)}.mo-tonics{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.mo-chip{cursor:pointer;border:1px solid var(--line);min-width:42px;color:var(--ink-muted);background:0 0;border-radius:999px;justify-content:center;align-items:center;padding:7px 11px;font-size:12.5px;font-weight:500;transition:all .3s;display:inline-flex}.mo-chip[data-on]{border-color:var(--m-line);background:var(--m-soft);color:var(--m-acc)}.mo-steps{gap:4px;width:100%;max-width:380px;height:30px;display:flex}.mo-step{min-width:0;font:500 11px/1 var(--font-mono);background:var(--bg-elevated-2);color:var(--ink-muted);transition:flex .9s var(--mo-ease), background .6s, color .6s;border:1px solid #0000;border-radius:7px;justify-content:center;align-items:center;display:flex}.mo-step[data-half]{background:var(--m-soft);color:var(--m-acc);border-color:var(--m-line)}.mo-facts{background:var(--line);border-radius:10px;grid-template-columns:1fr 1fr;gap:1px;width:100%;display:grid;overflow:hidden}.mo-fact{background:var(--bg-elevated);flex-direction:column;gap:4px;min-width:0;padding:10px 14px;display:flex}.mo-fact .k{letter-spacing:.07em;text-transform:uppercase;color:var(--ink-subtle);font-size:10.5px;font-weight:500}.mo-fact .v{color:var(--ink);font-size:13px;line-height:1.35;transition:color .6s}.mo-fact .v[data-accent]{color:var(--m-acc)}.mo-fact .v[data-q]{color:var(--ink-subtle)}.mo-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.mo-btn-acc,.mo-btn-ghost,.mo-btn-stop{cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:8px;height:44px;display:inline-flex}.mo-btn-acc{background:var(--m-acc);color:var(--mo-on-acc);border:0;padding:0 18px;font-size:14px;font-weight:600}.mo-btn-ghost{color:var(--ink);border:1px solid var(--line-input);background:0 0;padding:0 16px;font-size:13.5px;font-weight:500}.mo-btn-stop{color:var(--ink-muted);border:1px solid var(--line);background:0 0;padding:0 14px;font-size:13.5px}.mo-wheel-note{color:var(--ink-muted);text-align:center;text-wrap:pretty;margin:0;font-size:12px;line-height:1.55}.mo-lessons{flex-direction:column;flex:480px;gap:14px;min-width:0;display:flex}.mo-tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.mo-tab{cursor:pointer;text-align:left;min-width:0;color:var(--ink-muted);background:0 0;border:0;flex-direction:column;gap:7px;padding:0 0 10px;transition:color .3s;display:flex}.mo-tab[data-state=on]{color:var(--ink)}.mo-tab .n{font:400 10px/1 var(--font-mono);letter-spacing:.12em;color:var(--ink-subtle)}.mo-tab .t{overflow-wrap:anywhere;font-size:12px;font-weight:500;line-height:1.25}.mo-tab .bar{background:var(--line);border-radius:2px;height:3px;transition:background .6s}.mo-tab[data-state=done] .bar{background:var(--line-input)}.mo-tab[data-state=on] .bar{background:var(--m-acc)}.mo-card{background:var(--bg-elevated);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:20px;min-height:560px;padding:24px;display:flex}.mo-lesson{animation:mo-fadeup .5s var(--mo-ease) both;flex-direction:column;gap:18px;display:flex}.mo-lesson.quiz{gap:16px}.mo-lesson h2{letter-spacing:-.01em;margin:0;font-size:22px;font-weight:500}.mo-lesson .lead,.mo-lesson .note{color:var(--ink-muted);text-wrap:pretty;margin:0}.mo-lesson .lead{font-size:14px;line-height:1.65}.mo-lesson .note{font-size:13.5px;line-height:1.6}.mo-cap{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-subtle);font-size:11px;font-weight:500}.mo-block{flex-direction:column;gap:10px;display:flex}.mo-degrees{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;display:grid}.mo-degree{cursor:pointer;text-align:left;background:var(--bg-elevated-2);color:var(--ink);border:1px solid #0000;border-radius:12px;flex-direction:column;gap:6px;padding:12px 14px;font-size:13px;line-height:1.35;display:flex}.mo-degree:hover{border-color:var(--m-line)}.mo-degree .r{font:italic 400 20px/1 var(--font-display);color:var(--m-acc)}.mo-whites{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;display:grid}.mo-white{cursor:pointer;text-align:left;border:1px solid var(--line);color:var(--ink);background:0 0;border-radius:10px;flex-direction:column;gap:4px;padding:11px 12px;transition:all .3s;display:flex}.mo-white .l{font-size:14px;font-weight:500}.mo-white .s{color:var(--ink-muted);font-size:11.5px}.mo-white[data-on]{border-color:color-mix(in oklab, var(--c) 40%, transparent);background:color-mix(in oklab, var(--c) 12%, transparent)}.mo-rows{flex-direction:column;gap:8px;display:flex}.mo-rows.tight{gap:6px}.mo-row{background:var(--bg-elevated-2);border-radius:12px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;display:grid}.mo-row .txt,.mo-color-row .txt,.mo-method .txt{flex-direction:column;gap:3px;min-width:0;display:flex}.mo-row .ttl{align-items:center;gap:9px;font-size:14px;font-weight:500;display:flex}.mo-row .dot,.mo-ladder-row .dot{background:var(--c);border-radius:50%;flex:none;width:9px;height:9px}.mo-row .sub,.mo-color-row .sub,.mo-method .sub{color:var(--ink-muted);text-wrap:pretty;font-size:12.5px;line-height:1.5}.mo-pill{cursor:pointer;height:34px;color:var(--ink);border:1px solid var(--line-input);white-space:nowrap;background:0 0;border-radius:999px;align-items:center;gap:6px;padding:0 13px;font-size:12.5px;font-weight:500;display:inline-flex}.mo-pill.sm{height:32px;padding:0 12px;font-size:12px}.mo-color-row{cursor:pointer;text-align:left;border:1px solid var(--line);color:var(--ink);background:0 0;border-radius:12px;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 16px;transition:all .3s;display:grid}.mo-color-row:hover{background:var(--bg-elevated-2)}.mo-color-row[data-on]{border-color:color-mix(in oklab, var(--c) 40%, transparent);background:color-mix(in oklab, var(--c) 10%, transparent)}.mo-color-row .mark{font:400 13px/1 var(--font-mono);color:var(--c)}.mo-color-row .ttl{font-size:14px;font-weight:500}.mo-color-row .go{color:var(--ink-muted);white-space:nowrap;font-size:12px}.mo-ladder-scroll{margin:0 -6px;overflow-x:auto}.mo-ladder{flex-direction:column;gap:4px;min-width:560px;padding:0 6px;display:flex}.mo-ladder-head,.mo-ladder-row{grid-template-columns:minmax(118px,1.3fr) repeat(7,minmax(0,1fr)) 48px;gap:5px;display:grid}.mo-ladder-head{font:italic 400 15px/1 var(--font-display);color:var(--ink-subtle);text-align:center;padding:4px 12px}.mo-ladder-row{cursor:pointer;text-align:left;color:var(--ink-muted);background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;padding:6px 12px;transition:all .3s}.mo-ladder-row:hover{background:var(--bg-elevated-2)}.mo-ladder-row[data-on]{border-color:var(--c);background:var(--bg-elevated-2);color:var(--ink)}.mo-ladder-row .name{align-items:center;gap:9px;min-width:0;display:flex}.mo-ladder-row .nm{text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:500;overflow:hidden}.mo-ladder-row .cell{height:30px;font:400 11.5px/1 var(--font-mono);white-space:nowrap;border:1px solid var(--line);color:var(--ink-subtle);border-radius:7px;justify-content:center;align-items:center;display:flex}.mo-ladder-row[data-on] .cell{color:var(--ink)}.mo-ladder-row .cell[data-changed]{color:var(--c);border-color:color-mix(in oklab, var(--c) 20%, transparent)}.mo-ladder-row .cell[data-fresh]{color:var(--c);background:color-mix(in oklab, var(--c) 16%, transparent);border-color:color-mix(in oklab, var(--c) 40%, transparent)}.mo-ladder-row .step{text-align:right;font:400 11px/1 var(--font-mono);color:var(--c)}.mo-callout{border:1px solid var(--m-line);background:linear-gradient(135deg, var(--m-soft), transparent);border-radius:12px;flex-direction:column;gap:8px;padding:16px;display:flex}.mo-callout.big{border-radius:14px;padding:18px}.mo-callout p{color:var(--ink-muted);text-wrap:pretty;margin:0;font-size:13.5px;line-height:1.6}.mo-callout p.ink{color:var(--ink);font-size:14px}.mo-ex{flex-wrap:wrap;gap:6px;display:flex}.mo-ex span{border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:12px;line-height:1.4}.mo-pairs{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;display:grid}.mo-pair{background:var(--bg-elevated-2);border-radius:12px;flex-direction:column;gap:10px;padding:16px;display:flex}.mo-pair .ttl{font-size:14px;font-weight:500}.mo-pair .sub{color:var(--ink-muted);font-size:13px;line-height:1.6}.mo-pair .mo-pill{align-self:flex-start}.mo-quiz-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.mo-quiz-play{cursor:pointer;background:var(--m-acc);height:46px;color:var(--mo-on-acc);border:0;border-radius:999px;align-items:center;gap:10px;padding:0 20px 0 8px;font-size:14.5px;font-weight:600;display:inline-flex}.mo-quiz-play .disc{background:var(--mo-on-acc);width:32px;height:32px;color:var(--m-acc);border-radius:50%;justify-content:center;align-items:center;font-size:12px;display:inline-flex}.mo-method{background:var(--bg-elevated-2);border-radius:12px;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 14px;display:grid}.mo-method .n{font:italic 400 20px/1 var(--font-display);color:var(--m-acc)}.mo-method .txt b{font-size:13.5px;font-weight:500;line-height:1.3}.mo-seg{background:var(--bg-sunken);border:1px solid var(--line);border-radius:12px;align-self:flex-start;gap:4px;padding:4px;display:flex}.mo-seg button{cursor:pointer;color:var(--ink-muted);background:0 0;border:0;border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:500;transition:all .3s}.mo-seg button[data-on]{background:var(--bg-elevated-2);color:var(--ink)}.mo-answers{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;display:grid}.mo-answer{cursor:pointer;border:1px solid var(--line);background:var(--bg-elevated);color:var(--ink);overflow-wrap:anywhere;border-radius:10px;padding:13px 6px;font-size:12.5px;font-weight:500;line-height:1.25;transition:all .35s}.mo-answer[data-st=right]{background:color-mix(in oklab, var(--c) 15%, transparent);color:var(--c);border-color:#0000}.mo-answer[data-st=wrong]{background:color-mix(in oklab, var(--bad) 16%, transparent);color:var(--bad);border-color:#0000}.mo-quiz-msg{color:var(--bad);text-wrap:pretty;animation:mo-fadeup .5s var(--mo-ease) both;margin:0;font-size:13.5px;line-height:1.6}.mo-quiz-msg[data-ok]{color:var(--c)}.mo-quiz-meta{font:400 12px/1.4 var(--font-mono);color:var(--ink-muted);flex-wrap:wrap;gap:18px;display:flex}.mo-quiz-meta b{color:var(--ink)}.mo-nav{border-top:1px solid var(--line);justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;display:flex}.mo-nav-prev,.mo-nav-next{cursor:pointer;border-radius:10px;align-items:center;height:38px;padding:0 14px;font-size:14px;font-weight:500;display:inline-flex}.mo-nav-prev{color:var(--ink);border:1px solid var(--line-input);background:0 0}.mo-nav-prev:disabled{color:var(--ink-subtle);cursor:default}.mo-nav-next{background:var(--m-acc);color:var(--mo-on-acc);border:0}.mo-nav-next[data-last]{background:var(--bg-elevated-2);color:var(--ink-muted)}@keyframes mo-fadeup{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes mo-word{0%{opacity:0;filter:blur(8px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}@media (max-width:920px){.mo-panel{position:static}}@media (max-width:640px){.mo-chapter{padding:28px 16px 72px}.mo-panel,.mo-card{padding:16px}.mo-tabs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:10px}.mo-card{min-height:0}.mo-method{grid-template-columns:24px minmax(0,1fr)}.mo-method .mo-pill{grid-column:2;justify-self:start}.mo-color-row{grid-template-columns:48px minmax(0,1fr)}.mo-color-row .go{display:none}}@media (prefers-reduced-motion:reduce){.modes-page *,.modes-page :before,.modes-page :after{transition-duration:.001ms!important;animation-duration:.001ms!important}}
