/* Watch HeyHab work — one workspace whose panels rise as the work moves through them. */
.story{max-width:1240px;margin:0 auto}
.st-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.st-dock{position:sticky;top:64px;z-index:5;margin:12px calc(-1*var(--gutter)) 0;padding:10px var(--gutter) 8px;background:var(--day);box-shadow:0 10px 18px -18px #18141D66}
.st-dock .st-controls{justify-content:flex-end}
.st-title{margin-top:6px;font:400 clamp(26px,3.4vw,40px)/1 var(--impact);letter-spacing:-.01em;text-transform:uppercase}
.st-controls{display:flex;gap:8px;flex-wrap:wrap}
.st-controls .btn{min-width:44px}
.st-disclosure{margin-top:8px;padding:10px 14px;border-radius:var(--r-m);background:var(--wait-w);color:var(--wait-i);font:600 14px/1.35 var(--ui);text-align:center}
.st-progress{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:8px 0 0;padding:0;list-style:none}
.st-progress button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;gap:4px 8px;width:100%;padding:8px 6px;border-radius:10px;cursor:pointer;color:var(--ink-3)}
.st-progress button:focus-visible{outline:3px solid var(--lantern);outline-offset:2px}
.st-progress button[aria-current]{color:var(--ink);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair)}
.st-bar{grid-column:1/-1;height:4px;border-radius:4px;background:var(--hair);overflow:hidden}.st-bar i{display:block;height:100%;width:0;background:var(--lantern)}
.st-cn{font:400 15px/1.2 var(--impact)}.st-ct{font:600 13px/1.25 var(--ui)}
.st-caption{min-height:2.8em;margin-top:12px;font:600 clamp(17px,2vw,21px)/1.4 var(--ui);color:var(--ink)}
.st-space{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:8px;perspective:1400px;align-items:start}
@media(max-width:1100px){.st-space{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st-pane{min-width:0;padding:16px;border-radius:var(--r-l);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);opacity:.55;transform:translateZ(0);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),opacity .6s var(--ease)}
.st-pane.active{opacity:1;transform:translateY(-6px) translateZ(24px) rotateX(1.5deg);box-shadow:inset 0 0 0 2px var(--lantern),0 26px 50px -26px #18141D88}
.st-space.st-done .st-pane{opacity:.55}
.st-h{font:600 11px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.st-quiet{color:var(--ink-3)}
.st-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.st-row .chip{white-space:normal;text-align:left;line-height:1.25}
.st-cases{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.st-case{padding:12px;border-radius:var(--r-m);background:var(--day)}
.st-id{font-size:12.5px;color:var(--ink-3)}
.st-q{margin-top:6px;font-weight:600;overflow-wrap:anywhere}
.st-scope{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--crit-w);color:var(--crit-i);font-size:14px}
.st-article{position:relative;padding:14px;border-radius:var(--r-m);background:var(--day);transition:box-shadow .4s}
.st-article+.st-article{margin-top:10px}.st-dim{opacity:.7}
.st-scan{box-shadow:inset 0 0 0 2px var(--src-i)}
.st-colors{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:6px 0 0;padding:0}
.st-colors li{padding:4px 10px;border-radius:999px;background:var(--sunk);font-size:14px;transition:background .3s}
.st-colors li.st-hit{background:var(--src-w);color:var(--src-i)}
.st-colors li.st-new{background:var(--ok-w);color:var(--ok-i);font-weight:700}
.st-colors li.st-missing{background:var(--crit-w);color:var(--crit-i);font-weight:700;border:1.5px dashed currentColor}
.st-changed{margin-top:8px;color:var(--ok-i);font-weight:600}
.st-why{min-height:36px;padding:6px 2px;margin-top:6px;font-size:14px}
.st-finding,.st-alert{margin-top:12px;padding:10px 12px;border-radius:10px;font-weight:700}
.st-finding{background:var(--crit-w);color:var(--crit-i)}
.st-alert{background:var(--wait-w);color:var(--wait-i);margin-bottom:10px}
.st-draft blockquote{margin:0;padding:10px 12px;border-left:3px solid var(--lantern);background:var(--day);border-radius:0 10px 10px 0;font-size:16px}
.st-withdrawn blockquote{text-decoration:line-through;opacity:.6}
.st-source{margin:8px 0;font-size:14px}.st-source.ok{color:var(--ok-i)}.st-source.none{color:var(--ink-3)}
.st-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.st-btn{display:inline-flex;align-items:center;padding:9px 14px;border-radius:10px;background:var(--ink);color:var(--cream);font:600 14px var(--ui);transition:transform .2s,box-shadow .2s}
.st-btn.ghost{background:var(--sunk);color:var(--ink)}
.st-press{transform:scale(.96);box-shadow:0 0 0 4px var(--lantern)}
.st-article.st-press{transform:none;box-shadow:inset 0 0 0 2px var(--lantern)}
.st-owner{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:8px;background:var(--lantern);color:var(--on-lantern);font:700 12.5px/1.3 var(--ui)}
.st-count b{font:400 18px var(--impact);color:var(--lantern-ink)}
.st-ex{margin:8px 0 0;padding-left:20px}.st-ex li+li{margin-top:4px}
.st-suggest{margin-top:12px;padding:14px;border-radius:var(--r-m);background:var(--src-w);color:#1f317e}
.st-status{margin-top:12px;font-weight:700}.st-status.ok{color:var(--ok-i)}.st-status.high{color:var(--wait-i)}
.st-enter{animation:st-rise .55s var(--ease) both}
@keyframes st-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.st-end{margin:8px 0 16px;padding:24px;border-radius:var(--r-l);background:var(--ink);color:var(--cream);text-align:center}
.st-end .lede{color:var(--mist);margin:10px auto 0}
.st-end .st-actions{justify-content:center}
.st-history{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;list-style:none;margin:0 0 16px;padding:0;font:600 13px var(--ui);color:var(--mist)}
.st-history li+li::before{content:'→';margin-right:4px;color:var(--lantern)}
.st-hl{font:400 clamp(30px,5vw,56px)/1 var(--impact);text-transform:uppercase}.st-hl span{color:var(--lantern)}
.st-dialog{max-width:520px;border:0;border-radius:var(--r-l);padding:22px;box-shadow:var(--lift-hover)}
.st-dialog p{margin-top:10px}.st-dialog form{margin-top:16px}
.st-foot{margin-top:18px}
@media(max-width:760px){
  .st-space{grid-template-columns:1fr;gap:10px}
  .st-pane{opacity:1;padding:14px}
  .st-progress{gap:4px}.st-ct{display:none}.st-progress button{grid-template-columns:1fr;text-align:center}
  .st-controls{width:100%}.st-controls .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){.st-pane,.st-pane.active{transition:none;transform:none}.st-enter{animation:none}}

/* Scripted owner decisions: one unmistakable bar, fixed height so nothing below it moves. */
.st-decision{display:flex;align-items:center;gap:12px;min-height:58px;margin-top:8px;padding:8px 14px;border-radius:var(--r-m);background:var(--sunk);color:var(--ink-3);font:600 14px/1.35 var(--ui);transition:background .3s,color .3s}
.st-decision.on{background:var(--ink);color:var(--cream)}
.st-decision small{display:block;font-weight:500;color:var(--mist)}
.st-who{flex:none;padding:6px 10px;border-radius:999px;background:var(--lantern);color:var(--on-lantern);font:800 12px var(--ui);letter-spacing:.08em;text-transform:uppercase}
.st-rule{width:100%;text-align:center}
.st-exs summary{cursor:pointer;color:var(--ink-3);font-size:14px}
.st-exs .st-ex{font-size:14px}
.st-chips{display:none}
.st-next{max-width:58ch;margin:14px auto 0;color:var(--cream);font-weight:600}
.st-ghost{background:#ffffff14;color:var(--cream)}.st-ghost:hover{background:#ffffff24}
/* Demo page only: the site header scrolls away so the story keeps the screen. */
@media(max-width:760px){
  .demo-page .mast{position:relative;padding-top:8px;padding-bottom:6px;gap:6px}
  .demo-page .mast .brand span{font-size:15px}
  .demo-page .tabs{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:28px;scrollbar-width:none}
  .demo-page .tabs::-webkit-scrollbar{display:none}
  .demo-page .tabs a{flex:none;padding:7px 12px;font-size:13px}
  .demo-page .synthetic-bar{padding:5px var(--gutter);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .st-head .eyebrow{display:none}.st-title{font-size:22px}
  .st-dock{top:0;padding-top:8px}
  .st-dock .st-controls .btn{min-height:40px;padding:8px 10px}
  .st-disclosure{padding:7px 10px;font-size:12.5px}
  .st-caption{min-height:4.3em;font-size:16px}
  .st-decision{height:104px;font-size:13px;overflow:hidden}
  .st-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:8px}
  .st-chips button{all:unset;box-sizing:border-box;padding:8px 2px;border-radius:9px;text-align:center;font:600 12px/1.2 var(--ui);color:var(--ink-3);background:var(--sunk);cursor:pointer}
  .st-chips button[aria-pressed="true"]{background:var(--lantern);color:var(--on-lantern)}
  .st-chips button:focus-visible{outline:3px solid var(--lantern);outline-offset:2px}
  .st-space{display:block;min-height:440px;margin-top:8px}
  .st-pane:not(.active){display:none}
  .st-pane.active{max-height:none;-webkit-mask-image:none;transform:none;order:0;opacity:1}
  .st-space.st-done .st-pane{display:none}
}
.st-ended .st-decision,.st-ended .st-chips{display:none}