:root { --paper:#f2ebdd; --paper-deep:#d8d0c0; --ink:#22241e; --moss:#66705a; --rust:#a45132; --rule:#bbb19e; --soft:#e7decd; }
* { box-sizing: border-box; }
html { background: var(--paper-deep); scroll-behavior: smooth; }
body { margin:0; color:var(--ink); background:var(--paper-deep); font-family: Arial, Helvetica, sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.site-shell { width:min(940px, calc(100% - 44px)); min-height:calc(100vh - 44px); margin:22px auto; padding:0 56px; background:var(--paper); border:1px solid rgba(34,36,30,.28); box-shadow:0 20px 60px rgba(43,37,27,.15); position:relative; overflow:hidden; }
.masthead { min-height:100px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rule); position:relative; z-index:1; }
.wordmark { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:12px; font:600 25px/1 Georgia, serif; letter-spacing:-.5px; }
.wordmark { border:0; background:transparent; padding:0; cursor:pointer; }
.wordmark-mark { display:grid; place-items:center; width:39px; height:39px; border:1px solid var(--ink); border-radius:50% 48% 53% 45%; font-style:italic; transform:rotate(-5deg); }
.edition { text-transform:uppercase; letter-spacing:1.8px; font-size:10px; color:var(--moss); }
.trail-button { justify-self:end; border:0; border-bottom:1px solid var(--ink); background:transparent; padding:5px 0; cursor:pointer; font-size:12px; letter-spacing:.3px; }
.ai-mark { justify-self:end; color:var(--moss); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; }.ai-mark span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 4px rgba(102,112,90,.12);margin-right:7px}
.welcome-grid { display:block; padding:80px 0 60px; position:relative; z-index:1; }.welcome-copy h1{margin-top:20px}.topic-form{margin-top:38px}.topic-form>label{display:block;text-transform:uppercase;letter-spacing:1.6px;font-size:10px;margin-bottom:10px}.topic-input-row{display:flex;border-bottom:1px solid var(--ink)}.topic-input-row input{flex:1;min-width:0;border:0;background:transparent;padding:16px 4px;font:22px Georgia,serif;color:var(--ink);outline:0}.topic-input-row button{border:0;background:var(--ink);color:var(--paper);padding:0 20px;cursor:pointer}.topic-input-row button:disabled{opacity:.35}.starters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}.starters>span{width:100%;font:italic 13px Georgia,serif;color:#777062}.starters button,.secondary-button{border:1px solid var(--rule);background:transparent;padding:8px 11px;cursor:pointer;font-size:11px}.starters button:hover,.secondary-button:hover{border-color:var(--moss);background:rgba(102,112,90,.08)}.error-note{border-left:3px solid var(--rust);padding:10px 14px;color:var(--rust);font:italic 14px Georgia,serif}.welcome-art{display:flex;flex-direction:column;justify-content:center}.question-orbit{height:340px;display:grid;place-items:center;position:relative}.question-orbit:before,.question-orbit:after{content:"";position:absolute;border:1px solid var(--rule);border-radius:50%;width:280px;height:130px;transform:rotate(-18deg)}.question-orbit:after{width:210px;height:310px;transform:rotate(48deg)}.question-orbit span{display:grid;place-items:center;width:155px;height:155px;border-radius:50%;background:var(--soft);font:italic 84px Georgia,serif;color:var(--rust);z-index:1}.lesson-orbit{height:345px}.lesson-orbit span{font-size:62px;color:var(--moss)}
.progress-rule { display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-bottom:1px solid var(--rule); position:relative; z-index:1; }
.progress-step { border:0; border-right:1px solid var(--rule); padding:12px 16px 11px; text-align:left; background:transparent; color:#938b7c; font-size:10px; text-transform:uppercase; letter-spacing:1.1px; cursor:default; }
.progress-step:last-child { border-right:0; }.progress-step span { font-family:Georgia,serif; font-style:italic; margin-right:5px; }.progress-step.active { color:var(--ink); background:rgba(102,112,90,.07); cursor:pointer; }.progress-step[aria-current="step"] { box-shadow:inset 0 -3px var(--rust); }
.lesson-grid { display:block; padding:46px 0 46px; position:relative; z-index:1; }
.marginalia { border-right:1px solid var(--rule); padding-right:24px; display:flex; flex-direction:column; align-items:center; }
.stamp { width:69px; height:69px; border:1.5px solid var(--rust); color:var(--rust); border-radius:50%; display:grid; place-content:center; text-align:center; font:italic 24px/18px Georgia,serif; transform:rotate(-8deg); }.stamp small { font:9px Arial,sans-serif; text-transform:uppercase; letter-spacing:2px; }
.scribble { margin:42px 0 0; font:italic 15px/1.55 Georgia,serif; color:var(--moss); transform:rotate(-2deg); }.scribble:before { content:"↳"; display:block; font-size:24px; }
.folio { margin-top:auto; font-size:8px; line-height:1.8; letter-spacing:1.5px; color:#8a8172; text-align:center; }
.lesson-card { min-height:650px; }.eyebrow { color:var(--rust); text-transform:uppercase; letter-spacing:2.1px; font-size:10px; font-weight:700; }
h1 { max-width:720px; margin:20px 0 28px; font:400 clamp(45px,5vw,74px)/.98 Georgia, "Times New Roman", serif; letter-spacing:-2.6px; }
.step-panel { animation:ink-in .45s ease both; }.lede { max-width:630px; margin:0 0 28px; font:italic 19px/1.55 Georgia,serif; color:#56594e; }
.choices { border-top:1px solid var(--ink); }.choice { width:100%; display:grid; grid-template-columns:34px 1fr 28px; gap:10px; align-items:center; padding:18px 8px; border:0; border-bottom:1px solid var(--rule); background:transparent; cursor:pointer; text-align:left; transition:.2s ease; }.choice:hover { padding-left:15px; background:rgba(102,112,90,.09); }.choice.selected { padding-left:15px; background:rgba(102,112,90,.15); box-shadow:inset 4px 0 var(--moss); }.choice-letter { font:italic 14px Georgia,serif; color:var(--rust); }.choice-arrow { text-align:right; transition:transform .2s; }.choice:hover .choice-arrow { transform:translateX(5px); }
.primary-button { margin-top:28px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:14px 19px; min-width:220px; display:inline-flex; justify-content:space-between; gap:24px; cursor:pointer; transition:.2s; }.primary-button:hover:not(:disabled) { background:var(--rust); border-color:var(--rust); transform:translateY(-2px); }.primary-button:disabled { opacity:.32; cursor:not-allowed; }.primary-button.complete { background:var(--moss); border-color:var(--moss); }
.prose-panel { max-width:650px; }.prose-panel p { font:17px/1.75 Georgia,serif; }.prose-panel .dropcap:first-letter { float:left; font-size:68px; line-height:.72; padding:9px 8px 0 0; color:var(--rust); }.prose-panel blockquote { margin:28px 0 0; padding:22px 28px; border-left:3px solid var(--rust); background:rgba(164,81,50,.06); font:italic 20px/1.45 Georgia,serif; }
.answer-reveal{color:var(--rust);font-style:italic;border-bottom:1px solid var(--rule);padding-bottom:14px}.ai-experiment{min-height:240px;border:1px solid var(--rule);display:grid;place-items:center;text-align:center;padding:30px;background:linear-gradient(135deg,rgba(102,112,90,.06),rgba(164,81,50,.08))}.experiment-number{font:italic 72px Georgia,serif;color:var(--rust)}.experiment-observation{max-width:480px;font:18px/1.5 Georgia,serif}.secondary-button{margin-top:24px}
.walkthrough{border-top:1px solid var(--ink);margin:6px 0 0}.walk-step{display:grid;grid-template-columns:46px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--rule)}.walk-index{font:italic 22px Georgia,serif;color:var(--rust);line-height:1.25}.walk-step p{margin:0;font:17px/1.7 Georgia,serif;color:var(--ink)}.prose-panel .walkthrough+blockquote{margin-top:26px}
.experiment { --context:72%; height:260px; border:1px solid var(--rule); position:relative; overflow:hidden; display:grid; place-items:center; background:linear-gradient(#b7b3a7,#d9d0bd); }.moon { width:76px; height:76px; border-radius:50%; background:#f3e6bd; box-shadow:0 0 28px rgba(255,238,183,.75); z-index:2; }.horizon { position:absolute; width:100%; bottom:0; height:calc(var(--context) * .75); opacity:calc(var(--context) / 100); display:flex; justify-content:space-around; align-items:end; background:linear-gradient(transparent,#6e725f); transition:.15s; }.horizon i { width:10%; height:65%; background:#4f5549; clip-path:polygon(50% 0,100% 100%,0 100%); }.horizon i:nth-child(2),.horizon i:nth-child(4){height:40%;}.range-label { display:flex; justify-content:space-between; margin:18px 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; }input[type="range"] { width:100%; accent-color:var(--rust); }.caption { color:#726a5e; font:italic 13px Georgia,serif; }
.recall-panel label { display:block; margin-bottom:9px; text-transform:uppercase; letter-spacing:1.3px; font-size:10px; }.recall-panel textarea { width:100%; resize:vertical; border:1px solid var(--rule); background:rgba(255,255,255,.18); padding:17px; font:18px/1.6 Georgia,serif; color:var(--ink); outline:none; }.recall-panel textarea:focus { border-color:var(--moss); box-shadow:0 0 0 3px rgba(102,112,90,.13); }.recall-meta { display:flex; justify-content:space-between; margin-top:8px; color:#837b6d; font-size:10px; }
.branch-list { border-top:1px solid var(--ink); }.branch-list button { width:100%; border:0; border-bottom:1px solid var(--rule); background:transparent; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; padding:18px 8px; text-align:left; cursor:pointer; transition:.2s; }.branch-list button:hover { padding-left:16px; background:rgba(102,112,90,.1); }.branch-list span { color:var(--rust); font:italic 13px Georgia,serif; }.branch-list strong { font:400 17px Georgia,serif; }.branch-list em { color:#81786a; font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.context-panel { border-left:1px solid var(--rule); padding-left:34px; }.moon-study { height:345px; position:relative; display:grid; place-items:center; overflow:hidden; }.study-moon { width:190px; height:190px; border-radius:50%; background:radial-gradient(circle at 38% 30%,#f3ecda 0 7%,transparent 8%), radial-gradient(circle at 68% 61%,#d4cbb7 0 10%,transparent 11%), #e6ddc9; box-shadow:inset -22px -10px 0 rgba(109,101,85,.18); }.orbit { position:absolute; border:1px solid var(--rule); border-radius:50%; transform:rotate(-20deg); }.orbit.one { width:330px;height:140px;}.orbit.two { width:270px;height:310px; transform:rotate(48deg); }.figure-label { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:10px 0; font-size:8px; letter-spacing:1.4px; color:#777062; }.trail-preview { margin-top:34px; }.trail-node { font:italic 14px Georgia,serif; color:#726b5f; }.trail-node span { display:inline-block; width:9px;height:9px;border:1px solid var(--moss);border-radius:50%;margin-right:8px; }.trail-node.current { color:var(--ink); }.trail-node.current span { background:var(--rust); border-color:var(--rust); }.trail-line { height:35px;border-left:1px dashed var(--rule); margin-left:4px; }
footer { min-height:70px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; color:#786f62; font:italic 12px Georgia,serif; position:relative; z-index:1; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline:3px solid rgba(164,81,50,.35); outline-offset:3px; }
@keyframes ink-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
/* account controls in masthead */
.account{justify-self:end;display:flex;align-items:center;gap:16px}
.account-name{color:var(--moss);text-transform:uppercase;letter-spacing:1.2px;font-size:10px}
.link-btn{border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:12px;border-bottom:1px solid var(--rule);padding:3px 0;letter-spacing:.3px}
.link-btn:hover{border-color:var(--ink)}
.link-btn.strong{border-color:var(--rust);color:var(--rust)}
.orbit-caption{margin-top:6px;text-align:center;font:italic 13px Georgia,serif;color:#777062}
/* auth screen */
.auth-wrap{max-width:520px;margin:0 auto;padding:60px 0;position:relative;z-index:1}
.auth-wrap h1{font-size:clamp(40px,6vw,60px);margin:12px 0 10px}
.auth-card{border:1px solid var(--rule);background:rgba(255,255,255,.22);padding:30px 32px;margin-top:24px}
.auth-form .field{margin-bottom:18px}
.auth-form label{display:block;text-transform:uppercase;letter-spacing:1.3px;font-size:10px;margin-bottom:7px}
.auth-form input{width:100%;border:1px solid var(--rule);background:rgba(255,255,255,.4);padding:13px;font:16px Georgia,serif;color:var(--ink);outline:none}
.auth-form input:focus{border-color:var(--moss);box-shadow:0 0 0 3px rgba(102,112,90,.13)}
.auth-switch{margin-top:20px;font:italic 14px Georgia,serif;color:#6a6558}
/* what I've learned */
.learned-wrap{max-width:820px;margin:0 auto;padding:50px 0;position:relative;z-index:1}
.learned-head{position:relative}
.learned-head h1{font-size:clamp(40px,6vw,60px);margin:12px 0 18px}
.learned-head .secondary-button{position:absolute;top:0;right:0;margin-top:0}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);margin:8px 0 34px}
.stat{padding:24px 20px;text-align:center;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat-num{font:italic 46px Georgia,serif;color:var(--rust);line-height:1}
.stat-label{margin-top:8px;text-transform:uppercase;letter-spacing:1.3px;font-size:10px;color:var(--moss)}
.learned-list{border-top:1px solid var(--ink)}
.learned-entry{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:18px 6px;cursor:pointer;transition:.2s}
.learned-entry:hover{padding-left:14px;background:rgba(102,112,90,.09)}
.entry-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.entry-cat{color:var(--rust);text-transform:uppercase;letter-spacing:1.6px;font-size:10px;font-weight:700}
.learned-entry strong{font:400 20px Georgia,serif}
.entry-meta{color:#81786a;font:italic 13px Georgia,serif}
.entry-arrow{color:var(--moss);font-size:20px;flex:none}
/* saved note on branch step */
.saved-note{font:italic 14px Georgia,serif;color:var(--moss);margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.saved-note.prompt{color:#6a6558}
@media (max-width:1000px) { .site-shell{padding:0 28px}.lesson-grid,.welcome-grid{grid-template-columns:88px 1fr;gap:30px}.context-panel{grid-column:2;border-left:0;border-top:1px solid var(--rule);padding:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:28px}.masthead{grid-template-columns:1fr 1fr}.edition{display:none}.welcome-art{display:none} }
@media (max-width:700px) { .site-shell{width:100%;margin:0;min-height:100vh;padding:0 20px;border:0}.masthead{min-height:80px}.wordmark{font-size:21px}.wordmark-mark{width:34px;height:34px}.ai-mark{font-size:8px}.progress-step{padding:10px 3px;text-align:center;font-size:8px}.progress-step span{display:none}.lesson-grid,.welcome-grid{display:block;padding:30px 0;min-height:auto}.marginalia{display:none}.lesson-card{min-height:auto}h1{font-size:45px;letter-spacing:-1.8px;margin-top:16px}.context-panel{margin-top:50px;display:block;padding-top:20px}.trail-preview{margin-bottom:20px}.branch-list button{grid-template-columns:28px 1fr}.branch-list em{display:none}.recall-meta{display:block}.recall-meta span{display:block;margin-bottom:4px}footer{font-size:10px}.choice{padding:16px 4px}.primary-button{width:100%}.topic-input-row{display:block;border:0}.topic-input-row input{width:100%;border-bottom:1px solid var(--ink)}.topic-input-row button{width:100%;padding:15px;margin-top:10px} }
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}