:root{color:#182143;font-synthesis:none;background:#faf7ef;font-family:Bricolage Grotesque,Noto Sans SC,Avenir,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:focus-visible,.board-scroll:focus-visible{outline-offset:3px;outline:3px solid #e98346}.app-shell{max-width:1220px;margin:auto;padding:28px clamp(18px,4vw,48px) 50px}.topbar{justify-content:space-between;align-items:start;gap:24px;display:flex}.eyebrow{letter-spacing:.12em;color:#8b5c3e;margin:0 0 9px;font-size:.78rem;font-weight:900}h1{letter-spacing:-.045em;margin:0;font-family:Noto Serif SC,Bricolage Grotesque,serif;font-size:clamp(2.4rem,5vw,4.3rem);line-height:1.12}.subtitle{margin:6px 0 0;font-family:Noto Serif SC,serif;font-size:1.25rem;font-weight:700}.language-picker{white-space:nowrap;border:2px solid #182143;border-radius:999px;padding:3px;display:flex}.language-picker button{color:#182143;background:0 0;border:0;border-radius:999px;min-height:48px;padding:0 17px;font-weight:800}.language-picker button[aria-pressed=true]{color:#fff;background:#182143}.instruction{margin:24px 0 14px;font-size:1.1rem;font-weight:700}.board-area{background:#fffdf7;border:2px solid #182143;border-radius:22px;overflow:hidden;box-shadow:0 10px #e8e1d2}.board-scroll{touch-action:pan-x;scrollbar-color:#bfb39f transparent;overflow:auto hidden}.board-canvas{background:repeating-linear-gradient(90deg,#eeece4 0 1px,#0000 1px 42px);width:1074px;height:600px;position:relative}.rung{background:#ede0bd;border:2px solid #182143;border-right:0;height:28px;position:absolute}.rung:last-of-type{border-right:2px solid #182143}.rung.half{background:repeating-linear-gradient(135deg,#e5edf1 0 5px,#64758b 5px 7px);border-color:#182143}.note{color:#182143;z-index:2;background:#f9f7f0;border:3px solid #182143;border-radius:50%;place-items:center;width:49px;height:49px;font-size:1.42rem;font-weight:900;display:grid;position:absolute;transform:translate(-50%);box-shadow:0 3px #c9c5b8}.note.selected{border-color:var(--family);color:#15233d;background:#fff1d3}.note:hover{transform:translate(-50%)translateY(-4px)}.flag{white-space:nowrap;color:#182143;letter-spacing:.02em;z-index:3;touch-action:none;-webkit-user-select:none;user-select:none;background:#fffaf0;border:3px solid #182143;border-radius:13px;min-width:94px;min-height:50px;padding:8px 10px;font-weight:900;position:absolute;transform:translate(-50%);box-shadow:0 4px #9c9b95}.flag.active{color:#fff;z-index:4;background:#182143}.flag-arrow{margin-right:5px;font-size:1.15rem}.flag.start .flag-arrow{color:#dc7042}.flag.end .flag-arrow{color:#3a8c8c}.board-hint{background:#f1ece1;border-top:1px solid #d4cdbc;margin:0;padding:13px 18px;font-size:.9rem;font-weight:650}.lesson{grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;display:grid}.lesson-step,.answer{background:#fffdf8;border:2px solid #182143;border-radius:18px;min-height:150px;padding:19px 22px}.lesson-step{align-items:flex-start;gap:15px;display:flex}.step-index{color:#fff;background:#182143;border-radius:50%;place-items:center;min-width:36px;height:36px;font-weight:900;display:grid}.lesson h2{margin:2px 0 13px;font-size:1rem}.lesson p{margin:0;line-height:1.5}.lesson-step p{font-size:1.18rem}.lesson-step strong{font-size:1.35rem}.lesson small{color:#536075;margin-top:10px;display:block}.answer{border-color:var(--family);border-width:3px;grid-column:1/-1;align-items:center;gap:25px;min-height:116px;display:flex}.answer>p{text-transform:uppercase;letter-spacing:.07em;color:#536075;min-width:130px;font-size:.86rem;font-weight:900}.answer [data-testid=name]{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.answer strong{color:var(--family);font-family:Noto Serif SC,serif;font-size:clamp(1.9rem,4vw,3rem)}.answer [lang=en]{font-size:1.15rem;font-weight:800}.quality-badge{color:#182143;background:#f7f3eb;border:2px solid #182143;border-radius:14px;flex-shrink:0;place-items:center;width:54px;height:54px;display:grid}.badge-shape{font-size:2rem;font-weight:900;line-height:1}.quality-badge.minor .badge-shape{font-size:1.35rem}.quality-badge.major .badge-shape{font-size:2.35rem}.quality-badge.perfect .badge-shape{font-size:2.2rem}.quality-badge.diminished .badge-shape{font-size:1.2rem}.phase-note{color:#6f7382;margin-top:20px;font-size:.83rem}@media (width<=720px){.app-shell{padding:20px 14px 40px}.topbar{flex-direction:column;gap:15px}.language-picker{align-self:flex-start}.board-canvas{height:600px}.lesson{grid-template-columns:1fr}.answer{grid-column:auto;display:block}.answer>p{margin-bottom:12px}.board-hint{line-height:1.45}}@media (prefers-reduced-motion:no-preference){.note,.flag{transition:transform .14s,background-color .14s}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.top-controls{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.accidental-toggle{color:#182143;background:#fffdf7;border:2px solid #182143;border-radius:999px;min-height:48px;padding:6px 17px;font-weight:800}.accidental-toggle[aria-pressed=true]{background:#e4f2ed;border-color:#207d78}.accidental-toggle span{color:#a84079;margin-left:5px}.chromatic-point{color:#182143;z-index:3;touch-action:manipulation;white-space:nowrap;background:#fffdf7;border:3px dotted #64758b;border-radius:50%;width:36px;height:36px;padding:0;font-size:.78rem;font-weight:900;position:absolute;transform:translate(-50%)}.chromatic-point:before{content:"";position:absolute;inset:-5px}.chromatic-point span{color:#7c8390;margin:0 1px}.chromatic-point.selected{border-color:var(--family);background:#fff1d3}.spelling-chooser{background:#e9f2ef;border-top:2px solid #182143;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 16px;display:flex}.spelling-chooser strong{margin-right:5px;font-size:.9rem}.spelling-chooser button{background:#fff;border:2px solid #182143;border-radius:12px;min-width:64px;min-height:48px;font-weight:900}.flag-note{color:inherit;margin-left:5px;font-size:.8rem;display:inline-block}.quality-badge[class*=doubly] .badge-shape,.quality-badge[class*=triply] .badge-shape{font-size:1.1rem}.board-area{position:relative}.spelling-chooser{z-index:6;background:#e9f2ef;border:2px solid #182143;border-radius:14px;max-width:calc(100% - 24px);position:absolute;top:10px;left:12px;box-shadow:0 4px #b6bcb8}@media (width<=720px){.top-controls{align-items:flex-start}.chromatic-point{font-size:.75rem}}@media (orientation:landscape) and (width>=700px) and (height<=1100px){.app-shell{padding:8px 22px 30px}.topbar{align-items:center}.eyebrow{margin-bottom:2px;font-size:.65rem}h1{font-size:2.15rem;line-height:1.05}.subtitle{display:none}.top-controls{flex-direction:row;align-items:center;gap:8px}.language-picker button{min-height:48px;padding:0 12px}.accidental-toggle{min-height:48px;padding:4px 11px;font-size:.85rem}.instruction{margin:5px 0 7px;font-size:.91rem}.board-hint{padding:6px 14px;font-size:.77rem}.lesson{gap:9px;margin-top:9px}.lesson-step{gap:9px;min-height:105px;padding:9px 13px}.lesson-step p{font-size:1rem}.step-index{min-width:30px;height:30px}.answer{min-height:85px;padding:12px 18px}.phase-note{margin-top:8px}.learning-layout{grid-template-columns:minmax(0,1fr) clamp(290px,31vw,350px);align-items:stretch;gap:14px;display:grid}.board-area{min-width:0}.lesson{grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:minmax(0,1fr);gap:10px;min-width:0;margin:0;display:grid}.lesson-step,.answer{min-height:0;padding:15px;overflow:hidden}.lesson-step{gap:11px}.lesson h2{margin:2px 0 12px;font-size:1rem}.lesson-step p{overflow-wrap:anywhere;font-size:1.05rem}.lesson-step strong{font-size:1.25rem}.lesson small{margin-top:9px;font-size:.76rem}.answer{grid-column:auto;display:block}.answer>p{min-width:0;margin-bottom:14px}.answer [data-testid=name]{gap:8px 12px}.answer strong{font-size:2rem}.board-hint{min-height:32px}}