.demo-page { background:#fffaf0; }
.demo-back { color:#454941; text-decoration:none; font-size:13px; font-weight:770; padding:11px 17px; border:1px solid #ded6c5; border-radius:11px; background:#fff; }
.demo-back:hover {background:#f5eccf;}
.demo-intro { background:linear-gradient(120deg,#fffaf0 0%,#ffedba 100%); padding:65px 0 59px; overflow:hidden; }
.demo-intro-inner { display:grid; grid-template-columns:1.45fr .55fr; gap:55px; align-items:center; }
.demo-eyebrow { display:inline-flex;align-items:center;gap:9px; font-weight:880;letter-spacing:1.6px;color:#81620c;font-size:11px; }
.demo-dot {width:8px;height:8px;border-radius:50%;background:#e2ab17;box-shadow:0 0 0 5px #f5d986;}
.demo-intro h1 { margin:19px 0; font-size:clamp(38px,4.6vw,62px); max-width:690px; }
.demo-intro h1 em {font-style:normal; color:#b7820e;}
.demo-intro p {max-width:600px;font-size:16px;line-height:1.7;color:#595948;}
.demo-trust { display:flex;gap:13px;flex-wrap:wrap; margin-top:22px; }
.demo-trust span {border:1px solid #ead493;background:#fff9ea; font-size:11px;font-weight:820;border-radius:100px;padding:8px 12px;white-space:nowrap;}
.demo-intro-seal {background:#2a352c; color:white; border:6px solid #e9bb43;border-radius:23px;min-height:230px;display:flex; flex-direction:column;align-items:center;justify-content:center; gap:16px; transform:rotate(3deg);box-shadow:0 22px 45px rgba(61,49,18,.17);}
.demo-intro-seal div {text-align:center;font-size:36px;font-weight:940;line-height:.9;letter-spacing:-1px;}
.demo-intro-seal small {font-size:14px;color:#efc64a;letter-spacing:2px;}
.demo-intro-seal span {text-align:center;font-size:14px;letter-spacing:.2px;color:#f0e3c3;font-weight:650;}
.demo-experience { padding-top:58px; }
.demo-topline {display:flex; align-items:center;justify-content:space-between;gap:12px; margin-bottom:14px;}
.demo-section-label {font-size:12px;color:#89680d;font-weight:890;letter-spacing:1.3px;}
.demo-safe-label {font-size:11px;font-weight:790;color:#406b4a;background:#e8f4e9;padding:6px 11px;border-radius:20px;}
.demo-shell {background:white;border:1px solid #d9d8ce; border-radius:22px;display:grid;grid-template-columns:365px minmax(0,1fr);overflow:hidden;box-shadow:0 25px 60px rgba(45,45,30,.1); min-height:490px;}
.demo-sidebar {background:#27382f;color:white;padding:29px 22px;display:flex;flex-direction:column;gap:17px;}
.demo-sidebar-heading .demo-hello {font-size:21px;font-weight:860;letter-spacing:-.4px;}
.demo-sidebar-heading p {color:#d8e3d6;font-size:12px;margin:6px 0 0;}
.demo-lesson-list {display:grid;gap:11px;}
.demo-lesson {width:100%;border:1px solid #55665a;border-radius:12px;background:#344a3c;color:white;cursor:pointer;text-align:left;display:flex;align-items:center;gap:11px;padding:15px 12px;transition:background .15s,border-color .15s;}
.demo-lesson:hover,.demo-lesson.is-selected {background:#ffefc2;color:#243027;border-color:#e7b62c;}
.demo-lesson-number {background:#e7b62c;color:#2c311e;font-size:11px;font-weight:900;padding:9px;border-radius:10px;}
.demo-lesson>span:nth-child(2) {flex:1;min-width:0;}
.demo-lesson strong {display:block;font-size:13px;line-height:1.35;}
.demo-lesson small {display:block;font-size:10px;font-weight:620;margin-top:6px;opacity:.8;line-height:1.45;}
.demo-lesson>span:last-child {font-size:18px;}
.demo-sidebar-note {margin-top:auto;border-top:1px solid #5d6e61;padding:22px 5px 4px;color:#eff5e8;}
.demo-sidebar-note strong {font-size:12px;color:#f8d36f;}
.demo-sidebar-note p {font-size:11px;color:#d6dfd3;line-height:1.65;margin:6px 0 0;}
.demo-stage {background:#fffefb; padding:35px 36px 31px;min-width:0;}
.demo-progress-top {display:flex;justify-content:space-between;gap:10px;align-items:center;color:#857c64;font-size:10px;font-weight:850;letter-spacing:1px;}
.demo-progress-track {height:7px;background:#f2ebda;border-radius:10px;margin:13px 0 28px;overflow:hidden;}
#demo-progress-fill {height:100%;width:33.333%;background:#d5a42e;transition:width .25s ease;}
.demo-question-box h2,.demo-finish h2 {font-size:clamp(25px,2.8vw,34px);line-height:1.24;margin:16px 0 11px;letter-spacing:-1.1px;}
.demo-topic-pill {display:inline-flex;color:#735319;background:#ffefc6;font-size:10px;font-weight:880;letter-spacing:1.1px;border-radius:20px;padding:7px 12px;}
.demo-question-hint {font-size:13px;color:#737366;line-height:1.65;margin:0 0 19px;}
.demo-choices {display:grid;gap:11px;}
.demo-choice {width:100%;border:1px solid #e2dfd5;border-radius:12px;text-align:left;padding:14px 16px;background:#fff;cursor:pointer;font-weight:710;line-height:1.4;color:#31382e;display:flex;gap:12px;align-items:center;transition:background .15s,border-color .15s;}
.demo-choice:hover:not(:disabled) {border-color:#cb9a22;background:#fff8df;}
.demo-choice:disabled {cursor:default;opacity:1;}
.demo-choice-mark {border:1px solid #ddd5c3;border-radius:7px;color:#8c7b52;display:grid;place-items:center;flex:0 0 26px;height:26px;font-size:11px;font-weight:860;}
.demo-choice.is-correct {background:#e8f5e7;border-color:#7bb177;}
.demo-choice.is-wrong {background:#fff0e8;border-color:#e2a290;}
.demo-choice.is-correct .demo-choice-mark {background:#3a704d;color:#fff;border-color:#3a704d;}
.demo-choice.is-wrong .demo-choice-mark {background:#bd654f;color:#fff;border-color:#bd654f;}
.demo-feedback {padding:14px 16px;border-radius:12px;margin-top:17px;font-size:13px;line-height:1.6;}
.demo-feedback.good {background:#edf7ee;border-left:4px solid #4a9258;}
.demo-feedback.review {background:#fff4dd;border-left:4px solid #c2921f;}
.demo-feedback strong {display:block;color:#28362e;font-size:14px;}
.demo-actions {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:21px;}
.demo-actions .btn {font-size:13px;min-height:45px;}
#demo-action-hint {font-size:11px;color:#777970;}
.demo-finish {text-align:center;padding:40px 8px;}
.demo-finish-icon {font-size:38px;color:#d1a12b;margin-bottom:10px;}
.demo-finish p {max-width:470px;margin:10px auto 19px;color:#60675c;font-size:14px;line-height:1.75;}
.demo-finish .btn {margin-top:10px;}
.demo-followup {background:#fff3c7;border:1px solid #efd17b;border-radius:16px;margin-top:25px;padding:24px 27px;display:flex;align-items:center;justify-content:space-between;gap:25px;}
.demo-followup strong {font-size:18px;letter-spacing:-.4px;}
.demo-followup p {font-size:13px;color:#656045;margin:6px 0 0;}
.demo-followup .btn {white-space:nowrap;}
.demo-page .site-footer .footer-bottom a {color:#f4dfab;}
@media(max-width:900px){.demo-shell{grid-template-columns:295px minmax(0,1fr)}.demo-intro-inner{grid-template-columns:1fr .4fr;gap:25px}.demo-stage{padding:27px 22px}.demo-sidebar{padding:24px 16px;}}
@media(max-width:760px){.demo-intro{padding:45px 0 43px}.demo-intro-inner{display:block}.demo-intro h1{font-size:clamp(34px,8.5vw,49px)}.demo-intro p{font-size:14px}.demo-intro-seal{display:none}.demo-shell{grid-template-columns:1fr}.demo-sidebar{gap:14px;padding:23px 20px}.demo-sidebar-note{display:none}.demo-lesson-list{grid-template-columns:1fr 1fr;gap:8px}.demo-lesson{padding:11px 7px;gap:6px;align-items:start}.demo-lesson-number{padding:6px;font-size:9px}.demo-lesson strong{font-size:11px}.demo-lesson small{font-size:9px}.demo-lesson>span:last-child{display:none}.demo-stage{padding:24px 19px 25px}.demo-topline{align-items:start;flex-direction:column}.demo-followup{flex-direction:column;align-items:start;gap:14px}.demo-followup .btn{width:100%}.demo-trust{gap:7px}.demo-trust span{font-size:10px}.demo-back{font-size:11px;padding:10px 9px}.demo-page .brand-wordmark small{letter-spacing:.6px}}
@media(max-width:370px){.demo-lesson-list{grid-template-columns:1fr}.demo-lesson{align-items:center}.demo-trust span{white-space:normal}.demo-back{font-size:10px}.demo-page .brand-wordmark{display:none}}
@media(prefers-reduced-motion:reduce){#demo-progress-fill{transition:none;}}
/* Author-level button display rules must never override the browser's hidden state. */
[hidden] { display:none!important; }


/* V1.6: high-contrast return navigation */
.demo-page .demo-back,
.demo-page .demo-back:visited {
  background:#252923;
  border:1px solid #252923;
  color:#fff;
  box-shadow:0 4px 14px rgba(26,31,25,.15);
}
.demo-page .demo-back:hover {background:#383e36;border-color:#383e36;color:#fff;}
.demo-page .demo-back:focus-visible {outline:3px solid #dcb338;outline-offset:3px;}