@font-face{font-family:"InterE";src:url(../assets/fonts/Inter-Regular.woff2) format("woff2");font-weight:400;font-style:normal}
@font-face{font-family:"InterE";src:url(../assets/fonts/Inter-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal}
@font-face{font-family:"InterE";src:url(../assets/fonts/Inter-Bold.woff2) format("woff2");font-weight:700;font-style:normal}

:root{
  --navy:#1A1A2E; --navy2:#23233C; --navy3:#2D2D4A; --line:rgba(255,255,255,.12);
  --copper:#C17829; --copper-hi:#D98E3E; --copper-soft:rgba(193,120,41,.16);
  --paper:#F5F1EB; --paper2:#EAE4DA; --ink:#1A1A2E; --ink2:#4A4A5E;
  --muted:#9095AA; --grey:#B8B4AC; --ok:#7DBB8C; --urgent:#D0564B;
  --maint:#3F6F92; --repair:#4E7F5C; --install:#6A5A8F;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--navy);overflow:hidden}
body{font-family:"InterE",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;user-select:none}
body.idle{cursor:none}
button{font:inherit;cursor:pointer}

#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--k,1));transform-origin:center center;background:var(--navy);overflow:hidden}

/* instant mode: used for back steps, resets and scene jumps */
.instant *,.instant *::before,.instant *::after{transition:none!important;animation-duration:0s!important;animation-delay:0s!important}

/* ---------- top bar ---------- */
.topbar{position:absolute;left:0;top:0;width:1920px;height:80px;display:flex;align-items:center;padding:0 48px;border-bottom:1px solid var(--line)}
.topbar img{height:38px;width:auto;display:block}
.tabs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px;background:rgba(255,255,255,.05);border-radius:999px;padding:6px}
.tab{border:0;background:transparent;color:var(--muted);font-size:22px;font-weight:600;padding:10px 26px;border-radius:999px;transition:background .3s,color .3s}
.tab .n{opacity:.55;margin-right:10px;font-weight:400}
.tab.active{background:var(--paper);color:var(--ink)}
.simlabel{margin-left:auto;font-size:24px;font-weight:600;color:var(--paper);border:1px solid rgba(245,241,235,.45);border-radius:8px;padding:8px 14px}

/* ---------- scenes ---------- */
.scene{position:absolute;left:0;top:80px;width:1920px;height:1000px;display:none}
.scene.active{display:block}
.shead{position:absolute;left:48px;right:48px;top:22px;height:56px;display:flex;align-items:center;gap:24px}
.shead h1{margin:0;font-size:34px;font-weight:700;letter-spacing:-.01em}
.shead h1 span{color:var(--muted);font-weight:400}
.shead .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.content{position:absolute;left:48px;top:96px;width:1824px;height:824px}

/* footer */
.footer{position:absolute;left:48px;right:48px;bottom:14px;height:44px;display:flex;align-items:center}
.tagline{font-size:22px;color:#D9D6E2}
.tagline b{color:var(--copper-hi);font-weight:600}
.navbox{margin-left:auto;display:flex;align-items:center;gap:14px}
.hints{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--muted);transition:opacity .5s}
.hints kbd{font-family:inherit;font-size:15px;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:2px 7px;color:#ddd}
.navbtn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:22px;line-height:1;transition:opacity .5s}
body.idle .hints,body.idle .navbtn{opacity:0}
.counter{font-size:20px;color:var(--muted);min-width:70px;text-align:right}

/* ---------- shared bits ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s var(--ease);transition-delay:calc(var(--i,0) * var(--gap,.14s))}
.reveal.vis{opacity:1;transform:none}
.reveal.pop{transform:scale(.94)}
.reveal.pop.vis{transform:none}
.reveal.fromright{transform:translateX(80px)}
.reveal.fromright.vis{transform:none}
.reveal.hid,.hid{opacity:0!important;pointer-events:none}
.panel{background:var(--navy2);border-radius:16px;padding:24px 26px;border:1px solid rgba(255,255,255,.06)}
.ptitle{font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--copper)}
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 16px;font-size:20px;font-weight:600}
.chip.dark{background:rgba(255,255,255,.07);color:#E6E3EE}
.chip.cop{background:var(--copper);color:var(--navy)}
.chip.copline{border:2px solid var(--copper);color:var(--copper-hi)}
.ico{width:1em;height:1em;flex:none}
.person{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--paper);color:var(--ink);flex:none}
.person svg{width:30px;height:30px}
.person.sm{width:36px;height:36px}.person.sm svg{width:21px;height:21px}

/* agent log lines */
.logline{display:flex;gap:14px;align-items:flex-start;padding:10px 0;opacity:0;transform:translateY(10px);transition:opacity .4s ease-out,transform .4s var(--ease);transition-delay:calc(var(--i) * .9s)}
.logline.vis{opacity:1;transform:none}
.logline .ic{position:relative;width:26px;height:26px;flex:none;margin-top:2px}
.spin{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--copper);animation:spin .8s linear infinite;transition:opacity .2s;transition-delay:calc(var(--i) * .9s + .8s)}
.chk{position:absolute;inset:0;width:26px;height:26px;opacity:0;transform:scale(.5);transition:opacity .25s,transform .3s var(--ease);transition-delay:calc(var(--i) * .9s + .8s);color:var(--copper-hi)}
.logline.vis .spin{opacity:0}
.logline.vis .chk{opacity:1;transform:none}
.logline b{font-size:23px;font-weight:600;display:block}
.logline .det{font-size:21px;color:#C9C6D4;margin-top:4px;line-height:1.35;max-height:120px;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s,margin .6s}
#s-quote.st-4 .logline .det{max-height:0;opacity:0;margin-top:0}
#s-quote.st-4 .logline{padding:7px 0}
@keyframes spin{to{transform:rotate(360deg)}}

/* approval bar */
.approve{position:relative;display:flex;align-items:center;gap:18px;border:2px solid var(--copper);background:rgba(193,120,41,.08);border-radius:16px;padding:20px 24px}
.approve .who{font-size:24px;font-weight:700;white-space:nowrap}
.approve .sub{font-size:19px;color:#CFCBD9;margin-top:4px}
.approve .btns{margin-left:auto;display:flex;gap:12px}
.btn{border-radius:12px;padding:14px 24px;font-size:22px;font-weight:700;border:2px solid rgba(255,255,255,.35);background:transparent;color:#fff;white-space:nowrap}
.btn.go{background:var(--copper);border-color:var(--copper);color:#fff}
.btn.go:hover{background:var(--copper-hi)}
.btn.nudge{animation:nudge .4s}
@keyframes nudge{30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
.approve .pending,.approve .done{display:flex;align-items:center;gap:18px;width:100%;transition:opacity .4s}
.approve .done{position:absolute;inset:0;padding:20px 24px;opacity:0;pointer-events:none}
.approve.ok{border-color:var(--ok);background:rgba(125,187,140,.10)}
.approve.ok .pending{opacity:0;pointer-events:none}
.approve.ok .done{opacity:1;pointer-events:auto}
.okmark{width:52px;height:52px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;flex:none;color:var(--navy)}
.okmark svg{width:30px;height:30px}

/* =========================================================
   SCENE 1: QUOTE
   ========================================================= */
.q-grid{display:grid;grid-template-columns:440px 530px 782px;gap:36px;height:824px}
.clock{display:flex;align-items:center;gap:12px;font-size:21px}
.clock .c{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border-radius:999px;padding:9px 18px;font-weight:600;transition:background .4s,color .4s}
.clock .c svg{width:22px;height:22px}
.clock .arrow{color:var(--muted)}
.clock .c.out{color:var(--muted)}
#s-quote.st-6 .clock .c.out{background:var(--ok);color:var(--navy)}
.clock .same{color:var(--ok);font-weight:700;opacity:0;transition:opacity .5s .3s}
#s-quote.st-6 .clock .same{opacity:1}

.phonewrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{width:420px;height:740px;border-radius:52px;background:#0E0E18;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.35);position:relative}
.screen{width:100%;height:100%;border-radius:40px;background:#fff;overflow:hidden;color:#111;display:flex;flex-direction:column}
.sbar{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:16px;font-weight:600;color:#111}
.chead{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 14px;border-bottom:1px solid #E6E6EA}
.avatar{width:58px;height:58px;border-radius:50%;background:#8E8E99;color:#fff;font-size:26px;font-weight:600;display:flex;align-items:center;justify-content:center}
.cname{font-size:20px;font-weight:600}
.msgs{flex:1;padding:16px 16px;display:flex;flex-direction:column;gap:10px;position:relative}
.mtime{font-size:15px;color:#8A8A92;text-align:center}
.bubble{align-self:flex-start;max-width:340px;background:#E9E9EB;border-radius:22px;border-bottom-left-radius:6px;padding:14px 18px;font-size:22px;line-height:1.36;color:#111}
.photos{display:flex;gap:10px}
.photo{width:168px;height:130px;border-radius:16px;overflow:hidden;background:#ddd}
.photo svg{display:block;width:100%;height:100%}
.typing{position:absolute;left:16px;top:44px;background:#E9E9EB;border-radius:22px;padding:16px 20px;display:flex;gap:7px;transition:opacity .3s}
.typing i{width:11px;height:11px;border-radius:50%;background:#9A9AA2;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.35}30%{opacity:1}}
.compose{margin:10px 14px 18px;border:1px solid #DDD;border-radius:22px;height:44px;font-size:17px;color:#AAA;display:flex;align-items:center;padding:0 16px}
.caption{font-size:21px;color:#CFCBD9;text-align:center}

.qmid{display:flex;flex-direction:column;gap:18px;height:824px}
.qmid .panel.log{flex:none}
.waiting{font-size:21px;color:var(--muted);padding:8px 0}
.waiting.hid,.qempty.hid{display:none}
.flags .ptitle{color:var(--copper-hi)}
.flag{display:flex;gap:14px;align-items:flex-start;background:var(--copper-soft);border-left:6px solid var(--copper);border-radius:10px;padding:14px 16px;font-size:21px;line-height:1.35;margin-bottom:12px}
.flag svg{width:26px;height:26px;color:var(--copper-hi);flex:none;margin-top:1px}
.flag b{font-weight:700;color:#fff}

.qright{display:flex;flex-direction:column;gap:20px;height:824px}
.qcard{background:var(--paper);color:var(--ink);border-radius:18px;padding:24px 30px 20px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.qcard .kick{font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:#6E5636;font-weight:700;display:flex;align-items:center;gap:10px}
.qcard h2{margin:8px 0 6px;font-size:30px;line-height:1.15}
.qmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:19px;color:var(--ink2)}
.qmeta span{white-space:nowrap}
.qmeta .sample{margin-left:auto;border:2px solid #B9A88E;color:#6E5636;border-radius:999px;padding:5px 14px;font-weight:700;font-size:22px;white-space:nowrap}
.opts{margin-top:14px}
.opt{display:grid;grid-template-columns:118px 1fr auto;align-items:center;gap:16px;padding:13px 0;border-top:1px solid #DCD5C9}
.opt .lvl{font-size:24px;font-weight:700}
.opt .desc{font-size:21px;line-height:1.3;color:#2C2C40}
.opt .price{font-size:30px;font-weight:700;text-align:right}
.mchip{display:inline-flex;align-items:center;gap:6px;margin-top:6px;background:var(--copper);color:var(--navy);border-radius:999px;padding:3px 12px;font-size:17px;font-weight:700}
.incl{border-top:1px solid #DCD5C9;padding-top:12px;margin-top:2px}
.incl .h{font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#6E5636;font-weight:700;margin-bottom:6px}
.incl ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.incl li{font-size:20px;display:flex;gap:8px;align-items:center;color:#2C2C40}
.incl li svg{width:20px;height:20px;color:var(--repair);flex:none}
.qempty{flex:1;border:2px dashed rgba(255,255,255,.14);border-radius:18px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:22px}

/* =========================================================
   SCENE 2: DISPATCH
   ========================================================= */
.board{position:absolute;left:0;top:0;width:1240px;height:504px;background:var(--paper);border-radius:16px;color:var(--ink);overflow:hidden}
.bh{position:absolute;top:0;height:44px;font-size:18px;color:#6E6A63;font-weight:600;display:flex;align-items:center}
.brow{position:absolute;left:0;width:1240px;height:92px;border-top:1px solid #DDD6CA;transition:background .5s}
.bname{position:absolute;left:0;top:0;width:150px;height:92px;display:flex;flex-direction:column;justify-content:center;padding-left:20px;font-size:24px;font-weight:700;transition:color .5s}
.bname .st{font-size:16px;font-weight:700;color:#fff;background:var(--urgent);border-radius:6px;padding:2px 8px;margin-top:4px;align-self:flex-start;opacity:0;transition:opacity .4s}
.vline{position:absolute;top:0;width:1px;height:504px;background:#E2DCD1}
.laterhead{position:absolute;left:1090px;top:0;width:150px;height:504px;background:#ECE6DC;border-left:1px solid #D6CFC2}
.blk{position:absolute;height:72px;border-radius:10px;color:#fff;padding:8px 12px;overflow:hidden;transition:background .5s,opacity .5s,border-color .5s,color .5s,transform .5s var(--ease);border:3px solid transparent}
.blk .a{font-size:20px;font-weight:700;white-space:nowrap;line-height:1.2}
.blk .b{font-size:17px;white-space:nowrap;opacity:.92;margin-top:3px}
.blk.maint{background:var(--maint)}.blk.repair{background:var(--repair)}.blk.install{background:var(--install)}.blk.urgent{background:var(--urgent)}
#s-dispatch.st-1 .brow.r2{background:repeating-linear-gradient(135deg,#E4E0DA 0 12px,#D9D4CC 12px 24px)}
#s-dispatch.st-1 .brow.r2 .bname{color:#8E8A84}
#s-dispatch.st-1 .brow.r2 .bname .st{opacity:1}
#s-dispatch.st-1 .blk.orphan{background:#C9C4BC;color:#5C5850;border:3px dashed #8E8A84}
#s-dispatch.st-7 .blk.orphan{opacity:0}
.blk.ghost{opacity:0;transform:scale(.92);background:rgba(193,120,41,.14);border:3px dashed var(--copper);color:#6B3F10}
#s-dispatch.st-4 .blk.ghost{opacity:1;transform:none}
#s-dispatch.st-7 .blk.ghost{border-style:solid;border-color:transparent;color:#fff}
#s-dispatch.st-7 .blk.ghost.maint{background:var(--maint)}
#s-dispatch.st-7 .blk.ghost.repair{background:var(--repair)}
#s-dispatch.st-7 .blk.ghost.urgent{background:var(--urgent)}
.blk.ghost{transition-delay:calc(var(--i,0) * .25s)}
.newtag{position:absolute;right:6px;top:6px;font-size:13px;font-weight:700;background:var(--copper);color:#fff;border-radius:4px;padding:1px 6px;transition:opacity .4s}
#s-dispatch.st-7 .newtag{opacity:0}

svg.arrows{position:absolute;left:0;top:0;width:1240px;height:824px;pointer-events:none;overflow:visible}
svg.arrows path{fill:none;stroke:var(--copper);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .7s var(--ease),opacity .3s;transition-delay:calc(var(--i,0) * .25s)}
#s-dispatch.st-4 svg.arrows path{stroke-dashoffset:0;opacity:1}
#s-dispatch.st-5 svg.arrows path.nh{opacity:0}
#s-dispatch.st-7 svg.arrows path{opacity:0}

.dbottom{position:absolute;left:0;top:524px;width:1240px;height:300px}
.incard{position:absolute;top:0;height:250px;border-radius:16px;padding:22px 26px;transition:opacity .4s}
.incard .k{font-size:18px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:10px}
.incard .t{font-size:30px;font-weight:700;margin-top:10px;line-height:1.2}
.incard .s{font-size:21px;color:#CFCBD9;margin-top:8px}
.incard.sick{left:0;width:560px;background:var(--navy2)}
.incard.sick .bub{margin-top:12px;background:#E9E9EB;color:#111;border-radius:20px;border-bottom-left-radius:6px;padding:12px 18px;font-size:23px;display:inline-block}
.incard.noheat{left:600px;width:640px;background:var(--navy2);border-left:8px solid var(--urgent)}
.incard.noheat .k{color:#F08E84}
.boardnote{position:absolute;left:0;top:0;font-size:22px;color:var(--muted);transition:opacity .4s}
.dtexts{position:absolute;left:0;top:0;width:1240px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dtext{background:var(--navy2);border-radius:16px;padding:18px 20px;border:2px solid var(--copper);height:300px;display:flex;flex-direction:column}
.dtext .to{font-size:19px;font-weight:700;color:var(--copper-hi);display:flex;align-items:center;gap:8px}
.dtext .bub{margin-top:12px;background:#DCEBFF;color:#111;border-radius:18px;border-bottom-right-radius:6px;padding:12px 16px;font-size:21px;line-height:1.35}
.dtext .stat{margin-top:auto;font-size:18px;color:var(--muted);display:flex;align-items:center;gap:8px}
.dtext .stat .s2{display:none;color:var(--ok);font-weight:700}
#s-dispatch.st-7 .dtext{border-color:rgba(125,187,140,.6)}
#s-dispatch.st-7 .dtext .stat .s1{display:none}
#s-dispatch.st-7 .dtext .stat .s2{display:inline}

.dright{position:absolute;left:1272px;top:0;width:552px;height:824px;display:flex;flex-direction:column;gap:14px}
.rules .rule{display:flex;gap:12px;align-items:flex-start;font-size:21px;line-height:1.3;padding:8px 10px;margin:0 -10px;border-radius:8px;border-left:4px solid transparent;transition:background .4s,border-color .4s;transition-delay:calc(var(--i,0) * .9s + .3s)}
.rules .rule .n{color:var(--muted);font-weight:700;width:20px;flex:none}
.rules .rule.hl.vis{background:var(--copper-soft);border-left-color:var(--copper)}
.rules{padding:20px 24px}
.rules .ptitle{margin-bottom:10px}
.dright .log{padding:18px 24px;flex:1}
.dright .log .logline{padding:5px 0}
.dright .log .logline b{font-size:21px;font-weight:600}
.dright .approve{padding:16px 18px}
.dright .approve .who{font-size:22px}
.dright .approve .sub{font-size:18px}
.dright .approve .btn{padding:12px 16px;font-size:21px}
.dright .approve .done .who{white-space:normal}

/* =========================================================
   SCENE 3: INBOX
   ========================================================= */
.ipanel{position:absolute;left:0;top:0;width:1824px;height:824px;background:var(--paper);border-radius:16px;transition:opacity .5s}
#s-inbox.st-2 .ipanel{opacity:0}
.itool{position:absolute;left:0;top:0;width:1824px;height:56px;display:flex;align-items:center;gap:20px;padding:0 20px;color:var(--ink);border-bottom:1px solid #DCD5C9}
.itool b{font-size:22px}
.itool .cnt{font-size:18px;background:var(--ink);color:#fff;border-radius:999px;padding:3px 12px;font-weight:700}
.itool .q{margin-left:auto;font-size:18px;color:#8A847A;border:1px solid #D2CBBE;border-radius:8px;padding:6px 14px;width:360px}
.email{position:absolute;left:0;top:0;width:1824px;height:31px;transform:translate(var(--lx),var(--ly));color:var(--ink);border-radius:0;transition:transform .7s var(--ease),width .7s var(--ease),height .7s var(--ease),background .4s,border-radius .4s,box-shadow .4s;transition-delay:calc(var(--j) * 30ms)}
.email .lrow{position:absolute;inset:0;display:flex;align-items:center;gap:22px;padding:0 20px;font-size:19px;border-bottom:1px solid #E4DED3;transition:opacity .25s}
.email .lrow .f{width:290px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email .lrow .sj{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#2C2C40}
.email .lrow .sj .pv{color:#8A847A;font-weight:400}
.email .lrow .tm{width:96px;text-align:right;color:#7A7266;font-size:17px}
.email .tag{width:132px;text-align:center;font-size:15px;font-weight:700;border:2px solid var(--copper);color:#8A4E12;border-radius:999px;padding:1px 0;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s;transition-delay:calc(var(--j) * .1s + .15s)}
.email .tag.junk{border-color:#A6A097;color:#7A7266}
#s-inbox.st-1 .email .tag{opacity:1;transform:none}
.email .crow{position:absolute;inset:0;padding:10px 16px;opacity:0;transition:opacity .3s}
.email .crow .f{font-size:17px;color:#6E6A63;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email .crow .sj{font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
#s-inbox.st-2 .email{transform:translate(var(--sx),var(--sy));width:344px;height:76px;background:var(--paper);border-radius:10px;box-shadow:0 2px 0 rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.18)}
#s-inbox.st-2 .email.junk{background:#CFCBC4}
#s-inbox.st-2 .email .lrow{opacity:0}
#s-inbox.st-2 .email .crow{opacity:1;transition-delay:calc(var(--j) * 30ms + .55s)}
.scan{position:absolute;left:0;top:56px;width:1824px;height:5px;background:var(--copper);box-shadow:0 0 18px 4px rgba(193,120,41,.55);opacity:0;pointer-events:none}
#s-inbox.st-1 .scan{animation:sweep 2.8s ease-in-out forwards}
#s-inbox.st-2 .scan{display:none}
@keyframes sweep{0%{transform:translateY(0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translateY(744px);opacity:0}}
.stackh{position:absolute;top:0;width:344px;height:60px;display:flex;align-items:baseline;gap:14px}
.stackh .l{font-size:26px;font-weight:700}
.stackh .c{font-size:40px;font-weight:700;color:var(--copper-hi);margin-left:auto}
.stackh.junk .l,.stackh.junk .c{color:var(--muted)}

.ilow{position:absolute;top:240px;height:584px}
.bo{left:0;width:740px}
.bocard{position:absolute;left:0;top:44px;width:310px;background:var(--paper);color:var(--ink);border-radius:14px;padding:16px 18px;border:3px solid var(--copper)}
.bocard .f{font-size:17px;color:#6E6A63;font-weight:600}
.bocard .sj{font-size:22px;font-weight:700;margin-top:4px;line-height:1.25}
.bocard .pv{font-size:18px;color:#4A4A5E;margin-top:6px}
.cal{position:absolute;left:370px;top:0;width:370px;background:var(--navy2);border-radius:14px;padding:14px 16px}
.cal .h{font-size:17px;color:var(--muted);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.cal .days{display:grid;grid-template-columns:repeat(3,minmax(0,.8fr)) minmax(0,2.2fr) minmax(0,.8fr);gap:6px}
.cal .d{background:rgba(255,255,255,.05);border-radius:8px;height:200px;padding:8px 6px;font-size:18px;color:var(--muted);font-weight:600;text-align:center}
.cal .d.thu{background:rgba(255,255,255,.09)}
.cal .ev{margin-top:10px;border-radius:6px;background:var(--install);color:#fff;font-size:19px;line-height:1.2;padding:5px 3px;text-align:center;font-weight:700}
.cal .ev.x{transition:box-shadow .4s .8s,outline-color .4s .8s;outline:3px solid transparent;outline-offset:2px}
#s-inbox.st-3 .cal .ev.x{outline-color:var(--copper)}
.cal .ev.m{background:rgba(255,255,255,.10);color:#aaa;height:18px;padding:0}
.cal .ev.x{padding:10px 4px;font-size:18px}
.bonote{position:absolute;left:0;top:300px;width:740px;z-index:1;font-size:21px;color:#D9D6E2;display:flex;gap:12px;align-items:flex-start;line-height:1.35}
.bonote svg{width:26px;height:26px;color:var(--copper-hi);flex:none;margin-top:1px}
.riskchip{position:absolute;left:380px;top:240px;width:360px;text-align:center}
svg.boline{position:absolute;left:0;top:0;width:740px;height:300px;overflow:visible;pointer-events:none;z-index:3}
svg.boline path{fill:none;stroke:var(--copper);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease) .4s}
#s-inbox.st-3 svg.boline path{stroke-dashoffset:0}
.wa{left:780px;width:440px}
.wacard{background:var(--paper);color:var(--ink);border-radius:14px;padding:16px 18px;margin-top:44px}
.wacard .f{font-size:17px;color:#6E6A63;font-weight:600}
.wacard .sj{font-size:22px;font-weight:700;margin-top:4px;line-height:1.25}
.wacard .pv{font-size:18px;color:#4A4A5E;margin-top:6px}
.dl{margin-top:18px}
.lowh{font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;height:30px}
.rp{left:1260px;width:564px;display:flex;flex-direction:column;gap:14px}
.rcard{background:var(--navy2);border:2px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 18px}
.rcard .re{font-size:18px;color:var(--muted)}
.rcard .re b{color:#fff}
.rcard .body{margin-top:8px;font-size:20px;line-height:1.35;background:var(--paper);color:var(--ink);border-radius:10px;padding:10px 14px}
.rcard .wait{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:19px;font-weight:600}
.rcard .wait .btn{margin-left:auto;padding:8px 18px;font-size:19px}
.rcard .wait .sentnote{margin-left:auto;color:var(--ok);font-weight:700;display:none}
.rcard.sent .wait .btn{display:none}
.rcard.sent .wait .sentnote{display:inline}
.rcard.sent .wait .wtxt{display:none}
.summary{position:absolute;left:1040px;top:-8px;width:800px;min-height:832px;background:var(--paper);color:var(--ink);border-radius:20px;padding:36px 40px;box-shadow:-30px 0 80px rgba(0,0,0,.5);z-index:50}
.summary .k{font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:#6E5636;font-weight:700;display:flex;align-items:center;gap:10px}
.summary h2{font-size:44px;margin:14px 0 6px;line-height:1.1}
.summary h2 .cop{color:var(--copper)}
.summary .lead{font-size:24px;color:var(--ink2)}
.summary ol{margin:22px 0 0;padding:0;list-style:none;counter-reset:n}
.summary li{counter-increment:n;display:flex;gap:14px;align-items:flex-start;font-size:23px;line-height:1.3;padding:10px 0;border-top:1px solid #DCD5C9}
.summary li::before{content:counter(n);width:34px;height:34px;border-radius:50%;background:var(--copper);color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none}
.summary .rest{display:flex;gap:16px;margin-top:20px}
.summary .rest div{flex:1;background:var(--paper2);border-radius:12px;padding:14px 16px;font-size:22px}
.summary .rest b{font-size:32px;display:block}
.summary .foot{display:flex;align-items:center;gap:14px;margin-top:20px;font-size:20px;color:var(--ink2)}
.summary .foot .person{background:var(--ink);color:#fff}
.dim{position:absolute;inset:0;background:rgba(26,26,46,.55);opacity:0;transition:opacity .6s;pointer-events:none;z-index:40}
#s-inbox.st-6 .dim{opacity:1}

/* ---------- phone mode (see camera() in aaw.js) ---------- */
.pm{display:none}
/* body becomes the stage's clipping box, so the 1920px canvas cannot widen a phone's layout viewport */
body.phone{position:fixed;inset:0;overflow:hidden}
body.phone .pm{display:flex;position:fixed;left:0;right:0;z-index:100;align-items:center;gap:8px;padding:8px 10px;background:rgba(26,26,46,.94);font-size:15px}
body.phone #pm-top{top:0;border-bottom:1px solid var(--line)}
body.phone #pm-bot{bottom:0;border-top:1px solid var(--line);padding-bottom:max(8px,env(safe-area-inset-bottom))}
body.phone #stage{left:0;top:0;transform:translate(var(--tx,0),var(--ty,0)) scale(var(--pk,.2));transform-origin:0 0;transition:transform .65s var(--ease)}
body.phone #stage.nopan{transition:none}
body.phone .footer{display:none}
.pm-tab,.pm-btn{border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;border-radius:999px;font-weight:600;min-height:44px}
.pm-tab{flex:1;padding:8px 6px;font-size:15px;color:var(--muted)}
.pm-tab[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
#pm-full{flex:none;padding:8px 12px;font-size:14px;color:var(--muted)}
#pm-full[aria-pressed="true"]{color:#fff;border-color:var(--copper)}
.pm-btn{min-width:96px;padding:10px 16px;font-size:17px}
#pm-next{background:var(--copper);border-color:var(--copper);color:var(--navy)}
.pm-mid{flex:1;text-align:center;line-height:1.25}
.pm-mid b{display:block;font-size:16px}
.pm-mid span{font-size:13px;color:var(--muted)}
#pm-turn{display:none}
body.phone.pm-turn #pm-turn{display:block;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:100;background:var(--paper);color:var(--ink);font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.4)}
@media (max-height: 460px){body.phone .pm{padding:4px 10px} .pm-tab,.pm-btn{min-height:36px} .pm-mid span{display:none}}

@media (prefers-reduced-motion: reduce){*{transition-duration:.01s!important;animation-duration:.01s!important}}