:root {
  --paper: #fbfaf6;
  --paper-2: #f4f0e8;
  --ink: #1c2430;
  --muted: #66707b;
  --line: #dedbd2;
  --coral: #ef6a52;
  --coral-soft: #fbe0d9;
  --violet: #7666c9;
  --blue: #3d78c5;
  --amber: #d99a2b;
  --green: #3e9374;
  --rose: #bf647b;
  --cyan: #3c9298;
  --gold: #bd8623;
  --shadow: 0 20px 60px rgba(43, 43, 32, .09);
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 1.25rem; height: 1.25rem; display: block; }
.site-header { height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(24px, 5vw, 76px); border-bottom: 1px solid rgba(31,38,45,.09); position: relative; z-index: 20; background: rgba(251,250,246,.91); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 9px; width: max-content; font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { color: var(--coral); width: 26px; display: grid; place-items: center; }
.brand-mark svg { width: 25px; height: 25px; }
.site-header nav { display: flex; gap: 40px; height: 100%; }
.site-header nav a { display: flex; align-items: center; position: relative; color: #68717a; font-size: 14px; font-weight: 600; }
.site-header nav a:hover, .site-header nav a.active { color: var(--ink); }
.site-header nav a.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: -1px; background: var(--coral); }
.header-note { justify-self: end; color: #818890; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
main { min-height: calc(100vh - 180px); }
footer { height: 102px; max-width: 1320px; margin: 0 auto; padding: 0 50px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #899097; }
footer p { font-size: 13px; }
.brand.mini { font-size: 16px; filter: grayscale(.3); opacity: .75; }

.hero { min-height: 680px; max-width: 1440px; margin: auto; display: grid; grid-template-columns: 1.03fr .97fr; overflow: hidden; }
.hero-copy { padding: 112px 6vw 90px max(6vw, 42px); align-self: center; }
.eyebrow, .section-kicker { display: flex; gap: 10px; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #747d84; }
.eyebrow span { display: inline-block; width: 22px; height: 2px; background: var(--coral); }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.045em; margin: 0; }
.hero h1 { margin-top: 26px; max-width: 660px; font-size: clamp(66px, 7vw, 108px); line-height: .86; }
h1 em, h2 em { color: var(--coral); font-weight: 500; }
.hero-lede { max-width: 575px; margin: 35px 0 32px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.65; color: #5e6872; }
.hero-actions { display: flex; gap: 12px; }
.button { min-height: 50px; padding: 0 22px; border: 0; border-radius: 9px; display: inline-flex; gap: 12px; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--ink); color: white; box-shadow: 0 9px 22px rgba(28,36,48,.15); }
.button.primary:hover { box-shadow: 0 13px 26px rgba(28,36,48,.24); }
.button.quiet { background: transparent; border: 1px solid var(--line); }
.button.small { min-height: 44px; padding: 0 17px; }
.button:disabled { opacity: .72; cursor: default; transform: none; }
.welcome-progress { margin-top: 34px; display: flex; gap: 15px; align-items: center; font-size: 12px; color: var(--muted); }
.welcome-progress b { color: var(--ink); }
.welcome-progress > div { width: 150px; height: 4px; border-radius: 9px; background: #e5e2d9; overflow: hidden; }
.welcome-progress i { height: 100%; display: block; background: var(--coral); }

.hero-visual { margin: 44px 38px 44px 0; border-radius: 34px 0 0 34px; background: #efebdf; position: relative; overflow: hidden; min-height: 590px; }
.staff-lines { position: absolute; inset: 28% -10% auto 2%; height: 210px; transform: rotate(-7deg); background: repeating-linear-gradient(to bottom, transparent 0, transparent 37px, rgba(71,75,72,.13) 38px, rgba(71,75,72,.13) 39px); }
.sun-orbit { position: absolute; width: 430px; height: 430px; border: 1px solid rgba(235,106,82,.22); border-radius: 50%; right: -80px; top: -100px; }
.sun-orbit::before, .sun-orbit::after { content: ""; position: absolute; border: 1px solid rgba(235,106,82,.16); border-radius: 50%; inset: 70px; }
.sun-orbit::after { inset: 140px; background: var(--coral); border: 0; box-shadow: 0 20px 70px rgba(239,106,82,.28); }
.sun-orbit span { position: absolute; width: 8px; height: 8px; background: var(--coral); border-radius: 50%; z-index: 2; }
.sun-orbit span:nth-child(1) { left: 30px; top: 210px; }
.sun-orbit span:nth-child(2) { right: 110px; bottom: 23px; }
.sun-orbit span:nth-child(3) { left: 86px; bottom: 54px; width: 5px; height: 5px; }
.note-card { position: absolute; width: 164px; height: 188px; border-radius: 18px; padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.note-card small { text-transform: uppercase; letter-spacing: .15em; font-size: 9px; font-weight: 700; opacity: .65; }
.note-card b { font-family: var(--serif); font-size: 86px; font-weight: 500; line-height: 1; }
.note-card i { font-style: normal; font-size: 24px; }
.note-card.note-a { top: 278px; left: 14%; background: #fff; transform: rotate(-7deg); }
.note-card.note-b { top: 210px; left: 48%; background: var(--ink); color: #fff; transform: rotate(6deg); }
.note-card.note-b span { margin-top: 5px; font-size: 11px; color: #b9c0c7; }
.floating-copy { position: absolute; left: 14%; bottom: 46px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.25; color: #6b6e69; }

.promise { padding: 105px max(6vw, 42px) 125px; max-width: 1440px; margin: auto; }
.promise h2, .path-preview h2 { margin-top: 16px; font-size: clamp(46px, 5vw, 72px); line-height: .98; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid var(--line); }
.feature-grid article { padding: 42px 55px 30px 0; position: relative; }
.feature-grid article + article { border-left: 1px solid var(--line); padding-left: 55px; }
.feature-number { position: absolute; right: 18px; top: 22px; font-family: var(--serif); color: #c0bdb3; font-size: 14px; }
.feature-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--coral-soft); color: var(--coral); }
.feature-grid h3 { font-family: var(--serif); font-size: 29px; margin: 27px 0 10px; }
.feature-grid p { color: var(--muted); line-height: 1.7; font-size: 14px; max-width: 295px; }
.path-preview { background: var(--ink); color: white; padding: 110px max(8vw, 70px); display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; }
.path-preview p { color: #aeb6bf; max-width: 490px; line-height: 1.7; }
.path-preview .section-kicker { color: #9099a3; }
.text-button { background: none; border: 0; padding: 0; margin-top: 18px; color: inherit; display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.phase-stack { display: grid; gap: 10px; }
.stack-card { height: 84px; padding: 0 24px; border-radius: 12px; display: flex; align-items: center; gap: 22px; color: var(--ink); transform: translateX(var(--shift, 0)); }
.stack-card:nth-child(2) { --shift: 20px; }
.stack-card:nth-child(3) { --shift: 40px; }
.stack-card:nth-child(4) { --shift: 60px; }
.stack-card > span { font-family: var(--serif); font-size: 28px; }
.stack-card div { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
.stack-card b { font-family: var(--serif); font-size: 24px; font-weight: 500; }
.stack-card small { opacity: .6; }
.coral { --accent: var(--coral); --soft: #f7dbd5; background-color: #f7dbd5; }
.violet { --accent: var(--violet); --soft: #e3def4; background-color: #e3def4; }
.blue { --accent: var(--blue); --soft: #dbe8f4; background-color: #dbe8f4; }
.amber { --accent: var(--amber); --soft: #f3e4c5; background-color: #f3e4c5; }
.green { --accent: var(--green); --soft: #d8e9df; background-color: #d8e9df; }
.rose { --accent: var(--rose); --soft: #efdae0; background-color: #efdae0; }
.cyan { --accent: var(--cyan); --soft: #d5e7e6; background-color: #d5e7e6; }
.gold { --accent: var(--gold); --soft: #f0e2c4; background-color: #f0e2c4; }

.course-intro, .progress-hero { max-width: 1220px; margin: auto; padding: 92px 36px 86px; display: flex; justify-content: space-between; gap: 70px; align-items: flex-end; }
.course-intro h1, .progress-hero h1 { font-size: clamp(58px, 7vw, 92px); line-height: .89; margin-top: 24px; }
.course-intro p, .progress-hero p { color: var(--muted); max-width: 560px; font-size: 17px; line-height: 1.65; }
.course-meter { min-width: 200px; display: flex; flex-direction: column; align-items: center; }
.meter-ring { --progress: 0; width: 142px; height: 142px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--coral) calc(var(--progress) * 1%), #e8e4dc 0); position: relative; }
.meter-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--paper); }
.meter-ring div { position: relative; z-index: 1; text-align: center; }
.meter-ring b { display: block; font-family: var(--serif); font-size: 40px; font-weight: 500; }
.meter-ring span { font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: .12em; }
.course-meter p { margin: 17px 0; font-size: 12px; }
.course-body { max-width: 1220px; margin: auto; padding: 0 36px 120px; display: grid; grid-template-columns: 205px 1fr; gap: 55px; align-items: start; }
.phase-nav { position: sticky; top: 30px; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.phase-nav > span { margin: 0 0 18px 17px; color: #92989c; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; }
.phase-nav a { margin-left: -1px; padding: 10px 10px 10px 17px; border-left: 2px solid transparent; font-size: 12px; color: #777f87; display: flex; align-items: center; gap: 8px; }
.phase-nav a:hover { border-color: var(--coral); color: var(--ink); }
.phase-nav i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.phase-block + .phase-block { margin-top: 85px; }
.phase-heading { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 23px; padding-bottom: 28px; }
.phase-orb { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); color: var(--accent); font-size: 22px; }
.phase-heading span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: #8d9399; }
.phase-heading h2 { font-size: 36px; margin-top: 3px; }
.phase-heading p { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.phase-count { font-family: var(--serif); font-size: 28px; text-align: right; }
.phase-count small { display: block; font-family: var(--sans); font-size: 9px; text-transform: uppercase; color: #9aa0a5; letter-spacing: .12em; }
.lesson-list { border-top: 1px solid var(--line); }
.lesson-row { width: 100%; min-height: 85px; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: grid; grid-template-columns: 44px 190px 1fr 28px; gap: 15px; align-items: center; text-align: left; cursor: pointer; transition: background .2s, transform .2s; }
.lesson-row:hover:not(:disabled) { background: white; transform: translateX(3px); }
.lesson-status { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d7d4cc; display: grid; place-items: center; font-family: var(--serif); font-size: 14px; color: #848b90; }
.lesson-row.done .lesson-status { border: 0; background: #dfece5; color: var(--green); }
.lesson-row.locked { opacity: .42; cursor: not-allowed; }
.lesson-info { display: flex; flex-direction: column; gap: 3px; }
.lesson-info small { font-size: 9px; text-transform: uppercase; color: #999fa3; letter-spacing: .13em; }
.lesson-info b { font-family: var(--serif); font-weight: 500; font-size: 18px; }
.lesson-insight { font-size: 12px; line-height: 1.5; color: #777f86; }
.row-arrow { justify-self: end; color: #a5aaa9; }

.lesson-topbar { max-width: 1220px; margin: auto; padding: 23px 36px; display: grid; grid-template-columns: 48px 1fr auto; gap: 20px; align-items: center; }
.icon-button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; cursor: pointer; }
.lesson-topbar > div { display: flex; align-items: center; gap: 16px; color: #7e858a; font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: .12em; }
.mini-meter { width: 140px; height: 3px; background: #e1ded6; overflow: hidden; }
.mini-meter i { display: block; height: 100%; background: var(--coral); }
.lesson-topbar > span { color: #90969b; font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: .12em; }
.lesson-page { max-width: 1220px; margin: 0 auto 100px; padding: 0 36px; }
.lesson-hero { min-height: 330px; border-radius: 20px; padding: 63px 72px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; }
.lesson-hero::after { content: ""; position: absolute; width: 340px; height: 340px; right: -45px; top: -85px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent), transparent 60%); box-shadow: 0 0 0 65px color-mix(in srgb, var(--accent), transparent 89%), 0 0 0 130px color-mix(in srgb, var(--accent), transparent 94%); }
.lesson-hero > div:first-child { position: relative; z-index: 2; max-width: 730px; }
.lesson-hero .eyebrow { color: color-mix(in srgb, var(--accent), #454545 35%); }
.lesson-hero .eyebrow span { background: var(--accent); }
.lesson-hero h1 { margin-top: 21px; font-size: clamp(52px, 7vw, 86px); line-height: .92; }
.lesson-hero p { max-width: 650px; margin: 23px 0 0; color: #4f5a63; font-size: 16px; line-height: 1.6; }
.lesson-glyph { width: 170px; height: 170px; position: relative; z-index: 1; display: grid; place-items: center; }
.lesson-glyph span { width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.7); display: grid; place-items: center; font-family: var(--serif); font-size: 60px; color: var(--accent); box-shadow: var(--shadow); }
.lesson-brief { margin: 42px 48px 0; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.goal-card { padding: 28px 30px; border-radius: 14px; background: var(--ink); color: white; display: flex; gap: 20px; align-items: flex-start; }
.goal-card > span { width: 42px; height: 42px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; flex: 0 0 auto; }
.goal-card small, .setup-title span, .starter-box small { color: #aab2ba; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.goal-card h2 { margin: 6px 0 7px; max-width: 780px; font-size: 29px; line-height: 1.2; }
.goal-card p { margin: 0; max-width: 760px; color: #bdc4ca; font-size: 13px; line-height: 1.6; }
.setup-title { margin: 28px 0 12px; display: flex; gap: 13px; align-items: baseline; }
.setup-title span { color: #777f86; }
.setup-title p { margin: 0; color: #92979b; font-size: 11px; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.setup-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: white; display: flex; gap: 15px; }
.setup-grid article > span { width: 38px; height: 38px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); display: grid; place-items: center; flex: 0 0 auto; font-size: 10px; font-weight: 800; }
.setup-grid b { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.setup-grid p { margin: 5px 0 0; color: #68717a; font-size: 12px; line-height: 1.55; }
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 65px; padding: 68px 48px 30px; align-items: start; }
.lesson-main { min-width: 0; }
.lesson-step { position: relative; padding: 0 0 64px 68px; border-left: 1px solid var(--line); }
.lesson-step:last-child { border-left-color: transparent; }
.step-head { display: flex; align-items: center; margin-bottom: 23px; }
.step-icon { position: absolute; left: -25px; width: 50px; height: 50px; border: 1px solid var(--line); background: var(--paper); border-radius: 50%; display: grid; place-items: center; color: #75808a; transition: all .2s; }
.step-head > div { flex: 1; }
.step-head small { font-size: 9px; color: #9da1a3; letter-spacing: .16em; }
.step-head h2 { font-size: 32px; }
.step-check { width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; border-radius: 50%; color: #b3b5b3; display: grid; place-items: center; cursor: pointer; }
.lesson-step.checked .step-check, .lesson-step.checked .step-icon { color: white; background: var(--green); border-color: var(--green); }
.step-copy { margin: 0 0 25px; color: #5d6872; line-height: 1.7; font-size: 15px; }
.plain-explanation { margin: 0 0 20px; font-family: var(--serif); font-size: 24px; line-height: 1.42; }
.terms-grid { display: grid; gap: 8px; }
.terms-grid article { padding: 16px 18px; border-radius: 9px; background: var(--paper-2); display: grid; grid-template-columns: 110px 1fr; gap: 15px; }
.terms-grid b { color: var(--coral); font-size: 12px; }
.terms-grid p { margin: 0; color: #636d75; font-size: 12px; line-height: 1.55; }
.misconception-box { margin-top: 10px; padding: 16px 18px; border-left: 3px solid #d27b68; background: #fff5f1; }
.misconception-box b { color: #9a5142; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.misconception-box p { margin: 5px 0 0; color: #765f59; font-size: 11px; line-height: 1.55; }
.walkthrough { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.walkthrough li { padding: 17px 18px; border: 1px solid var(--line); border-radius: 10px; background: white; display: flex; gap: 15px; }
.walkthrough li > span { width: 27px; height: 27px; border-radius: 50%; background: var(--ink); color: white; display: grid; place-items: center; flex: 0 0 auto; font-family: var(--serif); font-size: 14px; }
.walkthrough b { font-size: 12px; }
.walkthrough p { margin: 4px 0 0; color: #626c74; font-size: 13px; line-height: 1.55; }
.listen-cue { margin: 20px 0 10px; padding: 15px 18px; border-left: 3px solid var(--coral); background: var(--coral-soft); }
.listen-cue b { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #a34939; }
.listen-cue p { margin: 4px 0 0; color: #774d45; font-size: 13px; line-height: 1.55; }
.eureka { border-left: 3px solid var(--coral); padding: 4px 0 4px 20px; display: flex; gap: 18px; align-items: flex-start; }
.eureka span { color: var(--coral); text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .16em; margin-top: 5px; }
.eureka p { margin: 0; font-family: var(--serif); font-size: 25px; line-height: 1.35; max-width: 660px; }
.sound-lab { background: white; border: 1px solid #e5e1d9; border-radius: 16px; padding: 22px; box-shadow: 0 14px 40px rgba(51,50,40,.07); }
.sound-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sound-title > div { display: grid; grid-template-columns: 9px auto; align-items: center; column-gap: 8px; }
.sound-title b { font-size: 13px; }
.sound-title small { grid-column: 2; color: #979ca0; font-size: 10px; margin-top: 2px; }
.pulse-dot { width: 8px; height: 8px; background: var(--coral); border-radius: 50%; grid-row: 1 / 3; }
.play-button { border: 0; border-radius: 20px; min-width: 82px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--ink); color: white; cursor: pointer; }
.play-button.playing { background: var(--coral); }
.example-list { display: grid; gap: 7px; margin-bottom: 17px; }
.audio-example { padding: 12px 13px; border: 1px solid #e4e0d8; border-radius: 9px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.audio-example small { color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.audio-example p { margin: 3px 0 0; color: #626c74; font-size: 11px; line-height: 1.45; }
.audio-example .play-button { min-width: 76px; height: 34px; font-size: 11px; }
.waveform { height: 52px; display: flex; gap: 3px; align-items: center; margin: 12px 2px 22px; }
.waveform i { flex: 1; min-width: 2px; background: #d7d4cd; border-radius: 4px; }
.play-button.playing + .waveform i, .sound-lab:has(.play-button.playing) .waveform i { animation: wave .55s ease infinite alternate; background: var(--coral); }
.waveform i:nth-child(3n) { animation-delay: -.3s !important; }
@keyframes wave { to { transform: scaleY(.4); } }
.piano { height: 145px; position: relative; display: flex; user-select: none; }
.white-key { flex: 1; border: 1px solid #cfcac1; border-right: 0; background: #fdfcf9; position: relative; border-radius: 0 0 5px 5px; cursor: pointer; }
.white-key:last-of-type { border-right: 1px solid #cfcac1; }
.white-key span { position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; color: #a2a1a0; font-size: 9px; }
.white-key.pressed { background: var(--coral-soft); }
.black-key { position: absolute; top: 0; width: 8%; height: 92px; transform: translateX(-50%); z-index: 2; border: 0; border-radius: 0 0 5px 5px; background: var(--ink); cursor: pointer; box-shadow: 0 5px 7px rgba(0,0,0,.22); }
.black-key.pressed { background: var(--coral); }
.lab-tip { margin: 14px 0 0; color: #93989c; font-size: 10px; text-align: center; }
.creative-card { border-radius: 14px; background: var(--ink); color: white; padding: 25px; display: flex; gap: 18px; align-items: flex-start; }
.creative-card > span { width: 36px; height: 36px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; flex: 0 0 auto; }
.creative-card small { color: #9ea8b1; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; }
.creative-card p { margin: 7px 0 0; font-family: var(--serif); font-size: 24px; line-height: 1.3; }
.starter-box { margin-bottom: 12px; padding: 20px; border: 1px dashed #d5a99f; border-radius: 11px; background: #fff8f5; }
.starter-box small { color: #a75c4e; }
.starter-box p { margin: 8px 0 0; font-family: var(--serif); font-size: 21px; line-height: 1.4; }
.success-box { margin-top: 12px; padding: 20px; border: 1px solid #cddfd5; border-radius: 11px; background: #f2f8f5; }
.success-box > div { display: flex; align-items: center; gap: 9px; color: #34765f; }
.success-box > div span { width: 25px; height: 25px; border-radius: 50%; background: var(--green); color: white; display: grid; place-items: center; }
.success-box > div svg { width: 15px; }
.success-box b { font-size: 12px; }
.success-box ul { margin: 13px 0 0 19px; padding: 0; color: #526961; font-size: 12px; line-height: 1.65; }
.memory-note { padding: 17px 19px; border-radius: 9px; background: var(--paper-2); }
.memory-note b { font-size: 11px; }
.memory-note p { margin: 5px 0 0; color: #707980; font-size: 12px; line-height: 1.55; }
.memory-note small { display: block; margin-top: 8px; color: #536069; font-size: 11px; }
.creative-workspace { margin-top: 18px; padding: 18px; border: 1px solid #dce3df; border-radius: 12px; background: #fbfcf9; }
.creative-workspace-head,.creative-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.creative-workspace-head b,.creative-workspace-head small { display:block; }
.creative-workspace-head span { padding:6px 9px; border-radius:999px; background:#eee9dc; font-size:11px; }
.creative-workspace-head span.ready { background:#dcefe2; color:#1f6740; }
.creative-workspace label { display:grid; gap:6px; margin-top:14px; font-size:12px; font-weight:700; }
.creative-workspace input,.creative-workspace textarea { box-sizing:border-box; width:100%; border:1px solid #d7ddd9; border-radius:8px; padding:9px 10px; background:white; font:inherit; font-weight:400; }
.creative-workspace textarea { min-height:62px; resize:vertical; }
.creative-takes { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.creative-takes label { padding:12px; border:1px solid #e2e6e3; border-radius:9px; background:white; }
.creative-takes label span { display:flex; align-items:center; gap:6px; }
.creative-takes input[type="radio"] { width:auto; }
.creative-actions { margin-top:14px; }
.creative-actions small { max-width:430px; color:#68736d; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.timeline-controls { display:flex; align-items:end; gap:14px; padding:12px 14px; border-bottom:1px solid #39414b; background:#202731; color:#dce5ea; }
.timeline-controls label { display:grid; gap:4px; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.timeline-controls input,.timeline-controls select { min-width:76px; height:32px; border:1px solid #53606c; border-radius:6px; padding:0 8px; background:#2b3540; color:white; }
.timeline-controls > span { margin-left:auto; color:#91a0aa; font-size:11px; }
.loop-region { display:flex; gap:12px; padding:8px 14px; border-bottom:1px solid #39414b; background:#202731; color:#dce5ea; }
.loop-region label { display:flex; align-items:center; gap:7px; font-size:10px; }
.loop-region input { width:68px; height:29px; border:1px solid #53606c; border-radius:6px; padding:0 7px; background:#2b3540; color:white; }
.evidence-mastery { display:grid; gap:10px; margin-bottom:24px; }
.evidence-mastery article { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px 14px; padding:12px; border:1px solid var(--line); border-radius:9px; }
.evidence-mastery article b,.evidence-mastery article small { display:block; }
.evidence-mastery article small { margin-top:3px; color:#7a8480; }
.evidence-mastery article > span { padding:5px 8px; border-radius:999px; background:#e9efe9; color:#316348; font-size:10px; font-weight:700; }
.evidence-mastery article > div:last-child { grid-column:1/-1; height:5px; border-radius:5px; background:#e8ebe8; overflow:hidden; }
.evidence-mastery article i { display:block; height:100%; background:var(--accent); }
.assessment-question { margin-bottom: 12px; font-family: var(--serif); font-size: 22px; line-height: 1.35; }
.quiz-options { display: grid; gap: 9px; }
.quiz-option { min-height: 53px; border: 1px solid var(--line); background: white; border-radius: 9px; padding: 11px 16px; display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer; font-size: 13px; }
.quiz-option span { width: 17px; height: 17px; border: 1px solid #bbbdbb; border-radius: 50%; flex: 0 0 auto; }
.quiz-option:hover:not(:disabled) { border-color: var(--coral); }
.quiz-option.correct { border-color: var(--green); background: #f0f8f4; color: #2c725a; }
.quiz-option.correct span { background: var(--green); box-shadow: inset 0 0 0 4px white; border-color: var(--green); }
.quiz-option.wrong { border-color: #d98275; background: #fff5f3; }
.quiz-option.dim { opacity: .5; }
.quiz-feedback { padding: 17px 19px; border-radius: 9px; margin-top: 12px; font-size: 13px; }
.quiz-feedback.success { background: #e6f2ec; color: #2b7058; }
.quiz-feedback.retry { background: #f8e7e2; color: #955344; }
.quiz-feedback p { margin: 5px 0 0; line-height: 1.5; }
.reflection-label { display: block; margin: 30px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
textarea { width: 100%; min-height: 120px; resize: vertical; padding: 16px; border-radius: 10px; border: 1px solid var(--line); outline: none; background: white; color: var(--ink); line-height: 1.5; }
textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(239,106,82,.09); }
.save-state { height: 20px; text-align: right; color: var(--green); font-size: 10px; margin-top: 6px; }
.composition-brief { padding: 25px; border-radius: 14px 14px 0 0; background: #fff5ef; border: 1px solid #efd8cd; }
.composition-brief > span { color: var(--coral); text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 800; }
.composition-brief h3 { margin: 8px 0 7px; font-family: var(--serif); font-size: 29px; line-height: 1.25; }
.composition-brief > p { margin: 0; color: #5f6870; font-size: 13px; line-height: 1.55; }
.composition-brief > div { margin-top: 18px; padding-top: 15px; border-top: 1px solid #ead8ce; display: flex; align-items: baseline; gap: 10px; }
.composition-brief > div b { color: #885446; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.composition-brief > div small { color: #8a817c; font-size: 10px; }
.activity-card { position: relative; margin-bottom: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 15px; background: white; display: grid; grid-template-columns: 48px 1fr; gap: 20px; }
.activity-card.complete { border-color: #b9d8c8; background: #f6fbf8; }
.activity-number { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: white; display: grid; place-items: center; font-family: var(--serif); }
.activity-copy > span { color: var(--coral); text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 800; }
.activity-copy h3 { margin: 7px 0; font-family: var(--serif); font-size: 27px; }
.activity-copy > p { margin: 0; color: #626c74; line-height: 1.6; font-size: 13px; }
.explore-directions { margin: 18px 0; padding: 17px 19px; border-left: 3px solid var(--coral); background: var(--paper-2); }
.explore-directions b { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.explore-directions ol { margin: 9px 0 0 18px; padding: 0; color: #616b72; font-size: 11px; line-height: 1.7; }
.principle-reveal { margin-top: 18px; padding: 17px; border-radius: 9px; background: #e7f3ed; color: #326b57; }
.principle-reveal b { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.principle-reveal p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
.stability-lab { margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stability-head, .stability-row { min-height: 48px; padding: 0 14px; display: grid; grid-template-columns: 140px 1fr; align-items: center; border-bottom: 1px solid #ece9e3; }
.stability-head { min-height: 32px; background: var(--paper-2); color: #8b9093; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.stability-row:last-child { border-bottom: 0; }
.stability-row button { width: 85px; border: 0; border-radius: 18px; padding: 7px 10px; background: var(--ink); color: white; cursor: pointer; }
.stability-row select { height: 33px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); }
.discovery-workspace { margin: 16px 0; min-height: 105px; padding: 20px; border-radius: 10px; background: var(--paper-2); display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.discovery-workspace > span { border-radius: 7px; background: linear-gradient(135deg,#e4ded1,#f8f5ef); border: 1px dashed #c8c1b5; }
.discovery-workspace p { grid-column: 1 / -1; margin: 0; color: #81868a; font-size: 10px; text-align: center; }
.rank-workspace, .choice-workspace, .transform-workspace, .function-workspace, .lane-workspace, .analysis-workspace, .seed-workspace, .block-workspace, .edit-workspace { margin: 16px 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf7; }
.rank-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rank-workspace label { padding: 10px; border-radius: 8px; background: white; display: flex; gap: 8px; }
.rank-workspace button { flex: 1; border: 0; border-radius: 6px; background: var(--ink); color: white; cursor: pointer; }
.rank-workspace select, .function-workspace select, .block-workspace select, .lane-workspace select, .transform-workspace select { min-height: 36px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.edit-workspace > b, .function-workspace > b, .lane-workspace > b, .analysis-workspace > b, .seed-workspace > b, .block-workspace > b { display: block; margin-bottom: 12px; font-size: 11px; }
.edit-workspace > div { display: grid; grid-template-columns: repeat(12,1fr); gap: 4px; }
.edit-workspace button { height: 42px; border: 1px solid #d5d0c7; border-radius: 5px; background: white; color: #8b9092; cursor: pointer; }
.edit-workspace button.active { border-color: #54bdd5; background: #54bdd5; color: white; }
.edit-workspace small { display: block; margin-top: 9px; color: #8b9093; font-size: 9px; }
.choice-workspace { display: grid; gap: 7px; }
.choice-workspace > b { margin-bottom: 5px; font-size: 11px; }
.choice-workspace label { padding: 12px; border: 1px solid #e4e0d8; border-radius: 7px; background: white; cursor: pointer; }
.choice-workspace label span { margin: 0 9px; color: var(--coral); font-weight: 800; }
.transform-workspace { display: grid; grid-template-columns: 190px 1fr; gap: 10px; }
.transform-workspace label { display: grid; gap: 5px; color: #70777c; font-size: 9px; }
.transform-workspace textarea, .analysis-workspace textarea { min-height: 70px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; resize: vertical; }
.function-workspace > div, .block-workspace { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.block-workspace > b { grid-column: 1 / -1; }
.lane-workspace { display: grid; gap: 7px; }
.lane-workspace label { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; }
.analysis-workspace { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.analysis-workspace > b, .analysis-workspace textarea { grid-column: 1 / -1; }
.analysis-workspace label { padding: 10px; border-radius: 7px; background: white; font-size: 10px; }
.seed-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.seed-workspace > b { grid-column: 1 / -1; }
.seed-workspace input { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; }
.saved-evidence { margin: 16px 0; padding: 16px; border-radius: 9px; background: #e8f3ed; color: #3d6c59; }
.saved-evidence b { font-size: 11px; }
.saved-evidence p { margin: 4px 0 0; font-size: 10px; }
.project-workspace { margin-top: 18px; padding: 26px; border-radius: 16px; background: #20262f; color: white; }
.project-workspace > header span { color: #61cce5; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; }
.project-workspace > header h3 { margin: 7px 0; color: white; font-family: var(--serif); font-size: 31px; }
.project-workspace > header p { margin: 0 0 20px; color: #aeb8c0; font-size: 11px; }
.project-meta { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 8px; }
.project-meta label, .project-long-field { color: #9eabb5; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.project-meta input, .project-meta select, .project-timeline input, .project-tracks input, .project-tracks select { width: 100%; height: 38px; margin-top: 5px; padding: 0 10px; border: 1px solid #4a5560; border-radius: 6px; background: #2b333d; color: white; }
.project-timeline, .project-tracks { margin-top: 18px; padding: 17px; border: 1px solid #3f4852; border-radius: 10px; }
.project-timeline > div:first-child { display: flex; justify-content: space-between; margin-bottom: 9px; }
.project-timeline > div span { color: #63cce5; font-size: 10px; }
.project-timeline label { display: grid; grid-template-columns: 1fr 100px 50px 28px; gap: 6px; align-items: center; }
.project-timeline label small { color: #8996a0; font-size: 8px; }
.project-timeline label button, .project-tracks label button { border: 0; background: transparent; color: #df7b6c; cursor: pointer; }
.project-tracks { display: grid; gap: 7px; }
.project-tracks > b { margin-bottom: 3px; }
.project-tracks label { display: grid; grid-template-columns: 1fr 180px 28px; gap: 6px; }
.project-long-field { display: block; margin-top: 18px; }
.project-long-field textarea { width: 100%; min-height: 95px; margin-top: 6px; padding: 12px; border: 1px solid #4a5560; border-radius: 7px; background: #2b333d; color: white; resize: vertical; }
.audio-attachment { margin-top: 18px; padding: 15px; border: 1px dashed #5c6974; border-radius: 8px; display: flex; justify-content: space-between; color: #aeb8c0; font-size: 10px; cursor: pointer; }
.audio-attachment input { max-width: 260px; }
.project-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }
.cold-transfer { margin-top: 20px; padding: 17px; border: 1px solid #43545f; border-radius: 10px; background: #171d24; overflow: hidden; }
.cold-transfer > span { color: #62cce5; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.cold-transfer h4 { margin: 5px 0; font-family: var(--serif); font-size: 20px; }
.cold-transfer > p { margin: 0 0 12px; color: #99a5ae; font-size: 9px; }
.cold-transfer .roll-scroll { max-height: 300px; }
.transfer-activity { margin-top: 25px; border-color: #d5cbea; background: #faf8ff; }
.transfer-scale { margin-top: 18px; padding: 15px; border-radius: 9px; background: white; border: 1px solid #e0d9ed; display: grid; gap: 5px; }
.transfer-scale b { color: var(--violet); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.transfer-scale span { font-family: var(--serif); font-size: 18px; }
.transfer-scale small { color: #80868b; font-size: 9px; }
.transfer-locked { padding: 24px; border: 1px dashed #ccc6bb; border-radius: 11px; color: #868b8e; text-align: center; font-size: 12px; }
.knowledge-check { margin: 14px 0; padding: 26px; border: 1px solid #d8d2c8; border-radius: 14px; background: #fff; display: grid; grid-template-columns: 48px 1fr; gap: 20px; }
.knowledge-check.complete { border-color: #afd4c0; background: #f7fbf9; }
.knowledge-check > div:last-child > span { color: var(--violet); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 800; }
.knowledge-check h3 { margin: 7px 0 14px; font-family: var(--serif); font-size: 24px; }
.confidence-label { display: flex; align-items: center; gap: 10px; color: #7d8489; font-size: 10px; }
.confidence-label select { height: 32px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.knowledge-options { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.knowledge-options button { min-height: 45px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.knowledge-options button:hover:not(:disabled) { border-color: var(--violet); }
.knowledge-feedback { margin-top: 12px; padding: 15px; border-radius: 8px; }
.knowledge-feedback.pass { background: #e4f2ea; color: #316a54; }
.knowledge-feedback.retry { background: #fae8e2; color: #8a5144; }
.knowledge-feedback p { margin: 5px 0; font-size: 11px; line-height: 1.5; }
.knowledge-feedback small { opacity: .75; font-size: 8px; text-transform: uppercase; }
.hint-panel { margin-top: 12px; padding: 18px; border: 1px solid #ddd6c8; border-radius: 11px; background: #fffdf7; }
.hint-panel > div:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.hint-panel b { font-size: 11px; }
.hint-panel small { color: #8a8f92; font-size: 9px; }
.hint-line { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: #f4eee0; display: flex; gap: 10px; align-items: center; }
.hint-line span { width: 20px; height: 20px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; color: white; font-size: 9px; }
.hint-line p { margin: 0; color: #655e51; font-size: 11px; }
.debrief-card { margin-top: 12px; padding: 24px; border-radius: 13px; background: #e6f3ed; color: #28634d; }
.debrief-card > span { text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 800; }
.debrief-card h3 { margin: 6px 0; font-family: var(--serif); font-size: 25px; }
.debrief-card p { max-width: 650px; font-size: 12px; line-height: 1.6; }
.mastery-chips { padding: 18px 0; display: flex; flex-wrap: wrap; gap: 7px; border-bottom: 1px solid var(--line); }
.mastery-chips span { padding: 8px 11px; border-radius: 20px; background: var(--paper-2); color: #687078; font-size: 9px; text-transform: capitalize; }
.mastery-chips b { margin-right: 5px; color: var(--coral); }
.backing-reference { margin: 10px 0; padding: 17px 19px; border-radius: 11px; background: var(--ink); color: white; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.backing-reference > div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 10px; }
.backing-reference > div span { color: #9eabb5; text-transform: uppercase; letter-spacing: .12em; font-size: 8px; }
.backing-reference > div b { font-family: var(--serif); font-size: 23px; font-weight: 500; }
.backing-reference > div small { grid-column: 1 / -1; margin-top: 3px; color: #aeb7be; font-size: 9px; }
.backing-button { min-width: 130px; border-color: #64717c; background: #303944; color: white; }
.backing-button.playing { border-color: #67d1e9; background: #263f48; color: #67d1e9; }
.record-entry { margin: 10px 0; padding: 18px; border: 1px solid #cfdfe4; border-radius: 11px; background: #f2f8fa; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center; }
.record-entry b { font-family: var(--serif); font-size: 18px; }
.record-entry p { margin: 5px 0 0; max-width: 520px; color: #66747b; font-size: 10px; line-height: 1.5; }
.record-entry > small { grid-column: 1 / -1; margin-top: 10px; color: #78868d; font-size: 9px; }
.record-button { border-color: #80b5c3; background: white; color: #296b7c; }
.record-button span { color: #df6150; font-size: 13px; }
.record-button.recording { border-color: #df6150; color: #b54b3d; animation: recordPulse .8s ease infinite alternate; }
@keyframes recordPulse { to { box-shadow: 0 0 0 5px rgba(223,97,80,.13); } }
.quick-entry { margin: 10px 0; padding: 18px; border: 1px solid var(--line); background: white; display: grid; grid-template-columns: 145px 1fr; gap: 18px; align-items: center; }
.quick-entry > div > b { font-family: var(--serif); font-size: 18px; }
.quick-entry > div > p { margin: 5px 0 0; color: #7d858b; font-size: 10px; line-height: 1.45; }
.quick-note-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; }
.quick-note { min-width: 0; height: 48px; border: 1px solid #d9d5cd; border-radius: 5px; background: #faf9f6; color: #3e4851; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.quick-note.accidental { background: #29313a; border-color: #29313a; color: white; }
.quick-note:hover { transform: translateY(-2px); border-color: var(--coral); }
.quick-note span { font-size: 10px; font-weight: 800; }
.quick-note small { font-size: 8px; opacity: .55; }
.composer-shell { overflow: hidden; border-radius: 13px; background: #20262f; color: white; box-shadow: 0 18px 45px rgba(35,39,46,.18); }
.composer-top { min-height: 65px; padding: 14px 17px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #39414b; }
.composer-top > div { display: grid; grid-template-columns: 9px auto; align-items: center; column-gap: 8px; }
.composer-top b { font-size: 12px; }
.composer-top small { grid-column: 2; color: #98a4ae; font-size: 9px; margin-top: 3px; }
.composer-top > span { color: #9da8b2; font-size: 10px; white-space: nowrap; }
.transcription-strip { display: grid; grid-template-columns: repeat(var(--timeline-steps,16), 44px); width: max-content; min-width: 100%; padding: 10px 9px; border-bottom: 1px solid #39414b; overflow: hidden; }
.transcription-step { min-height: 42px; padding: 4px; border-right: 1px solid #353d47; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.transcription-step small { color: #70808d; font-size: 7px; }
.transcription-step b { max-width: 44px; overflow: hidden; color: #63d3ee; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.roll-scroll { max-height: 425px; overflow: auto; scrollbar-color: #596570 #20262f; }
.roll-grid { width: max-content; min-width: 100%; }
.roll-row { display: grid; grid-template-columns: 58px repeat(var(--timeline-steps,16), 44px); }
.roll-row > span { position: sticky; left: 0; z-index: 2; min-height: 36px; padding-right: 7px; border-right: 1px solid #66717b; border-bottom: 1px solid #343b45; background: #262d36; color: #aab3bb; display: grid; place-items: center end; font-size: 9px; }
.roll-row.black-row > span { color: #6fd4ec; }
.roll-head { position: sticky; top: 0; z-index: 4; }
.roll-head > span, .roll-head > b { min-height: 23px; background: #171c22; color: #82909c; border-bottom: 1px solid #59636d; display: grid; place-items: center; font-size: 7px; font-weight: 500; }
.roll-cell { min-height: 36px; border: 0; border-right: 1px solid #333a44; border-bottom: 1px solid #303741; background: #232a33; cursor: pointer; position: relative; touch-action: manipulation; }
.black-row .roll-cell { background: #1e242c; }
.roll-cell:nth-child(4n + 2) { border-left: 1px solid #5a646e; }
.roll-cell:hover { background: #34434d; }
.roll-cell.active { background: #43b5d2; box-shadow: inset 1px 0 #7be1f6, inset -1px 0 #2f90aa; }
.roll-cell.active::after { content: ""; position: absolute; inset: 3px 5px; border-radius: 2px; background: #5ed2ee; }
.composer-controls { padding: 15px; border-top: 1px solid #39414b; display: flex; gap: 7px; align-items: center; }
.composer-button { min-height: 40px; padding: 0 14px; border-color: #4c5661; background: #2c343e; color: white; font-size: 10px; }
.composer-button.playing { border-color: #5ed2ee; color: #5ed2ee; }
.composer-submit { margin-left: auto; min-height: 40px; }
.composer-submit:disabled { opacity: .42; cursor: not-allowed; }
.evaluation-panel { margin-top: 12px; display: grid; grid-template-columns: 190px 1fr; gap: 10px; }
.score-result { padding: 20px; border-radius: 11px; display: flex; flex-direction: column; justify-content: space-between; }
.score-result.waiting { background: #eef1f2; color: #57636c; }
.score-result.passed { background: #e2f2e9; color: #2d725a; }
.score-result.needs-work { background: #fae7e1; color: #925142; }
.score-result strong { display: block; font-family: var(--serif); font-size: 41px; font-weight: 500; line-height: 1; }
.score-result span { display: block; margin-top: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.score-result p { margin: 18px 0 0; font-size: 10px; line-height: 1.5; }
.criteria-list { border: 1px solid var(--line); border-radius: 11px; background: white; overflow: hidden; }
.criterion { min-height: 57px; padding: 11px 13px; display: grid; grid-template-columns: 25px 1fr; gap: 9px; align-items: center; border-bottom: 1px solid #ece9e3; }
.criterion:last-child { border-bottom: 0; }
.criterion > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #eceeed; color: #92999d; font-size: 15px; }
.criterion > span svg { width: 14px; }
.criterion.pass > span { background: var(--green); color: white; }
.criterion.fail > span { background: #d97867; color: white; }
.criterion b, .criterion small { display: block; }
.criterion b { font-size: 11px; }
.criterion small { margin-top: 3px; color: #8a9094; font-size: 9px; }
.lesson-aside { position: sticky; top: 25px; }
.today-card { border: 1px solid var(--line); border-radius: 14px; padding: 25px; }
.today-card > span { text-transform: uppercase; letter-spacing: .15em; color: #999da0; font-size: 9px; }
.today-card > b { display: block; margin-top: 10px; font-family: var(--serif); font-size: 46px; font-weight: 500; line-height: 1; }
.today-card > small { color: #8d9296; }
.today-card hr { margin: 22px 0; border: 0; border-top: 1px solid var(--line); }
.today-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.today-card li { font-size: 11px; color: #66707a; display: flex; align-items: center; gap: 8px; }
.today-card li svg { color: var(--coral); width: 16px; }
.lesson-aside blockquote { margin: 24px 8px; font-family: var(--serif); font-style: italic; font-size: 19px; color: #788086; line-height: 1.5; }
.lesson-finish { border-top: 1px solid var(--line); padding: 48px; display: flex; align-items: center; justify-content: space-between; }
.lesson-finish span { font-size: 9px; text-transform: uppercase; letter-spacing: .15em; color: #989da1; }
.lesson-finish h2 { font-size: 33px; margin-top: 6px; }
.next-lesson { width: calc(100% - 96px); margin: 0 48px 42px; padding: 23px 26px; border-radius: 12px; border: 0; background: var(--paper-2); display: grid; grid-template-columns: 1fr auto; text-align: left; cursor: pointer; }
.next-lesson span { font-size: 9px; text-transform: uppercase; letter-spacing: .13em; color: #969b9f; }
.next-lesson b { grid-column: 1; font-family: var(--serif); font-size: 24px; font-weight: 500; }
.next-lesson svg { grid-column: 2; grid-row: 1 / 3; align-self: center; }

.progress-hero { align-items: center; }
.xp-card { min-width: 270px; border-radius: 18px; padding: 25px; background: var(--ink); color: white; display: flex; align-items: center; gap: 20px; box-shadow: var(--shadow); }
.xp-card > span { width: 52px; height: 52px; background: var(--coral); border-radius: 50%; display: grid; place-items: center; }
.xp-card b { display: block; font-family: var(--serif); font-size: 40px; line-height: 1; }
.xp-card small { color: #abb3ba; }
.stats-grid, .progress-body, .data-note { max-width: 1150px; margin-left: auto; margin-right: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 36px; }
.stats-grid article { min-height: 150px; padding: 25px; border: 1px solid var(--line); border-radius: 14px; }
.stats-grid span { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: #8d9398; }
.stats-grid b { display: block; font-family: var(--serif); font-weight: 500; font-size: 45px; margin: 8px 0; }
.stats-grid small { color: #90969b; }
.stat-track { height: 4px; background: #e6e2da; margin: 10px 0; }
.stat-track i { display: block; height: 100%; background: var(--coral); }
.progress-body { padding: 65px 36px; display: grid; grid-template-columns: 1.35fr .75fr; gap: 25px; }
.skill-card, .recent-card { padding: 30px; border-radius: 16px; background: white; border: 1px solid #e6e2da; box-shadow: 0 13px 40px rgba(56,53,42,.05); }
.section-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.section-title span { text-transform: uppercase; letter-spacing: .14em; color: #969b9f; font-size: 9px; }
.section-title h2 { font-size: 27px; margin-top: 3px; }
.section-title > svg { color: var(--coral); width: 28px; height: 28px; }
.skill-row { display: grid; grid-template-columns: 34px 150px 1fr 38px; align-items: center; gap: 13px; min-height: 67px; border-bottom: 1px solid #efede7; }
.skill-row > span { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); font-family: var(--serif); font-size: 12px; }
.skill-row div:nth-child(2) { display: flex; flex-direction: column; }
.skill-row b { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.skill-row small { color: #999ea2; font-size: 9px; }
.skill-track { height: 4px; background: #ece9e2; overflow: hidden; }
.skill-track i { height: 100%; background: var(--coral); display: block; }
.skill-row strong { font-size: 10px; color: #878e94; text-align: right; }
.recent-card > button { width: 100%; min-height: 66px; border: 0; border-bottom: 1px solid #efede7; background: transparent; display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; text-align: left; cursor: pointer; }
.recent-card > button > span { width: 25px; height: 25px; border-radius: 50%; background: #e1eee7; color: var(--green); display: grid; place-items: center; }
.recent-card > button small, .recent-card > button b { display: block; }
.recent-card > button small { color: #999ea2; font-size: 9px; }
.recent-card > button b { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.recent-card > button > svg { color: #a9adac; width: 15px; }
.empty-state { padding: 45px 15px; text-align: center; color: #8c9297; }
.empty-state > span { font-family: var(--serif); color: var(--coral); font-size: 52px; }
.empty-state p { font-size: 13px; }
.empty-state .text-button { margin: 15px auto; color: var(--ink); }
.data-note { margin-bottom: 100px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; }
.data-note > div { display: flex; align-items: center; gap: 14px; }
.data-note > div > svg { color: var(--coral); width: 30px; height: 30px; }
.data-note b { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.data-note p { margin: 3px 0 0; color: #8c9296; font-size: 11px; }
.reset-button { background: transparent; border: 0; color: #999; display: flex; gap: 8px; align-items: center; cursor: pointer; font-size: 11px; }
.reset-button.confirming { color: #a84f40; background: #f8e4df; border-radius: 7px; padding: 9px 12px; }
.center-state { min-height: 70vh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 40px; }
.center-state > span { width: 70px; height: 70px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); display: grid; place-items: center; font-family: var(--serif); font-size: 34px; }
.center-state h1 { font-size: 52px; margin-top: 22px; }
.center-state p { max-width: 490px; color: var(--muted); line-height: 1.6; }
.toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: grid; gap: 9px; }
.toast { padding: 14px 18px; border-radius: 9px; background: var(--ink); color: white; font-size: 12px; box-shadow: var(--shadow); animation: toastIn .25s ease; }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 75px; }
  .hero-visual { margin: 0 24px 50px; border-radius: 25px; min-height: 520px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article + article { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .path-preview { grid-template-columns: 1fr; }
  .phase-stack { margin-top: 40px; }
  .course-body { grid-template-columns: 1fr; }
  .phase-nav { display: none; }
  .lesson-layout { grid-template-columns: 1fr; padding-left: 26px; padding-right: 26px; }
  .lesson-aside { display: none; }
  .lesson-hero { padding: 45px; }
  .lesson-glyph { display: none; }
  .progress-body { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-header { height: 66px; padding: 0 18px; grid-template-columns: 1fr auto; }
  .site-header nav { gap: 18px; }
  .site-header nav a { font-size: 12px; }
  .header-note { display: none; }
  footer { padding: 0 20px; }
  footer p { display: none; }
  .hero-copy { padding: 65px 23px 55px; }
  .hero h1 { font-size: 62px; }
  .hero-lede { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-visual { min-height: 445px; }
  .note-card { transform: scale(.83) rotate(-7deg) !important; transform-origin: top left; }
  .note-card.note-a { left: 5%; }
  .note-card.note-b { left: 48%; transform: scale(.83) rotate(6deg) !important; }
  .promise { padding: 75px 23px; }
  .promise h2, .path-preview h2 { font-size: 48px; }
  .path-preview { padding: 75px 23px; overflow: hidden; }
  .stack-card { transform: none !important; padding: 0 15px; }
  .stack-card b { font-size: 19px; }
  .stack-card small { display: none; }
  .course-intro, .progress-hero { padding: 65px 22px; display: block; }
  .course-intro h1, .progress-hero h1 { font-size: 58px; }
  .course-meter, .xp-card { margin-top: 35px; }
  .course-body { padding: 0 15px 80px; }
  .phase-heading { grid-template-columns: 55px 1fr; }
  .phase-orb { width: 48px; height: 48px; }
  .phase-heading h2 { font-size: 28px; }
  .phase-count { display: none; }
  .lesson-row { grid-template-columns: 40px 1fr 24px; }
  .lesson-insight { display: none; }
  .lesson-topbar { padding: 18px; }
  .lesson-topbar > div .mini-meter { display: none; }
  .lesson-page { padding: 0 12px; }
  .lesson-hero { min-height: 310px; padding: 38px 28px; }
  .lesson-hero h1 { font-size: 51px; }
  .lesson-hero p { font-size: 14px; }
  .lesson-brief { margin: 25px 15px 0; padding-bottom: 30px; }
  .goal-card { padding: 22px 20px; }
  .goal-card h2 { font-size: 23px; }
  .setup-title { display: block; }
  .setup-title p { margin-top: 5px; }
  .setup-grid { grid-template-columns: 1fr; }
  .lesson-layout { padding: 55px 12px 0 28px; }
  .lesson-step { padding-left: 44px; }
  .eureka { display: block; }
  .eureka p { margin-top: 8px; font-size: 22px; }
  .piano { height: 120px; }
  .black-key { height: 76px; }
  .creative-card p { font-size: 21px; }
  .terms-grid article { grid-template-columns: 1fr; gap: 5px; }
  .audio-example { grid-template-columns: 1fr; }
  .audio-example .play-button { width: 100%; }
  .quick-entry { grid-template-columns: 1fr; }
  .quick-note-grid { grid-template-columns: repeat(7, 1fr); }
  .composition-brief { padding: 20px; }
  .composition-brief h3 { font-size: 25px; }
  .composition-brief > div { display: grid; gap: 4px; }
  .composer-top { align-items: flex-start; gap: 12px; }
  .composer-top small { max-width: 250px; }
  .composer-controls { display: grid; grid-template-columns: repeat(3, 1fr); }
  .composer-submit { grid-column: 1 / -1; width: 100%; margin-left: 0; }
  .composer-button { padding: 0 7px; }
  .evaluation-panel { grid-template-columns: 1fr; }
  .score-result { min-height: 145px; }
  .lesson-finish { padding: 35px 15px; display: grid; gap: 20px; }
  .lesson-finish .button { width: 100%; }
  .next-lesson { width: calc(100% - 30px); margin: 0 15px 25px; }
  .stats-grid { grid-template-columns: 1fr; padding: 0 18px; }
  .progress-body { padding: 45px 18px; }
  .skill-card, .recent-card { padding: 20px; }
  .skill-row { grid-template-columns: 30px 1fr 40px; }
  .skill-track { grid-column: 2; }
  .data-note { padding: 0 18px; display: grid; gap: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 600px) {
  .roll-row { grid-template-columns:58px repeat(var(--timeline-steps,16), 48px); }
  .roll-cell,.roll-row > span { min-height:44px; }
  .transcription-strip { grid-template-columns:repeat(var(--timeline-steps,16),48px); }
  .timeline-controls { flex-wrap:wrap; }
  .timeline-controls > span { width:100%; margin-left:0; }
}