/* Match the current master brand, global.css theme-main and controls.css. */
:host{--ink:#10182b;--muted:#5d6a80;--blue:#2543ec;--line:#e0e5ed;background:#fafbfc;color:var(--ink)}
body{background:radial-gradient(ellipse at 94% 12%,#eef1fe,transparent 32%),#fafbfc}
.explainer,.explainer[data-active-topic]{--accent:#2543ec;--accent-light:#dce4fb;border:1px solid #dce3ee;box-shadow:0 22px 44px #23356318,5px 6px 0 #e1e6f0,inset 0 1px 0 #fff}
.review-label{color:#10182b}.review-label b{color:#5d6a80}.review-label a{color:#2944d7}
.component-intro h1{font-weight:500;color:#10182b}.component-intro p{color:#5d6a80}
.topics{background:linear-gradient(140deg,#162d50,#08182f);border-bottom:1px solid #456286}
.topics button[aria-pressed=true],.topics button[aria-pressed=true]:hover{background:linear-gradient(155deg,#3d5cf9,#2341e5 55%,#1934c8);box-shadow:inset 0 3px #aebcff;color:white}
.topics button:hover{background:#263e65}.topics button{color:#d4e0f7}.topics svg{color:#a7bee9}
.scene-heading h3{font-weight:550;color:#10182b}.scene-heading p{color:#34435c}.scene-heading p strong{color:#183462;box-shadow:inset 0 -6px #e8edff}
.topic-context{border-color:#dce4f4;color:#56657b}.topic-context strong{color:#203856}.topic-context>strong:first-child{color:#10182b}
.lesson-experience{background:#f3f6fb}.chapters button[aria-pressed=true]{color:#2543ec}.experiment-prompt strong{background:#18365b}
.visual-stage,.booking-stage,.backend-stage,.care-stage{background:radial-gradient(ellipse at 75% 18%,#29497388,transparent 65%),linear-gradient(140deg,#122d4c,#06162c 72%);box-shadow:0 5px 0 #dce3ef,inset 0 1px 0 #cde0ff22;border:1px solid #456585}
.visual-stage:before{background-image:linear-gradient(#7b98da0c 1px,transparent 1px),linear-gradient(90deg,#7b98da0c 1px,transparent 1px)}
.web-page{background:#fff;border:1px solid #dce2f0;box-shadow:3px 5px 0 #d4dbea,6px 9px 0 #8496b5,0 18px 35px #0004;border-radius:3px 10px 3px 3px}
.discovery-map .web-page{min-height:246px}.page-art{height:110px;object-fit:cover;object-position:center;filter:none;border-block:1px solid #e4e9f3}.discovery-map .paper-top{margin-bottom:10px}.paper-top>span{color:#586d8c}
/* Keep faces above the fold when these landscape photographs fill shallow cards. */
.services-page .page-art{object-position:center top}.new-page .page-art{object-position:55% top}
.new-page{background:#f7f9ff;border:2px dashed #9fbae9}.new-flag{background:#dce7ff;color:#1f3e73}.new-path{color:#b4c9ef}
.is-connected .new-page{background:#fff;border:2px solid #7aafff;box-shadow:3px 5px 0 #496eab,0 0 28px #69a4ff38}.is-connected .new-flag{background:#d4e9ff;color:#244471}.is-connected .new-path,.is-connected .new-path small{color:#aad5ff}
.map-path{color:#a5bfee}.map-path small{color:#c5d6ef}.web-page>strong{font-weight:550}.paper-link{color:#355b8c}
.visual-stage select{background:#fff;color:#18304e;border-color:#b8c8e0}.index-source code{background:#edf3fe}.index-boundary{background:#233f64;border-color:#9cb9e7}.index-record{background:white;box-shadow:3px 4px #7791b4}
.intent-page{background:#edf3fa}.intent-page.is-relevant{background:#fff;outline-color:#8cbcff;box-shadow:3px 5px 0 #4f79af}.search-preview{background:#fff;box-shadow:4px 7px 0 #768db4}
.calendar{background:#fff;color:#18304e;box-shadow:5px 6px #8396b2;border:1px solid #cfdaeb}.calendar:before{background:repeating-linear-gradient(90deg,#526e9a 0 3px,transparent 3px 18px)}
.booking-rules label{color:#405a7c}.calendar .rule-hint,.calendar .object-heading>span{color:#59718d}.calendar-key{color:#4a6280}.calendar-block{background:#456494}.time-label{color:#4f688d}
.calendar-block.buffer-block{background:repeating-linear-gradient(135deg,#d0dcf5,#d0dcf5 3px,#edf2fc 3px,#edf2fc 6px)}.calendar-key span:first-child:before{background:#456494}.calendar-key span:nth-child(2):before{background:repeating-linear-gradient(135deg,#9aafd7,#9aafd7 2px,#e6edf9 2px,#e6edf9 4px)}
.booking-slots button{background:white;color:#274a78}.booking-slots button[data-unavailable=true]{background:#223a5b;color:#c8d6eb;border-color:#6b88af}.booking-slots button[aria-pressed=true]{background:#476af5;color:white}.slot-reason{color:#dbe6f6}
.enquiry-paper{background:white;border-color:#ced8e9;box-shadow:3px 5px #a1b2cb;color:#203450}.enquiry-paper .mini-label{color:#4e6b94}.enquiry-paper dd{border-color:#dce4ef}
.server-check{color:#c9d9f1}.server-check strong{color:#fff}.saved-record{background:#eaf1ff;box-shadow:4px 4px #718caf;color:#19304e}.saved-record .object-heading span{color:#19304e}.saved-record .object-heading small,.empty-record,.record-row{color:#466080}
.flow-arrow{color:#91bafb}.connected-tool{border-color:#7590b1}.connected-tool h4{color:#edf4ff}.tool-receipt{background:#fff;border-color:#cbd9ed}.tool-receipt p{color:#3b5677}.receipt-stamp{color:#356252}
.transfer-row>div>span{color:#e1edff}.transfer-row strong small,.transfer-controls>span{color:#c4d5f0}.transfer-track{background:#304a6e}.transfer-track>span{background:#7295ff}.transfer-track>.small-transfer{background:#a4cfff}.transfer-scale{color:#c2d6f3;border-color:#6b87b0}.transfer-model>small{color:#c8d8f0}
.identity-control label{color:#d4e3fb}.identity-badge{color:#b6dfd1}.access-gate{border-color:#718db2}.access-gate small{color:#d3e1f6}.protected-record,.access-refusal{background:#fff;box-shadow:4px 5px #7590b1}.protected-record .mini-label{color:#546d91}
.recovery-timeline span{color:#c6d9fa}.recovery-timeline strong{color:#eff6ff}.recovery-timeline small{color:#b6cbea}.backup-copy{background:#29466d;color:#f5f8ff}.restore-store{background:#fff;color:#253d5d}.restore-store .mini-label{color:#547098}.restore-store p{color:#4c6382}.recovery-scene>.reset{color:#cfdef9}
.service-connection{background:linear-gradient(140deg,#163253,#0a1c35);border-top:1px solid #6387b244}.service-connection .mini-label{color:#b1ccff}.service-connection a{color:#d5e5ff;border-color:#7e9cc5}.service-connection a span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #7e9cc5;border-radius:50%;color:#b7d1ff;flex-shrink:0}
.component-foot{background:#edf2f9}.component-foot>span{color:#526984}.component-foot button{color:#294a78}
/* Reuse the master site's clipped entry corner and round arrow dock. */
.action,.lesson-navigation button,.customer-booking .action,.backup-copy .action{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:47px;padding:7px 7px 7px 19px;border:0;border-radius:3px 28px 28px 3px;background:transparent;color:white;font-size:12px;font-weight:550;box-shadow:none;filter:drop-shadow(0 3px 0 #15299718)}
.action:before,.lesson-navigation button:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);background:linear-gradient(155deg,#3d5cf9,#2341e5 55%,#1934c8);box-shadow:inset 0 1px 0 #fff6,inset 0 -3px 0 #14279555;mask:radial-gradient(circle at calc(100% - 42px) 0,#0000 3px,#000 3.75px) top/100% 51% no-repeat,radial-gradient(circle at calc(100% - 42px) 100%,#0000 3px,#000 3.75px) bottom/100% 51% no-repeat}
.action>span,.lesson-navigation button>span{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;background:#f7f9ff;border:1px solid white;border-radius:50%;color:#2441d8;font-size:18px;margin:0;box-shadow:0 1px 1px #10257933,inset 0 1px 0 #fff}
.action:not(:disabled):hover,.lesson-navigation button:hover,.customer-booking .action:not(:disabled):hover,.backup-copy .action:hover{background:transparent;color:white;filter:brightness(1.08) drop-shadow(0 4px 5px #1e3ada22)}
.action:disabled,.customer-booking .action:disabled{opacity:1;background:transparent;color:#dce5f5;filter:none}.action:disabled:before{background:#314c75}.action:disabled>span{background:#435f88;color:#a9bfdc;border-color:#557198}
.lesson-navigation button:hover span{transform:rotate(-35deg)}.lesson-navigation button{max-width:100%;text-align:left}
@media(max-width:1050px){.discovery-map .web-page{min-height:155px}.discovery-map .page-art{height:108px;width:100%;border-radius:2px;object-fit:cover}.page-art{filter:none}.discovery-map .paper-top{margin:0 0 10px}.discovery-map .new-flag{top:-9px}}
@media(max-width:700px){.scene-heading h3{font-weight:550}.action,.lesson-navigation button,.customer-booking .action,.backup-copy .action{font-size:12px;gap:11px;min-height:46px;padding-left:15px}.discovery-map .web-page{min-height:156px}.discovery-map .page-art{height:114px}.service-connection a{gap:12px}.topics button[aria-pressed=true]{box-shadow:inset 3px 0 #acc5ff}}

/* Clearly clickable lesson controls, with the same blue and shaped corners as the site. */
.chapter-instruction{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;color:#18345e;font-size:12px;font-weight:650;line-height:1.4}
.chapter-instruction>span{font-size:11px;font-weight:450;color:#526684}
.chapters{display:flex;flex-wrap:wrap;gap:7px;height:auto;border:0;margin:0 0 17px;padding:0;align-items:stretch;justify-content:flex-start}
.chapters>span{display:none}
.chapters button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:38px;padding:7px 9px 7px 11px;border:1px solid #9dafed;border-radius:3px 13px 3px 3px;background:linear-gradient(135deg,#fff,#edf2ff);box-shadow:0 2px 0 #ccd6ee;color:#203f83;font-size:12px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
.chapters button .chapter-name{min-width:0}
.chapters button .chapter-open{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;padding:0;border:1px solid #b6c6ed;border-radius:50%;background:#fff;color:#2543ec;font-size:13px;font-weight:500;line-height:1}
.chapters button[aria-pressed=true]{border:1px solid #2543ec;background:linear-gradient(145deg,#3c5bf7,#2543ec 65%,#1935bf);box-shadow:0 3px 0 #122b9d,inset 0 1px 0 #fff5;color:#fff;font-weight:650}
.chapters button[aria-pressed=true] .chapter-open{background:#fff;border-color:#fff;color:#2543ec;transform:rotate(45deg)}
.chapters button:hover{border-color:#2543ec;background:#e0e8ff;box-shadow:0 5px 0 #b4c4ef;transform:translateY(-2px);color:#152f78}
.chapters button[aria-pressed=true]:hover{background:linear-gradient(145deg,#4967ff,#2543ec);color:#fff;box-shadow:0 5px 0 #122b9d}
.chapters button:active{transform:translateY(1px);box-shadow:0 1px 0 #b4c4ef}
.chapters button:focus-visible{outline:3px solid #0f234c;outline-offset:4px}
@media(max-width:1100px){.chapters button{font-size:11px;padding-inline:9px}}
@media(max-width:700px){.chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:17px}.chapters button{min-height:44px;font-size:11px;padding:7px 9px}.chapter-instruction{font-size:11px}.chapter-instruction>span{font-size:10px}.chapters button .chapter-open{flex-basis:16px;width:16px;height:16px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.chapters button{transition:none}.chapters button:hover{transform:none}}

.related-lesson{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #d5deee;padding:11px 0 0;margin:0 0 15px;font-size:11px;line-height:1.5;color:#526684}
.related-lesson button{padding:5px 0;border:0;border-bottom:1px solid #a3b5e7;background:none;color:#2343bb;font:inherit;font-weight:600;text-align:left;cursor:pointer}
.related-lesson button:hover{color:#142b8c;border-color:#2543ec}.related-lesson button:focus-visible{outline:2px solid #2543ec;outline-offset:4px}
@media(max-width:700px){.related-lesson{display:block;font-size:12px}.related-lesson>span{display:block;margin-bottom:7px}}