/**
 * TERASAI — Peta Belajar Tenang
 * Charcoal learning desk, warm paper, restrained amber, and deliberate XP feedback.
 */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Instrument+Sans:wght@400;500;600;650;700&family=JetBrains+Mono:wght@500;600&display=swap");


.catalog-page { --paper:#f2ede5; --paper-deep:#e8dfd1; --ink:#171412; --ink-2:#211c18; --ink-soft:#92887e; --line:rgba(242,237,229,.14); --line-strong:rgba(242,237,229,.24); --amber:#d6a25e; --amber-bright:#e8bf81; --amber-wash:rgba(214,162,94,.14); --sage:#91a992; --red:#c88676; --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
* { box-sizing:border-box; }
html { max-width:100%; scroll-behavior:smooth; overflow-x:clip; }
body { min-width:320px; margin:0; overflow-x:clip; background:var(--ink); color:var(--paper); font-family:"Instrument Sans",Arial,sans-serif; font-size:16px; line-height:1.58; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--amber-bright); outline-offset:3px; }
.catalog-page { min-height:100vh; background:var(--ink); }

/* Shared chrome */
.topbar { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; height:76px; padding:0 clamp(18px,4.3vw,76px); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--ink) 88%,transparent); backdrop-filter:blur(15px); }
.brand,.footer-brand { display:inline-flex; align-items:center; width:max-content; gap:9px; padding:0; border:0; background:transparent; color:inherit; }
.brand-mark { width:31px; height:31px; object-fit:contain; }.brand-name,.footer-brand>span { font-family:"Cormorant Garamond",Georgia,serif; font-size:1.9rem; font-weight:600; line-height:1; letter-spacing:-.06em; }.brand-name span,.footer-brand span span { color:var(--amber); font-style:italic; }
.topbar-nav { display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); }.topbar-nav button { position:relative; padding:8px 0; border:0; background:transparent; color:var(--ink-soft); font-size:.84rem; transition:color .18s var(--ease-out); }.topbar-nav button:hover,.topbar-nav button.is-active { color:var(--paper); }.topbar-nav button.is-active::after { position:absolute; bottom:0; left:50%; width:4px; height:4px; border-radius:50%; background:var(--amber); content:""; transform:translate(-50%,4px); }
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:13px; }.xp-nav { display:inline-flex; align-items:center; gap:5px; padding:6px 0; border:0; background:transparent; color:#b4a99d; font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.045em; text-transform:uppercase; }.xp-nav span { color:var(--amber-bright); }.language-button { padding:8px 0; border:0; background:transparent; color:var(--ink-soft); font-family:"JetBrains Mono",monospace; font-size:.69rem; letter-spacing:.03em; }.language-button span { padding:0 3px; color:rgba(242,237,229,.38); }.login-button { height:35px; padding:0 15px!important; border-radius:0!important; border-color:var(--line-strong)!important; background:transparent!important; color:var(--paper)!important; font-size:.8rem!important; transition:border-color .18s var(--ease-out),color .18s var(--ease-out),background .18s var(--ease-out)!important; }.login-button:hover { border-color:var(--paper)!important; background:var(--paper)!important; color:var(--ink)!important; }
.eyebrow,.mono-label,.desk-label { display:flex; align-items:center; gap:8px; margin:0; color:var(--amber); font-family:"JetBrains Mono",monospace; font-size:.66rem; font-weight:600; letter-spacing:.135em; line-height:1.25; text-transform:uppercase; }
.primary-link { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 18px; border:0; background:var(--amber); color:var(--ink); font-size:.88rem; font-weight:650; transition:transform .16s var(--ease-out),background .16s var(--ease-out); }.primary-link:hover { background:var(--amber-bright); transform:translateY(-2px); }.primary-link:active { transform:scale(.97); }

/* Catalog mode */
.hero-section { position:relative; display:flex; align-items:center; min-height:565px; padding:104px clamp(18px,9.4vw,152px) 86px; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line); }.hero-section::before { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(90deg,var(--ink) 0%,rgba(23,20,18,.97) 34%,rgba(23,20,18,.62) 70%,rgba(23,20,18,.4) 100%); }.hero-section::after { position:absolute; z-index:-1; bottom:0; left:clamp(18px,9.4vw,152px); width:min(43vw,592px); height:1px; content:""; background:linear-gradient(90deg,var(--amber),transparent); opacity:.85; }.hero-art { position:absolute; z-index:-2; inset:0 0 0 34%; }.hero-art img { width:100%; height:100%; object-fit:cover; object-position:right center; filter:saturate(.84) contrast(1.05); }.hero-copy { width:min(47rem,100%); }.hero-copy h1,.paths-page-intro h1,.quest-page-intro h1 { max-width:15ch; margin:19px 0 24px; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(3.7rem,6.5vw,6.6rem); font-weight:500; letter-spacing:-.055em; line-height:.88; }.hero-copy h1 em,.paths-page-intro h1 em,.quest-page-intro h1 em,.level-celebration h2 em { color:var(--amber); font-style:italic; }.hero-lede { max-width:55ch; margin:0; color:#c9bfb2; font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.7; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:36px; }.quiet-link,.quiet-button { padding:0 0 3px; border:0; border-bottom:1px solid rgba(242,237,229,.4); background:transparent; color:var(--paper); font-size:.87rem; transition:color .18s var(--ease-out),border-color .18s var(--ease-out); }.quiet-link:hover,.quiet-button:hover { border-color:var(--amber); color:var(--amber); }.hero-status { position:absolute; right:clamp(18px,4vw,68px); bottom:25px; display:flex; align-items:center; gap:9px; color:#b8aea2; font-family:"JetBrains Mono",monospace; font-size:.61rem; letter-spacing:.08em; text-transform:uppercase; }.hero-status i { width:3px; height:3px; border-radius:50%; background:var(--amber); }.hero-recommendation { display:grid; grid-template-columns:29px minmax(0,1fr) 18px; align-items:center; gap:11px; width:min(35rem,100%); margin-top:29px; padding:12px 0 0; border:0; border-top:1px solid rgba(242,237,229,.18); background:transparent; color:inherit; text-align:left; transition:color .18s var(--ease-out); }.hero-recommendation:hover { color:var(--amber-bright); }.hero-recommendation strong { display:block; margin:3px 0; color:var(--paper); font-family:"Cormorant Garamond",Georgia,serif; font-size:1.22rem; font-weight:550; letter-spacing:-.03em; line-height:1; }.hero-recommendation small { display:block; color:#a69b8f; font-size:.66rem; line-height:1.4; }.hero-recommendation b { color:var(--amber); font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.1em; }.compass-paper { position:relative; display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(214,162,94,.75); transform:rotate(45deg); }.compass-paper::before { width:7px; height:7px; content:""; background:var(--amber); }.compass-paper i { position:absolute; width:13px; height:1px; background:rgba(242,237,229,.75); transform:rotate(-45deg); }
.desk-layout { display:grid; grid-template-columns:minmax(245px,26vw) minmax(0,1fr); border-bottom:1px solid var(--line); }.desk-sidebar { min-height:100%; padding:44px clamp(20px,4vw,57px) 62px; border-right:1px solid var(--line); background:#14110f; }.desk-label { margin-bottom:28px; color:var(--ink-soft); }.compass-card { padding-bottom:29px; border-bottom:1px solid var(--line); }.progress-ring { --progress:32deg; display:grid; place-items:center; width:96px; height:96px; border-radius:50%; background:conic-gradient(var(--amber) var(--progress),rgba(242,237,229,.1) 0); }.progress-ring::before { grid-area:1/1; width:84px; height:84px; border-radius:50%; content:""; background:#14110f; }.progress-ring>div { position:relative; z-index:1; grid-area:1/1; display:flex; flex-direction:column; align-items:center; }.progress-ring strong { font-family:"Cormorant Garamond",Georgia,serif; font-size:2.45rem; font-weight:500; letter-spacing:-.06em; line-height:.8; }.progress-ring span { margin-top:8px; color:var(--ink-soft); font-family:"JetBrains Mono",monospace; font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; }.compass-copy { margin-top:20px; }.compass-copy p { margin:9px 0 0; color:#c7bdb1; font-size:.85rem; line-height:1.6; }.next-note { margin-top:30px; padding-bottom:29px; border-bottom:1px solid var(--line); }.next-note .mono-label { color:var(--ink-soft); }.next-note strong { display:block; margin-top:10px; color:var(--paper); font-family:"Cormorant Garamond",Georgia,serif; font-size:1.32rem; font-weight:550; letter-spacing:-.025em; line-height:1.05; }.meta-line { display:inline-flex; align-items:center; gap:6px; margin-top:11px; color:var(--ink-soft); font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.05em; }.note-button { display:inline-flex; align-items:center; gap:6px; height:auto; margin:14px -4px -6px; padding:6px 4px!important; border-radius:0!important; color:var(--amber)!important; font-size:.77rem!important; }.note-button:hover { background:transparent!important; color:var(--amber-bright)!important; }.directory-stats { margin-top:30px; padding-bottom:26px; border-bottom:1px solid var(--line); }.directory-stats>b { display:flex; align-items:baseline; gap:8px; margin:9px 0 6px; color:var(--amber-bright); font-family:"Cormorant Garamond",Georgia,serif; font-size:3.2rem; font-weight:500; letter-spacing:-.06em; line-height:.8; }.directory-stats>b small { color:var(--ink-soft); font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.055em; text-transform:uppercase; }.directory-stats p { margin:0; color:#a89d91; font-size:.74rem; line-height:1.55; }.desk-index { display:grid; margin-top:26px; }.desk-index button { display:grid; grid-template-columns:26px 1fr; column-gap:10px; padding:9px 0; border:0; background:transparent; color:inherit; text-align:left; transition:color .18s var(--ease-out); }.desk-index button:hover { color:var(--amber); }.desk-index b { grid-row:span 2; color:var(--amber); font-family:"JetBrains Mono",monospace; font-size:.62rem; font-weight:500; }.desk-index span { font-size:.8rem; font-weight:600; }.desk-index small { color:var(--ink-soft); font-size:.68rem; }
.catalog-content { padding:66px clamp(20px,6vw,104px) 82px; background:var(--paper); color:var(--ink); }.catalog-heading { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(220px,.55fr); gap:38px; align-items:end; padding-bottom:38px; border-bottom:1px solid #d5cabc; }.catalog-heading h2 { max-width:13ch; margin:16px 0 0; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2.55rem,4.3vw,4.7rem); font-weight:500; letter-spacing:-.055em; line-height:.92; }.catalog-heading>p { max-width:34ch; margin:0 0 5px; color:#70665c; font-size:.92rem; line-height:1.7; }.catalog-content .eyebrow { color:#9f6f31; }.eyebrow-line { display:inline-block; width:19px; height:1px; background:#9f6f31; }.search-shell { display:flex; align-items:center; gap:12px; min-height:58px; margin-top:32px; padding:0 16px; border:1px solid #cfc4b6; background:#fbf8f2; transition:border-color .2s var(--ease-out),background .2s var(--ease-out); }.search-shell:focus-within { border-color:#a97635; background:#fffdf9; }.search-shell>svg { flex:0 0 auto; color:#a97635; }.search-shell input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:.95rem; }.search-shell input::placeholder { color:#8c8174; }.search-shell kbd { padding:4px 7px; border:1px solid #d6cabc; color:#827669; font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.04em; }.clear-search { display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; background:transparent; color:#8a7d71; }.clear-search:hover { color:var(--ink); }.catalog-controls { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:22px 0 16px; }.filter-row { display:flex; flex-wrap:wrap; gap:7px; }.filter-chip { display:inline-flex; align-items:center; gap:6px; min-height:31px; padding:0 10px; border:1px solid transparent; background:transparent; color:#776c61; font-size:.76rem; transition:color .18s var(--ease-out),border-color .18s var(--ease-out),background .18s var(--ease-out); }.filter-chip:hover { color:var(--ink); }.filter-chip.is-active { border-color:rgba(159,111,49,.48); background:rgba(214,162,94,.16); color:#7f5623; }.filter-chip b { color:#9b8f80; font-family:"JetBrains Mono",monospace; font-size:.58rem; font-weight:500; }.filter-chip.is-active b { color:#9f6f31; }.results-count { margin:0; color:#8a7e71; font-family:"JetBrains Mono",monospace; font-size:.61rem; letter-spacing:.045em; white-space:nowrap; text-transform:uppercase; }.results-count b { color:var(--ink); font-weight:500; }.directory-groups { display:grid; gap:57px; margin-top:24px; }.catalog-group { scroll-margin-top:98px; }.catalog-group-head { display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:start; margin-bottom:18px; }.group-number { padding-top:2px; color:rgba(159,111,49,.66); font-family:"Cormorant Garamond",Georgia,serif; font-size:2.6rem; font-style:italic; line-height:.8; }.catalog-group-head h3 { max-width:29ch; margin:7px 0 0; color:var(--ink); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.65rem,2.2vw,2.45rem); font-weight:550; letter-spacing:-.045em; line-height:.96; }.material-list { border-top:1px solid #d5cabc; }.material-row { border-bottom:1px solid #d9cec0; transition:background .2s var(--ease-out); }.material-row:hover,.material-row.is-open { background:#ebe3d7; }.material-trigger { display:grid; grid-template-columns:42px minmax(0,1fr) auto 26px; align-items:center; gap:14px; width:100%; padding:23px 0; border:0; background:transparent; color:inherit; text-align:left; }.material-number { align-self:start; padding-top:3px; color:#918474; font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.07em; }.material-main { min-width:0; }.material-topline { display:flex; align-items:center; gap:7px; margin-bottom:6px; color:#92662c; font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.09em; line-height:1; text-transform:uppercase; }.material-topline b { display:inline-flex; align-items:center; gap:3px; padding:3px 5px; background:rgba(97,126,102,.12); color:#46664b; font-size:.53rem; font-weight:600; }.material-topline .xp-reward-badge { background:rgba(214,162,94,.2); color:#7e541f; }.material-main strong { display:block; color:#1b1713; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.22rem,1.65vw,1.55rem); font-weight:550; letter-spacing:-.028em; line-height:1.03; transition:color .18s var(--ease-out); }.material-row:hover .material-main strong { color:#7d5422; }.material-meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:79px; color:#786d61; font-family:"JetBrains Mono",monospace; font-size:.59rem; letter-spacing:.04em; text-transform:uppercase; }.material-meta>span:last-child { display:inline-flex; align-items:center; gap:5px; color:#938677; text-transform:none; }.material-chevron { color:#8a7d70; transition:transform .2s var(--ease-out),color .2s var(--ease-out); }.material-row.is-open .material-chevron { color:#9e6e2d; transform:rotate(180deg); }.material-preview { display:none; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; margin:-3px 0 0 42px; padding:16px 0 24px; border-top:1px dashed #cfbfae; }.material-preview.is-visible { display:grid; animation:preview-in .22s var(--ease-out) both; }.preview-takeaway { display:flex; align-items:flex-start; gap:11px; color:#5f554b; font-size:.8rem; line-height:1.55; }.preview-takeaway svg { flex:0 0 auto; margin-top:2px; color:#9d6b2d; }.preview-takeaway span { display:flex; flex-direction:column; gap:2px; }.preview-takeaway b { color:#2b251f; font-size:.68rem; font-weight:650; letter-spacing:.04em; text-transform:uppercase; }.begin-button { min-width:137px; min-height:38px; border-radius:0!important; background:#1b1713!important; color:var(--paper)!important; font-size:.76rem!important; transition:transform .16s var(--ease-out),background .16s var(--ease-out)!important; }.begin-button:hover { background:#382a1c!important; transform:translateY(-1px); }.begin-button.is-locked { border:1px solid #a87534!important; background:transparent!important; color:#80551e!important; }.begin-button.is-locked:hover { background:rgba(214,162,94,.14)!important; }.empty-search { display:flex; flex-direction:column; align-items:flex-start; margin-top:26px; padding:36px; border:1px solid #d4c7b8; background:#fbf8f2; }.empty-search svg { color:#a97635; }.empty-search h3 { margin:14px 0 4px; color:var(--ink); font-family:"Cormorant Garamond",Georgia,serif; font-size:1.85rem; font-weight:550; }.empty-search p { max-width:45ch; margin:0 0 21px; color:#756b60; font-size:.84rem; }

/* Daily quest mode */
.quest-page { min-height:calc(100vh - 76px); padding:clamp(54px,7.2vw,110px) clamp(20px,9.3vw,150px) clamp(74px,8vw,128px); background:linear-gradient(180deg,#171311 0%,#12100e 100%); }.quest-page-intro { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(330px,.76fr); gap:clamp(42px,8vw,130px); align-items:end; padding-bottom:clamp(48px,7vw,96px); border-bottom:1px solid var(--line); }.quest-page-intro h1 { max-width:11.5ch; margin-bottom:20px; font-size:clamp(3.5rem,6vw,6.1rem); }.quest-lede { max-width:48ch; margin:0; color:#c3b7a9; font-size:1rem; line-height:1.72; }.xp-rule { display:flex; align-items:flex-start; gap:9px; max-width:47ch; margin:24px 0 0; padding-top:18px; border-top:1px solid var(--line); color:#aba093; font-size:.82rem; line-height:1.55; }.xp-rule svg { flex:0 0 auto; margin-top:2px; color:var(--amber); }.xp-rule b { color:var(--amber-bright); }.rank-card { display:grid; grid-template-columns:124px minmax(0,1fr); column-gap:18px; padding:18px 0 0; border-top:1px solid rgba(214,162,94,.45); }.rank-art { align-self:start; display:grid; place-items:center; width:124px; height:124px; overflow:hidden; border:1px solid rgba(214,162,94,.34); background:radial-gradient(circle at 50% 55%,rgba(214,162,94,.18),transparent 66%),#1b1612; }.rank-art img { width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; }.rank-copy strong { display:block; margin-top:7px; color:var(--paper); font-family:"Cormorant Garamond",Georgia,serif; font-size:2.5rem; font-weight:550; letter-spacing:-.06em; line-height:.85; }.rank-copy small { display:block; margin-top:7px; color:var(--amber); font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.07em; text-transform:uppercase; }.rank-copy p { margin:12px 0 0; color:#aaa094; font-size:.75rem; line-height:1.5; }.rank-xp { grid-column:1/-1; margin-top:21px; }.rank-xp-head { display:flex; justify-content:space-between; gap:16px; color:#9b9084; font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; }.rank-xp-head b { color:var(--paper); font-weight:500; text-align:right; }.rank-xp-track { height:3px; margin-top:9px; overflow:hidden; background:rgba(242,237,229,.12); }.rank-xp-track i { display:block; height:100%; background:var(--amber); transition:width .3s var(--ease-out); }.quest-page-main { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.65fr); gap:clamp(36px,7vw,112px); padding-top:clamp(46px,6.5vw,94px); }.quest-console { position:relative; overflow:hidden; padding:clamp(22px,3vw,34px); border:1px solid rgba(214,162,94,.38); background:#1b1612; }.quest-console::after { position:absolute; right:-142px; bottom:-192px; z-index:0; width:380px; height:380px; border:1px solid rgba(214,162,94,.16); border-radius:50%; content:""; box-shadow:0 0 0 56px rgba(214,162,94,.025),0 0 0 112px rgba(214,162,94,.018); pointer-events:none; }.quest-console>* { position:relative; z-index:1; }.quest-console-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.quest-console-head strong { display:block; max-width:16ch; margin-top:9px; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.95rem,3.15vw,3rem); font-weight:550; letter-spacing:-.05em; line-height:.9; }.quest-date { padding-top:3px; color:#8f8478; font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.085em; text-align:right; text-transform:uppercase; }.quest-date span,.quest-date b { display:block; }.quest-date b { margin-top:5px; color:#cfc5b7; font-size:.64rem; font-weight:500; letter-spacing:.03em; text-transform:none; }.quest-status { display:flex; justify-content:space-between; gap:12px; margin-top:28px; color:#978c80; font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.055em; text-transform:uppercase; }.quest-status b { color:var(--paper); font-weight:500; }.quest-status span:last-child { display:inline-flex; align-items:center; gap:5px; }.quest-track { height:2px; margin:10px 0 29px; overflow:hidden; background:rgba(242,237,229,.14); }.quest-track i { display:block; height:100%; background:var(--amber); transition:width .3s var(--ease-out); }.quest-question { padding:clamp(19px,2.5vw,29px); border:1px solid rgba(242,237,229,.13); background:rgba(11,10,8,.31); }.quest-topic { display:flex; align-items:center; gap:7px; margin:0; color:var(--amber); font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; }.quest-topic span { color:#776d63; }.quest-question h2 { max-width:23ch; margin:14px 0 23px; color:#eee7db; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.8rem,2.8vw,2.7rem); font-weight:550; letter-spacing:-.045em; line-height:.98; }.quest-options { display:grid; gap:8px; }.quest-option { display:flex; align-items:flex-start; gap:11px; min-height:58px; padding:13px; border:1px solid rgba(242,237,229,.13); background:#18130f; color:#c4b9ac; font-size:.78rem; line-height:1.45; text-align:left; transition:border-color .18s var(--ease-out),color .18s var(--ease-out),background .18s var(--ease-out),transform .16s var(--ease-out); }.quest-option:not(:disabled):hover { border-color:rgba(214,162,94,.62); background:rgba(214,162,94,.08); color:var(--paper); transform:translateX(3px); }.quest-option:active { transform:scale(.97); }.quest-option span { display:grid; flex:0 0 auto; place-items:center; width:19px; height:19px; border:1px solid rgba(214,162,94,.42); color:var(--amber); font-family:"JetBrains Mono",monospace; font-size:.56rem; }.quest-option:disabled { cursor:default; }.quest-option.is-correct { border-color:rgba(145,169,146,.65); background:rgba(145,169,146,.1); color:#d4ded3; }.quest-option.is-wrong { border-color:rgba(200,134,118,.5); color:#caa199; opacity:.9; }.quest-option.is-muted { opacity:.34; }.quest-feedback { margin-top:18px; padding:16px 0 0; border-top:1px solid var(--line); color:#c7bcb0; font-size:.78rem; line-height:1.55; }.quest-feedback-title { display:flex; align-items:center; gap:7px; }.quest-feedback-title svg { color:var(--amber); }.quest-feedback.is-correct .quest-feedback-title svg { color:var(--sage); }.quest-feedback p { margin:7px 0 0; }.xp-gain { margin-left:auto; color:var(--amber-bright); font-family:"JetBrains Mono",monospace; font-size:.65rem; font-weight:600; letter-spacing:.08em; animation:xp-gain .48s var(--ease-out) both; }.quest-next,.milestone-link { display:inline-flex; align-items:center; gap:6px; margin-top:16px; padding:0; border:0; background:transparent; color:var(--amber); font-size:.78rem; font-weight:650; transition:color .18s var(--ease-out),transform .18s var(--ease-out); }.quest-next:hover,.milestone-link:hover { color:var(--amber-bright); transform:translateX(2px); }.quest-result { max-width:43ch; padding:clamp(21px,3vw,32px) 0 8px; }.result-mark { display:grid; place-items:center; width:56px; height:56px; border:1px solid rgba(145,169,146,.55); color:var(--sage); }.quest-result .mono-label { margin-top:24px; }.quest-result h2 { margin:12px 0; color:var(--paper); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2.4rem,4vw,3.8rem); font-weight:550; letter-spacing:-.06em; line-height:.9; }.quest-result p:not(.mono-label) { margin:0; color:#b9aea1; font-size:.9rem; line-height:1.7; }.quest-result p b { color:var(--amber-bright); }.result-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:28px; }.milestone-board { padding-top:5px; }.milestone-head h2 { max-width:13ch; margin:13px 0 12px; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2.2rem,3.4vw,3.5rem); font-weight:550; letter-spacing:-.055em; line-height:.9; }.milestone-board>p { max-width:31ch; margin:0 0 25px; color:#a89d91; font-size:.8rem; line-height:1.65; }.milestone-list { border-top:1px solid var(--line); }.milestone-item { display:grid; grid-template-columns:37px minmax(0,1fr) auto; gap:12px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); color:#81766b; }.milestone-number { display:flex; flex-direction:column; color:#857a6f; font-family:"Cormorant Garamond",Georgia,serif; line-height:.75; }.milestone-number b { font-size:1.8rem; font-weight:550; letter-spacing:-.05em; }.milestone-number span { margin-top:6px; font-family:"JetBrains Mono",monospace; font-size:.48rem; letter-spacing:.07em; }.milestone-item>div:nth-child(2) { display:flex; min-width:0; flex-direction:column; }.reward-tier { color:#877a6d; font-family:"JetBrains Mono",monospace; font-size:.52rem; letter-spacing:.07em; text-transform:uppercase; }.milestone-item strong { display:block; margin-top:4px; color:#b9aea1; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.08rem; font-weight:550; letter-spacing:-.025em; line-height:1; }.milestone-item small { display:block; margin-top:5px; font-size:.62rem; line-height:1.35; }.reward-status { display:inline-flex; align-items:center; gap:4px; color:#81766b; font-family:"JetBrains Mono",monospace; font-size:.5rem; letter-spacing:.04em; text-transform:uppercase; }.milestone-item.is-unlocked .milestone-number,.milestone-item.is-unlocked .reward-tier,.milestone-item.is-unlocked .reward-status { color:var(--amber); }.milestone-item.is-unlocked strong { color:var(--paper); }.milestone-item.is-unlocked .reward-status svg { color:var(--sage); }

/* Paths mode */
.paths-page { background:#191512; }.paths-page-intro { max-width:840px; padding:clamp(68px,9vw,138px) clamp(20px,9.3vw,150px) clamp(52px,7vw,98px); }.paths-page-intro h1 { max-width:12ch; margin-bottom:21px; }.paths-page-intro>p:not(.eyebrow) { max-width:56ch; margin:0; color:#c3b8ab; font-size:1.05rem; line-height:1.72; }.path-feature { display:grid; grid-template-columns:minmax(290px,.95fr) minmax(0,1.05fr); margin:0 clamp(20px,9.3vw,150px); border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }.path-image { min-height:365px; overflow:hidden; border-right:1px solid var(--line-strong); background:#201a15; }.path-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.8); transition:transform .6s var(--ease-out); }.path-feature:hover .path-image img { transform:scale(1.025); }.path-copy { padding:clamp(30px,4.8vw,70px); }.path-number { display:block; margin-bottom:21px; color:rgba(214,162,94,.52); font-family:"Cormorant Garamond",Georgia,serif; font-size:3.7rem; font-style:italic; line-height:.7; }.path-copy h2,.path-card h2 { margin:13px 0; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2rem,3vw,3rem); font-weight:550; letter-spacing:-.05em; line-height:.92; }.path-copy>p:not(.mono-label) { max-width:47ch; margin:0; color:#b4a99d; font-size:.91rem; line-height:1.7; }.path-stops { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:26px; color:#d9d0c4; font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.03em; }.path-stops span { padding:6px 8px; border:1px solid var(--line); }.path-stops i { width:16px; height:1px; background:var(--amber); }.path-link,.path-card button { display:inline-flex; align-items:center; gap:7px; margin-top:31px; padding:0; border:0; background:transparent; color:var(--amber); font-size:.8rem; font-weight:650; transition:color .18s var(--ease-out),transform .18s var(--ease-out); }.path-link:hover,.path-card button:hover { color:var(--amber-bright); transform:translateX(2px); }.two-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 clamp(20px,9.3vw,150px); border-bottom:1px solid var(--line-strong); }.path-card { display:grid; grid-template-columns:.82fr 1.18fr; min-height:272px; }.path-card+.path-card { border-left:1px solid var(--line-strong); }.path-card-image { overflow:hidden; }.path-card-image img { width:100%; min-height:272px; height:100%; object-fit:cover; filter:saturate(.74) brightness(.88); transition:transform .5s var(--ease-out); }.path-card:hover .path-card-image img { transform:scale(1.04); }.path-card-copy { padding:31px 30px; }.path-card h2 { margin-top:9px; font-size:clamp(1.55rem,2vw,2.15rem); }.path-card p { color:#a89d91; font-size:.79rem; line-height:1.6; }.path-card button { margin-top:13px; font-size:.76rem; }.ritual-section { display:grid; grid-template-columns:minmax(150px,.42fr) minmax(0,1.15fr) minmax(220px,.55fr); gap:52px; align-items:center; margin-top:clamp(62px,8vw,118px); padding:84px clamp(20px,9.3vw,150px); background:var(--amber); color:var(--ink); }.ritual-index { font-family:"JetBrains Mono",monospace; font-size:.65rem; font-weight:600; letter-spacing:.09em; line-height:1.6; }.ritual-index em { font-family:"Cormorant Garamond",Georgia,serif; font-size:2.7rem; font-weight:500; letter-spacing:-.07em; }.ritual-section blockquote { margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2rem,3.3vw,3.65rem); font-weight:550; letter-spacing:-.05em; line-height:.98; }.ritual-rule { display:flex; align-items:flex-start; gap:10px; padding-left:22px; border-left:1px solid rgba(23,20,18,.32); font-size:.78rem; line-height:1.55; }.ritual-rule svg { flex:0 0 auto; margin-top:2px; }

/* Level-up celebration: rare feedback, transform + opacity only. */
.level-overlay { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:rgba(12,10,8,.72); backdrop-filter:blur(8px); }.level-celebration { position:relative; width:min(550px,100%); overflow:hidden; padding:clamp(34px,5vw,58px); border:1px solid rgba(214,162,94,.56); background:#1b1612; text-align:center; animation:level-enter .42s var(--ease-out) both; }.level-celebration::before { position:absolute; inset:-80px -80px auto; height:230px; content:""; background:radial-gradient(circle,rgba(214,162,94,.19),transparent 65%); pointer-events:none; }.level-close { position:absolute; top:13px; right:17px; z-index:2; width:32px; height:32px; border:0; background:transparent; color:#c4b8aa; font-family:"Cormorant Garamond",Georgia,serif; font-size:2rem; line-height:1; }.level-character { position:relative; z-index:1; width:142px; height:142px; margin:0 auto 28px; overflow:hidden; border:1px solid rgba(214,162,94,.4); background:#201913; animation:character-rise .58s var(--ease-out) both; }.level-character img { width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; }.level-celebration .eyebrow { justify-content:center; }.level-celebration h2 { max-width:12ch; margin:16px auto; color:var(--paper); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2.55rem,5vw,4rem); font-weight:550; letter-spacing:-.065em; line-height:.9; }.level-celebration p:not(.eyebrow) { max-width:39ch; margin:0 auto 26px; color:#bcb0a2; font-size:.89rem; line-height:1.65; }.level-celebration p b { color:var(--amber-bright); }
.site-footer { display:grid; grid-template-columns:1fr 1.15fr auto; align-items:center; gap:30px; padding:36px clamp(20px,4.3vw,76px); background:#110f0d; color:#a79d92; }.footer-brand img { width:28px; height:28px; object-fit:contain; }.footer-brand>span { color:var(--paper); font-size:1.65rem; }.site-footer p { margin:0; font-size:.77rem; }.footer-links { display:flex; gap:17px; }.footer-links button { padding:0; border:0; background:transparent; color:inherit; font-size:.72rem; }.footer-links button:hover { color:var(--amber); }

@keyframes preview-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@keyframes xp-gain { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes level-enter { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes character-rise { from { opacity:0; transform:translateY(16px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width:1040px) { .hero-section { padding-right:clamp(24px,6vw,72px); padding-left:clamp(24px,6vw,72px); }.hero-art { left:43%; }.desk-layout { grid-template-columns:minmax(225px,30vw) minmax(0,1fr); }.desk-sidebar { padding-right:28px; padding-left:28px; }.catalog-content { padding-right:clamp(28px,4vw,55px); padding-left:clamp(28px,4vw,55px); }.quest-page-main { grid-template-columns:1fr; }.milestone-board { max-width:720px; }.two-paths { grid-template-columns:1fr; }.path-card+.path-card { border-top:1px solid var(--line-strong); border-left:0; }.ritual-section { grid-template-columns:.35fr 1fr; }.ritual-rule { grid-column:2; } }
@media (max-width:760px) { .topbar { height:auto; min-height:66px; grid-template-columns:1fr auto; padding-top:13px; padding-bottom:13px; }.topbar-nav { grid-column:1/-1; grid-row:2; justify-content:space-between; gap:10px; order:3; padding-top:8px; border-top:1px solid var(--line); }.topbar-nav button { font-size:.74rem; }.topbar-nav button.is-active::after { transform:translate(-50%,2px); }.topbar-actions { gap:10px; }.xp-nav { display:none; }.login-button { height:34px; }.hero-section { display:flex; align-items:flex-start; min-height:0; padding-top:78px; padding-bottom:154px; }.hero-section::before { background:linear-gradient(90deg,rgba(23,20,18,.98),rgba(23,20,18,.87) 64%,rgba(23,20,18,.5)); }.hero-art { left:0; opacity:.66; }.hero-art img { object-position:69% center; }.hero-copy h1,.paths-page-intro h1,.quest-page-intro h1 { max-width:11.5ch; font-size:clamp(3.5rem,14vw,5.25rem); line-height:.89; }.hero-copy h1 em { white-space:normal; }.hero-lede { font-size:.98rem; }.hero-status { right:auto; bottom:25px; left:24px; flex-wrap:wrap; }.desk-layout { grid-template-columns:1fr; }.desk-sidebar { display:grid; grid-template-columns:1.1fr .9fr; column-gap:24px; padding:29px 24px; border-right:0; border-bottom:1px solid var(--line); }.desk-label { grid-column:1/-1; margin-bottom:19px; }.compass-card,.next-note { padding-bottom:0; border-bottom:0; }.compass-card { display:grid; grid-template-columns:84px 1fr; align-items:center; gap:15px; }.progress-ring { width:76px; height:76px; }.progress-ring::before { width:66px; height:66px; }.progress-ring strong { font-size:2rem; }.progress-ring span { margin-top:5px; font-size:.48rem; }.compass-copy { margin-top:0; }.compass-copy p { margin-top:6px; font-size:.76rem; }.next-note { margin-top:0; padding-left:21px; border-left:1px solid var(--line); }.next-note strong { font-size:1.14rem; }.desk-index,.directory-stats { display:none; }.catalog-content { padding:46px 24px 57px; }.catalog-heading { grid-template-columns:1fr; gap:17px; padding-bottom:29px; }.catalog-heading h2 { font-size:clamp(2.8rem,12vw,4rem); }.catalog-heading>p { margin-bottom:0; font-size:.84rem; }.search-shell { min-height:54px; margin-top:23px; padding:0 13px; }.search-shell kbd { display:none; }.catalog-controls { flex-direction:column; align-items:flex-start; gap:16px; }.filter-row { flex-wrap:nowrap; max-width:calc(100vw - 48px); padding-bottom:3px; overflow-x:auto; scrollbar-width:none; }.filter-row::-webkit-scrollbar { display:none; }.filter-chip { flex:0 0 auto; }.material-trigger { grid-template-columns:27px minmax(0,1fr) 20px; gap:8px; padding:21px 0; }.material-meta { grid-row:2; grid-column:2; flex-direction:row; align-items:center; gap:10px; margin-top:7px; }.material-chevron { grid-row:1 / span 2; grid-column:3; }.material-preview { grid-template-columns:1fr; gap:17px; margin-left:27px; padding-bottom:22px; }.begin-button { justify-self:start; }.quest-page { min-height:auto; padding:52px 24px 68px; }.quest-page-intro { grid-template-columns:1fr; gap:34px; padding-bottom:55px; }.quest-page-intro h1 { font-size:clamp(3.3rem,13vw,4.9rem); }.quest-lede { font-size:.94rem; }.rank-card { max-width:460px; }.quest-page-main { gap:50px; padding-top:48px; }.quest-console { padding:19px; }.quest-console-head strong { font-size:2.2rem; }.quest-question { padding:20px; }.quest-question h2 { font-size:2rem; }.quest-option { min-height:53px; padding:11px; font-size:.73rem; }.milestone-head h2 { font-size:2.55rem; }.milestone-item { grid-template-columns:33px minmax(0,1fr); }.reward-status { grid-column:2; margin-top:1px; }.paths-page-intro { padding:65px 24px 52px; }.paths-page-intro>p:not(.eyebrow) { font-size:.95rem; }.path-feature,.two-paths { margin-right:24px; margin-left:24px; }.path-feature { grid-template-columns:1fr; }.path-image { min-height:235px; border-right:0; border-bottom:1px solid var(--line-strong); }.path-copy { padding:35px 24px 38px; }.path-card { grid-template-columns:.8fr 1.2fr; min-height:224px; }.path-card-image img { min-height:224px; }.path-card-copy { padding:25px 20px; }.ritual-section { grid-template-columns:1fr; gap:22px; margin-top:64px; padding:64px 24px; }.ritual-section blockquote { font-size:clamp(2.4rem,11vw,3.55rem); }.ritual-rule { grid-column:auto; padding:16px 0 0; border-top:1px solid rgba(23,20,18,.3); border-left:0; }.site-footer { grid-template-columns:1fr; gap:16px; padding:31px 24px 38px; }.footer-links { overflow-x:auto; padding-bottom:2px; white-space:nowrap; } }
@media (max-width:430px) { .language-button,.quest-date { display:none; }.hero-section { padding-right:20px; padding-left:20px; }.hero-status { left:20px; font-size:.55rem; }.desk-sidebar { grid-template-columns:1fr; gap:22px; }.next-note { margin-top:0; padding:21px 0 0; border-top:1px solid var(--line); border-left:0; }.path-card { grid-template-columns:1fr; }.path-card-image img { min-height:170px; max-height:170px; }.path-card-copy { padding:25px 22px 28px; }.quest-page { padding-right:18px; padding-left:18px; }.quest-console { padding:15px; }.quest-question { padding:16px; }.rank-card { grid-template-columns:102px minmax(0,1fr); }.rank-art { width:102px; height:102px; }.rank-copy strong { font-size:2.15rem; }.result-actions { align-items:flex-start; flex-direction:column; gap:16px; }.level-celebration { padding:40px 26px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* AI-assisted positioning, one shared work loop, and a local QC practice state. */
.paths-positioning { margin-top:17px!important; color:#e1d7c9!important; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.28rem!important; line-height:1.28!important; }
.work-loop,.quality-control-path { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr); gap:32px; margin:0 clamp(20px,9.3vw,150px); padding:28px 0; border-top:1px solid var(--line-strong); }
.work-loop strong { display:block; margin-top:9px; color:var(--paper); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.55rem,2.5vw,2.35rem); font-weight:550; letter-spacing:-.045em; line-height:1; }
.work-loop p,.quality-control-path p { max-width:43ch; margin:0; color:#aca195; font-size:.81rem; line-height:1.65; }
.quality-control-path { grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr); padding:39px 0; border-bottom:1px solid var(--line-strong); }
.quality-control-path h2 { max-width:18ch; margin:10px 0; color:var(--paper); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.7rem,2.6vw,2.5rem); font-weight:550; letter-spacing:-.045em; line-height:.98; }
.quality-control-actions { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; padding-left:26px; border-left:1px solid var(--line); }
.quality-control-actions>span { color:#bdb2a5; font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.05em; text-transform:uppercase; }
.quality-control-actions button { display:inline-flex; align-items:center; gap:7px; padding:0; border:0; background:transparent; color:var(--amber); font-size:.8rem; font-weight:650; text-align:left; }
.quality-control-actions .quality-control-complete { color:#d9d0c4; font-size:.72rem; font-weight:500; }
@media (max-width:760px) { .work-loop,.quality-control-path { grid-template-columns:1fr; gap:17px; margin-right:24px; margin-left:24px; }.quality-control-actions { padding-top:18px; padding-left:0; border-top:1px solid var(--line); border-left:0; }.paths-positioning { font-size:1.15rem!important; } }

/* Review refinement: make the hero choose one next action and give long catalog runs an editorial rhythm. */
.hero-section::before { background:linear-gradient(90deg,#211a14 0%,rgba(31,25,20,.95) 34%,rgba(31,25,20,.58) 70%,rgba(31,25,20,.32) 100%); }
.hero-art img { filter:brightness(1.09) saturate(.9) contrast(.98); }
.hero-lede { color:#d2c6b8; }
.hero-status { color:#c0b5a7; }
.hero-decision { grid-template-columns:46px minmax(0,1fr) 18px; margin-top:31px; padding:16px 15px; border:1px solid rgba(214,162,94,.45); background:linear-gradient(90deg,rgba(214,162,94,.12),rgba(214,162,94,.025)); }
.hero-decision .compass-paper { width:34px; height:34px; }
.hero-decision .compass-paper::before { width:9px; height:9px; }
.hero-decision strong { margin:5px 0; font-size:1.42rem; }
.hero-decision small { color:#bcae9e; }
.catalog-checkpoint { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:18px; margin:34px 0 7px; padding:19px 0; border-top:1px solid #d5cabc; border-bottom:1px solid #d5cabc; }
.catalog-checkpoint .compass-paper { width:23px; height:23px; border-color:#a87534; }
.catalog-checkpoint .compass-paper::before { width:6px; height:6px; background:#a87534; }
.catalog-checkpoint .compass-paper i { background:#8e7455; }
.catalog-checkpoint strong { display:block; max-width:48ch; margin-top:6px; color:#44392e; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.18rem; font-weight:550; line-height:1.15; }
.catalog-checkpoint button { display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:transparent; color:#85602d; font-size:.72rem; font-weight:650; white-space:nowrap; transition:color .18s var(--ease-out),transform .18s var(--ease-out); }
.catalog-checkpoint button:hover { color:#5f3b14; transform:translateX(2px); }
@media (max-width:760px) { .hero-section::before { background:linear-gradient(90deg,rgba(33,26,20,.98),rgba(33,26,20,.87) 64%,rgba(33,26,20,.5)); }.hero-decision { grid-template-columns:40px minmax(0,1fr) 15px; padding:13px 11px; }.hero-decision .compass-paper { width:30px; height:30px; }.hero-decision strong { font-size:1.22rem; }.catalog-checkpoint { grid-template-columns:27px minmax(0,1fr); gap:12px; margin-top:28px; }.catalog-checkpoint button { grid-column:2; justify-self:start; margin-top:3px; } }

/* Catalog hierarchy: access tier → collection → chapter → subchapter → material. */
.hierarchy-catalog-content { min-height:920px; }.access-switcher { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0 20px; border-bottom:1px solid #d8cec1; }.access-switcher .mono-label { color:#82603a; white-space:nowrap; }.access-switcher .filter-row { justify-content:flex-end; }.catalog-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:25px 0 8px; color:#837668; font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.045em; text-transform:uppercase; }.catalog-breadcrumb button { padding:0; border:0; background:transparent; color:#806033; font:inherit; transition:color .18s var(--ease-out); }.catalog-breadcrumb button:hover { color:var(--ink); }.catalog-breadcrumb svg { color:#a69988; }.catalog-breadcrumb span { color:#6e6256; }
.collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:30px; }.collection-card { position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto 1fr auto; gap:7px 13px; min-height:278px; padding:25px; overflow:hidden; border:1px solid #d4c8b8; background:#fbf8f2; color:var(--ink); text-align:left; transition:border-color .22s var(--ease-out),box-shadow .22s var(--ease-out),transform .22s var(--ease-out); }.collection-card::before { position:absolute; top:0; right:0; left:0; height:5px; content:""; background:#a77740; }.collection-card::after { position:absolute; right:-38px; bottom:-56px; width:155px; height:155px; border:1px solid rgba(154,109,53,.15); border-radius:50%; content:""; box-shadow:0 0 0 28px rgba(154,109,53,.045),0 0 0 56px rgba(154,109,53,.022); pointer-events:none; }.collection-card--workflow::before { background:#7f967f; }.collection-card--bundle-life::before { background:#8e7b9f; }.collection-card--pro-library::before { background:#3a2b22; }.collection-card:hover { border-color:#a97635; box-shadow:0 10px 24px rgba(57,40,20,.1); transform:translateY(-2px); }.collection-number { grid-row:span 2; align-self:start; color:#b88a50; font-family:"Cormorant Garamond",Georgia,serif; font-size:3.15rem; font-style:italic; font-weight:550; letter-spacing:-.08em; line-height:.7; }.collection-access { align-self:end; color:#8b6841; font-family:"JetBrains Mono",monospace; font-size:.56rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }.collection-card strong { grid-column:2; color:#211b15; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.55rem,2.2vw,2.05rem); font-weight:550; letter-spacing:-.04em; line-height:.95; }.collection-card small { grid-column:1/-1; max-width:48ch; color:#6e6256; font-size:.78rem; line-height:1.6; }.collection-meta { display:flex; grid-column:1/-1; align-self:end; align-items:center; flex-wrap:wrap; gap:7px; color:#806f5d; font-family:"JetBrains Mono",monospace; font-size:.55rem; letter-spacing:.035em; text-transform:uppercase; }.collection-meta i { width:3px; height:3px; border-radius:50%; background:#b78a50; }.collection-open { display:inline-flex; grid-column:1/-1; align-items:center; gap:6px; align-self:end; color:#78501f; font-size:.77rem; font-weight:650; }.collection-open svg { transition:transform .18s var(--ease-out); }.collection-card:hover .collection-open svg,.chapter-card:hover .collection-open svg { transform:translateX(3px); }
.chapter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-top:29px; }.chapter-card { display:grid; grid-template-columns:40px minmax(0,1fr); gap:0 13px; min-height:244px; padding:24px 22px 21px; border:1px solid #d5cabb; background:#fffdf9; color:var(--ink); text-align:left; transition:border-color .2s var(--ease-out),background .2s var(--ease-out),transform .2s var(--ease-out); }.chapter-card:hover { border-color:#a77740; background:#f8f1e7; transform:translateY(-2px); }.chapter-number { grid-row:span 3; color:#b48a54; font-family:"Cormorant Garamond",Georgia,serif; font-size:2.65rem; font-style:italic; line-height:.74; }.chapter-kicker { color:#916832; font-family:"JetBrains Mono",monospace; font-size:.55rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }.chapter-card strong { margin-top:5px; color:#231d17; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.65rem; font-weight:550; letter-spacing:-.035em; line-height:1; }.chapter-card small { grid-column:1/-1; margin-top:15px; color:#706458; font-size:.76rem; line-height:1.55; }.chapter-subchapter-list { display:grid; grid-column:1/-1; gap:6px; margin-top:16px; padding-top:13px; border-top:1px solid #e0d6c8; }.chapter-subchapter-list span { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#63574b; font-size:.73rem; }.chapter-subchapter-list b { display:grid; place-items:center; width:20px; height:20px; border:1px solid #d4c3ae; color:#8c6634; font-family:"JetBrains Mono",monospace; font-size:.55rem; font-weight:500; }.chapter-card .collection-open { margin-top:15px; }
.subchapter-list { display:grid; gap:0; margin-top:28px; border-top:1px solid #d7ccbe; }.subchapter-card { display:grid; grid-template-columns:47px minmax(0,1fr) auto; align-items:center; gap:15px; width:100%; min-height:103px; padding:20px 0; border:0; border-bottom:1px solid #d7ccbe; background:transparent; color:var(--ink); text-align:left; transition:background .18s var(--ease-out),padding .18s var(--ease-out); }.subchapter-card:hover { padding-right:12px; padding-left:12px; background:#eee5d9; }.subchapter-marker { display:grid; place-items:center; width:41px; height:41px; border:1px solid #c9af8e; color:#956b33; }.subchapter-marker svg { width:17px; }.subchapter-marker b { margin-top:-2px; font-family:"JetBrains Mono",monospace; font-size:.5rem; font-weight:500; }.subchapter-card>span:nth-child(2) { display:flex; min-width:0; flex-direction:column; }.subchapter-card strong { color:#2b241c; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.42rem; font-weight:550; letter-spacing:-.028em; line-height:1; }.subchapter-card small { max-width:62ch; margin-top:6px; color:#716559; font-size:.76rem; line-height:1.5; }.subchapter-meta { display:flex; align-items:center; gap:10px; color:#856e54; font-family:"JetBrains Mono",monospace; font-size:.57rem; letter-spacing:.045em; text-align:right; text-transform:uppercase; white-space:nowrap; }.subchapter-meta svg { color:#956b33; }.materials-stage,.search-results { margin-top:29px; }.materials-stage-head { display:flex; align-items:end; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid #d7ccbe; }.materials-stage-head p { margin:0; color:#75695c; font-size:.78rem; text-align:right; }.materials-stage-head p b { color:#372d22; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.45rem; font-weight:550; }.hierarchy-material-list { border-top:0; }.hierarchy-material-list .material-row:first-child { border-top:0; }
@media (max-width:1040px) { .collection-grid,.chapter-grid { grid-template-columns:1fr; }.collection-card { min-height:236px; }.chapter-card { min-height:auto; } }
.pro-library-split { display:grid; gap:42px; margin-top:29px; }
.pro-library-group { padding-top:4px; }
.pro-library-group + .pro-library-group { padding-top:42px; border-top:1px solid #d7ccbe; }
.pro-library-group-head { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:-7px; }
.pro-library-group-head .mono-label { color:#806033; }
.pro-library-group-head p { max-width:42ch; margin:0; color:#706458; font-size:.77rem; line-height:1.55; text-align:right; }
@media (min-width:1041px) { .two-paths--three { grid-template-columns:repeat(3,minmax(0,1fr)); }.two-paths--three .path-card + .path-card { border-left:1px solid var(--line-strong); }.two-paths--three .path-card { grid-template-columns:1fr; }.two-paths--three .path-card-image img { min-height:178px; }.two-paths--three .path-card-copy { padding:27px 26px 30px; } }
@media (max-width:760px) { .pro-library-split { gap:29px; margin-top:22px; }.pro-library-group + .pro-library-group { padding-top:29px; }.pro-library-group-head { display:block; margin-bottom:-5px; }.pro-library-group-head p { margin-top:8px; text-align:left; } }
@media (max-width:760px) { .access-switcher { align-items:flex-start; flex-direction:column; gap:11px; padding:20px 0 17px; }.access-switcher .filter-row { max-width:calc(100vw - 48px); justify-content:flex-start; overflow-x:auto; }.catalog-breadcrumb { margin-top:20px; font-size:.56rem; }.collection-grid { gap:11px; margin-top:22px; }.collection-card { min-height:230px; padding:21px; }.collection-number { font-size:2.8rem; }.collection-card strong { font-size:1.72rem; }.chapter-grid { gap:11px; margin-top:22px; }.chapter-card { min-height:0; padding:21px 18px; }.subchapter-list { margin-top:22px; }.subchapter-card { grid-template-columns:40px minmax(0,1fr); gap:11px; min-height:0; padding:17px 0; }.subchapter-marker { width:36px; height:36px; }.subchapter-meta { grid-column:2; justify-self:start; margin-top:-3px; text-align:left; }.materials-stage,.search-results { margin-top:22px; }.materials-stage-head { align-items:flex-start; flex-direction:column; gap:5px; }.materials-stage-head p { text-align:left; } }

/* Review refinement: one compass grammar and one amber direction, not a category-color system. */
.brand::after,.footer-brand::after { width:4px; height:4px; margin-left:1px; border-radius:50%; content:""; background:var(--amber); }
.hero-decision { width:min(40rem,100%); padding:18px 17px; border-color:rgba(214,162,94,.58); background:linear-gradient(90deg,rgba(214,162,94,.14),rgba(214,162,94,.025)); }
.hero-decision .compass-paper { box-shadow:0 0 0 6px rgba(214,162,94,.05); }
.collection-card { grid-template-columns:44px 32px minmax(0,1fr); grid-template-rows:auto auto 1fr auto auto; gap:7px 14px; min-height:286px; border-color:#d4c8b8; background:linear-gradient(135deg,#fffdf9 0%,#f7efe4 100%); box-shadow:none; }
.collection-card::before { right:21px; left:21px; height:1px; background:#d7c9b7; }.collection-card::after { right:-41px; bottom:-59px; border-color:rgba(129,94,51,.13); box-shadow:0 0 0 28px rgba(129,94,51,.035),0 0 0 56px rgba(129,94,51,.018); }
.collection-card--workflow::before,.collection-card--bundle-life::before,.collection-card--pro-library::before { background:#d7c9b7; }
.collection-card--build { background:linear-gradient(135deg,#211a15 0%,#15110e 100%); border-color:#72522f; color:#f3eadf; }
.collection-card--build::before { background:#d6a25e; }
.collection-card--build::after { border-color:rgba(214,162,94,.22); box-shadow:0 0 0 28px rgba(214,162,94,.06),0 0 0 56px rgba(214,162,94,.025); }
.collection-card--build:hover { border-color:#d6a25e; box-shadow:0 10px 24px rgba(36,24,13,.2); }
.collection-card--build .collection-number,.collection-card--build .collection-access,.collection-card--build .collection-open { color:#d6a25e; }
.collection-card--build strong { color:#f6efe3; }
.collection-card--build small,.collection-card--build .collection-meta { color:#bfb2a4; }
.collection-card--build .collection-meta i { background:#9f7541; }
.collection-card:hover { border-color:#af7e42; box-shadow:0 8px 18px rgba(57,40,20,.08); }
.collection-number { grid-row:span 2; color:#9a6d34; }
.collection-compass { grid-row:span 2; align-self:start; width:25px; height:25px; margin-top:4px; border-color:#a57639; }.collection-compass::before { width:6px; height:6px; background:#a57639; }.collection-compass i { background:#82613a; }
.collection-access { grid-column:3; }.collection-card strong { grid-column:3; }.collection-card small,.collection-meta,.collection-open { grid-column:1/-1; }
.collection-meta { color:#7f6e5a; }.collection-meta i { background:#a57639; }.collection-open { color:#78501f; }
.chapter-card,.subchapter-card { background-image:linear-gradient(90deg,rgba(214,162,94,.05),transparent 34%); }.chapter-card:hover { border-color:#ad7a3d; background:#f8f1e7; }
@media (max-width:760px) { .hero-decision { padding:14px 12px; }.collection-card { grid-template-columns:39px 28px minmax(0,1fr); min-height:236px; }.collection-compass { width:22px; height:22px; }.collection-access,.collection-card strong { grid-column:3; } }



/* Production adapter: the visual source above is copied from page reference 2.
   Only shell compatibility is added here; paid content, titles, and lesson bodies remain runtime-owned. */
body.bundle-reference-on { background:#0b0a08; }
body.bundle-reference-on > nav,
body.bundle-reference-on > .site-foot,
body.bundle-reference-on .layout > .sidebar { display:none!important; }
body.bundle-reference-on > .skip-link { display:none!important; }
body.bundle-reference-on .layout { display:block!important; min-height:100vh; margin:0!important; padding:0!important; background:var(--ink)!important; }
body.bundle-reference-on .main { width:100%!important; min-width:0!important; padding:0!important; overflow:visible!important; background:var(--ink)!important; }
body.bundle-reference-on .main-in { width:100%!important; max-width:none!important; min-height:100vh; margin:0!important; padding:0!important; opacity:1!important; transform:none!important; overflow:visible!important; }
body.bundle-reference-on .catalog-page button { border-radius:0; box-shadow:none; }
body.bundle-reference-on .catalog-page img { display:block; max-width:100%; }
body.bundle-reference-on .catalog-page svg { width:18px; height:18px; flex:0 0 auto; }
.catalog-page .brand-name { color:var(--paper); }
.catalog-page .hero-copy h1,
.catalog-page .paths-page-intro h1,
.catalog-page .quest-page-intro h1 { color:var(--paper); }
.catalog-page .desk-sidebar,
.catalog-page .quest-page,
.catalog-page .paths-page { color:var(--paper); }
.catalog-page .desk-sidebar .progress-ring strong,
.catalog-page .desk-sidebar .desk-index span,
.catalog-page .quest-console-head strong,
.catalog-page .milestone-head h2,
.catalog-page .path-copy h2,
.catalog-page .path-card h2 { color:var(--paper); }
.catalog-page .milestone-head > p { color:#a89d91; }
.catalog-page .topbar { width:100%; }
.catalog-page .topbar-nav { position:static!important; inset:auto!important; width:auto!important; height:auto!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; }
.catalog-page .hero-art img { width:100%; height:100%; }
.catalog-page .catalog-content { min-width:0; }
.catalog-page .collection-compass { position:relative; display:grid; place-items:center; transform:rotate(45deg); }
.catalog-page .collection-compass::before { content:""; }
.catalog-page .collection-compass i { position:absolute; transform:rotate(-45deg); }
.catalog-page .login-button { display:inline-flex!important; align-items:center; justify-content:center; border:1px solid var(--line-strong)!important; text-decoration:none; }
.material-index { align-self:start; padding-top:3px; color:#918474; font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.07em; }
.material-title { min-width:0; color:#1b1713; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.22rem,1.65vw,1.55rem); font-weight:550; letter-spacing:-.028em; line-height:1.03; transition:color .18s var(--ease-out); }
.material-row:hover .material-title { color:#7d5422; }
.material-preview { margin-left:42px; }
.material-preview p { margin:0; }
.material-preview .begin-button { border:0; padding:0 14px; }
.daily-reference-host .hd-daily { margin:0; }
.daily-reference-host .hd-main { width:100%; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
.daily-reference-host .hd-side { display:none!important; }
.daily-reference-host .hd-question,
.daily-reference-host .hd-q { border-color:rgba(214,162,94,.25); background:#1a1512; color:var(--paper); }
.daily-reference-host .hd-opt { border-color:rgba(214,162,94,.22); background:#211a15; color:#d2c6b8; }
.daily-reference-host .hd-opt:hover { border-color:var(--amber); }
.daily-reference-host .hd-title,
.daily-reference-host h2,
.daily-reference-host h3 { color:var(--paper); font-family:"Cormorant Garamond",Georgia,serif; }
.daily-reference-host p { color:#b9aea1; }
.milestone-item { position:relative; }
.path-image img,.path-card-image img,.level-character img,.rank-art img { width:100%; height:100%; object-fit:cover; }
.path-card { border:0; color:var(--paper); text-align:left; }
.path-link { display:inline-flex; align-items:center; gap:7px; margin-top:18px; color:var(--amber); font-size:.76rem; font-weight:650; }
.level-overlay[hidden] { display:none!important; }
body.bundle-reference-on.bundle-reader-mode { overflow-x:clip; background:#15120f; }
body.bundle-reference-on.bundle-reader-mode > nav,
body.bundle-reference-on.bundle-reader-mode > .site-foot,
body.bundle-reference-on.bundle-reader-mode .layout > .sidebar { display:none!important; }
body.bundle-reference-on.bundle-reader-mode .layout { display:block!important; min-height:100vh; padding:0!important; background:#15120f!important; }
body.bundle-reference-on.bundle-reader-mode .main { width:100%!important; padding:0!important; background:#15120f!important; }
body.bundle-reference-on.bundle-reader-mode .main-in { max-width:none!important; min-height:100vh; margin:0!important; padding:0!important; background:transparent!important; }
body.bundle-reference-on.bundle-reader-mode .catalog-page { display:none; }

/* Study room — exact production adapter for `budle page lanjutan`.
   Existing lesson nodes are moved, never rewritten; this layer owns only reading chrome and presentation. */
.study-room {
  --study-bg:#15120f; --study-panel:#1a1612; --study-panel-soft:#201b16;
  --study-paper:#f0e9de; --study-copy:#d8cec1; --study-heading:#f6efe3;
  --study-muted:#a79b8e; --study-line:rgba(242,237,229,.14);
  --study-line-strong:rgba(242,237,229,.24); --study-amber:#d6a25e;
  --bg:#15120f; --bg-raised:#1a1612; --bg-panel:#201b16;
  --ink:#f6efe3; --ink-soft:#d8cec1; --ink-faint:#a79b8e;
  --line:rgba(242,237,229,.14); --line-soft:rgba(242,237,229,.09);
  --accent:#d6a25e; --accent-ink:#201a14; --accent-soft:rgba(214,162,94,.1);
  min-height:100vh; background:var(--study-bg); color:var(--study-copy);
  font-family:"Instrument Sans",system-ui,sans-serif;
  transition:background .25s var(--ease-out),color .25s var(--ease-out);
}

/* Pro opens as one on-demand index: the old doors remain visible as labels,
   while every lesson row is available without another folder click. */
.pro-material-stage { margin-top:29px; }
.pro-material-head > div { min-width:0; }
.pro-material-intro { max-width:58ch; margin:8px 0 0 !important; color:#75695c; font-size:.78rem; line-height:1.55; text-align:left !important; }
.pro-material-group { margin-top:40px; }
.pro-material-group + .pro-material-group { padding-top:40px; border-top:1px solid #d7ccbe; }
.pro-material-group-head { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:22px; }
.pro-material-group-head .mono-label { color:#806033; }
.pro-material-group-head p { max-width:48ch; margin:0; color:#706458; font-size:.77rem; line-height:1.55; text-align:right; }
.pro-material-door { padding-top:24px; border-top:1px solid rgba(215,204,190,.72); }
.pro-material-door + .pro-material-door { margin-top:30px; }
.pro-material-door-head { display:flex; align-items:end; justify-content:space-between; gap:22px; padding-bottom:15px; }
.pro-material-door-head h3 { margin:7px 0 0; color:#2b241c; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.6rem,2.3vw,2.25rem); font-weight:550; letter-spacing:-.035em; line-height:.98; }
.pro-material-door-head p { max-width:46ch; margin:0; color:#706458; font-size:.77rem; line-height:1.55; text-align:right; }
.pro-material-subfolder { margin-top:13px; }
.pro-material-subfolder-head { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:13px 0 11px; border-bottom:1px dashed #d7ccbe; }
.pro-material-subfolder-head h4 { margin:6px 0 0; color:#372d22; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.4rem; font-weight:550; letter-spacing:-.025em; line-height:1; }
.pro-material-subfolder-head p { max-width:52ch; margin:0; color:#75695c; font-size:.75rem; line-height:1.5; text-align:right; }
.pro-material-subfolder .material-list { margin-top:0; }
@media (max-width:760px) {
  .pro-material-stage { margin-top:22px; }
  .pro-material-group { margin-top:29px; }
  .pro-material-group + .pro-material-group { padding-top:29px; }
  .pro-material-group-head,.pro-material-door-head,.pro-material-subfolder-head { display:block; }
  .pro-material-group-head { margin-bottom:17px; }
  .pro-material-group-head p,.pro-material-door-head p,.pro-material-subfolder-head p { max-width:62ch; margin-top:8px; text-align:left; }
  .pro-material-door { padding-top:18px; }
  .pro-material-door + .pro-material-door { margin-top:22px; }
  .pro-material-subfolder { margin-top:10px; }
}
.study-room--light {
  --study-bg:#e6ded1; --study-panel:#f1ebe2; --study-panel-soft:#f8f3ea;
  --study-paper:#fffdf8; --study-copy:#55493e; --study-heading:#211b15;
  --study-muted:#84776a; --study-line:rgba(59,43,29,.16);
  --study-line-strong:rgba(59,43,29,.26); --study-amber:#a87535;
  --bg:#e6ded1; --bg-raised:#f1ebe2; --bg-panel:#f8f3ea;
  --ink:#211b15; --ink-soft:#55493e; --ink-faint:#84776a;
  --line:rgba(59,43,29,.16); --line-soft:rgba(59,43,29,.1);
  --accent:#a87535; --accent-ink:#fffdf8; --accent-soft:rgba(168,117,53,.1);
}
.study-room::before { position:fixed; z-index:0; inset:0; content:""; opacity:.46; pointer-events:none; background-image:radial-gradient(circle at 12% 15%,rgba(214,162,94,.1),transparent 25%),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px); background-size:auto,24px 24px,24px 24px; }
.study-room--light::before { opacity:.72; background-image:radial-gradient(circle at 12% 15%,rgba(168,117,53,.1),transparent 25%),linear-gradient(90deg,rgba(65,48,33,.028) 1px,transparent 1px),linear-gradient(rgba(65,48,33,.024) 1px,transparent 1px); }
.study-room button { border-radius:0; box-shadow:none; cursor:pointer; }
.study-topbar { position:sticky; z-index:20; top:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:70px; padding:0 clamp(20px,4.4vw,74px); border-bottom:1px solid var(--study-line); background:color-mix(in srgb,var(--study-bg) 91%,transparent); backdrop-filter:blur(14px); }
.study-back,.study-brand { display:inline-flex; align-items:center; width:max-content; gap:8px; padding:8px 0; border:0; background:transparent; color:var(--study-muted); font-size:.78rem; transition:color .18s var(--ease-out),transform .18s var(--ease-out); }
.study-back b { font-weight:400; }
.study-back:hover { color:var(--study-amber); transform:translateX(-2px); }
.study-brand { justify-self:center; gap:8px; color:var(--study-heading); }
.study-brand>span:last-child { font-family:"Cormorant Garamond",Georgia,serif; font-size:1.55rem; font-weight:600; letter-spacing:-.07em; }
.study-brand em { color:var(--study-amber); font-style:italic; }
.study-brand-mark { position:relative; display:grid; place-items:center; width:25px; height:25px; border:1px solid var(--study-amber); transform:rotate(45deg); }
.study-brand-mark::before { width:6px; height:6px; content:""; background:var(--study-amber); }
.study-brand-mark i { position:absolute; width:13px; height:1px; background:var(--study-heading); transform:rotate(-45deg); }
.reading-mode { display:flex; align-items:center; justify-content:flex-end; gap:3px; }
.reading-mode-label { margin-right:8px; color:var(--study-muted); font-family:"JetBrains Mono",monospace; font-size:.54rem; letter-spacing:.08em; }
.reading-mode button { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 9px; border:1px solid transparent; background:transparent; color:var(--study-muted); font-size:.67rem; transition:color .18s var(--ease-out),border-color .18s var(--ease-out),background .18s var(--ease-out); }
.reading-mode button:hover { color:var(--study-heading); }
.reading-mode button.is-active { border-color:color-mix(in srgb,var(--study-amber) 54%,transparent); background:color-mix(in srgb,var(--study-amber) 12%,transparent); color:var(--study-amber); }
.study-room-layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(262px,27vw) minmax(0,1fr); min-height:calc(100vh - 70px); }
.study-rail { position:sticky; top:70px; display:flex; min-width:0; height:calc(100vh - 70px); overflow-y:auto; flex-direction:column; padding:clamp(30px,4vw,52px) clamp(22px,3.6vw,48px); border-right:1px solid var(--study-line); background:color-mix(in srgb,var(--study-panel) 82%,transparent); }
.study-mono { display:flex; align-items:center; gap:7px; margin:0; color:var(--study-amber); font-family:"JetBrains Mono",monospace; font-size:.58rem; font-weight:600; letter-spacing:.105em; line-height:1.35; text-transform:uppercase; }
.study-rail-intro { padding-bottom:26px; border-bottom:1px solid var(--study-line); }
.study-rail-intro h2 { margin:13px 0 17px; color:var(--study-heading); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.55rem,2vw,2.15rem); font-weight:550; letter-spacing:-.05em; line-height:.93; }
.study-rail-intro>p:last-child { display:flex; align-items:center; gap:6px; margin:0; color:var(--study-muted); font-family:"JetBrains Mono",monospace; font-size:.59rem; letter-spacing:.025em; line-height:1.5; }
.study-progress-card { padding:25px 0; border-bottom:1px solid var(--study-line); }
.study-progress-line { height:2px; margin:13px 0 8px; overflow:hidden; background:color-mix(in srgb,var(--study-muted) 22%,transparent); }
.study-progress-line i { display:block; width:100%; height:100%; background:var(--study-amber); transform:scaleX(0); transform-origin:left center; transition:transform .28s var(--ease-out); }
.study-progress-card p { margin:0; color:var(--study-muted); font-size:.67rem; }
.study-progress-card b { color:var(--study-heading); font-family:"Cormorant Garamond",Georgia,serif; font-size:1.55rem; font-weight:550; letter-spacing:-.05em; }
.study-toc { position:static; display:grid; width:auto; height:auto; margin-top:27px; border:0; background:transparent; backdrop-filter:none; }
.study-toc>.study-mono { margin-bottom:10px; color:var(--study-muted); }
.study-toc button { display:grid; grid-template-columns:25px minmax(0,1fr); align-items:start; gap:9px; width:100%; padding:10px 0; border:0; border-bottom:1px solid color-mix(in srgb,var(--study-line) 72%,transparent); background:transparent; color:var(--study-muted); font-size:.69rem; line-height:1.35; text-align:left; transition:color .18s var(--ease-out),transform .18s var(--ease-out); }
.study-toc button:hover { color:var(--study-heading); transform:translateX(3px); }
.study-toc button.is-active { color:var(--study-heading); }
.study-toc button b { color:var(--study-amber); font-family:"JetBrains Mono",monospace; font-size:.57rem; font-weight:500; letter-spacing:.045em; }
.study-rail-foot { display:flex; gap:9px; margin-top:auto; padding-top:30px; color:var(--study-muted); font-size:.7rem; line-height:1.55; }
.study-rail-foot>span { flex:0 0 auto; color:var(--study-amber); }
.study-rail-foot p { margin:0; }
.study-reader { display:block; width:min(100%,980px); padding:clamp(44px,7.8vw,118px) clamp(24px,7vw,112px) clamp(58px,9vw,135px); }
.study-reader-content { max-width:740px; }
.study-reader-content>.eyebrow { display:block; margin:0; color:var(--study-amber); font-family:"JetBrains Mono",monospace; font-size:.58rem; font-weight:600; letter-spacing:.105em; text-transform:uppercase; }
.study-reader-content>h1 { max-width:15ch; margin:20px 0 22px; color:var(--study-heading); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(3.15rem,5.6vw,5.75rem); font-weight:520; letter-spacing:-.067em; line-height:.86; }
.study-reader-content>.hook { max-width:60ch; margin:0; color:var(--study-copy); font-size:clamp(.98rem,1.3vw,1.1rem); line-height:1.82; }
.study-reader-content>.lang-note { margin:12px 0 36px; padding-bottom:30px; border-bottom:1px solid var(--study-line); color:var(--study-muted); }
.study-reader-content>.ucv2-tiers,.study-reader-content>.meta-row { margin:18px 0 34px!important; }
.study-reader-content>.ucv2>.ucv2-head { padding-bottom:clamp(38px,5.5vw,68px); border-bottom:1px solid var(--study-line); }
.study-reader-content>.ucv2>.ucv2-head .eyebrow { color:var(--study-amber); font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.105em; }
.study-reader-content>.ucv2>.ucv2-head h1 { max-width:15ch; margin:20px 0 22px; color:var(--study-heading); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(3.15rem,5.6vw,5.75rem); font-weight:520; letter-spacing:-.067em; line-height:.86; }
.study-reader-content>.ucv2>.ucv2-head .hook,.study-reader-content>.ucv2>.ucv2-head>p { max-width:60ch; color:var(--study-copy); font-size:clamp(.98rem,1.3vw,1.1rem); line-height:1.82; }
.study-reader-content>.upgrade-strip { margin:0 0 34px; border-color:var(--study-line-strong); background:color-mix(in srgb,var(--study-panel) 74%,transparent); }
.study-lesson-section { display:grid!important; grid-template-columns:48px minmax(0,1fr); gap:clamp(18px,3.7vw,38px); margin:0!important; padding:clamp(39px,5vw,66px) 0!important; scroll-margin-top:88px; border:0!important; border-bottom:1px solid var(--study-line)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.study-lesson-index { display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:5px; color:var(--study-amber); font-family:"JetBrains Mono",monospace; font-size:.65rem; letter-spacing:.05em; }
.study-lesson-index i { width:1px; height:39px; background:linear-gradient(var(--study-amber),transparent); }
.study-lesson-copy { min-width:0; }
.study-lesson-copy>.fsec-card-head { display:block; padding:0; border:0; background:transparent; }
.study-lesson-copy .fsec-num { display:none; }
.study-lesson-copy>.fsec-card-body { padding:0; }
.study-lesson-copy>h3,.study-lesson-copy>.fsec-card-head>h3,.study-lesson-copy>.stepblk-head h3 { max-width:21ch; margin:0 0 22px; color:var(--study-heading); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2rem,3.45vw,3.25rem); font-weight:550; letter-spacing:-.058em; line-height:.9; }
.study-lesson-copy .md-body,.study-lesson-copy .f-body { max-width:59ch; color:var(--study-copy); font-size:clamp(.98rem,1.28vw,1.08rem); line-height:1.86; }
.study-lesson-copy .md-body p { margin:0 0 17px; color:var(--study-copy); }
.study-lesson-copy .md-body p:last-child { margin-bottom:0; }
.study-lesson-copy .md-body h2,.study-lesson-copy .md-body h3,.study-lesson-copy .md-body h4 { color:var(--study-heading); font-family:"Cormorant Garamond",Georgia,serif; }
.study-lesson-copy .md-callout,.study-lesson-copy blockquote { border-left-color:var(--study-amber); background:color-mix(in srgb,var(--study-panel-soft) 82%,transparent); color:var(--study-muted); }
.study-room--dark .tw-pc-row { color:var(--study-copy); }
.study-room--dark .tw-pc-row.is-locked { color:var(--study-muted); }
.study-reader-content>.section:not(.study-lesson-section),.study-reader-content>details.section { margin:34px 0; border-color:var(--study-line); background:color-mix(in srgb,var(--study-panel) 55%,transparent); }
.study-room .btn-amber { border-color:var(--study-amber); background:var(--study-amber); color:#201a14; }
.study-room .btn:focus-visible,.study-room button:focus-visible,.study-room a:focus-visible { outline:2px solid var(--study-amber); outline-offset:3px; }
.study-room--light .md-body pre,.study-room--light .md-code-wrap pre,.study-room--light .ex-pre { background:#e9e0d3; color:#3f342b; }
.study-room--light .md-body code { background:rgba(59,43,29,.08); color:#3f342b; }
@media (max-width:760px) {
  body.bundle-reference-on .main-in { padding:0!important; }
  .material-index { grid-column:1; grid-row:1 / span 2; }
  .material-title { grid-column:2; grid-row:1; }
  .material-preview { margin-left:27px; }
  body.bundle-reference-on.bundle-reader-mode .main { padding:0!important; }
  body.bundle-reference-on.bundle-reader-mode .main-in { margin:0!important; padding:0!important; }
}
@media (max-width:900px) {
  .study-room-layout { grid-template-columns:1fr; }
  .study-rail { position:static; display:grid; grid-template-columns:1fr 1fr; gap:0 30px; height:auto; overflow:visible; padding:28px clamp(24px,6vw,60px); border-right:0; border-bottom:1px solid var(--study-line); }
  .study-rail-intro { padding-bottom:0; border-bottom:0; }
  .study-progress-card { padding:0 0 0 24px; border-bottom:0; border-left:1px solid var(--study-line); }
  .study-toc { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; margin-top:25px; padding-top:22px; border-top:1px solid var(--study-line); }
  .study-toc>.study-mono { grid-column:1/-1; }
  .study-rail-foot { display:none; }
  .study-reader { width:100%; max-width:980px; padding-right:clamp(24px,10vw,100px); padding-left:clamp(24px,10vw,100px); }
}
@media (max-width:620px) {
  .study-topbar { grid-template-columns:1fr auto; min-height:61px; padding:0 18px; }
  .study-brand { justify-self:end; }
  .study-back b,.reading-mode-label { display:none; }
  .reading-mode { grid-column:1/-1; grid-row:2; justify-content:flex-start; margin:0 -18px; padding:7px 18px; border-top:1px solid var(--study-line); }
  .reading-mode button { flex:1; }
  .study-rail { display:block; padding:25px 20px 22px; }
  .study-rail-intro { padding-bottom:19px; border-bottom:1px solid var(--study-line); }
  .study-rail-intro h2 { font-size:1.75rem; }
  .study-progress-card { margin-top:19px; padding:0; border-left:0; }
  .study-toc { display:none; }
  .study-reader { padding:44px 20px 64px; }
  .study-reader-content>h1 { font-size:clamp(3rem,14vw,4.35rem); }
  .study-reader-content>.ucv2>.ucv2-head h1 { font-size:clamp(3rem,14vw,4.35rem); }
  .study-reader-content>.hook { font-size:.95rem; line-height:1.75; }
  .study-lesson-section { grid-template-columns:29px minmax(0,1fr); gap:14px; padding:43px 0!important; }
  .study-lesson-index { font-size:.57rem; }
  .study-lesson-index i { height:25px; }
  .study-lesson-copy>h3,.study-lesson-copy>.fsec-card-head>h3,.study-lesson-copy>.stepblk-head h3 { font-size:2.2rem; }
  .study-lesson-copy .md-body,.study-lesson-copy .f-body { font-size:.98rem; line-height:1.8; }
}

/* Audit loop 20 Aug 2026: contrast, compact chrome, and full-width daily quiz. */
.daily-reference-host.hd-daily { display:block!important; width:100%; }
.daily-reference-host.hd-daily .hd-main,.daily-reference-host.hd-daily .hd-q { width:100%; max-width:none; }
.daily-reference-host.hd-daily .hd-pitch { max-width:72ch; }
.daily-reference-host.hd-daily .hd-claim-note { margin:8px 0 0; color:#b9aea1; font-size:.7rem; line-height:1.55; }
.daily-reference-host.hd-daily .hd-claim-note.is-active { color:#c9d8c8; }
.milestone-item.is-claimable { color:var(--amber); }
.reward-claim-button { cursor:pointer; border:1px solid var(--amber)!important; background:var(--amber)!important; color:#17110c!important; padding:8px 10px!important; white-space:nowrap; }
.reward-claim-button:hover { background:#efbe70!important; }
.reward-claim-button:disabled { cursor:wait; opacity:.68; }
.free-access-stage { margin-top:28px; }
.collection-card--workflow small,.collection-card--bundle-life small,
.collection-card--workflow .collection-meta,.collection-card--bundle-life .collection-meta { color:#55493e; }
.collection-card--workflow strong,.collection-card--bundle-life strong { color:#18130f; }

/* Every legacy lesson surface must inherit the light paper palette. */
.study-room--light .study-reader-content .tw-pc,
.study-room--light .study-reader-content .tw-pc-card,
.study-room--light .study-reader-content .tw-pc-prompt,
.study-room--light .study-reader-content .tw-pc-output,
.study-room--light .study-reader-content .sample-output,
.study-room--light .study-reader-content .sample-box,
.study-room--light .study-reader-content .example-output,
.study-room--light .study-reader-content .prompt-followup,
.study-room--light .study-reader-content .stepblk,
.study-room--light .study-reader-content .ucv2-sec,
.study-room--light .study-reader-content .vcard,
.study-room--light .study-reader-content details {
  border-color:rgba(59,43,29,.2)!important;
  background:#f7f1e8!important;
  color:#3f342b!important;
}
.study-room--light .study-reader-content .tw-pc *,
.study-room--light .study-reader-content .tw-pc-card *,
.study-room--light .study-reader-content .sample-output *,
.study-room--light .study-reader-content .sample-box *,
.study-room--light .study-reader-content .example-output *,
.study-room--light .study-reader-content .prompt-followup *,
.study-room--light .study-reader-content .stepblk *,
.study-room--light .study-reader-content .ucv2-sec *,
.study-room--light .study-reader-content .vcard * { color:inherit!important; }
.study-room--light .study-reader-content pre,
.study-room--light .study-reader-content .md-code-wrap,
.study-room--light .study-reader-content .ex-pre {
  border-color:rgba(59,43,29,.22)!important;
  background:#e7ded2!important;
  color:#302820!important;
}
.study-room--light .study-reader-content pre * { color:inherit!important; }
.study-room--light .study-reader-content .tw-pc-placeholder,
.study-room--light .study-reader-content mark { background:#e6c58f!important; color:#392813!important; }

@media (max-width:620px) {
  .study-topbar { grid-template-columns:34px minmax(94px,1fr) auto; min-height:58px; gap:8px; padding:0 12px; }
  .study-back { grid-column:1; width:34px; justify-content:flex-start; }
  .study-brand { grid-column:2; justify-self:center; width:105px; height:34px; }
  .study-controls { grid-column:3; grid-row:1; width:auto; margin:0; padding:0; border:0; gap:4px; }
  .study-language { width:45px; min-height:32px; padding:0 4px; font-size:.49rem; }
  .reading-mode { flex:0 0 auto; gap:1px; }
  .reading-mode button { width:30px; min-height:32px; padding:0; font-size:.72rem; }
  .reading-mode button b { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .study-room,.study-progress-line i,.study-back,.study-toc button,.reading-mode button { transition:none!important; }
}

/* Universal revision pass — desktop screenshots 1–14, 20 Aug 2026. */
.catalog-page .brand { display:block; width:148px; height:44px; overflow:hidden; }
.catalog-page .brand::after { display:none; }
.catalog-page .brand-logo { display:block; width:100%; height:100%; object-fit:contain; }
.catalog-page .brand-mark,.catalog-page .brand-name { display:none; }
.next-note { padding-bottom:26px; }
.collection-open,.begin-button { align-items:center; }
.collection-open svg,.begin-button svg,.path-copy button svg,.path-card-copy button svg { display:block; flex:0 0 auto; }
.begin-button { display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:9px!important; min-width:148px!important; min-height:44px!important; padding:0 16px!important; white-space:nowrap; }
.begin-button svg { width:17px!important; height:17px!important; margin:0!important; transform:none!important; }

.site-footer.site-footer--legal { display:flex; min-height:64px; align-items:center; justify-content:space-between; gap:24px; padding:18px clamp(24px,3.2vw,48px); border-top:1px solid var(--line); background:#0d0d0c; }
.site-footer--legal .foot-copy { color:#a79d92; font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.03em; white-space:nowrap; }
.site-footer--legal .foot-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:16px; }
.site-footer--legal .foot-links a { padding:0; border:0; background:transparent; color:#b8aa9a; font-size:.74rem; text-decoration:none; }
.site-footer--legal .foot-links a:hover { color:var(--amber); }

.ritual-section { display:flex; min-height:320px; align-items:center; justify-content:center; padding-right:clamp(28px,12vw,210px); padding-left:clamp(28px,12vw,210px); text-align:center; }
.ritual-section blockquote { max-width:20ch; margin:0 auto; font-size:clamp(3.15rem,5vw,5.2rem); line-height:.94; }
.ritual-index,.ritual-rule { display:none!important; }

.quest-page { padding-top:clamp(48px,5.7vw,84px); }
.quest-page-main { grid-template-areas:"quiz side"; grid-template-columns:minmax(0,1.42fr) minmax(310px,.62fr); align-items:start; padding-top:0; }
.quest-console { grid-area:quiz; width:100%; }
.quest-side { display:flex; grid-area:side; flex-direction:column; gap:28px; }
.quest-side>.xp-rule { max-width:none; margin:0; }
.quest-side>.milestone-board { margin:0; }
.daily-reference-host,.quest-question,.quest-question h2,.quest-feedback,.quest-result { width:100%; max-width:none; }

.study-controls { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.study-language { min-height:30px; padding:0 9px; border:1px solid var(--study-line); background:transparent; color:var(--study-muted); font-family:"JetBrains Mono",monospace; font-size:.57rem; letter-spacing:.08em; }
.study-language:hover { border-color:var(--study-amber); color:var(--study-heading); }
.study-brand { width:142px; height:42px; overflow:hidden; padding:0; }
.study-brand img { display:block; width:100%; height:100%; object-fit:contain; }
.study-room--light .study-brand img { filter:brightness(0) saturate(100%) invert(13%) sepia(18%) saturate(730%) hue-rotate(347deg) brightness(91%) contrast(92%); }
.study-brand-mark,.study-brand>span { display:none; }

/* Light reader: neutral paper surfaces; color is reserved for meaning. */
.study-room--light .study-reader-content table { border-collapse:collapse; background:transparent!important; color:var(--study-copy)!important; }
.study-room--light .study-reader-content thead,.study-room--light .study-reader-content th { background:#eee4d6!important; color:#49351f!important; }
.study-room--light .study-reader-content th,.study-room--light .study-reader-content td { border-color:rgba(59,43,29,.18)!important; }
.study-room--light .study-reader-content tbody,.study-room--light .study-reader-content tr,.study-room--light .study-reader-content td { background:transparent!important; color:var(--study-copy)!important; }
.study-room--light .study-reader-content tr:nth-child(even) td { background:rgba(168,117,53,.035)!important; }
.study-room--light .study-reader-content .concept-graph-shell { background:#f4eee4!important; border-color:rgba(59,43,29,.18)!important; color:#2e251e!important; }
.study-room--light .study-reader-content .concept-graph-node { background:#ebe3d8!important; border-color:rgba(59,43,29,.2)!important; color:#2e251e!important; }
.study-room--light .study-reader-content .concept-graph-node.is-selected { background:#f5ead8!important; border-color:#a87535!important; color:#76501f!important; }
.study-room--light .study-reader-content .concept-graph-detail { background:#e7ded2!important; border-color:rgba(59,43,29,.2)!important; color:#2e251e!important; }
.study-room--light .study-reader-content .concept-graph-copy { color:#5b4d41!important; }
.study-room--light .study-reader-content .concept-graph-free { background:#dce9df!important; color:#356145!important; }
.study-room--light .study-reader-content .concept-graph-bundle { background:#f1dfbe!important; color:#76501f!important; }
.study-room--light .study-reader-content .concept-graph-unlock { color:#356145!important; }
.study-room--light .study-reader-content .concept-graph-ref { color:#76501f!important; }
.study-room--light .study-reader-content,.study-room--light .study-reader-content p,.study-room--light .study-reader-content li,.study-room--light .study-reader-content td { color:#51463c!important; }
.study-room--light .study-reader-content h1,.study-room--light .study-reader-content h2,.study-room--light .study-reader-content h3,.study-room--light .study-reader-content h4,.study-room--light .study-reader-content strong { color:#211b15!important; }
.study-room--light .study-reader-content .prompt-box,.study-room--light .study-reader-content .prompt-card,.study-room--light .study-reader-content .example-box,.study-room--light .study-reader-content .md-callout,.study-room--light .study-reader-content blockquote { background:#f7f1e8!important; border-color:rgba(59,43,29,.2)!important; color:#3f342b!important; }
.study-room--light .study-reader-content .prompt-box *,.study-room--light .study-reader-content .prompt-card *,.study-room--light .study-reader-content .example-box *,.study-room--light .study-reader-content .md-callout *,.study-room--light .study-reader-content blockquote * { color:inherit!important; }
.study-room--light .study-reader-content button:not(.btn-amber) { color:#3f342b; }

@media (max-width:760px) {
  .catalog-page .brand { width:122px; height:36px; }
  .site-footer.site-footer--legal { flex-direction:column; align-items:flex-start; }
  .site-footer--legal .foot-links { justify-content:flex-start; }
  .quest-page-main { grid-template-areas:"rank" "rule" "quiz" "milestone"; grid-template-columns:minmax(0,1fr); gap:30px; }
  .quest-side { display:contents; }
  .quest-side>.rank-card { grid-area:rank; }
  .quest-side>.xp-rule { grid-area:rule; }
  .quest-side>.milestone-board { grid-area:milestone; }
  .quest-side>.xp-rule,.quest-side>.milestone-board { margin:0; }
  .quest-console { padding:18px; }
  .ritual-section { min-height:285px; padding:58px 24px; }
  .ritual-section blockquote { font-size:clamp(2.65rem,12vw,4rem); }
}

@media (max-width:620px) {
  .study-topbar { grid-template-columns:30px minmax(86px,1fr) auto; min-height:56px; gap:5px; padding:0 9px; }
  .study-back { grid-column:1; grid-row:1; width:30px; }
  .study-brand { grid-column:2; grid-row:1; justify-self:center; width:102px; height:32px; }
  .study-controls { grid-column:3; grid-row:1; width:auto; margin:0; padding:0; border:0; gap:3px; }
  .reading-mode { flex:0 0 auto; margin:0; padding:0; border:0; gap:1px; }
  .reading-mode button { width:28px; min-height:30px; padding:0; }
  .reading-mode button b { display:none; }
  .study-language { flex:0 0 42px; width:42px; min-height:30px; padding:0 3px; }
}

/* Light reader: the page background is enough. Do not put a second translucent
   paper/grey surface behind every legacy block; hierarchy comes from type and rules. */
.study-room--light { --study-bg:#e6ded1; --study-panel:transparent; --study-panel-soft:transparent; --study-paper:transparent; }
.study-room--light::before { opacity:.34; }
.study-room--light .study-topbar,
.study-room--light .study-rail,
.study-room--light .study-reader,
.study-room--light .study-reader-content,
.study-room--light .study-reader-content>.section:not(.study-lesson-section),
.study-room--light .study-reader-content>details.section,
.study-room--light .study-reader-content .tw-pc,
.study-room--light .study-reader-content .tw-pc-card,
.study-room--light .study-reader-content .tw-pc-prompt,
.study-room--light .study-reader-content .tw-pc-output,
.study-room--light .study-reader-content .sample-output,
.study-room--light .study-reader-content .sample-box,
.study-room--light .study-reader-content .example-output,
.study-room--light .study-reader-content .prompt-followup,
.study-room--light .study-reader-content .stepblk,
.study-room--light .study-reader-content .ucv2-sec,
.study-room--light .study-reader-content .vcard,
.study-room--light .study-reader-content details,
.study-room--light .study-reader-content .prompt-box,
.study-room--light .study-reader-content .prompt-card,
.study-room--light .study-reader-content .example-box,
.study-room--light .study-reader-content .md-callout,
.study-room--light .study-reader-content blockquote,
.study-room--light .study-reader-content .concept-graph-shell,
.study-room--light .study-reader-content .concept-graph-node,
.study-room--light .study-reader-content .concept-graph-detail { background:transparent!important; }
.study-room--light .study-reader-content .tw-pc,
.study-room--light .study-reader-content .tw-pc-card,
.study-room--light .study-reader-content .tw-pc-prompt,
.study-room--light .study-reader-content .tw-pc-output,
.study-room--light .study-reader-content .sample-output,
.study-room--light .study-reader-content .sample-box,
.study-room--light .study-reader-content .example-output,
.study-room--light .study-reader-content .prompt-followup,
.study-room--light .study-reader-content .stepblk,
.study-room--light .study-reader-content .ucv2-sec,
.study-room--light .study-reader-content .vcard,
.study-room--light .study-reader-content details,
.study-room--light .study-reader-content .prompt-box,
.study-room--light .study-reader-content .prompt-card,
.study-room--light .study-reader-content .example-box,
.study-room--light .study-reader-content .md-callout,
.study-room--light .study-reader-content blockquote { border-radius:0!important; box-shadow:none!important; }
.study-room--light .study-reader-content .tw-pc *,
.study-room--light .study-reader-content .tw-pc-card *,
.study-room--light .study-reader-content .sample-output *,
.study-room--light .study-reader-content .sample-box *,
.study-room--light .study-reader-content .example-output *,
.study-room--light .study-reader-content .prompt-followup *,
.study-room--light .study-reader-content .stepblk *,
.study-room--light .study-reader-content .ucv2-sec *,
.study-room--light .study-reader-content .vcard * { color:#211b15!important; }
.study-room--light .study-reader-content pre,
.study-room--light .study-reader-content .md-code-wrap,
.study-room--light .study-reader-content .ex-pre { background:rgba(33,27,21,.055)!important; }
.study-room--light .study-reader-content .study-lesson-section { border-bottom-color:rgba(33,27,21,.27)!important; }

/* The reader must never become wider than the physical phone viewport. */
@media (max-width:620px) {
  .study-room,.study-room-layout,.study-reader,.study-reader-content,.study-lesson-copy { width:100%; max-width:100%; min-width:0; }
  .study-reader { padding:38px 18px 60px; }
  .study-lesson-section { grid-template-columns:30px minmax(0,1fr); gap:13px; }
  .study-lesson-index { font-size:.56rem; }
  .study-reader-content .tw-pc,.study-reader-content .tw-pc-card,.study-reader-content .tw-pc-prompt,.study-reader-content .tw-pc-output,.study-reader-content .sample-output,.study-reader-content .sample-box,.study-reader-content .example-output,.study-reader-content .prompt-followup,.study-reader-content .stepblk,.study-reader-content .ucv2-sec,.study-reader-content .vcard { min-width:0!important; max-width:100%!important; }
  .study-reader-content pre,.study-reader-content .md-code-wrap,.study-reader-content .ex-pre { max-width:100%; overflow-x:auto; }
}

/* Full light-reader audit: legacy Foundation, Pro, and use-case templates use
   different class names, so neutralise every content surface in one final layer.
   Buttons/inputs keep their own state colours; lesson content does not. */
.study-room--light .study-reader-content :where(section,article,div,details,blockquote,table,thead,tbody,tr,th,td,pre,code) {
  background:transparent!important;
  background-image:none!important;
  color:#211b15!important;
  box-shadow:none!important;
}
.study-room--light .study-reader-content .section.fsec-card,
.study-room--light .study-reader-content .fsec-card-head,
.study-room--light .study-reader-content .fsec-card-body,
.study-room--light .study-reader-content .md-body,
.study-room--light .study-reader-content .f-body,
.study-room--light .study-reader-content .md-code-wrap,
.study-room--light .study-reader-content .ex-pre {
  border-radius:0!important;
  border-color:rgba(33,27,21,.24)!important;
}
.study-room--light .study-reader-content .section.fsec-card { border-left:2px solid var(--study-amber)!important; }
.study-room--light .study-reader-content th { font-weight:700!important; }
.study-room--light .study-reader-content :where(p,li,td,th,small,span,strong,em,b) { color:#211b15!important; }

/* Dark reader: legacy lesson selectors must never reintroduce ink text on the dark paper. */
.study-room--dark .study-reader-content :where(section,article,div,details,blockquote,table,thead,tbody,tr,th,td,pre,code) {
  color:var(--study-copy)!important;
  box-shadow:none!important;
}
.study-room--dark .study-reader-content :where(p,li,td,th,small,span,em,b) { color:var(--study-copy)!important; }
.study-room--dark .study-reader-content :where(h1,h2,h3,h4,strong) { color:var(--study-heading)!important; }
.study-room--dark .study-reader-content :where(a) { color:var(--study-amber)!important; }
.study-room--dark .study-reader-content :where(button):not(.btn-amber) { color:var(--study-copy)!important; }
.study-room--dark .study-reader-content .section.fsec-card,
.study-room--dark .study-reader-content .fsec-card-head,
.study-room--dark .study-reader-content .fsec-card-body,
.study-room--dark .study-reader-content .md-body,
.study-room--dark .study-reader-content .f-body,
.study-room--dark .study-reader-content .tw-pc,
.study-room--dark .study-reader-content .tw-pc-card,
.study-room--dark .study-reader-content .tw-pc-prompt,
.study-room--dark .study-reader-content .tw-pc-output,
.study-room--dark .study-reader-content .sample-output,
.study-room--dark .study-reader-content .sample-box,
.study-room--dark .study-reader-content .example-output,
.study-room--dark .study-reader-content .prompt-followup,
.study-room--dark .study-reader-content .stepblk,
.study-room--dark .study-reader-content .ucv2-sec,
.study-room--dark .study-reader-content .vcard,
.study-room--dark .study-reader-content details,
.study-room--dark .study-reader-content .prompt-box,
.study-room--dark .study-reader-content .prompt-card,
.study-room--dark .study-reader-content .example-box,
.study-room--dark .study-reader-content .md-callout,
.study-room--dark .study-reader-content blockquote {
  border-color:var(--study-line)!important;
  background:var(--study-panel)!important;
  color:var(--study-copy)!important;
}
.study-room--dark .study-reader-content .tw-pc *,
.study-room--dark .study-reader-content .tw-pc-card *,
.study-room--dark .study-reader-content .sample-output *,
.study-room--dark .study-reader-content .sample-box *,
.study-room--dark .study-reader-content .example-output *,
.study-room--dark .study-reader-content .prompt-followup *,
.study-room--dark .study-reader-content .stepblk *,
.study-room--dark .study-reader-content .ucv2-sec *,
.study-room--dark .study-reader-content .vcard *,
.study-room--dark .study-reader-content .prompt-box *,
.study-room--dark .study-reader-content .prompt-card *,
.study-room--dark .study-reader-content .example-box *,
.study-room--dark .study-reader-content .md-callout *,
.study-room--dark .study-reader-content blockquote * { color:inherit!important; }
.study-room--dark .study-reader-content pre,
.study-room--dark .study-reader-content .md-code-wrap,
.study-room--dark .study-reader-content .ex-pre {
  border-color:var(--study-line-strong)!important;
  background:#201b16!important;
  color:#f6efe3!important;
}
.study-room--dark .study-reader-content pre * { color:inherit!important; }

/* One canonical mobile header: back, brand, then two distinct controls.
   This comes last because older lesson templates contributed conflicting 620px rules. */
.study-theme-toggle { display:none; }
@media (max-width:620px) {
  .study-topbar {
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    min-height:60px!important;
    gap:8px!important;
    padding:0 10px!important;
  }
  .study-back { grid-column:1; grid-row:1; width:44px!important; min-width:44px; min-height:44px; justify-content:center; }
  .study-back b { display:none!important; }
  .study-brand { grid-column:2; grid-row:1; justify-self:center; width:110px!important; min-width:0; min-height:44px; }
  .study-brand img { max-width:100%; }
  .study-controls { grid-column:3; grid-row:1; display:flex!important; align-items:center; justify-content:flex-end; gap:8px!important; min-width:0; }
  .study-language { display:inline-flex; align-items:center; justify-content:center; flex:0 0 56px!important; width:56px!important; min-height:40px!important; padding:0!important; font-size:.56rem!important; letter-spacing:.03em; }
  .reading-mode { display:none!important; }
  .study-theme-toggle { display:inline-flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; min-height:40px; border:1px solid var(--study-line); background:transparent; color:var(--study-muted); font-size:1rem; }
  .study-theme-toggle[aria-pressed="true"] { border-color:var(--study-amber); color:var(--study-amber); }
}
@media (max-width:360px) {
  .study-topbar { grid-template-columns:40px minmax(0,1fr) auto!important; padding:0 7px!important; gap:4px!important; }
  .study-back { width:40px!important; min-width:40px; min-height:40px; }
  .study-brand { width:96px!important; }
  .study-controls { gap:4px!important; }
  .study-language { flex-basis:52px!important; width:52px!important; min-height:38px!important; font-size:.52rem!important; }
  .study-theme-toggle { flex-basis:38px; width:38px; min-height:38px; }
}

/* Empty free folders stay useful as a clear promise, not a broken-looking grid. */
.collection-empty-state {
  margin-top:29px;
  padding:54px 32px;
  border:1px solid #d5cabb;
  background:linear-gradient(135deg,#fffdf9 0%,#f7efe4 100%);
  text-align:left;
}
.collection-empty-state h3 {
  max-width:22ch;
  margin-top:12px;
  color:var(--ink,#211b15);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.8rem,3vw,2.45rem);
  font-weight:550;
  letter-spacing:-.035em;
  line-height:1;
}
.collection-empty-state p {
  max-width:55ch;
  margin-top:14px;
  color:#706458;
  font-size:.86rem;
  line-height:1.65;
}
@media (max-width:760px) {
  .collection-empty-state { margin-top:22px; padding:36px 21px; }
}

/* Use-case collection: keep the work paths visible without an extra chapter layer. */
.usecase-material-stage { margin-top:29px; }
.usecase-material-stage-head { display:flex; align-items:end; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid #d7ccbe; }
.usecase-material-stage-head p { margin:0; color:#75695c; font-size:.78rem; text-align:right; }
.usecase-material-stage-head p b { color:#372d22; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.45rem; font-weight:550; }
.usecase-material-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-top:18px; }
.usecase-material-card { display:flex; flex-direction:column; min-width:0; border:1px solid #d5cabb; background:#fffdf9; transition:border-color .2s var(--ease-out),background .2s var(--ease-out),transform .2s var(--ease-out); }
.usecase-material-card:hover,.usecase-material-card.is-open { border-color:#a77740; background:#f8f1e7; }
.usecase-material-card:hover { transform:translateY(-2px); }
.usecase-material-trigger { display:grid; grid-template-columns:38px minmax(0,1fr) 22px; align-items:start; gap:13px; width:100%; min-height:194px; padding:22px 20px 18px; border:0; background:transparent; color:inherit; text-align:left; }
.usecase-material-number { color:#b48a54; font-family:"Cormorant Garamond",Georgia,serif; font-size:2.55rem; font-style:italic; line-height:.74; }
.usecase-material-copy { display:flex; min-width:0; flex-direction:column; }
.usecase-material-kicker { margin-bottom:8px; color:#916832; font-family:"JetBrains Mono",monospace; font-size:.57rem; letter-spacing:.09em; line-height:1.2; text-transform:uppercase; }
.usecase-material-copy strong { color:#231d17; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.55rem; font-weight:550; letter-spacing:-.035em; line-height:1.02; }
.usecase-material-copy small { margin-top:12px; color:#706458; font-size:.77rem; line-height:1.55; }
.usecase-material-copy small b { color:#4d4032; font-weight:650; letter-spacing:.02em; }
.usecase-material-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; padding-top:16px; color:#856e54; font-family:"JetBrains Mono",monospace; font-size:.57rem; letter-spacing:.045em; text-transform:uppercase; }
.usecase-material-meta i { width:3px; height:3px; border-radius:50%; background:#b48a54; }
.usecase-material-chevron { color:#8a7d70; transition:transform .2s var(--ease-out),color .2s var(--ease-out); }
.usecase-material-card.is-open .usecase-material-chevron { color:#9e6e2d; transform:rotate(180deg); }
.usecase-material-preview { display:none; margin:0 20px; padding:14px 0 18px; border-top:1px dashed #cfbfae; }
.usecase-material-preview.is-visible { display:block; animation:preview-in .22s var(--ease-out) both; }
.usecase-material-preview p { margin:0 0 14px; color:#5f554b; font-size:.78rem; line-height:1.55; }
.usecase-material-preview p strong { color:#3d3023; font-weight:650; }
.usecase-material-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.usecase-material-actions .begin-button { min-width:0; min-height:42px; padding:0 14px; }
.usecase-material-login { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 15px; border:1px solid #b99568; color:#7d5422; font-size:.75rem; font-weight:600; text-decoration:none; }
.usecase-material-login:hover { background:rgba(214,162,94,.14); }
@media (max-width:760px) {
  .usecase-material-stage { margin-top:22px; }
  .usecase-material-stage-head { align-items:flex-start; flex-direction:column; gap:5px; }
  .usecase-material-stage-head p { text-align:left; }
  .usecase-material-grid { grid-template-columns:1fr; gap:11px; margin-top:14px; }
  .usecase-material-trigger { min-height:0; padding:19px 17px 17px; }
  .usecase-material-copy strong { font-size:1.4rem; }
  .usecase-material-preview { margin:0 17px; }
  .usecase-material-actions { align-items:stretch; flex-direction:column; }
  .usecase-material-actions .begin-button,.usecase-material-login { width:100%; min-height:44px; }
}

/* Pro library: show each usable material area first, then reveal its lessons. */
.pro-subfolder-stage { margin-top:29px; }
.pro-subfolder-group { margin-top:36px; }
.pro-subfolder-group + .pro-subfolder-group { padding-top:36px; border-top:1px solid #d7ccbe; }
.pro-subfolder-group-head { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:18px; }
.pro-subfolder-group-head .mono-label { color:#806033; }
.pro-subfolder-group-head p { max-width:48ch; margin:0; color:#706458; font-size:.77rem; line-height:1.55; text-align:right; }
.pro-subfolder-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.pro-subfolder-card { display:flex; min-width:0; flex-direction:column; min-height:220px; padding:22px 20px 19px; border:1px solid #d5cabb; background:#fffdf9; color:var(--ink); text-align:left; transition:border-color .2s var(--ease-out),background .2s var(--ease-out),transform .2s var(--ease-out); }
.pro-subfolder-card:hover { border-color:#a77740; background:#f8f1e7; transform:translateY(-2px); }
.pro-subfolder-copy { display:flex; min-width:0; flex-direction:column; height:100%; }
.pro-subfolder-copy .mono-label { margin-top:0; color:#916832; font-size:.55rem; line-height:1.25; }
.pro-subfolder-copy strong { margin-top:8px; color:#231d17; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.55rem; font-weight:550; letter-spacing:-.035em; line-height:1.02; }
.pro-subfolder-copy small { margin-top:12px; color:#706458; font-size:.77rem; line-height:1.55; }
.pro-subfolder-level { display:flex; align-items:center; gap:8px; margin-top:14px; color:#856e54; font-family:"JetBrains Mono",monospace; font-size:.57rem; letter-spacing:.045em; text-transform:uppercase; }
.pro-subfolder-level b { color:#7d5422; font-weight:600; }
.pro-subfolder-meta { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:16px; color:#856e54; font-family:"JetBrains Mono",monospace; font-size:.57rem; letter-spacing:.045em; text-transform:uppercase; }
.pro-subfolder-meta b { color:#7d5422; font-size:.75rem; font-weight:600; }
.pro-subfolder-meta svg { transition:transform .18s var(--ease-out); }
.pro-subfolder-card:hover .pro-subfolder-meta svg { transform:translateX(3px); }
@media (max-width:760px) {
  .pro-subfolder-stage { margin-top:22px; }
  .pro-subfolder-group { margin-top:27px; }
  .pro-subfolder-group + .pro-subfolder-group { padding-top:27px; }
  .pro-subfolder-group-head { display:block; margin-bottom:14px; }
  .pro-subfolder-group-head p { max-width:62ch; margin-top:8px; text-align:left; }
  .pro-subfolder-grid { grid-template-columns:1fr; gap:11px; }
  .pro-subfolder-card { min-height:0; padding:19px 17px 17px; }
  .pro-subfolder-copy .mono-label { margin-top:0; }
  .pro-subfolder-copy strong { font-size:1.4rem; }
}