/* Experivio: intelligent 8-step Experiment Designer (Steps 1–7). Uses the app tokens so light and dark modes follow. */
.dzhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:4px}
.dzhead h2{margin:0}
.dzlede{margin:2px 0 10px}
.dzsec h3,.dzq h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 8px;font-size:clamp(1.02rem,.3vw + .95rem,1.12rem)}
.dzsec h3 .ic,.dzq h3 .ic{color:var(--pri)}
.btn.sm{min-height:40px;padding:6px 12px;font-size:.87rem}
.dznav{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}

/* status chips */
.dzchip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:12.5px;font-weight:700;line-height:1.35;max-width:100%}
.dzchip.ai{background:color-mix(in srgb,var(--pri) 13%,var(--card));color:var(--pri);border:1px solid color-mix(in srgb,var(--pri) 35%,transparent)}
.dzchip.ok{background:color-mix(in srgb,var(--ok) 14%,var(--card));color:var(--ok)}
.dzchip.rev{background:var(--warn);color:var(--wink)}
.dzchip.own,.dzchip.none{background:var(--soft);color:var(--mut)}
.dzai{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;padding:1px 6px;border-radius:6px;background:var(--soft);color:var(--pri);vertical-align:1px}

/* step buttons show each section's state */
.steps button .ic{flex:none}
.steps button.sm-ok:not(.on) .ic{color:var(--ok)}
.steps button.sm-rev:not(.on) .ic{color:var(--wink)}
.steps .sdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pri);flex:none}
.steps .on .sdot{background:#fff}
.designer>.steps button span{min-width:0}

/* Step 1 */
.dzhero{padding:clamp(14px,2vw,22px);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 9%,var(--card)),color-mix(in srgb,var(--pri2) 7%,var(--card)));border:1px solid var(--line)}
.dzql{display:block;font-size:clamp(1.15rem,.6vw + 1rem,1.4rem);font-weight:780;margin:0}
.dzqin{font-size:max(16px,1.05em);min-height:92px;margin-top:8px;background:var(--card)}
.dzctx{margin-top:6px}
.dzgorow{margin-top:10px}
.btn.dzgo{font-size:1.02rem;padding:12px 20px}
.dztips{margin:8px 0 0;padding-left:18px}
.dzprog{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-weight:650;color:var(--pri)}
.dzprog .btn{margin-left:auto}
.dzspin{width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--pri) 25%,transparent);border-top-color:var(--pri);animation:spin 1s linear infinite;flex:none}
.dzpanel{margin-top:clamp(14px,2vw,22px);padding:clamp(14px,2vw,20px);border-radius:16px;border:1px solid var(--line);background:var(--card)}
.dzpanel>h3:first-child{margin-top:0}
.dzvague{border:2px solid color-mix(in srgb,var(--pri) 45%,var(--line))}
.dzdirs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.dzdirs li{padding:12px 14px;border-radius:12px;background:var(--soft)}
.dzdq{font-weight:700;margin:0 0 4px}
.dzqs{margin:10px 0 0;padding-left:20px;display:grid;gap:14px}
.dzqs label{font-weight:650}
.dzqs .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}

/* plan review board */
.dzgrid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-top:14px}
@container main (min-width:640px){.dzgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (min-width:1100px){.dzgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dzc{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);min-width:0}
.dzc.st-ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.dzc.st-rev{border-color:color-mix(in srgb,var(--wink) 40%,var(--line))}
.dzc-top{display:flex;align-items:center;gap:8px}
.dzc-top h4{margin:0;font-size:1rem}
.dzc-ic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--soft);color:var(--pri);flex:none}
.dzc .dzchip{align-self:flex-start}
.dzsum{margin:2px 0;font-size:.93rem;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.dzwhy2{color:var(--wink);margin:0}
.dzc-a{padding-top:4px}
.dzc .dzex{margin-top:4px}
.btn.dzokd{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
.dzmeters{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-top:16px;align-items:start}
@container main (min-width:760px){.dzmeters{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
.dzmeter{padding:14px;border-radius:14px;background:var(--bg);border:1px solid var(--line);min-width:0}
.dzmeter h4{margin:0 0 8px;font-size:.98rem;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.dzmeter .bar{margin-top:6px}
.dzcont{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dzattn{padding:10px 14px;border-radius:12px;background:var(--warn);color:var(--wink);width:100%}
.dzattn ul{margin:4px 0 0;padding-left:18px}
.dzassume{margin-top:10px}

/* section bodies */
.dzbody .form2,.dzbody .form3{margin-top:2px}
.form3{display:grid;gap:4px var(--gap);grid-template-columns:minmax(0,1fr)}
@container main (min-width:760px){.form3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dzsub{margin-top:8px}
.dzacts{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.dzlist,.dzmlist,.dzhlist,.dzstages{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dzitem,.dzstage,.dzhaz{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);min-width:0}
.dzia{margin-top:4px;gap:4px 12px}
.dzdel{color:var(--bad)}
.dzkind{display:flex;align-items:flex-start;gap:10px;font-weight:600;margin:10px 0 2px;cursor:pointer}
.dzkind input{margin-top:1px}
.dzwhy{margin:12px 0;padding:12px 14px;border-radius:12px;background:var(--soft)}
.dzwhy h3{margin:0 0 4px!important}
.dzhyp textarea#dz-hyp-text{font-size:max(16px,1.03em);font-weight:600}
.dzex{margin-top:8px;padding:10px 14px;border-left:3px solid var(--pri);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--pri) 6%,var(--card));animation:dzfade .3s ease both}
.dzex p{margin:4px 0}
.dzex-k{font-weight:750;font-size:.85rem;color:var(--pri)}
.dzex-a{gap:2px 14px}
.dzpend{margin:12px 0;padding:12px 14px;border-radius:14px;border:2px dashed color-mix(in srgb,var(--pri) 55%,var(--line));background:var(--card)}
.dzpend-h{display:flex;align-items:center;gap:6px;margin:0}
.dzread{margin:8px 0;padding:8px 12px;border-radius:10px;background:var(--bg);font-size:.93rem;overflow-wrap:anywhere}
.dzread ul,.dzread ol{margin:4px 0;padding-left:20px}
.dzcheck{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.dzcheck h3{margin-top:0!important}
.dzissues li{color:var(--wink)}.dzgood li{color:var(--ok)}
.dzissues,.dzgood{margin:4px 0;padding-left:20px}
.dztip{margin:4px 0 10px}

/* materials */
.dzcat{margin-top:12px}
.dzcat h3{margin:6px 0!important;font-size:1rem!important}
.dzmat{padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--bg);min-width:0}
.dzmat.av-have,.dzmat.av-borrow{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.dzmat.av-na{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.dzmat-h{display:grid;gap:6px;grid-template-columns:minmax(0,1fr) 5.5rem;align-items:center}
.dzmat-h select{grid-column:1/2}
.dzmat-h .lnkbtn2{justify-self:end}
@container main (min-width:640px){.dzmat-h{grid-template-columns:minmax(0,1fr) 6.5rem 10.5rem auto}.dzmat-h select{grid-column:auto}}
.dzmp{margin:4px 2px 0}
.dzms{color:var(--wink)}
.dzmd{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.dzcheap{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--soft)}
.dztbl{margin-top:6px}

/* procedure */
.dzstages{counter-reset:none}
.dzstage-h{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.dzn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:800;font-size:.9rem;flex:none}
.dzstk{max-width:20rem;min-height:40px;padding:6px 10px}

/* safety */
.dzlow{margin:8px 0 12px;padding:12px 14px;border-radius:12px;background:var(--soft)}
.dzlow h3{margin-top:0!important}
.dzhaz.ack{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.dzhaz-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}

/* motion: gentle, and off for reduced motion */
@keyframes dzfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dzpop{0%{transform:scale(1)}40%{transform:scale(1.015)}100%{transform:scale(1)}}
.dzin{animation:dzfade .45s ease both}
.dzpop{animation:dzpop .5s ease}
.dzpop .dzchip.ok .ic{animation:dzfade .4s ease both}
:root[data-motion="off"] .dzin,:root[data-motion="off"] .dzpop,:root[data-motion="off"] .dzex,:root[data-motion="off"] .dzpop .dzchip .ic{animation:none}
:root[data-motion="off"] .dzspin{animation-duration:3s}
@media(prefers-reduced-motion:reduce){.dzin,.dzpop,.dzex,.dzpop .dzchip .ic{animation:none}.dzspin{animation-duration:3s}}
@media print{.dzacts,.dznav,.dzgorow{display:none}}

/* text boxes grow with what the student writes (no length limit); very long text scrolls inside the box */
textarea.autogrow{resize:vertical;overflow-y:auto}
textarea.pname{min-height:48px;line-height:1.4;font-weight:600}

/* =====================================================================================================
   Experiment Designer 3.0 — premium workspace. Scoped to .designer3 and built on the Home 3.0 tokens (--h-*),
   so accent colors (Ocean, Teal, Indigo), light/dark appearance and motion settings carry over automatically.
   The older Designer/Guide rules read --pri, --card, --line… so those are remapped to the Home tokens here.
   ===================================================================================================== */
.designer3{--pri:var(--h-pri);--pri2:var(--h-blue);--card:var(--h-surface);--soft:var(--h-surface2);--line:var(--h-line);--ink:var(--h-ink);--mut:var(--h-mut);--ok:var(--h-ok);--bad:var(--h-bad);--bg:var(--h-bg);
  --dz-r:22px;--dz-rc:16px;--dz-ri:14px;--dz-grad:var(--h-grad);--dz-e1:var(--h-e1);--dz-e2:var(--h-e2);--dz-ease:var(--h-ease);
  max-width:1480px;margin:0 auto;color:var(--h-ink)}
.designer3 .btn{transition:transform var(--h-dur-fast) var(--dz-ease),box-shadow var(--h-dur-fast) var(--dz-ease),filter var(--h-dur-fast)}
.designer3 .btn:not(.alt):not(.dzokd){background:var(--dz-grad);color:#fff}
.designer3 .btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--dz-e2)}
.designer3 .btn:not(:disabled):active{transform:scale(.985);box-shadow:none}
.designer3 .btn.alt{background:var(--h-surface2);color:var(--h-ink);border:1px solid transparent}
.designer3 .btn.alt:not(:disabled):hover{border-color:color-mix(in srgb,var(--h-pri) 35%,transparent)}
.designer3 :focus-visible{outline:3px solid #ffb703;outline-offset:2px}
.designer3 input:focus,.designer3 textarea:focus,.designer3 select:focus{border-color:var(--h-pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--h-pri) 22%,transparent);outline:none}
.designer3 input:focus-visible,.designer3 textarea:focus-visible,.designer3 select:focus-visible{outline:3px solid #ffb703;outline-offset:1px}
.dz3-eyebrow{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--h-pri-ink)}

/* ---------- hero ---------- */
.dz3-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:var(--h-gap);grid-template-columns:minmax(0,1fr);padding:clamp(18px,1.6vw + 12px,36px);border-radius:var(--dz-r);background:var(--dz-grad);color:#fff;box-shadow:var(--h-e3);margin-bottom:var(--h-gap);animation:dz3hero .58s cubic-bezier(.22,1,.36,1) both}
.dz3-hero::before{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent);z-index:-1;pointer-events:none}
.dz3-hero::after{content:"";position:absolute;inset:-45% 55% auto -20%;height:90%;background:radial-gradient(closest-side,rgba(120,170,255,.26),transparent);z-index:-1;pointer-events:none}
.dz3-hero .dz3-eyebrow{color:rgba(255,255,255,.82)}
.dz3-hero h1{color:#fff;margin:6px 0 6px;font-size:clamp(24px,1.4vw + 17px,38px);line-height:1.12;letter-spacing:-.02em}
.dz3-lede{margin:0 0 12px;color:rgba(255,255,255,.92);max-width:62ch;overflow-wrap:anywhere}
.dz3-idrow{display:flex;align-items:flex-start;gap:8px;margin:2px 0 10px;min-width:0}
.dz3-namer{display:flex;align-items:center;gap:6px;min-width:0}
.dz3-name{margin:0;font-size:clamp(1.02rem,.3vw + .95rem,1.18rem);font-weight:750;overflow-wrap:anywhere;min-width:0}
.dz3-nameed{display:flex;gap:8px;align-items:flex-start;flex:1;min-width:0}
.dz3-nameed textarea{flex:1;background:rgba(255,255,255,.96);color:#1d1b3a;border-color:transparent}
.dz3-hero .btn.dz3-done,.dz3-hero .btn.dz3-next{background:#fff!important;color:#3b2aa8!important;box-shadow:0 2px 10px rgba(20,10,80,.18)}
:root[data-accent="teal"] .dz3-hero .btn.dz3-next,:root[data-accent="teal"] .dz3-hero .btn.dz3-done{color:#0b4f4a!important}
:root[data-accent="ocean"] .dz3-hero .btn.dz3-next,:root[data-accent="ocean"] .dz3-hero .btn.dz3-done{color:#123f8f!important}
:root[data-accent="indigo"] .dz3-hero .btn.dz3-next,:root[data-accent="indigo"] .dz3-hero .btn.dz3-done{color:#312e81!important}
.dz3-icon{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background var(--h-dur-fast)}
.dz3-icon:hover{background:rgba(255,255,255,.22)}
.dz3-hero :focus-visible{outline:3px solid #ffcf4d;outline-offset:2px}
.dz3-menuw{position:relative;flex:none}
.dz3-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:15rem;padding:8px;border-radius:14px;background:var(--h-surface);color:var(--h-ink);box-shadow:var(--h-e3);border:1px solid var(--h-line);animation:dz3fade .18s ease both}
.dz3-mi{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:none;color:var(--h-ink);font:inherit;font-weight:650;cursor:pointer;text-align:left}
.dz3-mi:hover{background:var(--h-surface2)}.dz3-mi.danger{color:var(--h-bad)}
.dz3-mnote{margin:4px 12px 2px;font-size:12.5px;color:var(--h-mut)}
.dz3-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.dz3-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:#fff;max-width:100%}
.btn.dz3-next{margin:0;font-size:1rem;padding:11px 18px}
.dz3-hr{position:relative;display:flex;flex-direction:column;gap:12px;justify-content:center;min-width:0}
.dz3-prog{position:relative;z-index:1;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:none}
.dz3-pk{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.dz3-pn{margin:2px 0 8px}.dz3-pn b{font-size:clamp(28px,1.4vw + 20px,40px);line-height:1}.dz3-pn span{color:rgba(255,255,255,.85);font-weight:650}
.dz3-pb{height:8px;border-radius:9px;background:rgba(255,255,255,.22);overflow:hidden}
.dz3-pb i{display:block;height:100%;border-radius:9px;background:#fff;transition:width var(--h-dur-bar) var(--dz-ease)}
.dz3-ps{margin:8px 0 0;font-size:13px;color:rgba(255,255,255,.88)}
.dz3-mini{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.dz3-mini li{position:relative;display:grid;place-items:center}
.dz3-mini li:not(:last-child)::after{content:"";position:absolute;left:calc(50% + 15px);right:calc(-50% + 15px);top:50%;height:2px;background:rgba(255,255,255,.28)}
.dz3-mini span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:800;border:2px solid rgba(255,255,255,.45);color:#fff}
.dz3-mini .m-ok span{background:#fff;color:#2b6b4f;border-color:#fff}
.dz3-mini .m-ai span{border-color:#fff;background:rgba(255,255,255,.2)}
.dz3-mini .m-rev span{border-color:#ffd27a;background:rgba(255,210,122,.25)}
.dz3-mini .on span{box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.dz3-art{position:absolute;right:-6px;bottom:-14px;width:120px;height:120px;color:rgba(255,255,255,.14);z-index:0;pointer-events:none}
@container main (min-width:820px){.dz3-hero{grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr);align-items:center}}

/* ---------- workspace grid, timeline, phone step bar ---------- */
.designer3 .dz3-work{display:grid;gap:var(--h-gap);grid-template-columns:minmax(0,1fr);align-items:start}
.dz3-main{min-width:0}
.dz3-side{display:none}
@container main (min-width:860px){
  .designer3 .dz3-work{grid-template-columns:minmax(210px,248px) minmax(0,1fr)}
  .dz3-side{display:block;position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:14px 10px;border-radius:var(--dz-rc);background:var(--h-surface);border:1px solid var(--h-line);box-shadow:var(--dz-e1)}
  .dz3-bar{display:none!important}
  .dz3-help{grid-column:2}
}
@container main (min-width:1400px){
  .designer3 .dz3-work{grid-template-columns:minmax(220px,252px) minmax(0,1fr) minmax(260px,300px)}
  .dz3-help{grid-column:3;grid-row:1;position:sticky;top:16px}
  .dz3-help:not([open]){align-self:start}
}
.dz3-sidek{margin:2px 8px 8px;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--h-mut)}
.dz3-tl{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dz3-tl li{position:relative}
.dz3-tl li:not(:last-child)::before{content:"";position:absolute;left:25px;top:44px;bottom:-8px;width:2px;background:var(--h-line);z-index:0}
.dz3-tl li.t-ok:not(:last-child)::before{background:color-mix(in srgb,var(--h-ok) 55%,var(--h-line))}
.dz3-tl button{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px;border:1px solid transparent;border-radius:12px;background:none;color:var(--h-ink);font:inherit;text-align:left;cursor:pointer;transition:background var(--h-dur-fast),border-color var(--h-dur-fast)}
.dz3-tl button:hover{background:var(--h-surface2)}
.dz3-tl .on button{background:color-mix(in srgb,var(--h-pri) 11%,var(--h-surface));border-color:color-mix(in srgb,var(--h-pri) 45%,transparent);box-shadow:inset 3px 0 0 var(--h-pri)}
.dz3-n{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;font-size:12.5px;font-weight:800;background:var(--h-surface);border:2px solid var(--h-line);color:var(--h-mut);font-variant-numeric:tabular-nums}
.t-ai .dz3-n{border-color:color-mix(in srgb,var(--h-pri) 60%,transparent);color:var(--h-pri)}
.t-rev .dz3-n{border-color:var(--h-warn);color:var(--h-warn);background:var(--h-warn-bg)}
.t-ok .dz3-n{border-color:var(--h-ok);background:var(--h-ok);color:#fff}
:root[data-theme="dark"] .t-ok .dz3-n{color:#0d2a1e}
.t-own .dz3-n{border-color:color-mix(in srgb,var(--h-pri) 40%,var(--h-line));color:var(--h-ink)}
.on .dz3-n{background:var(--dz-grad);border-color:transparent;color:#fff}
.dz3-tx{display:flex;flex-direction:column;min-width:0}
.dz3-t{font-weight:700;font-size:.93rem;line-height:1.25}
.dz3-s{font-size:12.5px;color:var(--h-mut);line-height:1.3}
.t-rev .dz3-s,.dz3-s.s-rev{color:var(--h-warn)}.t-ok .dz3-s,.dz3-s.s-ok{color:var(--h-ok)}
.dz3-bar{position:relative;display:grid;gap:8px;padding:12px 14px;margin-bottom:var(--h-gap);border-radius:var(--dz-rc);background:var(--h-surface);border:1px solid var(--h-line);box-shadow:var(--dz-e1)}
.dz3-barh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.dz3-barh p{margin:0}
.dz3-bar .dz3-pb{background:var(--h-surface2)}.dz3-bar .dz3-pb i{background:var(--dz-grad)}
.dz3-barb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dz3-barb .btn{margin:0;padding:6px 8px;white-space:nowrap}
.hdlg.dz3-sheet{width:min(30rem,calc(100vw - 16px))}
@media(max-width:760px){.hdlg.dz3-sheet{margin:auto auto 0;width:100%;max-width:none;border-radius:22px 22px 0 0;max-height:85dvh}}
.dz3-sheetl{padding:4px 12px 16px}
.dz3-sheetl li:not(:last-child)::before{left:37px}

/* ---------- step content ---------- */
.designer3 .dz3-card{margin:0;border-radius:var(--dz-r);padding:clamp(16px,1.4vw + 10px,30px);background:var(--h-surface);border-color:var(--h-line);box-shadow:var(--dz-e1);animation:dz3xf .28s var(--dz-ease) both}
.designer3 .dz3-card>.dz3-sh{animation:dz3step .3s var(--dz-ease) both} /* the slide is on the heading only: scroll anchoring measures controls further down, which never move */
.designer3 .dz3-card>*{max-width:76rem}
.dz3-sh{margin-bottom:10px}
.dz3-sh h2{font-size:clamp(1.3rem,.7vw + 1.05rem,1.75rem);letter-spacing:-.01em;margin:2px 0 0}
.dz3-intro{margin:6px 0 0;color:var(--h-mut);max-width:65ch}.dz3-intro:empty{display:none}
.designer3 .dzhead{margin-bottom:0}
.designer3 .dzlede{margin-top:6px}
.designer3 .dzacts{border-top:0;margin-top:18px;padding:12px;border-radius:var(--dz-ri);background:var(--h-surface2)}
.dz3-dock{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--h-line)}
.dz3-dock .btn{margin:0}
.dz3-dock .dz3-ok{min-width:10rem}
@container main (max-width:480px){.dz3-dock{display:grid;grid-template-columns:1fr 1fr}.dz3-dock .dz3-ok{grid-column:1/-1;grid-row:1}}
.designer3 .btn.dzokd{background:color-mix(in srgb,var(--h-ok) 15%,var(--h-surface));color:var(--h-ok);border:1px solid color-mix(in srgb,var(--h-ok) 40%,transparent)}
.dz3-more{margin-top:10px;border:1px solid var(--h-line);border-radius:var(--dz-ri);background:var(--h-surface);overflow:hidden}
.dz3-more>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:.92rem;color:var(--h-pri-ink);list-style:none}
.dz3-more>summary::-webkit-details-marker{display:none}
.dz3-more>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .25s var(--dz-ease);flex:none}
.dz3-more[open]>summary::before{transform:rotate(45deg)}
.dz3-more-b{padding:2px 14px 12px;animation:dz3fade .4s var(--dz-ease) both}
.dz3-ib{min-width:40px;display:inline-grid;place-items:center;text-decoration:none!important}

/* Step 1: question builder */
.designer3 .dzhero.dz3-q{background:linear-gradient(160deg,color-mix(in srgb,var(--h-pri) 8%,var(--h-surface)),var(--h-surface) 70%);border:1px solid color-mix(in srgb,var(--h-pri) 22%,var(--h-line));border-radius:var(--dz-r);padding:clamp(16px,1.6vw + 10px,30px)}
.dz3-qtop{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dz3-qic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--dz-grad);color:#fff;flex:none}
.designer3 .dzql{font-size:clamp(1.3rem,.9vw + 1rem,1.85rem);letter-spacing:-.015em}
.designer3 .dzqin{border-radius:var(--dz-ri);padding:14px 16px;min-height:110px;font-size:max(16px,1.08em);line-height:1.5;border:1.5px solid color-mix(in srgb,var(--h-pri) 30%,var(--h-line));background:var(--h-surface)}
.designer3 .btn.dzgo{padding:13px 22px;font-size:1.03rem;border-radius:12px}
.designer3 .btn.dzgo[aria-busy="true"]{opacity:.85}
.designer3 .dzprog{position:relative;overflow:hidden;padding:14px 16px;border-radius:var(--dz-ri);background:var(--h-surface);border:1px solid color-mix(in srgb,var(--h-pri) 30%,var(--h-line))}
.dz3-pbar{position:absolute;left:0;right:0;top:0;height:3px;background:color-mix(in srgb,var(--h-pri) 15%,transparent);overflow:hidden}
.dz3-pbar i{position:absolute;inset:0 auto 0 0;width:35%;background:var(--dz-grad);border-radius:3px;animation:dz3slide 1.6s ease-in-out infinite}
.designer3 .dzdirs{grid-template-columns:minmax(0,1fr)}
@container main (min-width:760px){.designer3 .dzdirs{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.designer3 .dzdirs li{display:flex;flex-direction:column;gap:4px;background:var(--h-surface);border:1px solid var(--h-line);border-radius:var(--dz-rc);box-shadow:var(--dz-e1);transition:transform var(--h-dur-fast),box-shadow var(--h-dur-fast),border-color var(--h-dur-fast)}
.designer3 .dzdirs li:hover{transform:translateY(-2px);box-shadow:var(--dz-e2);border-color:color-mix(in srgb,var(--h-pri) 40%,var(--h-line))}
.designer3 .dzdirs .btn{align-self:flex-start;margin-top:auto}
.dz3-dk{margin:0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--h-pri-ink)}
.designer3 .dzpanel{border-radius:var(--dz-r);box-shadow:var(--dz-e1)}

/* review board cards */
.designer3 .dzc{border-radius:var(--dz-rc);background:var(--h-surface);border:1px solid var(--h-line);box-shadow:var(--dz-e1);transition:transform var(--h-dur-fast) var(--dz-ease),box-shadow var(--h-dur-fast),border-color var(--h-dur-fast),background .6s}
.designer3 .dzc:hover{transform:translateY(-2px);box-shadow:var(--dz-e2);border-color:color-mix(in srgb,var(--h-pri) 40%,var(--h-line))}
.designer3 .dzc:focus-within{border-color:color-mix(in srgb,var(--h-pri) 55%,var(--h-line))}
.designer3 .dzc.st-ok{border-color:color-mix(in srgb,var(--h-ok) 45%,var(--h-line))}
.designer3 .dzc.st-rev{border-color:color-mix(in srgb,var(--h-warn) 50%,var(--h-line))}
.dz3-cgo{display:flex;flex-direction:column;gap:6px;cursor:pointer;min-width:0}
.dz3-ct{min-width:0}
.dzc-k{margin:0;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--h-mut)}
.designer3 .dzc-ic{background:color-mix(in srgb,var(--h-pri) 12%,var(--h-surface));color:var(--h-pri)}
.designer3 .dzc.st-ok .dzc-ic{background:var(--dz-grad);color:#fff}
.dz3-cdl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 10px;margin:2px 0;font-size:.9rem}
.dz3-cdl dt{font-weight:700;color:var(--h-mut)}.dz3-cdl dd{margin:0;overflow-wrap:anywhere}
.dz3-stag{animation:dz3fade .42s var(--dz-ease) both;animation-delay:calc(var(--i,0) * 55ms)}
.designer3 .dzpop{animation:dz3ok .9s var(--dz-ease)}
.designer3 .dzmeter{background:var(--h-surface);border-radius:var(--dz-rc)}

/* Step 2: hypothesis */
.dz3-sugg{padding:14px 16px;border-radius:var(--dz-rc);background:linear-gradient(150deg,color-mix(in srgb,var(--h-pri) 10%,var(--h-surface)),var(--h-surface));border:1px solid color-mix(in srgb,var(--h-pri) 28%,var(--h-line))}
.dz3-tag{display:inline-flex;align-items:center;gap:5px;margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--h-pri-ink)}
.dz3-sugg label{font-size:.85rem;color:var(--h-mut)}
.designer3 .dz3-why{margin:12px 0;border-radius:var(--dz-rc);background:color-mix(in srgb,var(--h-blue) 9%,var(--h-surface));border:1px solid color-mix(in srgb,var(--h-blue) 22%,var(--h-line))}
.dz3-mine{margin-top:12px;padding:14px 16px;border-radius:var(--dz-rc);background:var(--h-surface);border:2px solid color-mix(in srgb,var(--h-pri) 45%,var(--h-line))}
.dz3-mine h3,.designer3 .dz3-why h3{margin:0 0 4px!important}
.dz3-mine label{font-size:.85rem;color:var(--h-mut)}

/* Step 3: variables lab */
.dz3-relh{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--h-mut)}
.dz3-relh span:first-child{color:var(--h-pri-ink)}.dz3-relh span:last-child{color:var(--h-blue)}
.dz3-rel{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.dz3-arrow{display:none}
@container main (min-width:900px){.dz3-rel{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:start}.dz3-arrow{display:grid;place-items:center;align-self:center;width:34px;height:34px;border-radius:50%;background:var(--dz-grad);color:#fff}}
.dz3-col{padding:12px 14px;border-radius:var(--dz-rc);border:1px solid var(--h-line);background:var(--h-surface);border-top:4px solid var(--h-pri);min-width:0}
.dz3-col.dv{border-top-color:var(--h-blue)}
.dz3-col h3{margin:2px 0 8px!important}
.dz3-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--h-pri)}.dz3-col.dv .dz3-dot{background:var(--h-blue)}
.dz3-col .dzitem{background:var(--h-bg)}
.dz3-relsum{display:flex;gap:8px;align-items:flex-start;margin:12px 0 4px;padding:10px 14px;border-radius:var(--dz-ri);background:var(--h-surface2);font-size:.93rem}
.dz3-relsum .ic{flex:none;margin-top:3px;color:var(--h-pri)}
.dz3-cvs{grid-template-columns:minmax(0,1fr)}
@container main (min-width:1100px){.dz3-cvs{grid-template-columns:repeat(2,minmax(0,1fr))}.dz3-cvs .form3{grid-template-columns:minmax(0,1fr)}}

/* Step 4: materials studio */
.dz3-stats{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin:4px 0 12px}
@container main (min-width:640px){.dz3-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dz3-stat{padding:12px 14px;border-radius:var(--dz-ri);background:var(--h-surface2);min-width:0}
.dz3-stat b{display:block;font-size:clamp(1.4rem,.8vw + 1.1rem,1.9rem);line-height:1.1;color:var(--h-pri-ink);font-variant-numeric:tabular-nums}
.dz3-stat span{font-size:12.5px;font-weight:650;color:var(--h-mut)}
.designer3 .dzmlist{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
/* materials stay one per row: their editing row needs the full card width */
.designer3 .dzmat{padding:10px 12px;border-radius:var(--dz-ri);background:var(--h-surface);box-shadow:var(--dz-e1);transition:border-color var(--h-dur-fast),box-shadow var(--h-dur-fast)}
.designer3 .dzmat:hover{box-shadow:var(--dz-e2)}
.dz3-mtop{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.dz3-av{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:12.5px;font-weight:700;background:var(--h-surface2);color:var(--h-mut)}
.dz3-av.av-have,.dz3-av.av-borrow{background:var(--h-ok-bg);color:var(--h-ok)}
.dz3-av.av-buy{background:var(--h-warn-bg);color:var(--h-warn)}
.dz3-av.av-na{background:var(--h-bad-bg);color:var(--h-bad)}

/* Step 5: design studio */
.dz3-dgrid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:900px){.dz3-dgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.dz3-panel{padding:14px 16px;border-radius:var(--dz-rc);border:1px solid var(--h-line);background:var(--h-surface);min-width:0;margin-top:12px}
.dz3-dgrid .dz3-panel{margin-top:0}
.dz3-panel h3{margin-top:0!important}
.dz3-conds{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:6px}
.dz3-cond{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto auto;align-items:center;gap:4px}
.dz3-ci{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--h-surface2);color:var(--h-pri-ink);font-size:12.5px;font-weight:800}
.dz3-trials{display:grid;grid-template-columns:44px minmax(0,7rem) 44px;align-items:center;gap:8px;margin:4px 0 6px}
.designer3 .btn.dz3-step{margin:0;min-width:44px;padding:8px;font-size:1.25rem;line-height:1}
.dz3-trials input{text-align:center;font-weight:750;font-size:1.1rem}
.dz3-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:4px 0 8px;font-size:.93rem}
.dz3-dl dt{font-weight:700;color:var(--h-mut)}.dz3-dl dd{margin:0;overflow-wrap:anywhere}
.designer3 .dztbl{max-height:26rem;overflow:auto;border:1px solid var(--h-line);border-radius:var(--dz-ri)}
.designer3 .dztbl table{border-collapse:separate;border-spacing:0;min-width:100%}
.designer3 .dztbl th,.designer3 .dztbl td{padding:9px 12px;border-bottom:1px solid var(--h-line);white-space:nowrap}
.designer3 .dztbl thead th{position:sticky;top:0;z-index:2;background:var(--h-surface2);color:var(--h-ink);font-size:.86rem}
.designer3 .dztbl tbody th{position:sticky;left:0;z-index:1;background:var(--h-surface);font-weight:700}
.designer3 .dztbl thead th:first-child{left:0;z-index:3}
.designer3 .dztbl tbody tr:nth-child(even) td,.designer3 .dztbl tbody tr:nth-child(even) th{background:color-mix(in srgb,var(--h-pri) 4%,var(--h-surface))}
.designer3 .dztbl td{min-width:5.5rem}

/* Step 6: procedure timeline */
.dz3-tline{position:relative}
.designer3 .dz3-tline .dzstage{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:0;border:0;background:none;position:relative}
.designer3 .dz3-tline .dzstage:not(:last-child)::before{content:"";position:absolute;left:19px;top:42px;bottom:-10px;width:2px;background:var(--h-line)}
.designer3 .dz3-tline .dzn{width:40px;height:40px;font-size:1rem;position:relative;z-index:1;background:var(--dz-grad)}
.dz3-stb{padding:12px 14px;border-radius:var(--dz-rc);border:1px solid var(--h-line);background:var(--h-surface);box-shadow:var(--dz-e1);min-width:0}

/* Step 7: safety review */
.dz3-safeh{margin-top:0!important}
.dz3-hzhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.designer3 .dzhaz{border-left:4px solid var(--h-line);border-radius:var(--dz-ri);background:var(--h-surface);box-shadow:var(--dz-e1)}
.designer3 .dzhaz.warm{border-left-color:var(--h-warn)}
.designer3 .dzhaz.ack{border-left-color:var(--h-ok);background:color-mix(in srgb,var(--h-ok) 5%,var(--h-surface))}
.dz3-hic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--h-warn-bg);color:var(--h-warn);flex:none}
.dzhaz.ack .dz3-hic{background:var(--h-ok-bg);color:var(--h-ok)}
.dz3-ackt{font-size:12.5px;font-weight:700;color:var(--h-ok)}
.designer3 .ghaz{border-radius:var(--dz-rc)}

/* Step 8: digital lab manual */
.dz3-ghead{display:grid;gap:10px;margin:6px 0 14px;padding:clamp(14px,1.4vw + 10px,24px);border-radius:var(--dz-r);background:linear-gradient(150deg,color-mix(in srgb,var(--h-pri) 10%,var(--h-surface)),color-mix(in srgb,var(--h-blue) 6%,var(--h-surface)));border:1px solid color-mix(in srgb,var(--h-pri) 20%,var(--h-line))}
.dz3-gt{font-size:clamp(1.25rem,.8vw + 1rem,1.7rem)!important;margin:2px 0!important}
.dz3-ghl p{margin:2px 0;max-width:62ch}
.dz3-gtools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dz3-gtools .btn{margin:0}
.dz3-ghead .dz3-chip{background:var(--h-surface);color:var(--h-ink);border-color:var(--h-line)}
.designer3 .grec{background:var(--h-surface);margin:0}
.designer3 .gjump{position:sticky;top:0;z-index:4;align-items:center;padding:8px 10px;border-radius:var(--dz-ri);background:color-mix(in srgb,var(--h-surface) 92%,transparent);border:1px solid var(--h-line);box-shadow:var(--dz-e1);overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
.designer3 .gjump .chip{flex:none}
.dz3-tock{margin:0 4px 0 2px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--h-mut);flex:none}
.designer3 .gwrap [id^="g-"]{scroll-margin-top:72px}
.designer3 .gsec{border-top:0;margin-top:18px;padding:14px 16px;border-radius:var(--dz-rc);background:var(--h-surface);border:1px solid var(--h-line);box-shadow:var(--dz-e1)}
.designer3 .gsteps::before{left:19px;background:linear-gradient(var(--h-pri),var(--h-blue));opacity:.35}
.designer3 .gstep{grid-template-columns:40px minmax(0,1fr)}
.designer3 .gnum{width:40px;height:40px;font-size:1rem;background:var(--h-surface)}
.designer3 .gbody{border-radius:var(--dz-ri);box-shadow:var(--dz-e1)}
.designer3 .gbody h4{font-size:1.02rem}
.designer3 .gdet{padding:12px;border-radius:var(--dz-ri);background:color-mix(in srgb,var(--h-pri) 5%,var(--h-surface));border:1px solid color-mix(in srgb,var(--h-pri) 18%,var(--h-line))}
.designer3 .gdsec{padding:10px 12px;border-radius:12px;background:var(--h-surface);border:1px solid var(--h-line)}
@container main (min-width:1000px){.designer3 .gdet>div:has(> .gdsec){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.designer3 .gdet .gdsec{margin:0}}
.designer3 .gtr{border-radius:12px;border:1px solid var(--h-line);padding:6px 12px;margin:6px 0;background:var(--h-bg)}
.designer3 .gdia{border-radius:var(--dz-ri);background:var(--h-bg)}

/* ---------- help panel ---------- */
.dz3-help{border-radius:var(--dz-rc);background:var(--h-surface);border:1px solid var(--h-line);box-shadow:var(--dz-e1);overflow:hidden}
.dz3-help>summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px;font-weight:750;cursor:pointer;list-style:none;color:var(--h-pri-ink)}
.dz3-help>summary::-webkit-details-marker{display:none}
.dz3-helpb{padding:0 16px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dz3-helpb .btn{margin:0;text-align:left;justify-content:flex-start;white-space:normal}
.dz3-helpo:empty{display:none}
.dz3-helpo{width:100%;padding:10px 12px;border-radius:12px;background:var(--h-surface2);white-space:pre-wrap;font-size:.93rem}

/* ---------- motion (gentle; off for reduced motion or Animation: Off) ---------- */
@keyframes dz3hero{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dz3xf{from{opacity:.001}to{opacity:1}}
@keyframes dz3step{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dz3fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dz3ok{0%{background:var(--h-surface)}30%{background:color-mix(in srgb,var(--h-ok) 14%,var(--h-surface))}100%{background:var(--h-surface)}}
@keyframes dz3slide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
:root[data-motion="subtle"] .dz3-stag{animation-delay:0s}
:root[data-motion="off"] .designer3 *,:root[data-motion="off"] .designer3{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.designer3 *,.designer3{animation:none!important;transition:none!important}.designer3 .btn:not(:disabled):hover,.designer3 .dzc:hover,.designer3 .dzdirs li:hover{transform:none}}

@container main (max-width:600px){.dz3-mini{display:none}.dz3-prog{padding:12px 14px}.dz3-pn b{font-size:28px}}

.dzlock{display:flex;align-items:center;gap:6px;margin:8px 0 0;justify-content:flex-end;text-align:right}.dzlock .ic{flex:none;color:var(--h-pri)}
@container main (max-width:480px){.dzlock{justify-content:flex-start;text-align:left}}