/* Otomato Ghosts: the app chrome around the designed story (story/story.css + each story/s-*.js carry the slides' own CSS).
   The loading screen, the drawer and the toast keep the product identity; the story keeps the design board's page rules
   (no global reset there: the slides were designed on a page without one). */
:root{
  --bg:#06070d;--surface:#0c0e16;--raised:#121521;--overlay:#191d2b;
  --tp:#f5f7fa;--ts:#b8bdcc;--tm:#8a90a2;--td:#5a6072;
  --brand:#4db8ff;--clean:#3dd68c;--watch:#f5b942;--avoid:#f2555a;--oto:#ea5028;--violet:#a78bfa;--pink:#ff7ab6;
  --ghost:#cfe6ff;--bd:rgba(203,212,235,.08);--bs:rgba(203,212,235,.14);--track:#232838;
  --mono:'JetBrains Mono',ui-monospace,monospace;

html,body{height:100%}
body{margin:0;background:#000;color:#fff;font:15px/1.5 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
:where(#loading,.drawer,.toast,.data-btn),:where(#loading,.drawer,.toast,.data-btn) *{margin:0;padding:0;box-sizing:border-box}
:where(#loading,.drawer,.data-btn) button,button:where(.data-btn){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(#loading,.drawer) a{color:inherit}
:where(#loading,.drawer){color-scheme:dark;line-height:1.45}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
[hidden]{display:none!important}
.screen{display:none;position:relative;z-index:1;min-height:100vh;min-height:100dvh}
.screen.on{display:block}

/* ===== the story screen: the 16:9 stage + its progress strip, fitted to the window by story/player.js ===== */
#story.screen.on{display:flex;align-items:center;justify-content:center;background:#000}
.story-host{width:100%}

/* ===== buttons (the loading error box) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:700;background:var(--raised);border:1px solid var(--bs);color:var(--tp);text-decoration:none;transition:transform .12s,background .15s,border-color .15s,opacity .15s;white-space:nowrap}
.btn:hover{border-color:rgba(203,212,235,.3);background:var(--overlay)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.pri{background:var(--brand);color:#06070d;border-color:var(--brand)}
.btn.pri:hover{background:#6fc5ff}
.btn.big{padding:15px 22px;font-size:16px;border-radius:14px}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn.x{background:#f5f7fa;color:#06070d;border-color:#f5f7fa}.btn.x:hover{background:#fff}
.btn.ghosty{background:transparent}
:where(#loading,.drawer) .ic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ts)}
:where(#loading,.drawer) .ic:hover{background:rgba(255,255,255,.08);color:var(--tp)}
:where(#loading,.drawer) .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:where(#loading,.drawer) .ic.txt{width:auto;padding:0 10px;font-size:12.5px;font-weight:700}
.err{color:var(--avoid);font-size:13px;margin-top:8px}

/* ===== loading: the live scan. Locked design = docs/design/variations ghosts-slides loading "R4: A + E, the blue half takes
   the screen" (d-loading.js). Sizes in --u: 1% of the 16:9 frame's width on desktop, rescaled on phones. ===== */
#loading.screen.on{display:flex;align-items:center;justify-content:center;background:#0f0f10}
.ld{--u:1cqw;--cob:#2438ff;--ink:#0f0f10;--lbc:#c3c9ff;--ce:rgba(255,255,255,.13);--ctr:rgba(255,255,255,.46);
  position:relative;width:min(100vw,calc(100vh * 16 / 9));width:min(100vw,calc(100dvh * 16 / 9));aspect-ratio:16/9;container-type:inline-size;
  overflow:hidden;background:var(--cob);color:#fff;font-family:Manrope,system-ui,sans-serif}
.ld-log{position:absolute;left:0;top:0;width:calc(var(--u)*44);height:100%;background:var(--ink);color:#c9cdf0;
  padding:calc(var(--u)*2.4) calc(var(--u)*2) calc(var(--u)*2) calc(var(--u)*2.4);display:flex;flex-direction:column;overflow:hidden;
  font:500 calc(var(--u)*1.1)/1.5 'JetBrains Mono',monospace;clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.8,0,.2,1)}
.ld-cmd{flex:none;overflow-wrap:anywhere;margin-bottom:calc(var(--u)*.6);color:#7a80b0}
.ld-rows{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.ld-rows>div{white-space:nowrap;flex:none;overflow:hidden;text-overflow:clip}
.ld-rows .t{color:#5d649a}.ld-rows .c{color:#7a80b0}
.ld-rows .s{display:inline-block;width:10ch;overflow:hidden;vertical-align:bottom;font-weight:700;color:#fff;white-space:nowrap}
.ld-rows .s.dim{color:#8c92b8;font-weight:500}
.ld-rows .m{display:inline-block;width:10.5ch;overflow:hidden;vertical-align:bottom;white-space:nowrap}
.ld-rows .lx{display:inline-block;width:6.5ch;text-align:right;vertical-align:bottom}
.ld-rows .rl{display:inline-block;height:1.5em;line-height:1.5em;overflow:hidden;vertical-align:bottom}
.ld-rows .rl>span{display:flex;flex-direction:column;text-align:right}
.ld-rows .lp{font-weight:700}
.ld-rows .na{color:#5d649a}
.ld-side{position:absolute;left:calc(var(--u)*49.4);right:calc(var(--u)*3);top:calc(var(--u)*2.2);bottom:calc(var(--u)*1.4);display:flex;flex-direction:column;transition:opacity .3s}
.ld-hd{display:flex;align-items:flex-end;gap:calc(var(--u)*2.6);padding-left:calc(var(--u)*2.6);flex:none}
.ld-hd b{display:block;font:400 calc(var(--u)*4.6)/1 Anton,Impact,sans-serif;font-variant-numeric:tabular-nums}
.ld-hd small{display:block;font:800 calc(var(--u)*1.1) Manrope;letter-spacing:.14em;text-transform:uppercase;color:var(--lbc)}
.ld-sc{margin-left:auto;text-align:right;font:800 calc(var(--u)*1.2)/1.35 Manrope;letter-spacing:.12em;text-transform:uppercase;color:var(--lbc);white-space:nowrap}
.ld-cal{position:relative;flex:1;min-height:0;margin:calc(var(--u)*3.9) 0 calc(var(--u)*.6)}
.ld-band{position:absolute;display:grid;grid-auto-flow:column}
.ld-band i{display:block;background:var(--ce);border-radius:calc(var(--u)*.18)}
.ld-band i.tr{background:var(--ctr)}
.ld-lb{position:absolute;font:700 calc(var(--u)*.95)/1 'JetBrains Mono',monospace;white-space:nowrap;color:var(--lbc)}
.ld-foot{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u)*1.6);min-height:calc(var(--u)*5.2);padding-left:calc(var(--u)*2.6)}
.ld-lgd{font:700 calc(var(--u)*1.05) Manrope;display:inline-flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u)*.3);line-height:1.6;padding-bottom:calc(var(--u)*.3)}
.ld-lgd i{width:calc(var(--u)*1);height:calc(var(--u)*1);border-radius:calc(var(--u)*.2)}
.ld-lgd i.r3{background:#d1002b}.ld-lgd i.r1{background:#ff8796}.ld-lgd i.g1{background:#5fe39a}.ld-lgd i.g3{background:#0f8f4e}.ld-lgd i.tr{background:var(--ctr)}
.ld-lgd em{font-style:normal;color:var(--lbc);white-space:nowrap}
.ld-go{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u)*.5);animation:ldGo .45s cubic-bezier(.3,1.5,.5,1) both}
.ld-go>span{font:800 calc(var(--u)*1.05) Manrope;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.ld-go .ld-btn{font-size:calc(var(--u)*1.35);padding:calc(var(--u)*.85) calc(var(--u)*1.8)}
@keyframes ldGo{from{opacity:0;transform:translateY(calc(var(--u)*1.5))}to{opacity:1;transform:none}}
.ld-btn{display:inline-flex;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*1.1) calc(var(--u)*2.3);border:0;border-radius:99px;
  font:800 calc(var(--u)*1.75) Manrope;cursor:pointer;white-space:nowrap;background:var(--ink);color:#fff}
.ld-btn:hover{background:#000}.ld-btn:focus-visible{outline:calc(var(--u)*.25) solid #fff;outline-offset:calc(var(--u)*.2)}
/* the end (R4-1): the cobalt half sweeps left over the terminal, the trades-count stripes fade in, the count slams */
.ld-wall{position:absolute;inset:calc(var(--u)*-1) 0 0;display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:opacity .4s .25s}
.ld-wall div{font:400 calc(var(--u)*6.6)/calc(var(--u)*6.4) Anton,Impact,sans-serif;height:calc(var(--u)*6.4);width:max-content;white-space:nowrap;animation:ldWall 34s linear infinite}
.ld-wall div:nth-child(odd){color:#3a4dff}.ld-wall div:nth-child(even){color:#1626e0;animation-direction:reverse}
@keyframes ldWall{from{transform:translateX(0)}to{transform:translateX(-12.5%)}}
.ld-end{position:absolute;left:0;right:0;top:calc(var(--u)*7);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1);text-align:center;z-index:4;opacity:0;pointer-events:none;transition:opacity .45s}
.ld-ek{font:800 calc(var(--u)*1.8) Manrope;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
.ld-en{white-space:nowrap;line-height:.95}
.ld-en b{font:400 calc(var(--u)*17)/.95 Anton,Impact,sans-serif;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:calc(var(--u)*.15) calc(var(--u)*.15) 0 #1a2bd6,calc(var(--u)*.3) calc(var(--u)*.3) 0 #1a2bd6,calc(var(--u)*.45) calc(var(--u)*.45) 0 #1524b8,calc(var(--u)*.6) calc(var(--u)*.6) 0 #1524b8,calc(var(--u)*.75) calc(var(--u)*.75) 0 #111d9c,calc(var(--u)*.9) calc(var(--u)*.9) 0 #111d9c,calc(var(--u)*1.05) calc(var(--u)*1.05) 0 #0d1680}
.ld-en span{font:400 calc(var(--u)*5) Anton,Impact,sans-serif}
.ld-el{font:700 calc(var(--u)*2) Manrope;white-space:nowrap}
.ld-bw{display:inline-block;margin-top:calc(var(--u)*.6)}
.ld.done .ld-log{clip-path:inset(0 100% 0 0)}
.ld.done .ld-wall{opacity:1}
.ld.done .ld-side{opacity:0;pointer-events:none}
.ld.done .ld-end{opacity:1;pointer-events:auto;transition-delay:.55s}
.ld.done .ld-en{animation:ldSlam .5s cubic-bezier(.3,1.5,.5,1) both .55s}
.ld.done .ld-bw{animation:ldPulse 1.5s ease-in-out 1.6s infinite}
@keyframes ldSlam{from{transform:scale(1.5) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
@keyframes ldPulse{50%{transform:scale(1.05)}}
/* the hand-over to the story: a cobalt-on-ink cover wipes in, the ghost drops, then the story screen */
.ld-cover{position:absolute;inset:0;z-index:15;clip-path:inset(0 100% 0 0);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*2);pointer-events:none;
  background:var(--ink);color:#fff;font:800 calc(var(--u)*3) Manrope}
.ld-cover img{width:calc(var(--u)*11)}
/* the shared opening of every designed slide: an ink panel wipes off left to right */
.ld-wipe{position:absolute;inset:0;z-index:20;pointer-events:none;background:var(--ink);clip-path:inset(0 0 0 100%)}
#loading.on .ld-wipe{animation:ldWipe .75s cubic-bezier(.8,0,.2,1) both .1s}
@keyframes ldWipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
.ld-err{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92%,calc(var(--u)*46));padding:calc(var(--u)*2.2);border-radius:calc(var(--u)*1.2);
  background:var(--ink);color:#fff;font-size:max(13px,calc(var(--u)*1.25));box-shadow:0 calc(var(--u)*1) calc(var(--u)*4) rgba(0,0,0,.45)}
.ld-err b{font-size:1.25em}
.ld-err p{color:#c9cdf0;margin:.5em 0 1em;font-family:var(--mono);font-size:.92em;word-break:break-word}
/* phones (minor): the frame takes the screen, the log on top, the calendar under it */
@media (max-width:760px) and (orientation:portrait){
  .ld{--u:2.3cqw;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto}
  .ld-log{width:100%;height:44%;padding:calc(var(--u)*2.4)}
  .ld-side{left:calc(var(--u)*1);top:calc(44% + var(--u)*2);right:calc(var(--u)*2.4);bottom:calc(var(--u)*2.4)}
  .ld-hd b{font-size:calc(var(--u)*3.6)}
  .ld-cal{margin-top:calc(var(--u)*2.4)}
  .ld-foot{flex-direction:column;align-items:stretch;min-height:0}
  .ld-go{align-items:center}
  .ld-en b{font-size:calc(var(--u)*9)}.ld-en span{font-size:calc(var(--u)*3.4)}
  .ld-ek,.ld-el{font-size:calc(var(--u)*1.5)}
  .ld-end{top:calc(var(--u)*20)}
  .ld-cover{flex-direction:column;font-size:calc(var(--u)*2)}
}

/* ===== data drawer ===== */
.data-btn{position:fixed;left:14px;bottom:14px;z-index:40;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:9px;background:var(--raised);border:1px solid var(--bs);color:var(--tm)}
.data-btn:hover{color:var(--tp)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:60;background:var(--surface);border-left:1px solid var(--bs);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none;box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd)}
.drawer-body{overflow:auto;padding:16px;font-size:13px;display:flex;flex-direction:column;gap:18px}
.drawer-body h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tm);margin-bottom:8px}
.kv{display:grid;grid-template-columns:1fr auto;gap:5px 12px}
.kv span{color:var(--tm)}.kv b{font-family:var(--mono);font-weight:600;text-align:right}
.drawer-body ul{padding-left:16px;color:var(--ts);display:flex;flex-direction:column;gap:4px}
.drawer pre{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px;font:12px/1.45 var(--mono);color:var(--ts);overflow:auto;max-height:52vh;white-space:pre-wrap;word-break:break-all}

#toast.toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translate(-50%,20px);opacity:0;background:var(--tp);color:#06070d;font-weight:700;font-size:14px;padding:10px 16px;border-radius:12px;transition:all .25s;pointer-events:none}
#toast.toast.on{opacity:1;transform:translate(-50%,0)}
#captureHost{position:fixed;left:-20000px;top:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){#loading *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.drawer-body{overflow-x:hidden}.drawer-body>*{min-width:0;max-width:100%}.drawer-body li{word-break:break-all}