/* A quiet place to practice. Opaque reading surfaces keep every landscape legible. */
:root[data-theme="light"] {
  --bg:#f7f8f3; --panel:#f3f5ef; --card:#fffefa; --ink:#273e37; --muted:#64716a; --line:#dde4dc;
  --accent:#326953; --accent-soft:#e0ede2; --accent-ink:#fff;
  --scene-image:url('assets/beach.jpg'); --scene-position:center 58%;
  --display:"Bricolage Grotesque","Segoe UI",sans-serif;
}
:root[data-scene="mountains"] {--scene-image:url('assets/mountains.jpg');--scene-position:center 48%}
:root[data-scene="forest"] {--scene-image:url('assets/forest.jpg');--scene-position:center 55%}
html {scroll-behavior:smooth;scroll-padding-top:30px}
body {background:#f7f8f3;letter-spacing:.005em}
body::before {content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(#f7f8f3e8,#f7f8f3f7),var(--scene-image) var(--scene-position)/cover}
.wrap {max-width:1240px;padding:26px 36px 32px;gap:24px}
.top {min-height:44px;flex-wrap:nowrap;gap:24px}
.brand {font-size:1.15rem;font-weight:600;letter-spacing:-.04em;white-space:nowrap}
.brand kbd {width:36px;height:36px;border:1px solid #cddccf;border-bottom:3px solid #749983;background:#edf3e9;color:var(--accent);border-radius:10px;font-weight:600}
.main-nav {display:flex;gap:28px;margin-left:auto;margin-right:20px}
.main-nav a {color:var(--muted);font-size:.9rem;text-decoration:none;padding:8px 0}
.main-nav a:hover {color:var(--accent);text-decoration:underline;text-underline-offset:6px}
.acct {background:#fffefa;border-color:var(--line);font-size:.85rem;font-weight:400}
.acct.out {padding:9px 22px}
.preferences {display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:17px;flex-wrap:wrap}
.settings {gap:14px}
.settings label {font-size:.73rem}
select {background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:.76rem;padding:7px 3px}
.seg {border:0;background:#e9eee5;border-radius:99px;padding:4px}
.seg button {border-radius:99px;font-size:.73rem;padding:6px 10px;min-height:30px}
.seg button[aria-pressed="true"] {background:var(--card);color:var(--ink);box-shadow:0 1px 4px #283c3710}
.scene-picker {display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.scene-label {font-size:.73rem;color:var(--muted);margin-right:6px}
.scene-picker button {display:inline-flex;gap:7px;align-items:center;border:1px solid transparent;border-radius:99px;padding:4px 10px 4px 4px;background:transparent;font-size:.76rem;min-height:38px}
.scene-picker button img {border-radius:50%;object-fit:cover}
.scene-picker button:hover {background:#ffffffa8}
.scene-picker button[aria-pressed="true"] {border-color:#a3baa6;background:var(--card);color:var(--accent)}
#home {display:grid;gap:30px;min-width:0}
.hero {position:relative;isolation:isolate;overflow:hidden;border-radius:26px;min-height:440px;display:flex;align-items:center;padding:52px 46px;background:#d9e9df;box-shadow:0 12px 38px #364b3710}
.hero::before {content:"";position:absolute;inset:0;z-index:-2;background:var(--scene-image) var(--scene-position)/cover}
.hero::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f3f5eefa 0%,#f3f5eef0 29%,#f3f5eeae 48%,#f3f5ee00 76%)}
.hero-copy {max-width:630px}
.eyebrow {display:block;color:var(--accent);font-size:.66rem;font-weight:700;letter-spacing:.16em;margin-bottom:13px}
.hero .eyebrow {display:flex;align-items:center;gap:9px;margin-bottom:24px}
.sun-mark {font-size:24px;line-height:1;color:#658769}
.hero h1 {font-size:clamp(2.8rem,4.6vw,4rem);font-weight:600;line-height:1.09;letter-spacing:-.055em;margin-bottom:22px;text-wrap:initial}
.hero h1 em {font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.055em;color:#467259}
.hero p {font-size:1rem;line-height:1.7;max-width:44ch;color:#506457;margin-bottom:25px}
.btn {border-radius:99px;padding:12px 21px;font-size:.88rem;font-weight:400;justify-content:center;transition:background .18s,box-shadow .18s,transform .18s}
.btn.primary {box-shadow:0 5px 15px #32695318}
.btn:hover {filter:none;box-shadow:0 5px 16px #283c371a;transform:translateY(-1px)}
.hero-note {display:block;margin-top:19px;color:#5d6d60;font-size:.72rem}
.landscape-note {position:absolute;bottom:24px;right:26px;display:flex;align-items:center;gap:8px;border:1px solid #ffffff70;border-radius:99px;padding:7px 13px;font-size:.72rem;color:#fff;background:#173f426b;backdrop-filter:blur(12px)}
.progress-summary {display:flex;align-items:center;gap:40px;padding:10px 30px 26px;border-bottom:1px solid var(--line)}
.summary-intro {min-width:200px}
.summary-intro .eyebrow {margin-bottom:4px}
.summary-intro p {font-family:Georgia,serif;font-style:italic;font-size:1.4rem;margin:0;color:#4a6757}
.stats {margin:0;gap:36px}
.stat {min-width:112px}
.stat b {font-weight:600;font-size:1.85rem;letter-spacing:-.06em}
.stat span {font-size:.72rem}
.summary-flower {font-size:46px;color:#b7c7ae;margin-left:auto}
.keyboard-intro {display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;gap:38px;padding:18px 18px 24px}
.keyboard-copy h2 {font-family:var(--display);font-weight:600;font-size:1.9rem;line-height:1.15;letter-spacing:-.04em;margin:0 0 14px}
.keyboard-copy p {font-size:.88rem;color:var(--muted);max-width:34ch;line-height:1.7;margin:0 0 12px}
.keyboard-copy kbd {font-family:var(--mono);font-size:.8rem;border:1px solid var(--line);border-radius:4px;background:var(--card);padding:1px 5px;color:var(--accent)}
.micro-note {font-size:.73rem;color:#788373}
.mapcard {padding:24px;border-radius:20px;background:#fffefaad;border-color:#e0e6dc;box-shadow:0 6px 25px #304a3810;gap:18px}
.mapcard h2 {font-size:.64rem;font-weight:400;letter-spacing:.13em}
.mapcard .kb {font-size:clamp(8px,1vw,12px)}
.key {border-top-color:#e5e9e2;border-left-color:#e5e9e2;border-right-color:#e5e9e2;box-shadow:0 2px 3px #35442a06}
.legend {justify-content:center;font-size:.69rem;gap:8px 13px}
.legend i {height:6px;width:6px;border-radius:50%}
.learning {padding:26px 30px 30px;background:#fffefae8;border:1px solid var(--line);border-radius:24px;scroll-margin-top:24px}
.section-heading {display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.section-heading .eyebrow {margin-bottom:8px}
.section-heading h2,.evo-head h2,.rank-title {font-weight:600;font-family:var(--display);letter-spacing:-.04em;font-size:1.8rem;margin:0}
.section-heading>span {font-size:.75rem;color:var(--muted);white-space:nowrap}
.group h2 {font-weight:600;font-size:1.1rem}
.group p {font-size:.79rem;max-width:90ch}
.path {gap:30px}
.cards {grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.lc {padding:15px 12px;border-radius:14px;gap:12px;background:#f8f9f4;transition:transform .15s,border-color .15s,box-shadow .15s}
.lc:hover {transform:translateY(-3px);border-color:#97b39f;box-shadow:0 6px 14px #32695310}
.lc.next {padding:14px 11px;background:#edf4e9;border-color:#82a78a}
.lc .meta {font-size:.66rem;gap:4px}
.lc .best {font-size:.68rem}
.lc .caps kbd {background:var(--card);border-bottom-width:2px}
.lc .name {font-size:.85rem;font-weight:400}
.stars {font-size:.75rem;letter-spacing:0}
.pill {font-size:.62rem}
.evo {background:#fffefaeb;border-radius:24px;gap:22px;padding:30px}
.evo-head p {font-size:.85rem;line-height:1.65;margin-top:12px}
.mc {border-radius:16px;background:#f7f8f2;padding:20px;gap:14px}
.mc h3 {font-weight:400}
.mc .btn {background:var(--card);font-size:.78rem;padding:8px 14px}
.chart {border-radius:16px}
.foot {font-size:.73rem;max-width:65ch;margin:0 auto;line-height:1.7}
body[data-view="lesson"]::before {background:linear-gradient(#f7f8f3b5,#f7f8f3a6),var(--scene-image) var(--scene-position)/cover}
.lesson {padding:28px;border:1px solid #ffffffe0;border-radius:24px;background:#fafbf5ed;box-shadow:0 12px 45px #263d3514;gap:22px}
.ltitle h2 {font-weight:600}
.live div {border-radius:14px;padding:9px 16px}
.live b {font-weight:600}
.stage {border-radius:20px;box-shadow:0 4px 22px #2e463508}
.guide {padding:8px 8px 16px}
.hidden-kb {background:var(--card)}
dialog {border-radius:24px;box-shadow:0 22px 90px #1d302338}
dialog::backdrop {background:#20362b66;backdrop-filter:blur(5px)}
@media(min-width:1600px) {.hero{min-height:480px}}
@media(max-width:1050px) {
  .wrap {padding-inline:24px}.preferences {gap:12px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{padding:42px 32px}.keyboard-intro{gap:24px;grid-template-columns:.7fr 1.3fr}.stats{gap:26px}.progress-summary{gap:26px;padding-inline:16px}.summary-intro{min-width:170px}
}
@media(max-width:700px) {
  .wrap{padding:18px 16px 28px;gap:17px}.top{gap:12px;flex-wrap:wrap}.brand{font-size:1.05rem}.brand kbd{width:32px;height:32px}.acct.out{padding:7px 17px;margin-left:auto}
  .main-nav{order:3;margin:0;gap:24px;width:100%;padding-top:2px}.main-nav a{font-size:.82rem;padding:0}.preferences{padding-top:12px;gap:12px}.settings{gap:9px;justify-content:space-between;width:100%}.settings label{font-size:.68rem}.settings select{max-width:122px;font-size:.7rem}.seg button{font-size:.66rem;padding:5px 7px}
  .scene-label{font-size:.68rem}.scene-picker button{font-size:.72rem}.scene-picker{gap:3px}.hero{border-radius:22px;padding:32px 24px 180px;min-height:530px;align-items:flex-start}.hero::after{background:linear-gradient(180deg,#f3f5eefc 0%,#f3f5eef2 64%,#f3f5ee00 91%)}
  .hero::before{background-position:64% center}.hero h1{font-size:clamp(2.55rem,9.5vw,3.7rem)}.hero .eyebrow{margin-bottom:20px;font-size:.6rem}.hero p{font-size:.9rem}.hero p br{display:none}.hero .actions{gap:8px}.hero .btn{font-size:.8rem;padding:11px 16px}.hero-note{font-size:.65rem}.landscape-note{bottom:18px;right:18px;font-size:.65rem}
  #home{gap:24px}.progress-summary{padding:0 6px 23px;display:block}.summary-intro{margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:12px}.summary-intro .eyebrow{font-size:.6rem;margin:0}.summary-intro p{font-size:1.2rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat{min-width:0}.stat b{font-size:1.6rem}.stat span{font-size:.64rem}.summary-flower{display:none}
  .keyboard-intro{grid-template-columns:1fr;padding:4px 0 0;gap:20px}.keyboard-copy{padding:0 8px}.keyboard-copy h2{font-size:1.6rem}.keyboard-copy h2 br{display:none}.keyboard-copy p{max-width:48ch}.mapcard{padding:16px;gap:16px}.mapcard .kb{font-size:clamp(6px,1.65vw,10px)}.legend{font-size:.6rem;gap:5px 10px}
  .learning,.evo{padding:22px 16px;border-radius:20px}.section-heading{display:block;margin-bottom:26px}.section-heading>span{display:block;margin-top:10px}.section-heading h2,.evo-head h2,.rank-title{font-size:1.5rem}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.group p{font-size:.76rem}.lc{padding:14px}.lc.next{padding:13px}.methods{grid-template-columns:1fr}.mc{padding:18px}.chart svg{height:220px}.lesson{padding:20px 12px;gap:18px}.stage{padding:18px 14px}.live{gap:6px}.live div{min-width:76px;padding:8px 12px}.lbar{gap:16px}.guide{padding-inline:0}.kb{font-size:clamp(6px,1.75vw,10px)}
}
@media(max-width:380px){.settings{flex-wrap:wrap;justify-content:flex-start}.hero{padding-inline:19px}.hero .btn{font-size:.74rem;padding-inline:13px}.scene-label{margin-right:1px}.scene-picker button{padding-right:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}