* { box-sizing: border-box; } body { margin:0; background:var(--ground); color:var(--ink); font:var(--text-md)/var(--lh-md) var(--font-text); } input { accent-color:var(--live); } button,input,textarea { font:inherit; color:inherit; } button { cursor:pointer; border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--r-2); padding:9px 16px; min-height:44px; transition:background var(--dur-1) var(--ease); } button:hover { background:var(--sunk); } button:disabled { cursor:default; opacity:.55; } button:focus-visible,a:focus-visible,textarea:focus-visible { outline:2px solid var(--live); outline-offset:4px; } a { color:var(--live-ink); } h1,h2,h3,p { margin-top:0; } h1 { font:400 clamp(36px,4.2vw,58px)/1.08 var(--font-editorial); max-width:15ch; letter-spacing:-.025em; margin-bottom:24px; } h2 { font:400 26px/32px var(--font-text); margin-bottom:16px; } h3 { font-size:17px; font-weight:500; } p { max-width:65ch; } strong { font-weight:500; } header { height:88px; padding:0 40px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line-strong); } .wordmark { color:var(--ink); font:400 32px/36px var(--font-editorial); text-decoration:none; } .wordmark span { font:12px/16px var(--font-mono); color:var(--ink-2); margin-left:12px; } .eyebrow { font:12px/16px var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin-bottom:20px; } .page { display:grid; grid-template-columns:256px minmax(0,1fr); max-width:1560px; margin:auto; min-height:calc(100vh - 160px); } .course-rail { padding:40px 24px; border-right:1px solid var(--line-strong); } .rail-title { font:26px/32px var(--font-editorial); margin-bottom:40px; } nav { display:grid; gap:8px; } nav button { text-align:left; padding:12px 4px; display:flex; gap:12px; border:0; background:transparent; font-size:14px; line-height:20px; } nav button span { color:var(--ink-2); font-family:var(--font-mono); } nav button[aria-current=step] { color:var(--live-ink); background:var(--live-soft); padding-left:12px; } .rail-note { color:var(--ink-2); font-size:12px; line-height:20px; margin-top:48px; } #storage { font-size:12px; line-height:20px; } main:focus { outline:none; } main { padding:44px 48px 64px; min-width:0; } .lede { font-size:17px; line-height:27px; color:var(--ink-2); margin-bottom:28px; max-width:58ch; } .strip { display:flex; gap:24px; border-block:1px solid var(--line-strong); padding:16px 0; margin:28px 0; font:12px/20px var(--font-mono); color:var(--ink-2); } iframe { display:block; width:100%; height:570px; border:1px solid var(--line-strong); border-radius:8px; margin:24px 0; background:var(--ground); } .primary { background:var(--ink); color:var(--surface); border-color:var(--ink); } .primary:hover { background:var(--ink-2); } .actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; align-items:center; } .quiet-button { background:transparent; font-size:14px; } .text-button { border:0; background:transparent; padding:4px 0; text-decoration:underline; font-size:14px; } .note { color:var(--ink-2); font-size:14px; line-height:20px; } .contract { border-block:1px solid var(--line-strong); margin:24px 0; padding:20px 0; } .contract li { padding:3px 0; } .contract code,pre,textarea,.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; } code { font-size:.87em; } details { margin:16px 0; } summary { cursor:pointer; font-size:14px; min-height:44px; padding:10px 0; } pre { font-size:12px; line-height:20px; overflow:auto; max-height:300px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:4px; } .editor-head { display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line-strong); border-bottom:0; padding:12px 16px; background:var(--surface); font-size:12px; } .editor { display:block; width:100%; min-height:310px; resize:vertical; border:1px solid var(--ink-2); border-radius:0 0 4px 4px; padding:20px; font-size:14px; line-height:24px; tab-size:2; background:var(--surface); } .status { font-size:var(--text-md); line-height:var(--lh-md); min-height:24px; margin:16px 0; } .score { display:flex; align-items:baseline; gap:12px; border-top:1px solid var(--line-strong); padding-top:24px; margin-top:24px; } .score .big { font:400 32px/36px var(--font-mono); } .good { color:var(--pass); } .bad { color:var(--fail); } .case { border-bottom:1px solid var(--line); margin:0; } .case summary { display:flex; justify-content:space-between; gap:16px; } .case summary span:first-child { flex:1; } .badge { font:12px/20px var(--font-mono); } .feedback { font-size:var(--text-md); line-height:var(--lh-md); margin-bottom:16px; } .reason { display:block; width:100%; min-height:100px; margin:8px 0 16px; padding:12px; border:1px solid var(--ink-2); background:var(--surface); border-radius:4px; font-family:var(--font-text); font-size:14px; line-height:20px; } .check-label { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:20px; margin:16px 0; } .check-label input { margin-top:4px; } .review-grid { display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--line-strong); margin:24px 0; } .review-grid > div { padding:24px 16px 24px 0; } .review-grid > div+div { border-left:1px solid var(--line-strong); padding-left:24px; } .review-grid p { margin:0; } .saved-state { font:12px/20px var(--font-mono); color:var(--ink-2); } footer { display:flex; justify-content:space-between; gap:16px; padding:20px 40px; border-top:1px solid var(--line-strong); font-size:12px; color:var(--ink-2); } dialog { width:min(660px,calc(100% - 32px)); border:1px solid var(--line-strong); padding:32px; background:var(--ground); color:var(--ink); } dialog::backdrop { background:rgb(41 51 45 / .2); } dialog form { text-align:right; margin-bottom:20px; } .skip { position:absolute; top:-70px; padding:12px; background:white; } .skip:focus { top:8px; } [hidden] { display:none!important; } @media(max-width:1000px) { .page { grid-template-columns:210px minmax(0,1fr); } main { padding:32px 24px; } .course-rail { padding:32px 16px; } } @media(max-width:760px) { header { height:72px; padding:0 16px; } .wordmark span { display:none; } .page { display:block; } .course-rail { padding:16px; border-right:0; border-bottom:1px solid var(--line-strong); } .course-rail > p { display:none; } .course-rail #storage:not(:empty) { display:block; margin:12px 0 0; } nav { display:flex; overflow:auto; gap:8px; } nav button { flex:none; padding:8px; } nav button:not([aria-current=step]) { font-size:0; gap:0; } nav button span { font-size:12px; } main { padding:28px 16px 40px; } h1 { font-size:38px; } .strip { gap:16px; flex-wrap:wrap; } .editor { font-size:12px; line-height:20px; padding:12px; } .review-grid { grid-template-columns:1fr; } .review-grid > div+div { border-left:0; border-top:1px solid var(--line-strong); padding-left:0; } footer { padding:16px; display:block; } footer button { display:block; } } @media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
.activity{margin:32px 0;padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}fieldset{border:0;padding:0;margin:16px 0}legend{font-size:14px;color:var(--ink-2);margin-bottom:8px}.activity h2{font-size:21px;line-height:29px}table{border-collapse:collapse;width:100%;margin:24px 0;font-size:14px}th,td{border-bottom:1px solid var(--line);text-align:left;padding:12px 8px;font-weight:400}th{font-weight:500}td:not(:first-child){font-family:var(--font-mono);font-variant-numeric:tabular-nums}.reason{min-height:110px;margin-bottom:24px}label{display:block}iframe{margin:24px 0}main>p{max-width:70ch}.course-rail nav button{min-height:44px}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--live);outline-offset:3px}@media(max-width:600px){.activity{padding:16px}table{font-size:12px}th,td{padding:8px 4px}.check-label{min-height:44px}button{min-height:44px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Keep the optional lab label legible in the compact mobile course rail. */
@media(max-width:760px){nav{flex-wrap:wrap;overflow:visible}nav>.eyebrow{flex:0 0 100%;margin:8px 0 0;white-space:nowrap}}

.studio-link{font-size:14px;line-height:20px;padding:12px 4px;display:block}@media(max-width:760px){.studio-link{flex:0 0 100%}}

/* Said once when earlier work arrives from a previous version of the course. */
.notice{max-width:70ch;margin:0 0 24px;padding:14px 16px;border:1px solid var(--line-strong);border-left:4px solid var(--ink);border-radius:var(--r-2);background:var(--surface);font-size:14px;line-height:20px}
.activity .stem{font-size:19px;line-height:28px;font-weight:500;max-width:65ch;margin-bottom:8px}
.trace{padding-left:22px;font-size:14px;line-height:22px}.trace li[data-state="decides"]{font-weight:500}.trace li[data-state="skipped"]{color:var(--ink-2)}
.trace { list-style: none; padding-left: 30px; counter-reset: rule; }
.trace li { position: relative; padding: 12px; margin: 0; border-left: 2px solid var(--line-strong); border-bottom: 1px solid var(--line); counter-increment: rule; }
.trace li::before { content: counter(rule); position: absolute; left: -28px; top: 12px; width: 22px; height: 22px; border: 1px solid var(--ink-2); border-radius: 50%; text-align: center; font: 12px/20px var(--font-mono); background: var(--ground); }
.trace li[data-state="decides"] { background: var(--live-soft); border-left: 3px solid var(--live-ink); }
.trace li[data-state="decides"]::before { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.trace li[data-state="skipped"] { border-left-style: dashed; }