/* =====================================================================
   The setup page (requirements.html), v2. pages.css stays linked (it is shared with the curriculum); everything the
   setup page draws lives here under its own class names, and the few pages.css rules that reach this page (the hero
   blobs) are switched off below.
   - the hero: the day-one desk, which fills up with one painted object per finished step, and the app question
   - the sticky bar: the six objects, the walker robot that speaks for the page, and the app chip
   - the steps: action first, the done-when sentence is the checkbox, and a done step folds into one summary row
   - step 6: a replay of the test drive that paints the real chart from the course data (assets/data.js, wc.js)
   Motion is transform and opacity only; the folds use grid-template-rows. Every move has a still final state under
   prefers-reduced-motion.
   ===================================================================== */

:root{
  --su-shadow:var(--shadow-tight,0 1px 2px rgba(24,25,24,.05),0 6px 12px -8px rgba(24,25,24,.18));
  --su-q:cubic-bezier(.25,1,.5,1);        /* ease-out-quart */
  --su-bar:62px;
}
/* the page keeps its own place while steps fold (see setup.js); the browser's anchoring would fight it */
html{overflow-anchor:none}
/* one robot on this page: the walker on the bar speaks; the companion and the nav's progress line stand down */
body[data-bot="off"] #bot{display:none!important}
html.js body[data-page="requirements"] .nav-prog{display:none}
/* pages.css paints two CSS blobs behind every inner hero; not here */
.su-hero::before,.su-hero::after{display:none}

/* ---------- hero ---------- */
.su-hero{padding:calc(var(--nav-h) + clamp(26px,3.6vw,52px)) 0 clamp(26px,3vw,40px);overflow:visible}
.su-hero > .wrap{max-width:1240px}
.su-glyphs{position:absolute;width:0;height:0;overflow:hidden}
.su-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-areas:"head desk" "ask desk";
  column-gap:clamp(36px,5vw,72px);row-gap:26px;align-items:start}
.su-head{grid-area:head}
.su-h1{font-size:clamp(38px,3.8vw,54px);line-height:1.04;letter-spacing:-.018em;margin:0;color:var(--ink)}
.su-h1 em{font-style:italic}
.su-lede{margin-top:16px;font-size:clamp(17px,1.4vw,19.5px);max-width:42ch;color:var(--ink2)}
.su-lede b{color:var(--ink);font-weight:600}
.su-live{margin-top:12px;font-size:15px;line-height:1.55;color:var(--muted);max-width:50ch}
.su-live [data-cohort="dates"]{color:var(--ink2)}

/* the app question: two painted buttons, the human's choice in gold, the chosen one in ink */
.ask{grid-area:ask}
.ask-q{font-family:var(--serif);font-size:clamp(20px,1.7vw,23px);color:var(--ink);margin:0 0 12px}
.ask-btns{display:flex;flex-wrap:wrap;gap:10px 12px}
.btn.pick{flex-direction:column;align-items:flex-start;gap:1px;white-space:normal;text-align:left;padding:12px 32px 13px;cursor:pointer;font:inherit}
.pick .pk-n{font-size:18px;font-weight:650;line-height:1.2}
.pick .pk-s{font-family:var(--serif);font-style:italic;font-size:14.5px;font-weight:400;color:var(--ink2);line-height:1.3}
.btn.pick.primary{color:#fffefb}
.btn.pick.primary .pk-s{color:rgba(255,254,251,.82)}
.ask-both{display:inline-block;margin-top:8px;padding:8px 0;background:none;border:0;cursor:pointer;font:inherit;font-size:15px;color:var(--ink2);
  text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.ask-both:hover{color:var(--ink);text-decoration-color:var(--ink)}
.ask-both[aria-pressed="true"]{color:var(--ink);text-decoration-color:var(--gold);text-decoration-thickness:2px}
.ask-calm{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--ink2);max-width:44ch}

/* ---------- the desk (assets/img/desk.webp): six slots on the clear part of its top, in two rows ----------
   Each slot is placed by its base point (--sx, --sy) and width (--sw), as fractions of the painting, from the
   measurements in tools/art/jobs5.txt (desk-top line, clear span x .389 to .957, the objects at a realistic scale); the
   tall things stand in the back row, the flat ones lie in front. The outline is the object's own traced edge. */
.desk{grid-area:desk;align-self:center;margin:0;width:100%}
.desk-art{position:relative;aspect-ratio:3/2}
.desk-img{position:absolute;inset:0;width:100%;height:100%}
.slot{position:absolute;z-index:2;left:calc(var(--sx) * 100%);bottom:calc((1 - var(--sy)) * 100%);width:calc(var(--sw) * 100%);min-width:32px;aspect-ratio:var(--ar);
  transform:translateX(-50%);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.slot.front{z-index:3}
.slot::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,40px);height:max(100%,40px);transform:translate(-50%,-50%)}   /* tap target */
.slot .sl-ol{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:rgba(255,254,251,.3);stroke:var(--ink);stroke-width:1.35;stroke-dasharray:3.5 3.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.62;transition:opacity .3s}
.slot .sl-ol use{vector-effect:non-scaling-stroke}
/* the label: above the outline in the back row, below it (on the desk's edge) in the front row */
.slot .sl-lab{position:absolute;left:50%;bottom:calc(100% + 4px);width:max(100%,6.4em);transform:translateX(-50%);text-align:center;font-family:var(--serif);font-style:italic;
  font-size:12.5px;line-height:1.15;color:var(--ink);text-wrap:balance;pointer-events:none;transition:opacity .3s}
.slot.front .sl-lab{bottom:auto;top:calc(100% + 3px)}
.slot .ob{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform-origin:50% 100%;pointer-events:none}
.slot.on .ob{opacity:1}
.slot.on .sl-ol,.slot.on .sl-lab{opacity:0}
.slot:hover .sl-ol,.slot:focus-visible .sl-ol{opacity:.9}
.slot.on:hover .sl-lab,.slot.on:focus-visible .sl-lab,.slot.lab-on .sl-lab{opacity:1}
.slot:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}
.slot.drop .ob{animation:objDrop .4s both}
@keyframes objDrop{
  0%{opacity:0;transform:translateY(-70%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  15%{opacity:1}
  72%{transform:none;animation-timing-function:var(--su-q)}
  84%{transform:scale(1.05,.92)}
  100%{opacity:1;transform:none}}
/* until six of six the robot naps against its books on the back of the desk; then it wakes and cheers in the same spot */
.desk-nap{position:absolute;z-index:1;left:27%;bottom:45.6%;width:15.5%;height:auto;transform:translateX(-50%);pointer-events:none;transition:opacity .3s}
.desk.all .desk-nap{opacity:0}
/* six of six: the cheering robot hops up onto the back of the desk, between the mug and the sandwich */
.desk-cheer{position:absolute;z-index:1;left:27.5%;bottom:46%;width:12%;height:auto;
  transform:translateX(-50%) translateY(14px) scale(.6);transform-origin:50% 100%;opacity:0;pointer-events:none;transition:opacity .25s}
.desk.all .desk-cheer{opacity:1;transform:translateX(-50%)}
.desk.all.fresh .desk-cheer{animation:deskCheer 1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes deskCheer{0%{opacity:0;transform:translateX(-50%) translateY(30px) scale(.6)}55%{opacity:1;transform:translateX(-50%) translateY(-14px) scale(1.04,.96)}100%{opacity:1;transform:translateX(-50%)}}
.desk-cap{margin-top:6px;text-align:center;font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--muted)}
.desk-cap span{color:var(--ink)}
/* the objects elsewhere (the bar, the step headers) stand on their base line inside a square box */
.obx{position:relative;display:block}
.obx .ol,.obx .ob{position:absolute;inset:0;width:100%;height:100%}
.obx .ob{object-fit:contain;object-position:50% 100%}
.obx .ol{overflow:visible;fill:rgba(255,254,251,.5);stroke:var(--ink);stroke-width:1.3;stroke-dasharray:2.4 2.2;opacity:.6;transition:opacity .3s}
.obx .ol use{vector-effect:non-scaling-stroke}

/* 760 to 1100px: the desk drops below the lede, with the app question beside it */
@media (max-width:1100px){
  .su-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"head head" "desk ask";row-gap:18px;align-items:center}
  .su-lede,.su-live{max-width:60ch}
}
@media (max-width:760px){
  .su-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "desk" "ask"}
  .desk{max-width:560px}
}
@media (max-width:620px){.br-w{display:none}}
/* small phones: the live line keeps the dates, hours and countdown (the two-screens tip is in "all set"), and the
   hero tightens so step 1 starts within a screen and a half */
@media (max-width:400px){
  .su-join{display:none}
  .su-hero{padding-top:calc(var(--nav-h) + 18px);padding-bottom:18px}
  .su-grid{row-gap:14px}
  .su-lede{margin-top:12px}
  .su-live{margin-top:8px}
  .ask-q{margin-bottom:9px}
  .ask-both{margin-top:4px}
  main.su-main{padding-top:20px}
}
@media (max-width:560px){
  .su-lede{font-size:17.5px}
  .su-live{font-size:14.5px}
  .desk{margin:0 -4px;width:calc(100% + 8px)}
  .slot .sl-lab{opacity:0}
  .slot.lab-on .sl-lab{opacity:1}
  .ask-btns{flex-wrap:nowrap;gap:8px}
  .btn.pick{flex:1 1 0;min-width:0;padding:11px 20px 12px}
  .pick .pk-n{font-size:16.5px}
  .pick .pk-s{font-size:13px}
}

/* ---------- the sticky bar: six objects, the walker on the current one, the app chip ---------- */
.su-bar{position:sticky;top:var(--nav-h);z-index:120;background:rgba(250,249,245,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.su-bar .sb-in{max-width:880px;margin:0 auto;padding:0 var(--gutter);height:var(--su-bar);display:flex;align-items:center;gap:14px}
.sb-txt{flex:1 1 0;min-width:0;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.sb-objs{position:relative;flex:none;align-self:stretch;display:flex;align-items:flex-end;gap:14px;padding-bottom:9px}
.sb-app{flex:1 1 0;min-width:0;position:relative;display:flex;justify-content:flex-end}
.sb-o{position:relative;z-index:1;width:28px;height:28px;flex:none;display:block;border-radius:50%}
.sb-o .obx{position:absolute;inset:0}
.sb-o .ol{opacity:.86;stroke-width:1.5;stroke-dasharray:3.4 1.7;fill:rgba(255,254,251,.75)}
.sb-o .ob{opacity:0}
.sb-o.cur .ob{opacity:.5}
.sb-o.cur .ol{opacity:0}
.sb-o.on .ob{opacity:1}
.sb-o.on .ol{opacity:0}
.sb-lab{position:absolute;left:50%;top:calc(100% + 17px);transform:translate(-50%,-3px);white-space:nowrap;padding:3px 9px;border-radius:8px;
  background:var(--card);border:1px solid var(--line2);box-shadow:var(--su-shadow);font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.3;color:var(--ink);
  pointer-events:none;opacity:0;transition:opacity .18s,transform .25s var(--su-q)}
.sb-o:focus-visible .sb-lab{opacity:1;transform:translate(-50%,0)}
@media (hover:hover){.sb-o:hover .sb-lab{opacity:1;transform:translate(-50%,0)}}
.sb-o.drop .ob{animation:objDrop .4s both}
/* the current object wears a painted gold ring */
.sb-o::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.6px solid var(--goldD);opacity:0;transform:scale(.8);filter:url(#wcf);transition:opacity .3s,transform .4s var(--su-q)}
.sb-o.cur::before{opacity:.8;transform:none}
.sb-o::after{content:"";position:absolute;inset:-9px -6px}   /* a 40px tap target around the 28px object */
.sb-o:hover .ol{opacity:.85}
.sb-o:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
/* the walker stands on the current object and hops to the next one; at six of six it cheers */
.sb-bot{position:absolute;left:0;bottom:calc(9px + 28px);height:25px;width:auto;transform:translateX(calc(var(--bx,0px) - 50%));pointer-events:none;opacity:0;z-index:2}
.sb-bot.ready{opacity:1;transition:transform .62s cubic-bezier(.45,.05,.35,1),opacity .3s}
.sb-bot img{height:100%;width:auto;max-width:none;transform-origin:50% 100%;display:block}
.sb-bot.hop img{animation:sbHop .62s cubic-bezier(.3,.7,.3,1)}
.sb-bot.all{bottom:9px}
@keyframes sbHop{0%{transform:none}14%{transform:scale(1.16,.84)}50%{transform:translateY(-10px) scale(.92,1.08)}84%{transform:scale(1.12,.88)}100%{transform:none}}
/* its words hang below the bar for a moment, never taking a tap */
.sb-say{position:absolute;top:calc(100% + 9px);left:0;max-width:min(300px,calc(100vw - 24px));width:max-content;margin:0;padding:7px 12px;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--su-shadow);font-size:14px;line-height:1.35;color:var(--ink);
  pointer-events:none;opacity:0;transform:translate(var(--sx,0px),-4px);transition:opacity .25s,transform .35s var(--su-q)}
.sb-say::before{content:"";position:absolute;top:-6px;left:var(--tx,50%);width:10px;height:10px;margin-left:-5px;background:var(--card);
  border-left:1px solid var(--line2);border-top:1px solid var(--line2);transform:rotate(45deg)}
.sb-say.show{opacity:1;transform:translate(var(--sx,0px),0)}
.sb-say.side{top:var(--sy,12px);transform:translate(calc(var(--sx,0px) + 4px),0);font-size:13.5px;text-align:right}
.sb-say.side.show{transform:translate(var(--sx,0px),0)}
.sb-say.side::before{top:50%;left:auto;right:-6px;margin:-5px 0 0;border-left:0;border-right:1px solid var(--line2)}
.sb-txt{transition:opacity .25s}
.su-bar.saying .sb-txt{opacity:0}
/* the app chip reopens the choice */
.sb-chip{font:inherit;font-size:14px;color:var(--ink2);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:6px 13px;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s}
.sb-chip:hover,.sb-chip[aria-expanded="true"]{border-color:var(--ink);color:var(--ink)}
.sb-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:5;display:flex;flex-direction:column;min-width:160px;padding:6px;background:var(--card);
  border:1px solid var(--line2);border-radius:12px;box-shadow:var(--su-shadow)}
.sb-menu[hidden]{display:none}
.sb-menu button{font:inherit;font-size:15px;text-align:left;color:var(--ink2);background:none;border:0;border-radius:8px;padding:9px 12px;cursor:pointer}
.sb-menu button:hover,.sb-menu button:focus-visible{background:var(--paper2);color:var(--ink)}
.sb-menu button[aria-checked="true"]{color:var(--ink);background:var(--goldW)}
.sb-menu button[aria-checked="true"]::after{content:" ✓";color:var(--goldD)}
@media (max-width:560px){
  :root{--su-bar:44px}
  .su-bar .sb-in{gap:10px}
  .sb-txt{flex:none;font-size:13.5px}
  .sb-txt .sb-min{display:none}
  .sb-objs{flex:1 1 auto;justify-content:center}
  .sb-app{flex:none}
  .sb-objs{gap:7px;padding-bottom:8px}
  .sb-o::before{inset:-4px}
  .sb-o::after{inset:-8px -3px}
  /* no room above the objects on a 44px bar: the walker peeks out from behind the current one */
  .sb-bot{bottom:22px;height:21px;z-index:0}
  .sb-bot.all{bottom:22px;height:22px;z-index:0}
  .sb-chip{font-size:13px;padding:5px 10px}
}

/* ---------- the steps ---------- */
.su-main{padding-top:30px;padding-bottom:80px}
.su-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.su-st{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--su-shadow);
  padding:20px clamp(18px,3vw,30px);scroll-margin-top:calc(var(--nav-h) + var(--su-bar) + 14px);transition:background-color .4s,border-color .4s}
.su-st.done{background:color-mix(in srgb,var(--mintW) 32%,var(--card));border-color:color-mix(in srgb,var(--mintD) 26%,var(--line))}
.st-head{display:grid;grid-template-columns:52px minmax(0,1fr) auto;column-gap:16px;align-items:center}
.st-ic{position:relative;width:52px;height:52px;display:block}
.st-ic .obx{position:absolute;inset:2px}
.st-ic .ob{object-position:50% 50%}
.st-ic .ol{display:none}
/* done: a mint tick on the object */
.st-ic::after{content:"";position:absolute;right:-4px;bottom:-3px;width:21px;height:21px;border-radius:50%;opacity:0;transform:scale(.4);
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.3 13.8 15 6.5' fill='none' stroke='%23181918' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:opacity .3s,transform .45s var(--su-q)}
.su-st.done .st-ic::after{opacity:1;transform:none}
.st-tt{min-width:0}
.su-st h2{font-size:clamp(22px,2.1vw,27px);line-height:1.18;margin:0}
.su-st h2:focus{outline:none}
.su-st h2:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.su-st h2 small{font-family:var(--sans);font-size:.58em;color:var(--muted);font-weight:400;white-space:nowrap}
.st-why{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.4;color:var(--muted);margin:3px 0 0}
.st-sum{display:none;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;color:var(--mintD);margin:2px 0 0;overflow-wrap:anywhere}
.su-st.fold .st-why{display:none}
.su-st.fold .st-sum{display:block}
/* the toggle: only a finished step has one */
.st-tog{display:none;align-items:center;gap:6px;font:inherit;font-size:14.5px;color:var(--ink2);background:none;border:0;border-radius:8px;padding:8px 6px;cursor:pointer}
.su-st.done .st-tog{display:inline-flex}
.st-tog svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg);transition:transform .35s var(--su-q)}
.st-tog[aria-expanded="false"] svg{transform:none}
.st-tog:hover{color:var(--ink)}
.su-st.fold .st-head{cursor:pointer}
/* the fold: grid rows 1fr to 0fr */
.st-fold{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;transition:grid-template-rows .45s var(--su-q),opacity .35s ease}
.su-st.fold .st-fold{grid-template-rows:0fr;opacity:0}
.st-in{min-height:0;min-width:0}
.st-in::before{content:"";display:block;height:16px}
.su-st.fold .st-in,.su-st.anim .st-in{overflow:hidden}

/* numbered moves: a painted gold circle under each number */
.su-st ol.seq{list-style:none;counter-reset:sq;margin:0 0 4px;padding:0}
.su-st ol.seq > li{counter-increment:sq;position:relative;padding-left:40px;margin:0 0 11px;font-size:16.5px;line-height:1.55;max-width:66ch;color:var(--ink2)}
.su-st ol.seq > li::before{content:"";position:absolute;left:0;top:0;width:27px;height:27px;border-radius:50%;background:rgba(242,190,82,.58);filter:url(#wcf)}
.su-st ol.seq > li::after{content:counter(sq);position:absolute;left:0;top:0;width:27px;height:27px;display:grid;place-items:center;font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1}
.su-st ol.seq > li.seq-btn{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding-top:0}
.su-st ol.seq > li.seq-btn::before,.su-st ol.seq > li.seq-btn::after{top:12px}
.alt-link{font-size:15px;color:var(--muted)}
.su-st a{overflow-wrap:anywhere}
.su-st .btn{overflow-wrap:normal}
.su-st b{color:var(--ink);font-weight:600}

/* which app, which OS: the page shows one path; "both" shows the two, each with its name in front */
html:not([data-app]) [data-app="chatgpt"],html[data-app="claude"] [data-app="chatgpt"],html[data-app="chatgpt"] [data-app="claude"]{display:none!important}
html:not([data-app]) [data-h]:not([data-h="claude"]),html[data-app="claude"] [data-h]:not([data-h="claude"]),
html[data-app="chatgpt"] [data-h]:not([data-h="chatgpt"]),html[data-app="both"] [data-h]:not([data-h="both"]){display:none!important}
html:not([data-app="both"]) .lab{display:none}
html[data-app="both"] .alt{display:block;margin-top:3px}
html[data-app] .pointer{display:none}
html[data-os="mac"] [data-os="win"],html[data-os="win"] [data-os="mac"]{display:none!important}
html:not(.js) .os-line{display:none}
.lab{font-weight:600;color:var(--ink)}

.pointer{margin:0 0 8px 40px;font-size:15px;color:var(--muted)}
.pointer a{color:var(--ink2)}
.aside{margin:0 0 8px 40px;font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink2);max-width:60ch}
.aside b{font-style:normal}
.os-line{margin:0 0 4px 40px}
.os-sw{font:inherit;font-size:14.5px;color:var(--ink2);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.os-sw:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* every explanation sits in one quiet fold */
.su-st details.why{margin:8px 0 0}
.su-st details.why + details.why{margin-top:0}
.su-st details.why summary{list-style:none;display:inline-flex;align-items:center;gap:7px;padding:5px 0;font-size:15px;color:var(--ink2);cursor:pointer}
.su-st details.why summary::-webkit-details-marker{display:none}
.su-st details.why summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--su-q)}
.su-st details.why[open] summary::after{transform:translateY(1px) rotate(225deg)}
.su-st details.why summary:hover{color:var(--ink)}
.su-st details.why p{margin:2px 0 10px;font-size:15.5px;line-height:1.6;max-width:66ch;color:var(--ink2)}

/* the done-when sentence is the checkbox */
.done-row{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:14px;align-items:center;width:100%;margin-top:14px;padding:13px 16px;
  border:1px dashed color-mix(in srgb,var(--mintD) 48%,transparent);border-radius:12px;background:color-mix(in srgb,var(--mintW) 60%,transparent);
  font:inherit;text-align:left;color:var(--ink2);cursor:pointer;transition:border-color .25s,background-color .25s}
.done-row:hover{border-style:solid;border-color:var(--mintD)}
.done-row:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.done-row .box{grid-area:1/1;width:26px;height:26px;border:1.5px solid var(--mintD);border-radius:7px;background:var(--card);display:grid;place-items:center;position:relative;isolation:isolate}
.done-row .box::before{content:"";position:absolute;inset:-1.5px;border-radius:7px;background:var(--mint);opacity:0;z-index:-1;filter:url(#wcf);transition:opacity .3s}
.done-row .box svg{width:17px;height:17px}
.done-row .box path{stroke:var(--ink);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s var(--su-q) .05s}
.done-row .dq{grid-area:1/2;font-size:16px;line-height:1.45;transition:opacity .3s}
.done-row .dq code{overflow-wrap:anywhere;font-size:.84em}
.done-row .da{grid-area:1/2;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--mintD);opacity:0;transition:opacity .3s .12s}
.done-row[aria-checked="true"]{border-style:solid;border-color:color-mix(in srgb,var(--mintD) 40%,transparent);background:var(--mintW)}
.done-row[aria-checked="true"] .box{border-color:transparent}
.done-row[aria-checked="true"] .box::before{opacity:1}
.done-row[aria-checked="true"] .box path{stroke-dashoffset:0}
.done-row[aria-checked="true"] .dq{opacity:0}
.done-row[aria-checked="true"] .da{opacity:1}

/* step 3: the folder tree builds itself */
.su-st .tree{margin:0 0 6px;font-size:13px}
.tree .root{color:var(--muted)}
.tree .ln{display:block}
.js .tree .ln{opacity:0;transform:translateX(-8px)}
.js .tree.in .ln{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i) * .26s)}
.tree .file{position:relative;z-index:0}
.tree .file::before{content:"";position:absolute;left:-6px;right:-6px;top:3px;bottom:3px;border-radius:5px;background:var(--mint);opacity:0;filter:url(#wcf);z-index:-1;transform-origin:left center}
.tree.in .file::before{animation:fileWash 1.6s var(--ease) 1.25s both}
@keyframes fileWash{0%{opacity:0;transform:scaleX(.15)}35%{opacity:.62;transform:none}100%{opacity:.24;transform:none}}

/* step 4: the robot turns its back on the key */
.secret{display:flex;align-items:center;gap:16px;margin:2px 0 6px}
.secret p{margin:0;font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--ink2)}
.turn{position:relative;width:50px;height:74px;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:8px}
.turn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.turn img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);opacity:0}
.turn .f2{transform:translateX(-50%) scaleX(-1)}
.turn[data-f="0"] .f0,.turn[data-f="1"] .f1,.turn[data-f="2"] .f2,.turn[data-f="3"] .f3{opacity:1}

/* step 6: the screenshots, in their fold */
.su-st .shots{margin:6px 0 12px}

/* ---------- step 6: the test drive replay ---------- */
.drive{position:relative;margin:0 0 14px}
/* not positioned: the margin notes are placed against .drive, outside this window's clip */
.dw{background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--su-shadow);overflow:hidden}
.dw-top{display:flex;align-items:center;gap:6px;padding:7px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.dw-top i{width:9px;height:9px;border-radius:50%;border:1.2px solid var(--ink);opacity:.4}
.dw-top span{margin-left:8px;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--muted)}
.dw-log{display:flex;flex-direction:column;gap:10px;padding:14px clamp(12px,2.4vw,20px) 10px}
.dw-me{display:flex;flex-direction:column;align-items:flex-end}
.dw-bub{max-width:min(92%,640px);background:var(--paper2);border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:10px 14px 11px}
.dw-file{display:inline-flex;align-items:center;gap:7px;margin-bottom:6px;padding:3px 9px 3px 7px;border-radius:7px;background:var(--blueW);font-family:var(--mono);font-size:12px;color:var(--blueD)}
.dw-file::before,.dw-boxfile::before{content:"";width:9px;height:11px;border:1.3px solid currentColor;border-radius:1.5px;flex:none}
.dw-prompt{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
/* the three margin notes: in the page margin on wide screens, under the bubble on narrower ones */
.dw-notes{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 16px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink2)}
.dw-notes li{display:flex;align-items:center;gap:4px}
.dw-notes svg{width:22px;height:14px;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transform:rotate(60deg)}
@media (min-width:1240px){
  .dw-notes{position:absolute;left:calc(100% + clamp(44px,3.4vw,52px));top:84px;margin:0;flex-direction:column;align-items:flex-start;gap:12px;font-size:16px;width:200px}
  .dw-notes svg{width:46px;height:18px;transform:none;margin-left:-58px;margin-right:6px}
  .dw-notes li:nth-child(2){margin-left:10px}
  .dw-notes li:nth-child(3){margin-left:2px}
}
.dw-ai{display:flex;flex-direction:column;gap:8px;min-width:0}
.dw-status{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.dw-status li{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.45;color:var(--ink2)}
.dw-status li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;filter:url(#wcf);
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.3 13.8 15 6.5' fill='none' stroke='%23181918' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
/* the code: a quiet toggle; on wide screens it sits at the top right of the status lines and opens over the chart */
.dw-ai{position:relative}
@media (min-width:720px){
  .dw-code{position:absolute;right:0;top:0;z-index:3;display:flex;flex-direction:column;align-items:flex-end;max-width:100%}
  .dw-code pre{width:min(640px,calc(100vw - 120px));max-width:100%;box-shadow:var(--su-shadow)}
}
.dw-code pre code{background:none;color:inherit;padding:0;border-radius:0;font-size:inherit}
.dw-code summary{list-style:none;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);cursor:pointer;padding:2px 0}
.dw-code summary::-webkit-details-marker{display:none}
.dw-code summary::before{content:"";width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(-45deg);transition:transform .3s var(--su-q)}
.dw-code[open] summary::before{transform:rotate(45deg)}
.dw-code summary:hover{color:var(--ink)}
.dw-code pre,.dw-fly pre{margin:6px 0 0;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;font-family:var(--mono);font-size:11.8px;line-height:1.6;color:var(--ink);overflow-x:auto;white-space:pre}
.dw-chart{position:relative;height:var(--chh,302px);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dw-chart canvas{position:absolute;inset:0;width:100%;height:100%}
.dw-fly{position:absolute;inset:8px;pointer-events:none;opacity:0;transform-origin:50% 0}
.dw-fly pre{margin:0;box-shadow:var(--su-shadow)}
.dw-fly .cl{display:block;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .3s var(--su-q)}
.dw-fly .cl.on{opacity:1;transform:none}
.dw-box{display:flex;align-items:center;gap:8px;margin:0 12px 10px;padding:8px 12px;min-height:40px;border:1px solid var(--line2);border-radius:12px;background:var(--paper);
  font-size:14.5px;color:var(--ink);overflow:hidden;white-space:nowrap}
.dw-boxfile{display:none;align-items:center;gap:6px;flex:none;padding:3px 9px 3px 7px;border-radius:7px;background:var(--blueW);font-family:var(--mono);font-size:12px;color:var(--blueD)}
.dw-typed{flex:1 1 auto;min-width:0;overflow:hidden;display:flex;justify-content:flex-end;white-space:nowrap}
.dw-typed:empty{display:none}
.dw-ph{color:var(--muted)}
/* the replay (setup.js adds the classes in order; without them, the final frame). Before it plays the window is a new
   chat, just the title bar and the message box; each part appears in its turn and the window grows the way a chat does.
   A replay keeps the window's height (min-height), with the message box at its foot. */
.dw{display:flex;flex-direction:column}
.dw-box{margin-top:auto}
.dw.pre:not(.p-sent) .dw-top{margin-bottom:12px}
.dw.pre:not(.p-sent) .dw-log,.dw.pre:not(.p-s1) .dw-ai,.dw.pre:not(.p-s2) .dw-status li:nth-child(2),.dw.pre:not(.p-s3) .dw-status li:nth-child(3),
.dw.pre:not(.p-code) .dw-chart,.dw.pre:not(.p-codeout) .dw-code{display:none}
.dw.pre.p-sent .dw-bub,.dw.pre.p-s1 .dw-status li:nth-child(1),.dw.pre.p-s2 .dw-status li:nth-child(2),.dw.pre.p-s3 .dw-status li:nth-child(3),
.dw.pre.p-codeout .dw-code{animation:dwIn .45s var(--su-q) both}
.dw.pre.p-sent .dw-notes li{animation:dwIn .4s var(--su-q) .3s both}
.dw.pre.p-sent .dw-notes li:nth-child(2){animation-delay:.55s}
.dw.pre.p-sent .dw-notes li:nth-child(3){animation-delay:.8s}
.dw.pre.p-code .dw-chart{animation:dwFade .35s both}
@keyframes dwIn{from{opacity:0;transform:translateY(8px)}}
@keyframes dwFade{from{opacity:0}}
.dw.p-file .dw-boxfile{display:inline-flex;animation:fileIn .45s var(--su-q) both}
@keyframes fileIn{from{opacity:0;transform:translateY(-16px) scale(.9)}}
.dw.p-file .dw-ph,.dw.p-sent .dw-boxfile{display:none}
.dw.p-sent .dw-ph{display:inline}
.dw.p-code .dw-fly{opacity:1;transition:opacity .25s}
.dw.p-codeout .dw-fly{opacity:0;transform:translateY(-34px) scaleY(.2);transition:opacity .3s,transform .4s var(--su-q)}
/* wide: the code opens over the chart, under the three status lines (not over them) */
@media (min-width:720px){.dw .dw-code pre{margin-top:50px}}
@media (max-width:600px){
  .dw-chart{--chh:600px}
  .dw-prompt{font-size:14.5px}
}

.drive-act{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:12px;min-height:48px;padding-right:92px}
.drive-replay{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink2);background:none;border:0;padding:8px 2px;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.drive-replay:hover{color:var(--ink);text-decoration-color:var(--ink)}
.drive-note{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.4;color:var(--muted)}
/* the reviewer peeks up over the window's edge with its magnifying glass */
.peek{position:absolute;right:4px;bottom:0;width:74px;z-index:2;pointer-events:none}
.peek img{display:block;width:100%;height:auto;transform-origin:60% 100%}
.js .peek{opacity:0;transform:translateY(24px) rotate(6deg)}
.js .peek.in{opacity:1;transform:none;transition:opacity .5s,transform .9s cubic-bezier(.34,1.56,.64,1)}
.peek.live img{animation:lensScan 4.4s ease-in-out .9s infinite}
@keyframes lensScan{0%,100%{transform:none}28%{transform:translate(-4px,-3px) rotate(-3.5deg)}58%{transform:translate(1px,1px) rotate(1.5deg)}78%{transform:translate(-2px,0) rotate(-1deg)}}
@media (max-width:560px){.peek{width:58px}.drive-act{padding-right:70px}}
/* wide screens: it stands in the page margin beside the chart instead, under the margin notes */
@media (min-width:1240px){
  .drive-act{position:static;padding-right:0}
  .peek{right:auto;left:calc(100% + clamp(40px,3.2vw,50px));bottom:96px;width:92px}
}

/* ---------- all set, under the six summary rows ---------- */
/* (pages.css draws this as a mint card with a blob; here it is just the stamp on the paper) */
.su-main .allset{display:none;text-align:center;padding:26px 0 6px;margin:0;border:0;border-radius:0;background:none;overflow:visible}
.su-main .allset::before{display:none}
.su-main .allset.show{display:block;animation:none}
.su-main .allset.show.fresh{animation:allIn .7s var(--su-q) both}
@keyframes allIn{from{opacity:0;transform:translateY(12px)}}
.as-row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,2vw,20px)}
.as-bot{width:clamp(66px,7vw,86px);flex:none;margin-bottom:-4px}
.as-bot img{width:100%;height:auto;transform-origin:50% 100%}
.allset.fresh .as-bot img{animation:allJump 1s cubic-bezier(.34,1.56,.64,1) .2s both,allBounce .5s cubic-bezier(.3,.7,.3,1) 1.25s 2}
@keyframes allJump{0%{opacity:0;transform:translateY(50px) scale(.6)}55%{opacity:1;transform:translateY(-16px) scale(1.04,.96)}78%{transform:translateY(0) scale(1.07,.93)}100%{opacity:1;transform:none}}
@keyframes allBounce{0%,100%{transform:none}45%{transform:translateY(-10px) scale(.97,1.03)}}
.allset .stampx{display:inline-block;margin-bottom:6px;font-family:var(--serif);font-style:italic;font-size:clamp(32px,4.4vw,46px);color:var(--mintD);
  transform:rotate(-3deg);border:2px solid var(--mintD);border-radius:14px;padding:4px 20px}
.allset p{margin:12px auto 0;color:var(--ink2);max-width:52ch}
.as-cal{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.confetti.tiles i{border-radius:3px;filter:url(#wcf);opacity:.86;animation-name:tileFall;animation-timing-function:cubic-bezier(.3,.12,.6,1);animation-fill-mode:both}
@keyframes tileFall{from{transform:translate(0,0) rotate(var(--r0,0deg))}to{transform:translate(var(--dx,0px),112vh) rotate(var(--r,180deg))}}

/* the shared phone sheet lists the six steps with a pigment dot each; here a filled dot means done (setup.js sets
   .su-done), not scrolled past */
body[data-page="requirements"] .sheet .sheet-ch a.past i,body[data-page="requirements"] .sheet .sheet-ch a.now i{background:transparent}
body[data-page="requirements"] .sheet .sheet-ch a.su-done i{background:var(--mint);border-color:var(--mintD)}

/* ---------- questions ---------- */
.su-faq{margin-top:64px}
.su-faq h2{font-size:clamp(28px,3vw,38px);line-height:1.15;margin:0 0 14px}
.su-faq .faq summary{font-size:16.5px}

/* ---------- reduced motion: the final states, at once ---------- */
@media (prefers-reduced-motion:reduce){
  .st-fold,.done-row .box path,.done-row .dq,.done-row .da,.st-ic::after,.sb-o::before,.sb-say{transition:none}
  .slot.drop .ob,.sb-o.drop .ob,.sb-bot.hop img,.desk.all.fresh .desk-cheer,.allset.fresh .as-bot img,.su-main .allset.show.fresh,.dw.p-file .dw-boxfile{animation:none}
  .sb-bot.ready{transition:none}
  .sb-lab,.sb-say.side,.desk-nap{transition:none}
  .js .tree .ln,.js .tree.in .ln{opacity:1;transform:none;transition:none}
  .tree .file::before,.tree.in .file::before{animation:none;opacity:.24;transform:none}
  .js .peek{opacity:1;transform:none}
  .peek.live img{animation:none}
}

@media print{
  .su-bar,.ask,.desk,.drive,.st-tog,.peek,.as-bot{display:none!important}
  .st-fold{grid-template-rows:1fr!important;opacity:1!important}
  .su-st{box-shadow:none;break-inside:avoid}
  .js .tree .ln{opacity:1!important;transform:none!important}
}