.sample-skip { position:absolute; left:12px; top:-80px; z-index:20; padding:12px 18px; background:var(--surface-raised); color:var(--ink); border:2px solid var(--focus); border-radius:10px; }
.sample-skip:focus { top:12px; }
.sample-shell { max-width:1320px; }
.sample-brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.sample-brand span { display:grid; gap:2px; }
.sample-brand small { color:var(--muted); font-size:.78rem; }
.sample-header-link { color:var(--ink); font-weight:600; }
.sample-boundary { margin:22px 0 0; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--signal-soft); color:var(--ink); font-size:.78rem; font-weight:700; letter-spacing:.07em; }
.sample-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr); gap:32px; align-items:end; padding:34px 0 42px; }
.sample-hero h1 { font-size:clamp(2.3rem,4vw,4rem); line-height:1.06; letter-spacing:-.045em; max-width:740px; margin:10px 0 18px; }
.sample-hero .lede { max-width:660px; margin:0; }
.sample-hero-note { border-left:3px solid var(--cobalt-deep); padding:8px 0 8px 20px; color:var(--ink); }
.sample-hero-note p { margin:8px 0 0; color:var(--muted); line-height:1.55; }
.sample-layout { display:grid; grid-template-columns:240px minmax(0,1fr); align-items:start; gap:28px; padding-bottom:50px; }
.sample-rail { border:1px solid var(--line-soft); border-radius:18px; background:var(--surface-inset); padding:20px; }
.sample-rail-label { margin:0 0 16px; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.sample-step-list { display:grid; gap:8px; list-style:none; padding:0; margin:0; }
.sample-step-list button { width:100%; min-height:48px; padding:10px 12px; display:flex; align-items:center; gap:12px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.sample-step-list button span { color:var(--muted); font-variant-numeric:tabular-nums; }
.sample-step-list button:hover, .sample-step-list button[aria-current="step"] { border-color:var(--line); background:var(--surface-raised); }
.sample-step-list button[aria-current="step"] { font-weight:700; box-shadow:inset 3px 0 var(--cobalt-deep); }
.sample-help-link { display:inline-block; margin-top:20px; color:var(--ink); font-weight:600; }
.sample-main { min-width:0; }
.sample-progress-row { display:flex; align-items:center; gap:16px; margin:0 0 8px; font-size:.84rem; font-weight:700; }
.sample-progress-row progress { width:min(100%,300px); height:10px; accent-color:var(--cobalt-deep); }
.sample-status { min-height:1.4em; margin:0 0 16px; color:var(--muted); font-size:.84rem; }
.sample-panel { min-height:430px; padding:clamp(22px,4vw,42px); border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }
.sample-panel[hidden] { display:none; }
.sample-panel h2 { margin:8px 0 18px; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.14; letter-spacing:-.035em; }
.sample-panel > p { max-width:700px; line-height:1.65; }
.sample-facts, .sample-option-grid, .sample-note-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0; }
.sample-facts div { padding:18px; border:1px solid var(--line-soft); border-radius:14px; background:var(--surface-inset); }
.sample-facts span { display:block; color:var(--muted); font-size:.78rem; margin-bottom:8px; }
.sample-facts strong { display:block; }
.sample-real-step { margin-top:28px; padding:20px; border-left:3px solid var(--cobalt-deep); border-radius:0 12px 12px 0; background:var(--surface-inset); }
.sample-real-step p { margin:8px 0 0; line-height:1.6; }
.sample-note, .sample-option { display:grid; align-content:start; gap:10px; min-height:150px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface-inset); color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.sample-note small, .sample-option small { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.sample-note strong, .sample-option strong { font-size:.98rem; line-height:1.35; }
.sample-note span, .sample-option span { color:var(--muted); font-size:.82rem; line-height:1.45; }
.sample-note:hover, .sample-option:hover, .sample-note[aria-pressed="true"], .sample-option[aria-pressed="true"] { border-color:var(--cobalt-deep); background:var(--surface-raised); }
.sample-note[aria-pressed="true"], .sample-option[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--cobalt-deep); }
.sample-wall, .sample-baseline, .sample-comparison, .sample-outcome { margin:22px 0; padding:20px; border:1px solid var(--line-soft); border-radius:14px; background:var(--surface-inset); }
.sample-wall p, .sample-baseline p, .sample-comparison p, .sample-outcome p { margin:8px 0 0; color:var(--muted); line-height:1.55; }
.sample-wall ul { margin:12px 0 0; padding-left:22px; }
.sample-wall li + li { margin-top:8px; }
.sample-baseline span { display:block; color:var(--muted); font-size:.8rem; margin-bottom:8px; }
.sample-baseline strong { display:block; }
.sample-panel select { display:block; width:min(100%,420px); min-height:48px; margin:10px 0 0; }
.sample-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sample-controls { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 26px; }
.sample-controls .button, #sample-save-baseline, #sample-mark-reviewed { min-height:48px; }
.sample-controls .button:disabled, #sample-mark-reviewed:disabled { opacity:.54; cursor:not-allowed; }
.sample-after { padding:24px; border-top:1px solid var(--line-soft); }
.sample-after p { margin:8px 0 18px; line-height:1.55; }
.sample-after .chip-row { display:flex; flex-wrap:wrap; gap:10px; }
.sample-step-list button:focus-visible, .sample-note:focus-visible, .sample-option:focus-visible, .sample-header-link:focus-visible, .sample-brand:focus-visible, .sample-help-link:focus-visible, .sample-panel h2:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
@media(max-width:950px) { .sample-layout { grid-template-columns:minmax(0,1fr); } .sample-rail { min-width:0; padding:14px; } .sample-step-list { display:flex; min-width:0; overflow-x:auto; padding-bottom:4px; } .sample-step-list li { flex:0 0 auto; } .sample-step-list button { white-space:nowrap; } .sample-help-link { margin:12px 4px 0; } }
@media(max-width:700px) { .sample-hero { grid-template-columns:1fr; gap:20px; padding:28px 0; } .sample-facts, .sample-note-choices, .sample-option-grid { grid-template-columns:1fr; } .sample-note, .sample-option { min-height:100px; } .sample-panel { min-height:0; } }
@media(max-width:430px) { .sample-header-link { display:none; } .sample-boundary { font-size:.68rem; } .sample-controls .button { flex:1 1 140px; } .sample-progress-row { display:block; } .sample-progress-row progress { display:block; margin-top:8px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:0s !important; animation-duration:0s !important; } }
html[data-motion="paused"] .sample-shell *, html[data-motion="paused"] .sample-shell *::before, html[data-motion="paused"] .sample-shell *::after { scroll-behavior:auto !important; transition-duration:0s !important; animation-duration:0s !important; }