:root {
  color-scheme:light dark;
  --ink:#142d27; --forest:#163d31; --muted:#43594e;
  --paper:#fff9ed; --mint:#c7e9ce; --orange:#ffac70; --line:#6b8072;
  --button-ink:#142d27; --button-bg:#c7e9ce; --button-hover:#b5dcbf;
  --primary-hover:#ffbf90; --button-border:#163d31; --shadow:#163d31;
  --disabled-bg:#e0e2da; --disabled-ink:#4d584e; --focus:#3b28bc;
  --header:#fffdf6; --header-line:#d6d7c9; --divider:#c4cbbd;
  --art-shadow:#92bda0; --image-shadow:#163d3120; --warm:#fff3da;
  --reference-line:#d8d4c3; --surface:#fffdf7; --selected:#e0f1df;
  --field:#fff; --placeholder:#54655a; --chip:#e5f3e3;
  --error:#8b1813; --error-bg:#fff0ec; --section-line:#bac4b6;
  --disclosure:#e5efdf; --step-ink:#142d27;
  --display:'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;
  font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper);
  font-size:20px; line-height:1.55;
}
@media(prefers-color-scheme:dark) {
  :root {
    --ink:#f0f5eb; --forest:#bfe9cb; --muted:#bacabc;
    --paper:#101b16; --mint:#1d392e; --line:#779787;
    --button-border:#a7cdb1; --shadow:#080f0b;
    --disabled-bg:#344036; --disabled-ink:#aebcaf; --focus:#d8bbff;
    --header:#17261f; --header-line:#526857; --divider:#526857;
    --art-shadow:#0a120e; --image-shadow:#0006; --warm:#30281e;
    --reference-line:#7d715d; --surface:#18281f; --selected:#284633;
    --field:#101c16; --placeholder:#b4c5b7; --chip:#274333;
    --error:#ffb4a8; --error-bg:#44251f; --section-line:#526857;
    --disclosure:#253c2d; --step-ink:#f0f5eb;
  }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; }
a { color:inherit; text-underline-offset:.22em; }
a:hover { text-decoration-thickness:3px; }
button,input,textarea { font:inherit; }
button,a,summary,input { -webkit-tap-highlight-color:transparent; }
button,.button,summary { min-height:54px; }
button,.button {
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  border:2px solid var(--button-border); border-radius:14px; padding:.75rem 1.2rem;
  color:var(--button-ink); background:var(--button-bg); font-weight:700; cursor:pointer;
  text-decoration:none; text-align:center; box-shadow:0 4px 0 var(--shadow);
  transition:background .15s,box-shadow .15s,transform .15s;
}
button:hover,.button:hover { background:var(--button-hover); transform:translateY(-2px); box-shadow:0 6px 0 var(--shadow); }
button:active,.button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--shadow); }
button.primary,.button.primary { background:var(--orange); }
button.primary:hover,.button.primary:hover { background:var(--primary-hover); }
button:disabled { background:var(--disabled-bg); color:var(--disabled-ink); cursor:not-allowed; transform:none; box-shadow:none; }
:focus-visible { outline:4px solid var(--focus); outline-offset:5px; }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2,h3,h4,legend,.wordmark { font-family:var(--display); }
h1,h2 { font-weight:900; letter-spacing:-.055em; line-height:1.04; text-wrap:balance; }
h1 { font-size:clamp(2.6rem,5.7vw,4.25rem); margin-bottom:1.25rem; }
h1 span { color:var(--forest); }
h2 { font-size:clamp(2.1rem,4vw,3.1rem); }
h3 { font-size:1.45rem; line-height:1.2; letter-spacing:-.025em; margin-bottom:.85rem; }
h4 { font-size:1.15rem; margin-top:1.5rem; }
p+p { margin-top:.85rem; }
.site-header,main,footer { width:min(100% - 4rem,1320px); margin-inline:auto; }
.site-header {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1rem; padding:.55rem 1.1rem; border:2px solid var(--header-line);
  border-radius:18px; background:var(--header);
}
.wordmark { display:flex; align-items:center; gap:.6rem; font-weight:900; text-decoration:none; font-size:1.35rem; letter-spacing:-.04em; }
.wordmark span { font-size:1.9rem; line-height:1; color:var(--forest); }
nav { display:flex; gap:1.1rem; flex-wrap:wrap; }
nav a { display:inline-flex; align-items:center; padding:.5rem .2rem; min-height:48px; font-weight:700; text-decoration:none; }
nav a:hover { text-decoration:underline; }
.intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.48fr); gap:clamp(1.5rem,4vw,3rem); padding-block:2.5rem; align-items:center; }
.hero-copy { min-width:0; }
.lead { font-size:clamp(1.2rem,2.05vw,1.5rem); line-height:1.35; margin-bottom:1rem; max-width:32ch; }
.hero-copy>p:not(.lead) { max-width:57ch; }
.actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-block:1.35rem 1rem; }
.hero-copy>.actions { margin-block:1.6rem 1.25rem; }
.note { font-size:.95rem; color:var(--muted); }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; list-style:none; padding:0; margin:2rem 0 0; counter-reset:step; }
.steps li { counter-increment:step; border-right:1px solid var(--divider); padding-right:.8rem; }
.steps li:last-child { border:0; padding:0; }
.steps li::before { content:counter(step); display:grid; place-items:center; width:2.35rem; height:2.35rem; margin-bottom:.6rem; border-radius:50%; background:var(--mint); color:var(--step-ink); font-weight:800; font-size:1.3rem; }
.steps li:first-child::before { background:var(--orange); color:var(--button-ink); }
.steps strong,.steps span { display:block; }
.steps strong { font-size:1.05rem; line-height:1.25; }
.steps span { margin-top:.5rem; font-size:.9rem; color:var(--muted); line-height:1.4; }
.sample { padding:1rem 1.25rem; border-radius:22px; background:var(--mint); box-shadow:5px 6px 0 var(--art-shadow); }
.sample figcaption { margin-bottom:.8rem; }
.sample figcaption strong,.sample figcaption span { display:block; }
.sample figcaption strong { font-family:var(--display); font-size:1.2rem; letter-spacing:-.035em; }
.sample figcaption span { font-size:.9rem; color:var(--muted); }
.sample>a { display:block; width:min(100%,240px); margin:auto; border-radius:12px; }
.sample img { width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 4px 14px var(--image-shadow); }
.sample .note { margin-top:.8rem; font-size:.85rem; line-height:1.4; }
.reference { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:center; gap:2rem; padding:1.3rem 2rem; margin-block:1rem 3rem; border:2px solid var(--reference-line); border-radius:20px; background:var(--warm); }
.reference>a { display:block; border-radius:12px; }
.reference img { display:block; width:100%; max-width:440px; height:auto; border-radius:12px; }
.reference figcaption>strong { display:block; font-family:var(--display); font-size:1.65rem; letter-spacing:-.04em; line-height:1.15; margin-bottom:.6rem; }
.reference .button { margin-top:1.1rem; background:var(--orange); }
.workshop,.install { padding-block:2.5rem; scroll-margin-top:1rem; }
.workshop { padding-inline:1.5rem; background:var(--mint); border-radius:24px; }
.section-heading { margin-bottom:1.6rem; }
.section-heading p { margin-top:.6rem; font-size:1.15rem; }
.builder { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start; }
#options,.handoff { padding:1.4rem; border-radius:18px; background:var(--surface); min-width:0; }
fieldset { border:0; padding:0; margin:0 0 1rem; min-width:0; }
legend { font-weight:800; font-size:1.35rem; line-height:1.25; letter-spacing:-.035em; margin:1.5rem 0 .8rem; padding:0; }
fieldset:first-child legend { margin-top:0; }
label { display:block; font-weight:700; margin:.6rem 0; }
.optional { font-weight:400; }
.choice { display:flex; align-items:center; gap:.7rem; padding:.75rem; border:2px solid var(--line); border-radius:12px; cursor:pointer; min-height:60px; }
.choice+.choice { margin-top:.5rem; }
.choice:has(input:checked) { border-color:var(--forest); background:var(--selected); }
.choice-copy,.choice-copy span { display:block; }
.choice-copy strong { display:block; line-height:1.25; }
.choice-copy span { color:var(--muted); font-size:.88rem; font-weight:400; line-height:1.35; margin-top:.2rem; }
input[type=radio],input[type=checkbox] { width:26px; height:26px; flex-shrink:0; accent-color:var(--forest); }
input[type=text] { width:100%; min-height:54px; padding:.65rem .8rem; border:2px solid var(--line); border-radius:10px; background:var(--field); color:var(--ink); }
input[type=text]::placeholder { color:var(--placeholder); opacity:1; }
.finish-details { margin:.85rem 0 0 .75rem; padding:0 0 0 .9rem; border-left:3px solid var(--forest); }
.finish-details .note { margin-top:.65rem; }
textarea { width:100%; max-width:100%; min-height:120px; padding:.8rem; border:2px solid var(--line); border-radius:10px; background:var(--field); color:var(--ink); resize:vertical; line-height:1.5; }
textarea::placeholder { color:var(--placeholder); opacity:1; }
#notes,#reactions { margin-top:.3rem; }
.text-button { color:var(--ink); text-decoration:underline; background:transparent; box-shadow:none; border:0; padding-inline:.1rem; text-align:left; }
.text-button:hover { background:transparent; transform:none; box-shadow:none; }
.reaction-list { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; padding:0; margin:0 0 1.6rem; counter-reset:reaction; }
.reaction-list li { counter-increment:reaction; background:var(--chip); border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; font-size:.95rem; font-weight:700; overflow-wrap:anywhere; }
.reaction-list li::before { content:counter(reaction) '. '; font-weight:400; }
.handoff>.actions>* { flex:1 1 150px; }
.handoff-steps { margin-top:1rem; padding-top:1rem; border-top:2px solid var(--section-line); }
.handoff-steps ol { padding-left:1.4rem; margin:.65rem 0; }
.handoff-steps li { margin:.35rem 0; }
.error { color:var(--error); font-weight:700; }
.error:not(:empty),.notice { padding:.7rem; border:2px solid var(--error); margin:.6rem 0; background:var(--error-bg); }
.install { margin-top:1.5rem; }
.install-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.install-grid>article+article { border-left:1px solid var(--section-line); padding-left:2rem; }
.install-grid .button { margin-block:.9rem 1.2rem; }
.install-grid ol { padding-left:1.4rem; }
.install-grid li { margin-bottom:.75rem; }
code { font-size:.9em; overflow-wrap:anywhere; }
details { margin-block:1rem; border-radius:12px; background:var(--disclosure); padding:.25rem .85rem; }
details[open] { padding-bottom:1rem; }
summary { cursor:pointer; font-weight:700; padding:.7rem .1rem; }
details p { margin-top:.8rem; }
.expectations { margin-top:2rem; padding:1.5rem; border:2px solid var(--forest); border-radius:16px; background:var(--warm); }
.expectations p { max-width:85ch; }
footer { border-top:2px solid var(--forest); padding-block:2rem; }
footer strong { font-family:var(--display); font-size:1.3rem; }
footer p { color:var(--muted); margin-top:.5rem; max-width:80ch; }
.skip { position:absolute; top:-100px; left:1rem; padding:.8rem; background:var(--field); z-index:10; }
.skip:focus { top:1rem; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#robot-download a { display:inline-block; padding-block:.6rem; }
@media(min-width:1500px) { .sample>a { width:260px; } }
@media(max-width:1050px) { .site-header,main,footer { width:calc(100% - 2.5rem); } .site-header { align-items:flex-start; } .wordmark { font-size:1.15rem; } nav { gap:.65rem; } .intro { grid-template-columns:minmax(0,1fr) 290px; } .steps { gap:.6rem; } .steps span { font-size:.85rem; } .builder { gap:.8rem; } #options,.handoff { padding:1rem; } }
@media(max-width:800px) {
  .site-header { flex-direction:column; gap:.1rem; padding:.7rem; } nav { width:100%; justify-content:space-between; gap:.35rem; } nav a { font-size:.9rem; }
  .intro,.builder,.install-grid { grid-template-columns:1fr; } .intro { padding-block:2rem; gap:2rem; }
  h1 { font-size:clamp(2.65rem,8.2vw,4rem); } .lead { max-width:40ch; }
  .sample { width:100%; max-width:420px; margin-inline:auto; } .sample>a { width:250px; max-width:100%; }
  .steps { margin-top:1.8rem; } .steps strong { font-size:1rem; } .steps span { font-size:.9rem; }
  .reference { gap:1rem; padding:1rem; margin-block:1rem 2rem; }
  .reference figcaption>strong { font-size:1.3rem; } .reference .button { padding-inline:.7rem; }
  .workshop { padding:1.5rem 1rem; } .install-grid>article+article { padding:1.5rem 0 0; border-left:0; border-top:1px solid var(--section-line); }
}
@media(max-width:520px) {
  .site-header,main,footer { width:calc(100% - 1.5rem); } .wordmark { font-size:1.2rem; }
  .hero-copy>.actions { flex-direction:column; } .hero-copy>.actions .button { width:100%; }
  .steps { grid-template-columns:1fr; gap:1.1rem; } .steps li { border:0; padding:0 0 0 3.2rem; position:relative; } .steps li:last-child { padding-left:3.2rem; } .steps li::before { position:absolute; left:0; top:0; } .steps span { margin-top:.25rem; }
  .reference { grid-template-columns:1fr; } .reference figcaption>strong { font-size:1.5rem; } .reference .button { width:100%; }
  .workshop { padding:1.3rem .65rem; } #options,.handoff { padding:1rem .7rem; } .choice { padding:.65rem .5rem; }
  .reaction-list { gap:.4rem; } .reaction-list li { padding:.4rem; font-size:.9rem; }
  .install-grid .button { width:100%; } .expectations { padding:1rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }
@media(forced-colors:active) { button,.button,.choice,.sample,.handoff,#options { border:2px solid ButtonText; } :focus-visible { outline-color:Highlight; } }