:root{--navy:#101b50;--blue:#1355dc;--ink:#1b2854;--muted:#4d5e79;--line:#d3ddeb;--green:#26836a;--orange:#e75b36;--paper:#f8faff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);background:#eef2fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0%,#dfe9ff80,transparent 45%),radial-gradient(ellipse at 10% 90%,#e6ddfa80,transparent 45%),#f1f4fb;min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer;border:0;color:inherit;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #77a7f5;outline-offset:3px}button:disabled{opacity:.4;cursor:default}svg{display:block;width:20px;height:20px;flex-shrink:0}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:600}.glass{position:relative;background:#ffffffe0;border:1px solid #ffffffed;box-shadow:0 8px 25px #1b326408,inset 0 1px 0 #fff9;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.app-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:22px;max-width:1800px;padding:18px;min-height:100vh;margin:auto}.sidebar{border-radius:24px;padding:27px 17px 20px;position:sticky;top:18px;height:calc(100vh - 36px);display:flex;flex-direction:column;color:#4d5e79;background:linear-gradient(150deg,#18285aee,#0d1749f5);border-color:#ffffff30;box-shadow:0 16px 40px #172b6622}.brand{display:flex;align-items:center;gap:11px;text-align:left;padding:0 10px;font-size:25px;letter-spacing:-1px;color:white;line-height:1.15}.brand-symbol{display:grid;place-items:center;width:39px;height:39px;background:#ffffff15;border:1px solid #ffffff30;border-radius:13px}.brand-symbol svg{width:25px;height:25px}.brand small{display:block;letter-spacing:2.7px;font-size:12px;color:#4d5e79;font-weight:500;margin-top:5px}.institution{margin:31px 10px 28px;display:flex;flex-direction:column;gap:8px}.tiny-label,.eyebrow{font-size:13px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}.eyebrow svg{width:13px;height:13px}.institution .tiny-label{color:#4d5e79;font-size:12px}.institution strong{font-size:17px;font-weight:500;color:#4d5e79}.institution>span:last-child{font-size:14px;color:#4d5e79}.sidebar>nav{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffffff20 transparent}.nav-link{display:flex;align-items:center;gap:10px;padding:12px;width:100%;font-size:16px;color:#4d5e79;text-align:left;border-radius:12px}.nav-link svg{width:17px;height:17px}.nav-link.active{background:#ffffff16;color:white}.nav-label{font-size:12px;letter-spacing:1.4px;color:#4d5e79;margin:24px 12px 12px}.chapter-toggle{width:100%;display:flex;align-items:center;gap:9px;text-align:left;padding:11px 10px;border-radius:12px;color:#4d5e79}.chapter-toggle.selected{background:#ffffff0d;color:white}.chapter-dot{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:#ffffff0f;border:1px solid #ffffff1c;font-size:13px;flex-shrink:0}.chapter-toggle.selected .chapter-dot{background:#5b8bf2;color:#fff;border-color:#83aaff}.chapter-toggle>span:nth-child(2){font-size:15px;font-weight:500}.chapter-toggle small{display:block;color:#4d5e79;font-size:12px;font-weight:400;margin-top:5px}.chevron{font-size:14px;margin-left:auto;color:#4d5e79}.chapter-stops{margin:5px 0 8px 23px;border-left:1px solid #ffffff13;padding-left:7px}.stop-nav{display:flex;gap:8px;align-items:center;text-align:left;padding:8px 7px;border-radius:8px;font-size:13px;line-height:1.55;color:#4d5e79;width:100%}.stop-nav.selected{background:#ffffff12;color:white}.stop-dot{width:7px;height:7px;border:1px solid #6e83b2;border-radius:50%;flex-shrink:0;font-size:11px}.stop-dot.done{background:#70bea5;color:#0d3b31;border-color:#70bea5;display:grid;place-items:center}.nav-secondary{border-top:1px solid #ffffff12;margin-top:16px;padding-top:12px}.nav-progress{margin:16px 10px 0;padding-top:15px;border-top:1px solid #ffffff12}.nav-progress>div:first-child{display:flex;justify-content:space-between;font-size:13px;color:#4d5e79}.nav-progress strong{color:#4d5e79;font-weight:500}.bar{height:4px;border-radius:6px;background:#ffffff10;margin-top:12px;overflow:hidden}.bar i{display:block;background:#84a8ff;height:100%;border-radius:6px}.text-button{display:inline-flex;align-items:center;gap:8px;background:none;color:var(--blue);padding:5px 0;font-size:14px;line-height:1.6}.text-button svg{height:14px;width:14px}.subdued{font-size:12px;color:#4d5e79;margin-top:10px}.app-layout>main{min-width:0;display:flex;flex-direction:column}.topbar{min-height:67px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 25px}.desktop-title{font-size:16px;color:#667693}.mobile-brand{display:none}.topbar-actions{display:flex;align-items:center;gap:20px}.onsite-pill{font-size:13px;display:flex;align-items:center;gap:7px;color:#6e7b95}.onsite-pill i{width:5px;height:5px;border-radius:50%;background:#68a795}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 17px;border:1px solid transparent;border-radius:10px;font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;min-height:40px}.btn svg{width:14px;height:14px}.primary{background:linear-gradient(130deg,#175cde,#1749ba);color:#fff;box-shadow:0 5px 12px #1c58ce1c}.primary:not(:disabled):hover{background:#1047b8}.secondary{background:#ffffff9c;border:1px solid #dfe6f2;color:#3d537c}.secondary:hover{background:white}.small{padding:9px 12px;min-height:34px;font-size:13px;border-radius:9px}.content{max-width:1320px;padding:32px 18px 20px;margin:0 auto;width:100%;flex:1}.welcome{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:7px 0 28px}.welcome .eyebrow{color:#4d5e79;font-size:12px}.welcome h1{font-size:34px;letter-spacing:-1px;font-weight:600;line-height:1.2;margin:12px 0 11px}.welcome p{font-size:16px;line-height:1.8;color:var(--muted)}.welcome-token{display:flex;align-items:center;gap:12px;padding:16px 19px;border-radius:18px;font-size:15px;color:#4b608b}.welcome-token>svg{width:22px;height:22px;color:#4d5e79}.welcome-token small{display:block;font-size:13px;color:#4d5e79;margin-top:5px}.chapter-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:23px}.chapter-card{display:flex;align-items:center;gap:11px;padding:17px 14px;text-align:left;border-radius:17px;position:relative;min-height:96px}.chapter-card.selected{background:#fff9;border-color:#a7bef1;box-shadow:0 7px 20px #3656a011,inset 0 0 0 1px #c7d8fc55}.chapter-icon,.stop-icon{display:grid;place-items:center;flex-shrink:0;width:35px;height:35px;border-radius:12px;background:#e8efff;color:#3970d0}.chapter-icon svg{width:17px;height:17px}.blue{background:#e7efff;color:#3873dc}.violet{background:#efeafa;color:#8e6ac6}.teal{background:#e3f2ef;color:#449381}.amber{background:#faf0df;color:#4d5e79}.chapter-name{min-width:0;flex:1}.chapter-name small{display:block;font-size:12px;letter-spacing:1px;color:#4d5e79;margin-bottom:6px}.chapter-name strong{font-size:15px;line-height:1.5;font-weight:600;display:block}.chapter-name>span{display:block;font-size:12px;color:#4d5e79;margin-top:5px}.chapter-selected{font-size:14px;position:absolute;right:10px;top:11px;color:#4d5e79}.chapter-card.selected .chapter-selected{color:var(--blue)}.chapter-feature{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:30px 35px;border-radius:22px;background:linear-gradient(120deg,#f7faffc9,#f5f7ff91);min-height:208px;position:relative;overflow:hidden}.chapter-feature:after{content:'';position:absolute;right:-20px;top:-80px;width:320px;height:320px;filter:blur(40px);background:#9bbaf916;border-radius:50%;pointer-events:none}.feature-copy{position:relative;z-index:1}.feature-copy .eyebrow{font-size:12px;color:#4d5e79}.feature-copy h2{font-size:26px;font-weight:500;letter-spacing:-.6px;margin:12px 0 10px}.feature-copy p{font-size:15px;color:#7d8ca7;line-height:1.8}.feature-actions{display:flex;align-items:center;gap:18px;margin-top:20px}.feature-actions>span{display:flex;gap:6px;align-items:center;font-size:13px;color:#4d5e79}.feature-actions>span svg{width:12px;height:12px}.feature-progress{display:flex;flex-direction:column;gap:13px;align-items:center;position:relative;z-index:1;margin:0 13px;min-width:120px}.feature-progress>span{font-size:13px;color:#4d5e79}.progress-ring{width:108px;height:108px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#6895ea var(--progress),#e0e8f6 var(--progress));padding:5px;box-shadow:0 0 0 7px #ffffff52}.progress-ring>div{background:#f5f8ff;border-radius:50%;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.progress-ring strong{font-size:30px;font-weight:500;letter-spacing:-1px;color:#475f8c}.progress-ring strong>span{font-size:16px;color:#4d5e79;margin-left:3px}.progress-ring small{font-size:11px;letter-spacing:1px;color:#4d5e79;margin-top:6px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:29px 0 17px}.section-heading h2{font-size:17px;font-weight:600;letter-spacing:-.3px}.section-heading p{font-size:14px;line-height:1.7;color:#4d5e79;margin-top:8px}.count-pill{font-size:12px;color:#4d5e79;padding:7px 10px;border:1px solid #dfe6f1;border-radius:20px;white-space:nowrap;background:#ffffff60}.stop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stop-card{padding:23px;text-align:left;border-radius:19px;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;min-height:199px}.stop-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #20407d12}.stop-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.stop-icon{width:36px;height:36px;border-radius:12px}.stop-icon svg{width:18px;height:18px}.stop-status{font-size:12px;color:#4d5e79}.stop-card.complete .stop-status{color:var(--green)}.stop-card h3{font-size:14px;font-weight:500;letter-spacing:-.2px;line-height:1.5;margin-bottom:8px}.stop-card p{color:#4d5e79;font-size:14px;line-height:1.8}.stop-card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:23px;color:#4d5e79}.stop-card-bottom>span{display:flex;gap:6px;align-items:center;font-size:12px;color:#4d5e79}.stop-card-bottom svg{width:15px;height:15px}.stop-card-bottom>span svg{width:11px;height:11px}.chapter-footnote{display:flex;justify-content:flex-end;align-items:center;margin-top:19px;font-size:13px;color:#4d5e79}.chapter-footnote .text-button{font-size:13px}.site-footer{display:flex;justify-content:space-between;gap:20px;color:#4d5e79;font-size:12px;margin:12px 18px 0;padding:18px 0;border-top:1px solid #e3e8f2}.mobile-nav{display:none}.guide-breadcrumb{display:flex;align-items:center;gap:12px;color:#4d5e79;font-size:14px;margin-bottom:23px}.icon-button{display:grid;place-items:center;border-radius:9px;background:#ffffff80;color:#6e84ab;height:31px;width:31px;font-size:22px}.icon-button svg{width:16px;height:16px}.breadcrumb-dot{color:#4d5e79}.guide-intro{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:28px}.guide-intro h1{font-size:30px;font-weight:600;letter-spacing:-.8px;line-height:1.25;margin:10px 0}.guide-intro p{font-size:15px;color:#4d5e79;line-height:1.7}.guide-intro .eyebrow{font-size:12px}.guide-layout{display:grid;grid-template-columns:minmax(310px,.95fr) minmax(0,1.25fr);gap:20px;align-items:start}.task-card{border-radius:21px;padding:27px}.task-title{border-bottom:1px solid #e6ebf5;padding-bottom:20px;margin-bottom:8px}.task-title .tiny-label{font-size:12px;color:#4d5e79}.task-title h2{font-size:17px;font-weight:500;line-height:1.5;margin-top:9px}.step{display:flex;align-items:flex-start;gap:12px;padding:17px 9px;border-bottom:1px solid #e5ebf4;position:relative;border-radius:9px}.step.selected{background:#edf3ff88}.step>input{accent-color:var(--blue);width:15px;height:15px;flex-shrink:0;margin:5px 0 0;cursor:pointer}.step-copy{min-width:0;flex:1}.step-select{width:100%;text-align:left;display:flex;align-items:baseline;gap:8px;padding:0;font-size:15px;line-height:1.7}.step-select strong{font-weight:500}.step-select .step-number{font-size:12px;color:#4d5e79}.step.selected .step-select{color:var(--blue)}.step-copy small{font-size:14px;color:#4d5e79;line-height:1.85;display:block;margin-top:5px}.step.checked .step-select .step-number{color:var(--green)}.hint,.reflection{border-top:1px solid #e5ebf4;margin-top:15px;font-size:14px}.hint summary,.reflection summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;line-height:1.5;padding:16px 0;color:#6f83a5;font-weight:500}.hint summary::-webkit-details-marker,.reflection summary::-webkit-details-marker,.related-card summary::-webkit-details-marker{display:none}.hint summary>span,.reflection summary>span{margin-left:auto;color:#4d5e79;font-size:14px;font-weight:400}.hint[open] summary>span,.reflection[open] summary>span{transform:rotate(45deg)}.hint p{font-size:14px;line-height:1.9;color:#4d5e79;padding:0 0 13px}.reflection summary svg{width:14px;height:14px}.reflection label{display:block;color:#4d5e79;font-size:13px;line-height:1.8;margin:0 0 10px}.reflection textarea{border:1px solid #dce5f4;border-radius:9px;background:#ffffff80;min-height:95px;padding:12px;width:100%;font-size:14px;line-height:1.8;color:var(--ink);resize:vertical}.task-actions{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-top:21px;margin-top:12px;border-top:1px solid #e6ebf4}.task-actions>span{font-size:12px;color:#4d5e79}.task-actions .btn{font-size:14px;padding:11px 13px}.quick-reference{font-size:13px;border-collapse:collapse;line-height:1.8;margin-bottom:12px}.quick-reference th{width:39%;font-weight:500;text-align:left;vertical-align:top;padding:8px 10px 8px 0;color:#657ca4}.quick-reference td{padding:8px 0;color:#4d5e79}.guide-aside{min-width:0}.visual-card{border-radius:21px;padding:22px;overflow:hidden}.visual-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:13px;color:#4d5e79}.visual-heading .text-button{font-size:13px}.visual-heading .text-button svg{width:12px;height:12px}.visual-tabs{display:flex;gap:5px;padding:3px;background:#edf2fa99;border:1px solid #e3eaf5;border-radius:9px;margin-bottom:17px;overflow-x:auto}.visual-tabs button{padding:8px 11px;font-size:13px;white-space:nowrap;border-radius:6px;color:#4d5e79}.visual-tabs button.selected{color:#3e6cbd;background:#fff;box-shadow:0 2px 6px #2748790b}.screen-trigger{display:block;width:100%;padding:12px;background:#fff;border:1px solid #e0e6f1;border-radius:11px;overflow:hidden}.screen-frame{display:block;position:relative;width:100%;overflow:hidden;background:#fff;isolation:isolate}.screen-frame>img{display:block;position:absolute;max-width:none;object-fit:fill}.click-mark{display:block;position:absolute;border:2px solid var(--orange);box-shadow:0 0 0 2px #ffffffa0;z-index:2;pointer-events:none;border-radius:3px;min-width:5px;min-height:5px}.click-mark b{position:absolute;top:-8px;left:-1px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:var(--orange);color:white;border-radius:50%;font-size:13px;font-weight:600;box-shadow:0 0 0 2px white}.drag-arrow{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible}.highlight-key{display:flex;flex-wrap:wrap;list-style:none;gap:8px 15px;padding:0;margin:16px 0 10px}.highlight-key li{display:flex;align-items:center;gap:6px;font-size:12px;color:#4d5e79}.highlight-key li>span{background:var(--orange);color:white;width:15px;height:15px;border-radius:50%;font-size:12px;display:grid;place-items:center}.visual-card figcaption>p{font-size:14px;line-height:1.8;color:#4d5e79;margin-top:9px}.related-card{margin-top:17px;border-radius:17px;padding:0 20px}.related-card>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-size:14px;color:#748bb0;padding:18px 0;line-height:1.5}.related-card>summary svg{width:14px;height:14px}.related-card>summary>span{margin-left:auto;font-size:12px;color:#4d5e79}.related-card>div{padding-bottom:13px}.article-link{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid #e8edf6;font-size:13px;line-height:1.8;color:#4d5e79}.article-link:hover{color:var(--blue)}.article-link svg{width:12px;height:12px;margin-left:auto;margin-top:3px}.related-card .text-button{font-size:13px}.page-intro{margin:9px 0 25px}.page-intro h1{font-size:30px;font-weight:600;letter-spacing:-.8px;margin:10px 0}.page-intro p{font-size:15px;color:var(--muted);line-height:1.7}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.note-card{border-radius:18px;padding:25px}.note-card h3{font-size:15px;font-weight:500;margin:13px 0}.note-card p{font-size:15px;color:#4d5e79;line-height:1.9;white-space:pre-wrap;margin-bottom:13px}.note-card .tiny-label{font-size:12px}.empty-state{text-align:center;border-radius:20px;padding:55px 25px}.empty-state>svg{margin:0 auto 20px;color:#4d5e79;width:30px;height:30px}.empty-state h2{font-size:19px;font-weight:500;margin-bottom:13px}.empty-state p{font-size:15px;color:#4d5e79;line-height:1.8;margin-bottom:20px}.library-tools{border-radius:18px;padding:23px}.library-search{display:flex;align-items:center;gap:12px;border:1px solid #dce5f3;border-radius:10px;padding:0 13px;max-width:550px;background:#ffffffb0}.library-search svg{width:16px;height:16px;color:#4d5e79}.library-search input{padding:12px 0;border:0;background:none;min-width:0;width:100%;font-size:15px;color:var(--ink);outline:none}.library-search:focus-within{outline:2px solid #8fb3ed}.library-search input::placeholder{color:#4d5e79}.library-categories{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.library-categories button{font-size:13px;color:#4d5e79;padding:8px 11px;border:1px solid #dfe6f3;border-radius:8px;background:#f8faff66}.library-categories button.selected{background:#eaf1ff;border-color:#b5cbf3;color:#4972b7}.article-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.support-card{border-radius:17px;padding:23px}.support-card .tiny-label{font-size:12px}.support-card h3{font-size:16px;line-height:1.7;font-weight:500;margin:12px 0 8px}.support-card h3 a{display:flex;gap:20px;justify-content:space-between}.support-card h3 a:hover{color:var(--blue)}.support-card h3 svg{width:12px;height:12px;margin-top:3px;color:#4d5e79}.support-card p{font-size:14px;line-height:1.9;color:#4d5e79}.library-footer{display:inline-block;margin:25px 0;font-size:14px;color:#4d5e79}.celebration{border-radius:25px;text-align:center;padding:65px 30px}.celebration-icon{width:58px;height:58px;border-radius:20px;background:#e6f3ee;color:var(--green);display:grid;place-items:center;margin:0 auto 22px}.celebration .eyebrow{justify-content:center;margin-bottom:15px}.celebration h1{font-size:31px;font-weight:500;letter-spacing:-.7px}.celebration p{font-size:16px;line-height:1.9;color:#4d5e79;margin:20px 0 24px}.celebration>.text-button{display:block;margin:12px auto 0}.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#14224670;backdrop-filter:blur(9px);padding:25px}.dialog{width:min(430px,100%);padding:33px;border-radius:23px;background:#f5f8ffe8}.dialog h2{font-size:25px;letter-spacing:-.5px;font-weight:500;margin:15px 0}.dialog p{font-size:16px;color:#4d5e79;line-height:1.8}.dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:27px}.screenshot-dialog{width:min(1400px,100%);max-height:94vh;background:#f4f7fff5;border:1px solid #ffffffd9;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 25px 100px #101f4b35}.screenshot-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 23px;border-bottom:1px solid #dde5f1}.screenshot-dialog h2{font-size:15px;font-weight:500;line-height:1.6}.screenshot-dialog>header>div{display:flex;gap:10px;align-items:center;flex-shrink:0}.screenshot-dialog .icon-button{background:#e6edf9;border-radius:50%}.shot-canvas{padding:23px;overflow:auto;min-height:0;max-height:68vh;flex:0 1 auto}.shot-canvas .screen-frame{max-width:var(--natural-width);margin:auto}.shot-canvas.actual-size .screen-frame{width:var(--natural-width);max-width:none}.shot-canvas.actual-size{min-height:200px}.modal-caption{padding:0 23px 23px;font-size:15px;color:#4d5e79;line-height:1.8}.modal-caption .highlight-key{margin-top:0}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);z-index:90;background:#142453e8;backdrop-filter:blur(15px);color:#4d5e79;padding:13px 24px;border-radius:13px;font-size:15px;opacity:0;pointer-events:none;transition:.2s}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:1400px){.chapter-selector{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-card{min-height:84px}.chapter-name strong{font-size:16px}.chapter-icon{width:36px;height:36px}.chapter-name small{font-size:12px}.chapter-name>span{font-size:12px}}
@media(max-width:1200px){.app-layout{grid-template-columns:220px minmax(0,1fr);gap:15px;padding:15px}.sidebar{top:15px;height:calc(100vh - 30px);padding:24px 12px 18px;border-radius:22px}.content{padding:27px 10px 16px}.topbar{padding:14px 20px}.stop-card{padding:20px}.stop-grid{gap:12px}.chapter-feature{padding:27px}.guide-layout{grid-template-columns:minmax(290px,1fr) minmax(0,1fr);gap:15px}.task-card{padding:22px}.visual-card{padding:18px}.welcome h1{font-size:31px}.feature-copy h2{font-size:24px}.stop-card h3{font-size:17px}}
@media(max-width:1050px){.guide-layout{grid-template-columns:1fr}.guide-aside{width:100%}.visual-card{padding:23px}.screen-trigger{padding:15px}.stop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stop-card{min-height:185px}.task-card{padding:25px}.step-copy small{font-size:15px}.step-select{font-size:16px}.welcome-token{padding:13px;font-size:14px}.welcome-token>svg{width:18px;height:18px}.feature-progress{margin:0;min-width:100px}.progress-ring{width:94px;height:94px}}
@media(max-width:800px){.app-layout{display:block;padding:18px}.sidebar{display:none}.topbar{min-height:65px;border-radius:18px;padding:15px 20px}.mobile-brand{display:flex;align-items:center;gap:8px;font-size:19px;letter-spacing:-.7px;font-weight:600}.mobile-brand svg{width:24px;height:24px;color:#5e7cad}.desktop-title{display:none}.onsite-pill{font-size:12px}.topbar-actions{gap:14px}.topbar-actions .btn{font-size:13px;padding:8px 10px}.mobile-nav{display:flex;gap:8px;align-items:center;border-radius:14px;padding:5px;margin:13px 0 0;max-width:420px}.mobile-nav button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-size:14px;padding:10px;border-radius:10px;color:#4d5e79}.mobile-nav button.selected{background:white;color:#476daa;box-shadow:0 3px 10px #3b5a9510}.mobile-nav svg{width:14px;height:14px}.content{padding:28px 9px 17px}.welcome{margin:0 0 24px}.welcome h1{font-size:32px}.welcome p{font-size:15px}.welcome-token{padding:13px 15px}.chapter-selector{gap:12px}.chapter-card{padding:17px;min-height:92px}.chapter-name strong{font-size:16px}.chapter-name small{font-size:12px}.chapter-name>span{font-size:12px}.chapter-feature{padding:28px;min-height:200px}.stop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stop-card h3{font-size:17px}.guide-layout{display:flex;flex-direction:column}.task-card,.guide-aside{width:100%}.visual-card{padding:22px}.article-grid{grid-template-columns:1fr 1fr}.site-footer{margin:10px 9px 0}.guide-breadcrumb{margin-bottom:20px}.guide-intro h1{font-size:29px}.guide-intro p{font-size:15px}.step-copy small{font-size:15px}.task-title h2{font-size:18px}}
@media(max-width:600px){.app-layout{padding:12px}.topbar{padding:14px 16px;min-height:61px}.onsite-pill{display:none}.mobile-brand{font-size:19px}.topbar-actions .btn{font-size:12px;padding:8px 10px}.content{padding:24px 4px 12px}.welcome{gap:15px}.welcome h1{font-size:29px}.welcome .eyebrow{font-size:12px}.welcome p{font-size:14px;max-width:240px}.welcome-token{display:none}.chapter-selector{gap:10px;margin-bottom:18px}.chapter-card{padding:14px 12px;gap:9px;min-height:94px;border-radius:15px}.chapter-icon{width:29px;height:29px;border-radius:10px}.chapter-icon svg{width:14px;height:14px}.chapter-name strong{font-size:14px;line-height:1.45}.chapter-name small{font-size:11px;letter-spacing:.8px}.chapter-name>span{font-size:12px}.chapter-selected{font-size:15px;right:8px;top:8px}.chapter-feature{padding:25px 22px;border-radius:19px;gap:18px;min-height:190px}.feature-copy h2{font-size:22px;line-height:1.4;margin:10px 0 8px}.feature-copy p{font-size:14px}.feature-copy .eyebrow{font-size:12px}.feature-actions{gap:12px;margin-top:18px}.feature-actions .btn{font-size:14px;padding:10px 12px;gap:8px}.feature-actions>span{display:none}.feature-progress{min-width:73px;margin:0}.feature-progress>span{font-size:12px;text-align:center;max-width:85px;line-height:1.6}.progress-ring{height:77px;width:77px;padding:4px;box-shadow:0 0 0 5px #ffffff55}.progress-ring strong{font-size:24px}.progress-ring strong>span{font-size:16px}.progress-ring small{font-size:11px;letter-spacing:.5px}.section-heading{margin:24px 0 14px;gap:12px}.section-heading h2{font-size:16px}.section-heading p{font-size:13px;max-width:260px}.count-pill{font-size:12px;padding:6px 8px}.stop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stop-card{padding:18px;min-height:190px;border-radius:17px}.stop-card h3{font-size:16px}.stop-card p{font-size:13px}.stop-card-top{margin-bottom:15px}.stop-icon{width:31px;height:31px;border-radius:10px}.stop-icon svg{height:15px;width:15px}.stop-status{font-size:12px}.stop-card-bottom{padding-top:18px}.stop-card-bottom>span{font-size:12px}.chapter-footnote{margin-top:16px}.chapter-footnote .text-button{font-size:12px}.site-footer{font-size:12px;line-height:1.6;margin:10px 4px 0;padding:17px 0;gap:15px}.guide-intro{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:23px}.guide-intro h1{font-size:28px}.guide-intro p{font-size:14px}.guide-intro .btn{font-size:14px;padding:10px 14px}.guide-breadcrumb{font-size:13px;gap:9px;margin-bottom:18px}.guide-intro .eyebrow{font-size:12px}.guide-layout{gap:16px}.task-card{padding:21px;border-radius:18px}.task-title h2{font-size:16px}.step{padding:16px 6px;gap:10px}.step-select{font-size:15px}.step-copy small{font-size:14px}.step>input{height:14px;width:14px}.task-actions{gap:12px}.task-actions .btn{font-size:13px;padding:10px}.task-actions>span{font-size:12px}.visual-card{padding:18px;border-radius:18px}.visual-tabs button{font-size:12px;padding:8px 9px}.visual-heading{font-size:12px}.screen-trigger{padding:9px;border-radius:9px}.click-mark{border-width:1.5px}.click-mark b{width:14px;height:14px;font-size:12px;top:-6px}.highlight-key{gap:8px 12px}.highlight-key li{font-size:12px}.visual-card figcaption>p{font-size:13px}.related-card{padding:0 18px}.related-card>summary{font-size:13px}.page-intro h1{font-size:28px}.article-grid,.notes-grid{grid-template-columns:1fr}.library-tools{padding:18px}.library-categories button{font-size:12px;padding:7px 9px}.library-search input{font-size:14px}.support-card{padding:21px}.page-intro p{font-size:14px}.modal{padding:10px}.screenshot-dialog{border-radius:17px}.screenshot-dialog>header{padding:14px 16px;gap:13px;flex-wrap:wrap}.screenshot-dialog h2{font-size:17px}.screenshot-dialog>header>div{margin-left:auto;gap:8px}.screenshot-dialog .small{font-size:12px;min-height:30px;padding:8px}.shot-canvas{padding:16px;max-height:63vh}.modal-caption{padding:0 16px 16px;font-size:14px}.dialog{padding:27px}.celebration{padding:45px 23px}.celebration h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Readability: retain the glass components with comfortable text and spacing. */
body{font-size:16px;line-height:1.6}.app-layout{grid-template-columns:280px minmax(0,1fr);max-width:1760px;gap:24px;padding:20px}.sidebar{top:20px;height:calc(100vh - 40px);padding:27px 17px 20px}.sidebar .brand{color:white}.brand small{font-size:11px;color:#c6d2ed}.institution{margin:28px 10px 24px}.institution .tiny-label{font-size:12px;color:#c1cdeb}.institution strong{font-size:16px;line-height:1.5}.institution>span:last-child{font-size:13px;color:#c6d2ed}.sidebar .nav-link{font-size:15px;color:#d4ddf2;min-height:46px}.sidebar .nav-link.active{color:white;background:#ffffff1e}.sidebar .nav-label{font-size:12px;color:#b8c8e8;margin:23px 12px 13px;letter-spacing:.7px}.chapter-toggle{padding:13px 10px;gap:11px;min-height:65px}.chapter-toggle>span:nth-child(2){font-size:14px;line-height:1.5}.sidebar .chapter-toggle{color:#d8e1f4}.sidebar .chapter-toggle small{font-size:12px;line-height:1.5;color:#bdcce9;margin-top:3px}.sidebar .chapter-dot{font-size:12px;width:26px;height:26px;color:#e7edff}.sidebar .chevron{color:#c3d0ec}.chapter-stops{margin-left:26px;padding-left:8px}.sidebar .stop-nav{font-size:13px;color:#cbd7ee;line-height:1.55;padding:10px 7px;min-height:42px}.sidebar .stop-nav.selected{color:white;background:#ffffff18}.sidebar .stop-dot{border-color:#a4b8dd}.nav-progress>div:first-child{font-size:13px;color:#d1dcf3}.nav-progress .subdued{font-size:12px;color:#c7d5f0;min-height:36px}.nav-progress strong{font-size:14px}.bar{height:5px}.topbar{min-height:76px}.desktop-title{font-size:15px;color:#4d5e79}.onsite-pill{font-size:13px;color:#4d5e79}.content{max-width:1200px;padding:32px 18px 24px}.btn{font-size:15px;min-height:46px;padding:12px 18px}.btn svg{width:17px;height:17px}.small{font-size:14px;min-height:42px}.tiny-label,.eyebrow{font-size:12px;letter-spacing:.65px;color:#536580}.welcome{margin:7px 0 30px}.welcome .eyebrow{font-size:12px;color:#536580}.welcome h1{font-size:36px;letter-spacing:-.8px}.welcome p{font-size:16px;color:#4d5e79;line-height:1.65}.welcome-token{font-size:15px}.welcome-token small{font-size:13px;color:#536580}.chapter-selector{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:26px}.chapter-card{min-height:116px;padding:22px;gap:15px}.chapter-icon{width:43px;height:43px;border-radius:14px}.chapter-icon svg{width:22px;height:22px}.chapter-name small{font-size:12px;color:#536580;letter-spacing:.6px;margin-bottom:6px}.chapter-name strong{font-size:18px;line-height:1.45}.chapter-name>span{font-size:14px;color:#536580;margin-top:7px}.chapter-selected{font-size:19px;right:14px;top:13px}.chapter-feature{padding:32px 34px;gap:28px;background:linear-gradient(120deg,#f9fbfff5,#f3f7ffde);min-height:236px}.feature-copy .eyebrow{font-size:12px;color:#536580}.feature-copy h2{font-size:28px;line-height:1.35}.feature-copy p{font-size:16px;line-height:1.65;color:#4d5e79;max-width:52ch}.feature-actions{flex-wrap:wrap;gap:17px}.feature-actions>span{font-size:14px;color:#536580}.feature-progress{min-width:120px}.feature-progress>span{font-size:13px;text-align:center;color:#4d5e79;line-height:1.5;max-width:150px}.progress-ring{width:112px;height:112px}.progress-ring strong{font-size:32px;color:#2e4771}.progress-ring strong>span{font-size:20px;color:#536580}.progress-ring small{font-size:11px;letter-spacing:.5px;color:#536580}.section-heading{margin:30px 0 20px;align-items:flex-start}.section-heading h2{font-size:23px;line-height:1.4}.section-heading p{font-size:15px;line-height:1.6;color:#4d5e79;max-width:60ch}.count-pill{font-size:13px;color:#4d5e79;background:#ffffffc4;padding:7px 12px}.stop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.stop-card{min-height:225px;padding:25px}.stop-card h3{font-size:20px;font-weight:600;line-height:1.45}.stop-card p{font-size:16px;line-height:1.65;color:#4d5e79}.stop-card-top{margin-bottom:19px}.stop-icon{width:39px;height:39px}.stop-status{font-size:13px;color:#536580}.stop-card-bottom>span{font-size:14px;color:#536580}.stop-card-bottom{padding-top:22px}.stop-card-bottom svg{width:18px;height:18px}.stop-card-bottom>span svg{width:15px;height:15px}.text-button,.chapter-footnote .text-button{font-size:14px;min-height:36px}.site-footer{font-size:12px;color:#536580;line-height:1.6}.guide-breadcrumb{font-size:14px;color:#536580;flex-wrap:wrap}.guide-intro{align-items:center;gap:22px;margin-bottom:27px}.guide-intro .eyebrow{font-size:12px}.guide-intro h1{font-size:34px;line-height:1.25}.guide-intro p{font-size:16px;color:#4d5e79;line-height:1.65}.guide-layout{grid-template-columns:minmax(410px,1fr) minmax(0,1.08fr);gap:24px}.task-card,.visual-card{background:#fffffff0;padding:28px}.task-title .tiny-label{font-size:12px;color:#536580}.task-title h2{font-size:22px;line-height:1.45}.step{padding:20px 10px;gap:14px}.step-copy small{font-size:16px;color:#4d5e79;line-height:1.65;margin-top:9px}.step-select{font-size:17px;line-height:1.5;gap:9px}.step-select strong{font-weight:600}.step-select .step-number{font-size:13px;color:#536580}.step>input{width:19px;height:19px;margin-top:4px}.step.selected{background:#edf3ff}.hint summary,.reflection summary{font-size:15px;color:#415a7b;min-height:50px}.hint p{font-size:16px;color:#4d5e79;line-height:1.65}.reflection label{font-size:15px;color:#4d5e79;line-height:1.65}.reflection textarea{font-size:16px;color:#243757;background:white;line-height:1.65;min-height:125px;padding:15px}.reflection textarea::placeholder{color:#596982}.task-actions{flex-wrap:wrap}.task-actions>span{font-size:13px;color:#536580}.task-actions .btn{font-size:14px;min-height:44px}.quick-reference{font-size:14px;line-height:1.7}.quick-reference td,.quick-reference th{color:#4d5e79}.visual-heading,.visual-heading .text-button{font-size:14px;color:#415a7b}.visual-tabs{flex-wrap:wrap;gap:6px}.visual-tabs button{font-size:14px;line-height:1.5;color:#4d5e79;min-height:42px}.visual-tabs button.selected{color:#124eb8}.highlight-key{gap:12px 17px}.highlight-key li{font-size:13px;color:#4d5e79;line-height:1.5}.highlight-key li>span{width:21px;height:21px;font-size:12px;flex-shrink:0}.visual-card figcaption>p{font-size:15px;color:#4d5e79;line-height:1.65}.related-card{background:#ffffffe8;padding:0 23px}.related-card>summary{font-size:15px;color:#415a7b;padding:21px 0;gap:10px}.related-card>summary>span{font-size:12px;color:#536580}.article-link{font-size:14px;color:#355883;line-height:1.65;padding:15px 0}.related-card .text-button{font-size:14px}.page-intro h1{font-size:34px}.page-intro p{font-size:16px;line-height:1.65}.note-card h3{font-size:20px}.note-card p{font-size:16px;color:#4d5e79;line-height:1.7}.note-card .tiny-label{font-size:12px}.empty-state h2{font-size:24px}.empty-state p{font-size:16px;color:#4d5e79}.library-search input{font-size:16px;line-height:1.6}.library-search input::placeholder{color:#596982}.library-categories button{font-size:14px;color:#4d5e79;min-height:42px}.library-categories button.selected{color:#174b9e}.support-card .tiny-label{font-size:12px}.support-card h3{font-size:18px;line-height:1.55}.support-card p{font-size:16px;line-height:1.65;color:#4d5e79}.library-footer{font-size:14px;color:#355883}.dialog p,.celebration p{font-size:16px;line-height:1.65;color:#4d5e79}.screenshot-dialog h2{font-size:18px}.modal-caption{font-size:15px;color:#4d5e79;line-height:1.65}.icon-button{min-height:38px;min-width:38px}button:disabled{opacity:1;background:#dce4f1;color:#526078;box-shadow:none;border-color:#d3ddec}
@media(max-width:1350px){.guide-layout{grid-template-columns:1fr}.guide-aside{width:100%}.visual-card{padding:28px}.stop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.task-card{padding:28px}}
@media(max-width:1100px){.app-layout{grid-template-columns:252px minmax(0,1fr);padding:16px;gap:18px}.sidebar{top:16px;height:calc(100vh - 32px);padding:25px 12px 18px}.content{padding:28px 8px 20px}.chapter-card{padding:19px 16px;gap:12px}.chapter-name strong{font-size:17px}.chapter-icon{width:37px;height:37px}.chapter-feature{padding:28px}.feature-copy h2{font-size:26px}.stop-card{padding:22px}.topbar{padding:15px 20px}.onsite-pill{display:none}}
@media(max-width:900px){.app-layout{display:block;padding:18px}.sidebar{display:none}.desktop-title{display:none}.mobile-brand{display:flex;align-items:center;gap:9px;font-size:22px}.mobile-nav{display:flex;max-width:100%;padding:6px;gap:8px;margin-top:15px}.mobile-nav button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;min-height:45px;padding:10px;border-radius:10px;color:#4d5e79}.mobile-nav button.selected{background:white;color:#124eb8}.content{padding:28px 8px 20px}.topbar{min-height:72px}.topbar-actions .btn{font-size:14px;min-height:42px}.welcome h1{font-size:34px}.welcome p{font-size:16px}.welcome .eyebrow{font-size:12px}.chapter-name strong{font-size:18px}.chapter-name small{font-size:12px}.chapter-name>span{font-size:14px}.chapter-card{min-height:116px}.feature-copy p{font-size:16px}.feature-copy .eyebrow{font-size:12px}.step-copy small{font-size:16px}.step-select{font-size:17px}.guide-layout{gap:22px}.guide-intro p{font-size:16px}.guide-intro .eyebrow{font-size:12px}.guide-intro h1{font-size:32px}.guide-intro .btn{font-size:15px}.task-card,.visual-card{padding:27px}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{font-size:12px}}
@media(max-width:620px){.app-layout{padding:12px}.topbar{padding:15px 17px;gap:12px}.topbar-actions .btn{font-size:13px;padding:10px 12px}.mobile-brand{font-size:21px}.mobile-nav button{font-size:14px;min-height:44px}.content{padding:26px 4px 16px}.welcome{margin-bottom:24px}.welcome h1{font-size:31px}.welcome p{font-size:16px;max-width:none}.welcome-token{display:none}.chapter-selector{grid-template-columns:1fr;gap:12px;margin-bottom:24px}.chapter-card{min-height:102px;padding:20px;gap:15px}.chapter-icon{width:43px;height:43px}.chapter-name strong{font-size:18px}.chapter-name small{font-size:12px}.chapter-name>span{font-size:14px}.chapter-selected{font-size:19px;right:16px;top:16px}.chapter-feature{padding:26px 22px;gap:22px;align-items:flex-start}.feature-copy{flex:1;min-width:0}.feature-copy h2{font-size:25px;line-height:1.4}.feature-copy p{font-size:16px}.feature-copy .eyebrow{font-size:12px}.feature-actions .btn{font-size:15px;min-height:46px;padding:12px 16px}.feature-progress{min-width:76px;max-width:90px;margin:10px 0 0}.progress-ring{width:80px;height:80px;padding:4px}.progress-ring strong{font-size:27px}.progress-ring strong>span{font-size:16px}.progress-ring small{font-size:10px;letter-spacing:0}.feature-progress>span{font-size:12px;line-height:1.5;max-width:88px}.section-heading{gap:12px;flex-wrap:wrap;margin:28px 0 18px}.section-heading h2{font-size:22px}.section-heading p{font-size:15px;max-width:none;line-height:1.6}.count-pill{font-size:13px}.stop-grid{grid-template-columns:1fr;gap:15px}.stop-card{min-height:210px;padding:24px}.stop-card h3{font-size:20px}.stop-card p{font-size:16px}.stop-status{font-size:13px}.stop-card-bottom>span{font-size:14px}.chapter-footnote .text-button{font-size:14px}.site-footer{font-size:12px;flex-wrap:wrap;gap:8px}.guide-breadcrumb{font-size:13px;gap:10px}.guide-intro{align-items:flex-start;gap:19px}.guide-intro h1{font-size:30px}.guide-intro p{font-size:16px}.guide-intro .eyebrow{font-size:12px}.guide-intro .btn{font-size:15px}.task-card{padding:23px 19px}.task-title .tiny-label{font-size:12px}.task-title h2{font-size:21px}.step{padding:20px 7px;gap:12px}.step-select{font-size:17px;line-height:1.5}.step-copy small{font-size:16px;line-height:1.65}.step>input{height:20px;width:20px}.task-actions{gap:15px}.task-actions>span{font-size:13px}.task-actions .btn{font-size:14px}.visual-card{padding:22px 18px}.visual-tabs button{font-size:14px}.visual-heading,.visual-heading .text-button{font-size:14px}.highlight-key li{font-size:13px}.visual-card figcaption>p{font-size:15px}.related-card{padding:0 20px}.related-card>summary{font-size:15px;flex-wrap:wrap}.related-card>summary>span{font-size:12px}.page-intro h1{font-size:30px}.page-intro p{font-size:16px}.article-grid,.notes-grid{grid-template-columns:1fr}.library-tools{padding:21px}.library-categories button{font-size:14px;min-height:42px}.library-search input{font-size:16px}.support-card{padding:24px}.support-card h3{font-size:18px}.support-card p{font-size:16px}.modal-caption{font-size:15px}.screenshot-dialog h2{font-size:17px}.screenshot-dialog .small{font-size:13px;min-height:40px;padding:9px}.screenshot-dialog>header>div{flex-wrap:wrap;gap:10px}.screenshot-dialog>header{padding:17px}.shot-canvas{max-height:55vh}.celebration h1{font-size:28px}}
@media(max-width:420px){.chapter-feature{flex-direction:column;gap:22px}.feature-progress{flex-direction:row;max-width:none;gap:18px;margin:0}.feature-progress>span{font-size:13px;max-width:160px;text-align:left}.progress-ring{flex-shrink:0}.brand-symbol{height:36px;width:36px}.task-actions .btn{width:100%}.task-actions>span{font-size:14px}.topbar-actions .btn{font-size:12px;gap:7px;padding:10px}.mobile-brand{font-size:20px}}
.sidebar .institution strong{color:#f4f7ff}.sidebar .nav-progress strong{color:#edf3ff}.sidebar .chapter-toggle.selected .chapter-dot{background:#315fbc;border-color:#8faee8;color:white}

/* Temporary descriptive label. */
.brand{font-size:21px;letter-spacing:-.3px;line-height:1.35}.mobile-brand{font-size:20px;letter-spacing:-.3px}@media(max-width:420px){.mobile-brand{font-size:18px}}

/* ============================================================
   Apple-style glass morphism theme — final layer, overrides all.
   Vivid ambient background + frosted, saturated, translucent panels.
   ============================================================ */
::selection{background:#2f7cf63d}
body{
  background:
    radial-gradient(ellipse 55% 45% at 10% 6%,#79c4ff59,transparent 62%),
    radial-gradient(ellipse 50% 42% at 88% 10%,#b48bff4d,transparent 62%),
    radial-gradient(ellipse 60% 50% at 80% 90%,#ff9fc047,transparent 64%),
    radial-gradient(ellipse 48% 40% at 6% 94%,#74eccf4a,transparent 60%),
    linear-gradient(165deg,#eaf1fd 0%,#f1edfb 52%,#ecf6f4 100%);
  background-attachment:fixed;
}
.glass{
  background:linear-gradient(135deg,#ffffff9e,#ffffff4d);
  backdrop-filter:blur(28px) saturate(180%);
  border:1px solid #ffffffb3;
  box-shadow:0 24px 55px -22px #23376e45,0 2px 10px #23376e0d,inset 0 1px 0 #ffffffe6,inset 0 -1px 0 #ffffff38;
}
.sidebar{
  background:linear-gradient(160deg,#1a285696,#0d1749a8);
  backdrop-filter:blur(30px) saturate(170%);
  border:1px solid #ffffff26;
  box-shadow:0 26px 60px -22px #10204fcc,inset 0 1px 0 #ffffff26,inset 0 -1px 0 #ffffff0d;
}
.topbar,.mobile-nav{background:linear-gradient(135deg,#ffffffa3,#ffffff59)}
.btn{border-radius:13px;transition:background .2s,box-shadow .2s,transform .15s}
.btn.primary{
  background:linear-gradient(135deg,#377cf5,#1e55d5);
  border:1px solid #ffffff40;
  box-shadow:0 10px 22px -8px #1e55d573,inset 0 1px 0 #ffffff59;
}
.btn.primary:not(:disabled):hover{background:linear-gradient(135deg,#4489ff,#2257e2);transform:translateY(-1px);box-shadow:0 14px 26px -8px #1e55d58c,inset 0 1px 0 #ffffff66}
.btn.primary:disabled{background:#ffffff59;color:#526078;box-shadow:inset 0 1px 0 #ffffffcc;border-color:#ffffffb3}
.btn.secondary{
  background:#ffffff73;
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid #ffffffb8;
  color:#31456b;
  box-shadow:0 3px 10px #23376e14,inset 0 1px 0 #ffffffe6;
}
.btn.secondary:hover{background:#ffffffa8;box-shadow:0 6px 16px #23376e1f,inset 0 1px 0 #ffffff}
.icon-button{background:#ffffff80;backdrop-filter:blur(12px);border:1px solid #ffffffa3;color:#5b6f95;box-shadow:inset 0 1px 0 #ffffffd9}
.chapter-card{transition:transform .2s,box-shadow .2s,border-color .2s}
.chapter-card:hover{transform:translateY(-3px);border-color:#ffffffe6;box-shadow:0 28px 55px -20px #23376e52,inset 0 1px 0 #ffffff}
.chapter-card.selected{background:linear-gradient(135deg,#ffffffd9,#ffffff9e);border-color:#c9d9fb;box-shadow:0 26px 50px -20px #2c4c9c3d,inset 0 1px 0 #ffffff}
.stop-card{transition:transform .2s,box-shadow .2s,border-color .2s}
.stop-card:hover{transform:translateY(-4px);border-color:#ffffffe6;box-shadow:0 30px 60px -22px #23376e59,inset 0 1px 0 #ffffff}
.welcome-token{background:linear-gradient(135deg,#ffffffa8,#ffffff66)}
.chapter-feature{background:linear-gradient(120deg,#ffffffb0,#ffffff5e)}
.progress-ring{background:conic-gradient(#4c86f2 var(--progress),#dfe7f533 var(--progress));box-shadow:0 0 0 7px #ffffff59,0 10px 24px -10px #23376e33}
.progress-ring>div{background:#ffffffc4}
.count-pill{background:#ffffff8c;backdrop-filter:blur(10px);border:1px solid #ffffffb3;box-shadow:inset 0 1px 0 #ffffffd9}
.task-card,.visual-card{background:linear-gradient(135deg,#ffffffa6,#ffffff59)}
.related-card{background:linear-gradient(135deg,#ffffff9e,#ffffff52)}
.note-card,.support-card,.library-tools,.empty-state,.celebration{background:linear-gradient(135deg,#ffffffa1,#ffffff57)}
.step.selected{background:#ffffff66}
.library-search{background:#ffffff73;backdrop-filter:blur(12px);border:1px solid #ffffffb3;box-shadow:inset 0 1px 0 #ffffffd9}
.library-search:focus-within{outline:2px solid #6f9ff080;outline-offset:1px}
.reflection textarea{background:#ffffffa6;backdrop-filter:blur(10px);border:1px solid #ffffffb3;box-shadow:inset 0 1px 3px #23376e14}
.library-categories button{background:#ffffff66;border:1px solid #ffffffb3;backdrop-filter:blur(8px)}
.library-categories button.selected{background:#ffffffd9;border-color:#b9cdf4;color:#1c4dae;box-shadow:0 3px 10px #23376e1a,inset 0 1px 0 #ffffff}
.visual-tabs{background:#5a6ea024;border:1px solid #ffffff8c;backdrop-filter:blur(10px);border-radius:11px;padding:3px}
.visual-tabs button{border-radius:8px;color:#45577b}
.visual-tabs button.selected{background:#ffffffd9;color:#1549b3;box-shadow:0 3px 8px #23376e1f,inset 0 1px 0 #ffffff}
.screen-trigger{background:#ffffff80;border:1px solid #ffffffb3;backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 #ffffffd9}
.screen-trigger:hover{background:#ffffffb3}
.dialog{background:linear-gradient(135deg,#ffffffdb,#ffffff9e);backdrop-filter:blur(30px) saturate(180%);border:1px solid #ffffffcc;box-shadow:0 30px 80px -24px #10204fa6,inset 0 1px 0 #ffffff}
.modal{background:#16234a66;backdrop-filter:blur(18px) saturate(140%)}
.screenshot-dialog{background:linear-gradient(135deg,#ffffffd9,#ffffff99);backdrop-filter:blur(30px) saturate(180%);border:1px solid #ffffffcc;box-shadow:0 30px 90px -24px #10204fb3,inset 0 1px 0 #ffffff}
.screenshot-dialog .icon-button{background:#ffffff8c}
#toast{background:#182550cc;backdrop-filter:blur(20px) saturate(160%);border:1px solid #ffffff2e;color:#eef3ff;box-shadow:0 16px 40px -12px #10204f80,inset 0 1px 0 #ffffff2e}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#23376e2e;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#23376e52;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   Liquid glass refinement — iOS 26-style material layered on the
   glass morphism theme above: more translucent, glossier, deeper
   blur, stronger color bleed.
   ============================================================ */
@keyframes liquid-drift{
  0%,100%{background-position:0% 0%,100% 0%,82% 100%,2% 92%,0 0}
  50%{background-position:7% 4%,93% 6%,88% 94%,5% 85%,0 0}
}
body{
  background:
    radial-gradient(ellipse 60% 48% at 8% 4%,#6cbaff77,transparent 62%),
    radial-gradient(ellipse 54% 44% at 92% 8%,#a97fff66,transparent 62%),
    radial-gradient(ellipse 62% 52% at 82% 94%,#ff8fbd66,transparent 64%),
    radial-gradient(ellipse 50% 42% at 4% 96%,#5ee9c566,transparent 60%),
    linear-gradient(165deg,#e6efff 0%,#efe9fc 52%,#e8f6f2 100%);
  background-attachment:fixed;
  animation:liquid-drift 26s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){body{animation:none}}
.glass{
  background:linear-gradient(115deg,#ffffff8c 0%,#ffffff2e 30%,#ffffff45 62%,#ffffff7d 100%);
  backdrop-filter:blur(36px) saturate(200%);
  border:1px solid #ffffffcc;
  box-shadow:
    0 28px 60px -24px #23376e4d,
    0 4px 14px #23376e0f,
    inset 1.5px 1.5px 1px #ffffffd9,
    inset -1px -1px 2px #ffffff59;
}
.sidebar{
  background:linear-gradient(150deg,#1c2c60a6,#0c1547b3 55%,#132050a6);
  backdrop-filter:blur(40px) saturate(180%);
  border:1px solid #ffffff2e;
  box-shadow:0 30px 70px -24px #0d1b45d9,inset 2px 2px 2px #ffffff2e,inset -1px -1px 2px #ffffff1a;
}
.topbar,.mobile-nav{background:linear-gradient(115deg,#ffffffa1,#ffffff4d 45%,#ffffff73)}
.btn.primary{
  background:linear-gradient(180deg,#4d90ff 0%,#2c66e8 50%,#2357d6 100%);
  box-shadow:0 12px 26px -8px #1e55d58c,0 2px 5px #1e55d54d,inset 1px 1px 1px #ffffffb3,inset -1px -2px 3px #0d2f8a4d;
}
.btn.primary:not(:disabled):hover{background:linear-gradient(180deg,#5b9aff 0%,#3770ec 50%,#2a5ee0 100%);box-shadow:0 16px 30px -8px #1e55d599,0 2px 6px #1e55d559,inset 1px 1px 1px #ffffffcc,inset -1px -2px 3px #0d2f8a4d}
.btn.primary:disabled{background:linear-gradient(180deg,#ffffffa8,#ffffff73);color:#526078;box-shadow:inset 1px 1px 1px #ffffffe6;border-color:#ffffffcc}
.btn.secondary{background:linear-gradient(115deg,#ffffffa3,#ffffff59 55%,#ffffff8c)}
.icon-button{background:linear-gradient(115deg,#ffffffa1,#ffffff66)}
.chapter-card.selected{
  background:linear-gradient(115deg,#ffffffe0 0%,#ffffff7d 35%,#ffffffa6 70%,#ffffffd1 100%);
  border-color:#d3e0fc;
  box-shadow:0 26px 50px -20px #2c4c9c45,inset 1.5px 1.5px 1px #ffffff,inset -1px -1px 2px #ffffffa6;
}
.progress-ring{background:conic-gradient(#4c86f2 var(--progress),#e8eefc59 var(--progress));box-shadow:0 0 0 7px #ffffff66,0 12px 28px -10px #23376e3d}
.progress-ring>div{background:#ffffffd1}
.welcome-token{background:linear-gradient(115deg,#ffffffad,#ffffff59 50%,#ffffff80)}
.chapter-feature{background:linear-gradient(115deg,#ffffffb8,#ffffff59 40%,#ffffff7d 75%,#ffffffa3)}
.count-pill{background:linear-gradient(115deg,#ffffffa1,#ffffff66)}
.library-search{background:linear-gradient(115deg,#ffffffa1,#ffffff66 60%,#ffffff8c)}
.library-categories button{background:linear-gradient(115deg,#ffffff8c,#ffffff4d)}
.library-categories button.selected{background:linear-gradient(180deg,#ffffffe0,#ffffffa6);border-color:#c4d6f7;box-shadow:0 4px 12px #23376e24,inset 1px 1px 1px #ffffff}
.visual-tabs{background:#5a6ea02e}
.visual-tabs button.selected{background:linear-gradient(180deg,#ffffffe0,#ffffffa6);box-shadow:0 4px 10px #23376e29,inset 1px 1px 1px #ffffff}
.screen-trigger{background:linear-gradient(115deg,#ffffffa1,#ffffff66)}
.screen-trigger:hover{background:linear-gradient(115deg,#ffffffcc,#ffffff8c)}
.step.selected{background:linear-gradient(115deg,#ffffff8c,#ffffff40)}
.reflection textarea{background:linear-gradient(115deg,#ffffffb3,#ffffff7d 60%,#ffffffa1);border:1px solid #ffffffcc;box-shadow:inset 1px 2px 4px #23376e1f,inset -1px -1px 1px #ffffff59}
.task-card,.visual-card,.note-card,.support-card,.library-tools,.empty-state,.celebration,.related-card{background:linear-gradient(115deg,#ffffffad,#ffffff4d 32%,#ffffff66 66%,#ffffff91)}
.dialog{background:linear-gradient(115deg,#ffffffe0,#ffffffa1 40%,#ffffffb8 70%,#ffffffd9);backdrop-filter:blur(40px) saturate(200%);box-shadow:0 34px 90px -24px #0d1b45b3,inset 1.5px 1.5px 1px #ffffff,inset -1px -1px 2px #ffffff8c}
.screenshot-dialog{background:linear-gradient(115deg,#ffffffdb,#ffffff99 40%,#ffffffb3 70%,#ffffffd6);backdrop-filter:blur(40px) saturate(200%);box-shadow:0 34px 90px -24px #0d1b45bf,inset 1.5px 1.5px 1px #ffffff,inset -1px -1px 2px #ffffff8c}
.modal{background:#16234a5c;backdrop-filter:blur(24px) saturate(160%)}
#toast{background:#182550bf;backdrop-filter:blur(24px) saturate(180%);box-shadow:0 18px 44px -12px #0d1b458c,inset 1.5px 1.5px 1px #ffffff40}
/* Connected step navigation, using the existing liquid-glass material. */
.step{transition:box-shadow .18s ease,background .18s ease;border-radius:12px}
.step.selected{box-shadow:inset 3px 0 0 #3778e6,0 5px 16px -12px #2454aa80}
.step-select{display:block;text-align:left;width:100%;padding:0;cursor:pointer}
.step-heading{display:flex;align-items:baseline;gap:9px;width:100%;line-height:1.5}
.step-heading strong{flex:1;min-width:0}
.step-badge{flex-shrink:0;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:0;padding:3px 8px;border-radius:20px;background:#ffffffb8;border:1px solid #ffffffd9;color:#2455a6;box-shadow:inset 0 1px 0 white}
.step-copy small{display:block;margin-top:9px}
.visual-heading{align-items:flex-start;gap:18px;margin-bottom:17px}
.visual-heading-copy{flex:1;min-width:0}
.visual-heading-copy .eyebrow{font-size:12px;letter-spacing:.7px;color:#536580;margin-bottom:7px}
.visual-heading-copy h2{font-size:20px;line-height:1.45;letter-spacing:-.25px;font-weight:600;color:#1b2854}
.visual-heading>.text-button{flex-shrink:0;margin-top:1px}
.step-track{display:flex;gap:7px;margin:0 0 22px}
.step-track>span{height:4px;border-radius:10px;flex:1;background:#697f9c26;box-shadow:inset 0 1px 0 #ffffff66}
.step-track>.is-done{background:#408a74b3}
.step-track>.is-current{background:#3778e6;box-shadow:0 2px 8px #3778e62e}
.step-flow-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px;padding-top:21px;border-top:1px solid #ffffffc7}
.next-step-copy{flex:1;min-width:150px}
.next-step-copy>span{font-size:11px;letter-spacing:.7px;font-weight:600;color:#536580;line-height:1.5}
.next-step-copy>p{font-size:15px;line-height:1.5;color:#2e4262;font-weight:500;margin-top:5px}
.step-flow-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.step-flow-actions .btn{font-size:14px;min-height:44px;padding:11px 14px;white-space:nowrap}
.step-back{width:42px;height:44px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(115deg,#ffffffa1,#ffffff66);border:1px solid #ffffffc7;color:#355883;box-shadow:inset 1px 1px 0 #ffffffd9}
.step-back:hover{background:#ffffffcc}.step-back svg{width:18px;height:18px}
.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}
@media(max-width:620px){.step-heading{gap:7px}.step-badge{font-size:12px;padding:2px 6px}.visual-heading-copy h2{font-size:19px}.visual-heading{gap:12px}.visual-heading>.text-button{font-size:13px}.step-flow-actions{width:100%}.step-flow-actions>.btn{flex:1;font-size:15px}.next-step-copy>span{font-size:12px}.step-flow-footer{gap:17px}.step-back{width:44px;flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.step{transition:none}}
.step-content{min-width:0;flex:1}.step-screenshot-link{display:none}.visual-card{scroll-margin-top:18px}
@media(max-width:1350px){.step-screenshot-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;line-height:1.5;color:#2455a6;padding:9px 0 3px;min-height:36px}.step-screenshot-link svg{width:14px;height:14px;transform:rotate(90deg)}}

/* Module-specific SVG artwork: generous spacing, soft secondary fills. */
.brand-context{margin:18px 10px 28px;font-size:14px;line-height:1.5;color:#e1eaff}
.chapter-icon{width:44px;height:44px;border-radius:14px}
.chapter-icon .app-icon{width:29px;height:29px}
.stop-icon{width:44px;height:44px;border-radius:14px}
.stop-icon .app-icon{width:28px;height:28px}
.chapter-card{gap:12px}
@media(max-width:620px){.chapter-icon{width:40px;height:40px;border-radius:12px}.chapter-icon .app-icon{width:27px;height:27px}}

/* Six chapters retain the existing cards and glass material. */
@media(min-width:1401px){.chapter-selector{grid-template-columns:repeat(3,minmax(0,1fr))}}
.indigo{background:#e5eaff;color:#4b61b5}
.rose{background:#f7e5ee;color:#a14f7b}
.visual-source{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1.5;color:#405b84;margin-top:12px;text-decoration:underline;text-underline-offset:3px}
.visual-source svg{width:12px;height:12px}

/* Chapter context: restrained ambient color, clear headings and selection. */
body{
  --chapter-accent:#315eaa;
  --chapter-soft:#e0ebff;
  --chapter-wash:#8fc8ff4d;
  --chapter-secondary:#b5c6ef38;
  --chapter-paper:#f1f5fb;
  background:
    radial-gradient(ellipse 78% 65% at 96% 0%,var(--chapter-wash),transparent 70%),
    radial-gradient(ellipse 80% 75% at 3% 100%,var(--chapter-secondary),transparent 72%),
    var(--chapter-paper);
  background-attachment:fixed;
  animation:none;
}
body[data-chapter-theme="personalize"]{--chapter-accent:#7450a6;--chapter-soft:#eadff9;--chapter-wash:#c5a1f54d;--chapter-secondary:#d9b5dc38;--chapter-paper:#f4f2f9}
body[data-chapter-theme="connect"]{--chapter-accent:#216f65;--chapter-soft:#d5eee6;--chapter-wash:#80d5bf4d;--chapter-secondary:#bfd8b538;--chapter-paper:#f0f6f3}
body[data-chapter-theme="academic-scheduling"]{--chapter-accent:#8d5d21;--chapter-soft:#f3e5cc;--chapter-wash:#efc1844d;--chapter-secondary:#e7cfa838;--chapter-paper:#f9f6f0}
body[data-chapter-theme="demand-analysis"]{--chapter-accent:#4e5caf;--chapter-soft:#e0e3fb;--chapter-wash:#a1adf54d;--chapter-secondary:#bdb2e340;--chapter-paper:#f2f3fa}
body[data-chapter-theme="registration-monitoring"]{--chapter-accent:#954b73;--chapter-soft:#f2dce8;--chapter-wash:#eaa4c64d;--chapter-secondary:#c6b6df38;--chapter-paper:#f8f3f7}
body[data-chapter-theme="neutral"]{--chapter-wash:#c5c9ee38;--chapter-secondary:#c4ddd638;--chapter-paper:#f1f4fa}
.topbar-title{min-width:0;flex:1}
.chapter-location,.page-location{display:flex;align-items:center;gap:12px;min-width:0}
.location-icon{color:var(--chapter-accent);flex-shrink:0}
.location-icon svg{width:30px;height:30px}
.chapter-location>div{min-width:0}
.chapter-location small{display:block;font-size:11px;line-height:1.4;letter-spacing:.5px;color:#50607a;margin-bottom:3px}
.chapter-location strong,.page-location strong{display:block;color:#263453;font-size:16px;font-weight:600;line-height:1.4}
.page-location svg{width:24px;height:24px;color:#546989}
.chapter-intro{margin:5px 0 27px;gap:25px}
.chapter-intro>div{max-width:790px;min-width:0}
.chapter-intro .eyebrow{color:var(--chapter-accent);font-size:12px;letter-spacing:.8px}
.chapter-intro h1{font-size:36px;line-height:1.2;letter-spacing:-1px;margin:9px 0 10px}
.chapter-intro p{font-size:16px;line-height:1.7;color:#40516e}
.chapter-meta{display:flex;align-items:center;gap:16px;color:#4d5f79;margin-top:13px;font-size:13px;line-height:1.5}
.chapter-meta>span+span{border-left:1px solid #62738c40;padding-left:16px}
.chapter-emblem{flex-shrink:0;color:var(--chapter-accent);padding:5px 15px;opacity:.74}
.chapter-emblem svg{width:65px;height:65px;stroke-width:1.4}
.chapter-card.selected{
  border-color:#fffffff2;
  background:linear-gradient(115deg,#fffffff2,#ffffffb8 48%,#ffffffe0);
  box-shadow:0 12px 28px -16px #23376e42,0 0 0 1px #344c7014,inset 1px 1px 1px #fff;
}
.chapter-card.selected .chapter-name strong{color:#17264a}
.chapter-selected{display:grid;place-items:center;min-height:20px;right:11px;top:10px;line-height:1.4;font-size:11px;letter-spacing:.1px}
.chapter-selected svg{width:15px;height:15px}
.chapter-card.selected .chapter-selected{padding:2px 7px;border-radius:9px;color:var(--chapter-accent);background:#ffffffc7;font-weight:600}
.sidebar .chapter-toggle.selected{background:linear-gradient(115deg,#ffffff24,#ffffff14);box-shadow:inset 0 1px 0 #ffffff26}
.sidebar .chapter-toggle.selected .chapter-dot{background:#ffffffde;border-color:#ffffffb3;color:#253958;font-weight:700}
.sidebar .stop-nav.selected{box-shadow:inset 0 1px 0 #ffffff1a}
.chapter-feature{background:linear-gradient(115deg,#ffffffde,#ffffffa6 50%,#ffffffc7);border:1px solid #ffffffd9}
.feature-copy .eyebrow{color:var(--chapter-accent)}
.progress-ring{background:conic-gradient(var(--chapter-accent) var(--progress),#e8eefc80 var(--progress))}
.amber{color:#8d5d21}
.mobile-chapter-picker{display:none}
.site-footer{align-items:center;flex-wrap:wrap;gap:10px 25px;line-height:1.6;color:#4a5a74}
.storage-note{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:#43536d}
.storage-details-link{padding:3px 0;color:#354f7b;font-size:13px;text-decoration:underline;text-underline-offset:3px;line-height:1.5}
.storage-details-link:hover{color:#174ca5}
.storage-modal .dialog{max-width:460px}
.storage-modal h2{font-size:23px;letter-spacing:-.4px;line-height:1.3}
.storage-modal .dialog p{font-size:16px;line-height:1.7;margin:15px 0 0;color:#354764}
.storage-modal .dialog-actions{margin-top:24px}
@media(max-width:900px){.chapter-intro h1{font-size:33px}.chapter-emblem svg{width:53px;height:53px}.chapter-emblem{padding-right:5px}}
@media(max-width:620px){
  .topbar{padding:13px 15px;gap:10px;align-items:center;min-height:79px}
  .topbar-actions{flex-shrink:0}
  .topbar-actions .btn{font-size:12px;padding:9px 10px;gap:7px}
  .chapter-location{gap:8px}
  .location-icon svg{width:24px;height:24px}
  .chapter-location small{font-size:10px;letter-spacing:.1px;margin-bottom:3px}
  .chapter-location strong{font-size:13px;line-height:1.3}
  .chapter-intro{align-items:flex-start;gap:14px;margin-bottom:22px}
  .chapter-intro h1{font-size:30px;line-height:1.2;letter-spacing:-.7px;margin:8px 0 10px}
  .chapter-intro p{font-size:16px;line-height:1.6;max-width:none}
  .chapter-emblem{padding:27px 0 0;opacity:.64}
  .chapter-emblem svg{width:39px;height:39px}
  .chapter-meta{margin-top:12px;font-size:13px}
  .chapter-selector{display:none}
  .mobile-chapter-picker{display:flex;flex-direction:column;gap:5px;padding:12px 16px;margin-bottom:22px;border-radius:16px;border:1px solid #ffffffd9}
  .mobile-chapter-picker label{font-size:11px;letter-spacing:.4px;color:#4b5d79;line-height:1.4}
  .mobile-chapter-picker select{font:inherit;font-size:16px;line-height:1.5;color:#233455;font-weight:500;min-height:36px;width:100%;border:0;border-radius:4px;background:transparent;padding:3px 0;cursor:pointer}
  .mobile-chapter-picker select:focus-visible{outline:3px solid #77a7f5;outline-offset:3px}
  .site-footer{align-items:flex-start;flex-direction:column;margin-top:17px;gap:5px}
  .storage-note{font-size:12px;gap:1px 7px}
  .storage-details-link{font-size:12px;min-height:32px;display:inline-flex;align-items:center}
}

/* Light-catching navigation; quieter, denser material behind reading content. */
.glass{backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);box-shadow:0 18px 42px -24px #23376e40,0 2px 8px #23376e08,inset 1px 1px 1px #ffffffd9,inset -1px -1px 1px #ffffff59}
.sidebar{background:linear-gradient(150deg,#1c2c60d1,#0c1547de 55%,#132050d1);backdrop-filter:blur(36px) saturate(140%);-webkit-backdrop-filter:blur(36px) saturate(140%)}
.chapter-card{background:linear-gradient(115deg,#ffffff99,#ffffff59 48%,#ffffff8c)}
.chapter-card:hover,.stop-card:hover{box-shadow:0 20px 40px -22px #23376e3d,inset 0 1px 0 #fff}
.stop-card,.task-card,.visual-card,.note-card,.support-card,.library-tools,.empty-state,.celebration,.related-card{background:linear-gradient(115deg,#ffffffde,#ffffffb8 48%,#ffffffd1)}
.feature-copy p,.stop-card p,.step-copy small,.guide-intro p,.note-card p,.support-card p{color:#40516b}
.chapter-name>span,.chapter-name small,.stop-status,.stop-card-bottom>span{color:#4b5b74}
.feature-copy .eyebrow{color:#4b5b74}
.btn.primary{background:linear-gradient(180deg,#2a65d5,#2057c5 50%,#194bb8);box-shadow:0 8px 18px -10px #1e55d56b,inset 0 1px 0 #ffffff80,inset 0 -1px 1px #12398940}
.btn.primary:not(:disabled):hover{background:linear-gradient(180deg,#2d6bdc,#245cce 50%,#1d50c0);box-shadow:0 10px 22px -10px #1e55d573,inset 0 1px 0 #ffffff99}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .glass,.chapter-card,.chapter-card.selected,.chapter-feature,.dialog,.screenshot-dialog{background:#f8fafd;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#c9d3e2}
  .sidebar{background:#182652;border-color:#46567b}
  .sidebar .chapter-toggle.selected{background:#34446d}
  .sidebar .stop-nav.selected{background:#34446d}
  .btn.secondary,.reflection textarea,.step.selected{background:#fff;border-color:#becbdd}
}

/* Keep local scroll regions independent of the page smoothing. */
.sidebar>nav,.shot-canvas,.reflection textarea,.visual-tabs{overscroll-behavior:contain}
html.lenis{scroll-behavior:auto}

/* Content stays steady on repeat visits; ambient colors and selection gliders still blend. */

/* Typed color values let the ambient gradients blend between chapter palettes. */
@property --chapter-wash{syntax:"<color>";inherits:true;initial-value:#8fc8ff4d}
@property --chapter-secondary{syntax:"<color>";inherits:true;initial-value:#b5c6ef38}
@property --chapter-paper{syntax:"<color>";inherits:true;initial-value:#f1f5fb}
@media(prefers-reduced-motion:no-preference){
  body{transition:--chapter-wash .48s ease,--chapter-secondary .48s ease,--chapter-paper .48s ease}
  .screenshot-modal{animation:screenshot-scrim-enter .26s ease-out both}
}
@keyframes screenshot-scrim-enter{from{background-color:#16234a00}to{background-color:#16234a5c}}
.screenshot-dialog{max-width:100%;max-height:94dvh}
.screenshot-dialog>header,.screenshot-dialog>.modal-caption{flex-shrink:0}
.screenshot-dialog>header h2{min-width:0}
.shot-canvas{flex:1 1 auto}
@media(max-width:620px){
  .screenshot-modal{padding:12px}
  .screenshot-dialog>header{flex-wrap:wrap;gap:12px}
  .screenshot-dialog>header>div{width:100%;justify-content:flex-end;gap:8px}
  .screenshot-dialog .small{padding:8px 10px;font-size:12px}
  .screenshot-dialog .shot-canvas{padding:15px}
  .screenshot-dialog .modal-caption{padding:0 15px 18px;font-size:14px}
}

/* Shared glass selection surfaces; labels and checkboxes remain stationary. */
.sidebar>nav,.mobile-nav,.task-card,.step-track,.visual-tabs{position:relative;isolation:isolate}
.selection-glider{position:absolute;pointer-events:none;z-index:0;display:block;margin:0;border-radius:12px;box-sizing:border-box}
.sidebar>nav>.selection-glider{background:linear-gradient(115deg,#ffffff24,#ffffff14);box-shadow:inset 0 1px 0 #ffffff26,inset 0 -1px 0 #ffffff08}
.sidebar>nav>.selection-glider--guide{border-radius:8px;background:#ffffff18;box-shadow:inset 0 1px 0 #ffffff1a}
.sidebar>nav>.selection-glider--page{background:#ffffff1e}
.sidebar>nav>:not(.selection-glider),.mobile-nav>button,.task-card>:not(.selection-glider),.visual-tabs>button{position:relative;z-index:1}
.sidebar>nav.has-selection-gliders .chapter-toggle.selected,
.sidebar>nav.has-selection-gliders .stop-nav.selected,
.sidebar>nav.has-selection-gliders .nav-link.active{background:transparent;box-shadow:none}
.task-card>.selection-glider--step{border-left:3px solid #3778e6;background:linear-gradient(115deg,#ffffff8c,#ffffff40);box-shadow:0 5px 16px -12px #2454aa80}
.task-card.has-selection-gliders .step.selected{background:transparent;box-shadow:none}
.mobile-nav>.selection-glider--mobile{background:linear-gradient(115deg,#fffffff2,#ffffffb8);border:1px solid #ffffffd9;box-shadow:0 3px 10px #23376e12,inset 0 1px 0 #fff;border-radius:10px}
.mobile-nav.has-selection-gliders button.selected{background:transparent;box-shadow:none}
.step-track>.selection-glider--progress{flex:none;background:#3778e6;box-shadow:0 2px 8px #3778e62e;border-radius:10px}
.step-track.has-selection-gliders>.is-current{background:transparent;box-shadow:none}
.visual-tabs>.selection-glider--visual{background:linear-gradient(180deg,#ffffffe0,#ffffffa6);box-shadow:0 4px 10px #23376e29,inset 1px 1px 1px #fff;border-radius:8px}
.visual-tabs.has-selection-gliders button.selected{background:transparent;box-shadow:none}
@media(prefers-contrast:more){
  .sidebar>nav>.selection-glider{background:#34446d;box-shadow:inset 0 0 0 1px #9eb1d6}
  .task-card>.selection-glider--step{background:#edf3fd;box-shadow:inset 0 0 0 1px #bccce4}
}

/* Chapter cards share a selection layer above their material and below their labels. */
.chapter-selector{position:relative;isolation:isolate}
.chapter-selector.has-selection-gliders .chapter-card{z-index:auto;transform:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.chapter-selector.has-selection-gliders .chapter-card.selected{background:linear-gradient(115deg,#ffffff99,#ffffff59 48%,#ffffff8c);border-color:#ffffffcc;box-shadow:0 18px 42px -24px #23376e40,0 2px 8px #23376e08,inset 1px 1px 1px #ffffffd9,inset -1px -1px 1px #ffffff59}
.chapter-selector .chapter-icon,.chapter-selector .chapter-name{position:relative;z-index:2}
.chapter-selector .chapter-selected{z-index:2}
.chapter-selector>.selection-glider--chapter-card{z-index:1;border-radius:17px;border:1px solid #fffffff2;background:linear-gradient(115deg,#ffffffb8,#ffffff80 48%,#ffffffa6);box-shadow:0 12px 28px -16px #23376e42,0 0 0 1px #344c7014,inset 1px 1px 1px #fff}
@media(prefers-contrast:more){.chapter-selector>.selection-glider--chapter-card{background:#f8fafd;border-color:#8397b6}}

@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .chapter-selector.has-selection-gliders .chapter-card,
  .chapter-selector.has-selection-gliders .chapter-card.selected{background:#f0f3f9}
  .chapter-selector>.selection-glider--chapter-card{background:#fff;border-color:#8397b6}
  .mobile-nav>.selection-glider--mobile,.visual-tabs>.selection-glider--visual{background:#fff}
  .task-card>.selection-glider--step{background:#edf3fd}
}

/* Guides overview and a compact chapter switcher. */
.overview-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}
.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:18px}
.overview-chapter-card{text-align:left;border-radius:20px;padding:26px;display:flex;flex-direction:column;min-height:285px;background:linear-gradient(115deg,#ffffffde,#ffffffb8 48%,#ffffffd1);transition:box-shadow .2s,border-color .2s}
.overview-chapter-card:hover{border-color:#fff;box-shadow:0 20px 40px -22px #23376e55,inset 0 1px 0 #fff}
.overview-card-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.overview-chapter-card h2{font-size:22px;line-height:1.35;letter-spacing:-.4px;margin-bottom:12px}
.overview-chapter-card>p{font-size:16px;line-height:1.65;color:#40516b;margin-bottom:24px}
.overview-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#4b5b74;font-size:13px;margin-top:auto}
.overview-card-footer svg{width:18px;height:18px}
.overview-progress{padding-top:18px;margin-top:18px;border-top:1px solid #71819b20;font-size:12px;color:#4b5b74}
.overview-progress>i{display:block;height:3px;border-radius:8px;background:#6c7e9d1f;margin-top:9px;overflow:hidden}
.overview-progress b{display:block;height:100%;background:#5475b0;border-radius:inherit}
.chapter-navigation{margin-bottom:26px}
.all-guides-link{margin-bottom:12px;color:#405575;font-size:13px;gap:7px}
.all-guides-link svg{width:16px;height:16px}
.chapter-selector.compact-chapters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0}
.compact-chapters .chapter-card{flex:0 1 auto;min-height:43px;padding:10px 12px;border-radius:12px;gap:8px}
.compact-chapters .chapter-name{flex:none}
.compact-chapters .chapter-name strong{font-size:14px;font-weight:500;line-height:1.35}
.chapter-chip-number{font-size:11px;color:#536580;position:relative;z-index:2;line-height:1.4}
.compact-chapters>.selection-glider--chapter-card{border-radius:12px}
.chapter-navigation .mobile-chapter-picker{margin-bottom:0}

/* Keep the sidebar in the DOM so disclosure rows animate continuously. */
.sidebar-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sidebar-heading .brand{font-size:19px;min-width:0;padding:0 5px;letter-spacing:-.4px}
.sidebar-toggle{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:10px;background:#ffffff13;color:#e3eafa;border:1px solid #ffffff21}
.sidebar-toggle:hover{background:#ffffff24}
.sidebar-toggle svg{width:22px;height:22px}
.sidebar .chapter-dot{width:30px;height:30px;border-radius:9px}
.sidebar .chapter-dot svg{width:22px;height:22px}
.chapter-label{min-width:0;flex:1}
.chapter-disclosure{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .38s cubic-bezier(.22,.85,.25,1),visibility 0s .38s}
.chapter-disclosure[data-open="true"]{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .38s cubic-bezier(.22,.85,.25,1),visibility 0s}
.chapter-disclosure-clip{overflow:hidden;min-height:0}
.app-layout{--sidebar-width:280px;grid-template-columns:var(--sidebar-width) minmax(0,1fr);transition:grid-template-columns .36s cubic-bezier(.22,.85,.25,1)}
body[data-sidebar-slim="true"] .app-layout{--sidebar-width:80px}
body[data-sidebar-slim="true"] .sidebar{padding:24px 12px 18px}
body[data-sidebar-slim="true"] .sidebar-heading{justify-content:center;margin-bottom:25px}
body[data-sidebar-slim="true"] .sidebar .brand,
body[data-sidebar-slim="true"] .sidebar .brand-context,
body[data-sidebar-slim="true"] .sidebar .institution,
body[data-sidebar-slim="true"] .sidebar .nav-label,
body[data-sidebar-slim="true"] .sidebar .chapter-label,
body[data-sidebar-slim="true"] .sidebar .chevron,
body[data-sidebar-slim="true"] .sidebar .nav-link-label{display:none}
body[data-sidebar-slim="true"] .sidebar .nav-link{justify-content:center;padding:12px 8px;min-height:48px}
body[data-sidebar-slim="true"] .sidebar .nav-link svg{width:21px;height:21px}
body[data-sidebar-slim="true"] .sidebar .chapter-toggle{justify-content:center;padding:9px 0;min-height:51px}
body[data-sidebar-slim="true"] .sidebar .nav-secondary{margin-top:18px}
body[data-sidebar-slim="true"] .sidebar .nav-progress{margin:12px 2px 0;padding-top:15px}
body[data-sidebar-slim="true"] .sidebar .nav-progress>div:first-child,
body[data-sidebar-slim="true"] .sidebar .nav-progress>button{display:none}
body[data-sidebar-slim="true"] .sidebar>nav{overflow-x:hidden;scrollbar-width:none}
@media(max-width:1100px){.app-layout{--sidebar-width:252px}}
@media(max-width:900px){.app-layout{display:block}}
@media(max-width:620px){
  .chapter-selector.compact-chapters{display:none}
  .overview-intro{align-items:flex-start;flex-direction:column;gap:14px}
  .overview-chapter-card{min-height:260px;padding:24px}
  .chapter-navigation{margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){.chapter-disclosure,.app-layout{transition:none}}
/* Labels clip rather than wrapping while the rail changes width. */
.sidebar .chapter-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .chapter-label small{white-space:nowrap}
.sidebar-heading{overflow:hidden;transition:margin-bottom .36s cubic-bezier(.22,.85,.25,1)}
.sidebar-heading .brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .nav-link-label{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sidebar{transition:padding .36s cubic-bezier(.22,.85,.25,1)}
/* Keep hover feedback in the same transition list as the rail's layout motion. */
.sidebar :is(.chapter-toggle,.nav-link,.stop-nav,.sidebar-toggle){
 transition:padding .36s cubic-bezier(.22,.85,.25,1),min-height .36s cubic-bezier(.22,.85,.25,1),box-shadow .26s ease,filter .26s ease,background-color .26s ease,border-color .26s ease,color .26s ease,scale .16s cubic-bezier(.22,.85,.25,1),transform .2s ease;
}
.sidebar .brand-context{max-height:30px;overflow:hidden;transition:max-height .36s,margin .36s,opacity .25s}
body[data-sidebar-slim="true"] .sidebar .brand-context{display:block;max-height:0;margin:0;opacity:0}
@media(prefers-reduced-motion:reduce){.sidebar,.sidebar :is(.chapter-toggle,.nav-link,.stop-nav,.sidebar-toggle),.sidebar-heading,.sidebar .brand-context{transition:none}}

@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.overview-chapter-card{background:#f8fafd}}

/* In slim mode, reserve reading width for tasks and give the rest to the image. */
@media(min-width:1100px){
  body[data-sidebar-slim="true"] .app-layout{max-width:100%}
  body[data-sidebar-slim="true"] .guide-content{max-width:100%}
  body[data-sidebar-slim="true"] .guide-layout{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:24px}
  body[data-sidebar-slim="true"] .guide-layout .step-screenshot-link{display:none}
}
@media(min-width:1351px){
  .guide-layout{grid-template-columns:minmax(0,calc(48% - 11.52px)) minmax(0,1fr)}
  body[data-sidebar-slim="true"] .guide-layout{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
}
@media(prefers-reduced-motion:no-preference){
  .app-layout{transition:grid-template-columns .36s cubic-bezier(.22,.85,.25,1),max-width .36s cubic-bezier(.22,.85,.25,1)}
  .guide-content{transition:max-width .36s cubic-bezier(.22,.85,.25,1)}
  .guide-layout{transition:grid-template-columns .36s cubic-bezier(.22,.85,.25,1)}
}

/* Step actions stay in reach; contextual crops preserve source resolution. */
.guide-action-dock{position:sticky;bottom:16px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;max-width:760px;margin:24px 0 0 auto;padding:12px 16px;border-radius:18px;background:#ffffffeb;box-shadow:0 10px 40px #20376322,inset 0 1px 0 #fff;backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.guide-action-dock .next-step-copy{min-width:0}
.guide-action-dock .next-step-copy>p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:14px}
.guide-action-dock .step-flow-actions{width:auto}
.visual-tools{display:flex;align-items:center;gap:16px;flex-shrink:0}
.visual-tools .text-button{white-space:nowrap}
.visual-card .screen-frame{width:min(100%,var(--natural-width),calc(55dvh * var(--frame-ratio)));margin-inline:auto}
.shot-canvas:not(.actual-size) .screen-frame{width:min(100%,var(--natural-width),calc(55dvh * var(--frame-ratio)));margin-inline:auto}
@media(max-width:620px){
 .visual-heading{flex-wrap:wrap}
 .visual-tools{width:100%;justify-content:flex-end;gap:20px}
 .guide-action-dock{bottom:max(10px,env(safe-area-inset-bottom));padding:10px 12px;gap:10px;border-radius:16px}
 .guide-action-dock .next-step-copy{min-width:66px;flex:none}
 .guide-action-dock .next-step-copy>p{display:none}
 .guide-action-dock .next-step-copy>span{font-size:11px;letter-spacing:.2px}
 .guide-action-dock .step-flow-actions{flex:1;justify-content:flex-end;gap:7px}
 .guide-action-dock .step-flow-actions>.btn{flex:none;font-size:13px;padding:10px 12px}
 .guide-action-dock .step-back{width:36px}
}
@media(max-width:380px){.guide-action-dock .next-step-copy{display:none}.guide-action-dock .step-flow-actions>.btn{flex:1}}

/* High-contrast outlines and readable numbered targets at every image size. */
.click-mark{border-width:3px;border-color:#d94724;box-shadow:0 0 0 2px #fff,0 2px 7px #54221335}
.click-mark b{width:21px;height:21px;top:-11px;left:-3px;font-size:12px;background:#c83c1d;box-shadow:0 0 0 2px white}

/* Screenshot zoom tools share the dialog material and remain outside the pan area. */
.shot-zoom-toolbar{display:flex;align-items:center;justify-content:center;gap:13px;padding:10px 23px;border-bottom:1px solid #dce4ee;flex-shrink:0}
.zoom-control{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border:1px solid #d4dfed;border-radius:10px;background:#ffffffa6;color:#2e4265;font-size:23px;line-height:1}
.zoom-control:hover:not(:disabled){background:white}
.shot-zoom-toolbar input{width:180px;min-width:50px;max-width:100%;height:32px;accent-color:#235bd3;cursor:pointer}
.shot-zoom-toolbar output{min-width:43px;color:#344c70;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.screenshot-dialog .shot-canvas{scroll-behavior:auto;overflow:auto;flex:0 1 auto;scrollbar-width:thin}
.shot-canvas:focus-visible{outline:2px solid #77a7f5;outline-offset:-3px}
.shot-canvas.is-zoomed{cursor:grab}
.shot-canvas.is-dragging{cursor:grabbing;user-select:none}
@media(max-width:620px){.shot-zoom-toolbar{padding:8px 15px;gap:10px}.shot-zoom-toolbar input{flex:1;width:120px}.shot-zoom-toolbar .zoom-control{width:36px;height:36px}}

/* Clear, translucent surfaces with dark type and restrained edge lighting. */
:root{--ink:#17213b;--muted:#41506a;--font-display:ui-rounded,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.glass{background:linear-gradient(125deg,#ffffff4d,#ffffff26 52%,#ffffff40);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.topbar,.screenshot-dialog{position:relative;isolation:isolate}
.sidebar,.guide-action-dock{isolation:isolate}
.topbar,.mobile-nav,.guide-action-dock,.screenshot-dialog{
 background:radial-gradient(ellipse at 5% 0%,#ffffff4d,transparent 58%),linear-gradient(125deg,#ffffff4d,#ffffff1f 42%,#ffffff40);
 border-color:#ffffffbf;
 backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%);
 box-shadow:0 12px 32px -15px #13244638,0 1px 3px #1324460c,inset 0 1.5px 1px #fffffff2,inset 1px 0 1px #ffffffc7,inset -1px -1px 1px #ffffff80;
}

.sidebar{background:linear-gradient(155deg,#05205ec7,#001056cc 55%,#001056bf);border-color:#ffffff4d;box-shadow:0 18px 45px -18px #101e5066,inset 1px 1px 1px #ffffff66,inset -1px -1px 1px #ffffff29}
.stop-card,.task-card,.visual-card,.note-card,.support-card,.library-tools,.empty-state,.celebration,.related-card{background:linear-gradient(125deg,#ffffff8f,#ffffff61 52%,#ffffff7a)}
.overview-chapter-card,.chapter-feature{background:linear-gradient(120deg,#ffffff6b,#ffffff33 50%,#ffffff59);box-shadow:0 14px 34px -22px #16274d4d,inset 1px 1px 1px #fff,inset -1px -1px 1px #ffffff9c}
.guide-action-dock{background:linear-gradient(120deg,#ffffff94,#ffffff70 48%,#ffffff85)}
.screenshot-dialog{background:linear-gradient(125deg,#ffffff7a,#ffffff40 48%,#ffffff66);box-shadow:0 30px 85px -24px #111e4866,inset 1px 1.5px 1px white,inset -1px -1px 1px #ffffffad}
.screenshot-dialog>header,.shot-zoom-toolbar{background:#ffffff0d;border-bottom-color:#243d641a}
.shot-canvas{background:transparent}
.visual-tabs{background:#ffffff26;border-color:#ffffff66}
.chapter-intro h1,.guide-intro h1,.overview-intro h1,.page-intro h1,.celebration h1{font-family:var(--font-display);font-weight:750;color:#111b33;letter-spacing:-.035em}
.chapter-intro h1{font-size:clamp(32px,2.8vw,42px)}
.guide-intro h1{font-size:clamp(30px,2.5vw,38px)}
.overview-chapter-card h2,.feature-copy h2,.task-title h2,.stop-card h3,.note-card h3,.support-card h3{color:#17233d;font-weight:680;letter-spacing:-.025em}
.visual-heading-copy h2{color:#14213b;font-weight:720;letter-spacing:-.02em}
.step-select strong{color:#26334c;font-weight:620}
.step.selected .step-select strong{color:#174dac;font-weight:720}
.step-copy small,.guide-intro p,.feature-copy p,.stop-card p,.note-card p,.support-card p,.visual-card figcaption>p,.modal-caption{color:#35445c}
.eyebrow,.tiny-label,.visual-heading-copy .eyebrow{font-weight:650;color:#4a5870;letter-spacing:.065em}
.chapter-location strong,.page-location strong{color:#17243f;font-weight:700}
.chapter-location small,.chapter-meta,.stop-status,.stop-card-bottom>span{color:#4b5870;font-weight:500}
.step-number,.progress-ring strong,.overview-progress span,.shot-zoom-toolbar output{font-variant-numeric:tabular-nums}
.progress-ring strong{font-weight:700;color:#253c64}
.compact-chapters .chapter-name strong{font-weight:600}
.btn{font-weight:600}
.sidebar .brand{font-weight:700;letter-spacing:-.025em}
.sidebar .chapter-toggle{color:#e8eefb}
.sidebar .stop-nav{color:#d6e1f5}
.sidebar .stop-nav.selected{color:#fff;font-weight:600}
@media(max-width:620px){.chapter-intro h1,.guide-intro h1{font-size:30px}}
/* Light rolls into a broad, faint lower shadow rather than a dark bottom seam. */
.glass,.screenshot-dialog{
 border-width:1px;
 border-color:#ffffff85;border-top-color:#ffffffd9;border-bottom-color:#cbd5e129;
 box-shadow:0 12px 32px -22px #20365a33,inset 0 .5px 1px #ffffffb3,inset 0 -14px 22px -23px #2a426626;
}
.topbar,.mobile-nav,.guide-action-dock{box-shadow:0 14px 34px -22px #20365a40,inset 0 .5px 1px #ffffffc7,inset 0 -14px 22px -23px #2a426621}
.screenshot-dialog{box-shadow:0 30px 85px -24px #111e4852,inset 0 .5px 1px #fff,inset 0 -18px 28px -28px #2a426626}
.sidebar{border-color:#ffffff26;border-top-color:#ffffff66;border-bottom-color:#61749b26;box-shadow:0 20px 48px -25px #101e5059,inset 0 .5px 1px #ffffff40,inset 0 -18px 28px -28px #00000033}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 .topbar,.mobile-nav,.guide-action-dock,.screenshot-dialog,.overview-chapter-card,.chapter-feature,.stop-card,.task-card,.visual-card,.note-card,.support-card,.library-tools,.empty-state,.celebration,.related-card{background:#f8fafd;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#c3cddd}
 .sidebar{background:#001056;border-color:#6c7c9d}
}

/* Press feedback uses individual scale, preserving hover and navigation transforms. */
:is(button,a.btn){
 -webkit-tap-highlight-color:transparent;
 transition:scale .16s cubic-bezier(.22,.85,.25,1),filter .14s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .14s ease,padding .36s cubic-bezier(.22,.85,.25,1),min-height .36s cubic-bezier(.22,.85,.25,1);
}
:is(button,a.btn):not(:disabled):not([aria-disabled="true"]):active{scale:.975;filter:brightness(.94);transition-duration:.07s}
:is(button,a.btn).primary:not(:disabled):not([aria-disabled="true"]):active{filter:brightness(.86)}
:is(.overview-chapter-card,.stop-card,.step-select,.screen-trigger):not(:disabled):active{scale:.99}
.sidebar :is(.nav-link,.chapter-toggle,.stop-nav,.sidebar-toggle):not(:disabled):not([aria-disabled="true"]):active{filter:brightness(1.2)}
@media(prefers-reduced-motion:reduce){
 :is(button,a.btn){transition:none}
 :is(button,a.btn):not(:disabled):not([aria-disabled="true"]):active{scale:none}
}

/* Fine-pointer hover: a quiet top reflection, with press feedback taking priority. */
:where(.text-button,.storage-details-link){border-radius:6px}
@media(hover:hover) and (pointer:fine){
 :is(button,a.btn):not(:disabled):not([aria-disabled="true"]):not(:active):hover{
  box-shadow:inset 0 1px 1px #ffffff8c,inset 0 0 14px #ffffff21,0 5px 14px -12px #23406b40;
  filter:brightness(1.035);
 }
 :is(button,a.btn).primary:not(:disabled):not([aria-disabled="true"]):not(:active):hover{
  box-shadow:inset 0 1px 1px #ffffff9c,inset 0 0 14px #ffffff1a,0 7px 18px -12px #1e55d54d;
  filter:brightness(1.025);
 }
 .sidebar :is(.nav-link,.chapter-toggle,.stop-nav,.sidebar-toggle):not(:disabled):not([aria-disabled="true"]):not(:active):hover{box-shadow:inset 0 1px 0 #ffffff40,inset 0 0 16px #ffffff12;filter:brightness(1.08)}
}

/* Disclosure shells resize continuously while their text stays at its natural size. */
.hint,.reflection,.related-card{overflow-anchor:none}
.disclosure-body{display:flow-root}
.hint summary>span,.reflection summary>span,.disclosure-chevron{display:inline-block;transition:transform .32s cubic-bezier(.22,.85,.25,1);transform:rotate(0);font-weight:400}
:is(.hint,.reflection)[data-expanded="true"] summary>span,.related-card[data-expanded="true"] .disclosure-chevron{transform:rotate(45deg)}
:is(.hint,.reflection)[data-expanded="false"] summary>span{transform:rotate(0)}
.disclosure-chevron{margin-left:5px}
@media(hover:hover) and (pointer:fine){
 :is(.hint,.reflection,.related-card)>summary:hover{color:#173f87}
}
@media(prefers-reduced-motion:reduce){.hint summary>span,.reflection summary>span,.disclosure-chevron{transition:none}}

/* Pointer hover glides separately from the persistent selected chapter. */
.sidebar>nav>.nav-hover-glider{position:absolute;z-index:0;pointer-events:none;display:block;border-radius:12px;opacity:0;background:linear-gradient(115deg,#ffffff10,#ffffff07);box-shadow:inset 0 .5px 0 #ffffff26,inset 0 -1px 1px #ffffff04;transition:opacity .18s ease}
.sidebar>nav>.nav-hover-glider.is-visible{opacity:1}
@media(hover:hover) and (pointer:fine){
 .sidebar>nav.has-hover-glider :is(.chapter-toggle,.stop-nav,.nav-link):not(:disabled):not([aria-disabled="true"]):not(:active):hover{box-shadow:none;filter:none}
}
.sidebar .sidebar-heading .brand:not(:disabled):not([aria-disabled="true"]):is(:hover,:active){box-shadow:none;filter:none;scale:none}
.sidebar .nav-progress>[data-reset]{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 11px;border:1px solid #ffffff30;border-top-color:#ffffff45;border-radius:9px;background:#ffffff08;color:#e0e8f8;font-size:12px;line-height:1.4}
@media(prefers-reduced-motion:reduce){.sidebar>nav>.nav-hover-glider{transition:none}}
@media(prefers-contrast:more){.sidebar .nav-progress>[data-reset]{border-color:#9aabc9;color:#fff}}

/* Destructive confirmation has its own warm glass treatment. */
.btn.danger{color:#fff;background:linear-gradient(180deg,#bd393e,#a9252e);border-color:#ffffff59;box-shadow:0 8px 18px -10px #92263066,inset 0 1px 0 #ffffff66,inset 0 -1px 1px #761b2a33}
@media(hover:hover) and (pointer:fine){
 .btn.danger:not(:disabled):not([aria-disabled="true"]):not(:active):hover{background:linear-gradient(180deg,#c63d43,#b22a33);box-shadow:0 9px 20px -11px #92263066,inset 0 1px 1px #ffffff80;filter:brightness(1.025)}
}
.btn.danger:not(:disabled):not([aria-disabled="true"]):active{filter:brightness(.88)}
.btn.danger:focus-visible{outline-color:#d9666c}

/* Keep chapter labels above the moving glass, including while pressed.
   Filter and scale on a button would trap its labels beneath the selection layer. */
.chapter-selector.compact-chapters.has-selection-gliders .chapter-card:not(:disabled):is(:hover,:active){filter:none;scale:none}
.chapter-selector.has-selection-gliders .chapter-card .chapter-name strong{color:#17264a}
/* A half-pixel dark contour gives floating glass definition without a heavy rim. */
.topbar,.mobile-nav,.guide-action-dock,.dialog,.screenshot-dialog,.chapter-selector>.selection-glider--chapter-card{outline:.5px solid #10182814;outline-offset:-.5px}
.mobile-site-title,.mobile-options,.mobile-chapter-progress{display:none}
.mobile-options{position:relative}
.mobile-options>summary{display:grid;place-items:center;width:40px;height:40px;cursor:pointer;list-style:none;border-radius:11px;color:#263b60;background:#ffffff30}
.mobile-options>summary::-webkit-details-marker{display:none}
.mobile-options>summary svg{width:22px;height:22px}
.mobile-options[open]>summary{background:#ffffff73}
.mobile-options-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:215px;padding:8px;border-radius:14px;background:linear-gradient(120deg,#f8faffed,#f1f4fae8);box-shadow:0 12px 28px -12px #17274640;outline:.5px solid #1018281a;outline-offset:-.5px}
.mobile-options-menu>span{display:block;font-size:12px;line-height:1.5;color:#4b5c75;padding:7px 10px 9px;border-bottom:1px solid #26385414}
.mobile-options-menu>button{display:block;width:100%;min-height:44px;text-align:left;padding:10px;color:#a12731;font-size:14px;font-weight:600;border-radius:8px}
.reset-modal .dialog h2{font-weight:680}
@media(max-width:900px){
 .topbar{position:relative;z-index:9;min-height:56px;padding:8px 12px;gap:10px;border-radius:16px}
 .mobile-site-title{display:block;font-size:16px;font-weight:700;letter-spacing:-.35px;line-height:1.2;color:#17233d;flex:1}
 .topbar-title{display:none}
 .topbar-actions{gap:4px}
 .topbar-actions>.btn{min-height:40px;font-size:12px;padding:8px 9px;border-radius:11px}
 .mobile-options{display:block}
 .mobile-nav{margin-top:8px;gap:4px;padding:4px;border-radius:14px}
 .mobile-nav button{min-height:42px;padding:8px;font-size:14px;gap:7px}
 .mobile-nav svg{width:17px;height:17px}
 .content{padding-top:22px}
}
@media(max-width:620px){
 .app-layout{padding:10px}
 .content{padding:20px 2px 12px}
 .overview-intro{flex-direction:row;align-items:center;gap:12px;margin-bottom:16px}
 .overview-intro h1,.page-intro h1{font-size:28px;line-height:1.2}
 .overview-intro p{display:none}
 .overview-intro .count-pill{font-size:11px;padding:7px 9px;white-space:nowrap}
 .overview-grid{gap:12px}
 .overview-chapter-card{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px 12px;padding:18px;min-height:0;border-radius:17px}
 .overview-card-heading{display:contents}
 .overview-card-heading>.tiny-label{display:none}
 .overview-card-heading>.chapter-icon{width:34px;height:34px;border-radius:10px;grid-column:1;grid-row:1}
 .overview-chapter-card h2{grid-column:2;grid-row:1;align-self:center;font-size:19px;line-height:1.25;margin:0}
 .overview-chapter-card>p{grid-column:1/-1;font-size:14px;line-height:1.5;margin:0}
 .overview-card-footer{grid-column:1/-1;font-size:12px;margin:0}
 .overview-progress{grid-column:1/-1;display:flex;align-items:center;gap:14px;font-size:11px;padding-top:10px;margin:0}
 .overview-progress>i{flex:1;margin:0}
 .chapter-navigation{display:flex;align-items:center;gap:12px;margin-bottom:18px}
 .chapter-navigation .all-guides-link{flex-shrink:0;margin:0;font-size:12px;min-height:44px;gap:5px}
 .chapter-navigation .mobile-chapter-picker{flex:1;min-width:0;padding:0 10px;border-radius:12px;gap:0}
 .mobile-chapter-picker>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
 .mobile-chapter-picker select{min-height:44px;font-size:16px;padding:6px 0;text-overflow:ellipsis}
 .chapter-intro{margin:0 0 17px;gap:0}
 .chapter-intro .eyebrow,.chapter-emblem{display:none}
 .chapter-intro h1{font-size:29px;margin:0 0 8px}
 .chapter-intro p{font-size:15px;line-height:1.5}
 .chapter-meta{font-size:12px;gap:12px;margin-top:10px;flex-wrap:wrap}
 .chapter-meta>span+span{padding-left:12px}
 .mobile-chapter-progress{display:inline}
 .chapter-feature{display:none}
 .section-heading{margin:19px 0 12px}
 .section-heading h2{font-size:19px}
 .section-heading .count-pill{font-size:12px;padding:5px 9px}
 .stop-grid{gap:12px}
 .stop-card{min-height:0;padding:18px;border-radius:17px}
 .stop-card-top{margin-bottom:11px}
 .stop-icon{width:32px;height:32px;border-radius:10px}
 .stop-card h3{font-size:18px;line-height:1.35;margin-bottom:7px}
 .stop-card p{font-size:14px;line-height:1.55}
 .stop-card-bottom{padding-top:13px}
 .guide-breadcrumb{font-size:12px;gap:7px;margin-bottom:13px}
 .guide-intro{gap:12px;margin-bottom:18px;flex-wrap:wrap}
 .guide-intro>div{flex:1 1 100%}
 .guide-intro h1{font-size:27px;line-height:1.2;margin:7px 0 0}
 .guide-intro p{display:none}
 .guide-intro>.btn{min-height:42px;font-size:13px;padding:9px 13px}
 .guide-layout{gap:16px}
 .task-card,.visual-card{padding:18px 15px;border-radius:17px}
 .task-title .tiny-label{display:none}
 .task-title h2{font-size:18px;line-height:1.4}
 .step{padding:14px 5px;gap:11px}
 .step-select{font-size:16px}
 .step-copy small{font-size:15px;line-height:1.55;margin-top:7px}
 .step:not(.selected) .step-copy small{display:none}
 .step:not(.selected) .step-heading{gap:7px}
 .step-select .step-number{font-size:12px}
 .step-badge{font-size:10px}
 .hint summary,.reflection summary{min-height:46px;font-size:14px}
 .hint p,.reflection label{font-size:15px}
 .visual-heading{gap:10px}
 .visual-heading h2{font-size:18px}
 .visual-tools{gap:8px}
 .visual-tools .text-button{font-size:12px}
 .related-card{padding:0 16px;border-radius:17px}
 .related-card>summary{padding:15px 0;font-size:14px}
 .guide-action-dock{bottom:max(8px,env(safe-area-inset-bottom));margin-top:16px;min-height:58px;padding:8px 10px}
 .site-footer{margin-top:16px;padding:12px 3px 6px;gap:3px}
 .site-footer>span{display:none}
 .storage-note{font-size:11px}
 .dialog{padding:25px;width:min(400px,100%);border-radius:20px}
 .modal{padding:18px}
 .dialog h2{font-size:23px}
 .dialog-actions{gap:9px;margin-top:22px}
 .dialog-actions .btn{min-height:44px;padding:10px 14px;font-size:14px}
 .library-tools{padding:15px}
 .library-categories{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:5px}
 .library-categories>button{white-space:nowrap;flex:none;min-height:40px}
 .support-card{padding:19px}
 .support-card p{font-size:15px}
 .empty-state{padding:28px 20px}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.mobile-options-menu{background:#f8fafd}}

@media(max-width:620px){
 .guide-layout .step-screenshot-link{display:none}
 .task-card>.visual-card{border:0;border-radius:0;outline:none;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:13px 0 17px;margin:0;border-bottom:1px solid #26385414}
 .task-card>.visual-card .visual-heading-copy,.task-card>.visual-card .step-track{display:none}
 .task-card>.visual-card .visual-heading{justify-content:flex-end;margin-bottom:10px}
 .task-card>.visual-card .visual-tools{margin-left:auto}
 .task-card>.visual-card .visual-tabs{margin:0 0 12px;gap:5px}
 .task-card>.visual-card .visual-tabs>button{min-height:38px;padding:7px 10px;font-size:13px}
 .task-card>.visual-card figcaption>p{font-size:14px;line-height:1.5}
 .task-card>.visual-card .highlight-key{margin-top:12px}
 .task-actions .btn{display:none}
 .task-actions{padding-top:13px}
}

.modal[data-closing="true"]>.dialog{pointer-events:none}
@media(max-width:620px){.page-intro>.eyebrow{display:none}}

/* The phone is the companion: keep launch actions on the larger screen. */
.site-chrome{display:contents}
@media(max-width:900px){
 .site-chrome{display:block;position:sticky;top:max(8px,env(safe-area-inset-top));z-index:20;flex:none;transform:translateY(0);transition:transform .28s cubic-bezier(.22,.85,.25,1)}
 .site-chrome.is-tucked{transform:translateY(calc(-100% - 24px - env(safe-area-inset-top)));pointer-events:none}
 .topbar-actions>a,.guide-intro>a.btn{display:none}
}
@media(prefers-reduced-motion:reduce){.site-chrome{transition:none}}

/* Lighting defines the glass edge instead of a uniform dark outline. */
.glass:not(.sidebar):not(:focus-visible),.screenshot-dialog{outline:none}
@media(max-width:620px){.task-card>.visual-card.glass:not(:focus-visible){outline:none}}

/* A small floating control keeps more of the phone screenshot unobstructed. */
.dock-count-compact,.dock-action-compact{display:none}
@media(max-width:620px){
 .guide-action-dock{width:fit-content;max-width:calc(100% - 12px);min-height:0;margin:14px auto 0;padding:3px 4px 3px 10px;gap:10px;border-radius:15px;bottom:max(6px,env(safe-area-inset-bottom))}
 .guide-action-dock .next-step-copy{display:block;flex:none;min-width:0}
 .guide-action-dock .next-step-copy>span{font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums;color:#35445c}
 .guide-action-dock .step-flow-actions{flex:none;width:auto;gap:6px}
 .guide-action-dock .step-flow-actions>.btn{flex:none;min-height:44px;padding:9px 12px;font-size:13px;border-radius:11px;gap:8px}
 .guide-action-dock .step-back{width:40px;height:44px;border-radius:11px}
 .guide-action-dock .dock-count-wide,.guide-action-dock .dock-action-wide{display:none}
 .guide-action-dock .dock-count-compact,.guide-action-dock .dock-action-compact{display:inline}
}

/* A masked hairline catches light above and below, with soft side shading.
   It changes only the edge; existing transparent fills stay intact. */
.glass:not(.sidebar)::before,.screenshot-dialog::before{
 content:"";position:absolute;inset:-.25px;z-index:3;pointer-events:none;border-radius:inherit;padding:.75px;
 background:linear-gradient(180deg,#ffffffed 0%,#ffffff80 9%,#ffffff12 21%,#18243b38 38%,#18243b52 52%,#18243b26 70%,#ffffff59 89%,#ffffffe6 100%);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
}
@media(max-width:620px){
 .task-card>.visual-card::before{display:none}
 .guide-action-dock .next-step-copy>span{font-size:11px;font-weight:600}
 .guide-action-dock .step-flow-actions>.btn{gap:7px;padding-inline:11px}
}
@media(prefers-contrast:more){.glass:not(.sidebar)::before,.screenshot-dialog::before{background:#44536a}}

/* Quieter, uneven rims on reading surfaces; no motion on the content itself. */
.glass:not(.sidebar)::before,.screenshot-dialog::before{
 opacity:.55;
 background:conic-gradient(from 11deg at 50% 50%,#ffffffb3 0deg,#ffffff26 38deg,#18243b26 78deg,#18243b12 112deg,#ffffff33 155deg,#ffffffad 180deg,#ffffff26 215deg,#18243b2e 263deg,#18243b0d 300deg,#ffffff80 339deg,#ffffffb3 360deg);
}
/* Floating chrome catches a localized highlight that settles after input. */
:is(.topbar,.mobile-nav,.sidebar,.guide-action-dock,.dialog,.mobile-options-menu).glass::before,.screenshot-dialog::before{
 content:"";position:absolute;inset:-.25px;z-index:3;pointer-events:none;border-radius:inherit;padding:.75px;opacity:var(--glass-rim-opacity,.69);
 background:radial-gradient(ellipse at var(--glass-light-x,35%) 0%,#ffffff99,transparent 55%),conic-gradient(from var(--glass-light-angle,8deg) at 50% 50%,#ffffffbf 0deg,#ffffff26 33deg,#17263b4d 76deg,#17263b12 110deg,#ffffff40 151deg,#ffffffb3 179deg,#ffffff26 217deg,#17263b52 261deg,#17263b12 300deg,#ffffff73 338deg,#ffffffbf 360deg);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
}
.sidebar.glass::before{opacity:calc(var(--glass-rim-opacity,.69) * .45)}
@media(prefers-contrast:more){
 .glass:not(.sidebar)::before,.screenshot-dialog::before{opacity:1;background:#44536a}
}

/* Views & filters only: a faint ambient wash behind the floating glass.
   The white center keeps the task and screenshot area quiet. */
body{position:relative;isolation:isolate}
body::before{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
 background:radial-gradient(ellipse 82% 65% at 8% 9%,#9581b938,transparent 74%),radial-gradient(ellipse 85% 90% at 60% 60%,#ffffff40,transparent 76%);
 transition:opacity .48s ease;
}
body[data-chapter-theme="personalize"]::before{opacity:1}
@media(max-width:620px){
 body::before{background:radial-gradient(ellipse 115% 48% at 7% 6%,#9581b938,transparent 80%),radial-gradient(ellipse 110% 86% at 58% 64%,#ffffff40,transparent 80%)}
}
@media(prefers-reduced-motion:reduce){body::before{transition:none}}
@media(prefers-contrast:more){body::before{display:none}}

/* Clear material across chapters; each chapter retains its own palette. */
body[data-chapter-theme]:not([data-chapter-theme="neutral"]) :is(.topbar,.mobile-nav){
 background:linear-gradient(125deg,#ffffff26,#ffffff0a 48%,#ffffff14);
 backdrop-filter:blur(5px) saturate(125%);-webkit-backdrop-filter:blur(5px) saturate(125%);
}
body[data-chapter-theme]:not([data-chapter-theme="neutral"]) .sidebar{backdrop-filter:blur(8px) saturate(130%);-webkit-backdrop-filter:blur(8px) saturate(130%)}
body[data-chapter-theme]:not([data-chapter-theme="neutral"]) :is(.task-card,.visual-card,.related-card,.stop-card,.chapter-feature){
 background:linear-gradient(125deg,#ffffff52,#ffffff2e 52%,#ffffff40);
 backdrop-filter:blur(7px) saturate(120%);-webkit-backdrop-filter:blur(7px) saturate(120%);
}
body[data-chapter-theme]:not([data-chapter-theme="neutral"]) .guide-action-dock{
 background:linear-gradient(120deg,#ffffff66,#ffffff40 48%,#ffffff52);
 backdrop-filter:blur(5px) saturate(125%);-webkit-backdrop-filter:blur(5px) saturate(125%);
}
body[data-chapter-theme]:not([data-chapter-theme="neutral"]) .task-card>.selection-glider--step{background:linear-gradient(115deg,#ffffff52,#ffffff24)}
body[data-chapter-theme]:not([data-chapter-theme="neutral"]) .mobile-nav>.selection-glider--mobile{background:linear-gradient(115deg,#ffffff94,#ffffff52)}
@media(max-width:620px){
 body[data-chapter-theme]:not([data-chapter-theme="neutral"]) .task-card>.visual-card{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 body[data-chapter-theme]:not([data-chapter-theme="neutral"]) :is(.topbar,.mobile-nav,.task-card,.visual-card,.related-card,.stop-card,.chapter-feature,.guide-action-dock){background:#f8fafd;backdrop-filter:none;-webkit-backdrop-filter:none}
 body[data-chapter-theme]:not([data-chapter-theme="neutral"]) .sidebar{background:#001056;backdrop-filter:none;-webkit-backdrop-filter:none}
}


/* Chapter-specific objects stay behind the material and fade with navigation. */
.background-objects{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .48s ease}
body[data-chapter-theme]:not([data-chapter-theme="neutral"]) .background-objects{opacity:1}
.chapter-background-group{position:absolute;inset:0;opacity:0;transition:opacity .48s ease}
body[data-chapter-theme="discover"] [data-background-chapter="discover"],
body[data-chapter-theme="personalize"] [data-background-chapter="personalize"],
body[data-chapter-theme="connect"] [data-background-chapter="connect"],
body[data-chapter-theme="academic-scheduling"] [data-background-chapter="academic-scheduling"],
body[data-chapter-theme="demand-analysis"] [data-background-chapter="demand-analysis"],
body[data-chapter-theme="registration-monitoring"] [data-background-chapter="registration-monitoring"]{opacity:1}
.background-pane{position:absolute;width:clamp(420px,43vw,680px);height:clamp(220px,23vw,330px);left:-7vw;top:-11vh;transform:perspective(1000px) rotateX(calc(var(--object-mouse-x,0deg) * -.4)) rotateY(calc(var(--object-mouse-y,0deg) * -.4)) rotateZ(-24deg);border-radius:38px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,currentColor 12%,transparent),color-mix(in srgb,currentColor 3%,transparent) 62%,#ffffff26);border:1px solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:inset 0 1px 0 #ffffffa6,0 18px 36px -30px color-mix(in srgb,currentColor 15%,transparent)}
.background-pane-mark{position:absolute;width:72%;height:100%;right:-4%;top:10%;opacity:.38}
.background-topic{position:absolute;width:clamp(310px,28vw,420px);height:auto;aspect-ratio:4/3;right:-7vw;top:20vh;transform:perspective(850px) rotateX(calc(12deg + var(--object-mouse-x,0deg))) rotateY(calc(-18deg + var(--object-mouse-y,0deg))) rotateZ(-16deg);overflow:visible;opacity:.72;filter:drop-shadow(8px 16px 12px color-mix(in srgb,currentColor 8%,transparent))}
.motif-discover .background-topic{transform:perspective(850px) rotateX(calc(15deg + var(--object-mouse-x,0deg))) rotateY(calc(-20deg + var(--object-mouse-y,0deg))) rotateZ(9deg);top:21vh}
.motif-connect .background-topic{transform:perspective(850px) rotateX(calc(12deg + var(--object-mouse-x,0deg))) rotateY(calc(-22deg + var(--object-mouse-y,0deg))) rotateZ(-19deg);top:19vh}
.motif-demand-analysis .background-topic{transform:perspective(850px) rotateX(calc(10deg + var(--object-mouse-x,0deg))) rotateY(calc(-18deg + var(--object-mouse-y,0deg))) rotateZ(-9deg)}
.motif-registration-monitoring .background-topic{transform:perspective(850px) rotateX(calc(10deg + var(--object-mouse-x,0deg))) rotateY(calc(-18deg + var(--object-mouse-y,0deg))) rotateZ(-7deg);top:19vh}
@media(max-width:620px){
 .background-pane{width:350px;height:190px;left:-155px;top:-75px;border-radius:30px}
 .background-topic{width:250px;right:-105px;top:185px}
 .motif-discover .background-topic,.motif-connect .background-topic,.motif-registration-monitoring .background-topic{top:185px}
}
@media(prefers-reduced-motion:reduce){.background-objects,.chapter-background-group{transition:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.background-objects{display:none}}

/* Tiny depth drift uses individual transforms, preserving each object's perspective. */
.background-topic{translate:var(--object-sway,0px) calc(-1 * var(--object-drift,0px));rotate:var(--object-turn,0deg)}
.background-pane{translate:0 calc(var(--object-drift,0px) * .4);rotate:calc(var(--object-turn,0deg) * -.5)}
@media(prefers-reduced-motion:reduce){
 .background-topic,.background-pane{translate:none;rotate:none}
}

/* The overview has its own six-page glass arrangement, separate from chapter motifs. */
body:is([data-view="guides"],[data-view="welcome"]) .background-objects,body:is([data-view="guides"],[data-view="welcome"]) [data-background-chapter="guides"]{opacity:1}
.motif-guides .background-topic{top:15vh;right:-5vw;transform:perspective(850px) rotateX(calc(12deg + var(--object-mouse-x,0deg))) rotateY(calc(-18deg + var(--object-mouse-y,0deg))) rotateZ(-13deg);opacity:.62}
body:is([data-view="guides"],[data-view="welcome"]) :is(.topbar,.mobile-nav){background:linear-gradient(125deg,#ffffff26,#ffffff0a 48%,#ffffff14);backdrop-filter:blur(5px) saturate(125%);-webkit-backdrop-filter:blur(5px) saturate(125%)}
body:is([data-view="guides"],[data-view="welcome"]) .sidebar{backdrop-filter:blur(8px) saturate(130%);-webkit-backdrop-filter:blur(8px) saturate(130%)}
body:is([data-view="guides"],[data-view="welcome"]) .overview-chapter-card{background:linear-gradient(125deg,#ffffff52,#ffffff2e 52%,#ffffff40);backdrop-filter:blur(7px) saturate(120%);-webkit-backdrop-filter:blur(7px) saturate(120%)}
@media(max-width:620px){.motif-guides .background-topic{top:145px;right:-105px;opacity:.55}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 body:is([data-view="guides"],[data-view="welcome"]) :is(.topbar,.mobile-nav,.overview-chapter-card){background:#f8fafd;backdrop-filter:none;-webkit-backdrop-filter:none}
 body:is([data-view="guides"],[data-view="welcome"]) .sidebar{background:#001056;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* A stable crop window keeps the surrounding task layout still during orientation. */
.screenshot-scene{position:absolute;inset:0;display:block;transform-origin:0 0}
.screenshot-scene>img{display:block;position:absolute;max-width:none;object-fit:fill}
.screenshot-scene .click-mark b{transform-origin:0 0}
@media(prefers-reduced-motion:reduce){[data-replay-zoom]{display:none}}

/* Selection does not change the title's available width or weight. */
.step.selected .step-select strong{font-weight:620}
body[data-view="guide"]{overflow-anchor:none}
.visual-card .screen-trigger{height:var(--preview-height,330px);display:grid;place-items:center;padding:12px}
.visual-card .screen-frame{width:min(calc(100% * var(--preview-room-scale,1)),calc(var(--natural-width) * var(--preview-image-scale,1)),calc((var(--preview-height,330px) - 24px) * var(--frame-ratio)))}
/* Image and target boxes become visible together after decoding. */
.screen-frame[data-image-state="loading"]>:not(.screenshot-load-status),.screen-frame[data-image-state="error"]>:not(.screenshot-load-status){visibility:hidden}
.screenshot-load-status{display:none}
.screen-frame:not([data-image-state="ready"])>.screenshot-load-status{position:absolute;inset:0;display:grid;place-items:center;padding:14px;color:#45526a;font-size:13px;line-height:1.5;text-align:center;background:#f4f7fa}
@media(max-width:620px){
 .visual-card .screen-trigger{padding:8px}
 .visual-card .screen-frame{width:min(100%,var(--natural-width),calc((var(--preview-height,230px) - 16px) * var(--frame-ratio)))}
}

/* Counts and direct image tabs stay near the preview; sequential controls live in the dock. */
.step-image-count{display:block;width:fit-content;margin-top:6px;font-size:12px;font-weight:500;line-height:1.5;color:#506580}
.visual-image-count{font-size:13px;line-height:1.5;color:#40516b;font-variant-numeric:tabular-nums;margin:0 0 8px}
.visual-image-count strong{color:#233b65;font-weight:650}
.visual-sequence .visual-tabs{margin-bottom:14px}
.visual-tabs>button{display:inline-flex;align-items:center;gap:7px}
.visual-tab-number{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:#536580}
@media(max-width:620px){
 .step-image-count{font-size:11px;margin-top:4px}
 .visual-image-count{font-size:12px;margin-bottom:7px}
 .task-card>.visual-card .visual-sequence .visual-tabs{margin-bottom:12px}
}

.modal-image-position{display:block;margin-top:2px;font-size:12px;line-height:1.5;font-weight:500;color:#465a76}

/* The dock changes its real geometry, keeping labels and icons crisp. */
.guide-action-dock .step-back{padding:0;min-width:0;flex-shrink:0;overflow:hidden}
.guide-action-dock .step-flow-actions>.btn{flex:none;min-width:0}
.guide-action-dock[data-dock-morphing] .next-step-copy{flex:1;overflow:hidden}
.guide-action-dock[data-dock-morphing] .step-flow-actions{min-width:0}
/* A short first-visit introduction uses the same clear material as the guides. */
.intro-page{max-width:880px;margin:20px auto 28px}
.intro-panel{border-radius:24px;padding:clamp(28px,4vw,52px);background:linear-gradient(125deg,#ffffff52,#ffffff2e 52%,#ffffff40);backdrop-filter:blur(7px) saturate(120%);-webkit-backdrop-filter:blur(7px) saturate(120%)}
.intro-panel h1{font-size:clamp(30px,3vw,42px);font-weight:680;letter-spacing:-1.2px;line-height:1.15;color:#14264c;max-width:620px}
.intro-lead{font-size:18px;line-height:1.65;color:#3e506b;max-width:620px;margin-top:18px}
.intro-instructions{list-style:none;counter-reset:intro;margin:32px 0;padding:0}
.intro-instructions li{counter-increment:intro;display:flex;gap:18px;padding:20px 0;border-top:1px solid #253b641a}
.intro-instructions li::before{content:counter(intro,decimal-leading-zero);font-size:12px;font-weight:650;color:#476080;padding-top:4px;font-variant-numeric:tabular-nums}
.intro-instructions h2{font-size:17px;line-height:1.45;font-weight:640;letter-spacing:-.15px;color:#1c3155}
.intro-instructions p{font-size:16px;line-height:1.6;color:#41536d;margin-top:5px}
.intro-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.intro-actions>span{font-size:13px;color:#4b5e79}
.about-guides-link{font-size:13px;color:#354f7b;min-height:32px;padding:3px 0;text-decoration:underline;text-underline-offset:3px}
.about-guides-link:hover{color:#174ca5}
@media(max-width:620px){
 .intro-page{margin:4px auto 12px}
 .intro-panel{padding:26px 21px;border-radius:20px}
 .intro-panel h1{font-size:30px;letter-spacing:-.8px}
 .intro-lead{font-size:16px;line-height:1.6;margin-top:14px}
 .intro-instructions{margin:24px 0 20px}
 .intro-instructions li{padding:17px 0;gap:12px}
 .intro-instructions h2{font-size:16px}
 .intro-instructions p{font-size:15px}
 .intro-actions{gap:14px}
 .about-guides-link{font-size:12px}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.intro-panel{background:#f8fafd;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Keep home within reach alongside the current chapter context. */
.topbar-actions>.instructions-shortcut{white-space:nowrap;font-size:13px;min-height:40px;padding:9px 12px}
button.mobile-site-title{text-align:left;min-width:0;padding:0;min-height:40px;border-radius:6px}
@media(max-width:900px){
 .topbar-actions>.instructions-shortcut{font-size:12px;padding:8px 10px}
 button.mobile-site-title{white-space:nowrap}
}
@media(max-width:360px){
 .topbar-actions>.instructions-shortcut{padding-inline:8px}
 button.mobile-site-title{font-size:15px;letter-spacing:-.4px}
}

.screenshot-retry{display:block;margin:10px auto 0;min-height:44px;padding:8px 12px;color:#254e92}
.screen-trigger:disabled{opacity:1;background:transparent;color:inherit}

/* An opening glass surface and its content share one origin, with no incoming fade. */
.content[data-navigation-expanding]{position:relative;isolation:isolate}
.content[data-navigation-expanding]>.navigation-reveal{position:relative;z-index:2;will-change:transform,clip-path}
.content[data-navigation-expanding]>.chapter-navigation{position:relative;z-index:4}
.navigation-snapshot{position:fixed!important;z-index:0!important;pointer-events:none!important;overflow:hidden;box-sizing:border-box;transform:none!important;user-select:none}
.navigation-expansion-shell{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;border:1px solid transparent}
body:has(.content[data-navigation-expanding]) .sidebar{z-index:10}
body:has(.content[data-navigation-expanding]) .topbar{z-index:11}
@media(prefers-reduced-motion:reduce){.navigation-snapshot,.navigation-expansion-shell{display:none}.navigation-reveal{clip-path:none!important;transform:none!important}}

/* Returning pages shrink above the destination card or pill. */
.content[data-navigation-expanding="returning"] h1:focus{outline:none}
.navigation-snapshot.is-returning{z-index:3!important;overflow:visible}
.navigation-snapshot.is-returning .navigation-reveal{position:relative;will-change:transform,clip-path}
.navigation-expansion-shell.is-returning{z-index:2}

/* Practice is the final stop in the existing checklist. */
.practice-panel .practice-assignment{font-size:19px;line-height:1.7;color:#24334c;margin:22px 0 20px}
.practice-panel .practice-check{font-size:16px;line-height:1.65;color:#46556c;margin:0 0 22px}
.practice-check strong{font-weight:650;color:#293952}
.practice-reference-note{font-size:14px;line-height:1.65;color:#536580;border-top:1px solid #293a5d20;padding-top:18px}
.practice-status{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#28715e;margin-top:18px}
.practice-status svg{width:17px;height:17px}
@media(max-width:620px){
 .practice-panel .practice-assignment{font-size:17px;margin-top:16px}
 .practice-panel .practice-check{font-size:15px}
 .practice-reference-note{font-size:14px}
}

/* Preview height and image fit grow together when the sidebar is collapsed. */
@property --preview-height{syntax:"<length>";inherits:true;initial-value:330px}
@property --preview-image-scale{syntax:"<number>";inherits:true;initial-value:1}
@media(prefers-reduced-motion:no-preference){
 .visual-card[data-preview-ready="true"]{transition:--preview-height .36s cubic-bezier(.22,.68,.2,1),--preview-image-scale .36s cubic-bezier(.22,.68,.2,1)}
}

/* A light unsharp mask improves screenshot edge contrast without changing geometry.
   It cannot recover detail missing from a compressed or low-resolution original. */
.screenshot-filter-defs{position:absolute;pointer-events:none;overflow:hidden}
.screen-frame img{filter:url(#screenshot-clarity)}
/* Leave a small window-relative margin; the fit camera uses the remaining height. */
.screenshot-modal{padding:clamp(12px,2vw,40px)}
.screenshot-dialog{max-width:100%;max-height:calc(100dvh - clamp(24px,4vw,80px))}
.screenshot-dialog .shot-canvas{max-height:84dvh}

/* Keep the stable preview stage, but let the white surround hug the image. */
.visual-card .screen-trigger{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.visual-card .screen-trigger:not(:disabled):not([aria-disabled="true"]):not(:active):hover{box-shadow:none;filter:none}
.visual-card .screen-frame{border-radius:4px;box-shadow:0 0 0 6px #fff,0 0 0 7px #2034551a}

/* Give the sidebar control a visible label and its own clear glass surface. */
.sidebar-heading{flex-direction:column;align-items:stretch;gap:14px}
.sidebar-heading .brand{flex-shrink:0;min-height:30px}
.sidebar .sidebar-toggle{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:42px;height:42px;padding:8px 12px;color:#fff;background:linear-gradient(180deg,#ffffff26,#ffffff16);border:1px solid #ffffff52;box-shadow:inset 0 .5px 0 #ffffff59,0 3px 10px #000b2521}
.sidebar-toggle-label{font-size:13px;font-weight:550;line-height:1.2;white-space:nowrap}
.sidebar .sidebar-toggle svg{width:20px;height:20px}
.sidebar .sidebar-toggle:hover{background:linear-gradient(180deg,#ffffff38,#ffffff21);border-color:#ffffff75}
body[data-sidebar-slim="true"] .sidebar .sidebar-toggle{flex-direction:column;gap:3px;width:46px;height:50px;min-height:50px;align-self:center;padding:5px 3px}
body[data-sidebar-slim="true"] .sidebar-toggle-label{font-size:10px;font-weight:550}

/* Ice-blue glass nav control: a shallow reflection and an uneven, moving hairline.
   Visual reference: https://codepen.io/odibixie/details/vEYEWQR
   Scoped to the navigation toggle; labels and icons remain above its reflections. */
@property --nav-rim-angle{syntax:"<angle>";inherits:false;initial-value:-90deg}
.sidebar .sidebar-toggle,.sidebar .sidebar-toggle:hover{
 position:relative;isolation:isolate;color:#142e58;user-select:none;-webkit-user-select:none;
 background:linear-gradient(120deg,#d5e5ffd9,#adc9f2bf 48%,#c5d9f8cc);
 border-color:#e4efff8c;
 backdrop-filter:blur(3px) saturate(120%);-webkit-backdrop-filter:blur(3px) saturate(120%);
 box-shadow:inset 0 1.5px 2px #0c35431a,inset 0 -1.5px 2px #f1f7ffa3,inset 0 0 0 1px #ffffff1a,0 3px 7px #00102c24;
}
.sidebar-toggle>svg,.sidebar-toggle-label{position:relative;z-index:2}
.sidebar-toggle::before{
 content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(115deg,#fff0 28%,#ffffff40 46%,#ffffff0d 56%,#fff0 70%);
 background-size:220% 220%;background-position:72% 50%;
 transition:background-position .45s cubic-bezier(.25,1,.5,1);
}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
 .sidebar .sidebar-toggle{border-color:transparent}
 .sidebar-toggle::after{
  content:"";position:absolute;inset:-1px;z-index:3;pointer-events:none;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--nav-rim-angle) at 50% 50%,#0c344b66 0deg,#0c344b00 40deg,#ffffffc7 88deg,#ffffff63 135deg,#153c566b 180deg,#153c5600 220deg,#ffffffa3 270deg,#ffffff63 315deg,#0c344b66 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  transition:--nav-rim-angle .4s cubic-bezier(.25,1,.5,1);
 }
}
.sidebar .sidebar-toggle:focus-visible{outline:2px solid #d5e8ff;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
 .sidebar .sidebar-toggle:not(:disabled):not([aria-disabled="true"]):not(:active):hover{
  background:linear-gradient(120deg,#d5e5ffd9,#adc9f2bf 48%,#c5d9f8cc);border-color:transparent;filter:none;
  box-shadow:inset 0 1px 1.5px #0c35431a,inset 0 -1px 1.5px #f1f7ffb3,inset 0 0 0 1px #ffffff26,0 2px 6px #00102c29;
 }
 .sidebar-toggle:hover::before{background-position:54% 50%}
 .sidebar-toggle:hover::after{--nav-rim-angle:-116deg}
}
.sidebar .sidebar-toggle:not(:disabled):not([aria-disabled="true"]):active{filter:brightness(.97);scale:.985;box-shadow:inset 0 1px 3px #103a4826,0 1px 3px #00102c21}
.sidebar-toggle:active::before{background-position:44% 44%}
.sidebar-toggle:active::after{--nav-rim-angle:-80deg}
@media(prefers-reduced-motion:reduce){
 .sidebar-toggle::before,.sidebar-toggle::after{transition:none}
 .sidebar-toggle:is(:hover,:active)::before{background-position:72% 50%}
 .sidebar-toggle:is(:hover,:active)::after{--nav-rim-angle:-90deg}
 .sidebar .sidebar-toggle:not(:disabled):not([aria-disabled="true"]):active{scale:none}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 .sidebar .sidebar-toggle{background:#cadaf5;color:#142e58;border-color:#edf5ff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
 .sidebar-toggle::before,.sidebar-toggle::after{display:none}
 .sidebar .sidebar-toggle:not(:disabled):not([aria-disabled="true"]):not(:active):hover{background:#d9e7fc;border-color:#edf5ff;box-shadow:none}
}

/* Shared button reflections sit above existing fills and below the label.
   Backgrounds, text colors, sizing, selection gliders and pressed feedback stay local. */
@property --button-rim-angle{syntax:"<angle>";inherits:false;initial-value:-90deg}
:is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])){position:relative;isolation:isolate;user-select:none;-webkit-user-select:none}
:is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"])::before{
 content:"";position:absolute;inset:1px;z-index:-1;pointer-events:none;border-radius:inherit;
 background:linear-gradient(115deg,#fff0 28%,#ffffff2e 46%,#ffffff08 56%,#fff0 70%);
 background-size:220% 220%;background-position:72% 50%;opacity:var(--button-sheen-opacity,.7);
 transition:background-position .45s cubic-bezier(.25,1,.5,1),opacity .25s ease;
}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
 :is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"])::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:.75px;
  background:conic-gradient(from var(--button-rim-angle) at 50% 50%,#18325547 0deg,#18325500 40deg,#ffffffb3 88deg,#ffffff4d 135deg,#18325547 180deg,#18325500 220deg,#ffffff99 270deg,#ffffff4d 315deg,#18325547 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  opacity:var(--button-rim-opacity,.6);
  transition:--button-rim-angle .4s cubic-bezier(.25,1,.5,1),opacity .25s ease;
 }
}
/* Text actions get the reflection only during interaction, retaining their light treatment. */
.text-button:not([data-reset]){--button-sheen-opacity:0;--button-rim-opacity:0}
@media(hover:hover) and (pointer:fine){
 :is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"]):hover::before{background-position:54% 50%}
 :is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"]):hover::after{--button-rim-angle:-116deg}
 .text-button:not([data-reset]):hover{--button-sheen-opacity:.45;--button-rim-opacity:.35}
}
:is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"]):active::before{background-position:44% 44%}
:is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"]):active::after{--button-rim-angle:-80deg}
.text-button:not([data-reset]):active{--button-sheen-opacity:.3;--button-rim-opacity:.25}
@media(prefers-reduced-motion:reduce){
 :is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"])::before,:is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"])::after{transition:none}
 :is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"]):is(:hover,:active)::before{background-position:72% 50%}
 :is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset])):not(:disabled):not([aria-disabled="true"]):is(:hover,:active)::after{--button-rim-angle:-90deg}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 :is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset]))::before,:is(.btn,.icon-button,.zoom-control,.step-back,button[data-reset],.library-categories>button,.mobile-options>summary,.text-button:not([data-reset]))::after{display:none}
}

/* Chapter pills retain their fills and shared selection layer.
   Reflections stay below the number and label, so the moving glider never washes out text. */
:is(.chapter-selector.compact-chapters>.chapter-card,.chapter-selector.compact-chapters>.selection-glider--chapter-card)::before{
 content:"";position:absolute;inset:1px;z-index:0;border-radius:inherit;pointer-events:none;
 padding:0;-webkit-mask:none;mask:none;opacity:.36;
 background:linear-gradient(115deg,#fff0 28%,#ffffff2e 46%,#ffffff08 56%,#fff0 70%);
 background-size:220% 220%;background-position:72% 50%;
 transition:background-position .45s cubic-bezier(.25,1,.5,1);
}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
 :is(.chapter-selector.compact-chapters>.chapter-card,.chapter-selector.compact-chapters>.selection-glider--chapter-card)::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:.65px;opacity:.4;
  background:conic-gradient(from var(--button-rim-angle) at 50% 50%,#18325547 0deg,#18325500 40deg,#ffffffb3 88deg,#ffffff4d 135deg,#18325547 180deg,#18325500 220deg,#ffffff99 270deg,#ffffff4d 315deg,#18325547 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  transition:--button-rim-angle .4s cubic-bezier(.25,1,.5,1);
 }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .chapter-selector.compact-chapters>.chapter-card:hover::before,
 .chapter-selector.compact-chapters:has(>.chapter-card.selected:hover)>.selection-glider--chapter-card::before{background-position:54% 50%}
 .chapter-selector.compact-chapters>.chapter-card:hover::after,
 .chapter-selector.compact-chapters:has(>.chapter-card.selected:hover)>.selection-glider--chapter-card::after{--button-rim-angle:-116deg}
}
@media(prefers-reduced-motion:no-preference){
 .chapter-selector.compact-chapters>.chapter-card:active::before,
 .chapter-selector.compact-chapters:has(>.chapter-card.selected:active)>.selection-glider--chapter-card::before{background-position:44% 44%}
 .chapter-selector.compact-chapters>.chapter-card:active::after,
 .chapter-selector.compact-chapters:has(>.chapter-card.selected:active)>.selection-glider--chapter-card::after{--button-rim-angle:-80deg}
}
@media(prefers-reduced-motion:reduce){
 :is(.chapter-selector.compact-chapters>.chapter-card,.chapter-selector.compact-chapters>.selection-glider--chapter-card)::before,
 :is(.chapter-selector.compact-chapters>.chapter-card,.chapter-selector.compact-chapters>.selection-glider--chapter-card)::after{transition:none}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 :is(.chapter-selector.compact-chapters>.chapter-card,.chapter-selector.compact-chapters>.selection-glider--chapter-card)::before,
 :is(.chapter-selector.compact-chapters>.chapter-card,.chapter-selector.compact-chapters>.selection-glider--chapter-card)::after{display:none}
}

/* Nav chapters: the existing selection and hover gliders carry the stronger material.
   Resting chapter rows get only a faint reflection; their fills and text colors stay intact. */
.sidebar .chapter-toggle{position:relative;user-select:none;-webkit-user-select:none;--nav-chapter-sheen:.1;--nav-chapter-rim:.14}
.sidebar .chapter-toggle>span{position:relative;z-index:1}
.sidebar>nav>.selection-glider--chapter{--nav-chapter-sheen:.44;--nav-chapter-rim:.48;box-shadow:inset 0 1px 0 #ffffff26,inset 0 -1px 1.5px #ffffff12,0 2px 4px #000b2014}
.sidebar>nav>.nav-hover-glider[data-nav-kind="chapter"]{--nav-chapter-sheen:.3;--nav-chapter-rim:.32}
.sidebar>nav.has-selection-gliders .chapter-toggle.selected{--nav-chapter-sheen:0;--nav-chapter-rim:0}
:is(.sidebar .chapter-toggle,.sidebar>nav>.selection-glider--chapter,.sidebar>nav>.nav-hover-glider[data-nav-kind="chapter"])::before{
 content:"";position:absolute;inset:1px;z-index:0;border-radius:inherit;pointer-events:none;
 opacity:var(--nav-chapter-sheen);background:linear-gradient(115deg,#fff0 28%,#ffffff30 46%,#ffffff08 56%,#fff0 70%);
 background-size:220% 220%;background-position:72% 50%;
 transition:background-position .45s cubic-bezier(.25,1,.5,1);
}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
 :is(.sidebar .chapter-toggle,.sidebar>nav>.selection-glider--chapter,.sidebar>nav>.nav-hover-glider[data-nav-kind="chapter"])::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;padding:.65px;
  opacity:var(--nav-chapter-rim);
  background:conic-gradient(from var(--button-rim-angle) at 50% 50%,#000b204d 0deg,#000b2000 40deg,#ffffffb3 88deg,#ffffff4d 135deg,#000b204d 180deg,#000b2000 220deg,#ffffff99 270deg,#ffffff4d 315deg,#000b204d 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  transition:--button-rim-angle .4s cubic-bezier(.25,1,.5,1);
 }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .sidebar .chapter-toggle:hover::before,
 .sidebar>nav:has(.chapter-toggle.selected:hover)>.selection-glider--chapter::before,
 .sidebar>nav>.nav-hover-glider[data-nav-kind="chapter"].is-visible::before{background-position:54% 50%}
 .sidebar .chapter-toggle:hover::after,
 .sidebar>nav:has(.chapter-toggle.selected:hover)>.selection-glider--chapter::after,
 .sidebar>nav>.nav-hover-glider[data-nav-kind="chapter"].is-visible::after{--button-rim-angle:-112deg}
}
@media(prefers-reduced-motion:no-preference){
 .sidebar .chapter-toggle:active::before,
 .sidebar>nav:has(.chapter-toggle.selected:active)>.selection-glider--chapter::before{background-position:44% 44%}
 .sidebar .chapter-toggle:active::after,
 .sidebar>nav:has(.chapter-toggle.selected:active)>.selection-glider--chapter::after{--button-rim-angle:-80deg}
}
@media(prefers-reduced-motion:reduce){
 :is(.sidebar .chapter-toggle,.sidebar>nav>.selection-glider--chapter,.sidebar>nav>.nav-hover-glider[data-nav-kind="chapter"])::before,
 :is(.sidebar .chapter-toggle,.sidebar>nav>.selection-glider--chapter,.sidebar>nav>.nav-hover-glider[data-nav-kind="chapter"])::after{transition:none}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 :is(.sidebar .chapter-toggle,.sidebar>nav>.selection-glider--chapter,.sidebar>nav>.nav-hover-glider[data-nav-kind="chapter"])::before,
 :is(.sidebar .chapter-toggle,.sidebar>nav>.selection-glider--chapter,.sidebar>nav>.nav-hover-glider[data-nav-kind="chapter"])::after{display:none}
 .sidebar>nav>.selection-glider--chapter{box-shadow:inset 0 0 0 1px #9eb1d6}
}


/* Step reflections travel with the existing selection surface; copy stays still. */
.task-card>.step{--step-sheen:.1;--step-rim:0}
.task-card.has-selection-gliders>.step.selected{--step-sheen:0}
.task-card>.selection-glider--step{--step-sheen:.42;--step-rim:.38}
.task-card>.step .step-select{position:relative;z-index:1;user-select:none;-webkit-user-select:none}
:is(.task-card>.step,.task-card>.selection-glider--step)::before{
 content:"";position:absolute;inset:1px;z-index:0;border-radius:12px;pointer-events:none;
 opacity:var(--step-sheen);background:linear-gradient(115deg,#fff0 28%,#ffffff30 46%,#ffffff08 56%,#fff0 70%);
 background-size:220% 220%;background-position:72% 50%;
 transition:opacity .2s ease,background-position .45s cubic-bezier(.25,1,.5,1);
}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
 .task-card>.selection-glider--step::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;padding:.65px;opacity:var(--step-rim);
  background:conic-gradient(from var(--button-rim-angle) at 50% 50%,#18325547 0deg,#18325500 40deg,#ffffffb3 88deg,#ffffff4d 135deg,#18325547 180deg,#18325500 220deg,#ffffff99 270deg,#ffffff4d 315deg,#18325547 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  transition:--button-rim-angle .4s cubic-bezier(.25,1,.5,1);
 }
}
/* Keep the two header actions translucent instead of swapping to an opaque hover fill. */
.topbar-actions>.btn.secondary{
 --header-button-fill:linear-gradient(115deg,#ffffffa3,#ffffff59 55%,#ffffff8c);
 background:var(--header-button-fill);
 --button-sheen-opacity:.48;--button-rim-opacity:.38;
}
@media(hover:hover) and (pointer:fine){
 .task-card .step-select:not(:disabled):not(:active):hover{box-shadow:none;filter:none}
 .task-card>.step:not(.selected):hover{--step-sheen:.3}
 .task-card>.step:hover::before,
 .task-card:has(>.step.selected:hover)>.selection-glider--step::before{background-position:54% 50%}
 .task-card:has(>.step.selected:hover)>.selection-glider--step::after{--button-rim-angle:-112deg}
 .topbar-actions>.btn.secondary:not(:disabled):not([aria-disabled="true"]):not(:active):hover{
  background:var(--header-button-fill);background-color:var(--header-hover-tint,#b6d2ff70);
  color:#173d73;border-color:#91abd58c;transform:translateY(-1px);
  filter:none;box-shadow:0 5px 14px #23406b24,inset 0 1px 0 #fff;
  --button-sheen-opacity:.85;--button-rim-opacity:.65;
 }
}
@media(prefers-reduced-motion:reduce){
 :is(.task-card>.step,.task-card>.selection-glider--step)::before,
 .task-card>.selection-glider--step::after{transition:none;background-position:72% 50%;--button-rim-angle:-90deg}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 :is(.task-card>.step,.task-card>.selection-glider--step)::before,
 .task-card>.selection-glider--step::after{display:none}
 .topbar-actions>.btn.secondary{--header-button-fill:#f8fafd;--header-hover-tint:#d9e6f8}
}

/* Keep the preview anchored while titles wrap and Replay changes to Skip zoom. */
.visual-card .visual-heading-copy{min-height:var(--preview-heading-height,0px)}
.visual-tools>[data-replay-zoom]{min-width:84px;justify-content:center}

@media(prefers-reduced-motion:reduce){
 .topbar-actions>.btn.secondary:not(:disabled):not([aria-disabled="true"]):not(:active):hover{transform:none}
}

/* Completion reward and a clean, printable certificate. */
.certificate-reward{display:flex;align-items:center;gap:18px;padding:23px 26px;margin-top:25px;border-radius:20px}
.certificate-reward-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#c5ddf833;color:#2a5f94;flex-shrink:0}
.certificate-reward.is-earned .certificate-reward-icon{background:#d4eee7a8;color:#216d57}
.certificate-reward>div{flex:1;min-width:0}
.certificate-reward h2{font-size:19px;line-height:1.4;color:#172d4c}
.certificate-reward p{font-size:15px;line-height:1.5;color:#415772;margin-top:5px}
.certificate-remaining{font-size:14px;white-space:nowrap;color:#415772;font-variant-numeric:tabular-nums}
.certificate-modal{padding:26px;overflow-y:auto;align-items:safe center}
.certificate-dialog{width:min(1020px,100%);max-width:none;max-height:calc(100dvh - 52px);overflow-y:auto;padding:27px;border-radius:23px;background:#f6f9fcf5}
.certificate-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}
.certificate-dialog h2{margin:6px 0 0;font-size:26px;letter-spacing:-.6px}
.certificate-dialog .eyebrow{font-size:11px}
#certificate-form{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.certificate-name-field{flex:1;min-width:0}
.certificate-name-field label{display:block;font-size:14px;font-weight:600;color:#243c5d;margin-bottom:8px}
.certificate-name-field input{width:100%;border:1px solid #a9bed5;border-radius:10px;background:#ffffffd9;padding:11px 13px;font-size:16px;color:#182b45;min-height:46px}
.certificate-name-field small{display:block;font-size:12px;color:#52667c;margin-top:6px;line-height:1.5}
#certificate-form>.btn{align-self:center;margin-top:2px}
.certificate-output[hidden]{display:none}
.certificate-preview{border:1px solid #d6e0eb;border-radius:3px;overflow:hidden;background:white;box-shadow:0 8px 25px #10274f0d}
.certificate-preview>svg{display:block;width:100%;height:auto}
.certificate-save-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-top:20px}
.certificate-dialog .certificate-save-note{font-size:12px;color:#52667c;text-align:right;margin-top:12px;line-height:1.5}
@media(max-width:620px){
 .certificate-reward{padding:20px 18px;gap:12px;flex-wrap:wrap;border-radius:17px}
 .certificate-reward h2{font-size:17px}.certificate-reward p{font-size:14px}
 .certificate-reward>.btn{width:100%}.certificate-remaining{padding-left:56px}
 .certificate-modal{padding:12px}
 .certificate-dialog{padding:20px 16px;max-height:calc(100dvh - 24px);border-radius:20px}
 .certificate-dialog>header{margin-bottom:20px}
 .certificate-dialog h2{font-size:23px}
 #certificate-form{display:block}
 #certificate-form>.btn{margin-top:14px;width:100%}
 .certificate-save-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
 .certificate-dialog .certificate-save-note{text-align:left}
}