/* Scroll scenes (usecases.js). The frame follows the page (paper on Zone OS, the dark canvas on Your Zone);
   the window inside is the Zone app, drawn with the app's own tokens (zone-agent-os-autodev app/src/ui/tokens.css). */
.uc{--z-bg:#e9e7e3;--z-paper:#f7f6f2;--z-card:#fffefb;--z-text:#23272a;--z-muted:#55595d;--z-faint:#7a7e81;
 --z-line:rgba(32,37,42,.14);--z-edge:rgba(32,37,42,.24);--z-ink:#333a3e;--z-on:#f7f6f2;--z-tint:rgba(45,54,60,.055);
 --z-ok:#3d6650;--z-ok-bg:rgba(73,122,97,.1);--z-warn:#6f5c2b;--z-warn-bg:rgba(168,146,95,.15);
 --z-bad:#8a464d;--z-bad-bg:rgba(176,109,116,.12);--z-ctx:#4a6680;--z-ctx-bg:rgba(74,102,128,.11);
 --tg-i:#333a3e;--tg-m:#7b7e7f;--tg-p:#f7f6f2;--tg-e:rgba(51,58,62,.38);
 --z-shadow:0 22px 40px rgba(40,34,20,.10),0 2px 6px rgba(40,34,20,.06);
 --z-sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",sans-serif;
 --uc-top:76px}
body.yz .uc{--z-bg:#14161a;--z-paper:#1b1e23;--z-card:#1f2328;--z-text:#dde2e6;--z-muted:#aeb3b8;--z-faint:#8f969d;
 --z-line:rgba(255,255,255,.11);--z-edge:rgba(255,255,255,.22);--z-ink:#d0d7da;--z-on:#171b1f;--z-tint:rgba(255,255,255,.06);
 --z-ok:#86b69b;--z-ok-bg:rgba(95,156,125,.13);--z-warn:#c1ab77;--z-warn-bg:rgba(168,146,95,.15);
 --z-bad:#ca8b91;--z-bad-bg:rgba(176,109,116,.14);--z-ctx:#93abc4;--z-ctx-bg:rgba(147,171,196,.12);
 --tg-i:#d0d7da;--tg-m:#7d8488;--tg-p:#1b1e23;--tg-e:rgba(208,215,218,.4);
 --z-shadow:0 24px 48px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3)}

/* The story keeps the page's column. Top to bottom inside the pinned stage: the cases, the case's summary, its four
   beats in a row, then the window, which takes the column's full width. */
.uc-body{position:relative}
/* Sticky moves only inside its parent's content box, so the scroll room is the track's height, not padding. */
.uc-track{position:relative;height:calc(max(100vh - var(--uc-top), 560px) + var(--steps,4) * var(--uc-step,70vh))}
.uc-stage{position:sticky;top:var(--uc-top);height:calc(100vh - var(--uc-top));min-height:560px;
 display:flex;flex-direction:column;justify-content:center;gap:18px}
.uc-case{font-size:15px;font-weight:700;margin-bottom:6px}
.uc-sub{color:var(--dim);font-size:12px;line-height:1.8;text-wrap:pretty}
.uc-head .uc-sub{max-width:none;margin-top:6px}
/* the case in large type, sliding in when the case changes */
.uc-casehd{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.uc-ix{font-size:11px;color:var(--gold);letter-spacing:.14em;font-weight:700}
.uc-casehd h3{font-size:clamp(20px,2.5vw,26px);font-weight:700;line-height:1.2;letter-spacing:.005em}
.uc-note{display:inline-block;font-size:10px;letter-spacing:.06em;border:1px solid var(--line);padding:1px 6px;margin-left:4px}
.uc-beats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.uc-beats li{position:relative;padding:10px 14px 12px;opacity:.42;transition:opacity .35s}
.uc-beats li:first-child{padding-left:0}
.uc-beats li+li{border-left:1px solid var(--line)}
.uc-beats li.on{opacity:1}
.uc-beats li.past{opacity:.62}
.uc-beats .n{font-size:10px;color:var(--gold);letter-spacing:.08em;margin-right:8px}
.uc-beats b{font-size:12px;line-height:1.45}
.uc-beats p{font-size:11px;color:var(--dim);line-height:1.6;margin-top:4px;text-wrap:pretty}
.uc-beats u{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.uc-beats li+li u{left:14px}
.uc-beats u i{display:block;height:100%;width:calc(var(--fill,0) * 100%);background:var(--gold)}

.uc-fit{position:relative;min-width:0}
/* The window fills the column; the cards float inside it, as the app's own panels would. */
.uc-scenes{position:relative;width:760px;height:520px;transform-origin:0 0}
/* Handing over to the next case: the old scene fades out first, then the new one in, so two windows never overlap. */
.uc-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
.uc-scene.on{opacity:1;visibility:visible;transition:opacity .3s .18s}
.uc-head{display:grid;grid-template-columns:minmax(0,1fr)}
/* Every case's page sits in the same cell, so the head is always as tall as the tallest one: the window is sized
   once and does not jump when the case changes. Only the current page is visible. */
.uc-page{grid-area:2/1;visibility:hidden;opacity:0}
.uc-page.on{visibility:visible;opacity:1;animation:uc-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes uc-in{from{opacity:0;transform:translateY(14px)}}
/* the cases, in a row, with how far each has played */
.uc-cases{grid-area:1/1;display:flex;border-top:1px solid var(--line)}
.uc-cases button{position:relative;flex:1 1 auto;display:flex;gap:9px;align-items:baseline;font:inherit;font-size:12px;letter-spacing:.04em;color:var(--dim);
 background:none;border:0;border-bottom:1px solid var(--line);padding:9px 12px 9px 0;text-align:left;cursor:pointer;transition:color .3s;white-space:nowrap}
.uc-cases button span{font-size:9.5px;color:var(--gold);opacity:.6}
.uc-cases button:hover,.uc-cases button.on{color:var(--txt)}
.uc-cases button.on{font-weight:700}
.uc-cases button:focus{outline:none}
.uc-cases button:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.uc-cases button.on span{opacity:1}
.uc-cases u{position:absolute;left:0;right:12px;bottom:-1px;height:2px;overflow:hidden}
.uc-cases u i{display:block;height:100%;width:calc(var(--fill,0) * 100%);background:var(--gold)}
.uc-mob{display:none}

/* ---------- window ---------- */
.uc-win{position:absolute;left:0;top:0;width:760px;height:520px;background:var(--z-bg);border:1px solid var(--z-edge);
 display:grid;grid-template-columns:116px 1fr;overflow:hidden;font-family:var(--z-sans);color:var(--z-text);letter-spacing:0;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
 -webkit-font-smoothing:antialiased}
.uc-tg{display:block}
.uc-tg .ti{fill:var(--tg-i)}.uc-tg .tm{fill:var(--tg-m)}.uc-tg .tp{fill:var(--tg-p);stroke:var(--tg-e);stroke-width:.03}
.uc-rail{border-right:1px solid var(--z-line);padding:15px 9px 11px;display:flex;flex-direction:column}
.uc-brand{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:16px}
.uc-brand .uc-tg{width:22px;height:22px}
.uc-brand b{font-size:12px;font-weight:500;margin-top:4px}
.uc-brand i{font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:.32em;color:var(--z-muted)}
.uc-nav{display:flex;flex-direction:column;gap:2px}
.uc-nav a{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--z-muted);padding:6px 7px;border:1px solid transparent;transition:background .3s,color .3s}
.uc-nav a svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.25}
.uc-nav a.on{background:var(--z-tint);border-color:var(--z-line);color:var(--z-text);font-weight:600}
body:not(.yz) .uc-nav a.on{background:rgba(255,255,255,.62)}
.uc-nav a i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:8px;background:var(--z-ink);color:var(--z-on);padding:1px 4px}
.uc-nav .uc-set{margin-top:8px}
.uc-sp{flex:1}
.uc-steward{width:42px;height:42px;align-self:center;margin-bottom:10px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.14))}
.uc-who{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--z-muted)}
.uc-who span{font-family:var(--mono);font-size:8px;border:1px solid var(--z-line);padding:3px 4px}
.uc-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.uc-bar{height:34px;flex:none;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--z-line);font-size:10.5px}
.uc-cr{color:var(--z-muted)}
.uc-cr b{color:var(--z-text);font-weight:500}
.uc-pills{margin-left:auto;display:flex;gap:7px}
.uc-pills span{font-family:var(--mono);font-size:8px;padding:3px 6px;border:1px solid var(--z-line);color:var(--z-muted)}
.uc-pills span.on{color:var(--z-ok);background:var(--z-ok-bg);border-color:transparent}
.uc-pills span.on::before{content:"";display:inline-block;width:5px;height:5px;transform:rotate(45deg);background:var(--z-ok);margin-right:5px;vertical-align:1px}
.uc-views{position:relative;flex:1;min-height:0}
.uc-view{position:absolute;inset:0;display:flex;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.uc-stage[data-view=brief] [data-view=brief],.uc-stage[data-view=work] [data-view=work],
.uc-stage[data-view=approve] [data-view=approve],.uc-stage[data-view=memory] [data-view=memory]{opacity:1;visibility:visible;transition:opacity .35s}
.uc-pane{flex:1;min-width:0;padding:18px 22px;position:relative;overflow:hidden}
.uc-ze{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--z-muted)}
.uc-zh{font-size:23px;font-weight:500;letter-spacing:-.028em;margin-top:8px;line-height:1.1}
.uc-zl{font-size:10.5px;color:var(--z-muted);margin-top:7px}

.uc-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--z-line);border-bottom:1px solid var(--z-line);margin-top:12px}
.uc-stats div{padding:7px 0 7px 11px;display:flex;align-items:baseline;gap:6px;font-size:10px;color:var(--z-muted)}
.uc-stats div+div{border-left:1px solid var(--z-line)}
.uc-stats div:first-child{padding-left:0}
.uc-stats b{font-family:var(--mono);font-size:17px;font-weight:400;color:var(--z-text)}
.uc-sec{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--z-muted);margin:15px 0 3px;display:flex;align-items:center;gap:7px}
.uc-sec b{color:var(--z-text);font-weight:600}
.uc-sec span{border:1px solid var(--z-line);padding:1px 4px;letter-spacing:0}
.uc-item{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:9px 8px 10px;margin:0 -8px;border-top:1px solid var(--z-line);transition:background .4s}
.uc-item>.uc-tone{grid-column:1/-1;justify-self:start}
.uc-stage[data-flags~=hi] [data-view=brief] .uc-item.first{background:color-mix(in srgb,var(--gold) 9%,transparent)}
.uc-tone{font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 5px}
.uc-tone.warn{color:var(--z-warn);background:var(--z-warn-bg)}
.uc-tone.bad{color:var(--z-bad);background:var(--z-bad-bg)}
.uc-tone.context{color:var(--z-ctx);background:var(--z-ctx-bg)}
.uc-tone.ok{color:var(--z-ok);background:var(--z-ok-bg)}
.uc-it h4{font-size:13px;font-weight:600;letter-spacing:-.01em;margin-top:5px}
.uc-it p{font-size:10.5px;color:var(--z-muted);margin-top:2px;line-height:1.45}
.uc-item>.uc-btn{grid-column:2;grid-row:2/4;align-self:center}
.uc-src{display:flex;gap:7px;align-items:center;margin-top:5px;font-size:9.5px;color:var(--z-muted);min-width:0}
.uc-src i{font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:var(--z-faint);white-space:nowrap}
.uc-src q{border-left:2px solid var(--z-line);padding-left:6px;color:var(--z-text);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.uc-src q::before,.uc-src q::after{content:none}
.uc-btn{font-family:var(--z-sans);font-size:10px;font-weight:500;padding:5px 10px;border:1px solid var(--z-edge);color:var(--z-text);
 white-space:nowrap;display:inline-flex;align-items:center;transition:transform .15s,box-shadow .3s,background .3s;
 clip-path:polygon(-8px -8px,calc(100% + 8px) -8px,calc(100% + 8px) calc(100% - 14px),calc(100% - 14px) calc(100% + 8px),-8px calc(100% + 8px))}
body:not(.yz) .uc-btn:not(.pri):not(.ghost){background:rgba(255,255,255,.55)}
.uc-btn.pri{background:var(--z-ink);color:var(--z-on);border-color:var(--z-ink)}
.uc-btn.ghost{border-color:transparent;background:none;color:var(--z-muted)}
.uc-hot{box-shadow:0 0 0 1px var(--gold),0 0 0 5px color-mix(in srgb,var(--gold) 18%,transparent)}
.uc-press{transform:scale(.96)}

/* calendar brief: an hour axis and one column per day; a meeting that needs you threads down to its task */
.uc-cal{--h:20px;display:grid;grid-template-columns:30px repeat(3,minmax(0,1fr));margin-top:6px}
.uc-hrs{position:relative;margin-top:20px;height:calc(var(--hrs) * var(--h))}
.uc-hrs span{position:absolute;right:6px;top:calc(var(--a) * var(--h));transform:translateY(-50%);font-family:var(--mono);font-size:6.5px;color:var(--z-faint)}
.uc-day{display:flex;flex-direction:column;min-width:0}
.uc-dn{height:20px;display:flex;align-items:center;gap:6px;padding:0 6px;font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--z-muted)}
.uc-dn i{font-style:normal;color:var(--z-faint);letter-spacing:.06em}
.uc-day.today .uc-dn{color:var(--z-text);font-weight:600;box-shadow:inset 0 -2px 0 var(--z-ink)}
.uc-dc{position:relative;height:calc(var(--hrs) * var(--h));border-left:1px solid var(--z-line);border-bottom:1px solid var(--z-line);
 background:repeating-linear-gradient(to bottom,var(--z-line) 0 1px,transparent 1px var(--h))}
.uc-day.today .uc-dc{background-color:var(--z-tint)}
.uc-now{position:absolute;left:0;right:0;top:calc(var(--a) * var(--h));height:1px;background:var(--gold);z-index:2}
.uc-now::before{content:"";position:absolute;left:-3px;top:-2px;width:5px;height:5px;transform:rotate(45deg);background:var(--gold)}
.uc-ev{position:absolute;top:calc(var(--a) * var(--h) + 1px);height:calc(var(--l) * var(--h) - 2px);
 left:calc(var(--x) / var(--n) * 100% + 3px);width:calc(100% / var(--n) - 5px);
 display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:5px;padding:3px 6px;overflow:hidden;
 background:rgba(255,255,255,.42);border:1px solid var(--z-line);border-left:2px solid var(--z-line);font-size:8.5px;line-height:1.5;color:var(--z-muted);
 transition:box-shadow .35s,background .35s}
.uc-ev b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-ev time{font-family:var(--mono);font-size:6.5px;color:var(--z-faint);align-self:center}
.uc-ev.half time{display:none}
.uc-ev small{grid-column:1/-1;font-size:7.5px;color:var(--z-muted)}
.uc-ev.ask{background:var(--z-card);border-left-color:var(--z-ink);color:var(--z-text)}
.uc-day.lit .uc-ev.ask{box-shadow:0 0 0 1px var(--gold),0 0 0 4px color-mix(in srgb,var(--gold) 16%,transparent)}
.uc-thr{position:absolute;left:50%;top:calc(var(--a) * var(--h));bottom:-11px;border-left:1px dashed var(--gold);z-index:1;
 transform:scaleY(0);transform-origin:top;transition:transform .3s}
.uc-day.lit .uc-thr{transform:none}
.uc-tk{flex:1;display:flex;flex-direction:column;align-items:flex-start;margin:11px 3px 0 4px;padding:7px 8px 8px;background:var(--z-card);
 border:1px solid var(--z-line);border-top:2px solid var(--gold);opacity:0;transform:translateY(-6px);
 transition:opacity .35s .15s,transform .4s .15s,background .4s}
.uc-day.lit .uc-tk{opacity:1;transform:none}
.uc-tk h4{font-size:11.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-top:5px}
.uc-tk p{font-size:9.5px;line-height:1.4;color:var(--z-muted);margin-top:3px}
.uc-tf{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}
.uc-tf i{font-style:normal;font-family:var(--mono);font-size:6.5px;letter-spacing:.06em;color:var(--z-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.uc-tf .uc-btn{flex:none;padding:3px 8px;font-size:9px}
.uc-stage[data-flags~=hi] .uc-tk.first{background:color-mix(in srgb,var(--gold) 9%,var(--z-card))}
.uc-scene[data-cal] .uc-card[data-for="0"]{top:78px}
.uc-still .uc-tk,.uc-still .uc-thr{transition:none}

.uc-task{font-size:15.5px;font-weight:600;letter-spacing:-.015em;margin-top:7px}
.uc-meta{font-family:var(--mono);font-size:8.5px;color:var(--z-muted);margin-top:4px;letter-spacing:.04em}
.uc-plan{margin-top:12px;border-top:1px solid var(--z-line)}
.uc-plan.dim{opacity:.55}
.uc-row{display:grid;grid-template-columns:15px 72px 1fr;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--z-line);font-size:10.5px;
 opacity:.35;transition:opacity .35s}
.uc-row.run,.uc-row.done{opacity:1}
.uc-st{position:relative;width:13px;height:13px}
.uc-st svg{position:absolute;inset:0;width:13px;height:13px;opacity:0;transition:opacity .3s}
.uc-done circle{fill:var(--z-ok)}.uc-done path{fill:none;stroke:var(--z-on);stroke-width:1.4}
.uc-run circle{fill:none;stroke:var(--z-line);stroke-width:1.6}.uc-run path{fill:none;stroke:var(--gold);stroke-width:1.6}
.uc-row.done .uc-done,.uc-row.run .uc-run{opacity:1}
.uc-row.run .uc-run{animation:uc-spin 1s linear infinite}
.uc-row:not(.run):not(.done) .uc-run{opacity:.6}
@keyframes uc-spin{to{transform:rotate(360deg)}}
.uc-ag{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;background:var(--z-tint);padding:3px 4px;text-align:center;color:var(--z-ink);white-space:nowrap;overflow:hidden}
.uc-msg{margin-top:12px;display:grid;grid-template-columns:20px 1fr;gap:9px;opacity:0;transform:translateY(6px);transition:.4s}
.uc-stage[data-flags~=reply] .uc-msg,.uc-stage[data-beat="2"] .uc-msg,.uc-stage[data-beat="3"] .uc-msg{opacity:1;transform:none}
.uc-msg .uc-tg{width:20px;height:20px}
.uc-bb{background:var(--z-paper);border:1px solid var(--z-line);padding:8px 10px;font-size:10.5px;line-height:1.5}
.uc-bb b{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.2em;color:var(--z-muted);font-weight:400;margin-bottom:3px}
.uc-comp{position:absolute;left:22px;right:22px;bottom:14px;display:flex;align-items:center;border:1px solid var(--z-line);padding:8px 9px;font-size:10px;color:var(--z-faint)}
.uc-comp span{margin-left:auto;width:20px;height:20px;background:var(--z-ink)}
.uc-art{width:226px;flex:none;background:var(--z-paper);border-left:1px solid var(--z-line);display:flex;flex-direction:column}
.uc-tabs{display:flex;border-bottom:1px solid var(--z-line);font-size:9.5px}
.uc-tabs span{padding:9px 11px;color:var(--z-muted)}
.uc-tabs span:first-child{color:var(--z-text);font-weight:600;box-shadow:inset 0 -2px 0 var(--z-ink)}
.uc-doc{padding:14px 14px}
.uc-k{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;color:var(--z-muted)}
.uc-doc h5{font-size:14.5px;font-weight:600;letter-spacing:-.015em;margin-top:5px}
.uc-ln{height:5px;background:var(--z-tint);margin-top:7px}
.uc-ln:first-of-type{margin-top:14px}
.uc-tbl{width:100%;border-collapse:collapse;margin-top:11px;font-size:9.5px}
.uc-tbl th{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;color:var(--z-muted);font-weight:400;text-align:left;padding:5px 3px;border-bottom:1px solid var(--z-line)}
.uc-tbl td{padding:6px 3px;border-bottom:1px solid var(--z-line)}
.uc-tbl td:not(:first-child),.uc-tbl th:not(:first-child){font-family:var(--mono);font-size:9px}
.uc-tbl tr.hi td{background:color-mix(in srgb,var(--gold) 9%,transparent)}
.uc-nt{font-family:var(--mono);font-size:7.5px;color:var(--z-muted);margin-top:10px;line-height:1.6}
.uc-code{margin-top:11px;font-family:var(--mono);font-size:8.4px;line-height:1.9;border:1px solid var(--z-line)}
.uc-code div{padding:0 6px;white-space:nowrap;overflow:hidden}
.uc-code .a{background:var(--z-ok-bg);color:var(--z-ok)}
.uc-code .d{background:var(--z-bad-bg);color:var(--z-bad)}

/* approval */
.uc-apv{margin-top:12px;background:var(--z-card);border:1px solid var(--z-edge);padding:12px 13px 11px;font-family:var(--z-sans);color:var(--z-text)}
.uc-hd{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--z-muted)}
.uc-apv .uc-hd .w{display:flex;align-items:center;gap:6px;color:var(--z-warn)}
.uc-apv .uc-hd .w::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:#b08d3c;box-shadow:0 0 0 3px rgba(176,141,60,.18)}
.uc-apv .uc-hd .ok{display:none;align-items:center;gap:5px;color:var(--z-ok)}
.uc-stage[data-beat="2"][data-flags~=card] .uc-apv .uc-hd .w{display:none}
.uc-stage[data-beat="2"][data-flags~=card] .uc-apv .uc-hd .ok{display:flex}
.uc-stage[data-beat="2"][data-flags~=card] .uc-apv .uc-acts{opacity:.35}
.uc-tick{width:10px;height:10px;fill:none;stroke:var(--z-ok);stroke-width:1.8}
.uc-apv h4{font-size:13px;font-weight:600;letter-spacing:-.01em;margin-top:7px}
.uc-apv h4.cmd{font-family:var(--mono);font-size:11px;letter-spacing:0}
.uc-dt{font-size:10px;color:var(--z-muted);margin-top:3px}
.uc-pv{margin-top:8px;border-left:2px solid var(--z-line);padding:1px 0 1px 9px;font-family:var(--mono);font-size:8.8px;line-height:1.7;color:var(--z-ink)}
.uc-why{margin-top:8px;font-size:10px;line-height:1.5}
.uc-why i{font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;color:var(--z-muted);display:block;margin-bottom:2px}
.uc-acts{display:flex;gap:6px;margin-top:10px;transition:opacity .3s}
.uc-nf{margin-top:9px;padding-top:7px;border-top:1px solid var(--z-line);font-family:var(--mono);font-size:8px;color:var(--z-muted)}

/* memory */
.uc-mem{border-top:1px solid var(--z-line);margin-top:12px}
.uc-mi{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--z-line);align-items:center}
.uc-mi .uc-tone{justify-self:start}
.uc-mi p{font-size:12px;font-weight:500;margin-top:4px;grid-column:1}
.uc-mi .uc-s{font-family:var(--mono);font-size:7.5px;color:var(--z-muted);grid-column:1;margin-top:2px}
.uc-ac{grid-column:2;grid-row:1/4;display:flex;gap:6px;align-items:center}
.uc-okk{font-family:var(--mono);font-size:8.5px;color:var(--z-ok);display:flex;align-items:center;gap:4px}
.uc-mi.new{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 9%,transparent),transparent 70%);margin:0 -10px;padding:9px 10px}
.uc-mi.new .uc-okk{display:none}
.uc-stage[data-beat="3"][data-flags~=press] .uc-mi.new .uc-btn{display:none}
.uc-stage[data-beat="3"][data-flags~=press] .uc-mi.new .uc-okk{display:flex}
.uc-rt{display:grid;grid-template-columns:1fr auto 24px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--z-line);font-size:10.5px}
.uc-rt span{font-family:var(--mono);font-size:8.5px;color:var(--z-muted)}
.uc-rt i{width:24px;height:13px;background:var(--z-ink);position:relative}
.uc-rt i::after{content:"";position:absolute;right:2px;top:2px;width:9px;height:9px;background:var(--z-on)}

/* ---------- floating cards ---------- */
.uc-card{background:var(--z-card);border:1px solid var(--z-edge);padding:12px 14px 13px;font-family:var(--z-sans);color:var(--z-text);
 clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.uc-card[data-for]{position:absolute;z-index:5;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.uc-card[data-for].in{opacity:1;transform:none}
.uc-card[data-for="0"]{left:420px;top:190px;width:320px}
.uc-card[data-for="1"]{left:410px;top:276px;width:330px}
.uc-card.uc-c-engines[data-for="1"]{left:372px;top:96px;width:368px}
.uc-card[data-for="2"]{left:470px;top:330px;width:270px}
.uc-card[data-for="3"]{left:430px;top:372px;width:310px}
.uc-card .uc-hd.ok{color:var(--z-ok)}
.uc-card h4{font-size:13px;font-weight:600;letter-spacing:-.01em;margin-top:7px}
.uc-lb{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;color:var(--z-muted);margin-top:10px}
.uc-vl{font-size:10.5px;margin-top:3px}
.uc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.uc-chips span{font-size:9.5px;border:1px solid var(--z-line);padding:4px 7px;display:flex;gap:5px;align-items:baseline}
.uc-chips i{font-style:normal;font-family:var(--mono);font-size:8px;color:var(--z-muted)}
.uc-seg{display:flex;margin-top:6px;border:1px solid var(--z-line);width:max-content}
.uc-seg span{font-size:9.5px;padding:5px 9px;color:var(--z-muted)}
.uc-seg span+span{border-left:1px solid var(--z-line)}
.uc-seg span.on{background:var(--z-ink);color:var(--z-on)}
.uc-card .uc-acts{margin-top:12px}
.uc-rec{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:8px;font-size:10.5px}
.uc-rec i{font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;color:var(--z-muted);padding-top:2px}
.uc-tx{font-size:11.5px;line-height:1.45;margin-top:6px;text-wrap:pretty}
.uc-was{margin-top:9px;padding-top:7px;border-top:1px solid var(--z-line);font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:var(--z-muted)}
.uc-card .uc-tone{display:inline-block;margin-top:9px}
.uc-eng{margin-top:8px;border-top:1px solid var(--z-line)}
.uc-e{display:grid;grid-template-columns:86px 1fr;gap:1px 10px;padding:6px 0;border-bottom:1px solid var(--z-line);font-size:10.5px}
.uc-e b{font-family:var(--mono);font-size:9.5px;font-weight:600;grid-row:1/3}
.uc-e i{font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:var(--z-muted)}
.uc-e em{grid-column:1/-1;height:2px;background:var(--z-line);margin-top:4px;overflow:hidden}
.uc-e em u{display:block;height:100%;background:var(--gold);
 width:calc(clamp(0, (var(--t,0) - .62) * 3 + .18 + var(--d) * .12, 1) * 100%);transition:width .2s linear}

/* the pointer */
.uc-ptr{position:absolute;z-index:9;left:640px;top:520px;width:22px;height:22px;opacity:0;pointer-events:none;
 transition:left .7s cubic-bezier(.3,.7,.2,1),top .7s cubic-bezier(.3,.7,.2,1),opacity .3s,transform .15s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.uc-ptr path{fill:#16171b;stroke:#fff;stroke-width:1.3;stroke-linejoin:round}
.uc-ptr.in{opacity:1}
.uc-ptr.down{transform:scale(.88)}
.uc-still .uc-ptr,.uc-still .uc-card[data-for],.uc-still .uc-view,.uc-still .uc-msg,.uc-still .uc-row,.uc-still .uc-scene{transition:none}
.uc-still .uc-page.on{animation:none}
.uc-still .uc-row.run .uc-run{animation:none}

/* ---------- phones: no pinned window; each beat is its card, full size ---------- */
@media (max-width:740px){
 .uc-track{height:auto}
 .uc-stage{display:none}
 .uc-mob{display:block}
 .uc-mob ol{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
 .uc-mob li{padding:16px 0 20px;border-bottom:1px solid var(--line)}
 .uc-mob li>.n{font-size:10px;color:var(--gold);letter-spacing:.08em}
 .uc-mob li>b{display:block;font-size:14px;margin-top:4px}
 .uc-mob li>p{font-size:12px;color:var(--dim);line-height:1.7;margin-top:3px}
 .uc-mob .uc-card{margin-top:12px}
 .uc-mob .uc-card .uc-apv{margin:0;border:0;padding:0;background:none}
 .uc-mob .uc-case{margin-top:30px}
 .uc-mob .uc-case:first-child{margin-top:0}
}
.uc-intro{color:var(--dim);font-size:13px;max-width:62ch;margin-top:9px;line-height:1.8}
@media (max-width:740px){.uc-e em{display:none}}
/* Each case opens on a title card over its window; scrolling on fades it to reveal the morning brief. */
.uc-introcard{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;justify-content:center;padding:0 72px;
 font-family:var(--mono);color:var(--txt);background:color-mix(in srgb,var(--bg) 93%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
 border:1px solid var(--line);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;overflow:hidden}
.uc-stage.uc-opening .uc-scene.on .uc-introcard{opacity:1;visibility:visible;transition:opacity .35s}
.uc-introcard .k{font-size:11px;letter-spacing:.32em;color:var(--gold);font-weight:700}
.uc-introcard h3{font-size:30px;font-weight:700;line-height:1.15;margin-top:16px;max-width:15ch}
.uc-introcard .w{font-size:14px;margin-top:14px}
.uc-introcard .s{font-size:13px;color:var(--dim);line-height:1.8;margin-top:12px;max-width:46ch;text-wrap:pretty}
.uc-introcard .go{font-size:10px;letter-spacing:.3em;color:var(--dim);margin-top:30px}
.uc-introtg{position:absolute;right:64px;top:50%;width:150px;height:150px;transform:translateY(-50%)}
/* A case with art: its name across the top, the art along the foot, drawn in left to right as the reader scrolls
   (--ip, 0..1, set in usecases.js) behind a gold edge. Darken lets the art's off-white paper give way to the card. */
.uc-introcard.has-art{justify-content:flex-start;padding-top:44px}
.uc-introcard.has-art h3{max-width:none;font-size:30px;margin-top:12px}
.uc-introcard.has-art .s{max-width:62ch}
.uc-introcard.has-art .go{position:absolute;left:72px;bottom:30px;margin:0;z-index:1}
.uc-introart{position:absolute;left:40px;right:40px;bottom:22px;mix-blend-mode:darken}
.uc-introart img{display:block;width:100%;clip-path:inset(0 calc((1 - var(--ip,1)) * 100%) 0 0)}
.uc-introart::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--ip,1) * 100%);width:1px;background:var(--gold);opacity:calc((1 - var(--ip,1)) * 4)}
/* Its text types in on the same --ip: a character shows once the drawing passes its mark (--a, set in usecases.js). */
.uc-introcard.has-art h3 span,.uc-introcard.has-art .w span,.uc-introcard.has-art .s span{opacity:clamp(0,(var(--ip,1) - var(--a,0)) * 40,1)}
.uc-stage.uc-opening .uc-scene.on .uc-introcard h3{animation:uc-in .55s cubic-bezier(.2,.7,.2,1)}
.uc-stage.uc-opening .uc-scene.on .uc-introcard.has-art h3{animation:none}
.uc-still .uc-introcard,.uc-still .uc-introcard h3{transition:none;animation:none}
.uc-still .uc-introcard.has-art span{opacity:1}
.uc-still .uc-introart img{clip-path:none}
.uc-still .uc-introart::after{display:none}
@media (max-width:740px){.uc-mob .uc-case .uc-ix{margin-right:8px}}
/* Short screens give the window the room: first the beats lose their one-line notes, then the case summary goes. */
@media (min-width:741px) and (max-height:820px){.uc-beats p{display:none}.uc-casehd{margin-top:12px}.uc-stage{gap:12px}}
@media (min-width:741px) and (max-height:700px){.uc-head .uc-sub{display:none}}
/* The section's title row: the name on the left, the sample-data flag on the right. */
.uc-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.uc-flag{font-size:9.5px;letter-spacing:.3em;color:var(--dim)}