@media screen {
:root{--ink:#152535;--paper:#f5f7f9;--plum:#214a61;--accent:#236475;--line:#cbd5dc;--muted:#485968}
body{font:16px/1.55 system-ui,sans-serif}
h1,h2,.phase-choice h2,.phase-number{font-family:inherit;font-weight:730}
header{padding-inline:clamp(16px,4vw,72px);height:76px}
header .brand{font-weight:760;letter-spacing:-.025em;font-size:clamp(16px,1.4vw,22px);color:var(--ink)}
header>span{font-size:14px;letter-spacing:0;font-weight:600}
button,.worksheet-link,.input-download,.phase-bottom .primary{border-radius:10px;min-height:44px}
button:focus-visible,a:focus-visible{outline:3px solid #0085c4;outline-offset:3px}
.home-page{max-width:1360px;padding:clamp(18px,3vw,42px);margin:auto}
.home-intro{max-width:none;position:relative;isolation:isolate;overflow:hidden;border-radius:24px;padding:clamp(26px,4.5vw,64px);color:white;background:#152937}
.home-intro:after{content:"";position:absolute;inset:0 0 0 69%;z-index:-1;pointer-events:none;background:repeating-linear-gradient(119deg,transparent 0 23px,#a7d4d215 24px 25px);mask-image:linear-gradient(90deg,transparent,black)}
.home-intro .eyebrow{font:700 13px/1.4 ui-monospace,monospace;letter-spacing:.13em;color:#d9fc78}
.home-intro h1{font-size:clamp(37px,5.2vw,76px);line-height:1.02;letter-spacing:-.05em;max-width:18ch;text-wrap:balance;margin:16px 0 20px}
.home-intro>p:last-child{font-size:clamp(16px,1.25vw,19px);line-height:1.6;max-width:72ch;color:#e1e9ec}
.phase-choices{gap:16px;margin-top:20px}
.phase-choice{--tint:#daf1ed;--tone:#155a56;border:1px solid #cbd5dc;border-radius:19px;padding:clamp(20px,2.1vw,32px);background:white;min-height:250px;transition:transform .18s,box-shadow .18s}
.phase-choice:nth-child(2){--tint:#e7e3ff;--tone:#4d3b8b}
.phase-choice:nth-child(3){--tint:#ffe5cb;--tone:#764017}
#homePage .phase-number{display:inline-grid;place-items:center;background:var(--tint);color:var(--tone);font:700 16px/1 ui-monospace,monospace;width:46px;height:36px;border-radius:10px}
.phase-choice h2{font-size:clamp(22px,2.1vw,33px);letter-spacing:-.04em;line-height:1.12;margin:20px 0 12px;color:var(--ink)}
.phase-choice p{font-size:16px;line-height:1.5}
.phase-action{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:14px;color:var(--tone)}
.phase-action>span{border-radius:100%;background:var(--tint);width:34px;height:34px;display:grid;place-items:center;font-size:19px}
.home-foot{margin-top:24px;align-items:center}.home-foot p{font-size:14px}
.input-schema,.drawing,.brief,.review,.feedback,details{border-radius:14px}
.input-schema figcaption,.small,.context-link,.phase-navigation a,.worksheet-link,.drawing-head button{font-size:14px}
.input-data p,.input-data li,.brief p,.expected>p:last-child,textarea{font-size:16px}
.phase-navigation{background:#eaf0f3}.phase-navigation a{min-height:44px;display:inline-flex;align-items:center}.phase-navigation nav a[aria-current=page]{color:#183f50;background:#d1e5e8;border-radius:8px}
.drawing-head{flex-wrap:wrap}.drawing-head>div{max-width:none}.worksheet-link{display:inline-flex;align-items:center}
@media(hover:hover){.phase-choice:hover{background:white;border-color:var(--tone);transform:translateY(-3px);box-shadow:0 8px 22px #16314310}}
@media(max-width:900px){.shell{display:block}.shell aside{border-right:0;border-bottom:1px solid var(--line)}#steps{display:flex;flex-wrap:wrap;overflow:visible}#steps button{min-width:0}.phase-choices{gap:12px}.phase-choice{padding:18px}.input-layout{grid-template-columns:1fr}}
@media(max-width:700px){header{height:auto;padding-block:10px}.home-intro{border-radius:18px}.phase-choices{grid-template-columns:1fr}.phase-choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;min-height:0}.phase-choice h2{margin:4px 0}.phase-choice p,.phase-action{grid-column:2}.phase-choice p{margin:4px 0 8px}.phase-action{margin:0}.home-foot p{margin-top:8px}.phase-navigation nav a{font-size:14px}.drawing-head #figureLabel{max-width:none}.phase-bottom{align-items:stretch}.modal-image{max-height:none}dialog{padding:20px}.home-intro:after{inset-inline-start:85%}}
@media(prefers-reduced-motion:reduce){.phase-choice{transition:none}.phase-choice:hover{transform:none}}
}

@media screen {
  .home-page {
    --peach: #ffac83;
    --mint: #99ddc6;
    --lilac: #c7bbff;
  }
  .home-intro {
    background: linear-gradient(115deg,#342653 0%,#463365 67%,#614778 100%);
    padding-block: clamp(26px,3.6vw,50px);
  }
  .home-intro .eyebrow {
    display: inline-block;
    padding: .22em .7em;
    border-radius: .45em;
    background: #ffe3ab;
    color: #342346;
    font: 800 clamp(22px,2.4vw,34px)/1.15 system-ui,sans-serif;
    letter-spacing: -.025em;
    margin: 0 0 4px;
  }
  .home-intro:after {
    inset: auto -3% -42% auto;
    width: clamp(200px,30vw,400px);
    aspect-ratio: 1;
    border-radius: 42% 58% 58% 42%;
    transform: rotate(-24deg);
    background: repeating-radial-gradient(ellipse at 72% 70%,transparent 0 16px,#ffd5ca45 17px 19px,transparent 20px 28px);
    mask-image: none;
  }
  .phase-choice {
    --surface: #e3f5ec;
    --tint: var(--mint);
    --tone: #114d3e;
    background: var(--surface);
    border-color: color-mix(in srgb,var(--tone) 18%,white);
    border-radius: 20px;
  }
  .phase-choice:nth-child(2) {--surface:#eeeafd;--tint:var(--lilac);--tone:#473477}
  .phase-choice:nth-child(3) {--surface:#fff0e4;--tint:var(--peach);--tone:#76371c}
  #homePage .phase-choice .phase-number {
    display: inline-grid;
    place-items: center;
    width: 43px;
    height: 35px;
    border-radius: 12px 12px 12px 3px;
    font-weight: 800;
  }
  .phase-choice p {color:#394750}
  @media (hover:hover) {
    .phase-choice:hover {background:var(--surface);box-shadow:0 8px 18px #30244815}
  }
  @media (max-width:900px) {
    .home-intro:after {opacity:.35;right:-13%}
  }
}

@media screen {
  body {--phase-surface:#f3eef9;--phase-chip:#ffe3ab;--phase-ink:#463365}
  body[data-current-phase="1"] {--phase-surface:#e3f5ec;--phase-chip:#99ddc6;--phase-ink:#114d3e}
  body[data-current-phase="2"] {--phase-surface:#eeeafd;--phase-chip:#c7bbff;--phase-ink:#473477}
  body[data-current-phase="3"] {--phase-surface:#fff0e4;--phase-chip:#ffac83;--phase-ink:#76371c}
  .input-heading,.activity-heading {
    background:linear-gradient(115deg,#342653,#513b70);color:white;
    border-radius:20px;padding:clamp(20px,3vw,40px);margin-bottom:22px;
  }
  .input-heading .lead,.activity-heading .lead {color:#f2edf9;margin-bottom:0}
  .input-heading h1,.activity-heading h2 {color:white;letter-spacing:-.035em;line-height:1.13}
  .stepmeta {color:#f0eafa;align-items:center;gap:12px}
  #stepNumber,.input-heading .eyebrow,#sidebarPhase {
    display:inline-block;background:var(--phase-chip);color:var(--phase-ink);
    border-radius:8px;padding:6px 11px;font-size:13px;letter-spacing:.06em;font-weight:750;
  }
  .phase-navigation {background:white}
  .phase-navigation nav a[aria-current="page"],#steps .active,.expected,.feedback,.review details {
    color:var(--phase-ink);background:var(--phase-surface);
  }
  .expected,.feedback {padding:18px;border-radius:14px}
  .feedback {border-color:var(--phase-chip)}
  .expected .eyebrow,.review .eyebrow {color:var(--phase-ink)}
  .primary,.progress div,nav .done .num {background:var(--phase-ink);border-color:var(--phase-ink)}
  .primary:hover {background:#342653}
  .input-schema,.source-drawing {border-top:4px solid var(--phase-chip)}
  .review {padding:clamp(16px,2.5vw,30px);background:white;border:1px solid var(--line)}
  dialog {border-radius:20px;border-top:6px solid var(--phase-chip);color:var(--ink)}
  dialog h2 {color:#463365;font-size:clamp(22px,3vw,32px);padding-right:44px}
  dialog .close {color:#463365;background:#f3eef9;min-width:44px}
  #modalContent a {color:var(--phase-ink);text-underline-offset:3px}
  #modalContent ol li::marker {font-weight:750;color:var(--phase-ink)}
  @media (max-width:700px) {
    .review-title {flex-wrap:wrap;gap:8px}
    .stepmeta {flex-wrap:wrap}
    .activity-heading h2 {font-size:clamp(25px,7.5vw,34px)}
  }
}
.input-schema .parts-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem 1.6rem;padding-left:1.7rem;font-size:.9rem;color:#344943}.parts-key li::marker{font-weight:700}.input-schema figcaption{font-size:.95rem;line-height:1.5}
.scheme-sequence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.scheme-sequence figure:last-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:12px 26px}.scheme-sequence figure:last-child h3{grid-column:1/-1}.scheme-image{position:relative;align-self:start;background:white}.scheme-sequence .scheme-image img{display:block;width:100%;height:auto;max-height:none}.design-zone{position:absolute;left:11.1%;top:23%;width:38%;height:41.1%;border:1.5px dashed #548377;border-radius:8px;pointer-events:none}.scheme-sequence h3{line-height:1.2}.scheme-sequence figcaption{font-size:1rem}@media(max-width:800px){.scheme-sequence,.scheme-sequence figure:last-child{display:block}.scheme-sequence figure{margin-bottom:16px}}
.scheme-sequence .parts-key{display:block;padding-left:2rem}.scheme-sequence .parts-key li{padding-left:.2rem;margin:.24rem 0}

.assembly-legend {padding:0 1rem;line-height:1.5}
.assembly-legend strong {color:#202934;padding:0 .2em}
.bearing-key {background:#fae3d4}
.seal-key {background:#c5e8f4}