/* styles.css */
:root{--paper:#f7f5ef;--ink:#2e443b;--muted:#738078;--line:#dce2d7;--sage:#dfe8d8;--green:#315649;--dark:#17372c;--peach:#efdad0;--cream:#f1ebd5;--shadow:0 18px 50px -34px #193b345c}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.6 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,select,input{font:inherit}button,a,select,summary,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;border:0;color:inherit}button:disabled{opacity:.38;cursor:not-allowed}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}p,h1,h2,h3,figure{margin:0}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em;line-height:1.08}em{font-weight:400}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #ad754f;outline-offset:4px}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}[hidden]{display:none!important}.wrap{width:min(1280px,calc(100% - 80px));margin-inline:auto}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;line-height:1.6}.site-header{height:104px;display:flex;justify-content:space-between;align-items:center;gap:30px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:31px;letter-spacing:-.055em;line-height:1}.brand small{display:block;font-family:Arial,sans-serif;font-size:7px;letter-spacing:.13em;margin-top:9px;color:#79887a}.petal-mark{width:38px;color:#849a7e;display:block}.petal-mark svg{display:block;width:100%}.mode-nav{display:flex;padding:5px;gap:5px;border:1px solid var(--line);background:#ecefe6;border-radius:100px}.mode-nav a{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 24px;border-radius:100px;font-size:13px;font-weight:600;color:#687a6f;min-height:44px;transition:background .2s,color .2s,box-shadow .2s}.mode-nav a>span{font-size:18px;font-weight:400;line-height:1}.mode-nav a[aria-current=page]{background:#fffdf7;color:var(--green);box-shadow:0 2px 7px #2f483611}.mode-nav a:hover{color:var(--ink);background:#ffffff88}.motion-button{display:flex;align-items:center;gap:8px;background:transparent;font-size:11px;color:#728276;padding:12px 0}.motion-button>span:first-child{font-size:23px;line-height:1}.intro-row{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:160px;padding:28px 0 24px;overflow:hidden}.intro-row .eyebrow{color:#8b987e;margin-bottom:10px;font-size:9px}.intro-row h2{font-size:clamp(30px,3.1vw,44px);line-height:1.15}.intro-row h2 em{color:#5f714f}.intro-row>div:first-child{z-index:1}.intro-row p:last-child{font-size:13px;color:#7c877a;margin-top:10px}.intro-art{position:absolute;right:0;top:8px;bottom:0;width:315px;background:url('assets/petal-hero.webp') 76% 52%/cover;mask-image:linear-gradient(90deg,transparent,#000 30%);opacity:.72;pointer-events:none}.mode-view{animation:appear .25s ease-out}.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:13px;color:#87957e}.collection-heading .eyebrow{font-size:9px}.collection-heading>span{font-size:11px;color:#76836f}.lesson-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:22px}.lesson-card{position:relative;display:grid;grid-template-columns:27px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;min-width:0;padding:17px 16px;border:1px solid #dce2d5;background:#eef1e8;border-radius:12px;overflow:hidden;isolation:isolate;transition:background .2s,border-color .2s,transform .2s}.lesson-card:hover{transform:translateY(-2px);border-color:#aab99c}.lesson-card-number{grid-row:1/3;font-family:Georgia,serif;font-size:18px;color:#9aaa8f}.lesson-card strong{font-family:Georgia,serif;font-size:20px;font-weight:400;letter-spacing:-.025em;line-height:1.25;position:relative;z-index:1}.lesson-card small{font-size:10px;color:#91a083;position:relative;z-index:1}.lesson-card[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fbf7e6;box-shadow:0 6px 14px #294b3614}.lesson-card[aria-pressed=true] .lesson-card-number,.lesson-card[aria-pressed=true] small{color:#b5c7a6}.lesson-card[data-complete=true] .lesson-card-number:after{content:' ·';color:#819874}.lesson-card-decoration{position:absolute;display:grid;grid-template-columns:repeat(8,1fr);width:94px;height:94px;right:-13px;top:-10px;transform:rotate(15deg);opacity:.1;z-index:-1;mask-image:linear-gradient(90deg,transparent,#000)}.mini-square{background:#b3c3a7}.mini-square:nth-child(16n+2),.mini-square:nth-child(16n+4),.mini-square:nth-child(16n+6),.mini-square:nth-child(16n+8),.mini-square:nth-child(16n+9),.mini-square:nth-child(16n+11),.mini-square:nth-child(16n+13),.mini-square:nth-child(16n+15){background:#597c5c}.mini-square img{width:100%;height:100%}.study-shell,.room-shell{overflow:hidden;border:1px solid #cfdbcb;border-radius:20px;background:#eaf0e0;box-shadow:var(--shadow);isolation:isolate}.study-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 28px;background:#203e32;color:#bbcfb3;border-bottom:1px solid #b9c5a12a}.room-label{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.17em;font-weight:700}.room-label>span{font-size:20px;line-height:1;color:#d8ce9e}.study-topline>span:last-child{font-size:9px;letter-spacing:.13em}.study-grid,.room-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr)}.board-panel{padding:24px 36px 28px;color:#e4ead7;position:relative;background:linear-gradient(120deg,#163b2be8,#1d392cf0),url('assets/chess-stage.webp') center/cover;min-width:0;isolation:isolate}.board-panel:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 30%,#d2d29719,transparent 65%);pointer-events:none}.board-meta,.board-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:590px;margin-inline:auto}.board-meta{margin-bottom:16px;min-height:32px}.board-tools{display:flex;gap:18px}.text-button{background:transparent;padding:9px 0;font-size:11px;color:inherit}.text-button:hover{text-decoration:underline;text-underline-offset:4px}.board-meta .text-button{color:#bfd1b3}.live-status{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.04em;padding:7px 11px;border:1px solid #c5d6b52a;border-radius:100px;background:#ffffff05;line-height:1.3}.live-status:before{content:'';width:5px;height:5px;flex-shrink:0;border-radius:50%;background:#d2e5aa}.live-status[data-terminal=mate]{color:#fff0ab;border-color:#bcac62}.live-status[data-terminal=draw]{color:#e3e3d6;border-color:#a6b1a0}.board-aura{position:relative;width:100%;max-width:590px;margin-inline:auto;isolation:isolate}.board-aura:before{content:'';position:absolute;inset:15% 7% -5%;border-radius:50%;background:#d1b65a1f;filter:blur(35px);z-index:-1}.board-frame{position:relative;padding:13px;border-radius:10px;background:linear-gradient(155deg,#ae9262 0%,#644d33 3%,#3c3024 8%,#5a4631 45%,#a58b5b 92%,#3d3021 98%);box-shadow:0 22px 35px -20px #00170ccc,0 3px 2px #061c1480,inset 0 1px 1px #ffefc077,inset 0 -3px 4px #0b170ddd;border:1px solid #b6a4758c}.board-frame:after{content:'';pointer-events:none;position:absolute;inset:6px;border:1px solid #d6bf7b60;border-radius:4px;box-shadow:inset 0 0 0 1px #221e1966}.frame-corner{position:absolute;width:3px;height:3px;border-radius:50%;background:#c6ac6c;box-shadow:0 1px 2px #0009;z-index:3}.corner-a{top:4px;left:4px}.corner-b{top:4px;right:4px}.corner-c{bottom:4px;left:4px}.corner-d{bottom:4px;right:4px}.chess-board,.interactive-board{display:block;position:relative;aspect-ratio:1;width:100%;border:1px solid #192a20;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px #b6a37999;background:#e5dfc0;isolation:isolate}.square-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));z-index:0}.square{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;transition:background .25s}.square.light,.board-square.light{background:linear-gradient(130deg,#eee8cd,#e3ddbf)}.square.dark,.board-square.dark{background:linear-gradient(130deg,#839b78,#718c68)}.square:before{content:'';position:absolute;inset:0;border:1px solid #314d2810;pointer-events:none}.square.last-from,.board-square.last-from{background:linear-gradient(130deg,#d8cd99,#c4bc88)}.square.last-to,.board-square.last-to{background:linear-gradient(130deg,#e9dca6,#c1bd7c)}.square.is-focus{box-shadow:inset 0 0 0 3px #e9cf76aa}.square.annotation-gold{background:linear-gradient(130deg,#d9c274,#c4b46c)}.square.annotation-mint{background:linear-gradient(130deg,#b6cf8c,#99b375)}.square.annotation-rose{background:linear-gradient(130deg,#d9ac8c,#c49376)}.square.annotation-blue{background:linear-gradient(130deg,#bbd6cb,#93b9ac)}.square.annotation-gold:after,.square.annotation-mint:after,.square.annotation-rose:after,.square.annotation-blue:after{content:'';position:absolute;inset:12%;border:1px solid #fff5;border-radius:4px}.coordinate{position:absolute;font:700 9px/1 Arial,sans-serif;z-index:6;color:#0c2016}.coordinate.rank{left:4px;top:4px}.coordinate.file{right:4px;bottom:3px}.piece-layer{position:absolute;inset:0;z-index:3;pointer-events:none}.chess-piece{position:absolute;top:0;left:0;width:12.5%;height:12.5%;transform:translate(var(--piece-x),var(--piece-y));transition:transform 680ms cubic-bezier(.22,.75,.22,1);will-change:transform;z-index:3;pointer-events:none}.chess-piece.is-moving{z-index:5}.piece-art{position:absolute;inset:-3% 0 3%;width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 3px 1px #17271970);transform:scale(1);opacity:1;transition:opacity .4s,transform .55s;user-select:none}.piece-ground{position:absolute;left:22%;right:22%;bottom:9%;height:13%;border-radius:50%;background:#10271545;filter:blur(2px);opacity:.65;transition:opacity .35s,transform .45s}.chess-piece.is-white .piece-art{filter:drop-shadow(0 3px 1px #20301770) drop-shadow(0 -1px 0 #ffffffaa)}.chess-piece.is-captured{z-index:2}.chess-piece.is-captured .piece-art{opacity:0;transform:translateY(8%) scale(.45)}.chess-piece.is-captured .piece-ground{opacity:0;transform:scale(.3)}.chess-piece.is-promoting .piece-art{animation:bloom .7s ease-out}.annotation-layer{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;filter:drop-shadow(0 1px 1px #1e302199);opacity:.9}.annotation-layer path{stroke-linecap:round;stroke-linejoin:round}.board-sheen{position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(130deg,#fff5,transparent 25%,transparent 70%,#0001);opacity:.12}.board-footer{font-size:10px;color:#a7bc96;margin-top:14px;line-height:1.5}.board-footer>span:last-child{text-align:right;font-size:9px;max-width:225px;color:#93ad85}.visual-caption{display:flex;align-items:center;gap:14px;max-width:590px;margin:22px auto 0;min-height:54px}#caption-number{display:grid;place-items:center;flex-shrink:0;width:31px;height:31px;border:1px solid #b5c19950;border-radius:50%;font-family:Georgia,serif;font-size:14px;color:#ced5aa}#step-caption{font-family:Georgia,serif;color:#f0ebd4;font-size:23px;letter-spacing:-.025em;line-height:1.3}.playback-deck{max-width:590px;margin:23px auto 0;padding:16px 17px;border:1px solid #c5d2a52b;border-radius:12px;background:#142e234f}.playback-main{display:flex;align-items:center;gap:14px}.play-button{display:flex;align-items:center;gap:12px;flex:1;text-align:left;background:#dce6bd;border:1px solid #dce6bd;border-radius:8px;color:#2b4730;min-height:48px;padding:9px 13px;font-size:12px;font-weight:600;transition:background .2s}.play-button:hover{background:#eaf0d3}.play-button #play-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#2f4a3020;font-size:10px}.restart-button{display:flex;align-items:center;flex-direction:column;background:transparent;color:#b8c5a3;font-size:24px;padding:2px 6px;line-height:1}.restart-button span{font-size:9px;margin-top:5px}.speed-control{display:flex;flex-direction:column;align-items:center;gap:4px;color:#a2b18f}.speed-control>span{font-size:7px;letter-spacing:.14em}.speed-control select{border:1px solid #bbcb9e35;color:#ccdab7;background:#244333;border-radius:5px;padding:5px;font-size:12px;min-height:33px}.playback-progress-row{display:flex;align-items:center;gap:14px;margin-top:14px}.playback-progress-row progress{display:block;flex:1;height:3px;min-width:20px;appearance:none;border:0;border-radius:10px;background:#bcc99e22;overflow:hidden}.playback-progress-row progress::-webkit-progress-bar{background:#bcc99e22}.playback-progress-row progress::-webkit-progress-value{background:#c3d095;transition:width .35s}.playback-progress-row progress::-moz-progress-bar{background:#c3d095}#playback-status{font-size:9px;color:#a7bc92;max-width:180px}.watch-options{font-size:10px;color:#a6ba95;margin-top:13px;border-top:1px solid #b9ca9b22;padding-top:11px}.watch-options summary{font-size:10px;color:#b5c8a3}.watch-options summary:after{content:' +';float:right}.watch-options[open] summary:after{content:' −'}.watch-options label{display:flex;align-items:center;gap:8px;margin-top:11px;cursor:pointer}.watch-options input{accent-color:#cfdaaa;width:15px;height:15px;margin:0;cursor:pointer}.watch-options p{font-size:9px;color:#9aae8c;margin-top:8px}.text-position{max-width:590px;margin:18px auto 0;padding-top:13px;border-top:1px solid #b9ca9b22;color:#a9bc99;font-size:10px}.text-position p{margin-top:12px}.fen-label{font-size:8px;letter-spacing:.12em;font-weight:700}#fen-text{overflow-wrap:anywhere;font-family:monospace}.lesson-panel{padding:31px 34px 28px;min-width:0;background:linear-gradient(145deg,#f0f3e6,#e7edd9);display:flex;flex-direction:column;align-items:stretch}.lesson-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px}.lesson-kicker .eyebrow{font-size:9px;color:#7c8e71}.lesson-kicker>span{font-size:8px;color:#869779;white-space:nowrap}.lesson-panel h2{font-size:clamp(33px,3vw,42px);line-height:1.05;color:#354f38;margin-top:24px;max-width:13ch}.lesson-panel h2 em{color:#637b4d}#lesson-summary{font-size:13px;color:#8b987e;line-height:1.7;margin-top:14px}.lesson-progress{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;color:#8a9b76;margin-top:22px}#lesson-progress-mark{font-size:24px;line-height:1}.step-picker{display:flex;gap:7px;margin-top:11px;padding-bottom:22px;border-bottom:1px solid #d3ddc4}.step-picker button{display:grid;place-items:center;min-width:0;width:34px;height:34px;border:1px solid #c4d2b4;border-radius:50%;background:#edf0e0;color:#526442;font-size:11px}.step-picker button[aria-pressed=true]{background:#476940;border-color:#476940;color:#f8f4db;box-shadow:0 3px 8px #344b2d20}.step-picker button.is-complete{background:#dee8cd;border-color:#a9bd92;color:#526442}.step-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}#step-counter{font-size:9px;letter-spacing:.1em;color:#8d9e79;font-weight:600}#step-san{font-family:monospace;font-size:14px;color:#5b7642;font-weight:700}.step-why{font-family:Georgia,serif;font-size:21px;line-height:1.5;letter-spacing:-.015em;color:#526442;margin-top:12px;min-height:92px}.manual-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}.small-button{border:1px solid #bacaa3;background:transparent;border-radius:7px;padding:11px 14px;font-size:11px;min-height:42px;color:#5b7744}.small-button:hover:not(:disabled){background:#dde7cc}.try-prediction{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;text-align:left;padding:13px 15px;background:#e0e8cc;border:1px solid #c7d2ad;border-radius:8px;margin-top:23px;color:#5a7540}.try-prediction span{font-size:21px}.prediction-panel{padding:17px;background:#edf1dd;border:1px solid #c7d2ad;border-radius:9px;margin-top:13px}#prediction-question{font-family:Georgia,serif;font-size:21px;line-height:1.4;color:#4d673a}.prediction-choices{display:grid;gap:7px;margin-top:14px}.prediction-choices button{padding:11px 13px;border:1px solid #bdcba5;border-radius:6px;background:#faf8ea;text-align:left;font-size:13px;color:#63764d}.prediction-choices button[aria-pressed=true]{background:#47663c;color:#f4f3d8;border-color:#47663c}#prediction-feedback{font-size:12px;line-height:1.8;margin-top:12px;color:#526442}#prediction-close{font-size:11px;margin-top:8px;color:#4f713b}.why-details{border-top:1px solid #d4ddc5;margin-top:23px;padding-top:17px}.why-details+.why-details{margin-top:17px}.why-details summary{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:#6e815a}.why-details summary>span:last-child{font-size:17px;color:#98a77e;transition:transform .2s}.why-details[open] summary>span:last-child{transform:rotate(45deg)}.why-details>div,.why-details>p{font-size:12px;line-height:1.9;color:#748463;margin-top:15px}.why-details p+p{margin-top:12px}.why-details h3{font-size:20px;color:#617d49;line-height:1.4;margin-block:16px 8px;letter-spacing:-.02em}.why-details .lesson-limit{font-size:11px;line-height:1.85;color:#89947b;margin-top:16px;padding-top:13px;border-top:1px solid #d5dec6}.mistake-note{background:#eee1cd;border-radius:6px;padding:12px;color:#8b7754}.mistake-note strong{font-size:10px;text-transform:uppercase;letter-spacing:.06em}.takeaways{border-left:2px solid #aaba80;padding-left:14px;margin-top:22px}.takeaways .eyebrow{font-size:9px;color:#84986a}.takeaways ul{list-style:none;padding:0;margin:10px 0 0;font-size:12px;line-height:1.8;color:#657a4b}.takeaways li+li{margin-top:6px}.takeaways li:before{content:'✦';font-size:9px;margin-right:8px;color:#9eaf75}.primary-light,.secondary-light{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%;padding:12px 15px;min-height:44px;border-radius:8px;text-align:left;font-size:12px;font-weight:600}.primary-light{background:#43663f;color:#f6f4dc;margin-top:24px}.primary-light:hover{background:#365b33}.secondary-light{background:transparent;border:1px solid #bccba8;color:#60794a;margin-top:10px;font-weight:400}.secondary-light:hover{background:#e0e9d0}.lesson-practice{margin-top:25px}.lesson-navigation{display:flex;justify-content:space-between;gap:16px;padding-top:14px;margin-top:19px;border-top:1px solid #d5ddc2}.lesson-navigation .text-button{font-size:10px;color:#6b8156}.sample-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:22px}.sample-card{display:flex;align-items:center;gap:10px;background:#f0eee5;border:1px solid #e0dfd4;border-radius:10px;padding:12px 14px;text-align:left;min-height:65px;position:relative}.sample-card .sample-icon{font-family:Georgia,serif;font-size:26px;color:#9c9e7f;line-height:1}.sample-card strong{font-size:11px;font-weight:500;line-height:1.5}.sample-card small{font-size:8px;letter-spacing:.06em;display:block;color:#96a08a;margin-top:3px}.sample-card[aria-pressed=true]{background:#e9d8cd;border-color:#d9bcaa;color:#795841}.sample-card[aria-pressed=true] .sample-icon{color:#a78060}.sample-card[data-solved=true]:after{content:'✓';position:absolute;right:7px;top:2px;font-size:10px;color:#5e7d43}.sample-task{font-family:Georgia,serif;font-size:21px;line-height:1.5;color:#687d52;margin-top:19px}.practice-status{display:flex;align-items:flex-start;gap:11px;padding:15px;margin-top:24px;background:#f8f6e8;border:1px solid #dce3cc;border-radius:10px}.practice-status .status-symbol{font-size:23px;line-height:1.2;color:#9dad7c}.practice-status strong{font-size:12px;color:#65794d}.practice-status p{font-size:11px;line-height:1.8;color:#85916f;margin-top:4px}.practice-status[data-status=success]{background:#dde9cf;border-color:#b9cca3}.practice-status[data-status=success] strong{color:#496b35}.practice-status[data-status=try]{background:#f1e7d3;border-color:#ddcba9}.sample-sequence{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.sample-sequence:empty{display:none}.sample-sequence span{font-size:12px;font-family:monospace;padding:5px 9px;border-radius:5px;background:#dfe8cf;color:#627c46}.sample-secondary{display:flex;justify-content:space-between;gap:10px;margin-top:14px;color:#6c8153}.habit-note{border-left:2px solid #c3cfaa;padding-left:12px}.quiet-note{font-size:10px;line-height:1.8;color:#879779;margin-top:12px}.interactive-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr))}.board-square{position:relative;display:block;aspect-ratio:1;min-width:0;min-height:0;border-radius:0;padding:0;overflow:hidden;cursor:pointer;transition:background .15s;box-shadow:inset 0 0 0 1px #314d2809}.board-square img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 1px #17271970);pointer-events:none;user-select:none}.board-square.selected{box-shadow:inset 0 0 0 2px #173c29,inset 0 0 0 4px #edcf7d;background:#b8bb76}.board-square.legal:after{content:'';position:absolute;inset:39%;border-radius:50%;background:#2b523a55;pointer-events:none;z-index:3}.board-square.legal.has-piece:after{inset:4%;border:4px solid #2b523a77;background:transparent}.board-square.hint-square{box-shadow:inset 0 0 0 2px #173c29,inset 0 0 0 4px #dfbd6e}.board-square.checked{background:#d9a98a!important}.board-square:focus-visible{outline:3px solid #fff3bc;outline-offset:-4px;z-index:5}.board-hint,.game-message{display:flex;align-items:center;gap:12px;max-width:590px;margin:24px auto 0;min-height:48px;color:#d8dfc6}.board-hint>span{width:30px;height:30px;display:grid;place-items:center;border:1px solid #c7d1aa50;border-radius:50%;font-size:20px;flex-shrink:0}.board-hint p,.game-message p{font-family:Georgia,serif;font-size:21px;line-height:1.4;letter-spacing:-.02em}.board-actions{display:flex;gap:12px;max-width:590px;margin:22px auto 0}.dark-button{padding:11px 14px;min-height:43px;border:1px solid #c0d1a63d;border-radius:8px;background:#ffffff06;color:#bbcfab;font-size:12px;flex:1}.dark-button:hover:not(:disabled){background:#ffffff12}.play-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px;padding:0 4px}.bot-profile{display:flex;align-items:center;gap:13px}.bot-avatar{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;background:#e0e6d8;border-radius:50%;border:1px solid #d3ddc7}.bot-avatar img{width:35px;height:35px}.bot-profile strong{font-family:Georgia,serif;font-size:22px;font-weight:400;letter-spacing:-.02em}.bot-profile p{font-size:11px;color:#8a967f;line-height:1.7}.local-badge{font-size:10px;color:#88977d;display:flex;align-items:center;gap:6px}.local-badge>span{font-size:7px;color:#9fb182}.game-panel>h2{font-size:43px;margin-top:15px}.game-panel>.eyebrow{color:#859674}.game-settings{margin-top:23px}.game-settings fieldset{padding:0;border:0;margin:0 0 18px}.game-settings legend{font-size:11px;font-weight:600;color:#788b64;padding:0;margin-bottom:9px}.segmented{display:flex;gap:5px;border:1px solid #cdd8bc;border-radius:9px;background:#e2ead5;padding:4px}.segmented button{flex:1;min-height:37px;font-size:12px;border-radius:6px;background:transparent;color:#7b8d66;padding:8px}.segmented button[aria-pressed=true]{background:#fbf8e9;color:#5a7545;box-shadow:0 1px 4px #3b51251a}.game-settings>.quiet-note{margin-top:-6px}.game-record{margin-top:27px;border-top:1px solid #d2ddc2;padding-top:19px}.record-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#869773}.record-heading .eyebrow{font-size:9px}.record-heading>span{font-size:10px}.game-history{margin-top:12px;height:164px;overflow:auto;border-radius:8px;border:1px solid #d6dfc9;background:#f8f8ec;scrollbar-width:thin;scrollbar-color:#bdcba9 transparent}.empty-history{padding:22px;text-align:center;font-family:Georgia,serif;font-size:16px;font-style:italic;color:#9aa98a}.move-row{display:grid;grid-template-columns:35px 1fr 1fr;padding:7px 11px;font-family:monospace;font-size:12px;color:#657f4c}.move-row:nth-child(even){background:#edf1e2}.move-row>span:first-child{color:#a0ad91;font-size:10px}.move-row:last-child{color:#3d602d}.thinking-dot{width:8px;height:8px;background:#cadba2;border-radius:50%;flex-shrink:0;animation:breathe 1s infinite ease-in-out}.resource-strip{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding:32px 2px;margin-top:24px;border-bottom:1px solid var(--line)}.resource-strip>div{display:flex;align-items:center;gap:16px}.resource-flower{font-family:Georgia,serif;font-size:43px;color:#a6b297;line-height:1}.resource-strip strong{font-family:Georgia,serif;font-size:23px;letter-spacing:-.025em;font-weight:400}.resource-strip p{font-size:11px;color:#8b9781;margin-top:4px}.resource-strip>details{min-width:250px;max-width:420px;flex-shrink:0}.resource-strip summary{display:flex;align-items:center;justify-content:space-between;gap:35px;font-size:11px;padding:13px 17px;border:1px solid #d4decb;border-radius:8px;color:#6b815a;background:#f0f2e9}.practice-links{margin-top:12px}.practice-links>a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 4px;border-bottom:1px solid #dbe2d3;font-size:11px;color:#7d8d70}.practice-links>a>span{font-size:9px}.about-section{display:flex;justify-content:space-between;gap:55px;padding:24px 2px;font-size:10px;color:#8b9582}.about-section details{max-width:90ch}.about-section summary{font-size:11px;color:#819075}.about-section summary:after{content:' +';margin-left:10px}.about-section p{margin-top:14px;line-height:1.9}.about-section li{margin-bottom:6px}.about-section li a,.about-section p a{text-decoration:underline;text-underline-offset:3px}.product-link{white-space:nowrap;font-size:11px;color:#70865d;align-self:flex-start}.site-footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 0 32px;color:#8e9d7f}.site-footer>span{font-family:Georgia,serif;font-size:24px;letter-spacing:-.05em}.site-footer>p{font-family:Georgia,serif;font-size:15px;font-style:italic}.site-footer>a{font-size:10px}dialog{width:min(440px,calc(100% - 32px));padding:27px;border:1px solid #d7dec9;border-radius:18px;background:#f7f5ea;color:#47613b;box-shadow:0 25px 90px #11291e55}dialog::backdrop{background:#10281c99;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.dialog-top .eyebrow{font-size:9px;color:#82956c}.icon-button{background:transparent;font-size:25px;line-height:1;padding:8px;color:#80936b}dialog h2{font-size:36px;margin-top:15px}dialog>p{font-size:12px;color:#8b9879;margin-top:12px}.promotion-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:24px}.promotion-choices button{display:flex;align-items:center;flex-direction:column;border:1px solid #cbd7b7;border-radius:8px;padding:9px 4px;background:#e6edd7;font-size:10px;color:#667d4c}.promotion-choices img{width:62px;height:62px}.promotion-choices button:hover{background:#d9e4c6}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link:focus{position:fixed;top:10px;left:10px;padding:12px;background:white;color:#263c2b;z-index:100}.noscript{background:#f6e8bd;padding:20px;text-align:center;font-size:13px}.effects-paused *,.effects-paused *:before,.effects-paused *:after{animation:none!important;transition:none!important}.effects-paused{scroll-behavior:auto}@keyframes appear{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes bloom{0%{transform:scale(.7);opacity:.4}70%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}@keyframes breathe{50%{opacity:.25}}
@media(min-width:1450px){.wrap{width:min(1360px,calc(100% - 120px))}.study-grid,.room-grid{grid-template-columns:minmax(0,1.5fr) minmax(350px,1fr)}.board-panel{padding:27px 45px 32px}.lesson-panel{padding:35px 43px}.lesson-panel h2{font-size:45px}.step-why{font-size:24px}.intro-row{min-height:175px}.lesson-card strong{font-size:22px}.lesson-card{padding-block:19px}}
@media(max-width:1120px){.wrap{width:calc(100% - 48px)}.site-header{gap:20px}.brand{font-size:28px}.brand small{font-size:6px}.mode-nav a{padding-inline:21px}.motion-button{font-size:10px}.intro-art{width:235px;opacity:.5}.intro-row h2{font-size:36px}.study-grid,.room-grid{grid-template-columns:minmax(0,1.28fr) minmax(300px,1fr)}.board-panel{padding:22px 25px}.lesson-panel{padding:27px 26px}.lesson-card{padding:15px 11px;grid-template-columns:24px 1fr}.lesson-card strong{font-size:18px}.lesson-card small{font-size:9px}.lesson-card-number{font-size:16px}.lesson-panel h2{font-size:36px}.step-why{font-size:20px}.step-picker{gap:6px}.step-picker button{width:31px;height:31px;font-size:10px}.sample-card{padding:12px 10px;gap:8px}.sample-card strong{font-size:10px}.sample-icon{font-size:24px!important}.sample-task{font-size:20px}.game-panel>h2{font-size:39px}.board-hint p,.game-message p{font-size:20px}}
@media(max-width:900px){.wrap{width:calc(100% - 36px)}.site-header{height:93px}.brand{font-size:27px}.petal-mark{width:32px}.brand small{font-size:5px}.mode-nav{gap:2px;padding:4px}.mode-nav a{padding:8px 16px;font-size:12px;gap:6px}.motion-button #motion-label{display:none}.motion-button{padding:10px}.intro-row{min-height:143px;padding-block:22px}.intro-row h2{font-size:32px}.intro-row .eyebrow{font-size:8px}.intro-row p:last-child{font-size:12px}.intro-art{width:195px;opacity:.38}.lesson-picker{gap:7px}.lesson-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:12px 11px}.lesson-card-number{grid-row:auto;font-size:13px}.lesson-card strong{font-size:18px;margin-top:6px}.lesson-card small{font-size:8px;margin-top:2px}.study-grid,.room-grid{grid-template-columns:minmax(0,1.2fr) minmax(265px,1fr)}.board-panel{padding:20px 19px}.lesson-panel{padding:23px}.lesson-panel h2{font-size:32px}.lesson-kicker .eyebrow{font-size:8px}.lesson-kicker>span{font-size:7px}#lesson-summary{font-size:12px}.step-picker{gap:5px}.step-picker button{width:29px;height:29px;font-size:10px}.step-why{font-size:19px;min-height:85px}.board-meta .text-button{font-size:10px}.board-tools{gap:13px}.live-status{font-size:9px;padding:7px 9px}.board-frame{padding:11px}.board-frame:after{inset:5px}#step-caption{font-size:21px}.playback-deck{padding:12px}.playback-main{gap:10px}.play-button{padding:8px 10px;font-size:11px;gap:8px}.restart-button{font-size:22px;padding-inline:3px}.restart-button span{font-size:8px}.speed-control select{font-size:11px;padding:4px}#playback-status{font-size:8px;max-width:145px}.board-footer{font-size:9px}.board-footer>span:last-child{font-size:8px;max-width:170px}.visual-caption{gap:11px;margin-top:18px}.sample-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.sample-card strong{font-size:12px}.sample-card small{font-size:9px}.sample-card{min-height:61px}.sample-task{font-size:19px}.game-panel>h2{font-size:36px}.game-history{height:140px}.resource-strip strong{font-size:21px}.resource-strip>details{min-width:230px}.board-hint p,.game-message p{font-size:19px}.dark-button{font-size:11px}.manual-controls{gap:10px}.small-button{font-size:10px;padding:9px 11px}.lesson-navigation .text-button{font-size:9px}}
@media(max-width:720px){.site-header{height:auto;min-height:116px;padding-top:18px;padding-bottom:14px;flex-wrap:wrap;gap:13px}.brand{font-size:29px}.brand small{font-size:6px}.petal-mark{width:35px}.motion-button{margin-left:auto}.mode-nav{order:3;width:100%;justify-content:center;gap:4px}.mode-nav a{flex:1;padding:8px 16px;min-height:39px;font-size:12px}.intro-row{min-height:134px;padding:24px 0 23px}.intro-row h2{font-size:33px;max-width:17ch}.intro-row h2 em{display:block}.intro-row p:last-child{font-size:12px;margin-top:9px}.intro-art{width:180px;opacity:.48}.intro-row .eyebrow{font-size:7px;margin-bottom:8px}.lesson-picker{grid-template-columns:repeat(5,minmax(128px,1fr));overflow-x:auto;padding:2px 0 9px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#bdc9ae transparent;margin-bottom:14px;gap:8px}.lesson-card{scroll-snap-align:start;padding:14px 13px;min-height:91px}.lesson-card strong{font-size:20px}.lesson-card small{font-size:9px}.collection-heading{margin-bottom:9px}.collection-heading .eyebrow{font-size:8px}.collection-heading>span{font-size:10px}.study-grid,.room-grid{grid-template-columns:1fr}.study-topline{padding:14px 20px}.study-topline>span:last-child,.room-label{font-size:8px}.board-panel{padding:23px 28px 25px}.board-aura,.board-meta,.board-footer,.visual-caption,.playback-deck,.text-position,.board-hint,.board-actions,.game-message{max-width:530px}.board-meta .text-button{font-size:11px}.live-status{font-size:10px}.board-tools{gap:18px}.board-frame{padding:13px}.board-frame:after{inset:6px}.coordinate{font-size:9px}.board-footer{font-size:10px}.board-footer>span:last-child{font-size:9px;max-width:205px}.visual-caption{margin-top:22px;gap:14px}#step-caption{font-size:25px}#caption-number{width:32px;height:32px;font-size:14px}.playback-deck{padding:16px 17px}.playback-main{gap:16px}.play-button{font-size:12px;min-height:49px;gap:12px}.restart-button{font-size:26px}.restart-button span{font-size:9px}.speed-control select{font-size:12px}#playback-status{font-size:9px;max-width:175px}.text-position{font-size:10px}.lesson-panel{padding:28px 30px 30px;border-top:1px solid #c6d2b6}.lesson-kicker .eyebrow{font-size:9px}.lesson-kicker>span{font-size:8px}.lesson-panel h2{font-size:40px;max-width:19ch;margin-top:18px}#lesson-summary{font-size:13px;margin-top:12px}.lesson-progress{margin-top:20px;font-size:11px}.step-picker{gap:9px;margin-top:12px}.step-picker button{width:36px;height:36px;font-size:12px}.step-why{font-size:23px;min-height:0}.manual-controls{margin-top:20px}.small-button{font-size:12px;padding:11px 17px;min-height:44px}.why-details summary{font-size:13px}.why-details>div,.why-details>p{font-size:13px}.primary-light,.secondary-light{font-size:13px;min-height:46px}.lesson-navigation .text-button{font-size:11px}.try-prediction{font-size:13px}.sample-task{font-size:23px;max-width:34ch}.practice-status{margin-top:23px}.practice-status strong{font-size:13px}.practice-status p{font-size:12px}.sample-secondary .text-button{font-size:12px}.sample-picker{gap:7px;margin-bottom:19px}.sample-card{padding:11px 12px}.sample-card strong{font-size:11px}.sample-card small{font-size:8px}.play-intro{margin-bottom:18px;padding:0}.bot-profile strong{font-size:20px}.bot-profile p{font-size:10px}.local-badge{font-size:9px}.game-panel>h2{font-size:41px}.game-panel>h2 br{display:none}.game-settings{display:grid;grid-template-columns:1fr 1fr;gap:16px}.game-settings fieldset{margin:0}.game-settings .quiet-note{grid-column:1/-1;margin-top:-4px}.game-history{height:160px}.game-record{margin-top:25px}.board-hint p,.game-message p{font-size:23px}.dark-button{font-size:12px}.resource-strip{padding:28px 2px;gap:25px;margin-top:18px}.resource-strip strong{font-size:21px}.resource-strip p{font-size:10px}.resource-flower{font-size:37px}.resource-strip>details{min-width:205px}.about-section{gap:30px}.site-footer>p{font-size:14px}.site-footer>span{font-size:23px}.site-footer>a{font-size:9px}}
@media(max-width:480px){.wrap{width:calc(100% - 28px)}.site-header{padding-top:17px}.brand{font-size:28px}.petal-mark{width:32px}.brand small{font-size:5px;letter-spacing:.12em}.intro-row h2{font-size:31px}.intro-art{width:140px;opacity:.35;right:-10px}.intro-row{padding-block:22px;min-height:144px}.intro-row p:last-child{font-size:11px;max-width:28ch}.lesson-picker{grid-template-columns:repeat(5,minmax(122px,1fr))}.lesson-card strong{font-size:19px}.study-shell,.room-shell{border-radius:15px}.study-topline{padding:13px 17px}.room-label{font-size:7px;gap:8px}.study-topline>span:last-child{font-size:7px}.room-label>span{font-size:18px}.board-panel{padding:19px 16px 24px}.board-meta{margin-bottom:14px;gap:8px}.board-meta .text-button{font-size:10px}.board-tools{gap:13px}.live-status{font-size:9px;gap:6px;padding:7px 9px}.board-frame{padding:10px}.board-frame:after{inset:4px}.frame-corner{display:none}.coordinate{font-size:8px}.coordinate.rank{left:3px;top:3px}.coordinate.file{right:3px;bottom:2px}.board-footer{font-size:9px;gap:10px;margin-top:12px}.board-footer>span:last-child{font-size:8px;max-width:160px}.visual-caption{gap:11px;margin-top:20px;min-height:50px}#step-caption{font-size:23px}#caption-number{width:28px;height:28px;font-size:12px}.playback-deck{padding:13px;margin-top:20px}.playback-main{gap:11px}.play-button{font-size:11px;padding:9px 10px;min-height:47px;gap:8px}.play-button #play-icon{width:23px;height:23px;font-size:9px}.restart-button{font-size:24px}.restart-button span{font-size:8px}.speed-control select{font-size:11px;padding:5px}.speed-control>span{font-size:6px}.playback-progress-row{gap:11px}#playback-status{font-size:8px;max-width:152px}.watch-options{font-size:10px}.watch-options p{font-size:9px}.text-position{font-size:9px}.lesson-panel{padding:26px 24px}.lesson-panel h2{font-size:37px;max-width:15ch}.lesson-kicker>span{font-size:7px}.lesson-kicker .eyebrow{font-size:8px}.step-picker{gap:7px}.step-picker button{width:33px;height:33px;font-size:11px}.step-why{font-size:22px}.manual-controls{gap:12px}.small-button{font-size:11px}.sample-picker{gap:7px}.sample-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:11px 10px;min-height:89px}.sample-card .sample-icon{font-size:24px!important}.sample-card strong{font-size:11px}.sample-card small{font-size:7px;letter-spacing:.03em}.sample-task{font-size:22px}.board-hint p,.game-message p{font-size:21px}.board-hint,.game-message{margin-top:20px}.board-actions{margin-top:18px;gap:10px}.dark-button{font-size:11px;padding:11px 12px}.play-intro{align-items:flex-start;gap:10px}.bot-avatar{width:41px;height:41px}.bot-avatar img{width:30px;height:30px}.bot-profile{gap:10px}.bot-profile strong{font-size:18px}.bot-profile p{font-size:9px;max-width:22ch}.local-badge{font-size:8px;max-width:78px;line-height:1.6;padding-top:6px;align-items:baseline}.game-panel>h2{font-size:37px}.game-settings{gap:12px}.segmented button{font-size:11px;padding:8px 5px}.resource-strip{display:block;padding-block:26px}.resource-strip>details{min-width:0;max-width:none;margin-top:20px}.resource-strip strong{font-size:22px}.resource-strip p{font-size:11px}.resource-strip>div{gap:14px}.about-section{display:block;padding-block:21px}.product-link{display:inline-block;margin-top:18px;font-size:10px}.site-footer{flex-wrap:wrap;gap:12px;padding-block:22px 25px}.site-footer>p{order:3;width:100%;font-size:14px}.site-footer>span{font-size:23px}.site-footer>a{margin-left:auto;font-size:9px}}
@media(max-width:350px){.wrap{width:calc(100% - 22px)}.brand{font-size:25px}.brand small{font-size:4.5px}.mode-nav a{font-size:11px;padding-inline:10px}.intro-row h2{font-size:29px}.intro-art{width:110px;opacity:.26}.board-panel{padding-inline:11px}.board-meta .text-button{font-size:9px}.live-status{font-size:8px}.board-tools{gap:10px}.board-frame{padding:8px}.board-frame:after{inset:3px}.playback-deck{padding:10px}.playback-main{gap:9px}.play-button{font-size:10px}.play-button #play-icon{width:20px;height:20px}.lesson-panel{padding:24px 19px}.lesson-panel h2{font-size:34px}.step-picker{gap:5px}.step-picker button{width:30px;height:30px}.sample-card strong{font-size:10px}.sample-card{padding-inline:8px}.sample-card small{font-size:6px}.game-settings{grid-template-columns:1fr;gap:15px}.game-settings .quiet-note{grid-column:1}.bot-profile strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}@media print{.site-header,.intro-art,.lesson-picker,.board-panel,.step-picker,.manual-controls,.try-prediction,.lesson-navigation,.site-footer,.sample-picker,.game-settings,.resource-strip{display:none!important}.wrap{width:100%}.study-grid,.room-grid{display:block}.study-shell,.room-shell,.lesson-panel{background:white!important;color:black!important;box-shadow:none;border:0}.mode-view[hidden]{display:none!important}.why-details>div{display:block!important}}
/* Readable, quiet sage text: contrast is maintained without a louder palette. */
.intro-row .eyebrow,.intro-row p:last-child,.collection-heading,.collection-heading>span,.lesson-card small,.mode-nav a,.motion-button,.brand small,.resource-strip p,.about-section,.about-section summary,.site-footer,.product-link,.sample-card small,.bot-profile p,.local-badge{color:#5e6e60}.lesson-card[aria-pressed=true] small{color:#c0d2b2}.lesson-kicker .eyebrow,.lesson-kicker>span,#lesson-summary,.lesson-progress,#step-counter,.why-details summary,.why-details>div,.why-details>p,.why-details .lesson-limit,.quiet-note,.sample-secondary,.game-panel>.eyebrow,.game-settings legend,.game-settings>.quiet-note,.record-heading,.record-heading>span,.sample-task{color:#5f714f}.sample-card[aria-pressed=true] small{color:#795841}.practice-status p{color:#687753}.resource-strip summary,.practice-links>a{color:#617653}.segmented button{color:#5d704e}.empty-history{color:#758565}.board-footer,.board-footer>span:last-child,.watch-options p,.text-position,#playback-status{color:#b9c9aa}.lesson-navigation .text-button{color:#5d744a}#game-bot-retry{display:block;width:100%;max-width:590px;margin:12px auto 0}.move-row>span:first-child{color:#79876c}.lesson-card-number{color:#677b5e}.lesson-card[aria-pressed=true] .lesson-card-number{color:#c0d2b2}
/* Keep the board close to the first screen, especially on a phone. */
@media(min-width:721px){.site-header{height:88px}.intro-row{min-height:126px;padding-block:22px}.intro-art{width:265px}.lesson-card{padding-block:13px}.lesson-picker{margin-bottom:19px}.study-topline{padding-block:13px}}
@media(min-width:1450px){.intro-row{min-height:134px}.lesson-card{padding-block:15px}.board-panel{padding-top:23px}.intro-art{width:290px}}
@media(max-width:480px){.intro-row{min-height:105px;padding-block:17px}.intro-row .eyebrow,.intro-row>div:first-child>p:last-child{display:none}.intro-row h2{font-size:31px}.intro-art{top:0}.lesson-card{min-height:82px;padding-block:11px}.lesson-picker{padding-bottom:8px;margin-bottom:12px}.board-panel{padding-top:16px}}
.lesson-card[data-complete=true] .lesson-card-number:after{content:none}.lesson-card[data-complete=true]:after{content:'✓';position:absolute;right:8px;top:4px;font-size:10px;color:#648250}.lesson-card[data-complete=true][aria-pressed=true]:after{color:#c3d3ab}
.site-header{position:sticky;top:0;z-index:30;background:var(--paper);width:100%;padding-inline:max(40px,calc((100% - 1280px)/2))}html{scroll-padding-top:108px}@media(min-width:1450px){.site-header{padding-inline:max(60px,calc((100% - 1360px)/2))}}@media(max-width:1120px){.site-header{padding-inline:24px}}@media(max-width:900px){.site-header{padding-inline:18px}}@media(max-width:720px){html{scroll-padding-top:145px}}@media(max-width:480px){.site-header{padding-inline:14px}}@media(max-width:350px){.site-header{padding-inline:11px}}
.practice-status p,.practice-status strong,.empty-history,.move-row,.move-row>span:first-child,.lesson-navigation .text-button{color:#526442}.practice-status[data-status=success] strong{color:#3f5b2f}.sample-card[data-solved=true]:after{color:#49643a}
/* Keep decisions and their feedback with the board, not a second scroll away. */
.playback-main.manual-controls{margin:0;gap:11px}.playback-step{display:grid;place-items:center;flex:0 0 44px;width:44px;height:48px;padding:0;border:1px solid #c0d1a64d;border-radius:8px;background:#ffffff06;color:#dbe7c9;font-size:21px;line-height:1}.playback-step:hover:not(:disabled){background:#ffffff12}.playback-main .play-button{justify-content:center}.playback-utilities{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}.playback-utilities .restart-button{flex-direction:row;align-items:center;gap:7px;min-height:32px;font-size:21px;padding:3px 6px}.playback-utilities .restart-button span{margin:0;font-size:10px}.playback-utilities .speed-control{flex-direction:row;gap:7px}.playback-utilities .speed-control>span{font-size:8px}.playback-utilities .speed-control select{min-height:32px}.playback-deck .playback-progress-row{margin-top:11px}.mobile-sample-brief{display:none}#sample-feedback{max-width:590px;margin:20px auto 0;background:#edf1df;border-color:#c9d7b7}#sample-feedback[data-status=success]{background:#dfebd1;border-color:#bbd29e}#sample-feedback[data-status=try]{background:#f1e7d3;border-color:#ddcba9}#sample-board-hint{display:none}.board-square.legal:after{background:#173c29;inset:38%;box-shadow:0 0 0 1px #f5f0d6}.board-square.legal.has-piece:after{inset:5%;border:3px solid #173c29;background:transparent;box-shadow:inset 0 0 0 1px #f5f0d6,0 0 0 1px #f5f0d6}.board-square:focus-visible{outline:3px solid #173c29;outline-offset:-3px;box-shadow:inset 0 0 0 5px #fff8d8;z-index:5}.motion-button{min-width:44px;min-height:44px;justify-content:center}
@media(max-width:720px){.mobile-sample-brief{display:block;max-width:530px;margin:0 auto 18px;padding-bottom:16px;border-bottom:1px solid #b9ca9b30}.mobile-sample-brief .eyebrow{font-size:8px;color:#c4d4b3}.mobile-sample-brief p{font-family:Georgia,serif;font-size:21px;line-height:1.4;letter-spacing:-.015em;color:#f0ecd6;margin-top:6px}.sample-panel>.lesson-kicker,.sample-panel>h2,.sample-panel>.sample-task{display:none}.sample-panel>.sample-sequence{margin-top:0}.sample-panel>.why-details{margin-top:15px}.sample-panel>.sample-sequence:empty+.why-details{margin-top:0;border-top:0;padding-top:0}#sample-feedback{max-width:530px;margin-top:18px}.playback-step{flex-basis:44px;width:44px;height:49px}.playback-main.manual-controls{gap:10px}}
@media(max-width:480px){.mobile-sample-brief{margin-bottom:15px;padding-bottom:13px}.mobile-sample-brief p{font-size:19px}.playback-step{flex-basis:40px;width:40px;height:47px}.playback-main.manual-controls{gap:8px}.playback-main .play-button{font-size:11px;padding-inline:8px}.playback-main .play-button #play-icon{width:21px;height:21px}.playback-utilities{margin-top:11px}.playback-utilities .restart-button span{font-size:9px}#sample-feedback{margin-top:16px;padding:13px}}
@media(max-width:350px){.playback-step{flex-basis:36px;width:36px}.playback-main .play-button{font-size:10px;gap:6px}.playback-main.manual-controls{gap:7px}.mobile-sample-brief p{font-size:18px}}
@media(max-width:480px){.playback-step{flex-basis:44px;width:44px;min-height:44px}}
/* Five connected strategy goals, with the six tactical samples kept distinct. */
.practice-collection-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 22px}.practice-collection-bar .segmented{min-width:370px;max-width:470px;flex:1;background:#e7ecdf;border-color:#d1dbc7}.practice-collection-bar .segmented button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:43px;font-size:12px;color:#526b47}.practice-collection-bar .segmented button span{display:inline-grid;place-items:center;width:20px;height:20px;background:#cad8be7d;border-radius:50%;font-size:10px}.practice-collection-bar .segmented button[aria-pressed=true]{background:#fffdf3}.practice-collection-bar>p{font-family:Georgia,serif;font-size:17px;line-height:1.5;color:#6d805f;letter-spacing:-.015em}.sample-picker.strategy-picker{grid-template-columns:repeat(5,minmax(0,1fr))}.strategy-picker .sample-card{min-height:80px}.strategy-picker .sample-card strong{font-family:Georgia,serif;font-size:18px;font-weight:400;line-height:1.2;letter-spacing:-.02em}.strategy-picker .sample-card small{font-size:8px}.interactive-board-stage{position:relative;aspect-ratio:1;width:100%;isolation:isolate}.sample-guide-layer{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}.sample-guide-layer path{stroke-linejoin:round}.sample-guide-key{max-width:590px;margin:12px auto 0;font-size:9px;line-height:1.6;color:#c1d1b1}.strategy-explore label{display:block;font-size:11px;color:#5a7147;margin-top:15px}.strategy-explore select{width:100%;border:1px solid #b9cba6;border-radius:7px;background:#f8f8ea;color:#4f6840;padding:10px;font-size:12px;margin-top:7px;min-height:43px}.strategy-explore .secondary-light{font-size:11px;margin-top:11px}.strategy-explore>p{font-size:11px;line-height:1.8}.strategy-explore>.text-button{font-size:11px;color:#516e3d;margin-top:10px}.branch-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:590px;margin:16px auto 0;padding:12px;border:1px solid #b9cca33b;border-radius:9px;background:#132e2433}.branch-controls .small-button{background:#e8efd7;color:#405d32;border-color:#cfddb9;font-size:11px;min-height:43px}.branch-controls>span{font-size:11px;font-family:monospace;color:#d7e2c6}.sample-panel #sample-limit{font-size:11px;line-height:1.8;margin-top:16px;padding-top:12px;border-top:1px solid #d0dbc0}#strategy-branch-note{color:#526442}
@media(max-width:1120px){.strategy-picker .sample-card{gap:8px;padding-inline:12px}.strategy-picker .sample-card strong{font-size:17px}.practice-collection-bar>p{font-size:16px}.practice-collection-bar .segmented{min-width:330px}.strategy-picker .sample-icon{font-size:24px!important}}
@media(max-width:900px){.strategy-picker .sample-card{flex-direction:column;align-items:flex-start;gap:7px;padding:12px}.strategy-picker .sample-card strong{font-size:18px}.practice-collection-bar{gap:20px}.practice-collection-bar>p{font-size:15px}.practice-collection-bar .segmented{min-width:310px}.practice-collection-bar .segmented button{font-size:11px}}
@media(max-width:720px){.practice-collection-bar{display:block;margin-bottom:18px}.practice-collection-bar .segmented{min-width:0;max-width:none;width:100%}.practice-collection-bar .segmented button{font-size:12px;min-height:43px}.practice-collection-bar>p{margin-top:11px;font-size:14px}.sample-picker.strategy-picker{grid-template-columns:repeat(5,minmax(135px,1fr));overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#bcc9aa transparent;padding-bottom:10px}.strategy-picker .sample-card{scroll-snap-align:start;min-height:103px}.strategy-picker .sample-card strong{font-size:19px}.sample-guide-key,.branch-controls{max-width:530px}.sample-guide-key{font-size:10px}.strategy-explore label,.strategy-explore>p{font-size:12px}.strategy-explore .secondary-light,.strategy-explore>.text-button{font-size:12px}.branch-controls .small-button{font-size:12px;min-height:44px}}
@media(max-width:480px){.practice-collection-bar{margin-bottom:17px}.practice-collection-bar .segmented button{font-size:11px;gap:7px;padding-inline:7px}.practice-collection-bar>p{font-size:13px}.sample-picker.strategy-picker{grid-template-columns:repeat(5,minmax(128px,1fr));gap:8px}.strategy-picker .sample-card{min-height:100px;padding:12px}.strategy-picker .sample-card strong{font-size:18px}.strategy-picker .sample-card small{font-size:7px}.sample-guide-key{font-size:9px;margin-top:10px}.branch-controls{gap:10px;padding:10px;margin-top:13px}.branch-controls .small-button{font-size:11px;padding:10px 13px}}

/* Local continuity stays quiet until a choice or storage problem needs attention. */
.storage-notice{border:1px solid #d6c8a6;border-radius:10px;background:#f3ead6;color:#665733;padding:13px 17px;font-size:12px;line-height:1.65;margin:0 0 24px}.game-resume-panel{max-width:590px;margin:17px auto 0;border:1px solid #c6d4ac;border-radius:11px;background:#e7edda;color:#3e5831;padding:17px}.game-resume-panel>strong{font-family:Georgia,serif;font-size:20px;font-weight:400;line-height:1.3}.game-resume-panel>p{font-size:11px;line-height:1.7;margin-top:7px;color:#526843}.game-resume-panel>div{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}.game-resume-panel .dark-button{background:#36563b;color:#f3f5e8;min-height:44px;font-size:11px}.game-resume-panel .dark-button+button{background:transparent;color:#405c32;border-color:#adbfa0}.game-settings button:disabled{opacity:.5;cursor:default}
@media(max-width:720px){.game-resume-panel{max-width:530px}.storage-notice{font-size:12px;margin-bottom:19px}}
@media(max-width:480px){.game-resume-panel{padding:15px}.game-resume-panel>strong{font-size:19px}.game-resume-panel>div{gap:8px}.game-resume-panel .dark-button{flex:1;padding-inline:10px}.storage-notice{padding:12px 14px}}

/* Real pieces travel independently of the always-final square controls. */
.interactive-piece-layer{position:absolute;inset:1px;z-index:2;overflow:hidden;border-radius:1px;pointer-events:none}.interactive-piece{position:absolute;left:0;top:0;width:12.5%;height:12.5%;pointer-events:none;transform:translate(var(--piece-x),var(--piece-y));transition:transform 320ms cubic-bezier(.22,.75,.22,1),opacity 160ms ease;opacity:1;z-index:2}.interactive-piece-art{display:block;width:100%;height:100%;object-fit:contain;max-width:none;pointer-events:none;user-select:none;filter:drop-shadow(0 2px 1px #17302066)}.interactive-piece.is-white .interactive-piece-art{filter:drop-shadow(0 2px 1px #17302066) drop-shadow(0 -1px 0 #ffffff88)}.interactive-piece.is-captured{opacity:0;z-index:1;transition-property:opacity}.interactive-board.piece-layer-ready .square-piece-fallback{visibility:hidden}.interactive-piece-layer.motion-snap .interactive-piece,.effects-paused .interactive-piece{transition:none!important}.interactive-piece-layer.motion-snap .interactive-piece-art,.effects-paused .interactive-piece-art{animation:none!important}
@media(prefers-reduced-motion:reduce){.interactive-piece{transition:none!important}.interactive-piece-art{animation:none!important}}

/* A second example lives inside its concept, not in another row of cards. */
.strategy-position-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:590px;margin:0 auto 16px}.strategy-position-bar .segmented{flex:0 1 270px;border-color:#92ab7d66;background:#142f2340}.strategy-position-bar .segmented button{min-height:44px;font-size:11px;color:#d5e2c4;padding:10px 13px}.strategy-position-bar .segmented button[aria-pressed=true]{background:#e3ebd3;color:#304d2b}.strategy-position-bar>span{font-size:8px;letter-spacing:.06em;line-height:1.6;color:#cedcbd;text-align:right}.strategy-picker .sample-card[data-goals-found="1"] small{color:#52713f}.strategy-picker .sample-card[aria-pressed=true] small{color:#795841}
@media(max-width:720px){.strategy-position-bar{max-width:530px;margin-bottom:15px}.strategy-position-bar .segmented{flex-basis:280px}.strategy-position-bar .segmented button{font-size:12px}.strategy-position-bar>span{font-size:9px}}
@media(max-width:480px){.strategy-position-bar{gap:10px;margin-bottom:13px}.strategy-position-bar .segmented{flex-basis:230px}.strategy-position-bar .segmented button{padding-inline:8px;font-size:11px}.strategy-position-bar>span{max-width:85px;font-size:8px}}

/* Board-first workspace. Content and controls keep their natural source order. */
@media screen {
  html{scroll-padding-top:76px}
  .wrap{width:min(1280px,calc(100% - 48px))}
  .site-header{height:auto;min-height:60px;padding:4px max(24px,calc((100% - 1280px)/2));gap:18px;flex-wrap:nowrap}
  .brand{font-size:26px;gap:9px}.brand small{display:none}.petal-mark{width:30px}
  .mode-nav{order:initial;width:auto;gap:2px;padding:2px}.mode-nav a{min-height:44px;padding:8px 20px;font-size:12px;flex:initial}
  .motion-button{margin:0;min-width:44px;min-height:44px;padding:8px}.motion-button #motion-label{display:inline}
  .intro-row{min-height:36px;padding:5px 0;gap:16px;overflow:visible}
  .intro-row .eyebrow,.intro-row>div:first-child>p:last-child{display:none}
  .intro-row h2{font-size:22px;line-height:1.18;max-width:none}.intro-row h2 em{display:inline}
  .intro-art{width:145px;top:0;bottom:0;right:150px;opacity:.16;mask-image:linear-gradient(90deg,transparent,#000 45%,transparent)}
  .workspace-progress{flex-shrink:0;font-size:10px;line-height:1.5;color:#526442;position:relative;z-index:1}
  .lesson-picker,.sample-picker,.sample-picker.strategy-picker{gap:8px;margin:0 0 8px;padding:0;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
  .sample-picker:not(.strategy-picker){grid-template-columns:repeat(6,minmax(0,1fr))}
  .lesson-card{min-height:46px;padding:8px 12px;grid-template-columns:23px 1fr;grid-template-rows:auto;gap:0;border-radius:9px}
  .lesson-card-number{grid-row:auto;font-size:14px}.lesson-card strong{font-size:17px;margin:0;line-height:1.25}.lesson-card small{display:none}
  .lesson-card-decoration{height:62px;width:62px;right:-5px;top:-5px}.lesson-card:hover{transform:none}
  .sample-card,.strategy-picker .sample-card{min-height:46px;padding:6px 10px;flex-direction:row;align-items:center;gap:7px}
  .sample-card .sample-icon,.strategy-picker .sample-icon{font-size:20px!important}.sample-card strong{display:block;font-size:11px;line-height:1.25}
  .strategy-picker .sample-card strong{font-size:15px;line-height:1.15}.sample-card small,.strategy-picker .sample-card small{font-size:8px;line-height:1.2;margin-top:2px}
  .study-topline{min-height:24px;padding:5px 18px;gap:12px;line-height:1.5}.study-topline>span:last-child,.room-label{font-size:8px}.room-label>span{font-size:12px;line-height:1}
  #view-practice>.room-shell>.study-topline{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;min-height:0}
  .study-grid,.room-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr)}
  .board-panel{--workspace-board-size:560px;padding:10px 22px 18px;min-width:0}
  .board-panel>.board-aura,.board-panel>.board-meta,.board-panel>.board-footer,.board-panel>.visual-caption,.board-panel>.playback-deck,.board-panel>.text-position,.board-panel>.board-actions,.board-panel>.game-message,.board-panel>.sample-guide-key,.board-panel>.branch-controls,.board-panel>.game-resume-panel,#sample-feedback{width:min(100%,var(--workspace-board-size));max-width:none;margin-inline:auto}
  .board-frame{padding:8px}.board-frame:after{inset:4px}.board-meta{min-height:44px;margin-bottom:4px;gap:12px}
  .board-meta .text-button{min-width:44px;min-height:44px;padding:8px 4px;font-size:11px}.board-tools{gap:10px}.live-status{font-size:10px;padding:6px 9px}
  .visual-caption{min-height:0;margin-top:8px;gap:10px;align-items:center}#caption-number{width:24px;height:24px;font-size:12px}#step-caption{font-size:17px;line-height:1.3}
  .playback-deck{margin-top:8px;padding:0;border:0;background:none;border-radius:0}
  .playback-main.manual-controls{gap:8px}.playback-step{width:44px;min-width:44px;height:44px;flex:0 0 44px;min-height:44px}.playback-main .play-button{min-height:44px;font-size:12px;padding:8px 10px;gap:8px}.playback-main .play-button #play-icon{width:22px;height:22px}
  .playback-utilities{margin-top:10px}.playback-utilities .restart-button,.playback-utilities .speed-control select{min-height:44px}.playback-deck .playback-progress-row{margin-top:6px}.watch-options{margin-top:8px;padding-top:8px}.watch-options summary,.text-position summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.watch-options summary:after{float:none}
  .board-footer{margin-top:8px;font-size:10px;line-height:1.5}.board-footer>span:last-child{font-size:9px}.text-position{margin-top:8px;padding-top:8px}
  .lesson-panel{padding:20px 24px;min-width:0}.lesson-panel h2{font-size:29px;line-height:1.1;margin-top:12px;max-width:22ch}.lesson-kicker .eyebrow{font-size:9px}.lesson-kicker>span{font-size:8px}
  #lesson-summary{font-size:13px;line-height:1.5;margin-top:9px}.lesson-progress{font-size:11px;margin-top:15px}.step-picker{flex-wrap:wrap;gap:6px;margin-top:8px;padding-bottom:12px}.step-picker button{flex:0 0 44px;min-width:44px;width:44px;height:44px;font-size:12px}.step-heading{margin-top:12px}.step-why{min-height:0;font-size:19px;line-height:1.4;margin-top:8px}
  .lesson-panel>.primary-light{margin-top:16px}.lesson-navigation{margin-top:12px;padding-top:8px;flex-wrap:wrap;gap:8px}.lesson-navigation .text-button{min-height:44px;font-size:11px}.why-details{margin-top:16px}.why-details summary{min-height:44px;align-items:center}
  .mobile-sample-brief{display:block;flex:1;max-width:none;margin:0;padding:0;border:0;min-width:0}.mobile-sample-brief .eyebrow{display:none}.mobile-sample-brief p{margin:0;font-family:Georgia,serif;font-size:17px;line-height:1.3;color:#f0ecd6;letter-spacing:-.015em}
  .practice-position-tools{display:flex;align-items:center;flex-shrink:0}.practice-position-tools .live-status{font-size:9px;white-space:nowrap}
  .sample-panel>.sample-task{display:none}.sample-panel>.lesson-kicker{display:flex}.sample-panel>h2{display:block}
  #sample-feedback{margin-top:10px;padding:10px 12px;gap:9px}#sample-feedback strong{display:block;font-size:12px;line-height:1.3}#sample-feedback p{font-size:11px;line-height:1.5;margin-top:3px}#sample-feedback .status-symbol{font-size:21px}
  .board-actions{margin-top:8px;gap:8px}.board-actions .dark-button{min-height:44px;min-width:0;padding:8px 10px;font-size:11px;line-height:1.3}.board-actions>.text-button{flex:0 0 44px;min-width:44px;min-height:44px;color:#d7e2c6;padding:8px 3px;font-size:11px;line-height:1.3}
  .branch-controls{margin-top:8px;padding:8px;gap:10px}.branch-controls .small-button{min-height:44px}.sample-guide-key{margin-top:8px;font-size:10px;line-height:1.5}
  .practice-collection-bar{display:block;margin:0 0 12px}.practice-collection-bar .segmented{width:100%;min-width:0;max-width:none}.practice-collection-bar .segmented button{min-height:44px;font-size:11px;padding:8px;gap:6px}.practice-collection-bar>p{font-size:14px;line-height:1.4;margin-top:8px}
  .strategy-position-bar{display:flex;max-width:none;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid #c5d2b5;gap:10px}.strategy-position-bar .segmented{flex:1;min-width:0;background:#e1e9d4;border-color:#b8c8a3}.strategy-position-bar .segmented button{min-height:44px;padding:8px;font-size:11px;line-height:1.3;color:#4d663b}.strategy-position-bar .segmented button[aria-pressed=true]{background:#f8f9ec;color:#304d2b}.strategy-position-bar>span{max-width:95px;color:#526442;font-size:8px;line-height:1.5}
  .play-intro{margin:0 0 16px;padding:0;align-items:center;flex-wrap:wrap;gap:8px}.bot-profile{gap:10px}.bot-profile strong{font-size:20px}.bot-profile p{font-size:11px;max-width:none}.local-badge{font-size:10px;max-width:none;padding:0}.game-panel>h2{font-size:29px;margin-top:8px}.game-panel>h2 br{display:none}
  .game-message{margin-top:8px;min-height:32px;gap:10px}.game-message p{font-size:17px;line-height:1.4}.game-settings{margin-top:16px}.game-record{margin-top:20px}#game-origin{max-width:65%;text-align:right;overflow-wrap:anywhere}
  .storage-notice{margin-bottom:10px}.resource-strip{margin-top:24px}
}
@media screen and (min-width:960px) and (min-height:640px){
  .board-panel{--workspace-board-size:clamp(376px,calc(100vh - 340px),560px)}
}
@supports (height:100svh){
  @media screen and (min-width:960px) and (min-height:640px){
    .board-panel{--workspace-board-size:clamp(376px,calc(100svh - 340px),560px)}
  }
}
@media screen and (max-width:959px){
  html{scroll-padding-top:12px}.site-header{position:static;padding-inline:18px;gap:12px}.wrap{width:calc(100% - 36px)}.motion-button #motion-label{display:none}.brand{font-size:25px}.mode-nav a{padding-inline:16px}
  .study-grid,.room-grid{grid-template-columns:1fr}.board-panel{padding:12px 20px 18px}.lesson-panel{padding:22px 26px}.lesson-panel h2{max-width:26ch}.lesson-picker,.sample-picker,.sample-picker.strategy-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.sample-picker:not(.strategy-picker){grid-template-columns:repeat(6,minmax(0,1fr))}.lesson-card{padding:8px;grid-template-columns:20px 1fr}.lesson-card strong{font-size:16px}.strategy-picker .sample-card strong{font-size:14px}.sample-card,.strategy-picker .sample-card{padding:6px;gap:5px}.sample-card .sample-icon{display:none}
  .intro-art{right:110px;width:110px}.sample-panel>.sample-sequence{margin-top:12px}
}
@media screen and (max-width:600px){
  html{scroll-padding-top:8px}.wrap{width:calc(100% - 16px)}
  .site-header{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px 8px;padding:4px 8px;min-height:0;width:100%}.brand{grid-column:1/-1;min-height:28px;font-size:25px;gap:8px}.petal-mark{width:28px}.mode-nav{grid-column:1;grid-row:2;min-width:0;width:100%;padding:2px;gap:0;justify-content:stretch}.mode-nav a{flex:1;min-width:0;min-height:44px;font-size:11px;gap:5px;padding:8px 7px}.mode-nav a>span{font-size:16px}.motion-button{grid-column:2;grid-row:2;min-height:44px;padding:8px}
  .intro-row{min-height:32px;padding:5px 0;gap:0}.intro-row h2{font-size:18px;line-height:1.2}.intro-art,.workspace-progress{display:none}
  .lesson-picker,.sample-picker,.sample-picker.strategy-picker{grid-template-columns:repeat(5,minmax(136px,1fr));gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#bcc9aa transparent;padding:0 0 6px;margin:0 0 6px}.sample-picker:not(.strategy-picker){grid-template-columns:repeat(6,minmax(128px,1fr))}
  .lesson-card{min-height:52px;padding:8px;grid-template-columns:20px 1fr;scroll-snap-align:start}.lesson-card strong{font-size:16px;line-height:1.2}.lesson-card-number{font-size:13px}.sample-card,.strategy-picker .sample-card{min-height:52px;scroll-snap-align:start;padding:3px 9px;gap:6px}.strategy-picker .sample-card strong{font-size:14px;line-height:1.15}.sample-card strong{font-size:11px}.sample-card small,.strategy-picker .sample-card small{font-size:8px}
  .study-topline{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;min-height:0}
  .study-shell,.room-shell{border-radius:12px}.board-panel{padding:8px 8px 16px}.board-frame{padding:6px}.board-frame:after{inset:3px}.board-meta{margin-bottom:4px;gap:8px}.board-meta .text-button{font-size:10px;padding-inline:4px}.board-tools{gap:6px}.live-status{font-size:9px;padding:6px 8px}
  #view-practice .board-meta{flex-wrap:wrap;gap:4px}.mobile-sample-brief{flex-basis:100%}.mobile-sample-brief p{font-size:17px;line-height:1.3}.practice-position-tools .live-status{padding:4px 8px;font-size:9px}
  #step-caption{font-size:17px;line-height:1.3}.visual-caption{gap:8px;margin-top:8px}#caption-number{width:22px;height:22px;font-size:11px}.playback-main .play-button{font-size:11px;gap:6px;padding-inline:6px}.playback-main .play-button #play-icon{width:20px;height:20px}.playback-step{flex-basis:44px;width:44px;min-height:44px}
  .board-footer{font-size:9px;gap:8px}.board-footer>span:last-child{font-size:9px;max-width:55%}.board-actions .dark-button{padding:8px;font-size:11px}#sample-feedback{padding:10px;gap:8px}#sample-feedback strong{font-size:12px}#sample-feedback p{font-size:11px;line-height:1.5}.game-message p{font-size:17px}
  .lesson-panel{padding:20px 16px}.lesson-panel h2{font-size:28px;max-width:none}.lesson-kicker>span{font-size:8px}.step-picker{gap:6px}.step-picker button{width:44px;height:44px;min-width:44px}.step-why{font-size:19px}.sample-panel>.lesson-kicker{display:flex}.sample-panel>h2{display:block}.sample-panel>.sample-task{display:none}.strategy-position-bar{flex-wrap:wrap}.strategy-position-bar>span{max-width:none}.strategy-position-bar .segmented{flex-basis:200px}.practice-collection-bar .segmented button{font-size:11px}.bot-profile strong{font-size:20px}.bot-profile p{font-size:11px}.local-badge{font-size:10px}
}
@media screen and (max-height:639px){html{scroll-padding-top:8px}.site-header{position:static}.board-panel{--workspace-board-size:560px}}
@media screen {
  /* An inset ring stays visible inside the horizontal, overflow-clipped concept strip. */
  .lesson-card:focus-visible,.sample-card:focus-visible{outline:3px solid #30513e;outline-offset:-3px;box-shadow:inset 0 0 0 5px #fff8d8}
}
@media screen and (max-width:600px){
  /* Keep the game's position origin visible even in the compact single-column layout. */
  #view-play .study-topline{position:static;width:auto;height:auto;min-height:24px;padding:5px 10px;margin:0;overflow:visible;clip:auto;white-space:normal;border-bottom:1px solid #b9c5a12a}
}
@media screen and (min-width:960px) and (min-height:640px){
  /* Keep the longest initial goal and core actions near the desktop board. Longer feedback still grows normally. */
  #view-practice .board-panel{padding-top:8px}#view-practice .board-meta{margin-bottom:2px}
  #sample-feedback{margin-top:8px;padding-block:8px}#view-practice .board-actions{margin-top:6px}
}
/* Guided paths share the existing board; optional thoughts expand in normal document flow. */
.branch-controls.is-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px}
.branch-controls.is-flow .small-button{min-width:0;padding-inline:8px;white-space:normal;line-height:1.3}
.flow-return{display:block;min-height:44px;margin:5px auto 0;font-size:12px;color:#e4ead7}
.flow-question{margin-top:12px;padding:14px}
#flow-question-title{font-family:Georgia,serif;font-size:18px;line-height:1.45;color:#4d673a;letter-spacing:-.015em}
#flow-question-kind{font-size:9px;color:#526442;margin-bottom:5px}
#flow-question-feedback{font-size:12px;line-height:1.65;margin-top:9px;color:#526442}
#flow-question-skip{font-size:12px;min-height:44px;color:#4f713b}
.flow-question .prediction-choices{margin-top:10px}

/* A compact route into learning. The board-first layout stays unchanged. */
.path-open-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 12px;border:1px solid #b9c9af;border-radius:100px;background:#edf2e5;color:#31533e;font-size:12px;white-space:nowrap}
.path-open-button:hover{background:#e2ebd7}.path-open-button>span{font-size:20px;line-height:1}
.path-open-button[aria-expanded=true]{background:#315649;color:#fff9e9}
html.path-open{overflow:hidden}
.learning-path-dialog{width:min(760px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:0;border:1px solid #bdccb2;border-radius:18px;background:#f7f5ef;color:#2e443b;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 24px 90px #102b3155}
.learning-path-dialog::backdrop{background:#10291f99}
.path-dialog-heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px 14px;border-bottom:1px solid #d8dfd0;background:#f7f5ef}
.path-dialog-heading .eyebrow{color:#526a46;font-size:9px}.path-dialog-heading h2{margin-top:4px;font-size:32px;line-height:1.1}
.path-close-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:72px;padding:8px 12px;border:1px solid #c4ceb8;border-radius:8px;background:#eef1e7;font-size:12px}.path-close-button>span{font-size:23px;line-height:1}
.path-intro{display:grid;grid-template-columns:minmax(0,1fr) 42%;align-items:center;gap:16px;padding:16px 24px}
.path-intro>div{min-width:0}.path-intro>img{width:100%;height:105px;object-fit:cover;border-radius:12px;object-position:55% 65%}
#learning-path-description{font-family:Georgia,serif;font-size:19px;line-height:1.4;color:#425d40}
#learning-path-summary{font-size:11px;line-height:1.65;margin-top:9px;color:#54674d}
.learning-path-list{list-style:none;margin:0;padding:0 24px;display:grid;gap:10px}
.path-concept{display:grid;grid-template-columns:minmax(0,1fr) 175px;gap:10px 18px;padding:15px 16px;border:1px solid #d2dcc6;border-radius:12px;background:#fffdf5;min-width:0}
.path-concept-heading{grid-column:1/-1;display:flex;align-items:center;gap:10px}.path-concept-heading h3{font-size:24px;line-height:1.2;letter-spacing:-.035em}
.path-concept-number{display:grid;place-items:center;flex-shrink:0;width:26px;height:26px;background:#e8eddf;border-radius:50%;font-size:10px;color:#526a46}
.path-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0}
.path-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-height:84px;min-width:0;padding:7px;border:1px solid transparent;border-radius:8px;text-align:left;background:#f2f3ea;line-height:1.3;color:#41583b}
.path-step:hover{background:#e5ecda}.path-step[aria-current=step]{border-color:#758d60;box-shadow:inset 0 0 0 1px #758d60}
.path-step-mark{display:grid;place-items:center;width:22px;height:22px;border:1px solid #adbca0;border-radius:50%;font-size:14px;line-height:1;color:#48653e;background:#fafbf3}
.path-step[data-complete=true] .path-step-mark{background:#426841;border-color:#426841;color:#fffced}
.path-step-label{font-size:11px;font-weight:600}.path-step-status{font-size:10px;color:#58694f;line-height:1.3}
.path-suggestion{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;min-height:60px;min-width:0;padding:12px;border-radius:9px;background:#35593f;color:#fff9e7;text-align:left;line-height:1.35}.path-suggestion:hover{background:#294d33}
.path-suggestion small{font-size:8px;letter-spacing:.09em;color:#d3e2bf}.path-suggestion>span{font-size:13px;font-weight:600}
.path-footnote{padding:16px 24px 20px;font-size:11px;line-height:1.6;color:#596b50}
.observation-companion{float:right;width:64px;height:64px;object-fit:contain;margin:0 0 5px 10px;pointer-events:none}
.flow-question:has(.observation-companion:not([hidden])) .prediction-choices{clear:both}
@media screen and (max-width:959px){.site-header{gap:10px}.mode-nav a{padding-inline:12px}.motion-button #motion-label{display:none}.path-open-button{padding-inline:10px}}
@media screen and (max-width:600px){
  .site-header{grid-template-columns:minmax(0,1fr) auto 44px;gap:4px 6px}.brand{grid-column:1;grid-row:1}.path-open-button{grid-column:2;grid-row:1;min-height:44px;padding:6px 10px;font-size:11px}.motion-button{grid-column:3;grid-row:1;min-height:44px;padding:6px}.mode-nav{grid-column:1/-1;grid-row:2}
  .learning-path-dialog{width:calc(100% - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:13px}
  .path-dialog-heading{padding:14px 14px 12px}.path-dialog-heading h2{font-size:28px}.path-intro{grid-template-columns:minmax(0,1fr) 33%;gap:10px;padding:13px 14px}.path-intro>img{height:96px;object-position:60% 50%;border-radius:9px}
  #learning-path-description{font-size:17px}#learning-path-summary{font-size:10px}.learning-path-list{padding:0 12px;gap:9px}.path-concept{grid-template-columns:minmax(0,1fr);gap:10px;padding:13px 11px}.path-concept-heading{grid-column:1}.path-concept-heading h3{font-size:22px}.path-steps{gap:5px}.path-step{padding:7px 5px;min-height:86px}.path-step-label{font-size:11px}.path-step-status{font-size:9px}
  .path-suggestion{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:10px 12px}.path-suggestion small{font-size:8px}.path-suggestion>span{font-size:12px}.path-footnote{padding:14px;font-size:10px}
}
@media print{.path-open-button,.learning-path-dialog,.observation-companion{display:none!important}}

/* Optional readiness is separate from the five foundation tracks. */
.readiness-start{display:flex;align-items:center;gap:12px;margin:-4px 0 18px;color:#52644c;font-size:12px;line-height:1.5}.readiness-start>button{min-height:44px;color:#315c40;font-weight:600;white-space:nowrap}
.path-readiness{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 24px 18px;padding:15px 16px;border:1px dashed #97ac82;border-radius:12px;background:#edf1e6}.path-readiness h3{font-size:24px;margin:5px 0}.path-readiness .eyebrow{font-size:11px}.path-readiness p:not(.eyebrow){font-size:12px;line-height:1.55}.path-readiness button{flex-shrink:0;min-height:44px;font-size:12px}
html.readiness-open{overflow:hidden}
.readiness-dialog{width:min(1050px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:0;border:1px solid #bdccb2;border-radius:18px;background:#f7f5ef;color:#2e443b;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 24px 90px #102b3155}.readiness-dialog::backdrop{background:#10291f99}.readiness-dialog .path-dialog-heading{z-index:5}.readiness-dialog .path-dialog-heading .eyebrow{font-size:11px;line-height:1.4}.readiness-dialog .path-dialog-heading h2{font-size:30px}
.readiness-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px 10px}.readiness-intro>p{font-family:Georgia,serif;font-size:20px}.readiness-intro .segmented{max-width:420px;width:auto;flex:1}.readiness-intro .segmented button{min-height:44px;padding:9px 12px;font-size:12px;color:#455e38}
.readiness-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:24px;padding:12px 24px 20px}.readiness-board-panel{min-width:0;padding:0!important}.readiness-board-panel .board-aura{margin:0}.readiness-panel{min-width:0;padding:0}.readiness-panel>h3{font-size:30px;line-height:1.1;margin:8px 0 12px}.readiness-panel>.eyebrow{font-size:11px}.readiness-panel>p{font-size:14px;line-height:1.55}.readiness-panel .quiet-note{font-size:12px;line-height:1.6;color:#52664a}.readiness-panel>.text-button{min-height:44px;margin-top:8px}.readiness-panel>.primary-light{width:100%;margin-top:16px;min-height:48px}.readiness-panel .prediction-panel{margin:16px 0}.readiness-panel .why-details{margin:14px 0}.readiness-panel .why-details summary{color:#52664a}.readiness-panel .why-details p{font-size:13px;line-height:1.65;margin:10px 0}.readiness-panel .observation-companion{width:60px;height:60px}.readiness-panel .prediction-choices{clear:both}.readiness-panel .prediction-choices button{min-height:44px;font-size:13px}
.readiness-clips{display:grid;gap:7px;margin:14px 0}.readiness-clips button{min-height:44px;padding:10px 12px;text-align:left;border:1px solid #bbcbb0;border-radius:8px;background:#fffdf5;font-size:13px;line-height:1.35}.readiness-clips button[aria-pressed=true]{background:#365b42;color:#fff8e8;border-color:#365b42}.readiness-caption{min-height:78px;padding:14px 0 9px;font-size:14px;line-height:1.5}.readiness-caption strong{display:block;font-size:12px;color:#d5e8b9;margin-bottom:4px}.readiness-caption strong:empty{display:none}
.readiness-step-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}.readiness-step-controls>span{text-align:center;font-size:12px;line-height:1.35}.readiness-step-controls>button{min-height:44px;padding:10px 12px;font-size:12px;line-height:1.35}.readiness-board-panel .board-actions{margin-top:12px;gap:8px}.readiness-board-panel .board-actions>button{font-size:12px;min-height:44px}.readiness-board-panel .sample-guide-key{font-size:11px;line-height:1.5;min-height:17px;margin-top:8px}.readiness-board-panel .board-meta{min-height:40px}.readiness-board-panel .text-position{margin-top:8px}.readiness-board-panel .text-position p{overflow-wrap:anywhere}.readiness-storage{margin:8px 24px;padding:10px;border:1px solid #b78666;border-radius:8px;font-size:12px;line-height:1.5}.readiness-footnote{padding:0 24px 22px;font-size:12px;line-height:1.65;color:#53664c}.readiness-panel #readiness-progress,.readiness-panel #exchange-progress{margin-top:16px;padding-top:12px;border-top:1px solid #d1dbc5;font-size:12px}.readiness-dialog button:disabled{opacity:.45;cursor:default}
@media screen and (max-width:760px){.readiness-grid{grid-template-columns:minmax(0,1fr);gap:20px;max-width:600px;margin-inline:auto}.readiness-intro{flex-direction:column;align-items:stretch;gap:10px}.readiness-intro .segmented{max-width:none;width:100%}.readiness-panel>h3{font-size:28px}.readiness-clips{grid-template-columns:repeat(2,minmax(0,1fr))}.readiness-step-controls>button{max-width:45%}.readiness-start{margin-top:0;gap:8px}.readiness-start>span{font-size:12px}.path-readiness{align-items:stretch;flex-direction:column;gap:10px}.path-readiness button{width:100%}}
@media screen and (max-width:600px){.readiness-dialog{width:calc(100% - 12px);max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);border-radius:12px}.readiness-dialog .path-dialog-heading{padding:12px}.readiness-dialog .path-dialog-heading h2{font-size:26px}.readiness-dialog .path-dialog-heading .eyebrow{font-size:11px}.readiness-intro{padding:12px 12px 4px}.readiness-intro>p{font-size:18px}.readiness-intro .segmented button{padding:8px 5px;font-size:12px}.readiness-grid{padding:10px 12px 18px;gap:18px}.readiness-footnote{padding:0 12px 18px}.readiness-storage{margin:8px 12px}.path-readiness{margin:0 12px 14px;padding:13px 11px}.readiness-step-controls{flex-wrap:wrap}.readiness-step-controls>span{flex:1;min-width:65px}.readiness-step-controls>button{padding:8px;max-width:43%}}
@media screen and (max-height:500px){.readiness-dialog .path-dialog-heading{position:static}.readiness-dialog{max-height:calc(100vh - 8px);max-height:calc(100dvh - 8px)}}
@media print{.readiness-start,.readiness-dialog,.path-readiness{display:none!important}}

/* Stable board-edge controls, never on top of a square or chasing a pointer. */
.guided-playback{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin:0 0 8px;padding:7px 9px;border:1px solid #b5c99455;border-radius:9px;background:#1f493e;color:#f2f5e7}
.guided-playback-status{font-size:11px;line-height:1.4;flex:1 1 125px}
.guided-playback-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.guided-playback .dark-button{min-height:44px;min-width:44px;padding:8px 10px;font-size:11px;line-height:1.25;white-space:normal}
.guided-playback button:focus-visible{outline:3px solid #f5de9d;outline-offset:2px}
.guided-playback button[aria-pressed=false]{border-color:#e7d49c;background:#4a593c}
@media screen and (max-width:600px){.guided-playback{gap:4px;padding:4px 6px;margin-bottom:6px}.guided-playback-status{font-size:10px;flex-basis:100%}.guided-playback-actions{width:100%;gap:4px}.guided-playback .dark-button{font-size:11px;padding-inline:8px;flex:1}}
@media print{.guided-playback{display:none!important}}

/* The garden: a cinematic map, not a grid of lesson cards. */
.tree-back-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12px;color:#3f5e42;font-weight:700}.tree-back-link span{font-size:20px}.compact-overview-link{min-height:44px;background:transparent;font-size:11px;text-decoration:underline;text-underline-offset:4px;color:#5b705d}.site-header .mode-nav{flex-shrink:0}.site-header .mode-nav a{padding-inline:18px}
html[data-mode=path] body{background:#10231d;color:#f4f1dc}
html[data-mode=path] .site-header{border-color:#b7c5a02b;background:#10231d}
html[data-mode=path] .site-header .mode-nav{background:#213a2d;border-color:#a6bd8040}
html[data-mode=path] .site-header .mode-nav a:hover{background:#38523a;color:#eff1d5}
html[data-mode=path] .motion-button{color:#bdcdb2}
html[data-mode=path] .brand small,html[data-mode=path] .resource-strip p,html[data-mode=path] .about-section,html[data-mode=path] .about-section summary,html[data-mode=path] .site-footer,html[data-mode=path] .product-link,html[data-mode=path] .compact-overview-link{color:#b9cbb0}
html[data-mode=path] .resource-strip,html[data-mode=path] .site-footer{border-color:#a5ba8b40}
html[data-mode=path] .site-header .brand,html[data-mode=path] .site-header .mode-nav a{color:#e1e8cb}
html[data-mode=path] .site-header .mode-nav a[aria-current=page]{background:#d3dfb9;color:#173025}
.skill-tree-view{padding:15px 0 38px}
.tree-world{position:relative;isolation:isolate;overflow:hidden;border:1px solid #a7bc8540;border-radius:30px;background:#10251f;box-shadow:0 28px 80px #0005;color:#f4f1dc}
.tree-world:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#0c211b25 0%,#0c211b30 35%,#0c211be8 80%,#0b1b16),url('assets/pawnpetal-cinematic-forest-v1.webp') center top/100% auto no-repeat;pointer-events:none}
.tree-world:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 30%,transparent 10%,#06170e4a 75%);box-shadow:inset 0 0 100px #06150d66;pointer-events:none}
.tree-hud{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:35px 45px 15px}
.tree-hud-title{min-width:0}
.tree-hud .eyebrow{color:#c4d3a9;font-size:9px;letter-spacing:.22em;margin-bottom:8px}
.tree-hud h1{overflow-wrap:anywhere;font-size:44px;line-height:1.05;letter-spacing:-.025em;color:#f5efcf;margin:0;text-shadow:0 2px 25px #0009}
.tree-hud h1 em{color:#d7c88d}
.tree-progress{display:flex;gap:25px;flex-shrink:0}
.tree-progress>div{display:grid;grid-template-columns:auto;gap:2px;text-align:center;min-width:42px}
.tree-progress strong{font-size:20px;line-height:1.2;font-weight:500;color:#f1efcf;font-variant-numeric:tabular-nums}
.tree-progress>div>span:not(.tree-progress-leaves){font-size:10px;color:#c5d2b7}
.tree-progress-leaves{display:flex;justify-content:center;gap:3px;margin-top:6px}
.tree-progress-leaf{width:6px;height:3px;border:1px solid #a7b99170;border-radius:3px;background:#142b22}
.tree-progress-leaf[data-complete=true]{background:#d4dcaa;border-color:#d4dcaa;box-shadow:0 0 5px #d4dcaa70}
.tree-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 45px 10px}
.tree-toolbar p{font-size:12px;color:#c4d0b8;margin:0}
.tree-next-button{min-height:44px;max-width:55%;padding:10px 17px;border:1px solid #d0c4898c;border-radius:24px;background:#21392cdb;color:#efe4b9;font-size:11px;line-height:1.4;box-shadow:0 0 24px #c9b76813;transition:background .2s,box-shadow .2s}
.tree-next-button:hover{background:#344c35;box-shadow:0 0 28px #d2c59530}
.tree-next-button:focus-visible,.tree-resume button:focus-visible,.tree-tactics summary:focus-visible,.tree-tactic-action:focus-visible{outline:3px solid #f6d58c;outline-offset:5px}
.tree-garden{--tree-mobile:0;position:relative;isolation:isolate;margin:0 auto;max-width:940px;padding:34px 58px 38px}
.tree-nodes{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:164px;row-gap:65px;align-items:start;list-style:none;margin:0;padding:0;z-index:1}
.tree-node{position:relative;justify-self:center;min-width:0;width:188px;margin:0;padding:0;border:0;background:none;box-shadow:none}
.tree-node[data-node=readiness],.tree-node[data-node=piece-improvement],.tree-node[data-node=endgame]{grid-column:1/-1}
.tree-node[data-node=centre-control],.tree-node[data-node=pawn-structure],.tree-node[data-node=exchange]{grid-column:1}
.tree-node[data-node=development-and-safety],.tree-node[data-node=piece-activity],.tree-node[data-node=opponent-plans]{grid-column:2}
.tree-node-button{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#ececcf;text-align:center;cursor:pointer;touch-action:manipulation}
.tree-orb{position:relative;display:grid;place-items:center;isolation:isolate;width:132px;height:132px;flex-shrink:0;border:1px solid #d7dcaa85;border-radius:50%;background:radial-gradient(circle at 48% 35%,#687954c2,#243d2eef 64%,#0d211a);box-shadow:inset 0 0 28px #cfdda322,0 0 0 5px #b4cb8f0b,0 0 38px #b1d78927,0 10px 24px #0007;transition:box-shadow .22s,border-color .22s,background .22s;pointer-events:none}
.tree-orb:before{content:'';position:absolute;inset:-8px;border:1px solid #b8c89525;border-radius:50%;pointer-events:none}
.tree-orb:after{content:'';position:absolute;inset:-12px;border:1px solid transparent;border-radius:50%;pointer-events:none}
.tree-topic-art{position:relative;width:122%;height:122%;max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 7px #061b10aa);z-index:1}
.tree-node-label{display:block;margin-top:21px;max-width:100%;font-family:var(--serif,Georgia,serif);font-size:21px;line-height:1.15;font-weight:500;color:#f1edcf;text-shadow:0 2px 6px #000,0 0 16px #0b1c17;overflow-wrap:anywhere}
.tree-node-summary{display:block;margin-top:6px;font-size:9px;line-height:1.3;letter-spacing:.06em;color:#b9c9aa;text-shadow:0 1px 5px #000}
.tree-bud-petals{position:absolute;z-index:2;bottom:-5px;display:flex;gap:6px;align-items:center;left:50%;transform:translateX(-50%)}
.tree-petal{display:block;width:8px;height:8px;border:1px solid #bfcba08c;border-radius:50%;background:#14281f;box-shadow:0 2px 5px #0008}
.tree-petal[data-complete=true]{background:#e4d79e;border-color:#f2e7ba;box-shadow:0 0 9px #e8d796a0}
.tree-node[data-suggested=true] .tree-orb{border-color:#f1d390;box-shadow:inset 0 0 32px #e8cb6b26,0 0 0 5px #e1c57811,0 0 45px #e7c75b45,0 12px 28px #0008}
.tree-node[data-suggested=true] .tree-orb:before{border-color:#e9cd795c}
.tree-node[data-suggested=true] .tree-node-summary{color:#efdaa1}
.tree-node[data-complete=true] .tree-orb{border-color:#dbe7b0;box-shadow:inset 0 0 26px #d2e4b22a,0 0 34px #b5d58d35,0 10px 24px #0007}
.tree-node[data-complete=true] .tree-node-summary{color:#d6e7b5}
.tree-node-button:hover .tree-orb,.tree-node:focus-within .tree-orb{border-color:#fff0bb;box-shadow:inset 0 0 30px #eff0bc33,0 0 0 6px #d9e4a414,0 0 55px #dbe59a55,0 10px 30px #0009}
.tree-node-button:focus-visible{outline:0}.tree-node-button:focus-visible .tree-orb:before{border:3px solid #f8dea1;inset:-9px}
.tree-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.tree-connection path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tree-edge-ground{stroke:#95be77;stroke-width:9;opacity:.19;filter:blur(3px)}
.tree-edge-line{stroke:#b1c88a;stroke-width:1.7;opacity:.72;filter:drop-shadow(0 0 4px #c0dfa45c)}
.tree-edge-port{fill:#c9dca4;stroke:#e3edc3;stroke-width:.6;filter:drop-shadow(0 0 4px #d5e9a9)}
.tree-connection[data-kind=optional] .tree-edge-line{stroke:#c5b786;stroke-dasharray:3 7;opacity:.65}
.tree-connection[data-kind=optional] .tree-edge-ground{stroke:#c3ad70;opacity:.13}
.tree-connection[data-source-complete=true] .tree-edge-line{stroke:#e1e9ad;opacity:1;stroke-width:2.1}
.tree-connection[data-suggested=true] .tree-edge-line{stroke:#efcf88;opacity:1;filter:drop-shadow(0 0 6px #edcf8799)}
.tree-connection[data-suggested=true] .tree-edge-ground{stroke:#e8cb82;opacity:.3}
.tree-connection[data-focused=true] .tree-edge-line{stroke:#eff2c6;opacity:1;filter:drop-shadow(0 0 6px #ddebaf99)}
.tree-connection.tree-new-growth .tree-edge-line{animation:tree-branch-bloom 1s ease-out 1}
@keyframes tree-branch-bloom{0%{opacity:.5}40%{opacity:1;stroke-width:3;filter:drop-shadow(0 0 10px #f4dfa9)}100%{opacity:1}}
.tree-map-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px;color:#b6c7aa;font-size:9px;letter-spacing:.02em;padding:5px 20px 24px}
.tree-map-key{display:inline-flex;align-items:center;gap:8px}.tree-map-key i{width:20px;border-top:1px solid #bdce9c}.tree-map-key-optional i{border-top-style:dashed;border-color:#c6b989}
.tree-resume{text-align:center;padding:0 20px 20px}.tree-resume button{min-height:44px;border:0;border-bottom:1px solid #b2c59655;border-radius:0;background:none;color:#dce6c4;font-size:12px}
.tree-tactics{margin:0 35px 20px;border-top:1px solid #b5c59a29;border-bottom:1px solid #b5c59a29;background:#10251c55}
.tree-tactics summary{display:flex;align-items:center;gap:15px;min-height:59px;padding:14px 10px;cursor:pointer;list-style:none;color:#e0e6c9}.tree-tactics summary::-webkit-details-marker{display:none}.tree-tactics summary strong{font-size:14px;font-weight:500}.tree-tactics summary span{font-size:10px;color:#b2c7a7}.tree-tactics summary span:last-child{margin-left:auto;font-size:20px}
.tree-tactics-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0 10px 18px}.tree-tactic-action{display:flex;flex-direction:column;gap:5px;min-height:54px;width:100%;padding:10px 12px;background:#1a3427;border:1px solid #93ac7140;border-radius:10px;color:#dde5c3;text-align:left}.tree-tactic-label{font-size:12px}.tree-tactic-status{font-size:9px;color:#b1c49b}
.tree-footnote{margin:0;padding:0 25px 24px;text-align:center;font-size:9px;line-height:1.5;color:#a3b69b}
.tree-petal.tree-new-growth,.tree-progress-leaf.tree-new-growth{animation:tree-marker-bloom .8s ease-out 1}
.tree-node.tree-new-growth .tree-orb:after{border-color:#e8d39a;animation:tree-node-bloom 1s ease-out 1}
@keyframes tree-marker-bloom{0%{box-shadow:0 0 0 #e5dfaa;opacity:.4}45%{box-shadow:0 0 17px #e5dfaa;opacity:1}100%{opacity:1}}
@keyframes tree-node-bloom{0%{opacity:0;transform:scale(.9)}35%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@media(max-width:1100px){.tree-hud{padding:28px 30px 15px}.tree-toolbar{padding-inline:30px}.tree-garden{padding-inline:40px}.tree-nodes{column-gap:125px;row-gap:60px}.tree-node{width:172px}.tree-orb{width:122px;height:122px}.tree-node-label{font-size:20px}}
@media(max-width:900px){.tree-hud{gap:20px}.tree-hud h1{font-size:37px}.tree-progress{gap:17px}.tree-garden{padding-inline:28px}.tree-nodes{column-gap:85px;row-gap:58px}.tree-node{width:155px}.tree-orb{width:112px;height:112px}.tree-node-label{font-size:19px}.site-header{gap:18px}.site-header .mode-nav a{padding-inline:13px}}
@media(max-width:650px){.tree-back-link{margin-top:9px}.skill-tree-view{padding-top:6px}.tree-world{border-radius:22px}.tree-world:before{background-size:auto 720px;background-position:center top}.tree-hud{padding:25px 20px 12px;align-items:flex-start;gap:12px}.tree-hud h1{font-size:32px;max-width:6.5em}.tree-hud .eyebrow{font-size:8px;letter-spacing:.13em}.tree-progress{gap:13px;padding-top:4px}.tree-progress strong{font-size:17px}.tree-progress>div{min-width:30px}.tree-progress>div>span:not(.tree-progress-leaves){font-size:9px}.tree-progress-leaves{gap:2px}.tree-progress-leaf{width:4px;height:3px}.tree-toolbar{display:block;padding:0 20px 8px}.tree-toolbar p{font-size:10px}.tree-next-button{margin-top:12px;max-width:100%;font-size:10px;min-height:44px}.tree-garden{--tree-mobile:1;padding:25px 23px 27px}.tree-nodes{column-gap:48px;row-gap:49px}.tree-node{width:132px;max-width:100%}.tree-orb{width:100px;height:100px}.tree-node-label{font-size:17px;margin-top:18px}.tree-node-summary{font-size:8px;margin-top:5px}.tree-petal{width:7px;height:7px}.tree-bud-petals{gap:5px}.tree-edge-line{stroke-width:1.4}.tree-edge-ground{stroke-width:7;filter:blur(2px)}.tree-edge-port{r:2px}.tree-map-footer{gap:9px 15px;font-size:8px}.tree-tactics{margin-inline:20px}.tree-tactics-list{grid-template-columns:repeat(2,minmax(0,1fr))}.site-header .mode-nav{justify-content:center}.site-header .mode-nav a{flex:1;padding:9px 11px;font-size:12px}}
@media(max-width:400px){.tree-hud{padding:22px 15px 11px;gap:8px}.tree-hud h1{font-size:28px}.tree-progress{gap:9px}.tree-progress strong{font-size:15px}.tree-progress>div{min-width:26px}.tree-toolbar{padding-inline:15px}.tree-garden{padding-inline:12px}.tree-nodes{column-gap:36px;row-gap:46px}.tree-node{width:110px}.tree-orb{width:84px;height:84px}.tree-node-label{font-size:16px;line-height:1.18}.tree-node-summary{font-size:8px}.tree-orb:before{inset:-6px}.tree-tactics{margin-inline:15px}.tree-tactics-list{grid-template-columns:minmax(0,1fr)}.tree-map-footer{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.skill-tree-view *,.skill-tree-view *:before,.skill-tree-view *:after{animation:none!important;transition:none!important}}
.effects-paused .skill-tree-view *,.effects-paused .skill-tree-view *:before,.effects-paused .skill-tree-view *:after{animation:none!important;transition:none!important}
@media(forced-colors:active){.tree-world,.tree-orb,.tree-node-button,.tree-next-button,.tree-tactics,.tree-tactic-action{background:Canvas;color:CanvasText;box-shadow:none;border-color:CanvasText}.tree-world:before,.tree-world:after,.tree-edge-ground{display:none}.tree-topic-art{filter:none}.tree-node-label,.tree-node-summary,.tree-toolbar p,.tree-hud h1,.tree-hud h1 em,.tree-progress strong,.tree-progress>div>span,.tree-map-footer,.tree-footnote{color:CanvasText;text-shadow:none}.tree-edge-line,.tree-connection[data-kind=optional] .tree-edge-line,.tree-connection[data-source-complete=true] .tree-edge-line,.tree-connection[data-suggested=true] .tree-edge-line{stroke:CanvasText;filter:none;opacity:1}.tree-edge-port{fill:Canvas;stroke:CanvasText;filter:none}.tree-node-button:focus-visible .tree-orb:before{border-color:Highlight}.tree-petal[data-complete=true],.tree-progress-leaf[data-complete=true]{background:Highlight;border-color:Highlight;box-shadow:none}}

/* Optional Learn help and a single exact-position comparison lens. */
.prediction-panel .prediction-intro,.prediction-notice{font-size:12px;line-height:1.6;color:#526442;margin-top:10px}.prediction-panel>.eyebrow{font-size:10px;color:#526442;margin-bottom:8px}.prediction-help{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.prediction-help .small-button{min-height:44px;font-size:12px}.prediction-help [aria-disabled=true]{opacity:.7}.prediction-panel #prediction-close{min-height:44px}.prediction-notice{border-left:2px solid #a8ba8f;padding-left:12px;margin-top:18px}
.lesson-comparison{max-width:590px;margin:10px auto 0}.lesson-comparison>.text-button{min-height:44px;color:#dce6bd;font-size:12px;text-align:left}.comparison-panel{border:1px solid #c5d2a54d;border-radius:10px;padding:14px;background:#183629;color:#e4ecd3}.comparison-intro{font-size:12px;line-height:1.6}.comparison-switch{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.comparison-switch button{min-height:44px;flex:1;padding:10px 12px;border:1px solid #abbc9255;border-radius:6px;background:transparent;color:#e4ecd3;font-size:12px;overflow-wrap:anywhere}.comparison-switch button[aria-pressed=true]{background:#dce6bd;color:#29482f;border-color:#dce6bd}.comparison-facts{margin:0;font-size:12px;line-height:1.6}.comparison-facts>div+div{margin-top:8px}.comparison-facts dt{font-weight:600;color:#e4ecd3}.comparison-facts dd{margin:2px 0 0;color:#cedac0}.comparison-key{font-size:11px;line-height:1.6;color:#cedac0;margin-top:12px}.comparison-panel>.text-button{min-height:44px;color:#e4ecd3;font-size:12px;margin-top:8px}.comparison-phase{max-width:590px;margin:0 auto 9px;color:#e4ecd3;font-size:11px;letter-spacing:.06em;font-weight:600}.chess-board .square.change-departure:after,.chess-board .square.change-arrival:after{content:'';position:absolute;inset:5%;pointer-events:none;border:3px dashed #203e2f;box-shadow:0 0 0 1px #f4ebcb;z-index:1;border-radius:3px}.chess-board .square.change-arrival:after{border-style:solid}.chess-board.snapshot-static .chess-piece,.chess-board.snapshot-static .piece-art,.chess-board.snapshot-static .piece-ground{transition:none!important;animation:none!important}.chess-board.snapshot-static .chess-piece.is-captured{visibility:hidden}.lesson-comparison button:focus-visible{outline:3px solid #d9bb65;outline-offset:3px}.prediction-panel button:focus-visible{outline:3px solid #365337;outline-offset:3px}.board-tools #annotations-toggle:disabled{opacity:.8;cursor:default}
@media(max-width:480px){.comparison-panel{padding:12px}.comparison-switch button{padding:10px 8px}.prediction-help .small-button{flex:1 1 120px}.comparison-facts dd,.comparison-key{overflow-wrap:anywhere}}
#view-learn .lesson-comparison,#view-learn .comparison-phase{width:min(100%,var(--workspace-board-size,590px));max-width:590px}#view-learn .board-meta{flex-wrap:wrap}#view-learn .board-tools{flex-wrap:wrap;min-width:0}#view-learn #annotations-toggle{text-align:left;white-space:normal}
@media(forced-colors:active){.chess-board .square.change-departure:after,.chess-board .square.change-arrival:after{border-color:CanvasText;box-shadow:none}.comparison-switch button[aria-pressed=true]{border-width:3px}.lesson-comparison button:focus-visible,.prediction-panel button:focus-visible{outline:3px solid Highlight}}


/* teaching-cues.css */
/* Information remains visible when motion is suppressed. No infinite effects. */
.teaching-cue-layer { position:absolute; inset:0; width:100%; height:100%; z-index:8; pointer-events:none; overflow:hidden; }
.teaching-cue-layer[hidden] { display:none; }
.cue-square { fill:none; stroke:#f2e5bb; stroke-width:5; paint-order:stroke; filter:drop-shadow(0 1px 1px #173c29); }
.cue-departure { stroke-dasharray:9 6; }
.cue-arrival { stroke:#d7edaa; stroke-width:6; }
.cue-capture { stroke:#f0aa91; stroke-dasharray:3 5; }
.cue-ghost-origin { stroke:#d1f5ff; stroke-width:3; stroke-dasharray:7 8; }
.cue-ghost-route { fill:none; stroke:#d1f5ff; stroke-width:4; stroke-dasharray:8 9; opacity:.75; }
.cue-ghost-source { pointer-events:none; }
.cue-ghost-art { transform-box:view-box; transform-origin:0 0; }
.cue-capture-cross { fill:none; stroke:#f0aa91; stroke-width:5; stroke-linecap:round; filter:drop-shadow(0 1px 1px #173c29); }
.cue-influence,.cue-arrowhead { fill:none; stroke:#fff2b8; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 2px #173c29); }
.cue-open-file { fill:none; stroke:#b7dce0; stroke-width:9; stroke-dasharray:4 12; opacity:.9; }
.cue-replay .cue-square { animation:cue-arrive 720ms ease-out 1 both; transform-box:fill-box; transform-origin:center; }
.cue-replay .cue-influence { animation:cue-trace 760ms ease-out 1 both; }
@keyframes cue-arrive { from { opacity:.5; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@keyframes cue-trace { from { opacity:.25; } to { opacity:1; } }
.teaching-memory { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.6rem 0; padding:.7rem .8rem; border:1px solid #c5d1ba; border-radius:12px; background:#edf2e7; color:#244331; }
.teaching-memory[hidden] { display:none; }
.teaching-memory-tip { margin:0; flex:1 1 12rem; font-weight:750; }
.teaching-memory .teaching-ghost-replay { color:#244331; min-height:44px; padding:5px 8px; border:1px solid #9aaf8d; border-radius:7px; font-size:.8rem; }
.teaching-memory .teaching-ghost-replay:focus-visible { outline:3px solid #365337; outline-offset:3px; }
.teaching-cue-options { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.teaching-cue-options .text-button { min-height:44px; color:#e4ecd3; }
.teaching-cue-key { flex-basis:100%; margin:0; font-size:.72rem; line-height:1.5; }
.teaching-cue-transcript { margin:12px 0; }
.teaching-cue-transcript>summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-size:.8rem; text-decoration:underline; text-underline-offset:3px; }
.teaching-cue-transcript>summary:focus-visible { outline:3px solid #d9bb65; outline-offset:3px; }
.sound-button { min-height:40px; min-width:44px; }
.effects-paused .teaching-cue-layer *, .effects-paused .teaching-cue-layer { animation:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce) { .teaching-cue-layer, .teaching-cue-layer * { animation:none!important; transition:none!important; } }
@media (forced-colors:active) { .cue-square,.cue-influence,.cue-arrowhead,.cue-open-file,.cue-ghost-route,.cue-capture-cross { stroke:CanvasText; filter:none; } }


/* journey-navigation.css */
/* A compact route inside the activity. The map remains one button per node. */
.journey-navigation{--journey-leaf:#d6eea4;display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(145px,1fr);align-items:center;gap:22px;padding:17px 22px;margin:0 0 22px;border:1px solid #597d63;border-radius:18px;background:radial-gradient(ellipse at 45% 0,#3b624c 0,transparent 70%),linear-gradient(115deg,#1d3c30,#102e25);color:#f4f7e9;box-shadow:0 10px 28px #173b2914,inset 0 1px 0 #e9f8d01c}
.journey-navigation[hidden]{display:none!important}
.journey-identity{min-width:0}.journey-eyebrow{margin:0 0 4px;color:#c1d4b7;font-size:9px;font-weight:700;letter-spacing:.16em}.journey-title{margin:0;font:500 clamp(17px,1.6vw,22px)/1.18 Georgia,serif;color:#f4f7e9}.journey-summary{margin:5px 0 0;color:#bdcdbb;font-size:11px;font-variant-numeric:tabular-nums}
.journey-stage-list{display:flex;align-items:center;gap:15px;margin:0;padding:0;list-style:none}.journey-stage-item{position:relative}.journey-stage-item+.journey-stage-item::before{content:'';position:absolute;width:25px;height:1px;background:#839e754f;left:-20px;top:20px;pointer-events:none}.journey-stage{position:relative;z-index:1;display:grid;justify-items:center;gap:5px;min-width:54px;min-height:64px;padding:0 5px;border:0;border-radius:10px;background:transparent;color:#bed0bd;cursor:pointer;font:inherit}.journey-stage-mark{display:grid;place-items:center;width:40px;height:40px;border:1px solid #93b0887a;border-radius:50%;background:#1b3c2f;color:#c2d2ba;font-size:19px;line-height:1;transition:box-shadow .2s,border-color .2s,background .2s}.journey-stage-label{font-size:11px;font-weight:600;letter-spacing:.03em}.journey-stage[aria-current=step]{color:#f5f8dd}.journey-stage[aria-current=step] .journey-stage-mark{color:#efffc5;border-color:#dfefaa;box-shadow:0 0 0 4px #d6eea414,0 0 23px #dbef9a2e;background:#3d5d39}.journey-stage[data-complete=true] .journey-stage-mark{color:#e0f5b6;background:#436440;border-color:#b8d384}.journey-stage:hover .journey-stage-mark{border-color:#e0f3ae;box-shadow:0 0 19px #d6eea428}.journey-onward{justify-self:end}.journey-next{min-height:44px;min-width:136px;padding:11px 15px;border:1px solid #e3efbd8c;border-radius:999px;background:#e6efc4;color:#234333;font-family:inherit;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer;box-shadow:0 3px 12px #081c2b16;transition:background .2s,box-shadow .2s}.journey-next:hover{background:#f4f7d9;box-shadow:0 0 22px #dfefaa2e}.journey-navigation button:focus-visible{outline:3px solid #f5d88a;outline-offset:5px}.journey-navigation button:disabled{cursor:default}
@media(max-width:760px){.journey-navigation{grid-template-columns:minmax(0,1fr) auto;gap:13px 18px;padding:15px 17px;border-radius:15px;margin-bottom:16px}.journey-identity{grid-column:1}.journey-stages{grid-column:1;grid-row:2}.journey-onward{grid-column:2;grid-row:2}.journey-stage-list{gap:12px}.journey-stage{min-width:45px;min-height:61px;padding-inline:2px}.journey-stage-mark{width:36px;height:36px}.journey-stage-item+.journey-stage-item::before{top:18px;left:-17px;width:22px}.journey-title{font-size:20px}.journey-summary{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.journey-next{min-width:116px;padding:10px 12px;font-size:11px}}
@media(max-width:360px){.journey-navigation{gap:12px;padding:13px}.journey-stage-list{gap:6px}.journey-stage{min-width:39px}.journey-stage-item+.journey-stage-item::before{left:-11px;width:16px}.journey-next{min-width:105px;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.journey-navigation *{transition:none!important}}.effects-paused .journey-navigation *{transition:none!important}
@media(forced-colors:active){.journey-navigation,.journey-stage-mark,.journey-next{border:1px solid ButtonText}.journey-stage[aria-current=step] .journey-stage-mark{outline:2px solid Highlight;outline-offset:3px}.journey-stage[data-complete=true] .journey-stage-mark{border:2px solid ButtonText}}


/* garden-experience.css */
/* A single garden stays behind Tree, See, Try and Fresh. The image never ends with the map. */
html{background:#10231d;scroll-behavior:auto;scroll-padding-top:24px;color-scheme:dark}
html body,html[data-mode=path] body{background:transparent;color:#eef0d7;min-height:100vh;isolation:isolate}
.garden-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#09201724,#09201770),url('assets/pawnpetal-cinematic-forest-v1.webp') center center/cover no-repeat;contain:paint}
html .site-header,html[data-mode=path] .site-header{position:relative;top:auto;width:min(1344px,calc(100% - 48px));height:auto;min-height:84px;padding:14px 20px;margin:14px auto 16px;border:1px solid #bbcda333;border-radius:26px;background:#10271eeb;box-shadow:0 12px 35px #061b1440;z-index:5}
html .site-header .brand,html[data-mode=path] .site-header .brand{color:#ebedce;font-size:29px}
html .site-header .mode-nav,html[data-mode=path] .site-header .mode-nav{background:#213a2de8;border-color:#a6bd8055}
html .site-header .mode-nav a,html[data-mode=path] .site-header .mode-nav a{color:#dce6ca;min-height:48px}
html .site-header .mode-nav a:hover,html[data-mode=path] .site-header .mode-nav a:hover{background:#38523a;color:#eff1d5}
html .site-header .mode-nav a[aria-current=page],html[data-mode=path] .site-header .mode-nav a[aria-current=page]{background:#d3dfb9;color:#173025}
html .motion-button,html[data-mode=path] .motion-button{color:#c4d1b6}
main.wrap{width:min(1280px,calc(100% - 64px))}
#garden-stage{position:relative;min-height:65vh}
.mode-view{animation:none}
.tree-world{background:#0b231b42;border:1px solid #cad3a52e;box-shadow:inset 0 0 90px #06170e30,0 25px 80px #04120c30}
.tree-world:before{display:none;background:none}
.tree-world:after{background:radial-gradient(ellipse at 50% 40%,#0d261b08,#06170e30);box-shadow:none}
.tree-garden{padding-top:45px;padding-bottom:55px}
.tree-node{scroll-margin-block:45px}
.tree-node-label{color:#f4efcf;text-shadow:0 2px 8px #041009,0 0 15px #041009}
.tree-node-summary{color:#d2ddbd}
.tree-back-link{color:#dbe3bf;font-size:11px;min-height:42px;margin:0 0 3px;font-weight:500}
#workspace-intro{min-height:0;padding:0;margin:0}
#workspace-intro>div:first-child{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#workspace-intro .intro-art{display:none}
#workspace-progress{position:absolute;right:0;top:11px;display:block;color:#c1d0b1;font-size:10px}
#workspace-readiness{min-height:0;margin:0 0 5px;padding:0;display:flex;justify-content:flex-end;color:#bfceb0;font-size:10px}
#workspace-readiness>span{display:none}
#workspace-readiness button{min-height:36px;padding:5px 0;color:#c5d4b6;font-size:10px}
.journey-navigation{border-radius:20px;background:#122e23dc;box-shadow:0 12px 30px #06170e24;border-color:#bdd19745;padding:16px 24px;margin-bottom:14px;gap:20px}
.journey-eyebrow{font-size:8px;color:#bbcca5}.journey-title{font-size:24px;color:#f3edcc}.journey-summary{font-size:10px;color:#bdcba8}
.journey-stage-list{gap:17px}.journey-stage{display:flex;align-items:center;gap:9px;min-height:46px;min-width:75px;padding:0 3px}.journey-stage-mark{width:33px;height:33px;font-size:13px}.journey-stage-label{font-size:11px}.journey-stage-item+.journey-stage-item:before{top:23px;left:-17px;width:17px}
.journey-next{background:transparent;color:#e4edc8;border-color:#bdd19766;box-shadow:none;font-weight:500;font-size:11px;min-width:120px}
.journey-next:hover{background:#38573c;color:#f4f1d4}
.garden-collection{margin:0 0 12px;padding:0;border:0;color:#d8e2c3}
.garden-collection>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;width:max-content;max-width:100%;padding:8px 14px;border:1px solid #bace9d3d;border-radius:12px;background:#173629d9;font-size:11px}
.garden-collection>summary>span{font-size:15px;color:#cbd7ac}.garden-collection[open]>summary{margin-bottom:10px}.garden-collection[open]>summary>span{transform:rotate(45deg)}
.garden-collection .lesson-picker,.garden-collection .sample-picker{gap:8px;margin:0;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;padding:0}
.garden-collection .sample-picker:not(.strategy-picker){grid-template-columns:repeat(6,minmax(0,1fr))}
.garden-collection .lesson-card,.garden-collection .sample-card{border:1px solid #a7bf7b45;background:#163529f2;color:#e7ebcf;border-radius:12px;min-height:58px}
.garden-collection .lesson-card strong{font:400 17px/1.2 Georgia,serif}.garden-collection .lesson-card-number{color:#b7c69b}.garden-collection .lesson-card[aria-pressed=true],.garden-collection .sample-card[aria-pressed=true]{background:#3a5636;border-color:#dce6ae;color:#f3f2d8}
.garden-collection .lesson-card-decoration{display:none}.garden-collection .sample-card small{color:#bdcda7}
#view-learn .study-shell,#view-practice .room-shell{background:#102a20bc;border:1px solid #bbcea33d;border-radius:26px;box-shadow:0 25px 75px #03180f66;overflow:visible}
#view-learn .study-topline,#view-practice .study-topline{position:static;width:auto;height:auto;clip:auto;white-space:normal;overflow:visible;padding:16px 28px;margin:0;min-height:45px;background:none;border-bottom:1px solid #b7c5a022;border-radius:26px 26px 0 0;color:#bacba6;font-size:9px}
#view-learn .study-grid,#view-practice .room-grid{grid-template-columns:minmax(0,1.65fr) minmax(265px,.85fr);align-items:start}
#view-learn .board-panel,#view-practice .board-panel{--workspace-board-size:600px;background:none;padding:14px 28px 26px}
#view-learn .board-panel:before,#view-practice .board-panel:before{background:none}
#view-learn .board-aura,#view-practice .board-aura{width:min(100%,var(--workspace-board-size));max-width:600px}
#view-learn .board-frame,#view-practice .board-frame{padding:10px;border-radius:14px;box-shadow:0 24px 55px #00170cd9,0 0 55px #b0c28b16,inset 0 1px 1px #ffefc077}
#view-learn .board-meta,#view-practice .board-meta{margin-bottom:8px}
#view-learn .lesson-panel,#view-practice .lesson-panel{background:#122e22d9;border-left:1px solid #b4c89922;color:#e7ecd0;padding:24px 26px 28px;border-radius:0 0 26px 0;min-height:100%}
.lesson-topic-portrait{width:112px;height:112px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 7px 9px #06170e70)}
#view-learn .lesson-kicker{justify-content:center}#view-learn .lesson-kicker .eyebrow{color:#becea6;font-size:8px}#view-learn .lesson-kicker>span{display:none}
#view-learn .lesson-panel h2{color:#f0e9c6;font-size:33px;line-height:1.1;margin:10px 0 0;text-align:center;max-width:none}
#view-learn #lesson-summary{color:#c7d2b4;font-size:12px;line-height:1.65;text-align:center;margin-top:12px}
#view-learn .lesson-progress{color:#bfcca7;font-size:10px;margin-top:22px}
#view-learn .step-picker{gap:5px;justify-content:flex-start;flex-wrap:wrap;border-color:#afc39338;padding-bottom:16px}
#view-learn .step-picker button{width:38px;min-width:38px;height:44px;flex-basis:38px;border-radius:12px;background:#244431;color:#d6e1bf;border-color:#b7c68e44}
#view-learn .step-picker button[aria-pressed=true]{background:#dae3af;border-color:#dae3af;color:#203b29;box-shadow:0 0 19px #d3e19d25}
#view-learn .step-picker button.is-complete{background:#3b5739;color:#dfe8c0;border-color:#aabf8055}
#view-learn #step-counter{color:#baca9e;font-size:8px}#view-learn #step-san{color:#e5d89a}
#view-learn .step-why{color:#e5e8cb;font-size:20px;line-height:1.5;margin-top:11px}
#view-learn .visual-caption{margin-top:18px;min-height:50px}#view-learn #step-caption{font-size:22px;line-height:1.35;color:#f1edcf}
#view-learn .playback-deck{margin-top:8px}#view-learn .playback-main.manual-controls{margin-top:0;gap:10px}#view-learn .play-button{border-radius:999px;min-height:49px;background:#e0e7b9;color:#203a2a;border-color:#e0e7b9}
#view-learn .playback-step{border-radius:50%;background:#214330;color:#dbe6c0;border-color:#bacd9859}
#view-learn .playback-utilities{margin-top:10px;justify-content:flex-end;gap:14px}
#view-learn .playback-progress-row{margin-top:7px}#view-learn .watch-options{margin-top:12px}
#view-learn .why-details,#view-practice .why-details{border-color:#aec39233}
#view-learn .why-details summary,#view-practice .why-details summary{color:#ccd8b8;font-size:11px}
#view-learn .why-details>div,#view-learn .why-details>p,#view-practice .why-details>div,#view-practice .why-details>p{color:#c3d0b1}
#view-learn .why-details h3,#view-practice .why-details h3{color:#e4e6bf}
#view-learn .lesson-limit,#view-learn .takeaways ul,#view-learn .takeaways .eyebrow{color:#c8d4af}
#view-learn .lesson-navigation{border-color:#aec39233}#view-learn .lesson-navigation .text-button{color:#c7d5b3}
#view-learn .primary-light,#view-practice .primary-light{background:#d4dfa9;color:#24402c;border:1px solid #e5ebbf}
#view-learn .lesson-practice{background:transparent;color:#dce5bd;border-color:#b6c99555;font-weight:500}
#view-learn .try-prediction,#view-learn .prediction-panel,#view-practice .prediction-panel{background:#213f2e;border-color:#b1c88b66;color:#e3e9c9}
#view-learn #prediction-question,#view-learn #prediction-feedback,#view-learn .prediction-intro,#view-learn .prediction-notice,#view-learn #prediction-close,#view-learn .prediction-panel>.eyebrow{color:#d8e2bd}
#view-learn .prediction-choices button,#view-practice .prediction-choices button{background:#173426;color:#e3e8c9;border-color:#b6c88c55}
#view-learn .prediction-choices button[aria-pressed=true],#view-practice .prediction-choices button[aria-pressed=true]{background:#d6e1b0;color:#243c29}
#view-learn .small-button,#view-practice .small-button,#view-practice .secondary-light{color:#d1dfb3;border-color:#a8be7d66;background:transparent}
#view-practice .lesson-panel h2,#view-practice .sample-task,#view-practice .sample-panel h3{color:#eee9c9}
#view-practice .lesson-kicker .eyebrow,#view-practice .lesson-kicker>span,#view-practice .quiet-note,#view-practice .sample-panel>p,#view-practice .sample-sequence{color:#c6d2b4}
#view-practice .practice-collection-bar .segmented,#view-practice .strategy-position-bar .segmented{background:#23422f;border-color:#9ab97855}
#view-practice .segmented button{color:#d5dfbb}#view-practice .segmented button[aria-pressed=true]{background:#d9e4b7;color:#253f2a}
#view-practice .strategy-position-bar{border-color:#aec39233}#view-practice .strategy-position-bar>span{color:#bdcca5}
.resource-strip,.about-section,.site-footer{color:#c9d6b9;border-color:#abc18c3b}.resource-strip p,.about-section summary,.product-link,.compact-overview-link{color:#bdcfae}.resource-strip{background:#102b20b3;border-radius:18px;padding:18px 22px}.resource-strip strong{color:#edf0d1}.resource-strip details summary{color:#d3dfb9}.practice-links{background:#203e2c;color:#e1e9c8}.site-footer{margin-top:25px}.site-footer p{color:#c2d2b1}.about-section a{text-decoration:underline;text-underline-offset:3px}
.committed-move-ghost{position:absolute;left:0;top:0;width:12.5%;height:12.5%;transform:translate(var(--piece-x),var(--piece-y));z-index:1;pointer-events:none;opacity:0;contain:layout style}
.committed-move-ghost img{width:100%;height:100%;max-width:none;object-fit:contain;filter:sepia(.2)}
.chess-piece{transition:transform 480ms cubic-bezier(.22,.75,.22,1)}
.interactive-piece{transition:transform 480ms cubic-bezier(.22,.75,.22,1),opacity 180ms ease}
html #garden-stage :is(button,a,summary,select,input,[tabindex]):not(.board-square):not(.teaching-ghost-replay):focus-visible,html .site-header :is(button,a):focus-visible,html .resource-strip :is(a,summary):focus-visible{outline-color:#f1d58a}
@media(min-width:960px) and (max-height:820px){#view-learn .board-panel,#view-practice .board-panel{--workspace-board-size:clamp(400px,calc(100svh - 270px),540px)}}
@media(max-width:959px){main.wrap{width:calc(100% - 32px)}html .site-header,html[data-mode=path] .site-header{width:calc(100% - 32px);padding:10px 16px;margin-top:12px;border-radius:22px;min-height:72px}#view-learn .study-grid,#view-practice .room-grid{grid-template-columns:minmax(0,1.5fr) minmax(235px,1fr)}#view-learn .board-panel,#view-practice .board-panel{padding:12px 16px 22px}#view-learn .lesson-panel,#view-practice .lesson-panel{padding:20px 18px}.lesson-topic-portrait{width:90px;height:90px}#view-learn .lesson-panel h2{font-size:28px}.journey-navigation{padding:15px 18px;gap:14px}.journey-title{font-size:21px}.journey-stage-list{gap:10px}.journey-stage{min-width:65px;gap:6px}.journey-stage-item+.journey-stage-item:before{left:-10px;width:10px}.journey-next{min-width:104px}}
@media(max-width:760px){#view-learn .study-grid,#view-practice .room-grid{grid-template-columns:minmax(0,1fr)}#view-learn .board-panel,#view-practice .board-panel{--workspace-board-size:570px;padding:10px 20px 20px}#view-learn .lesson-panel,#view-practice .lesson-panel{border-left:0;border-top:1px solid #afc18c33;border-radius:0 0 22px 22px;padding:22px 25px}.garden-lesson-panel{position:relative}.lesson-topic-portrait{width:76px;height:76px;margin:0 auto 8px}#view-learn .lesson-panel h2{font-size:30px}.journey-navigation{grid-template-columns:1fr auto;gap:12px}.journey-identity{grid-column:1/-1}.journey-title{font-size:23px}.journey-summary{position:static;width:auto;height:auto;margin:5px 0 0;clip:auto;overflow:visible;white-space:normal}.journey-eyebrow{display:none}.journey-stages{grid-row:2}.journey-onward{grid-row:2}.journey-stage{min-height:44px;min-width:70px}.journey-stage-mark{width:29px;height:29px}.journey-stage-label{font-size:10px}.journey-stage-item+.journey-stage-item:before{top:22px}.garden-collection .lesson-picker,.garden-collection .sample-picker,.garden-collection .sample-picker:not(.strategy-picker){grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.garden-collection .lesson-card:last-child{grid-column:1/-1}.garden-collection .sample-card strong{font-size:13px}.tree-garden{padding-top:38px;padding-bottom:42px}}
@media(max-width:600px){html .site-header,html[data-mode=path] .site-header{width:calc(100% - 20px);margin:10px auto 10px;grid-template-columns:1fr 44px;padding:8px 10px;gap:7px;min-height:0;border-radius:20px}html .site-header .brand{grid-column:1;grid-row:1;font-size:26px;min-height:35px}.site-header .motion-button{grid-column:2;grid-row:1}.site-header .mode-nav{grid-column:1/-1;grid-row:2;width:100%}html .site-header .mode-nav a{min-height:44px;padding:8px 9px}.site-header .motion-button #motion-label{display:none}main.wrap{width:calc(100% - 20px)}.tree-world{border-radius:22px}.tree-hud{padding-top:28px}.tree-hud h1{font-size:32px}.tree-back-link{font-size:10px;min-height:38px}#workspace-progress{top:10px;font-size:9px}#workspace-readiness button{min-height:32px}.journey-navigation{padding:15px;border-radius:18px;margin-bottom:11px}.journey-title{font-size:22px}.journey-stage-list{gap:6px}.journey-stage{min-width:62px;gap:5px;padding:0}.journey-stage-item+.journey-stage-item:before{left:-6px;width:6px}.journey-next{min-width:98px;font-size:10px;padding-inline:10px}#view-learn .study-shell,#view-practice .room-shell{border-radius:21px}#view-learn .study-topline,#view-practice .study-topline{padding:12px 16px;min-height:40px;border-radius:21px 21px 0 0}.room-label{font-size:8px}#view-learn .board-panel,#view-practice .board-panel{padding:8px 10px 20px}#view-learn .board-frame,#view-practice .board-frame{padding:7px;border-radius:10px}#view-learn .board-meta{gap:5px}#view-learn #step-caption{font-size:20px}#view-learn .visual-caption{min-height:52px;margin-top:14px}#view-learn .lesson-panel,#view-practice .lesson-panel{padding:22px 19px}.resource-strip{padding:17px}.tree-garden{padding-top:35px}}
@media(max-width:360px){.journey-navigation{padding:12px}.journey-stage{min-width:54px}.journey-stage-label{font-size:9px}.journey-stage-mark{width:26px;height:26px}.journey-next{min-width:89px;font-size:9px;padding-inline:8px}.journey-stage-list{gap:4px}#view-learn .board-tools{gap:0}#view-learn .board-meta .text-button{font-size:9px}.live-status{font-size:9px;padding:6px}}
@media(prefers-reduced-motion:reduce){.committed-move-ghost{display:none}.chess-piece,.interactive-piece{transition:none!important}}
.effects-paused .committed-move-ghost{display:none}
@media(forced-colors:active){.garden-atmosphere{display:none}html body,html .site-header,html[data-mode=path] .site-header,.tree-world,#view-learn .study-shell,#view-practice .room-shell,#view-learn .lesson-panel,#view-practice .lesson-panel,.journey-navigation,.garden-collection>summary,.garden-collection .lesson-card,.garden-collection .sample-card{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}html :is(h1,h2,p,span,button,a,summary,strong,small){color:CanvasText!important}.committed-move-ghost{display:none}html :focus-visible{outline-color:Highlight!important}}

/* Header remains a two-row cluster before its inline children become crowded. */
html .brand small{color:#bdcdb0}
@media(max-width:760px){html .site-header,html[data-mode=path] .site-header{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px 10px}.site-header .brand{grid-column:1;grid-row:1}.site-header .motion-button{grid-column:2;grid-row:1}.site-header .mode-nav{grid-column:1/-1;grid-row:2;width:100%;justify-content:center}.site-header .mode-nav a{flex:1}.site-header .motion-button #motion-label{display:none}}
/* Explicit legacy text colors also follow their new dark surfaces. */
#view-practice #flow-question-title,#view-practice #flow-question-kind,#view-practice #flow-question-feedback,#view-practice #flow-question-skip,#view-practice .practice-collection-bar>p,#view-practice .sample-secondary,#view-practice .strategy-explore label,#view-practice .strategy-explore>.text-button,#view-practice #strategy-branch-note{color:#d8e2bd}
.garden-collection .sample-card[aria-pressed=true] small,.garden-collection .strategy-picker .sample-card[data-goals-found="1"] small,.garden-collection .sample-card[aria-pressed=true] .sample-icon{color:#d8e2bd}

/* Pair inherited controls with the garden surface; pale dialogs retain their dark focus ring. */
#view-practice .practice-collection-bar .segmented button span{background:#173426;color:#e3e8c9}
.resource-strip details summary{background:#213e2e;color:#d3dfb9;border-color:#b7c99955}
.practice-links>a{color:#dbe7c0;border-color:#b7c99944}
.noscript{color:#344b2f}

/* Advice-only branch light uses the existing underlay, not a new overlay or progress marker.
   The authored line keeps its optional dashes and independent earned-growth animation. */
.tree-connection[data-relationship-next=true] .tree-edge-line{stroke:#f2edc1;opacity:1;filter:drop-shadow(0 0 6px #ddecad9c)}
.tree-connection[data-relationship-next=true] .tree-edge-ground{stroke:#dceba6;opacity:.32}
.tree-connection[data-relationship-next=true] .tree-edge-ground.tree-relationship-travel{stroke:#f1e6b2;stroke-width:7;stroke-dasharray:10 90;filter:blur(1.5px) drop-shadow(0 0 5px #e7e9aa99)}
.tree-node[data-relationship-next=true] .tree-orb:before{border-color:#d7e5a985;box-shadow:0 0 18px #d7e5a926}
@media(prefers-reduced-motion:reduce){.tree-edge-ground.tree-relationship-travel{stroke-dasharray:none!important}}
.effects-paused .tree-edge-ground.tree-relationship-travel{stroke-dasharray:none!important}
@media(forced-colors:active){.tree-connection[data-relationship-next=true] .tree-edge-line{stroke:Highlight;filter:none}.tree-node[data-relationship-next=true] .tree-orb:before{border-color:Highlight;box-shadow:none}}

/* Captures: six pooled original-art fragments, never another board or hit target. */
.capture-crumble-fragment{position:absolute;left:0;top:0;width:12.5%;height:12.5%;transform:translate(var(--piece-x),var(--piece-y));z-index:4;pointer-events:none;contain:layout style}
.capture-crumble-shard{position:absolute;inset:0;pointer-events:none;opacity:0}
.capture-crumble-art{position:absolute;inset:-3% 0 3%;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;user-select:none}
.capture-crumble-source{visibility:hidden!important}
.effects-paused .capture-crumble-fragment{display:none!important}
@media(prefers-reduced-motion:reduce){.capture-crumble-fragment{display:none!important}}
@media(forced-colors:active){.capture-crumble-fragment{display:none!important}}


/* tree-camera.css */
/* Intentional navigation transforms only the garden world, never a lesson board. */
.tree-camera-toolbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:8px 20px 18px}
.tree-camera-toolbar button,.tree-catalog-pages button{min-height:44px;padding:9px 15px;border:1px solid #b9c89555;border-radius:22px;background:#173326e8;color:#ecedcf;font:inherit;font-size:12px;line-height:1.4}
.tree-camera-toolbar button:hover,.tree-catalog-pages button:hover{background:#2c4833}
.tree-camera-toolbar button[aria-pressed=true]{background:#d1dcb0;color:#183021;border-color:#e9e1b8}
.tree-camera-toolbar button:disabled,.tree-catalog-pages button:disabled{opacity:.4;cursor:default}
.tree-camera-toolbar button:focus-visible,.tree-catalog-pages button:focus-visible,.tree-region:focus-visible,.tree-catalog-result:focus-visible,.tree-catalog input:focus-visible{outline:3px solid #efdc9b;outline-offset:3px}
#tree-browse-toggle{min-width:120px}
.tree-map-viewport .tree-node-label{overflow-wrap:anywhere}
.tree-zoom-controls{display:flex;align-items:center;gap:0;border:1px solid #b9c89555;border-radius:22px;background:#102b22b8}
.tree-zoom-controls button{min-width:44px;padding:8px;border:0;background:transparent;font-size:22px}
#tree-zoom-status{width:76px;text-align:center;font-size:11px;color:#dbe4c4;font-variant-numeric:tabular-nums}
.tree-map-viewport{position:relative;isolation:isolate;overflow:hidden;overflow:clip;contain:layout paint;height:clamp(420px,calc(100svh - 310px),680px);min-height:420px;border-block:1px solid #a4bd8130;background:radial-gradient(ellipse at 50% 40%,#173a2515,#071a1438)}
.tree-map-viewport[data-camera-mode=detail]{touch-action:pan-y pinch-zoom;cursor:grab}
.tree-pan-surface{position:absolute;inset:0;z-index:0;touch-action:pinch-zoom}
.tree-map-viewport:focus-visible{outline:3px solid #eed391;outline-offset:-5px}
.tree-map-viewport .tree-garden{position:absolute;z-index:1;pointer-events:none;left:0;top:0;width:100%;max-width:940px;min-width:360px;margin:0;transform-origin:0 0}
.tree-camera-moving{will-change:transform}
.tree-map-viewport.tree-camera-dragging,.tree-map-viewport.tree-camera-dragging *{cursor:grabbing!important;user-select:none}
.tree-map-viewport .tree-node-button{cursor:pointer;pointer-events:auto}
.tree-camera-help{margin:0;padding:12px 20px 14px;text-align:center;color:#c2d1b2;font-size:11px;line-height:1.5}
.tree-overview{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-content:start;padding:36px 38px 25px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.tree-region{display:flex;flex-direction:column;align-items:center;gap:23px;min-width:0;min-height:200px;padding:10px 4px;border:0;border-radius:24px;background:none;box-shadow:none;color:#f1edcf;text-align:center}
.tree-region-art{display:grid;place-items:center;width:112px;height:112px;flex-shrink:0;border:1px solid #cbd6a67a;border-radius:50%;background:radial-gradient(circle,#61764a88,#163122);box-shadow:0 0 38px #b1d78920,inset 0 0 22px #d5dea31a;pointer-events:none}
.tree-region-art img{width:120%;height:120%;max-width:none;object-fit:contain;pointer-events:none}
.tree-region-label{font-family:var(--serif,Georgia,serif);font-size:24px;line-height:1.2;overflow-wrap:anywhere;text-shadow:0 2px 8px #041009}
.tree-region-label small{display:block;margin-top:9px;color:#c2d0ac;font-family:var(--sans,Arial,sans-serif);font-size:11px;line-height:1.4}
.tree-region[data-suggested=true] .tree-region-art{border-color:#ead18f;box-shadow:0 0 34px #d9c37955}
.tree-region:hover .tree-region-art{border-color:#f4e7b5;box-shadow:0 0 40px #d2dfa244}
.tree-landmark{position:absolute;z-index:0;left:24px;bottom:8px;width:160px;height:160px;max-width:none;object-fit:contain;pointer-events:none}
.tree-catalog{position:relative;z-index:1;height:100%;max-width:720px;margin:0 auto;padding:22px 24px;display:flex;flex-direction:column;gap:10px;min-height:0;touch-action:pan-y pinch-zoom}
.tree-catalog>label{font-family:var(--serif,Georgia,serif);font-size:24px;color:#f0edcf}
.tree-catalog input{width:100%;min-height:44px;flex-shrink:0;padding:10px 14px;border:1px solid #b7c89070;border-radius:14px;background:#102b23e6;color:#f2f0d6;font:inherit;font-size:14px}
.tree-catalog input::placeholder{color:#aebe9d}
.tree-catalog-status{min-height:18px;margin:0;color:#c3d0af;font-size:11px;line-height:1.5}
#tree-catalog-results{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:3px 5px;display:flex;flex-direction:column;gap:5px}
.tree-catalog-result{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;min-height:56px;padding:11px 13px;border:1px solid #b4c29025;border-radius:13px;background:#112c2090;color:#f0edce;text-align:left}
.tree-catalog-result:hover{background:#29442d}
.tree-catalog-result strong{font-family:var(--serif,Georgia,serif);font-size:18px;font-weight:500;line-height:1.25;overflow-wrap:anywhere}
.tree-catalog-result small{flex-shrink:0;color:#c0d0aa;font-size:10px;line-height:1.4;text-align:right;max-width:100px}
.tree-catalog-result[data-save-issue=true] small{color:#f1d79e}
.tree-catalog-pages{display:flex;justify-content:space-between;gap:15px;flex-shrink:0}
.tree-connection[data-recommended-route=true] .tree-edge-line{stroke:#e4c981;opacity:.95;filter:drop-shadow(0 0 5px #dfc47c70)}
.tree-connection[data-recommended-route=true] .tree-edge-ground{stroke:#dac17b;opacity:.24}
@media(max-width:650px){.tree-camera-toolbar{gap:6px;padding:7px 12px 14px}.tree-camera-toolbar button{padding-inline:12px;font-size:11px}.tree-zoom-controls button{padding-inline:8px;font-size:22px}.tree-map-viewport{height:clamp(420px,calc(100svh - 265px),600px)}.tree-overview{grid-template-columns:minmax(0,1fr);gap:15px;padding:24px 22px;align-content:start}.tree-region{flex-direction:row;gap:23px;min-height:100px;padding:7px 14px;text-align:left}.tree-region-art{width:76px;height:76px}.tree-region-label{font-size:23px}.tree-region-label small{margin-top:5px}.tree-catalog{padding:18px 15px}.tree-landmark{display:none}}
@media(max-width:340px){.tree-camera-toolbar{gap:5px}.tree-camera-toolbar button{padding-inline:10px}.tree-overview{padding-inline:12px}.tree-region{gap:16px;padding-inline:8px}.tree-region-art{width:62px;height:62px}.tree-region-label{font-size:21px}.tree-catalog-result{gap:8px;padding-inline:8px}.tree-catalog-result strong{font-size:16px}.tree-catalog-result small{max-width:73px}}
@media(prefers-reduced-motion:reduce){.tree-camera-moving{will-change:auto}}
.effects-paused .tree-camera-moving{will-change:auto}
@media(forced-colors:active){.tree-map-viewport,.tree-camera-toolbar button,.tree-zoom-controls,.tree-region,.tree-region-art,.tree-catalog input,.tree-catalog-result,.tree-catalog-pages button{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}.tree-landmark{display:none}.tree-region-label,.tree-region-label small,.tree-catalog-result small,.tree-catalog-status,.tree-camera-help,#tree-zoom-status{color:CanvasText;text-shadow:none}.tree-camera-toolbar button[aria-pressed=true]{background:Highlight;color:HighlightText}.tree-connection[data-recommended-route=true] .tree-edge-line{stroke:CanvasText;filter:none}}

/* One discovery group, with direct access to its independent piece variants. */
.tree-catalog-variants{display:flex;flex-wrap:wrap;gap:6px;padding:5px 6px}
.tree-catalog-variant{min-width:44px;min-height:44px;padding:6px 10px;border:1px solid #b4c29050;border-radius:10px;background:#173c2b;color:#f0edce;font:inherit;font-size:13px}
.tree-catalog-variant:focus-visible{outline:3px solid #efdc9b;outline-offset:2px}
@media(forced-colors:active){.tree-catalog-variant{background:Canvas;color:CanvasText;border-color:CanvasText}}


/* node-workspace.css */
/* The board occupies the same track in every garden journey. No learning overlay. */
:root{--node-board:clamp(280px,calc(100svh - 440px),580px);--node-cue-height:104px}
html:not([data-mode=path]) .site-header{min-height:62px;margin:8px auto;padding:8px 18px}
html:not([data-mode=path]) .site-header .brand{font-size:25px}
html:not([data-mode=path]) .site-header .mode-nav a{min-height:40px;padding-block:6px}
html:not([data-mode=path]) .garden-atmosphere{transform:scale(1.025)}
#garden-stage{min-height:0}
#workspace-intro,#workspace-readiness{display:none}
.tree-back-link{margin:0;min-height:30px;line-height:30px}
.journey-navigation,.node-route-header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(860px,100%);min-height:70px;margin:0 auto 10px;padding:8px 18px;border:1px solid #b7cc9533;border-radius:18px;background:#112d22db;box-shadow:none}
.journey-identity{min-width:0}.journey-title,.node-route-header h2{font-size:25px;line-height:1.12;color:#f0edcf;max-width:340px}
.journey-eyebrow,.journey-summary,.journey-onward{display:none}
.journey-stage-list{gap:12px}.journey-stage{min-width:62px;min-height:44px;gap:6px}.journey-stage-mark{width:28px;height:28px;flex:none}.journey-stage-label{font-size:11px}.journey-stage-item+.journey-stage-item:before{top:22px;left:-12px;width:12px}
.node-route-header .node-stage-list{display:flex;gap:12px;padding:0;background:none;border:0}.node-route-header .node-stage{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:0;min-height:44px;min-width:44px;background:none;color:#ccd9b4;font-size:11px;border:0;border-radius:0}.node-stage-mark{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #aac17f66;background:#23402c}.node-stage[aria-pressed=true] .node-stage-mark{background:#d8e3b3;color:#1d3826;border-color:#e4eabd}.node-stage[data-complete=true] .node-stage-mark{border-color:#dbdf9e;box-shadow:0 0 10px #cfdb8e25}
#view-learn .workspace-shell,#view-practice .workspace-shell,.node-journey.workspace-shell{width:min(860px,100%);margin:0 auto;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;color:#e4eacb}
.node-journey .node-route-header{width:100%}
.workspace-shell>.study-topline{display:none!important}
#view-learn .workspace-grid,#view-practice .workspace-grid,.node-journey .workspace-grid{display:block;width:100%;max-width:none;padding:0;margin:0}
#view-learn .workspace-board,#view-practice .workspace-board,.node-journey .workspace-board{--workspace-board-size:var(--node-board);width:min(100%,660px);margin:0 auto;padding:0;background:none;border:0;box-shadow:none}
.workspace-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:30px;width:min(100%,var(--node-board));margin:0 auto 6px;padding:0 4px}
.workspace-mode{font-size:11px;font-weight:700;letter-spacing:.02em;color:#e2e9c5;line-height:1.4}.workspace-mode:before{content:'▷';margin-right:7px}.workspace-mode[data-mode=interactive]:before{content:'↗'}
.workspace-moments{display:flex;gap:5px;align-items:center}.workspace-moment{display:block;width:7px;height:7px;border:1px solid #c1d39788;border-radius:50%;background:#183c2d}.workspace-moment[data-done=true]{background:#d0dc9b}.workspace-moment[data-current=true]{outline:2px solid #d3dfa78c;outline-offset:2px}
#view-learn .workspace-position,#view-practice .workspace-position,.node-journey .workspace-position{width:min(100%,var(--node-board));max-width:none;margin:0 auto}
#view-learn .workspace-position .board-frame,#view-practice .workspace-position .board-frame,.node-journey .workspace-position .board-frame{padding:8px;border-radius:12px}
.workspace-cue,#view-learn .workspace-cue,#view-practice .workspace-cue,.node-journey .workspace-cue{display:flex;align-items:center;justify-content:center;text-align:center;width:min(100%,620px);min-height:var(--node-cue-height);margin:0 auto;padding:10px 16px;border:0;border-radius:0;background:none;color:#f0edcd;box-shadow:none}
.workspace-cue #step-caption,.workspace-cue #sample-feedback-text,.workspace-cue p{font:400 19px/1.38 Georgia,serif!important;color:#f0edcd!important;max-width:600px;margin:0!important;letter-spacing:-.015em}
.workspace-cue #sample-feedback-title,.workspace-cue .status-symbol,.workspace-cue>strong{display:none}
.workspace-action{display:flex;justify-content:center;align-items:center;min-height:49px;margin:0 auto;width:min(100%,var(--node-board))}
.workspace-primary{min-height:45px;min-width:160px;max-width:100%;padding:10px 24px;border:1px solid #e3e9b8;border-radius:999px;background:#d8e3b3;color:#203928;font-weight:700;font-size:12px;line-height:1.4;box-shadow:0 6px 22px #041b1438}
.workspace-primary:hover{background:#e8edc9}
.workspace-more{width:min(100%,660px);margin:3px auto 20px;color:#d9e2bd}
.workspace-more>summary{min-height:44px;width:max-content;margin:0 auto;padding:9px 20px;font-size:11px;color:#c9d7b3;text-decoration:underline;text-underline-offset:4px}
.workspace-more-body{margin-top:12px;padding:20px;border:1px solid #bdd09644;border-radius:18px;background:#143325f5;color:#d7e2be}
.workspace-more-body>.lesson-panel,.workspace-more-body>.readiness-panel{background:none!important;border:0!important;padding:12px 0!important;min-height:0!important;border-radius:0!important}
.workspace-more-body .lesson-topic-portrait,.workspace-more-body .observation-companion,.workspace-more-body .path-dialog-heading>.eyebrow,.workspace-more-body .path-dialog-heading>div>.eyebrow{display:none}
.workspace-more-body .readiness-intro,.workspace-more-body .path-dialog-heading{display:block;padding:0;margin:12px 0;border:0;background:none}
.workspace-more-body .readiness-intro>p,.workspace-more-body p,.workspace-more-body h3,.workspace-more-body .quiet-note,.workspace-more-body .readiness-footnote{color:#d3deba}
.workspace-more-body .readiness-footnote{font-size:11px;border-color:#abc18b44;margin-top:15px}
.workspace-more-body .readiness-clips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-block:15px}
.workspace-more-body .readiness-clips button{padding:8px;background:#1c3f2d;color:#dfe6c4;border:1px solid #a9bf7e66;border-radius:10px;font-size:11px;line-height:1.4}
.workspace-more-body .readiness-clips button[aria-pressed=true]{border-color:#e1e9b8;background:#3a5537}
.clip-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;margin-bottom:6px}.clip-square{display:grid;place-items:center;background:#d4dbb1;aspect-ratio:1}.clip-square:nth-child(16n+2),.clip-square:nth-child(16n+4),.clip-square:nth-child(16n+6),.clip-square:nth-child(16n+8),.clip-square:nth-child(16n+9),.clip-square:nth-child(16n+11),.clip-square:nth-child(16n+13),.clip-square:nth-child(16n+15){background:#728a62}.clip-square img{width:100%;height:100%;object-fit:contain}
.node-journey .prediction-panel{background:#213f2e;border-color:#b1c88b66;color:#e3e9c9}.node-journey .prediction-panel p{color:#d8e2bd}.node-journey .prediction-choices button{background:#173426;color:#e3e8c9;border-color:#b6c88c55}.node-journey .prediction-choices button[aria-pressed=true]{background:#d6e1b0;color:#243c29}
[data-board-mode=demo] .board-square{cursor:default}[data-board-mode=interactive] .board-square[data-selectable=true]{cursor:pointer}[data-board-mode=interactive] .board-square[data-selectable=true]:hover{box-shadow:inset 0 0 0 3px #233f2c88}
#garden-stage .workspace-more :is(button,a,summary,select):focus-visible,#garden-stage .node-stage:focus-visible,#garden-stage .workspace-primary:focus-visible{outline:3px solid #f1d58a;outline-offset:3px}
@media(max-width:760px){:root{--node-board:clamp(260px,calc(100svh - 460px),540px);--node-cue-height:112px}.journey-navigation,.node-route-header{min-height:74px;padding:8px 12px;gap:12px}.journey-title,.node-route-header h2{font-size:22px;max-width:45%}.journey-identity{max-width:45%}.journey-identity .journey-title{max-width:none}.journey-stage-list,.node-route-header .node-stage-list{gap:7px}.journey-stage{min-width:52px;gap:4px}.node-route-header .node-stage{gap:4px}.journey-stage-item+.journey-stage-item:before{left:-7px;width:7px}.journey-stage-mark,.node-stage-mark{width:25px;height:25px}.workspace-cue #step-caption,.workspace-cue #sample-feedback-text,.workspace-cue p{font-size:18px!important}.workspace-more-body{padding:15px}}
@media(max-width:440px){:root{--node-board:clamp(260px,min(calc(100vw - 32px),calc(100svh - 470px)),400px);--node-cue-height:136px}.journey-navigation,.node-route-header{min-height:70px;padding:7px 10px;gap:8px}.journey-title,.node-route-header h2{font-size:19px}.journey-stage{min-width:44px;flex-direction:column;gap:1px}.node-route-header .node-stage{flex-direction:column;gap:1px}.journey-stage-label,.node-route-header .node-stage{font-size:10px}.journey-stage-item+.journey-stage-item:before{top:13px}.workspace-more-body .readiness-clips{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-cue{padding-inline:8px!important}.workspace-cue #step-caption,.workspace-cue #sample-feedback-text,.workspace-cue p{font-size:17px!important}}
/* Short/zoomed viewports scroll normally rather than shrinking controls or clipping content. */
@media(max-height:620px){.workspace-shell{min-height:0}}
@media(prefers-reduced-motion:reduce){html .garden-atmosphere{transform:none!important}}
html.effects-paused .garden-atmosphere{transform:none!important}
@media(forced-colors:active){.workspace-mode,.workspace-cue p,.workspace-cue #step-caption,.workspace-cue #sample-feedback-text{color:CanvasText!important}.workspace-primary,.workspace-more-body,.journey-navigation,.node-route-header{background:Canvas;color:CanvasText;border-color:CanvasText}#garden-stage :focus-visible{outline-color:Highlight!important}}

.workspace-cue #caption-number{display:none}
#view-learn .workspace-more-body .controls,#view-practice .workspace-more-body .controls,.node-journey .workspace-more-body .controls{flex-wrap:wrap}

/* A journey has its own See/Try/Fresh navigation; the tree remains one step away. */
html:not([data-mode=path]) .site-header{display:grid;grid-template-columns:1fr auto;gap:10px}
html:not([data-mode=path]) .site-header .mode-nav{display:none}
html:not([data-mode=path]) .site-header .brand{grid-column:1;grid-row:1}
html:not([data-mode=path]) .site-header .motion-button{grid-column:2;grid-row:1}
.node-journey .path-close-button{background:#263f2d;color:#e4eac6;border:1px solid #b2c58c88;width:auto;height:auto;min-height:44px;padding:9px 16px;border-radius:12px;font:600 12px/1.4 inherit}
.node-journey .secondary-light,.node-journey .why-details summary{color:#dce6bd;border-color:#b9cb9580}
.node-journey .secondary-light:hover{color:#f0f1d6;background:#355039}

@media(forced-colors:active){.node-stage[aria-pressed=true] .node-stage-mark{outline:3px solid Highlight;outline-offset:2px}.workspace-moment[data-current=true]{outline-color:Highlight}.workspace-moment[data-done=true]{border-width:3px}}

/* Chapter choices live in the single existing disclosure, never over the board. */
.chapter-picker-label{display:grid;gap:7px;margin:0 0 16px;font-size:12px;color:#e1e8c7}
.chapter-picker-label select{width:100%;min-height:44px;padding:10px 12px;border:1px solid #b8ca9366;border-radius:10px;background:#1d3e2d;color:#edf0d5;font:inherit}
.journey-navigation,.node-route-header{min-height:72px}
.journey-title,.node-route-header h2{min-height:2.24em;display:flex;align-items:center}
@media(max-width:760px){.journey-navigation,.node-route-header{min-height:74px}}
@media(max-width:440px){.journey-navigation,.node-route-header{min-height:78px}.journey-title,.node-route-header h2{min-height:3.36em}}
@media(forced-colors:active){.chapter-picker-label select{background:Canvas;color:CanvasText;border-color:CanvasText}}

.workspace-cue.has-ledger{flex-direction:column;gap:4px;padding-block:4px}
.capture-ledger{display:flex;justify-content:center;align-items:center;gap:16px;min-height:28px;font:600 12px/1.4 system-ui,sans-serif;color:#e3eac9}
.capture-ledger-group{display:flex;align-items:center;gap:3px}.capture-ledger img{height:25px;width:25px;object-fit:contain;filter:drop-shadow(0 1px 1px #c7d59a88)}
.capture-ledger[hidden]{display:none}

/* Route stages own their treatment; generic segmented filters never style them. */
.node-route-header .node-stage-list{flex:0 0 auto;min-width:0;align-items:center}
.node-route-header .node-stage,.journey-stage{border-radius:10px;box-shadow:none;transition:color 180ms ease}
.node-route-header .node-stage:hover .node-stage-mark{border-color:#e5eabd;box-shadow:0 0 0 3px #d6e1ab14}
.node-route-header .node-stage[aria-pressed=true]{background:transparent;color:#f0edcf;box-shadow:none}
.node-stage-mark{transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
/* Preserve square geometry and the original artwork; improve small-board legibility. */
#garden-stage .coordinate{font-size:10px;line-height:1;font-weight:700;text-shadow:0 1px 0 #eff3d966}
#garden-stage .coordinate.rank{top:3px;left:3px}
#garden-stage .coordinate.file{right:3px;bottom:3px}
#garden-stage .board-frame{box-shadow:0 18px 35px -17px #03160ee6,0 2px 0 #0c2118,inset 0 1px 1px #ffefc077}
#garden-stage .interactive-piece.is-moving{z-index:5}
#garden-stage .interactive-piece-art,#garden-stage .board-square img{position:absolute;inset:-3% 0 3%;width:100%;height:100%}
#garden-stage :is(.piece-art,.interactive-piece-art){filter:drop-shadow(0 2px 1px #12291b80)}
#garden-stage .is-white :is(.piece-art,.interactive-piece-art){filter:drop-shadow(0 2px 1px #12291b80) drop-shadow(0 -1px 0 #ffffff99)}
@media(prefers-reduced-motion:reduce){.node-route-header .node-stage,.node-stage-mark{transition:none!important}}
.effects-paused .node-route-header .node-stage,.effects-paused .node-stage-mark{transition:none!important}
@media(forced-colors:active){#garden-stage .coordinate{text-shadow:none}.node-route-header .node-stage[aria-pressed=true]{color:CanvasText}.node-stage-mark{border-color:CanvasText}}

/* Long lesson names wrap at text zoom instead of pushing the stage controls away. */
.journey-title,.node-route-header h2{min-width:0;overflow-wrap:anywhere}

/* Feedback is local to the attempted squares; it is not an answer hint. */
#garden-stage .board-square.attempt-from:before{content:'';position:absolute;inset:6px;border:2px solid #213d32;border-radius:5px;pointer-events:none;z-index:3}
#garden-stage .board-square.attempt-to:after{content:'';position:absolute;inset:6px;border:2px dashed #213d32;border-radius:5px;background:transparent;pointer-events:none;z-index:3}
.workspace-cue[data-feedback-kind]:not([data-feedback-kind=""]){flex-direction:column;gap:2px;padding-block:4px}
.workspace-cue[data-feedback-kind]:not([data-feedback-kind=""])>strong,.workspace-cue[data-feedback-kind]:not([data-feedback-kind=""]) #sample-feedback-title{display:block;font:700 11px/1.2 system-ui,sans-serif;color:#d7e4b9;margin:0;letter-spacing:.02em}
@media(forced-colors:active){#garden-stage .board-square.attempt-from:before,#garden-stage .board-square.attempt-to:after{border-color:CanvasText}.workspace-cue[data-feedback-kind] strong{color:CanvasText!important}}

.workspace-action{gap:10px}
#garden-stage .workspace-action>.inspection-return{position:static;inset:auto;width:auto;height:auto;min-width:44px;min-height:44px;flex:0 0 auto;padding:10px 8px;border:0;border-radius:8px;background:transparent;color:#e2e9c5;font:700 11px/1.4 system-ui,sans-serif;text-decoration:underline;text-underline-offset:4px}
#garden-stage .workspace-action>.inspection-return:focus-visible{outline:3px solid #f1d58a;outline-offset:3px}

.workspace-cue.has-ledger[data-feedback-kind]:not([data-feedback-kind=""]){gap:0}

/* Chapter progress uses the existing node caption, with stable two-line space. */
.tree-node-summary{min-height:2.6em}

/* Save health occupies reserved text space, never a panel over the board. */
.tree-node[data-optional=true] .tree-node-summary{min-height:3.9em}
.storage-notice-slot{min-height:32px;width:min(860px,100%);margin:0 auto 4px}
#storage-notice.storage-notice{border:0;border-radius:0;background:none;color:#f0c29f;padding:0;margin:0;font-size:11px;line-height:1.454545;text-align:center;overflow-wrap:anywhere}
.workspace-progress-state{display:grid;grid-template-rows:12px 16px;align-items:center;justify-items:end;flex:none}
.workspace-save-note{font-size:10px;line-height:16px;color:#f0c29f;margin:0;white-space:nowrap}
.workspace-progress-state .workspace-moments{grid-row:1}.workspace-save-note{grid-row:2}
.tree-node[data-save-issue=true] .tree-node-summary{color:#f0c29f}
@media(forced-colors:active){#storage-notice.storage-notice,.workspace-save-note,.tree-node[data-save-issue=true] .tree-node-summary{color:CanvasText}}


/* Presentation updates must not resize the page. The cue itself scrolls when
   text zoom or unusually long feedback needs more room, never clipping text. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}
.workspace-top{display:grid;grid-template-columns:minmax(0,1fr) auto;font-size:11px;min-height:2.8em}
.workspace-mode{min-width:0;min-height:2.8em;display:flex;align-items:center;overflow-wrap:anywhere}
.workspace-mode:before{flex:none}
.workspace-progress-state{font:10px/1.6 system-ui,sans-serif;grid-template-rows:1.2em 1.6em}
.workspace-save-note,.workspace-save-reserve{grid-row:2;grid-column:1;font:inherit;white-space:nowrap}
.workspace-save-reserve{visibility:hidden;pointer-events:none}
.workspace-title-slot{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.workspace-title-slot>*{grid-area:1/1}
.workspace-title-reserve{visibility:hidden;pointer-events:none}
.node-route-header .workspace-title-slot{flex:1 1 340px;max-width:340px}
.node-route-header .workspace-title-slot h2{max-width:none}
.journey-identity{flex:1 1 340px;max-width:340px}
.storage-notice-slot{display:grid;grid-template-columns:minmax(0,1fr)}
#storage-notice.storage-notice,.storage-notice-reserve{grid-area:1/1;border:0;border-radius:0;background:none;padding:0;margin:0;font-size:11px;line-height:1.454545;text-align:center;overflow-wrap:anywhere}
.storage-notice-reserve{visibility:hidden;pointer-events:none}
#garden-stage .workspace-cue{height:var(--node-cue-height);min-height:var(--node-cue-height);max-height:var(--node-cue-height);overflow:auto;scrollbar-gutter:stable both-edges;flex-direction:column;align-items:safe center;justify-content:safe center;flex-shrink:0;overscroll-behavior:auto}
#garden-stage .workspace-cue:focus-visible{outline:2px solid #f1d58a;outline-offset:2px}
#garden-stage .workspace-cue>*{flex-shrink:0;max-inline-size:100%;min-inline-size:0;overflow-wrap:anywhere}
@media(max-width:760px){.node-route-header .workspace-title-slot,.journey-identity{max-width:45%}}
@media(max-width:440px){.workspace-top{grid-template-columns:minmax(0,1fr);gap:0;min-height:0}.workspace-mode{min-height:2.8em}.workspace-moments,.workspace-progress-state{justify-self:end}.workspace-top>.workspace-moments{min-height:28px}}
@media(forced-colors:active){#garden-stage .workspace-cue:focus-visible{outline-color:Highlight}}

.workspace-action-slot{display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,var(--node-board));margin:0 auto}
.workspace-action-slot>*{grid-area:1/1}
.workspace-action-reserve{visibility:hidden;pointer-events:none}
.workspace-action-reserve .workspace-primary{text-align:center;font-family:inherit}

/* Requested tools replace the cue, never expand the page or sit over a board. */
#garden-stage .workspace-cue[data-tools-open=true]{padding:4px 8px;justify-content:safe start;text-align:left}
#garden-stage .workspace-cue[data-tools-open=true]>:not(.workspace-tool-surface){display:none!important}
#garden-stage .workspace-tool-surface{width:100%;min-width:0;max-width:100%;margin:0;font:13px/1.5 system-ui,sans-serif;text-align:left}
#garden-stage .workspace-tool-source{display:none!important}
#garden-stage .has-contextual-tools{margin-top:3px;margin-bottom:20px}
#garden-stage .has-contextual-tools>summary{min-width:100px;text-align:center;text-decoration:none;border:1px solid #b8cb8b44;border-radius:999px;padding:10px 16px}
#garden-stage .workspace-tool-menu,#garden-stage .workspace-tool-items{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:4px;padding:0;margin:0}
#garden-stage .workspace-tool-menu>.workspace-tool-button{flex:1 1 100px;max-width:145px}
#garden-stage .workspace-tool-item{display:flex;align-items:stretch;max-width:100%;min-width:0}
#garden-stage .workspace-tool-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;min-height:44px;margin-bottom:4px}
#garden-stage .workspace-tool-title{flex:1 1 60px;min-width:0;overflow-wrap:anywhere;font-size:12px;font-weight:600;color:#e6edce}
#garden-stage .workspace-tool-header>.workspace-tool-button{flex:0 1 auto;white-space:normal;overflow-wrap:anywhere}
#garden-stage .workspace-tool-surface :is(button,select,summary){box-sizing:border-box;min-height:44px;min-width:44px;max-width:100%;margin:0;padding:8px 12px;border:1px solid #c3d59a55;border-radius:10px;background:#213e2c;color:#edf1d6;font:600 12px/1.35 system-ui,sans-serif;letter-spacing:0;text-transform:none;box-shadow:none;white-space:normal;overflow-wrap:anywhere}
#garden-stage .workspace-tool-surface button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#garden-stage .workspace-tool-surface button:hover{background:#365138;border-color:#dce9af}
#garden-stage .workspace-tool-surface button[aria-pressed=true]{background:#d7e2b5;color:#243b29;border-color:#edf0cb}
#garden-stage .workspace-tool-surface svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#garden-stage .workspace-tool-surface :is(label,.speed-control){display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;margin:0;font:600 12px/1.4 system-ui,sans-serif;color:#e5edca}
#garden-stage .workspace-tool-surface input[type=checkbox]{width:22px;height:22px;flex:none}
#garden-stage .workspace-tool-surface label:has(input){min-height:44px}
#garden-stage .workspace-tool-surface p,#garden-stage .workspace-tool-surface :is(#step-caption,#sample-feedback-text){font:400 13px/1.55 system-ui,sans-serif!important;letter-spacing:0;color:#e7edcf!important;margin:0 0 8px!important;max-width:none}
#garden-stage .workspace-tool-detail-source{display:block;width:100%;min-width:0;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#e5edca}
#garden-stage details.workspace-tool-detail-source>summary{display:none}
#garden-stage .workspace-tool-detail-source :is(.eyebrow,.prediction-intro,.observation-companion,.comparison-intro,.lesson-card-number,.lesson-card-decoration,.lesson-card small,.sample-card-number,.sample-card small,.clip-board){display:none}
#garden-stage .workspace-tool-detail-source :is(.lesson-picker,.sample-picker,.readiness-clips,.prediction-choices,.step-picker){display:flex;flex-wrap:wrap;justify-content:center;gap:6px;overflow:visible;max-height:none;padding:0;margin:0}
#garden-stage .workspace-tool-detail-source :is(.lesson-card,.sample-card,.readiness-clips button){flex:1 1 140px;width:auto;min-width:44px;min-height:44px;height:auto;padding:10px 12px;text-align:left}
#garden-stage .workspace-tool-detail-source :is(h2,h3,strong){font:600 13px/1.5 system-ui,sans-serif;color:#eef1d5;margin:0 0 6px}
#garden-stage .workspace-tool-detail-source .comparison-facts{display:block;margin:0}
#garden-stage .workspace-tool-detail-source .comparison-facts>div{display:block;padding:0;margin:0 0 6px;border:0}
#garden-stage .workspace-tool-detail-source .comparison-facts dt{font-size:10px}
#garden-stage .workspace-tool-detail-source .comparison-facts dd{margin:0;font-size:13px}
#garden-stage .workspace-tool-surface :is([id$=-fen],#fen-text){font:11px/1.6 ui-monospace,monospace!important;overflow-wrap:anywhere;white-space:normal}
#garden-stage .workspace-tool-surface :focus-visible{outline:3px solid #f1d58a;outline-offset:-3px}
@media(max-width:440px){#garden-stage .workspace-tool-menu>.workspace-tool-button{flex-basis:42%;max-width:none}.workspace-tool-title{font-size:11px}}
@media(forced-colors:active){#garden-stage .workspace-tool-surface :is(button,select,summary){background:Canvas;color:CanvasText;border-color:CanvasText}#garden-stage .workspace-tool-surface p{color:CanvasText!important}#garden-stage .workspace-tool-surface :focus-visible{outline-color:Highlight}}

.has-contextual-tools>summary{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.workspace-tool-detail-source:is(.lesson-picker,.sample-picker,.readiness-clips,.prediction-choices,.step-picker){display:flex!important;flex-wrap:wrap!important;gap:4px!important;overflow:visible!important}
.workspace-tool-detail-source :is(.sample-icon,.sample-card small){display:none!important}
/* v72: a numeric answer remains in the existing on-board note, never a side panel. */
.process-gain-input{width:5.5rem;min-height:44px;border:1px solid #a8b997;border-radius:12px;background:#173c29;color:#fff4d9;font:inherit;font-size:1.05rem;text-align:center;touch-action:manipulation}
.process-gain-input:focus-visible{outline:3px solid #e7cf8c;outline-offset:2px}

/* Set answers are not pending drags: keep their confirmation controls available. */
.board-square.set-selected{outline:3px double #173c29;outline-offset:-6px;box-shadow:inset 0 0 0 5px #dce8c4}

/* The existing reserved footer slot confirms only verified background commits. */
#storage-notice.storage-notice[data-save-state=saved]{color:#e3ebca;opacity:.72;transition:opacity .5s ease;pointer-events:none}
#storage-notice.storage-notice[data-save-state=saved][data-save-fading=true]{opacity:0}
#storage-notice.storage-notice[data-save-state=error]{opacity:1;transition:none}
@media(prefers-reduced-motion:reduce){#storage-notice.storage-notice[data-save-state=saved]{transition:none}}
@media(forced-colors:active){#storage-notice.storage-notice[data-save-state=saved]{color:CanvasText;opacity:1}}
/* Completion choices stay inside the existing on-board note footprint. */
.lesson-complete{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;max-width:100%}
.lesson-complete[hidden]{display:none!important}
.lesson-complete-title{flex-basis:100%;font-size:.9rem;text-align:center}
.lesson-complete .rules-choice{min-height:44px;white-space:normal}


/* board-drag.css */
/* Only a learner-piece start consumes a touch gesture; the page still scrolls elsewhere. */
.interactive-board .board-square[data-selectable="true"]{touch-action:none;cursor:grab}
.interactive-board.is-dragging,.interactive-board.is-dragging .board-square{cursor:grabbing}
.board-drag-ghost{position:fixed;left:0;top:0;z-index:200;pointer-events:none!important;user-select:none;contain:layout style;will-change:transform;transition:none!important;animation:none!important}
.board-drag-ghost img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 4px #061d1570)}
.interactive-piece.board-drag-source{opacity:.16!important}
.board-square[data-drag-source] .square-piece-fallback{opacity:.16!important}


/* move-tip.css */
/* Readable local annotation only. Existing accessible cue remains unchanged. */
.move-tip-layer{position:absolute;z-index:12;pointer-events:none!important;overflow:hidden;contain:layout style;user-select:none}
.move-tip-layer,.move-tip-layer *{pointer-events:none!important}
.move-tip{position:absolute;display:block;width:max-content;max-width:242px;box-sizing:border-box;margin:0;padding:5px 9px;border:1px solid #dfebc6b3;border-radius:7px;background:#163b2bf2;color:#f7f6dc;font:600 12px/1.3 system-ui,sans-serif;letter-spacing:0;text-align:center;white-space:normal;overflow-wrap:normal;box-shadow:0 2px 7px #061e1c30;pointer-events:none!important;transition:none!important;animation:none!important}
.move-tip[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.move-tip,.move-tip-layer{transition:none!important;animation:none!important;transform:none!important}}
@media(forced-colors:active){.move-tip{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}}


/* rules-lessons.css */
/* A rule choice uses the same anchored action zone, never a dialog or new board. */
.rules-workspace{--node-board:clamp(260px,calc(100svh - 500px),540px)}
.rules-choice-actions{display:flex;width:100%;box-sizing:border-box;flex-wrap:wrap;gap:6px;align-content:center;align-items:stretch}
.rules-choice{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:5px;flex:1 1 65px;min-width:44px;min-height:44px;max-width:100%;padding:10px 8px;border:1px solid #c4d59b77;border-radius:12px;background:#24432f;color:#eff1d5;font:600 12px/1.4 system-ui,sans-serif;text-align:center;overflow-wrap:anywhere}
.rules-choice:hover{background:#3c5939;border-color:#e7e9b7}
.rules-choice img{width:38px;height:38px;object-fit:contain;pointer-events:none}
.rules-choice-actions[data-choice-kind=promotion] .rules-choice{flex-direction:column;flex-basis:46px;padding:6px 3px;font-size:10px;gap:2px}
.rules-choice-actions[data-choice-kind=promotion] .rules-choice:last-child{flex-basis:100%;min-height:44px;padding:6px}
.rules-choice-reserve{visibility:hidden;pointer-events:none}
#garden-stage .rules-choice:focus-visible{outline:3px solid #f1d58a;outline-offset:3px}
@media(max-width:760px){.rules-workspace{--node-board:clamp(260px,calc(100svh - 540px),500px)}}
@media(max-width:440px){.rules-workspace{--node-board:clamp(240px,min(calc(100vw - 32px),calc(100svh - 550px)),400px)}}
@media(forced-colors:active){.rules-choice{color:ButtonText;background:ButtonFace;border-color:ButtonText}.rules-choice:focus-visible{outline-color:Highlight}}

.tree-nodes > [data-node=rules]{grid-column:1/-1}.tree-node[data-node=rules] .tree-topic-art{width:66%;height:66%;object-fit:contain;filter:drop-shadow(0 8px 8px #07180d80)}

/* All current mode labels share one intrinsic envelope, including text zoom. */
.rules-mode-slot{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.rules-mode-slot>.workspace-mode{grid-area:1/1}
.rules-mode-reserve{visibility:hidden;pointer-events:none}

/* Persistent selected choices: a visible, non-color selection cue without reflow. */
.rules-choice-actions:is([data-choice-kind^="structural-"],[data-choice-kind^="opening-"],[data-choice-kind^="foundations-"]) .rules-choice[aria-pressed]{position:relative}
.rules-choice-actions:is([data-choice-kind^="structural-"],[data-choice-kind^="opening-"],[data-choice-kind^="foundations-"]) .rules-choice[aria-pressed="true"]{background:#38583b;box-shadow:inset 0 0 0 2px #eed99c;text-decoration:underline;text-underline-offset:3px}
.rules-choice-actions:is([data-choice-kind^="structural-"],[data-choice-kind^="opening-"],[data-choice-kind^="foundations-"]) .rules-choice[aria-pressed="true"]::after{content:'✓';position:absolute;right:3px;top:1px;font-size:10px;line-height:1;color:#fff3c8;pointer-events:none}
@media(forced-colors:active){.rules-choice-actions:is([data-choice-kind^="structural-"],[data-choice-kind^="opening-"],[data-choice-kind^="foundations-"]) .rules-choice[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-3px}.rules-choice-actions:is([data-choice-kind^="structural-"],[data-choice-kind^="opening-"],[data-choice-kind^="foundations-"]) .rules-choice[aria-pressed="true"]::after{color:ButtonText}}

/* Optional saved-history status shares the existing on-board note, never a new layout row. */
.opening-legacy-notice{display:flex;align-items:center;flex-wrap:wrap;gap:6px;width:100%;color:#f2dfbb;font:500 12px/1.4 system-ui,sans-serif;pointer-events:none}
.opening-legacy-notice p{margin:0;flex:1 1 120px}
.opening-legacy-notice .rules-choice{flex:0 1 auto;pointer-events:auto}
.opening-legacy-notice[hidden]{display:none!important}


/* forcing-path.css */
/* Real lesson previews and Fresh-only readiness, without moving node hit targets. */
.tree-node[data-concept=true] .tree-concept-preview{width:84%;height:84%;border-radius:10px;overflow:hidden;filter:drop-shadow(0 3px 3px #061b1055)}
.tree-node[data-concept=true] .tree-orb{background:radial-gradient(circle at 48% 35%,#78905c99,#203c2e 70%)}
.tree-node[data-fresh-unlocked=false] .tree-orb:after{border-color:#c4c8a449;border-style:dashed}
.tree-node[data-fresh-unlocked=true] .tree-orb:after{border-color:#cfe4a16b}
.tree-node[data-concept=true] .tree-node-summary{min-height:3.9em;max-width:100%;letter-spacing:.02em;line-height:1.3}
.tree-region-art .tree-concept-preview{width:80%;height:80%;border-radius:10px;overflow:hidden}
.tree-connection[data-kind=prerequisite] .tree-edge-line{stroke-dasharray:5 5;opacity:.55}
.tree-connection[data-fresh-unlocked=true] .tree-edge-line{stroke-dasharray:none;opacity:.95}
.node-stage[data-locked=true] .node-stage-mark{position:relative;font-size:0}
.node-stage[data-locked=true] .node-stage-mark:before{content:'';position:absolute;width:9px;height:7px;border:1.5px solid currentColor;border-radius:2px;left:50%;top:50%;transform:translate(-50%,-15%)}
.node-stage[data-locked=true] .node-stage-mark:after{content:'';position:absolute;width:5px;height:6px;border:1.5px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0;left:50%;top:50%;transform:translate(-50%,-95%)}
@media(forced-colors:active){.tree-node[data-fresh-unlocked=false] .tree-orb:after,.tree-node[data-fresh-unlocked=true] .tree-orb:after{border-color:CanvasText}.tree-connection[data-kind=prerequisite] .tree-edge-line{stroke:CanvasText;filter:none}}


/* tree-shell.css */
/* The garden is the page. Learning scenes share its stationary backdrop. */
html body,html[data-mode=path] body,html:not([data-mode=path]) body{height:100vh;height:100dvh;min-height:420px;display:grid;grid-template-rows:auto minmax(240px,1fr) auto;overflow:auto}
html main.wrap{position:relative;width:100%;max-width:none;min-width:0;min-height:0;margin:0;padding:0;display:flex;flex-direction:column}
html #garden-stage{flex:1;min-height:0;height:100%;position:relative;isolation:isolate}
html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{width:100%;min-height:66px;margin:0;padding:10px 22px;border-radius:0;border:0;border-bottom:1px solid #c5d59c26;box-shadow:none;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#0c251dd9}
html .site-header .brand{position:relative;display:grid;place-items:center;min-height:44px;min-width:180px;width:180px;font:28px/1.2 Georgia,serif}
.brand-wordmark{position:relative;z-index:1;width:180px;height:auto;object-fit:contain}
.brand-fallback{position:absolute;z-index:0;inset:0;display:grid;place-items:center;color:#ede6c7}
.brand:has(.brand-wordmark:not([data-failed])) .brand-fallback{visibility:hidden}
.header-garden-label{font:italic 15px/1.4 Georgia,serif;color:#cbd8b6;letter-spacing:.03em}
html .site-header .motion-button{min-height:44px;min-width:44px;margin:0;padding:6px 8px;color:#cbd8b6}
html #view-path{height:100%;min-height:0;margin:0;padding:0}
html .tree-world{height:100%;min-height:0;overflow:hidden;isolation:isolate;border:0;border-radius:0;background:transparent;box-shadow:none}
html .tree-world:after{background:radial-gradient(ellipse at center,#0e28142b,#061a153f)}
html .tree-map-viewport{position:absolute;inset:0;height:100%;min-height:0;border:0;border-radius:0;overflow:hidden;contain:layout paint;background:transparent}
html .tree-map-viewport[data-camera-mode=detail]{touch-action:pinch-zoom}
html .tree-map-viewport .tree-pan-surface{touch-action:pinch-zoom}
html .tree-map-viewport .tree-garden{--tree-mobile:0;position:absolute;width:3000px;min-width:0;max-width:none;height:3150px;padding:0;margin:0;left:0;top:0;transform-origin:0 0}
html .tree-garden[data-spatial-tree=true] .tree-nodes{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;margin:0}
html .tree-garden[data-spatial-tree=true] .tree-node{position:absolute;display:block;width:220px;max-width:none;min-height:260px;grid-column:auto;margin:0;padding:0;scroll-margin:0}
html .tree-garden[data-spatial-tree=true] .tree-orb{width:144px;height:144px}
html .tree-garden[data-spatial-tree=true] .tree-topic-art{width:122%;height:122%;object-fit:contain}
html .tree-garden[data-spatial-tree=true] [data-node=rules] .tree-topic-art{width:75%;height:75%}
html .tree-garden[data-spatial-tree=true] .tree-node-label{font-size:22px;line-height:1.18;margin-top:21px;max-width:220px;overflow-wrap:anywhere}
html .tree-garden[data-spatial-tree=true] .tree-node-summary{font-size:11px;line-height:1.4;letter-spacing:.02em;max-width:220px;margin-top:8px;color:#d1ddbe}
html .tree-garden[data-spatial-tree=true] .tree-edge-line{stroke-width:1.6;filter:none;opacity:.65}
html .tree-garden[data-spatial-tree=true] .tree-edge-ground{stroke-width:5;opacity:.13;filter:blur(1px)}
html .tree-garden[data-spatial-tree=true] .tree-connection[data-backbone=false]{opacity:0;pointer-events:none}
html .tree-garden[data-spatial-tree=true] .tree-connection[data-focused=true],html .tree-garden[data-spatial-tree=true] .tree-connection[data-recommended-route=true],html .tree-garden[data-spatial-tree=true] .tree-connection[data-relationship-next=true]{opacity:1}
html .tree-garden[data-spatial-tree=true] .tree-connection[data-recommended-route=true] .tree-edge-line,html .tree-garden[data-spatial-tree=true] .tree-connection[data-relationship-next=true] .tree-edge-line{stroke:#e7d6a0;opacity:1;filter:drop-shadow(0 0 3px #e7d6a044)}
html .tree-camera-toolbar{position:absolute;z-index:4;left:50%;bottom:16px;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;gap:6px;padding:8px;border:1px solid #b5c89438;border-radius:28px;background:#102b22ed;box-shadow:0 9px 30px #0417104d;flex-wrap:nowrap}
html .tree-camera-toolbar button{white-space:nowrap;min-width:44px;padding-inline:12px}
html .tree-camera-toolbar #tree-browse-toggle{min-width:0}
html .tree-toolbar{position:absolute;z-index:4;right:20px;top:16px;max-width:calc(100% - 40px);margin:0;padding:0;display:block;pointer-events:none}
html .tree-next-button{pointer-events:auto;min-height:44px;margin:0;padding:10px 18px;background:#163628ed;border-color:#d4d7956b;font-size:12px}
html .tree-overview{padding-top:90px;padding-bottom:100px;background:#0d281d77}
html .tree-catalog{max-width:720px;padding:80px 28px 100px;background:#102b22ed;overflow:auto}
html .tree-catalog>label{font-size:25px}
html #tree-catalog-results{flex:1 0 auto;overflow:visible;min-height:0}
.tree-catalog-extras{font-size:12px;color:#c5d5b3;padding-top:12px}
.tree-catalog-extras>p{font-size:11px;color:#b7cba7;margin:6px 0}
.tree-catalog-extras>details{border-top:1px solid #c2d19a22;padding:8px 0}
.tree-catalog-extras summary{min-height:44px;padding:10px 2px;cursor:pointer;color:#dbe6c8}
.tree-catalog-extras details p,.tree-catalog-extras details ul{line-height:1.7;margin:12px 0}
.tree-catalog-extras .tree-progress{justify-content:flex-start;padding:10px 0;gap:24px}
.tree-catalog-extras .tree-resume{margin:4px 0;padding:0;border:0}
html .garden-footer{width:100%;min-height:54px;margin:0;padding:5px 22px;display:grid;grid-template-columns:1fr minmax(160px,2fr) 1fr;gap:16px;align-items:center;border:0;border-top:1px solid #c1d19c22;background:#0e261ddc;color:#c9d4b6;font-size:12px}
.footer-brand{display:flex;align-items:center;gap:12px;font:19px/1.4 Georgia,serif}
#garden-credits{padding:8px 2px;min-height:44px;color:#b7c8a4;background:none;font:10px/1.4 Arial,sans-serif}
.garden-footer-center{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
html #garden-tip,html .garden-tip-reserve,html .garden-footer .storage-notice-slot{grid-area:1/1;min-height:36px;width:100%;margin:0;display:grid;align-content:center;text-align:center;line-height:1.4}
html #garden-tip,html .garden-tip-reserve{font:italic 13px/1.4 Georgia,serif;color:#d3ddbd}
html .garden-footer .storage-notice-slot{pointer-events:none}
html .garden-footer .storage-notice-slot:has(#storage-notice:not([hidden])){pointer-events:auto}
.garden-footer-center:has(#storage-notice:not([hidden])) #garden-tip{visibility:hidden}
html .garden-footer .valorem-link{justify-self:end;min-height:44px;display:flex;align-items:center;gap:5px;white-space:nowrap;font:12px/1.4 Arial,sans-serif}
html #tree-back{display:none!important}
@media(max-width:600px){html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{padding:5px 12px;min-height:54px;gap:8px}html .site-header .brand{width:146px;min-width:146px}.brand-wordmark{width:146px}.header-garden-label{display:none}html .site-header .motion-button #motion-label{display:none}html .tree-camera-toolbar{width:calc(100% - 20px);max-width:420px;bottom:10px;flex-wrap:wrap;justify-content:center;padding:6px;border-radius:20px;gap:4px}html .tree-camera-toolbar button{padding-inline:10px;font-size:11px}.tree-zoom-controls{order:-1}html #tree-zoom-status{width:48px}html .tree-toolbar{right:12px;top:12px;max-width:calc(100% - 24px)}html .tree-next-button{font-size:11px;padding:9px 13px}html .tree-catalog{padding:74px 16px 125px}html .tree-overview{padding:80px 18px 130px}html .garden-footer{padding:3px 10px;gap:8px;grid-template-columns:auto minmax(0,1fr) auto;min-height:58px}.footer-brand{font-size:15px;gap:0;flex-direction:column;align-items:flex-start}#garden-credits{min-height:22px;padding:1px 0;font-size:9px}html #garden-tip,html .garden-tip-reserve{font-size:11px}html .garden-footer .valorem-link{font-size:10px}.valorem-link span{display:none}}
@media(prefers-reduced-motion:reduce){html .tree-camera-moving{will-change:auto}}
@media(forced-colors:active){html .site-header,html .tree-camera-toolbar,html .tree-catalog,html .tree-next-button,html .garden-footer{background:Canvas;color:CanvasText;border-color:CanvasText}.brand-wordmark{display:none}.brand .brand-fallback{visibility:visible!important}html .tree-garden[data-spatial-tree=true] .tree-edge-line{stroke:CanvasText;filter:none}html .tree-garden[data-spatial-tree=true] .tree-edge-ground{display:none}}

.garden-tip-reserve{visibility:hidden;pointer-events:none;user-select:none}

/* Camera bar stays action-only; search and credits live in the footer entry. */
html .tree-camera-toolbar #skill-tree-next{min-width:100px}
html .tree-catalog>#tree-browse-toggle{align-self:flex-start;min-width:0;min-height:44px;padding:9px 14px;margin:0 0 12px;border:1px solid #b9c89555;border-radius:20px;background:#173326;color:#ecedcf;font:12px/1.4 Arial,sans-serif}
html .tree-catalog>#tree-browse-toggle:focus-visible{outline:3px solid #efdc9b;outline-offset:3px}

/* A node starts the same pan gesture as empty ground after the movement threshold.
   Native pinch zoom remains browser-owned; text/image dragging is not a lesson. */
html .tree-map-viewport[data-camera-mode=detail] .tree-node-button{touch-action:pinch-zoom;user-select:none;-webkit-user-select:none}
html .tree-map-viewport[data-camera-mode=detail] .tree-node-button img{-webkit-user-drag:none;pointer-events:none}


/* lesson-scene.css */
/* The host owns the viewport shell and definite stage height. */
.lesson-scene{position:absolute;inset:0;z-index:40;box-sizing:border-box;display:grid;align-items:start;justify-items:center;min-height:0;padding:16px 24px 24px;isolation:isolate;pointer-events:auto}
.lesson-scene[hidden]{display:none!important}
.lesson-scene-backdrop{position:absolute;inset:0;z-index:-1;background:#071a144d}
.lesson-scene-frame{position:relative;box-sizing:border-box;width:min(var(--lesson-scene-width,1040px),100%);max-height:100%;min-width:0;min-height:0;margin:0;padding:22px 20px 16px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border:1px solid #c4d39b55;border-radius:26px;background:#102b22f7;box-shadow:0 28px 80px #03160d80,0 0 55px #c0d18c12;transform-origin:0 0;outline:none}
.lesson-scene-frame:focus-visible{outline:3px solid #f1d58a;outline-offset:3px}
#garden-stage .lesson-scene-close{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:center;float:right;width:44px;height:44px;min-width:44px;min-height:44px;margin:-12px -10px -32px 0;padding:0;border:1px solid #d9e5ae99;border-radius:50%;background:#e7edc9;color:#183a2a;font:400 30px/1 system-ui,sans-serif;box-shadow:0 3px 14px #051b1577;cursor:pointer}
#garden-stage .lesson-scene-close:hover{background:#f4f6e3}
#garden-stage .lesson-scene-close:focus-visible{outline:3px solid #f1d58a;outline-offset:3px}
.lesson-scene-snapshot,.lesson-scene-snapshot *{pointer-events:none!important;user-select:none!important;animation:none!important;transition:none!important}
@media(max-width:600px){.lesson-scene{padding:10px 10px 16px}.lesson-scene-frame{padding:20px 10px 12px;border-radius:22px}#garden-stage .lesson-scene-close{margin:-10px -2px -32px 0}}
@media(prefers-reduced-motion:reduce){.lesson-scene-frame,.lesson-scene-snapshot{animation:none!important;transition:none!important}}
@media(forced-colors:active){.lesson-scene-backdrop{background:transparent}.lesson-scene-frame{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}#garden-stage .lesson-scene-close{background:ButtonFace;color:ButtonText;border-color:ButtonText;box-shadow:none}.lesson-scene-frame:focus-visible,#garden-stage .lesson-scene-close:focus-visible{outline-color:Highlight}}

/* One reserved header slot keeps X clear of every stage control and board. */
html .site-header>.lesson-scene-close{position:static;display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid #d9e5ae99;border-radius:50%;background:#e7edc9;color:#183a2a;font:400 30px/1 system-ui,sans-serif;cursor:pointer}
html .site-header>.lesson-scene-close:focus-visible{outline:3px solid #f1d58a;outline-offset:3px}
html .site-header .header-garden-label{flex:1;text-align:center}
@media(forced-colors:active){html .site-header>.lesson-scene-close{background:ButtonFace;color:ButtonText;border-color:ButtonText}}
/* Final, lesson-only cascade. One compact track; forest remains visible. */
#garden-stage .lesson-scene{inset:auto;left:var(--lesson-visible-left,0px);top:var(--lesson-visible-top,0px);width:var(--lesson-visible-width,100%);height:var(--lesson-visible-height,100%);padding:8px 12px 10px}
#garden-stage .lesson-scene-backdrop{background:#071a141f}
#garden-stage .lesson-scene-frame{--lesson-board-size:clamp(256px,calc(100dvh - 320px),760px);--node-cue-height:5.25rem;width:min(100%,var(--lesson-frame-width,calc(var(--lesson-board-size) + 42px)));max-width:100%;padding:10px 12px 12px;border-radius:18px;background:#102b2238;border-color:#c4d39b38;box-shadow:0 12px 36px #03160d30;overflow:auto;overscroll-behavior:auto;scrollbar-gutter:stable}
#garden-stage .lesson-scene .workspace-shell{--node-board:var(--lesson-board-size);--workspace-board-size:var(--lesson-board-size);width:100%;max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none}
#garden-stage .lesson-scene .workspace-board{--workspace-board-size:var(--lesson-board-size);width:100%;max-width:none;margin:0;padding:0}
#garden-stage .lesson-scene :is(.workspace-position,.board-aura,.workspace-top,.workspace-cue,.workspace-action-slot,.workspace-action){width:100%;max-width:none}
#garden-stage .lesson-scene :is(.journey-navigation,.node-route-header){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:60px;margin:0 0 6px;padding:6px 10px;border:0;border-radius:12px;background:#102b2299}
#garden-stage .lesson-scene :is(.journey-identity,.workspace-title-slot){min-width:0;max-width:none;width:auto}
#garden-stage .lesson-scene :is(.journey-title,.node-route-header h2){font-size:1.25rem;line-height:1.12;min-height:2.24em;max-width:none;margin:0;overflow-wrap:anywhere}
#garden-stage .lesson-scene :is(.journey-stage-list,.node-stage-list){gap:5px;min-width:0}
#garden-stage .lesson-scene :is(.journey-stage,.node-stage){min-width:44px;min-height:44px;padding:0;gap:3px;flex-direction:column;font-size:10px}
#garden-stage .lesson-scene .journey-stage-label{font-size:10px}
#garden-stage .lesson-scene :is(.journey-stage-mark,.node-stage-mark){width:24px;height:24px}
#garden-stage .lesson-scene .journey-stage-item+.journey-stage-item:before{top:12px;left:-5px;width:5px}
#garden-stage .lesson-scene .workspace-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-height:32px;margin:0 0 4px;padding:0 2px}
#garden-stage .lesson-scene .workspace-mode{min-height:2.8em;margin:0}
#garden-stage .lesson-scene .workspace-position .board-frame{padding:6px;border-radius:10px}
#garden-stage .lesson-scene .workspace-cue{height:var(--node-cue-height);min-height:var(--node-cue-height);max-height:var(--node-cue-height);margin:4px 0;padding:6px 10px;border-radius:10px;background:#102b2299;overflow:auto;overscroll-behavior:auto;scrollbar-gutter:stable both-edges}
#garden-stage .lesson-scene .workspace-cue :is(p,#step-caption,#sample-feedback-text){font:400 1.0625rem/1.35 Georgia,serif!important;max-width:100%;overflow-wrap:anywhere}
#garden-stage .lesson-scene .workspace-action-slot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch;margin:0}
#garden-stage .lesson-scene .workspace-action-slot>.workspace-action{grid-area:1/1;display:flex;gap:8px;align-items:center;min-width:0;min-height:44px;margin:0}
#garden-stage .lesson-scene .workspace-action-slot>.workspace-restart{grid-area:1/2;align-self:center}
#garden-stage .lesson-scene .workspace-primary{display:flex;align-items:center;justify-content:center;flex:1 1 0;width:auto;min-width:0;min-height:44px;margin:0;padding:10px 12px;white-space:normal;overflow-wrap:anywhere;font-size:.75rem;line-height:1.35}
#garden-stage .lesson-scene .workspace-restart{grid-column:2;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:10px 14px;border:1px solid #dce7b677;border-radius:999px;background:#17382cdd;color:#ecf0d0;font:700 .75rem/1.35 system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere}
#garden-stage .lesson-scene .workspace-restart:hover{background:#2c5039}
#garden-stage .lesson-scene .workspace-action>.inspection-return{flex:0 0 auto;min-width:44px;max-width:40%;overflow-wrap:anywhere}
#garden-stage .lesson-scene .workspace-action.rules-choice-actions{display:flex;grid-area:1/1;align-content:center}
/* Choice and reserve rows share the identical first-column width and wrapping. */
#garden-stage .lesson-scene .rules-choice-actions{min-width:0;max-width:100%}
#garden-stage .lesson-scene .workspace-restart:focus-visible{outline:3px solid #f1d58a;outline-offset:3px}
#garden-stage .lesson-scene .workspace-more{display:none!important}
@media(max-width:440px){#garden-stage .lesson-scene{padding:6px 5px 8px}#garden-stage .lesson-scene-frame{padding:8px 6px 10px}#garden-stage .lesson-scene :is(.journey-navigation,.node-route-header){padding-inline:6px;gap:6px}#garden-stage .lesson-scene :is(.journey-title,.node-route-header h2){font-size:1.0625rem}#garden-stage .lesson-scene .workspace-cue{padding-inline:6px}#garden-stage .lesson-scene .workspace-restart{padding-inline:10px}}
@media(forced-colors:active){#garden-stage .lesson-scene-backdrop{background:transparent}#garden-stage .lesson-scene-frame,#garden-stage .lesson-scene :is(.journey-navigation,.node-route-header,.workspace-cue){background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}#garden-stage .lesson-scene .workspace-restart{background:ButtonFace;color:ButtonText!important;border-color:ButtonText}#garden-stage .lesson-scene .workspace-restart:focus-visible{outline-color:Highlight}}
/* Keep the title and stages on the same reserved row at every viewport width. */
#garden-stage .lesson-scene .journey-identity{grid-column:1;grid-row:1}
#garden-stage .lesson-scene .journey-stages{grid-column:2;grid-row:1}

/* The live instruction precedes the board; its envelope never depends on text. */
#garden-stage .lesson-scene .workspace-cue{margin:0 0 6px;padding-block:6px}
#garden-stage .lesson-scene .workspace-action-slot{margin-top:6px;border-radius:12px;background:#102b2277}
/* Keep the forest untouched while making the inactive garden recede. */
#garden-stage .tree-garden,#garden-stage .tree-camera-toolbar{transition:opacity 180ms ease}
#garden-stage.lesson-scene-active .tree-garden{opacity:.22;pointer-events:none}
#garden-stage.lesson-scene-active .tree-camera-toolbar{opacity:.18;pointer-events:none}
html.effects-paused #garden-stage :is(.tree-garden,.tree-camera-toolbar),body.effects-paused #garden-stage :is(.tree-garden,.tree-camera-toolbar){transition:none}
@media(prefers-reduced-motion:reduce){#garden-stage :is(.tree-garden,.tree-camera-toolbar){transition:none}}
@media(forced-colors:active){#garden-stage .lesson-scene .workspace-action-slot{background:Canvas}}
/* A single live note and icon controls. No separate row beneath the board. */
#garden-stage .lesson-scene .workspace-note-slot{position:relative;width:100%;min-width:0;margin:0 0 6px;z-index:12}
#garden-stage .lesson-scene .workspace-note{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:stretch;width:100%;height:var(--node-cue-height);min-height:var(--node-cue-height);box-sizing:border-box;border:1px solid #c5d5a755;border-radius:12px;background:rgb(16 43 34 / 75%);box-shadow:0 3px 14px #071a1430;overflow:visible}
#garden-stage .lesson-scene .workspace-note.is-board-note{position:absolute;z-index:18;border-color:#d8e5ad99;box-shadow:0 4px 18px #071a1477}
#garden-stage .lesson-scene .workspace-note>.workspace-cue{width:100%;height:100%;min-height:0;max-height:100%;margin:0;padding:8px 8px;background:none;border:0;border-radius:12px 0 0 12px;overflow:auto;scrollbar-gutter:stable}
#garden-stage .lesson-scene .workspace-note>.workspace-action-slot{display:flex;align-items:center;gap:4px;width:96px;min-width:96px;max-width:96px;margin:0;padding:0 4px 0 0;background:none;border:0;box-sizing:border-box}
#garden-stage .lesson-scene .workspace-note .workspace-action-slot>.workspace-action{display:flex;flex:0 0 44px;align-items:center;justify-content:center;gap:0;width:44px;min-width:44px;min-height:44px;margin:0;padding:0}
#garden-stage .lesson-scene .workspace-note :is(.workspace-primary,.workspace-restart){display:flex;flex:0 0 44px;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border-radius:50%;font:400 28px/1 system-ui,sans-serif;overflow:visible}
#garden-stage .lesson-scene .workspace-note .workspace-primary{color:#163b29;background:#e1edb5;border:1px solid #f0f3c9;box-shadow:0 0 10px #dbea9e22}
#garden-stage .lesson-scene .workspace-note .workspace-primary:hover{background:#f0f5cf}
#garden-stage .lesson-scene .workspace-note .workspace-restart{color:#e5edc9;background:#17382c;border:1px solid #dae5b566;font-size:24px}
#garden-stage .lesson-scene .workspace-note .workspace-primary:focus-visible{outline:3px solid #f1d58a;outline-offset:3px}
#garden-stage .lesson-scene .workspace-note-choices{display:grid;width:100%;grid-template-columns:minmax(0,1fr);margin:0}
#garden-stage .lesson-scene .workspace-note-choices>*{grid-area:1/1}
#garden-stage .lesson-scene .workspace-note-choices>.rules-choice-actions{width:100%;max-width:100%;margin:4px 0 0}
#garden-stage .lesson-scene .workspace-note .inspection-return{position:absolute;right:100px;bottom:4px;min-width:44px;min-height:44px;margin:0;background:#17382c}
#garden-stage .lesson-scene .workspace-board:has(.workspace-note-slot) .move-tip-layer{display:none}
@media(forced-colors:active){#garden-stage .lesson-scene .workspace-note{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}#garden-stage .lesson-scene .workspace-note :is(.workspace-primary,.workspace-restart){background:ButtonFace;color:ButtonText!important;border-color:ButtonText;box-shadow:none}}
/* The first grid row stays reserved even when its live note is locally positioned. */
#garden-stage .lesson-scene .workspace-note-slot{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--node-cue-height) auto}
#garden-stage .lesson-scene .workspace-note{grid-row:1}
#garden-stage .lesson-scene .workspace-note-choices{grid-row:2}
#garden-stage .lesson-scene .workspace-note:has(.inspection-return){grid-template-columns:minmax(0,1fr) 144px}
#garden-stage .lesson-scene .workspace-note:has(.inspection-return)>.workspace-action-slot{width:144px;min-width:144px;max-width:144px}
#garden-stage .lesson-scene .workspace-note .workspace-action-slot>.workspace-action:has(.inspection-return){flex-basis:92px;width:92px;gap:4px}
#garden-stage .lesson-scene .workspace-note .inspection-return{position:static;flex:0 0 44px;width:44px;height:44px;min-width:44px;max-width:44px;padding:0;border-radius:50%;font-size:0}
#garden-stage .lesson-scene .workspace-note .inspection-return:before{content:'↩';font:400 22px/1 system-ui,sans-serif}

/* Completed moves only. Inert SVG, below notes and drag pieces. */
.move-trace-layer{position:absolute;z-index:1;overflow:hidden;pointer-events:none!important;user-select:none}
.move-trace-layer,.move-trace-layer *{pointer-events:none!important}
.move-trace-layer[hidden]{display:none!important}
.move-trace-route{fill:none;stroke:#fff1ac;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 13;stroke-dashoffset:0;filter:drop-shadow(0 1px 1px #173c29);animation:none}
.move-trace-layer.is-animated .move-trace-route{animation:move-trace-ants .85s linear infinite}
@keyframes move-trace-ants{to{stroke-dashoffset:-30}}
.effects-paused .move-trace-route{animation:none!important;stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){.move-trace-route{animation:none!important;stroke-dashoffset:0!important}}
@media(forced-colors:active){.move-trace-route{stroke:CanvasText;filter:none}}

.trace-replaced{visibility:hidden!important}

/* The aura is decorative ink, not content extending the lesson's scroll range. */
#garden-stage .lesson-scene .board-aura::before{bottom:0}
/* A local note wraps to its measured content, independently of the fixed dock
   reserve. The same board envelope is retained for See, Try and Fresh. */
#garden-stage .lesson-scene .workspace-note.is-board-note{height:auto;min-height:60px;align-self:start}
#garden-stage .lesson-scene .workspace-note.is-board-note>.workspace-cue{height:auto;max-height:none;overflow:visible;scrollbar-gutter:auto}
/* Generated decoration stays inside the original accessible native controls. */
.garden-button-art{position:relative;display:block;flex:0 0 44px;width:44px;height:44px;pointer-events:none}
.garden-button-art img{position:absolute;inset:0;width:44px;height:44px;max-width:none;object-fit:contain;opacity:0;pointer-events:none}
.garden-button-fallback{position:absolute;inset:0;display:grid;place-items:center;font:400 28px/1 system-ui,sans-serif}
.garden-button-art[data-ready=true] img{opacity:1}
.garden-button-art[data-ready=true] .garden-button-fallback{visibility:hidden}
#garden-stage .lesson-scene .workspace-note .workspace-primary.has-garden-chevron{background:#254a37;color:#f4e9c6;border-color:#d8c68a;box-shadow:0 0 10px #e5d38d22}
#garden-stage .lesson-scene .workspace-note .workspace-primary.has-garden-chevron:hover{background:#365c42}
@media(forced-colors:active){.garden-button-art img{display:none!important}.garden-button-art .garden-button-fallback{visibility:visible!important}#garden-stage .lesson-scene .workspace-note .workspace-primary.has-garden-chevron{background:ButtonFace;color:ButtonText;border-color:ButtonText}}

/* Reviewed tactical moves retain a solid fact line beneath the optional ants. */
.move-trace-solid{fill:none;stroke:#d7edaa;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #173c29);animation:none}
@media(forced-colors:active){.move-trace-solid{stroke:CanvasText;filter:none}}


/* lesson-header.css */
/* The top frame is reserved in garden and lessons; titles cannot resize it. */
html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{display:grid;grid-template-columns:180px minmax(140px,1fr) auto 44px;gap:16px;height:calc(1.25rem + 64px);min-height:calc(1.25rem + 64px);padding:10px 20px;align-items:center}
html .site-header>.brand{grid-column:1;grid-row:1}
html .site-header>.motion-button{grid-column:3;grid-row:1}
html .site-header>.lesson-scene-close{grid-column:4;grid-row:1}
.lesson-header-center{grid-column:2;grid-row:1;display:grid;grid-template-rows:1.25rem 44px;min-width:0;width:100%;height:calc(1.25rem + 44px);align-items:center}
.lesson-header-context{grid-row:1;display:flex;align-items:center;justify-content:center;min-width:0;gap:6px;height:1.25rem}
.lesson-header-center[data-active=false] .lesson-header-context{grid-row:1/-1}
html .site-header .header-garden-label{display:block;flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:italic .9375rem/1.25rem Georgia,serif;text-align:center}
.lesson-header-warning{flex:0 0 auto;line-height:1rem}
.lesson-header-warning .workspace-save-note{font:.625rem/1rem system-ui,sans-serif;white-space:nowrap;color:#f0c29f}
.lesson-header-phases{grid-row:2;display:flex;justify-content:center;min-width:0;height:44px}
html .site-header .is-header-route{display:block;position:relative;width:auto;min-width:0;min-height:0;max-width:100%;height:44px;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
html .site-header .is-header-route :is(.journey-identity,.workspace-title-slot,h2){position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;max-height:1px!important;padding:0!important;margin:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
html .site-header .is-header-route :is(.journey-stage-list,.node-stage-list){display:flex;gap:4px;height:44px;margin:0;padding:0;align-items:center;justify-content:center;background:none;border:0}
html .site-header .is-header-route :is(.journey-stage,.node-stage){display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;gap:0;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:#cbd8b6;font:600 .6875rem/1.2 system-ui,sans-serif}
html .site-header .is-header-route :is(.journey-stage-mark,.node-stage-mark),html .site-header .is-header-route .journey-stage-item:before{display:none}
html .site-header .is-header-route .journey-stage-label{font:inherit}
html .site-header .is-header-route :is([aria-current=step],[data-stage][aria-pressed=true]){color:#f3edcd;background:#38563a;border-color:#d3db9b99}
html .site-header .is-header-route button:focus-visible{outline:3px solid #f1d58a;outline-offset:1px}
/* These noninteractive descriptions remain available to the board's accessible name. */
#garden-stage .lesson-scene .workspace-top{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;max-height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:92px minmax(140px,1fr) 44px 44px;gap:4px;padding-inline:6px}html .site-header>.brand{width:92px;min-width:0}.site-header .brand-wordmark{width:92px}html .site-header .motion-button #motion-label{display:none}}
@media(max-width:360px){html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:minmax(0,1fr) 44px 44px;grid-template-rows:44px calc(1.25rem + 44px);height:calc(1.25rem + 100px);min-height:calc(1.25rem + 100px);gap:0 4px;padding:6px}html .site-header>.brand{width:min(120px,100%);min-width:0}.site-header .brand-wordmark{width:120px;max-width:100%}html .site-header>.motion-button{grid-column:2}html .site-header>.lesson-scene-close{grid-column:3}.lesson-header-center{grid-row:2;grid-column:1/-1}}
@media(forced-colors:active){html .site-header .is-header-route :is([aria-current=step],[data-stage][aria-pressed=true]){background:Canvas;color:CanvasText;border-color:Highlight}.lesson-header-warning .workspace-save-note{color:CanvasText}}

/* The old non-tree workspace selector has higher specificity than the generic
   header rule. Give the actual control one explicit, reserved grid cell. */
html .site-header>#motion-toggle{grid-column:3;grid-row:1;position:static;transform:none;justify-self:end}
@media(max-width:360px){html .site-header>#motion-toggle{grid-column:2;grid-row:1}}
/* Stable, separate cells for two preferences and the close control. */
html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:180px minmax(140px,1fr) auto auto 44px}
html .site-header>#visual-tips-toggle{grid-column:3;grid-row:1;position:static;transform:none;min-width:44px;height:44px;border:1px solid #aebd8e55;border-radius:12px;background:#1c392dcc;color:#e1e6c8;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;font-size:.75rem}
html .site-header>#visual-tips-toggle[aria-pressed=true]{border-color:#d3db9b99;background:#38563a}
html .site-header>#motion-toggle{grid-column:4;grid-row:1}
html .site-header>.lesson-scene-close{grid-column:5;grid-row:1}
html[data-visual-tips=off] .sample-guide-layer g>path,html[data-visual-tips=off] .move-trace-layer,html[data-visual-tips=off] .move-tip-layer{display:none!important}
@media(max-width:800px){html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:92px minmax(140px,1fr) 44px 44px 44px;gap:4px;padding-inline:6px}html .site-header>.brand{width:92px;min-width:0}.site-header .brand-wordmark{width:92px}html .site-header #motion-label,html .site-header .visual-tips-label{display:none}html .site-header>#visual-tips-toggle{padding:0}}
@media(max-width:420px){html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:minmax(0,1fr) 44px 44px 44px;grid-template-rows:44px calc(1.25rem + 44px);height:calc(1.25rem + 100px);min-height:calc(1.25rem + 100px);gap:0 4px;padding:6px}html .site-header>.brand{width:min(120px,100%);min-width:0}.site-header .brand-wordmark{width:120px;max-width:100%}html .site-header>#visual-tips-toggle{grid-column:2}html .site-header>#motion-toggle{grid-column:3}html .site-header>.lesson-scene-close{grid-column:4}.lesson-header-center{grid-row:2;grid-column:1/-1}}
@media(forced-colors:active){html .site-header>#visual-tips-toggle{background:Canvas;color:CanvasText;border-color:CanvasText}html .site-header>#visual-tips-toggle[aria-pressed=true]{border-color:Highlight}}

/* Previous position has a reserved header cell, never a third board-note target. */
html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:180px minmax(188px,1fr) auto auto 44px}
html .site-header .is-header-route.has-position-back{display:flex;align-items:center;gap:4px}
html .site-header .workspace-back-slot{display:grid;flex:0 0 44px;width:44px;height:44px}
html .site-header .workspace-back-slot[data-available=false]{visibility:hidden;pointer-events:none}
html .site-header .workspace-back{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:1px solid #cbd8b666;border-radius:10px;background:#183d2b;color:#f3edcd;font:400 30px/1 system-ui,sans-serif}
/* Completion occupies a fixed corner, without resizing any phase label or target. */
html .site-header .is-header-route :is(.journey-stage,.node-stage){position:relative}
html .site-header .is-header-route :is([data-complete=true]) :is(.journey-stage-mark,.node-stage-mark){display:block;position:absolute;right:2px;top:1px;width:10px;height:10px;min-width:0;min-height:0;margin:0;padding:0;border:0;background:none;color:#e7efb5;font:800 10px/10px system-ui,sans-serif;box-shadow:none}
@media(max-width:800px){html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:92px minmax(188px,1fr) 44px 44px 44px}}
@media(max-width:480px){html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:minmax(0,1fr) 44px 44px 44px;grid-template-rows:44px calc(1.25rem + 44px);height:calc(1.25rem + 100px);min-height:calc(1.25rem + 100px);gap:0 4px;padding:6px}html .site-header>.brand{width:min(120px,100%);min-width:0}.site-header .brand-wordmark{width:120px;max-width:100%}html .site-header>#visual-tips-toggle{grid-column:2}html .site-header>#motion-toggle{grid-column:3}html .site-header>.lesson-scene-close{grid-column:4}.lesson-header-center{grid-row:2;grid-column:1/-1}}

/* Sound has its own fixed cell. Preferences never occupy the phase row. */
html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:180px minmax(188px,1fr) 132px auto auto 44px}
html .site-header>#lesson-sound-toggle{grid-column:3;grid-row:1;position:static;transform:none;min-width:44px;height:44px;border:1px solid #aebd8e55;border-radius:12px;background:#1c392dcc;color:#e1e6c8;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;font-size:.75rem}
html .site-header>#lesson-sound-toggle[aria-pressed=true]{border-color:#d3db9b99;background:#38563a}
html .site-header>#lesson-sound-toggle:focus-visible{outline:3px solid #f1d58a;outline-offset:1px}
html .site-header>#visual-tips-toggle{grid-column:4}html .site-header>#motion-toggle{grid-column:5}html .site-header>.lesson-scene-close{grid-column:6}
@media(max-width:1020px){html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:92px minmax(188px,1fr) 44px 44px 44px 44px;gap:4px;padding-inline:6px}html .site-header>.brand{width:92px;min-width:0}.site-header .brand-wordmark{width:92px}html .site-header :is(#motion-label,.visual-tips-label,.lesson-sound-label){display:none}html .site-header>#lesson-sound-toggle,html .site-header>#visual-tips-toggle{padding:0}}
@media(max-width:560px){html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:minmax(0,1fr) 44px 44px 44px 44px;grid-template-rows:44px calc(1.25rem + 44px);height:calc(1.25rem + 100px);min-height:calc(1.25rem + 100px);gap:0 4px;padding:6px}html .site-header>.brand{width:min(120px,100%);min-width:0}.site-header .brand-wordmark{width:120px;max-width:100%}html .site-header>#lesson-sound-toggle{grid-column:2}html .site-header>#visual-tips-toggle{grid-column:3}html .site-header>#motion-toggle{grid-column:4}html .site-header>.lesson-scene-close{grid-column:5}.lesson-header-center{grid-row:2;grid-column:1/-1}}
@media(forced-colors:active){html .site-header>#lesson-sound-toggle{background:Canvas;color:CanvasText;border-color:CanvasText}html .site-header>#lesson-sound-toggle[aria-pressed=true]{border-color:Highlight}}

#lesson-sound-toggle[aria-pressed=false] .sound-wave,#lesson-sound-toggle[aria-pressed=true] .sound-slash{display:none}

/* The board, title and phase list share one axis. Back is a satellite control,
   not an invisible fourth phase that shifts See / Try / Fresh to the right. */
html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{position:relative;grid-template-columns:minmax(92px,1fr) 44px 44px 44px 44px;gap:8px}
html .site-header>#lesson-sound-toggle{grid-column:2;width:44px;padding:0}
html .site-header>#visual-tips-toggle{grid-column:3;width:44px;padding:0}
html .site-header>#motion-toggle{grid-column:4;width:44px;padding:0}
html .site-header>.lesson-scene-close{grid-column:5}
html .site-header :is(#motion-label,.visual-tips-label,.lesson-sound-label){display:none}
.lesson-header-center{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:calc(100% - 432px);grid-column:auto;grid-row:auto}
.lesson-header-context{position:relative;gap:0}
.lesson-header-warning{position:absolute;left:calc(100% + 6px)}
html .site-header .is-header-route.has-position-back{display:block;position:relative;width:140px;max-width:140px}
html .site-header .is-header-route .workspace-back-slot{position:absolute;right:calc(100% + 4px);top:0}
@media(max-width:760px){
  html .site-header,html[data-mode=path] .site-header,html:not([data-mode=path]) .site-header{grid-template-columns:minmax(0,1fr) 44px 44px 44px 44px;grid-template-rows:44px calc(1.25rem + 44px);height:calc(1.25rem + 100px);min-height:calc(1.25rem + 100px);gap:0 4px;padding:6px}
  html .site-header>.brand{width:min(120px,100%);min-width:0}.site-header .brand-wordmark{width:120px;max-width:100%}
  .lesson-header-center{top:50px;width:calc(100% - 16px);grid-row:auto;grid-column:auto}
  .lesson-header-warning{right:0;left:auto}
}

html .site-header>.brand{justify-self:start;width:180px;max-width:100%}
@media(max-width:1020px){html .site-header>.brand{width:120px}}


/* note-surface.css */
/* The board is the entire lesson surface. There is no exterior instruction dock. */
#garden-stage .lesson-scene .workspace-position{position:relative}
#garden-stage .lesson-scene .workspace-note-slot{position:absolute;inset:6px;z-index:18;display:block;width:auto;height:auto;min-width:0;margin:0;contain:strict;overflow:hidden;pointer-events:none}
#garden-stage .lesson-scene .workspace-note.is-board-note{position:absolute;left:8px;top:8px;display:grid;grid-template-columns:minmax(0,1fr) 96px;grid-template-rows:auto auto;align-items:stretch;width:calc(100% - 16px);height:auto;min-height:44px;max-height:none;margin:0;overflow:hidden;pointer-events:none;transition:opacity 100ms ease}
#garden-stage .lesson-scene .workspace-note.is-board-note>.workspace-cue{grid-column:1;grid-row:1;align-self:stretch;height:auto;min-height:0;max-height:none;margin:0;padding:7px 8px;overflow:visible;overscroll-behavior:contain;scrollbar-gutter:auto;pointer-events:none}
#garden-stage .lesson-scene .workspace-note.is-board-note>.workspace-cue[data-scroll=true]{pointer-events:auto}
#garden-stage .lesson-scene .workspace-note>.workspace-action-slot{grid-column:2;grid-row:1;pointer-events:none}
#garden-stage .lesson-scene .workspace-note :is(button,a){pointer-events:auto}
#garden-stage .lesson-scene .workspace-note-choices{grid-column:1/-1;grid-row:2;display:block;width:100%;min-width:0;min-height:0;overflow:visible;overscroll-behavior:contain;pointer-events:auto}
#garden-stage .lesson-scene .workspace-note-choices>.rules-choice-reserve{display:none!important}
#garden-stage .lesson-scene .workspace-note-choices>.rules-choice-actions{margin:0;padding:4px 6px 6px}
/* During a move, text yields visually and controls cannot mask a destination.
   Keyboard readers can focus the live cue to restore the reading surface. */
#garden-stage .workspace-position:not(:has([data-note-reading=true])):has(.board-square.selected):not(:has(.workspace-note:focus-within)) .workspace-note,#garden-stage .workspace-position:has(.is-dragging) .workspace-note{opacity:.12}
#garden-stage .workspace-position:not(:has([data-note-reading=true])):has(.board-square.selected):not(:has(.workspace-note:focus-within)) .workspace-note :is(.workspace-action-slot,.workspace-note-choices,.workspace-note-read),#garden-stage .workspace-position:has(.is-dragging) .workspace-note :is(.workspace-action-slot,.workspace-note-choices,.workspace-note-read){visibility:hidden;pointer-events:none}
html.effects-paused .workspace-note,body.effects-paused .workspace-note{transition:none!important}
@media(prefers-reduced-motion:reduce){#garden-stage .lesson-scene .workspace-note{transition:none}}

#garden-stage .lesson-scene .workspace-note:has(.inspection-return){grid-template-columns:minmax(0,1fr) 144px}
#garden-stage .workspace-position:not(:has([data-note-reading=true])):has(.board-square.selected):not(:has(.workspace-note:focus-within)) .workspace-cue,#garden-stage .workspace-position:has(.is-dragging) .workspace-cue{pointer-events:none!important}

/* Direct board questions never let note text absorb a square tap, even at text zoom.
   The same live cue remains keyboard-focusable/scrollable; only actual buttons hit-test. */
#garden-stage .lesson-scene .workspace-note[data-question-selection=true]>.workspace-cue{pointer-events:none!important}

/* Narrow direct questions keep readable text and44px buttons inside a smaller
   note, rather than covering the square corridor with a96px action column. */
#garden-stage .lesson-scene .workspace-note[data-compact-question=true]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 44px auto}
#garden-stage .lesson-scene .workspace-note[data-compact-question=true]>.workspace-cue{grid-column:1;grid-row:1;padding:0 8px!important}
#garden-stage .lesson-scene .workspace-note[data-compact-question=true]>.workspace-cue :is(p,#step-caption,#sample-feedback-text){font:400 16px/1.25 Georgia,serif!important}
#garden-stage .lesson-scene .workspace-note[data-compact-question=true]>.workspace-action-slot{grid-column:1;grid-row:2;justify-self:end}
#garden-stage .lesson-scene .workspace-note[data-compact-question=true]>.workspace-note-choices{grid-column:1;grid-row:3}

/* Submission is not navigation: keep the same44px target but visibly name Check. */
#garden-stage .lesson-scene .workspace-note .workspace-primary.has-submit-check{flex-direction:column;gap:0}
#garden-stage .lesson-scene .workspace-note .has-submit-check .workspace-action-icon{font-size:20px;line-height:20px}
#garden-stage .lesson-scene .workspace-note .workspace-submit-label{display:block;font:700 9px/10px system-ui,sans-serif;letter-spacing:0;text-transform:none}

/* Exceptional direct-question overflow: no third target over an unscored cell. */
#garden-stage .lesson-scene .workspace-note .workspace-note-read{grid-column:1;grid-row:2;justify-self:start;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid #c9d8ae80;border-radius:12px;background:#173c29;color:#f4edd5;font:700 12px/1.1 system-ui,sans-serif;pointer-events:auto}
#garden-stage .lesson-scene .workspace-note[data-read-available=true]>.workspace-cue{overflow:hidden;pointer-events:none!important}
#garden-stage .lesson-scene .workspace-note[data-note-reading=true]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 44px;gap:4px;opacity:1!important;background:rgb(16 35 29 / .94);border:1px solid #c9d8ae80;padding:8px;box-sizing:border-box;pointer-events:auto}
#garden-stage .lesson-scene .workspace-note[data-note-reading=true]>.workspace-cue{grid-column:1;grid-row:1;overflow:auto;pointer-events:auto!important;touch-action:pan-y;overscroll-behavior:contain;scrollbar-gutter:stable;max-height:none!important;min-height:0;white-space:normal;overflow-wrap:anywhere}
#garden-stage .lesson-scene .workspace-note[data-note-reading=true]>.workspace-note-read{grid-column:1;grid-row:2;justify-self:end;visibility:visible;pointer-events:auto}
#garden-stage .lesson-scene .workspace-note[data-note-reading=true]>:is(.workspace-action-slot,.workspace-note-choices){display:none!important}
#garden-stage .lesson-scene .workspace-note [hidden].workspace-note-read{display:none!important}

/* Last-resort source + Read, only when an excerpt still covers protected cells. */
#garden-stage .lesson-scene .workspace-note[data-read-summary=true]:not([data-note-reading=true]){grid-template-columns:minmax(0,1fr);grid-template-rows:44px;min-height:44px}
#garden-stage .lesson-scene .workspace-note[data-read-summary=true]:not([data-note-reading=true])>.workspace-cue{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
#garden-stage .lesson-scene .workspace-note[data-read-summary=true]:not([data-note-reading=true])>:is(.workspace-action-slot,.workspace-note-read){grid-column:1;grid-row:1}
#garden-stage .lesson-scene .workspace-note[data-read-summary=true]>.workspace-note-read{white-space:pre-line}

/* Dense small-board fallback: clear 44px pockets, no new controls or click gate. */
#garden-stage .lesson-scene .workspace-note[data-split-controls=true]:not([data-note-reading=true]){display:block;min-height:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0;overflow:visible;pointer-events:none}
#garden-stage .lesson-scene .workspace-note[data-split-controls=true]:not([data-note-reading=true])>.workspace-action-slot,#garden-stage .lesson-scene .workspace-note[data-split-controls=true]:not([data-note-reading=true]) .workspace-action{display:contents;position:static}
#garden-stage .lesson-scene .workspace-note[data-split-controls=true]:not([data-note-reading=true]) :is(.workspace-note-read,.workspace-primary,.workspace-restart){position:absolute;justify-self:auto;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;max-height:44px;margin:0;pointer-events:auto}

/* Recorded setup is a compact historical strip, never live pieces or a board overlay. */
.reply-history-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;flex-basis:100%;font-size:.8em;pointer-events:none}.reply-history-strip>span{display:inline-flex;align-items:center;gap:.15rem}.reply-history-strip img{width:18px;height:22px;object-fit:contain}

#garden-stage .lesson-scene .workspace-note[data-read-summary=true]:not([data-note-reading=true]) .reply-history-strip{display:none}
#garden-stage .lesson-scene .workspace-note[data-split-controls=true]:not([data-note-reading=true]) .workspace-note-choices{position:static;pointer-events:none;padding:0;background:none}
#garden-stage .lesson-scene .workspace-note[data-split-controls=true]:not([data-note-reading=true]) [data-note-optional]{position:absolute;width:44px;height:44px;min-width:44px;padding:2px;font-size:.75rem;pointer-events:auto;overflow:hidden}
#garden-stage .lesson-scene .workspace-note[data-note-reading=true] .note-scope-detail{display:block;white-space:normal}

/* A clear initial cue, then ONE adjacent question-and-options popup. Text
   remains solid; translucency belongs to the contained background only. */
#garden-stage .lesson-scene .workspace-note[data-coordinate-question]{display:block;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible;pointer-events:none;opacity:1}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question]>.workspace-cue{box-sizing:border-box;margin:0!important;padding:10px 12px!important;min-height:0;max-width:none;border:1px solid #d7e5b8;border-radius:14px;background:rgb(13 35 26 / .94);box-shadow:0 3px 12px #071b1355;backdrop-filter:none;color:#fff9e4;text-align:center;text-shadow:none;overflow:visible;pointer-events:none!important;opacity:1}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question]>.workspace-cue p{margin:0;font:700 20px/1.35 Georgia,serif!important;color:#fff9e4;opacity:1}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question]>.workspace-cue strong{font:600 12px/1.1 system-ui,sans-serif}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question] :is(.workspace-action-slot,.workspace-action){display:contents;position:static;pointer-events:none}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question=locate] :is(.workspace-note-choices,.rules-choice-actions){display:contents;pointer-events:none}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question=choices]{box-sizing:border-box;border:1px solid #cbdcb2;border-radius:16px;background:rgb(13 35 26 / .97);box-shadow:0 8px 24px #071b1355}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question=choices]>.workspace-cue{padding:3px 2px!important;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question=choices]>.workspace-cue p{font:700 17px/1.3 Georgia,serif!important}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question=choices]>.workspace-note-choices{display:block;min-height:44px;margin:0;padding:0;overflow:visible;pointer-events:none}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question=choices] .rules-choice-actions{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;min-width:0;pointer-events:none}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question=choices] .rules-choice{box-sizing:border-box;display:flex;align-items:center;gap:10px;flex:none;position:static;min-width:44px;min-height:44px;width:100%;height:auto;max-width:none;margin:0;padding:8px 10px;border:1px solid #8da783;border-radius:9px;background:#274735;color:#fff9e4;font:600 15px/1.25 system-ui,sans-serif;text-align:left;pointer-events:auto;white-space:normal;overflow-wrap:anywhere}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question=choices] .rules-choice::before{content:attr(data-option-number) ".";flex:0 0 1.1em;color:#e1eec1;font:700 15px/1.25 system-ui,sans-serif}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question=choices] .rules-choice:hover{background:#365b42}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question] .workspace-restart{box-sizing:border-box;min-width:44px;min-height:44px;margin:0;padding:0;pointer-events:auto}
#garden-stage .lesson-scene .workspace-note[data-coordinate-question] [hidden]{display:none!important}
/* See is a worked example, not a different scored task. */
#garden-stage .lesson-scene .workspace-cue[data-coordinate-example=true]>strong{display:block;margin:0 0 5px;color:#f3e6a9;font:700 12px/1.3 system-ui,sans-serif;letter-spacing:.035em;text-transform:uppercase}
#garden-stage .lesson-scene .workspace-cue[data-coordinate-example=true]>p{font:400 16px/1.4 Georgia,serif!important}
.board-square .coordinate.coordinate-guide-label{padding:1px 4px;border-radius:4px;background:#173c29;color:#fff9e4;font-weight:800;opacity:1}
.board-square.coordinate-miss{box-shadow:inset 0 0 0 3px #b86356;animation:coordinate-miss-pulse 460ms ease-out both}
@keyframes coordinate-miss-pulse{0%,100%{box-shadow:inset 0 0 0 2px #b8635600}35%{box-shadow:inset 0 0 0 3px #b8635699}}
html.effects-paused .board-square.coordinate-miss,body.effects-paused .board-square.coordinate-miss{animation:none!important;box-shadow:inset 0 0 0 2px #b8635677!important}
@media(prefers-reduced-motion:reduce){.board-square.coordinate-miss{animation:none!important;box-shadow:inset 0 0 0 2px #b8635677!important}}
@media(forced-colors:active){.board-square.coordinate-miss{outline:2px dotted Highlight;outline-offset:-4px}#garden-stage .lesson-scene .workspace-note[data-coordinate-question] .rules-choice{background:ButtonFace;color:ButtonText}}

#garden-stage .lesson-scene .workspace-note[data-coordinate-narrow=true] .rules-choice{gap:7px;padding:8px;font-size:14px}
#garden-stage .lesson-scene .workspace-note[data-coordinate-narrow=true] .rules-choice::before{font-size:14px}
#garden-stage .lesson-scene .workspace-note[data-coordinate-narrow=true]>.workspace-cue p{font-size:16px!important}

/* Only a successfully located square/piece is highlighted, never the answer beforehand. */
.board-square.coordinate-located{outline:3px solid #fff0a8;outline-offset:-5px;box-shadow:inset 0 0 0 7px #173c2955}
.interactive-piece.coordinate-located .interactive-piece-art{filter:drop-shadow(0 0 3px #fff6cc) drop-shadow(0 0 7px #d0e99a)}
@media(forced-colors:active){.board-square.coordinate-located{outline-color:Highlight}.interactive-piece.coordinate-located .interactive-piece-art{filter:none}}

/* Initial ordinary move tasks are centered, compact and tap-through. Only the
   background is translucent; real text and44px controls remain fully opaque. */
#garden-stage .lesson-scene .workspace-note[data-centered-instruction=true]:not([data-note-reading=true]){display:block;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible;pointer-events:none}
#garden-stage .lesson-scene .workspace-note[data-centered-instruction=true]:not([data-note-reading=true])>.workspace-cue{box-sizing:border-box;margin:0!important;padding:8px 12px!important;min-height:0;max-width:none;border:1px solid #cbdcb2;border-radius:14px;background:rgb(13 35 26 / .75);box-shadow:0 3px 12px #071b1333;backdrop-filter:none;color:#fff9e4;text-align:center;text-shadow:none;overflow:visible;pointer-events:none!important;opacity:1}
#garden-stage .lesson-scene .workspace-note[data-centered-instruction=true]:not([data-note-reading=true])>.workspace-cue p{margin:0;font:600 18px/1.3 Georgia,serif!important;color:#fff9e4;opacity:1}
#garden-stage .lesson-scene .workspace-note[data-centered-instruction=true]:not([data-note-reading=true]) :is(.workspace-action-slot,.workspace-action){display:contents;position:static;pointer-events:none}
#garden-stage .lesson-scene .workspace-note[data-centered-instruction=true]:not([data-note-reading=true]) :is(.workspace-primary,.workspace-restart,.workspace-note-read){box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;pointer-events:auto}
#garden-stage .lesson-scene .workspace-note[data-centered-instruction=true] [hidden]{display:none!important}
@media(max-width:480px){#garden-stage .lesson-scene .workspace-note[data-centered-instruction=true]:not([data-note-reading=true])>.workspace-cue{padding:6px 8px!important}#garden-stage .lesson-scene .workspace-note[data-centered-instruction=true]:not([data-note-reading=true])>.workspace-cue p{font-size:16px!important;line-height:1.25!important}}
@media(forced-colors:active){#garden-stage .lesson-scene .workspace-note[data-centered-instruction=true]:not([data-note-reading=true])>.workspace-cue{background:Canvas;color:CanvasText;border-color:CanvasText}}

/* A real result is immediately opaque even when its source-selection note was
   dimmed. Only ordinary selection keeps the100ms presentation transition. */
#garden-stage .lesson-scene .workspace-note:has(>.workspace-cue:is([data-feedback-kind]:not([data-feedback-kind=""]),[data-status="success"],[data-status="try"])),
#garden-stage .lesson-scene :is([data-phase="done"],[data-phase="success"],[data-phase="complete"],[data-phase$=":done"],[data-phase$=":success"],[data-phase$=":complete"]) .workspace-note{opacity:1!important;transition:none!important}

/* Dense prompts use the frame's normal flow, never a clipped miniature reader.
   The lesson fitter accounts for this note as chrome beside the real board. */
#garden-stage .lesson-scene .workspace-note-slot[data-docked=true]{position:relative;inset:auto;width:100%;height:auto;min-height:0;margin:8px 0 0;contain:layout style;overflow:visible;pointer-events:none}
#garden-stage .lesson-scene .workspace-note.is-board-note[data-docked=true]{position:relative;inset:auto;width:100%;height:auto;max-height:none;overflow:visible}
#garden-stage .lesson-scene .workspace-note.is-board-note:not([data-note-reading=true])>.workspace-cue{overflow:visible;max-height:none;scrollbar-gutter:auto}
#garden-stage .lesson-scene .workspace-note:not([data-note-reading=true])>.workspace-note-choices{overflow:visible;max-height:none}
#garden-stage .lesson-scene .workspace-note[data-docked=true]:not([data-note-reading=true])>.workspace-cue{height:auto;min-height:0;max-height:none;overflow:visible}
#garden-stage .lesson-scene .workspace-note[data-docked=true] .rules-choice-actions{flex-wrap:wrap}

/* Only a visible lesson can choose the shared frame width; cached hidden
   lesson DOM must not keep later lessons in a wide/docked layout.
   On short, wider viewports the note sits beside the board instead of forcing
   a narrow paragraph under a minimum-size board and below the frame. */
@media(min-width:600px) and (max-height:700px){
 #garden-stage .lesson-scene-frame:has(.workspace-note-slot[data-docked=true]:not([hidden] *)){width:min(100%,900px)}
 #garden-stage .lesson-scene .workspace-board:has(>.workspace-note-slot[data-docked=true]){display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,.9fr);gap:12px;align-items:start}
 #garden-stage .lesson-scene .workspace-board:has(>.workspace-note-slot[data-docked=true])>.workspace-position{grid-column:1;grid-row:1;width:min(100%,var(--lesson-board-size));align-self:start}
 #garden-stage .lesson-scene .workspace-note-slot[data-docked=true]{grid-column:2;grid-row:1;margin:0}
}

/* Explicit Info uses the available scene width while board input is paused.
   The entire concise explanation and Close control stay in normal document
   flow; only exceptional viewport/text zoom may need the outer frame scroll. */
#garden-stage .lesson-scene-frame:has(.workspace-note[data-note-reading=true]:not([hidden] *)){width:min(100%,760px)}
#garden-stage .lesson-scene .workspace-board:has(.workspace-note[data-note-reading=true]){display:block}
#garden-stage .lesson-scene .workspace-note-slot[data-reader=true]{position:relative;inset:auto;width:100%;height:auto;max-height:none;margin:0;contain:layout style;overflow:visible;pointer-events:auto}
#garden-stage .lesson-scene .workspace-note.is-board-note[data-note-reading=true]{position:relative;inset:auto;width:100%;height:auto;max-height:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 44px;overflow:visible}
#garden-stage .lesson-scene .workspace-note.is-board-note[data-note-reading=true]>.workspace-cue{display:block;position:relative;inset:auto;width:100%;height:auto;max-height:none;min-height:0;overflow:visible;scrollbar-gutter:auto;padding:8px!important}
#garden-stage .lesson-scene .workspace-note[data-note-reading=true] .note-scope-detail{font:400 16px/1.4 Georgia,serif!important;text-align:left}

/* Read-only history comparisons share one control row on short screens.
   The selected A/B tab already names the position; retain that name for AT. */
@media(min-width:600px) and (max-height:700px){
 #garden-stage .workspace-board .history-pair.is-compact{position:relative}
 #garden-stage .workspace-board .history-pair.is-compact>.history-position-tabs{position:absolute;left:0;top:0;height:44px;min-height:44px;gap:4px;z-index:2}
 #garden-stage .workspace-board .history-pair.is-compact .history-heading{height:44px;min-height:44px;padding-left:100px;justify-content:flex-end;gap:0}
 #garden-stage .workspace-board .history-pair.is-compact .history-heading>strong{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #garden-stage .workspace-board .history-pair.is-compact .history-state-strip{grid-template-rows:repeat(3,minmax(1.2em,auto));min-height:3.6em;padding:0 2px;font-size:12px;line-height:1.2}
}


/* history-comparison.css */
/* Two genuine positions, one stable lesson surface. No answer field is consulted by layout. */
#garden-stage .interactive-board.has-history-pair{display:block;aspect-ratio:auto;overflow:visible;background:transparent;border:0;box-shadow:none}
.history-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.history-panel{min-width:0;color:#edf0d7}
.history-heading{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:48px;font:600 13px/1.3 system-ui,sans-serif}
.history-heading strong{min-width:0;overflow-wrap:anywhere}
.history-replay{min-width:44px;min-height:44px;padding:6px 10px;border:1px solid #d5d9ad88;border-radius:10px;background:#254a37;color:#f2eed6;font:600 12px/1.3 system-ui,sans-serif}
.history-board-stage{position:relative;aspect-ratio:1}
#garden-stage .history-board{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;aspect-ratio:1;border:1px solid #d7cca677;overflow:hidden}
.history-state-strip{display:grid;grid-template-rows:repeat(3,minmax(1.5em,auto));min-height:4.5em;padding:4px 2px;font:12px/1.5 system-ui,sans-serif;overflow-wrap:anywhere}
.history-state-strip [data-difference=true]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.interactive-board-stage:has(>.has-history-pair)>:is(.interactive-piece-layer,.sample-guide-layer,.move-trace-layer){display:none!important}
.history-board .board-square{cursor:default}
.history-pair.is-compact{display:block}
.history-position-tabs{display:flex;gap:8px;min-height:48px;align-items:center}
.history-position-tabs button{min-width:44px;min-height:44px;border:1px solid #d5d9ad88;border-radius:10px;background:#254a37;color:#f2eed6;font-weight:700}
.history-position-tabs button[aria-pressed=true]{background:#e5e9c6;color:#163829;box-shadow:inset 0 0 0 2px #728e67}
.history-position-tabs button:focus-visible{outline:3px solid #e6d592;outline-offset:2px}
@media(forced-colors:active){.history-replay{background:ButtonFace;color:ButtonText;border-color:ButtonText}.history-panel{color:CanvasText}}
.history-board.piece-layer-ready .square-piece-fallback{visibility:hidden}
/* The ordinary single-board stage is square. A comparison owns its measured
   two-panel height; retaining that square would add blank space or overflow. */
.interactive-board-stage:has(>.has-history-pair){aspect-ratio:auto}


/* garden-runtime.css */
/* Keep camera targets fixed. Hover paint is local and never changes geometry. */
html .tree-garden .tree-connection :is(.tree-edge-ground,.tree-edge-line,.tree-edge-port){filter:none!important}
html .tree-garden .tree-connection[data-backbone=false]{visibility:hidden}
html .tree-garden .tree-connection:is([data-focused=true],[data-recommended-route=true],[data-relationship-next=true]){visibility:visible}
html .tree-garden .tree-orb{transition:border-color 160ms ease;box-shadow:inset 0 1px 0 #e2edb822,0 6px 12px #0006}
html .tree-garden .tree-node-button:hover .tree-orb,html .tree-garden .tree-node:focus-within .tree-orb{box-shadow:inset 0 1px 0 #e2edb844,0 0 0 4px #d9e4a422,0 6px 12px #0006}
html .tree-garden .tree-node[data-suggested=true] .tree-orb{border-color:#f1d390;box-shadow:0 0 0 4px #e1c57822,0 6px 12px #0006}
html .tree-garden .tree-topic-art,html .tree-garden .tree-node[data-concept=true] .tree-concept-preview{filter:none}
.tree-branch-spark{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:#f3e9b8;pointer-events:none;offset-anchor:center;offset-rotate:0deg;z-index:1;contain:strict}
.tree-camera-moving .tree-branch-spark{visibility:hidden}
/* The content itself stays opaque and interactive. Only the note surface and
   purely decorative guide layers are translucent, exactly once per layer. */
.lesson-scene :is(.sample-guide-layer,.move-trace-layer,.teaching-cue-layer){opacity:.75}
html.effects-paused .tree-branch-spark,body.effects-paused .tree-branch-spark{display:none}
@media(prefers-reduced-motion:reduce){.tree-branch-spark{display:none}html .tree-garden .tree-orb{transition:none}}
@media(forced-colors:active){.tree-branch-spark{display:none}html .tree-garden .tree-orb{box-shadow:none}.lesson-scene :is(.sample-guide-layer,.move-trace-layer,.teaching-cue-layer){opacity:1}}


/* garden-nodes.css */
/* Fixed 144px seed frames. Decoration never resizes a hit target on hover. */
html .tree-garden[data-spatial-tree=true] .tree-orb{border-radius:38px 14px 38px 14px;background:linear-gradient(145deg,#526648,#233f30 62%,#10291e);border-color:#cad5a66b}
html .tree-garden[data-spatial-tree=true] .tree-orb:before,html .tree-garden[data-spatial-tree=true] .tree-orb:after{border-radius:inherit}
html .tree-garden[data-spatial-tree=true] .tree-node[data-concept=true] .tree-concept-preview{width:82%;height:82%;border:1px solid #e6e6bb55;border-radius:14px;box-sizing:border-box}
html .tree-garden[data-spatial-tree=true] .tree-family-entry{width:88%;height:88%;object-fit:contain}
html .tree-garden[data-spatial-tree=true] .tree-family-accent{position:absolute;top:0;left:176px;width:44px;height:44px;object-fit:contain;pointer-events:none;user-select:none;filter:none}
html .tree-garden[data-spatial-tree=true] .tree-node[data-suggested=true] .tree-orb{border-color:#f1d390}
html .tree-garden[data-spatial-tree=true] .tree-node[data-complete=true] .tree-orb{border-color:#dbe7b0}
html .tree-garden[data-spatial-tree=true] .tree-node-button:hover .tree-orb,html .tree-garden[data-spatial-tree=true] .tree-node:focus-within .tree-orb{border-color:#fff0bb}
@media(forced-colors:active){html .tree-garden[data-spatial-tree=true] .tree-orb{background:Canvas;border-color:CanvasText}.tree-family-accent{display:none}}

/* The actual dependency tree grows upward. Bark and sixteen leaf accents are
   static world geometry: no blur/filter, animated world layer or hover resize. */
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection path{vector-effect:none;animation:none}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection .tree-edge-ground{stroke:#b2a273;stroke-width:7px;opacity:.24;filter:none}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection .tree-edge-line{stroke:#9aa67b;stroke-width:2px;opacity:.72;filter:none}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-trunk=true] .tree-edge-ground{stroke-width:var(--trunk-ground);stroke:#74634c;opacity:.56}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-trunk=true] .tree-edge-line{stroke-width:var(--trunk-line);stroke:#b8ac80;opacity:.58}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-pair-complete=false] .tree-edge-port{fill:#a3ad81;opacity:.55}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection:is([data-focused=true],[data-recommended-route=true],[data-relationship-next=true]) .tree-edge-line{stroke:#d8d5a1;opacity:.9}
/* Completion light requires two genuine completed endpoints. The broad, faint
   stroke supplies a steady halo without a rasterizing SVG filter or animation. */
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-pair-complete=true]{visibility:visible;opacity:1}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-pair-complete=true] .tree-edge-ground{stroke:#efda8d;stroke-width:16px;opacity:.26}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-pair-complete=true] .tree-edge-line{stroke:#ffe4a0;stroke-width:3.5px;stroke-dasharray:none;opacity:1}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-pair-complete=true] .tree-edge-port{fill:#ffe4a0;opacity:1}
html .tree-garden[data-tree-direction=up] .tree-root-tendrils{pointer-events:none}
html .tree-garden[data-tree-direction=up] .tree-root-tendrils path{fill:none;stroke:#b4a079;stroke-width:9px;stroke-linecap:round;opacity:.55;filter:none;vector-effect:none}
html .tree-garden[data-tree-direction=up] .tree-node[data-canopy-leaf=true]:after{content:"";position:absolute;left:194px;top:35px;width:22px;height:12px;border-radius:85% 0 85% 0;background:#a9bf827a;border:1px solid #cad6a847;transform:rotate(-34deg);pointer-events:none}
@media(forced-colors:active){html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection .tree-edge-line{stroke:CanvasText!important}html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-pair-complete=true] .tree-edge-line{stroke:Highlight!important}html .tree-garden[data-tree-direction=up] .tree-root-tendrils,html .tree-garden[data-tree-direction=up] .tree-node[data-canopy-leaf=true]:after{display:none}html .tree-garden[data-tree-direction=up] .tree-connection[data-pair-complete=true] .tree-edge-line{stroke:Highlight!important}}

/* Candidate hierarchy: advice is cool sage; earned paired light stays gold.
   Scope is paint only. All exact edges, geometry, visibility and camera state
   remain unchanged. Completed pairs intentionally match none of these rules. */
@media (forced-colors: none){
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-pair-complete=false]:is([data-focused=true],[data-recommended-route=true],[data-relationship-next=true]) .tree-edge-line{stroke:#bfd5b7}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-kind=advisory][data-backbone=false][data-pair-complete=false]:not([data-recommended-route=true]):is([data-focused=true],[data-relationship-next=true]) .tree-edge-line{stroke:#a9bf9e;stroke-width:1.5px;opacity:.56}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-kind=advisory][data-backbone=false][data-pair-complete=false]:not([data-recommended-route=true]):is([data-focused=true],[data-relationship-next=true]) .tree-edge-ground{stroke:#a9bf9e;opacity:.1}
html .tree-garden[data-spatial-tree=true][data-tree-direction=up] .tree-connection[data-kind=advisory][data-backbone=false][data-pair-complete=false]:not([data-recommended-route=true]):is([data-focused=true],[data-relationship-next=true]) .tree-edge-port{opacity:.4}
}


/* settings.css */
/* Settings stays out of the lesson controls and does not change the reserved footer. */
.garden-footer-links{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
#garden-settings{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid #b2be983d;border-radius:50%;background:#163b2b;color:#f5efd9;cursor:pointer}
#garden-settings:focus-visible,#settings-dialog button:focus-visible{outline:3px solid #e5d590;outline-offset:3px}
#settings-dialog{box-sizing:border-box;width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:22px;overflow:auto;border:1px solid #b8c59c;border-radius:20px;background:#102d22;color:#f5efd9;box-shadow:0 12px 40px #0006;font:inherit}
#settings-dialog::backdrop{background:#071b1669}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#settings-title{margin:0;font-size:1.4rem;line-height:1.2}
#settings-description,#settings-storage{line-height:1.5;overflow-wrap:anywhere}
#settings-storage{font-size:.9rem;color:#d7dfc4;min-height:2.7em}
.settings-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
#settings-dialog button{min-width:44px;min-height:44px;border:1px solid #bcc99c;border-radius:12px;background:#294c35;color:#fff9e8;font:inherit;padding:9px 15px;cursor:pointer}
#settings-dialog #settings-close{padding:0;font-size:1.5rem;flex:none}
#settings-dialog #settings-confirm{background:#713d32;border-color:#e1b093}
#settings-dialog button:disabled{opacity:.5;cursor:default}
#settings-dialog [hidden]{display:none!important}
@media(max-width:600px){.garden-footer-links{gap:2px}.garden-footer-links .valorem-link{max-width:70px;text-align:right}#settings-dialog{padding:16px}}


/* lesson-loading.css */
/* A bounded loading/retry surface; it never owns lesson or progress state. */
.lesson-loading-dialog{box-sizing:border-box;width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:22px;overflow:auto;border:1px solid #b8c59c;border-radius:20px;background:#102d22;color:#f5efd9;box-shadow:0 12px 40px #0006;font:inherit}
.lesson-loading-dialog::backdrop{background:#071b1669}.lesson-loading-dialog h2{font-size:1.25rem;line-height:1.3;margin:0 0 12px}.lesson-loading-dialog p{font-size:14px;line-height:1.5}.lesson-loading-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.lesson-loading-dialog button{min-width:44px;min-height:44px;border:1px solid #bcc99c;border-radius:12px;background:#294c35;color:#fff9e8;font:inherit;padding:9px 15px;cursor:pointer}.lesson-loading-dialog button:focus-visible{outline:3px solid #e5d590;outline-offset:3px}.lesson-loading-dialog [hidden]{display:none!important}@media(forced-colors:active){.lesson-loading-dialog{border-color:CanvasText;background:Canvas;color:CanvasText}.lesson-loading-dialog button{color:ButtonText;background:ButtonFace;border-color:ButtonText}}

.lesson-cache-notice{display:block;color:var(--ink-muted,#b9c4bb);font-size:11px;line-height:1.3;text-align:center}.lesson-cache-notice[hidden]{display:none}


/* valorem-integration.css */
/* Keep the compact host chrome separate from lesson controllers. */
html body.valorem-lessons-host{grid-template-areas:"lesson-header" "lesson-stage" "lesson-footer";grid-template-rows:auto minmax(240px,1fr) auto}
body.valorem-lessons-host>.site-header{grid-area:lesson-header;height:64px;min-height:64px;padding:2px 12px;gap:4px}
body.valorem-lessons-host>main.wrap{grid-area:lesson-stage}
body.valorem-lessons-host .site-header>.brand{width:144px;min-width:0;min-height:44px}
body.valorem-lessons-host .site-header .brand-wordmark{width:144px;max-width:100%}
body.valorem-lessons-host .lesson-header-center{top:2px;height:60px;grid-template-rows:16px 44px}
body.valorem-lessons-host .lesson-header-context{height:16px}
body.valorem-lessons-host .site-header .header-garden-label{font-size:13px;line-height:16px}
body.valorem-lessons-host>.garden-footer{grid-area:lesson-footer;grid-template-columns:auto minmax(0,1fr) auto;min-height:46px;padding:0 12px;gap:8px}
body.valorem-lessons-host .footer-brand{grid-column:1;flex-direction:row;align-items:center;gap:8px;font-size:16px}
body.valorem-lessons-host #garden-credits{min-height:44px;padding:0 4px;font-size:10px}
body.valorem-lessons-host .garden-footer-center{grid-column:2;align-items:center}
body.valorem-lessons-host .garden-footer-links{grid-column:3}
body.valorem-lessons-host .garden-tip-reserve{display:none}
body.valorem-lessons-host #garden-tip{display:block;min-height:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.4}
body.valorem-lessons-host .garden-footer .storage-notice-slot{min-height:0}
body.valorem-lessons-host .garden-footer .storage-notice-slot:not(:has(#storage-notice:not([hidden]))){display:none}
body.valorem-lessons-host #storage-notice{margin:0;line-height:1.4}
@media(max-width:760px){
 body.valorem-lessons-host>.site-header{grid-template-rows:44px 60px;height:108px;min-height:108px;padding:2px 6px;gap:0 4px}
 body.valorem-lessons-host .site-header>.brand{width:min(120px,100%)}
 body.valorem-lessons-host .site-header .brand-wordmark{width:120px}
 body.valorem-lessons-host .lesson-header-center{top:46px}
 body.valorem-lessons-host>.garden-footer{padding-inline:6px;gap:4px}
 body.valorem-lessons-host .footer-brand-name{display:none}
 body.valorem-lessons-host .garden-footer:has(#storage-notice:not([hidden])) .garden-footer-center{grid-column:1/-1;grid-row:2;padding:0 4px 4px}
}
.valorem-lessons-noscript{position:fixed;inset:4rem 1rem auto;z-index:10000;max-width:48rem;margin:auto;padding:1.5rem;border:1px solid #d3f0a8;border-radius:1rem;background:#10231d;color:#f3ebd7;font:1rem/1.6 system-ui,sans-serif}
.valorem-lessons-noscript a{color:#d3f0a8;text-decoration:underline}.valorem-lessons-noscript h2{font:700 1.4rem/1.3 system-ui,sans-serif}