:root{color-scheme:dark;--gold:#edcf78;--gold-muted:#957339;--paper:#f1e8d8;--muted:#a99eae;--purple:#c59aea;--card-height:clamp(490px,calc(100svh - 316px),810px)}
*{box-sizing:border-box}html{background:#08060b;scroll-behavior:smooth}body{margin:0;color:var(--paper);font-family:Georgia,"Times New Roman",serif;min-width:300px;background:#08060b;position:relative;isolation:isolate;min-height:100svh}button,a,select{touch-action:manipulation}button,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.28}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #edc2ff;outline-offset:5px}button:focus:not(:focus-visible){outline:none}button:disabled:hover{transform:none}button svg,a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
.backdrop{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,3,9,.64),rgba(7,4,11,.79) 65%,rgba(4,3,7,.94)),url('./assets/sanctum-background.webp') center / cover no-repeat}.backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 32%,rgba(114,59,166,.09),transparent 65%)}
.sitebar{max-width:1352px;margin:auto;height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;position:relative}.sitebar:after{content:"";position:absolute;bottom:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,#6f532b 18%,#b99b52 50%,#6f532b 82%,transparent)}.home-link{display:inline-flex;align-items:center;gap:8px;justify-self:start;color:#c8b598;font:12px/1.4 Arial,sans-serif;letter-spacing:.035em}.home-link:hover{color:#fae3a0}.brand img{display:block;width:149px;height:auto;filter:drop-shadow(0 2px 8px #000)}.site-label{justify-self:end;font:10px/1.5 Arial,sans-serif;letter-spacing:.2em;color:#bfb49e;text-transform:uppercase}.site-label i{display:inline-block;width:5px;height:5px;background:#c088e7;box-shadow:0 0 10px #bb7fef;transform:rotate(45deg);margin-right:9px}
.heading{padding:23px 18px 10px;text-align:center}.eyebrow{margin:0 0 10px;text-transform:uppercase;color:#b493cd;letter-spacing:.24em;font:10px/1.5 Arial,sans-serif}.heading h1{margin:0;font-weight:400;font-size:43px;letter-spacing:.055em;line-height:1.2;color:#edce76;text-shadow:0 2px 10px #000}.heading .subheading{color:#b9afa0;font-size:14px;line-height:1.6;margin:6px 0 2px}.heading h1:before,.heading h1:after{content:"";display:inline-block;vertical-align:middle;width:84px;height:1px;margin:0 25px;background:linear-gradient(90deg,transparent,#846020)}.heading h1:after{transform:scaleX(-1)}
.guide-grid{width:min(1272px,calc(100% - 88px));display:grid;grid-template-columns:236px minmax(0,1fr) 226px;gap:40px;margin:4px auto 0;align-items:center}.chapter-nav{margin-top:-92px}.rail-label{font:10px/1.5 Arial,sans-serif;color:#b7a37e;letter-spacing:.2em;text-transform:uppercase;padding-left:15px;margin:0 0 19px}.chapter-list{list-style:none;padding:0;margin:0;position:relative}.chapter-list:before{position:absolute;content:"";left:30px;top:30px;bottom:29px;width:1px;background:linear-gradient(#5b432d,#442536,#5b432d)}.chapter{position:relative;width:100%;min-height:61px;padding:10px 12px;display:flex;align-items:center;gap:16px;text-align:left;border:1px solid transparent;border-radius:4px;background:none;color:#b7aa93;transition:background .2s,border-color .2s,color .2s}.chapter-number{position:relative;display:grid;place-items:center;width:34px;height:34px;flex:none;font:12px Georgia,serif;color:#9b844e;border:1px solid #4c3824;border-radius:50%;background:#0f0b11}.chapter-title{font-size:16px;line-height:1.3}.chapter-current{display:none;width:5px;height:5px;margin-left:auto;background:#d09deb;transform:rotate(45deg);box-shadow:0 0 12px #a065d0}.chapter:hover{color:#f4d99b;background:#281b241c}.chapter[aria-current="step"]{background:linear-gradient(90deg,#684b2530,#2212217a);border-color:#92753b7a;color:#f7db8e}.chapter[aria-current="step"] .chapter-number{border-color:#be9950;color:#f5d287;background:#332037}.chapter[aria-current="step"] .chapter-current{display:block}.rail-note{margin:22px 14px 0;padding-top:20px;border-top:1px solid #51432973;display:flex;gap:9px;align-items:flex-start;font:12px/1.7 Arial,sans-serif;color:#9c91a1}.rail-note svg{width:16px;height:16px;stroke:#bba66c;fill:none;flex:none;margin-top:2px;stroke-width:1.5}
.viewer{min-width:0;text-align:center}.progress{display:flex;justify-content:center;align-items:center;gap:4px;margin:0 auto 12px;height:22px}.progress button{background:none;border:0;width:25px;height:25px;padding:0;display:grid;place-items:center}.progress span{width:7px;height:7px;border:1px solid #aa873e;transform:rotate(45deg);background:#1f151d;transition:all .2s}.progress button[aria-selected="true"] span{width:9px;height:9px;background:linear-gradient(135deg,#efcaff,#9346db);border-color:#dbbafd;box-shadow:0 0 11px #b769e8}.mobile-topics{display:none}.card-stage{display:flex;align-items:flex-start;justify-content:center;position:relative;width:100%;border-radius:12px;isolation:isolate;touch-action:pan-y}.card-stage:before{content:"";position:absolute;inset:8% 4%;border-radius:40%;box-shadow:0 0 65px 12px #a45cdd15;z-index:-1}.card-open{display:block;background:none;border:0;padding:0;position:relative;cursor:zoom-in;max-width:100%;border-radius:17px}.card-open img{display:block;max-width:100%;height:var(--card-height);width:auto;object-fit:contain;border-radius:16px;filter:drop-shadow(0 6px 19px #0009)}.expand-corner{position:absolute;bottom:15px;right:19px;padding:8px;border:1px solid #b08b4670;background:#100b17e3;color:#e7c988;border-radius:7px;display:grid;place-items:center;opacity:.9}.expand-corner svg{width:18px;height:18px}.card-open:hover .expand-corner{background:#3b1a42;color:#f5defb;border-color:#b795d4}.card-caption{margin:11px 0 0;color:#8e8396;font:10px/1.4 Arial,sans-serif;letter-spacing:.075em}.step-controls{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:5px}.arrow{height:40px;width:44px;display:grid;place-items:center;background:transparent;border:1px solid #8b663852;border-radius:50%;color:#e4c878}.arrow:hover:not(:disabled){background:#73563322;border-color:#a68244}.step-middle{min-width:135px}.swipe-label{font-size:15px;color:#f0d998}.counter-label{margin:3px 0 0;font:10px/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:.15em;color:#98869e}.done-button{display:flex;align-items:center;justify-content:center;gap:16px;min-height:43px;width:239px;max-width:90%;margin:13px auto 0;border:1px solid #c49744;border-radius:9px;background:linear-gradient(180deg,#e6c5790d,#140b16 54%,#49322259);box-shadow:inset 0 0 0 2px #110b09,inset 0 0 0 3px #ae7c3226,0 3px 8px #0008;color:#f5d889;text-transform:uppercase;letter-spacing:.12em;font-size:14px}.done-button:before,.done-button:after{content:"◆";font-size:8px;color:#bfa161}.done-button:hover{background:linear-gradient(#7a4a253b,#2d172f,#3f242a)}
.lesson-context{margin-top:-68px;align-self:center}.context-step{font-size:43px;line-height:1;color:#e5c981;margin:0 0 18px;letter-spacing:.02em}.context-step span{font:12px/1.5 Arial,sans-serif;color:#91889a;letter-spacing:.1em;margin-left:8px}.context-title{font-size:25px;color:#f3d898;font-weight:400;line-height:1.2;margin:0 0 14px}.context-text{font-size:16px;line-height:1.65;color:#c9bfc6;margin:0 0 20px}.context-rule{display:block;width:78px;height:1px;background:linear-gradient(90deg,#c3984d,transparent);margin:0 0 23px}.zoom-text-button{border:1px solid #8b654a7a;background:#21152461;color:#e5cca3;display:inline-flex;align-items:center;gap:9px;font:12px/1.5 Arial,sans-serif;padding:11px 15px;border-radius:6px}.zoom-text-button svg{width:16px;height:16px}.zoom-text-button:hover{border-color:#b991cf;background:#38214161}.context-small{font:11px/1.8 Arial,sans-serif;margin:12px 0;color:#9b8b9e;max-width:215px}.next-chapter{margin-top:26px;padding-top:19px;border-top:1px solid #65523568}.next-chapter small{font:9px/1.5 Arial,sans-serif;letter-spacing:.17em;color:#968192;text-transform:uppercase;display:block;margin-bottom:9px}.next-chapter button{border:0;padding:0;background:none;color:#d4bd86;display:flex;gap:8px;align-items:center;font-size:14px;text-align:left}.next-chapter button svg{width:16px;height:16px}
.page-footer{font:10px/1.6 Arial,sans-serif;letter-spacing:.05em;color:#93848f;text-align:center;max-width:850px;margin:19px auto 0;padding:0 16px 19px}.page-footer .little-star{color:#a6843c;margin:0 9px}.transcript{width:min(700px,calc(100% - 40px));margin:4px auto 25px;border-top:1px solid #9c78372b}.transcript summary{padding:14px 0;text-align:center;cursor:pointer;font:11px/1.5 Arial,sans-serif;letter-spacing:.06em;color:#b3a2b8;list-style:none}.transcript summary:before{content:"+";color:#d2ba78;margin-right:8px}.transcript[open] summary:before{content:"−"}.transcript-copy{padding:14px 28px 20px;color:#cfc4c3;background:#100b16b8;border:1px solid #80673c63;border-radius:12px;font-size:16px;line-height:1.7}.transcript-copy h2{font-size:24px;font-weight:400;color:var(--gold);margin-top:0}.transcript-copy h3{font-size:18px;color:#dac07b}.transcript-copy p{margin:.65em 0}.transcript-copy ul{padding-left:1.4em}
.zoom-dialog{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;border:0;padding:0;background:#07050bf7;color:var(--paper);overflow:hidden}.zoom-dialog::backdrop{background:#000e}.zoom-toolbar{height:69px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #b28a494f;padding:0 26px;background:#100b16}.zoom-toolbar h2{font-size:23px;font-weight:400;margin:0;color:var(--gold)}.zoom-tools{display:flex;align-items:center;gap:9px}.zoom-tools button,.zoom-close{display:grid;place-items:center;min-width:40px;height:40px;padding:4px 10px;border:1px solid #896a3d80;background:#201527;border-radius:6px;font:14px Arial,sans-serif;color:#e9d2a1}.zoom-close{font:13px Arial,sans-serif;display:flex;gap:7px}.zoom-toolbar #zoom-percent{font:11px/1.5 Arial,sans-serif;color:#baacbf;width:43px;text-align:center}.zoom-viewport{height:calc(100dvh - 105px);overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y}.zoom-canvas{min-width:100%;min-height:100%;width:max-content;display:flex;align-items:center;justify-content:center;padding:18px}.zoom-canvas img{display:block;max-width:none;flex:none;object-fit:contain;user-select:none;-webkit-user-drag:none}.zoom-help{height:36px;text-align:center;font:11px/36px Arial,sans-serif;color:#a392b2;margin:0;background:#100b16}.done-dialog{width:min(460px,calc(100vw - 36px));border:1px solid #c19749;border-radius:22px;background:radial-gradient(ellipse at top,#352047,#120a18 62%);color:#f3e4cc;padding:40px;text-align:center}.done-dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.done-dialog h2{font-size:32px;color:#edcb76;font-weight:400}.done-dialog p{line-height:1.7;color:#cdbfcd}.done-dialog .done-button{width:100%;margin-top:17px}.done-dialog .text-link{display:inline-block;color:#b7a1c2;border:0;background:none;padding:18px 5px 0;font:12px Arial,sans-serif;cursor:pointer}.done-mark{width:44px;height:44px;transform:rotate(45deg);background:linear-gradient(135deg,#edcaff,#792dcb 50%,#331661);box-shadow:0 0 0 4px #160923,0 0 0 5px #b0904f,0 0 35px #b681e24d;margin:4px auto 30px}
@media(min-width:1800px){.guide-grid{width:1400px;grid-template-columns:270px minmax(0,1fr) 252px;gap:58px}.chapter-title{font-size:18px}.context-text{font-size:18px}.sitebar{max-width:1500px}.heading{padding-top:28px}}
@media(max-width:1150px){.guide-grid{width:calc(100% - 52px);grid-template-columns:214px minmax(0,1fr);gap:32px;max-width:910px}.lesson-context{display:none}.chapter-title{font-size:15px}.heading h1{font-size:38px}.card-open img{height:auto;width:min(460px,100%);max-height:none}.heading{padding-top:20px}.chapter-nav{margin-top:-120px}}
@media(max-width:720px){.sitebar{height:66px;padding:0 16px;grid-template-columns:1fr auto}.brand{justify-self:end}.brand img{width:122px}.site-label{display:none}.home-link{font-size:11px;gap:4px}.home-link svg{width:18px;height:18px}.sitebar:after{left:16px;right:16px}.heading{padding:21px 10px 9px}.heading .eyebrow{font-size:8px;margin-bottom:8px}.heading h1{font-size:32px}.heading h1:before,.heading h1:after{width:30px;margin:0 10px}.heading .subheading{font-size:12px;margin-top:7px}.guide-grid{display:block;width:calc(100% - 28px);margin-top:6px;max-width:520px}.chapter-nav{display:none}.progress{margin-bottom:11px;height:25px;gap:6px}.progress button{width:29px}.mobile-topics{display:flex;align-items:center;justify-content:center;margin:0 0 9px;color:#cdb887}.mobile-topics label{font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;margin-right:9px;color:#968494}.mobile-topics select{border:0;border-bottom:1px solid #93734278;background:#130d18;color:#ddc98f;border-radius:4px;font:12px Georgia,serif;padding:8px 25px 8px 9px;max-width:235px}.card-open img{width:100%;height:auto;max-width:440px;border-radius:12px}.expand-corner{bottom:14px;right:14px;padding:7px}.card-caption{font-size:9px;margin-top:8px}.step-controls{margin-top:9px;gap:28px}.arrow{width:42px;height:42px}.swipe-label{font-size:15px}.counter-label{font-size:9px}.done-button{margin-top:14px;min-height:44px;max-width:90%;width:240px}.page-footer{margin-top:18px;padding-bottom:10px;font-size:9px}.transcript{margin-bottom:18px}.transcript-copy{font-size:15px;padding:18px}.zoom-toolbar{height:auto;min-height:66px;display:grid;grid-template-columns:auto 1fr;padding:9px 12px;gap:8px}.zoom-toolbar h2{font-size:18px;text-align:right}.zoom-tools{grid-column:1/-1;justify-content:center}.zoom-viewport{height:calc(100dvh - 155px)}.zoom-tools button{height:34px;min-width:36px;font-size:12px}.zoom-close{font-size:12px;min-width:34px;height:34px}.zoom-help{height:36px;line-height:36px;font-size:10px}.done-dialog{padding:35px 25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Keep controls outside the instructional artwork. */
.expand-corner{display:none}
.card-caption{border:0;background:none;padding:6px 8px;color:#baa8bc;cursor:zoom-in;display:inline-block}
.card-caption:hover{color:#ecd096}
.preview-label{font:9px/1.4 Arial,sans-serif;color:#998ba4;margin:0 0 3px;letter-spacing:.06em}

/* Linked website support page */
.tutorial-support-link{color:#e6cb86;font-size:12px;white-space:nowrap;text-decoration:none;margin-left:12px}.tutorial-support-link:hover{text-decoration:underline}