:root{--ink:#243c34;--muted:#586c60;--glass:rgba(251,251,242,.83);--border:rgba(255,255,255,.77);--shadow:0 24px 70px #2a443529;--sage:#355b46;--canvas-height:100svh}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Trebuchet MS',Arial,sans-serif;color:var(--ink)}body{position:relative;background:#bed4b8;overflow-x:hidden;min-height:780px}.scenery,.wash{position:fixed;inset:0;pointer-events:none}.scenery{background:linear-gradient(#d5e5e2,#b6c8ac),url('../assets/landscape.webp');background-image:url('../assets/landscape.webp');background-size:cover;background-position:center;transition:filter 1s;transform:scale(1.015)}.wash{background:linear-gradient(180deg,#edf2e64a 0%,#d5e2d800 38%,#203c3024 100%);transition:background 1s}header{position:absolute;top:0;left:0;right:0;z-index:300;display:flex;align-items:flex-start;justify-content:space-between;padding:30px 38px;pointer-events:none}.brand,.top-tools{pointer-events:auto}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);text-shadow:0 1px 10px #fff8}.brand svg{width:34px;height:39px}.brand>span{font:24px Georgia,serif;line-height:1}.brand em{font-style:normal}.brand small{display:block;font:9px 'Trebuchet MS',sans-serif;letter-spacing:2.5px;margin-top:10px}.top-tools{display:flex;gap:9px}.icon-button{height:42px;width:42px;border:1px solid var(--border);border-radius:50%;background:#fff9;color:var(--ink);backdrop-filter:blur(12px);cursor:pointer;display:grid;place-items:center}.icon-button svg{width:19px;height:19px}.icon-button span{font:21px Georgia,serif}button,a{-webkit-tap-highlight-color:transparent}button{font-family:inherit}button:focus-visible,a:focus-visible,.card:focus-visible{outline:3px solid #f7b951;outline-offset:5px}main{position:relative;height:max(100svh,780px);min-height:780px;isolation:isolate;overflow:hidden}.welcome{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:438px;padding:37px 36px 27px;text-align:center;border:1px solid var(--border);border-radius:25px;background:var(--glass);box-shadow:var(--shadow),inset 0 0 45px #fff4;backdrop-filter:blur(19px);z-index:20}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600}.tiny-star{color:#b8944a;font-size:18px;margin-right:5px;vertical-align:-2px}h1{font:54px/1.03 Georgia,'Times New Roman',serif;letter-spacing:-2.4px;margin:22px 0 18px}h1 em{color:#617a53;font-weight:400}p{font-size:14px;line-height:1.65;color:var(--muted)}.welcome>p{margin:0}.fine-line{height:1px;width:40px;margin:23px auto 18px;background:#a3af9d}.welcome .invitation{font-size:12px;line-height:1.7}.primary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:0;border-radius:10px;background:var(--sage);color:#fff;font-size:12px;font-weight:600;padding:15px 15px;cursor:pointer;text-decoration:none;transition:background .2s,transform .2s}.primary:hover{background:#244633;transform:translateY(-1px)}.primary svg{width:17px;height:17px}.primary>span{margin-left:auto}.welcome .primary{margin-top:26px}.text-button{border:0;background:transparent;padding:13px 4px;color:var(--ink);font-size:11px;cursor:pointer}.text-button span{margin-left:7px}.text-button:hover{text-decoration:underline}.small-note{display:block;font-size:9px;color:#73846e;margin-top:9px}.card{--rotation:0deg;position:absolute;left:0;top:0;width:clamp(146px,14.7vw,212px);aspect-ratio: .77;border:5px solid #ffffffe8;border-radius:15px;background:#354b37;box-shadow:0 13px 35px #1c332746;transform:rotate(var(--rotation));cursor:grab;touch-action:none;user-select:none;overflow:hidden;z-index:30;transition:box-shadow .2s,border-color .2s;will-change:transform}.card:hover{box-shadow:0 20px 50px #1c332777;border-color:#fff}.card.dragging{cursor:grabbing;box-shadow:0 30px 65px #182e3a80;border-color:#fff}.card img{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}.card .scrim{position:absolute;inset:0;background:linear-gradient(180deg,#12241c12 25%,#0e211bc4 100%);pointer-events:none}.card-copy{position:absolute;left:14px;bottom:17px;right:12px;color:#fff;pointer-events:none}.card-label{font-size:7px;letter-spacing:1.5px;text-transform:uppercase;color:#e4ebd1;display:block;margin-bottom:8px}.card-title{display:block;font:clamp(22px,2.3vw,31px)/1.02 Georgia,serif;letter-spacing:-.7px;white-space:pre-line}.card-index{position:absolute;top:12px;left:13px;font-size:8px;letter-spacing:1px;color:#fff}.card-open{position:absolute;top:9px;right:9px;border:1px solid #ffffff70;border-radius:50%;background:#ffffff15;backdrop-filter:blur(4px);width:24px;height:24px;display:grid;place-items:center;color:white;font-size:14px}.hint{position:absolute;left:29%;bottom:10%;display:flex;align-items:center;gap:9px;transform:rotate(-9deg);color:#2d483a;z-index:21;pointer-events:none}.hint svg{width:25px;height:25px;transform:rotate(20deg)}.hint span{font:italic 15px/1.25 Georgia,serif}footer{position:absolute;bottom:0;left:0;right:0;min-height:74px;padding:15px 35px;display:flex;align-items:center;justify-content:space-between;color:#f5f7ee;gap:16px;z-index:300;text-shadow:0 1px 8px #173c28}.footer-note{font-size:10px;display:flex;align-items:center;gap:9px}.footer-note i{height:5px;width:5px;border-radius:50%;background:#e3edc5;box-shadow:0 0 0 4px #e3edc51a}.footer-caption{font-size:9px;letter-spacing:1px}.canvas-tools{display:flex;align-items:center;gap:12px;padding:6px 13px;border:1px solid #ffffff7a;background:#f7faf0dc;backdrop-filter:blur(16px);border-radius:30px;box-shadow:0 7px 25px #20372b18;text-shadow:none}.canvas-tools button{border:0;background:transparent;color:var(--ink);font-size:10px;padding:6px 4px;cursor:pointer;display:flex;align-items:center;gap:8px}.canvas-tools button span{font-size:18px;line-height:1}.divider{height:15px;width:1px;background:#c9d0c3}dialog{padding:0;border:1px solid #fff9;box-shadow:0 30px 100px #142b3370;border-radius:22px;background:#f4f5ed;color:var(--ink);width:min(760px,calc(100vw - 30px));max-height:90svh;overflow:auto}dialog::backdrop{background:#142e2a99;backdrop-filter:blur(9px)}dialog[open]#detail{display:grid;grid-template-columns:1fr 1fr}.close{position:absolute;right:12px;top:12px;z-index:5;border:1px solid #fff6;background:#ffffffe0;border-radius:50%;width:33px;height:33px;font-size:23px;cursor:pointer;color:var(--ink)}.detail-image{min-height:450px;background:#cad1c1}.detail-image img{width:100%;height:100%;max-height:73svh;object-fit:cover;display:block}.detail-copy{padding:70px 31px 32px;display:flex;flex-direction:column;justify-content:center}.detail-copy h2,.guide-body h2{font:38px/1.1 Georgia,serif;letter-spacing:-1px;white-space:pre-line;margin:17px 0}.detail-copy p{font-size:13px}.detail-actions{margin-top:20px}.detail-actions .primary{font-size:12px}.guide-body{padding:48px;max-width:560px;margin:auto}#guide{max-width:560px}.guide-body p{font-size:13px}.guide-body small{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin:20px 0}.guide-body .primary{margin-top:25px}.keyboard-note{padding:12px 14px;border-radius:10px;background:#e7ecdf}#toast{position:fixed;bottom:90px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#203d30;color:#fff;padding:12px 18px;border-radius:12px;z-index:500;font-size:12px;max-width:90%;text-align:center;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)}body.evening{--ink:#dce8d8;--muted:#c4d4c4;--glass:rgba(31,53,46,.85);--sage:#729374;--border:#ffffff38}body.evening .scenery{filter:brightness(.55) saturate(.72) hue-rotate(12deg)}body.evening .wash{background:linear-gradient(#102f4a65,#1b244322)}body.evening .brand{color:#eef3e3;text-shadow:none}body.evening h1 em{color:#bed0a1}body.evening .small-note{color:#b6c7aa}body.evening .hint{color:#e2ecd4}body.evening .icon-button,body.evening .canvas-tools{background:#203b36cc}body.evening dialog{background:#203b32}body.evening .keyboard-note{background:#304b3c}body.evening .close{color:#254332}button:disabled{opacity:.6;cursor:wait}
@media(min-width:1600px){.welcome{width:470px;padding:45px 42px 32px}h1{font-size:62px}.welcome>p{font-size:15px}}
@media(max-width:1000px){.welcome{width:378px;padding:30px 28px 24px}h1{font-size:47px}.card{width:155px}.hint{left:24%;bottom:9%}.footer-caption{display:none}}
@media(max-width:700px){body{min-height:1100px}header{padding:20px}.brand>span{font-size:20px}.brand svg{width:28px}.brand small{font-size:8px;letter-spacing:2px}.icon-button{width:36px;height:36px}main{height:1100px;min-height:1100px}.welcome{width:min(350px,calc(100% - 42px));top:45%;padding:30px 26px 24px;z-index:20}h1{font-size:49px}.eyebrow{font-size:8px}.card{width:clamp(125px,33vw,158px);border-width:4px;border-radius:12px}.card-title{font-size:23px}.card-label{font-size:6px;letter-spacing:1.2px}.card-copy{left:10px;bottom:13px}.card-index{font-size:7px}.hint{left:37%;bottom:16%;font-size:12px}.hint span{font-size:13px}footer{padding:14px 20px;flex-wrap:wrap;justify-content:center;min-height:85px}.footer-note{order:2;width:100%;justify-content:center;font-size:9px}.canvas-tools{order:1}.scenery{background-position:45% center}.detail-image{min-height:250px}.detail-copy{padding:50px 22px 25px}.detail-copy h2{font-size:30px}.guide-body{padding:42px 25px 28px}dialog[open]#detail{grid-template-columns:1fr}.detail-image img{height:32svh;max-height:none}.detail-copy{padding:27px}.detail-copy h2{white-space:normal}#toast{bottom:105px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Learning journey */
.card{cursor:pointer}.moving .card{cursor:grab}.moving .card.dragging{cursor:grabbing}.card-cue{display:block;font:9px 'Trebuchet MS',sans-serif;letter-spacing:.2px;margin-top:10px;color:#fff}.card.explored .card-open{background:#f1f6df;color:#244633}.card.explored .card-open:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;background:#f1f6df;border-radius:50%}dialog[open]#detail{width:min(960px,calc(100vw - 30px));grid-template-columns:.85fr 1.15fr;align-items:stretch}.detail-image{position:sticky;top:0;min-height:0;height:88svh}.detail-image img{height:100%;max-height:none;object-position:50% 45%}.detail-copy{padding:44px 34px 28px;justify-content:flex-start}.detail-copy h2{font-size:35px;line-height:1.12;margin:14px 0}.detail-copy p{line-height:1.65;margin:10px 0}.detail-copy h3{font-size:11px;letter-spacing:1px;margin:20px 0 6px}.detail-copy [hidden]{display:none!important}#lesson-progress{padding-bottom:20px}#lesson-meter{display:block;appearance:none;width:100%;height:5px;border:0;border-radius:8px;overflow:hidden;margin:12px 0;background:#dce4d5}#lesson-meter::-webkit-progress-bar{background:#dce4d5}#lesson-meter::-webkit-progress-value{background:#65835c}#lesson-meter::-moz-progress-bar{background:#65835c}#step-links{display:flex;gap:8px}#step-links button{border:1px solid #9aaf94;background:transparent;color:var(--ink);border-radius:50%;height:33px;width:33px;cursor:pointer;font:12px inherit}#step-links button[aria-current]{background:var(--sage);color:#fff;border-color:var(--sage)}.reflection{background:#e5ecdf;border-left:3px solid #8a9f6a;padding:2px 16px 8px;margin:20px 0 15px;border-radius:0 10px 10px 0}.reflection h3{margin-top:12px}.reflection p{font-family:Georgia,serif;font-size:16px;font-style:italic;line-height:1.5}#lesson-navigation{margin-top:15px}#completion-note{font-size:10px;min-height:28px}.lesson-buttons{display:flex;justify-content:space-between;gap:12px}.secondary{border:1px solid #98ac90;border-radius:9px;padding:11px 13px;font:12px 'Trebuchet MS',sans-serif;background:transparent;color:var(--ink);cursor:pointer}.secondary:disabled{cursor:default;opacity:.4}.detail-actions{border-top:1px solid #a1b39350;margin-top:20px;padding-top:4px;display:flex;justify-content:space-between}.detail-actions .text-button{display:inline-block;text-decoration:none;font-size:11px}body.evening .reflection{background:#304b3c}#lesson-content:focus{outline:none}.moving .card-cue{opacity:.9}
@media(min-width:701px) and (max-width:1100px){.card{width:140px}.welcome{width:350px;padding:30px 20px}.welcome h1{font-size:44px}}
@media(max-width:700px){dialog[open]#detail{grid-template-columns:1fr}.detail-image{position:relative;height:29svh;min-height:200px}.detail-image img{height:100%;object-position:50% 45%}.detail-copy{padding:26px 24px}.detail-copy h2{font-size:30px}.card-cue{font-size:8px;margin-top:8px}.card-copy{bottom:12px}.card-title{font-size:21px}.canvas-tools{gap:8px;padding:6px 9px}.canvas-tools button{font-size:9px}.hint{display:none}}