/* viet.dk v7 · the desktop is the homepage.
   Ambient palette: Sanzo Wada combination #324 (Pompeian Red #a90636, Olympic Blue #4f8fe6, Aconite Violet #9c52f2, Neutral Gray #b5d1cc).
   Adaptations: field #e4ecea and #cfdfdb (Neutral Gray lightened), ink #1d2a2f. Classic keeps v6's desktop. */
:root{--v-field:#e4ecea;--v-field2:#cfdfdb;--v-gray:#b5d1cc;--v-ink:#1d2a2f;--v-sub:#55666b;--v-blue:#4f8fe6;--v-vio:#9c52f2;--v-red:#a90636;--v-paper:#fbfcfb;
  --v-ui:"Hanken Grotesk",system-ui,-apple-system,sans-serif;--v-voice:"Instrument Serif",Georgia,serif;--v-ease:cubic-bezier(.16,1,.3,1)}

/* ---------- ambient desktop ---------- */
[data-mode=ambient] #office{background:var(--v-field)}
[data-mode=ambient] .desk{background:radial-gradient(70% 60% at 22% 18%,#f1f6f4 0,transparent 60%),radial-gradient(60% 55% at 85% 90%,rgba(156,82,242,.10),transparent 70%),radial-gradient(50% 50% at 75% 15%,rgba(79,143,230,.10),transparent 70%),linear-gradient(var(--v-field),var(--v-field2))}
[data-mode=ambient] .menubar{background:rgba(251,252,251,.55);color:var(--v-ink);font-family:var(--v-ui)}
[data-mode=ambient] .dock{background:rgba(251,252,251,.6)}
[data-mode=ambient] .dk i{background:var(--v-red)}
[data-mode=ambient] .win .tb{background:#f3f7f6}
.m-ambient.pre .menubar,.m-ambient.pre .dock{opacity:0;transform:translateY(-12px)}
.m-ambient.pre .dock{transform:translate(-50%,24px)}
.m-ambient .menubar,.m-ambient .dock{transition:opacity .8s .35s,transform .9s .35s var(--v-ease)}
.win.placed{transition:left .7s var(--v-ease),top .7s var(--v-ease),width .7s var(--v-ease),height .7s var(--v-ease)}

/* dock: generated icons and real project logos */
.dk img,.dk svg{width:100%;height:100%;display:block;border-radius:23%;object-fit:cover}
.dk img.gen{box-shadow:0 0 0 .5px rgba(0,0,0,.08)}
.dk-sep{width:1px;align-self:stretch;margin:6px 4px;background:rgba(0,0,0,.14)}
.note .ic img,.ps-ic img{width:100%;height:100%;border-radius:23%;display:block;object-fit:cover}
.s-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* the agent who opened a window signs its title bar */
.win .tb .own{margin-left:auto;display:flex;align-items:center;gap:6px;font:600 11px/1 var(--v-ui);color:var(--os-sub);white-space:nowrap}
.win .tb .own svg{width:18px;height:18px;border-radius:5px}
.win .tb .own em{font-style:normal}

/* project pages */
.store{height:100%;overflow:auto;padding:22px;background:var(--os-win);color:var(--os-text);font-family:var(--v-ui)}
.st-top{display:flex;gap:16px;align-items:center}
.st-ic{width:84px;height:84px;flex:none}.st-ic img,.st-ic svg{width:100%;height:100%;border-radius:22%;display:block;object-fit:cover;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
.st-top b{display:block;font:700 22px/1.1 var(--v-ui)}.st-top small{display:block;font-size:13px;color:var(--os-sub);margin-top:2px}
.st-k{display:block;margin-top:8px;font-size:12px;color:var(--os-sub)}.st-k em{font-style:normal;font-weight:700}.st-k em.live{color:#1f8f4e}.st-k em.wip{color:var(--v-vio)}
.store p{margin:16px 0 0;font-size:14px;line-height:1.5}
.store ul{margin:12px 0 0;padding-left:18px;font-size:13.5px;line-height:1.6}
.st-go{display:inline-block;margin-top:18px;padding:9px 16px;border-radius:99px;background:var(--v-blue);color:#fff;font:600 13px/1 var(--v-ui);text-decoration:none}
.st-go.wip{background:transparent;color:var(--v-vio);box-shadow:inset 0 0 0 1.5px var(--v-vio)}

/* ---------- the agents ---------- */
.crew{position:absolute;inset:0;pointer-events:none;z-index:5000;overflow:hidden}
.agent{position:absolute;left:0;top:0;width:56px;height:62px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;will-change:transform;transition:opacity .3s}
.agent.gone{opacity:0}
.agent .fig{display:block;width:56px;height:56px;transition:transform .2s}
.agent .fig svg{width:100%;height:100%;overflow:visible;display:block}
.agent .eyes,.in-mark .eyes,.bar-av .eyes{transition:transform .14s ease-out;transform-box:fill-box;transform-origin:center}
.eyes.blink{transform:scaleY(.12)!important}
.agent.walk .body{animation:hop .46s ease-in-out infinite;transform-origin:50% 90%}
.agent.walk .sh{animation:shad .46s ease-in-out infinite;transform-origin:50% 50%;transform-box:fill-box}
@keyframes hop{0%,100%{transform:translateY(0) scale(1.03,.97)}50%{transform:translateY(-5px) scale(.98,1.03)}}
@keyframes shad{50%{transform:scaleX(.8);opacity:.1}}
.agent .nm{position:absolute;left:50%;top:-14px;transform:translateX(-50%);font:600 10.5px/1 var(--v-ui);color:var(--v-ink);background:rgba(251,252,251,.9);padding:3px 6px;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .2s}
.agent:hover .nm,.agent:focus-visible .nm{opacity:1}
.agent .say{position:absolute;left:50%;bottom:66px;transform:translate(-50%,6px);max-width:200px;width:max-content;padding:7px 11px;border-radius:14px;background:var(--v-paper);color:var(--v-ink);font:500 12px/1.3 var(--v-ui);box-shadow:0 8px 24px -10px rgba(29,42,47,.4);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.agent.talk .say{opacity:1;transform:translate(-50%,0)}
.agent .card{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);width:230px;padding:14px;border-radius:16px;background:var(--v-paper);color:var(--v-ink);text-align:left;box-shadow:0 18px 40px -18px rgba(29,42,47,.5);display:flex;flex-direction:column;gap:4px;font:400 13px/1.4 var(--v-ui);cursor:default;z-index:2}
.agent .card b{font-size:14px}.agent .card small{color:var(--v-vio);font-weight:600;font-size:11px}
.agent .cbtn{margin-top:8px;align-self:flex-start;padding:7px 12px;border-radius:99px;background:var(--v-blue);color:#fff;font-weight:600;font-size:12px;cursor:pointer}
.mobile .crew{display:none}

/* ---------- ambient intro: Mark and the bar ---------- */
.intro{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;transition:opacity .9s .1s}
.intro .in-field{position:absolute;inset:0;background:radial-gradient(55% 45% at 50% 40%,#f3f7f6 0,var(--v-field) 55%,var(--v-field2) 100%)}
.intro.out .in-field{opacity:0;transition:opacity .9s}
.in-mark{position:absolute;left:50%;top:38%;width:min(36vw,200px);aspect-ratio:1;margin:0;transform-origin:center;translate:-50% -50%;padding:0;border:0;background:none;cursor:pointer;z-index:2}
.in-mark svg{width:100%;height:100%;display:block;overflow:visible}
.in-mark .body{animation:breathe 3.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes breathe{50%{transform:scale(1.025,.975)}}
.intro.out .in-mark .body{animation:none}
.in-hi{position:absolute;left:50%;top:calc(38% + min(18vw,100px) + 14px);transform:translateX(-50%);margin:0;font:400 italic clamp(20px,2.4vw,28px)/1.2 var(--v-voice);color:var(--v-ink);white-space:nowrap;transition:opacity .4s}
.intro.out .in-hi{opacity:0}
.bar{position:fixed;left:50%;z-index:9100;width:min(620px,calc(100vw - 32px));margin:0;font-family:var(--v-ui);transition:top .8s var(--v-ease),transform .8s var(--v-ease),opacity .4s}
.bar.center{top:58%;transform:translate(-50%,0)}
.bar.top{top:40px;transform:translate(-50%,0)}
.bar.hidden{top:40px;transform:translate(-50%,0) scale(.4);opacity:0;pointer-events:none}
.bar{display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:8px;padding:8px 8px 8px 10px;border-radius:22px;background:var(--v-paper);box-shadow:0 1px 0 rgba(29,42,47,.08),0 24px 50px -28px rgba(29,42,47,.5)}
.bar-av{width:44px;height:44px;opacity:0}.bar.live .bar-av{opacity:1}
.bar-av svg{width:100%;height:100%;display:block;overflow:visible}
.bar input{min-width:0;border:0;outline:0;background:none;font:400 19px/1.2 var(--v-voice);color:var(--v-ink);padding:6px 4px}
.bar input::placeholder{color:var(--v-sub)}
.bar-go{width:40px;height:40px;border-radius:50%;border:0;background:var(--v-blue);color:#fff;font:700 18px/1 var(--v-ui);cursor:pointer}
.bar:focus-within{box-shadow:0 0 0 2px var(--v-blue),0 24px 50px -28px rgba(29,42,47,.5)}
.bar-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 4px 4px}
.bar-chips button{border:1px solid rgba(29,42,47,.12);background:#f3f7f6;color:var(--v-ink);border-radius:99px;padding:7px 13px;font:500 13px/1 var(--v-ui);cursor:pointer}
.bar-chips button:hover{border-color:var(--v-blue);color:var(--v-blue)}
.bar.top .bar-chips{display:none}
.bar.top:focus-within .bar-chips{display:flex}
.bar-say{grid-column:1/-1;display:none;padding:2px 10px 8px 56px;font:400 italic 18px/1.35 var(--v-voice);color:var(--v-ink)}
.bar.saying .bar-say{display:block}
.typing{display:inline-flex;gap:4px}.typing i{width:6px;height:6px;border-radius:50%;background:var(--v-sub);animation:tp 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{50%{opacity:.25}}
.m-ambient.pre .bar .bar-say{display:none}

/* ---------- classic boot ---------- */
.boot{position:fixed;inset:0;z-index:9500;background:#000;display:grid;place-content:center;justify-items:center;gap:34px;transition:opacity .7s;cursor:pointer}
.boot img{width:84px;filter:invert(1)}
.boot-bar{width:200px;height:5px;border-radius:3px;background:#333;overflow:hidden}.boot-bar i{display:block;height:100%;width:0;background:#eee;transition:width .2s}
.boot p{position:absolute;bottom:40px;left:0;right:0;margin:0;text-align:center;color:#666;font:500 12px/1 var(--v-ui);letter-spacing:.2em;text-transform:uppercase}
.boot.out{opacity:0;pointer-events:none}

/* ---------- phone ---------- */
.mobile .bar{top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);transform:translate(-50%,0)!important;opacity:1!important;pointer-events:auto!important;grid-template-columns:36px 1fr 36px;border-radius:20px}
.mobile .bar-av{width:36px;height:36px}.mobile .bar-go{width:36px;height:36px}
.mobile .bar input{font-size:17px}
.mobile .bar-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
.mobile .bar.top .bar-chips{display:flex}
.mobile .bar-chips button{white-space:nowrap}
.mobile.m-ambient .phone{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 140px)}
.mobile .in-mark{top:34%;width:min(46vw,190px)}
.mobile .in-hi{top:calc(34% + min(23vw,95px) + 12px);font-size:22px}
.mobile.m-ambient .ph-sheet{z-index:9200}
[data-mode=ambient] .phone{background:radial-gradient(120% 60% at 50% 0%,#f1f6f4,var(--v-field2) 75%)}
[data-mode=ambient] .phone .ph-lock{color:var(--v-ink)}
@media (prefers-reduced-motion:reduce){.agent.walk .body,.in-mark .body{animation:none}.win.placed{transition:none}}
.notes{overflow-y:auto;scrollbar-width:none}
.store a.st-go{color:#fff!important;opacity:1}
body:has(.ph-sheet.on) .bar{opacity:0!important;pointer-events:none!important}

/* ================= v7.2 · one system (Ambient). Wada #324 for the OS, the agents' colours as accents.
   Adaptations: --w-blue #2c5aa8 is Olympic Blue darkened so text on it passes contrast; ink, paper and field are Neutral Gray family. ================= */
:root,:root[data-theme="dark"]{--os-bg:#e4ecea;--os-win:#fbfcfb;--os-chrome:#eef3f1;--os-line:#d3e0dc;--os-text:#1d2a2f;--os-sub:#55666b;--os-accent:#4f8fe6;--os-alert:#a90636;
  --w-blue:#2c5aa8;--w-blue-d:#234a8c;--w-blue-l:#cfe0f7;--w-buff:#ffbf6e;--w-vio:#9c52f2;--w-ink:#1d2a2f;--w-paper:#f6f9f8;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--os-bg:#e4ecea;--os-win:#fbfcfb;--os-chrome:#eef3f1;--os-line:#d3e0dc;--os-text:#1d2a2f;--os-sub:#55666b;color-scheme:light}}
body{background:var(--v-field)}
.win{border-radius:14px;box-shadow:0 0 0 .5px rgba(29,42,47,.16),0 26px 60px -24px rgba(29,42,47,.45)}
.win .tb{background:var(--os-chrome);font-family:var(--v-ui)}
.win .x{background:#a90636}.win .m{background:#ffbf6e}.win .z{background:#8fb3ac}
.chat2 .log .me{background:var(--v-blue)}
.cal2 .ev{background:#dce8fb;border-color:#4f8fe6;color:#1d2a2f}
.cal2 .ev.ai{background:#efe4fd;border-color:#9c52f2;color:#1d2a2f}
.cal2 .ev.home{background:#fdf6cf;border-color:#e0b400;color:#1d2a2f}
.cal2 .ev.build{background:#ffeedd;border-color:#ffbf6e;color:#1d2a2f}
.cal2 .ev.live{box-shadow:0 0 0 2px var(--v-blue)}
.cal2 .now{position:absolute;left:34px;right:0;height:2px;background:#a90636;z-index:3;pointer-events:none;transition:box-shadow .3s}
.cal2 .now::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#a90636}
.cal2 .now span{position:absolute;left:-34px;top:-8px;font:700 10px/16px var(--v-ui);color:#a90636;background:var(--os-win);padding:0 2px}
.cal2 .ev.guard{animation:guard .5s 3;box-shadow:0 0 0 2px #ff3319}
@keyframes guard{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.xl-rib{background:#2c5aa8}.xl-tabs button.on{color:#2c5aa8;border-color:#2c5aa8}
.hl{animation:hl 1.6s ease-out}
@keyframes hl{0%{box-shadow:0 0 0 0 rgba(79,143,230,.0)}20%{box-shadow:0 0 0 4px rgba(79,143,230,.55)}100%{box-shadow:0 0 0 12px rgba(79,143,230,0)}}

/* dock: the agents sleep on the left */
.dk-ag{position:relative;width:52px;height:52px;border:0;padding:0;background:var(--os-chrome);border-radius:23%;cursor:pointer;box-shadow:0 0 0 .5px rgba(29,42,47,.1)}
.dk-ag svg{width:100%;height:100%;display:block;overflow:visible;transition:opacity .25s,transform .25s}
.dk-ag.asleep .eyes{transform:scaleY(.14)!important;transform-box:fill-box;transform-origin:center}
.dk-ag.asleep .body{animation:snooze 3.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes snooze{50%{transform:scale(1.03,.97)}}
.dk-ag .zz{position:absolute;right:2px;top:-2px;font:700 11px/1 var(--v-ui);color:var(--v-sub);opacity:0;pointer-events:none}
.dk-ag.asleep .zz{animation:zz 2.8s ease-in-out infinite}
@keyframes zz{0%{opacity:0;transform:translate(0,4px)}40%{opacity:.8}100%{opacity:0;transform:translate(6px,-12px)}}
.dk-ag.out svg{opacity:.18;transform:scale(.8)}
.dk-ag:hover:not(.out) svg{transform:translateY(-3px)}
.dk-stack img{border-radius:23%}

/* the crew on the desk */
.agent .fig{transition:transform .2s}
.agent.asking{z-index:3}
.apop{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);width:270px;padding:14px;border-radius:18px;background:var(--v-paper);color:var(--v-ink);text-align:left;box-shadow:0 22px 50px -20px rgba(29,42,47,.55);display:flex;flex-direction:column;gap:8px;font:400 13px/1.4 var(--v-ui);cursor:default;animation:pop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translate(-50%,8px) scale(.96)}}
.apop header{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:8px}
.apop header b{font:700 14px/1.2 var(--v-ui)}.apop header small{grid-column:1;font:600 11px/1.2 var(--v-ui);color:var(--v-vio)}
.apop .ax{grid-row:1/3;grid-column:2;align-self:start;cursor:pointer;color:var(--v-sub);font-size:13px;padding:2px 4px}
.apop p{margin:0;font:400 italic 17px/1.3 var(--v-voice)}
.ahelp{display:flex;flex-wrap:wrap;gap:6px}
.ahelp [data-h]{padding:6px 10px;border-radius:99px;background:var(--os-chrome);box-shadow:inset 0 0 0 1px var(--os-line);font:500 12px/1.2 var(--v-ui);cursor:pointer}
.ahelp [data-h]:hover,.ahelp [data-h]:focus-visible{box-shadow:inset 0 0 0 1.5px var(--v-blue);color:var(--v-blue)}
.amsg{align-self:flex-start;font:600 12px/1 var(--v-ui);color:var(--v-blue);cursor:pointer;padding:2px 0}
.agent .say{bottom:62px}
.guide{position:absolute;width:1px;background:#ff3eb5;z-index:4999;pointer-events:none;animation:gd 1.5s ease-out forwards}
.guide.h{width:auto;height:1px}
@keyframes gd{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}
.poof{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;z-index:4999;pointer-events:none;box-shadow:0 0 0 0 rgba(169,6,54,.5);animation:poof .7s ease-out forwards}
@keyframes poof{to{box-shadow:0 0 0 40px rgba(169,6,54,0),18px -14px 0 6px rgba(255,191,110,0),-16px 12px 0 5px rgba(79,143,230,0)}}
.sysnote.ship{min-width:240px}.sysnote.ship .pb{display:block;height:4px;border-radius:2px;background:var(--os-line);margin-top:8px;overflow:hidden}.sysnote.ship .pb i{display:block;height:100%;width:0;background:#9c52f2;animation:pb 2.4s ease-out forwards}
@keyframes pb{to{width:100%}}
.win .tb .own{gap:2px}.win .tb .own span{display:block;width:18px;height:18px}.win .tb .own svg{width:18px;height:18px;border-radius:5px}

/* projects stack: one dock icon that fans out the side projects, each framed on the same tile */
.fan{position:absolute;z-index:6000;transform:translate(-50%,-100%) scale(.9);transform-origin:50% 100%;display:flex;flex-direction:column;align-items:flex-end;gap:8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.fan.on{opacity:1;pointer-events:auto;transform:translate(-50%,-100%)}
.fan button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;font:600 12px/1 var(--v-ui);color:var(--v-ink)}
.fan button>span:first-child{background:rgba(251,252,251,.9);padding:5px 9px;border-radius:99px;box-shadow:0 4px 14px -6px rgba(29,42,47,.4)}
.fi{width:46px;height:46px;display:block;border-radius:23%;overflow:hidden;background:var(--os-chrome);box-shadow:0 6px 16px -8px rgba(29,42,47,.5),0 0 0 .5px rgba(29,42,47,.1)}
.fi img,.fi svg{width:100%;height:100%;display:block;object-fit:cover}
.fi-cvr img,.fi-sunny img{width:72%;height:72%;margin:14%;object-fit:contain}
.st-ic{background:var(--os-chrome);border-radius:22%}.st-ic img{object-fit:cover}
.store .st-ic img[src*="cvr"],.store .st-ic img[src*="sunny"]{width:72%;height:72%;margin:14%;object-fit:contain;box-shadow:none}
.note .ic img[src*="cvr"],.note .ic img[src*="sunny"],.ps-ic img[src*="cvr"],.ps-ic img[src*="sunny"]{object-fit:contain;padding:12%;background:var(--os-chrome)}

/* intro: Mark alone */
.in-mark.hop .body{animation:inhop .7s cubic-bezier(.3,0,.3,1)}
@keyframes inhop{30%{transform:translateY(-14px) scale(.97,1.04)}60%{transform:translateY(0) scale(1.05,.95)}}
.intro .in-mark{top:46%}
.intro::after{content:"";position:absolute;left:50%;top:calc(46% + min(18vw,100px) + 26px);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--v-sub);opacity:.35;animation:tp 2.4s infinite}

/* phone: the crew row and their sheets */
.phcrew{flex:none;display:flex;gap:6px;overflow-x:auto;padding:10px 2px 0;scrollbar-width:none}
.phcrew button{flex:none;width:58px;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;font:600 10.5px/1 var(--v-ui);color:var(--v-ink);cursor:pointer}
.phcrew svg{width:50px;height:50px;border-radius:14px;display:block}
.apop.mob{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;transform:translateY(105%);border-radius:24px 24px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 22px);z-index:99700;transition:transform .35s cubic-bezier(.16,1,.3,1);animation:none}
.apop.mob.on{transform:none}
.apop.mob header{grid-template-columns:40px 1fr auto}.apop.mob .mav{grid-row:1/3;width:40px;height:40px}.apop.mob .mav svg{width:40px;height:40px;border-radius:11px}
.apop.mob header b,.apop.mob header small{grid-column:2}.apop.mob .ax{grid-column:3}
.apop.mob p{font-size:19px}.apop.mob [data-h]{font-size:13.5px;padding:8px 12px}
.mobile.m-ambient .phone{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
.dock .dk.dk-ag{background:var(--os-chrome)!important;color:inherit}
.dock .dk.dk-ag::before,.dock .dk.dk-ag::after{display:none}
.agent .say{left:58px;bottom:18px;transform:translate(-4px,0);max-width:230px}
.agent.talk .say{transform:none}
.apop.below{bottom:auto;top:64px;animation-name:popb}
@keyframes popb{from{opacity:0;transform:translate(-50%,-8px) scale(.96)}}
.agent.r .say{left:auto;right:58px}

/* ================= v7.3 ================= */
/* slide 2: one icon size, each on its own tile colour */
.s-tile svg.si{position:absolute;inset:20%;width:60%;height:60%;fill:none;stroke:none}
.s-tile.g1{--t:var(--w-blue);--m:#fbfcfb;--a:var(--w-buff)}.s-tile.g2{--t:var(--w-vio);--m:#fbfcfb;--a:var(--w-buff)}
.s-tile.g3{--t:var(--w-ink);--m:#fbfcfb;--a:var(--w-buff)}.s-tile.g4{--t:var(--w-paper);--m:var(--w-blue);--a:var(--w-buff);box-shadow:inset 0 0 0 .15cqw rgba(29,42,47,.15)}
.s-tile img{display:none}

/* dock: sleeping agents look as good as awake ones */
.dk-ag .f-wake,.dk-ag .f-sleep{position:absolute;inset:0;display:block}
.dk-ag .f-wake{opacity:0}.dk-ag.out .f-wake{opacity:.22}.dk-ag.out .f-sleep{opacity:0}
.dk-ag.asleep .eyes{transform:none!important}
.dk-ag .f-sleep svg{transform-origin:50% 90%;animation:snooze 3.6s ease-in-out infinite}
.dk-ag:hover .f-sleep svg{animation-duration:1.6s}
@keyframes snooze{0%,100%{transform:scale(1,1) rotate(-2deg)}50%{transform:scale(1.04,.95) rotate(2deg)}}
.dk-ag .zz{right:3px;top:-1px;font-size:10px;color:var(--v-ink)}.dk-ag .zz.z2{right:-3px;top:-9px;font-size:8px;animation-delay:1.4s!important}
.dock .dk-stack[aria-expanded="true"] .dk-tip,.dock .dk-stack[aria-expanded="true"]:hover .dk-tip{opacity:0!important}

/* windows: resize from the corner; app layouts adapt to the window's width */
.win{resize:both;min-width:300px;min-height:220px}
.win .bd{container-type:inline-size}
@container (max-width:760px){.mail2{grid-template-columns:230px 1fr!important}.mail2 nav{display:none}}
@container (max-width:520px){.mail2{grid-template-columns:1fr!important}.mail2 .mr{display:none}.mail2.reading .ml{display:none}.mail2.reading .mr{display:block}.mail2 .back{display:block}}
@container (max-width:560px){.chat2{grid-template-columns:1fr}.chat2 section{display:none}.chat2.talking aside{display:none}.chat2.talking section{display:flex}.chat2 .back{display:block}}
@container (max-width:470px){.deck2{grid-template-columns:1fr}.d2-th{display:none}}

/* agents: speech goes to the free side; dragging */
.agent.r .say{left:58px;right:auto}
.agent.sl .say{left:auto;right:58px}
.agent.held{cursor:grabbing;z-index:5}.agent.held .fig{transform:scale(1.12) rotate(-6deg)!important}
.agent{touch-action:none}

/* phone: Mark on the lock screen, a real home screen behind it */
.ph-time{font:900 92px/.86 var(--grot);letter-spacing:-.06em;margin:4px 0 6px;color:var(--v-ink)}
.ph-date{font:600 15px/1.2 var(--v-ui);color:var(--v-ink);opacity:.8}
.phmark{flex:none;align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:6px 0 12px;cursor:pointer;transition:transform .26s cubic-bezier(.5,0,.75,0),opacity .26s}
.phmark svg{width:190px;height:190px;overflow:visible;transition:width .45s var(--v-ease),height .45s var(--v-ease)}
.phmark span{font:400 italic 16px/1 var(--v-voice);color:var(--v-sub)}
.phmark .body{animation:breathe 3.6s ease-in-out infinite;transform-origin:50% 90%}
.phmark.gone{transform:scale(0);opacity:0}
.phhome{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 44px) 18px calc(env(safe-area-inset-bottom,0px) + 12px);
  background:radial-gradient(120% 60% at 50% 0%,#f1f6f4,var(--v-field2) 75%);transform:translateY(100%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.phone.unlocked .phhome{transform:none}
.ph-back{align-self:center;border:0;background:rgba(251,252,251,.7);border-radius:99px;padding:6px 14px;font:600 12px/1 var(--v-ui);color:var(--v-ink);margin-bottom:18px}
.ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 10px;align-content:start;flex:1}
.ph-grid button{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;font:500 11.5px/1 var(--v-ui);color:var(--v-ink);cursor:pointer}
.ph-grid .fi{width:60px;height:60px;border-radius:24%}
.ph-dock{flex:none;display:flex;gap:4px;overflow-x:auto;padding:10px 10px 8px;border-radius:28px;background:rgba(251,252,251,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);scrollbar-width:none}
.ph-dock button{flex:none;width:60px;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;font:600 10px/1 var(--v-ui);color:var(--v-ink);cursor:pointer}
.ph-dock svg{width:52px;height:52px;overflow:visible}
.phcrew{display:none}
html{background:#cfdfdb}
.mobile #office{background:radial-gradient(120% 60% at 50% 0%,#f1f6f4,var(--v-field2) 75%)}
.d2-th .mini{container-type:normal}
.mini .mz{position:absolute;left:0;top:0;width:960px;height:540px;container-type:inline-size;transform-origin:0 0;color:var(--w-ink);font-family:var(--grot);overflow:hidden}

/* ================= v7.4 ================= */
/* talking to an agent: a speech bubble and small pills, the same voice as their micro messages */
.apop{left:50%;bottom:66px;transform:translateX(-50%);width:max-content;max-width:290px;padding:0;background:none;box-shadow:none;border-radius:0;gap:6px;display:flex;flex-direction:column;align-items:center}
.apop .spk{margin:0;padding:9px 13px;border-radius:16px;background:var(--v-paper);color:var(--v-ink);font:500 13px/1.38 var(--v-ui);font-style:normal;box-shadow:0 10px 28px -12px rgba(29,42,47,.45);text-align:left}
.apop .pills{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.apop .pills [data-h],.apop .amsg{padding:5px 10px;border-radius:99px;background:rgba(251,252,251,.92);box-shadow:0 0 0 1px var(--os-line),0 6px 16px -10px rgba(29,42,47,.5);font:600 11.5px/1.2 var(--v-ui);color:var(--v-ink);cursor:pointer;white-space:nowrap}
.apop .amsg{color:var(--v-blue)}
.apop .pills [data-h]:hover,.apop .pills [data-h]:focus-visible,.apop .amsg:hover{box-shadow:0 0 0 1.5px var(--v-blue);color:var(--v-blue)}
.apop.below{top:64px;bottom:auto;flex-direction:column-reverse}
.agent .say{font:500 12.5px/1.35 var(--v-ui)}

/* dock: apps that are open show up after the stacks, with a dot, like a Mac */
.dk-run{display:flex;align-items:center;gap:8px}
.dk-run:not(:empty)::before{content:"";width:1px;align-self:stretch;margin:6px 4px;background:rgba(0,0,0,.14)}
.dk-r{position:relative;width:52px;height:52px;border:0;padding:0;background:none;cursor:pointer;animation:dkin .35s cubic-bezier(.2,.8,.2,1)}
.dk-r img,.dk-r svg{width:100%;height:100%;border-radius:23%;display:block;object-fit:cover}
.dk-r .dk-dot{position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--v-ink);opacity:1}
@keyframes dkin{from{transform:scale(.3) translateY(10px);opacity:0}}
.dk-r:hover .dk-tip{opacity:1;transform:translate(-50%,0)}

/* Messages: the agent's avatar beside their messages, like iMessage */
.chat2 .log p.them{position:relative;margin-left:30px}
.chat2 .log .lav{position:absolute;left:-30px;bottom:0;width:24px;height:24px;display:block}
.chat2 .log .lav svg{width:24px;height:24px;border-radius:7px;display:block}

/* slideshow: controls, and the agents in the front row */
.d2-ctl{display:none}
.d2-stage.full .d2-ctl{display:flex;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);align-items:center;gap:6px;padding:6px;border-radius:99px;background:rgba(251,252,251,.12);backdrop-filter:blur(10px);z-index:2}
.d2-stage.full .d2-ctl button{border:0;border-radius:99px;background:rgba(251,252,251,.9);color:var(--v-ink);font:600 13px/1 var(--v-ui);padding:9px 14px;cursor:pointer}
.d2-stage.full .d2-ctl span{color:#fbfcfb;font:600 12px/1 var(--v-ui);padding:0 8px;font-variant-numeric:tabular-nums}
.d2-stage.full{cursor:zoom-out}.d2-stage.full .d2-slide{cursor:pointer}
.crew.audience{z-index:99900}
body.showing .menubar,body.showing .dock{opacity:0;pointer-events:none;transition:opacity .4s}
.d2-stage.full{padding:3vw 3vw 12vh}

/* editing a slide, a cell, a meeting or an email (the agents put it back) */
.d2-slide .dragged{outline:1.5px dashed #ff3eb5;outline-offset:3px;cursor:grabbing}
.d2-slide [contenteditable="true"],.xl-grid td[contenteditable="true"]{outline:2px solid var(--v-blue);outline-offset:2px;background:rgba(79,143,230,.08)}
.ghost{position:absolute;left:4px;right:6px;border:1.5px dashed rgba(29,42,47,.25);border-radius:6px;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(29,42,47,.04) 6px 12px)}
li.ghost{position:static;height:58px;margin:4px 8px}
.back{animation:backin .8s cubic-bezier(.2,.8,.2,1)}
@keyframes backin{0%{transform:scale(.9);box-shadow:0 0 0 3px rgba(255,51,25,.5)}100%{transform:none;box-shadow:none}}

/* phone: Mark's pill on the home screen, app sheets that feel like windows */
.ph-pill{position:absolute;left:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 104px);max-width:250px;padding:9px 13px;border-radius:16px 16px 16px 4px;background:var(--v-paper);color:var(--v-ink);font:500 13px/1.35 var(--v-ui);box-shadow:0 10px 28px -12px rgba(29,42,47,.45);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.ph-pill.on{opacity:1;transform:none}
.ph-sheet{top:calc(env(safe-area-inset-top,0px) + 10px);border-radius:22px 22px 0 0;box-shadow:0 -12px 40px -16px rgba(29,42,47,.45);overflow:hidden}
.ph-sheet::before{content:"";position:absolute;left:50%;top:6px;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:rgba(29,42,47,.18);z-index:2}
.ps-hd{padding:18px 16px 12px;background:var(--os-chrome);border-bottom:1px solid var(--os-line)}
.ps-hd b{font:700 16px/1 var(--v-ui)}
.ps-ic{width:30px;height:30px}.ps-ic img,.ps-ic svg{border-radius:8px}
.ps-done{font:600 15px/1 var(--v-ui);color:var(--v-blue)}
.ph-sheet .ps-bd{background:var(--os-bg)}
.ph-sheet .chat2 aside,.ph-sheet .mail2 .ml{background:var(--os-win)}
.ph-sheet .chat2 .log{background:var(--os-win)}

/* ================= v7.5 ================= */
/* speech: one bubble per agent, on a layer under the figures, with a tail pointing at the speaker */
.talk{position:absolute;inset:0;pointer-events:none;z-index:5001}
.talk.audience{z-index:99890}
.talk-m{position:fixed;inset:0;z-index:99960}
.bub{position:absolute;left:0;top:0;width:max-content;max-width:260px;padding:8px 12px;border-radius:14px;background:var(--v-paper);color:var(--v-ink);font:500 12.5px/1.38 var(--v-ui);
  box-shadow:0 10px 26px -12px rgba(29,42,47,.5),0 0 0 .5px rgba(29,42,47,.08);opacity:0;pointer-events:none;transition:opacity .2s}
.bub.on{opacity:1;pointer-events:auto}
.bub::after{content:"";position:absolute;width:11px;height:11px;background:inherit;transform:rotate(45deg);box-shadow:inherit;clip-path:polygon(100% 0,100% 100%,0 100%)}
.bub.b-up::after{left:var(--tx,50%);bottom:-5px;margin-left:-5.5px}
.bub.b-dn::after{left:var(--tx,50%);top:-5px;margin-left:-5.5px;transform:rotate(225deg)}
.bub.b-sr::after{left:-5px;top:50%;margin-top:-5.5px;transform:rotate(135deg)}
.bub.b-sl::after{right:-5px;top:50%;margin-top:-5.5px;transform:rotate(-45deg)}
.bub .bt{margin:0}
.bub .bp:empty{display:none}
.bub .pill{display:inline-block;margin-top:7px;padding:5px 11px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--v-blue);color:var(--v-blue);font:600 11.5px/1.2 var(--v-ui);cursor:pointer;white-space:nowrap}
.bub .pill:hover,.bub .pill:focus-visible{background:var(--v-blue);color:#fff}
.bub.typing .bt{display:flex;gap:4px;padding:3px 2px}
.bub.typing .bt i{width:6px;height:6px;border-radius:50%;background:var(--v-sub);animation:tp 1s infinite}.bub.typing .bt i:nth-child(2){animation-delay:.15s}.bub.typing .bt i:nth-child(3){animation-delay:.3s}
.agent .say,.agent .apop{display:none}

/* genie: strips of the window bend into or out of the agent */
.genie{position:absolute;inset:0;pointer-events:none;z-index:4980}
.genie .win{position:absolute;will-change:transform}

/* deck: drag the thumbnails' edge to resize or hide them */
.deck2{position:relative;grid-template-columns:var(--thw,118px) 1fr}
.deck2.tucked .d2-th{overflow:hidden;padding:0;border:0}
.d2-split{position:absolute;top:0;bottom:0;left:calc(var(--thw,118px) - 5px);width:10px;cursor:col-resize;z-index:3;touch-action:none}
.d2-split::after{content:"";position:absolute;left:3px;top:50%;width:4px;height:36px;margin-top:-18px;border-radius:2px;background:var(--os-line);transition:background .2s}
.d2-split:hover::after,.deck2.tucked .d2-split::after{background:var(--v-blue)}
.deck2.tucked .d2-split{left:0;width:14px}

/* the calendar's "hold" block Donna tries and removes */
.cal2 .ev.hold{left:4px;right:6px;background:repeating-linear-gradient(135deg,#efe4fd 0 6px,#fbfcfb 6px 12px);border:1.5px dashed #9c52f2;color:var(--v-ink)}

/* phone: the crew pops up in the corner of the app it's working in */
.mcrew{position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);z-index:99950;display:flex;gap:6px;pointer-events:none;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.mcrew.on{opacity:1;transform:none;pointer-events:auto}
.mcrew .agent.mob{position:relative;width:54px;height:54px;transform:none!important}
.mcrew .agent.mob .fig{width:54px;height:54px}
.mcrew .agent.mob .body{animation:breathe 3s ease-in-out infinite;transform-origin:50% 90%}
.ph-sheet{transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s}
.ps-done{border:1.5px solid var(--v-blue)!important;border-radius:99px;padding:6px 14px!important;font-size:14px!important}
.ph-sheet .chat2 .chips{padding:10px 12px 8px;margin:0;border-top:1px solid var(--os-line);background:var(--os-chrome);gap:6px}
.ph-sheet .chat2 .chips button{background:var(--os-win);border:1px solid var(--os-line);border-radius:99px;padding:7px 12px;font:600 12.5px/1.2 var(--v-ui);color:var(--v-ink)}
.ph-sheet .mail2 .ml b,.ph-sheet .mail2 .ml strong,.ph-sheet .mail2 .ml span{font-size:14.5px!important}
.ph-sheet .mail2 .ml time{font-size:12.5px}
.sysnote.ship{z-index:99970}

/* ================= v7.6 · one line per bubble; a question carries a blue tick that means yes ================= */
.bub{white-space:nowrap;max-width:none}
.bub .bt{display:flex;align-items:center;gap:8px}
.bub.ask{cursor:pointer;padding-right:6px}
.bub .tick{flex:none;width:24px;height:24px;border-radius:50%;background:var(--v-blue);display:grid;place-items:center;box-shadow:0 2px 6px -2px rgba(79,143,230,.6);transition:transform .15s}
.bub .tick svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bub.ask:hover .tick{transform:scale(1.12)}
.bub .pill{display:none}
.win{will-change:auto}
.ph-pill{white-space:nowrap;max-width:none}
.ph-pill.typing{display:flex;gap:4px}.ph-pill.typing i{width:6px;height:6px;border-radius:50%;background:var(--v-sub);animation:tp 1s infinite}.ph-pill.typing i:nth-child(2){animation-delay:.15s}.ph-pill.typing i:nth-child(3){animation-delay:.3s}
.mcrew{bottom:calc(env(safe-area-inset-bottom,0px) + 70px)}
.chat2 .chips{scrollbar-width:none}.chat2 .chips::-webkit-scrollbar{display:none}

/* ---------- v7.7: one bubble for everyone (wraps to two lines), yes and message buttons, cockpit timeline, lock screen ---------- */
.bub{white-space:normal;max-width:300px;width:max-content}
.talk-m .bub{max-width:min(300px,calc(100vw - 32px))}
.bub .bt{display:flex;align-items:center;gap:8px}
.bub .tx{min-width:0;text-wrap:pretty}
.bub.ask{cursor:default;padding-right:7px}
.bub .tick,.bub .msg{flex:none;width:26px;height:26px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.bub .msg{background:var(--v-paper);box-shadow:inset 0 0 0 1.5px var(--v-blue);margin-left:-3px}
.bub .msg svg{width:14px;height:14px;fill:none;stroke:var(--v-blue);stroke-width:1.6;stroke-linejoin:round}
.bub.ask:hover .tick{transform:none}
.bub .tick:hover,.bub .msg:hover,.bub .tick:focus-visible,.bub .msg:focus-visible{transform:scale(1.12)}
button.st-go{border:0;cursor:pointer}button.st-go.wip:hover{background:var(--v-vio);color:#fff}
.intro.gone{display:none}
.intro.lock::before{content:"Locked. Tap Mark to come back in.";position:absolute;left:50%;top:calc(46% + min(18vw,100px) + 46px);transform:translateX(-50%);font:500 14px/1 var(--v-ui);color:var(--v-sub);white-space:nowrap;z-index:2}
.dz-kpis{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.dz-kpis b{font-size:20px;white-space:nowrap}
.dz-tl{display:flex;flex-direction:column;gap:7px}
.dz-tl .gb,.dz-tl .ax{display:grid;grid-template-columns:minmax(118px,30%) 1fr;align-items:center;gap:12px}
.dz-tl .gb{border:0;background:none;padding:2px 0;cursor:pointer;text-align:left;font:inherit;color:var(--os-text)}
.dz-tl .lb{display:flex;flex-direction:column;gap:1px;font:600 12px/1.2 var(--sys)}.dz-tl .lb small{font:800 12px/1.2 var(--grot)}
.dz-tl .tr{position:relative;height:20px;border-radius:10px;background:var(--os-chrome)}
.dz-tl .tr i{position:absolute;top:0;bottom:0;border-radius:10px;transform-origin:left;animation:grow .9s var(--slow) var(--d) both;transition:filter .2s}
.dz-tl .gb:hover i{filter:brightness(1.15) saturate(1.1)}
.dz-tl .ax .tr{background:none;height:14px}
.dz-tl .ax em{position:absolute;top:0;transform:translateX(-50%);font:500 10.5px/1 var(--sys);font-style:normal;color:var(--os-sub)}.dz-tl .ax em:first-child{transform:none}.dz-tl .ax em:last-child{transform:translateX(-100%)}
@container (max-width:440px){.dz-tl .gb,.dz-tl .ax{grid-template-columns:1fr;gap:4px}.dz-tl .ax>span:first-child{display:none}}
/* slideshow: room above the slide for Rebecca, below it for the audience */
.d2-stage.full{padding:7vh 3vw 13vh}
.cal2 .ev.short{flex-direction:row;align-items:center;gap:8px;padding-top:0;padding-bottom:0}.cal2 .ev.short b{flex:0 1 auto;min-width:0}.cal2 .ev.short small{flex:none}
/* a narrow deck window gives the whole width to the slide */
@container (max-width:470px){.deck2,.deck2.tucked{grid-template-columns:1fr!important}.deck2 .d2-split{display:none}.d2-stage{padding:8px}}

/* ---------- v7.8: badges for work done behind your back; phone sheets get the same container queries as windows ---------- */
.agent .bell{position:absolute;top:-4px;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#a90636;color:#fff;font:700 10px/17px var(--v-ui);text-align:center;box-shadow:0 0 0 2px var(--v-paper);pointer-events:none}
.agent .bell[hidden]{display:none}
.ps-bd{container-type:inline-size}
.intro.out::after{opacity:0}
/* v7.9: CVR+ and Sunny sit inset on the chrome tile in the dock too, as in their windows */
.dk-r[data-run=cvr] img,.dk-r[data-run=sunny] img{box-sizing:border-box;padding:14%;object-fit:contain;background:var(--os-chrome)}
/* phone: badges on the home-dock faces, and Rebecca speaking in the pill (with her ✓) */
.ph-dock button{position:relative}
.ph-dock .bell{position:absolute;top:0;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#a90636;color:#fff;font:700 10px/17px var(--v-ui);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--v-paper)}
.ph-dock .bell[hidden]{display:none}
.ph-pill.rb{pointer-events:auto;white-space:normal;max-width:min(300px,calc(100vw - 36px));cursor:pointer}
.ph-pill.rb b{display:block;font:700 11px/1.3 var(--v-ui);color:var(--v-blue);margin-bottom:2px}
.ph-pill .tick{display:inline-grid;place-items:center;vertical-align:middle;width:26px;height:26px;margin-left:4px;border:0;border-radius:50%;background:var(--v-blue);cursor:pointer}
.ph-pill .tick svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* cockpit: as many KPI tiles as there are numbers, numbers on one line */
.dz-k{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.dz-k div{justify-content:flex-start}
.dz-fun [data-sor]{cursor:help}
.ph-sheet .dz-h{flex-wrap:wrap;row-gap:4px}.ph-sheet .dz-h b,.ph-sheet .dz-h small{white-space:nowrap}
/* live chat: a message passed on by another agent, and background posts folded away */
.chat2 .log .from small{display:block;font:700 10px/1.3 var(--v-ui);opacity:.6;margin-bottom:1px}
.chat2 .log .bgf{align-self:stretch;font:600 11px/1.3 var(--v-ui);color:var(--os-sub);border-bottom:1px dashed var(--os-line);padding:2px 2px 6px}
.chat2 .log .bgf summary{cursor:pointer;list-style:none}.chat2 .log .bgf summary::before{content:"▸ ";opacity:.6}.chat2 .log .bgf[open] summary::before{content:"▾ "}
.chat2 .log .bgf p{margin:4px 0 0;max-width:none;padding:0;background:none;font:500 11.5px/1.35 var(--v-ui)}

/* ---------- project windows (v7.14): each project in its own art, colours and type, one quiet live thing, one way in ---------- */
.pw{height:100%;overflow:auto;display:flex;flex-direction:column;font-family:var(--v-ui);color:var(--v-ink);background:var(--v-paper);padding:14px 16px;gap:0}
.pw .st-go,.win .pw a.st-go{margin-top:auto;align-self:stretch;text-align:center;flex:none;color:#fff;opacity:1}
.pw .hd{display:flex;align-items:center;gap:10px;flex:none}
.pw .hd img{width:38px;height:38px;border-radius:10px;object-fit:contain;flex:none}
.pw .hd div{min-width:0}
.pw .hd .st{margin-left:auto;flex:none;white-space:nowrap}
@keyframes pw-rise{from{opacity:0;transform:translateY(10px)}}
/* LinkedIn · Don */
.pw-li{padding:0 0 14px}
.pw-li .cover{height:96px;flex:none;overflow:hidden;background:#001730}
.pw-li .cover img{width:100%;height:100%;object-fit:cover;object-position:100% 50%;display:block}
.pw-li .me{display:flex;gap:12px;align-items:flex-end;padding:0 16px;margin-top:-38px;position:relative}
.pw-li .me>img{width:80px;height:80px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--v-paper)}
.pw-li .acts{display:flex;gap:6px;margin-left:auto;padding-bottom:4px}
.pw-li a.btn,.win .pw-li a.st-go{display:inline-block;margin:0;align-self:auto;padding:8px 14px;border-radius:99px;font:600 12.5px/1 var(--v-ui);text-decoration:none}
.pw-li a.btn.follow{color:var(--v-ink);background:var(--v-paper);box-shadow:inset 0 0 0 1.5px rgba(29,42,47,.18)}
.pw-li h3{margin:10px 16px 0;font:700 18px/1.2 var(--v-ui)}
.pw-li .hline{margin:3px 16px 0;font-size:12.5px;line-height:1.4}
.pw-li .loc{margin:3px 16px 0;font-size:11.5px;color:var(--v-sub)}
.pw-li .feat{margin:14px 16px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pw-li a.card{border:1px solid rgba(29,42,47,.1);border-radius:10px;padding:10px 11px;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:96px;color:inherit;text-decoration:none;animation:pw-rise .6s var(--v-ease) both}
.pw-li .card+.card{animation-delay:.12s}
.pw-li .card:hover{border-color:var(--v-blue)}
.pw-li .card b{font:700 12.5px/1.3 var(--v-ui)}.pw-li .card small{margin-top:auto;font-size:11px;color:var(--v-sub)}
.pw-li .card .k{font:700 9.5px/1 var(--v-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--v-red)}
/* GitHub · Tony */
.pw-gh{gap:12px}
.pw-gh .top{display:flex;align-items:center;gap:10px}.pw-gh .top svg{width:34px;height:34px;flex:none}
.pw-gh .top b{font:700 15px/1.1 var(--v-ui)}.pw-gh .top small{display:block;font-size:11.5px;color:var(--v-sub)}
.pw-gh .live{margin-left:auto;display:flex;align-items:center;gap:6px;font:600 11px/1 var(--v-ui);color:#1f8f4e;white-space:nowrap}
.pw-gh .live i{width:7px;height:7px;border-radius:50%;background:#1f8f4e;animation:pw-beat 1.6s infinite}
@keyframes pw-beat{50%{opacity:.3}}
.pw-gh .cg{display:grid;grid-template-columns:repeat(26,minmax(0,1fr));grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:3px}
.pw-gh .cg i{aspect-ratio:1}
.pw-gh .cg i{border-radius:2px;background:#e3eae8}
.pw-gh .cg i[data-l="1"]{background:#dccbf7}.pw-gh .cg i[data-l="2"]{background:#c09cf3}.pw-gh .cg i[data-l="3"]{background:#9c52f2}.pw-gh .cg i[data-l="4"]{background:#6a2bb8}
.pw-gh .cgk{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font:500 10.5px/1.2 var(--v-ui);color:var(--v-sub)}
.pw-gh .repos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pw-gh .repo{border:1px solid rgba(29,42,47,.1);border-radius:10px;padding:9px 10px;display:flex;flex-direction:column;gap:5px;min-width:0}
.pw-gh .repo b{font:700 12px/1.2 var(--v-ui);color:#2c5aa8;overflow:hidden;text-overflow:ellipsis}
.pw-gh .repo small{font-size:11px;color:var(--v-sub);line-height:1.3}
.pw-gh .lg{display:flex;align-items:center;gap:5px;font:500 10.5px/1 var(--v-ui);color:var(--v-sub);margin-top:auto}.pw-gh .lg i{width:8px;height:8px;border-radius:50%}
/* MIMI · Tony: MIMI's sky, Nunito and approved v08 art */
.pw-mimi{background:linear-gradient(180deg,#b2afc8 0,#cdbdc9 50%,#ead3bd 100%);font-family:"Nunito",ui-rounded,system-ui,sans-serif;color:#24324a}
.pw-mimi .hd b{font:900 16px/1 "Nunito",sans-serif}.pw-mimi .hd small{display:block;font:600 11.5px/1.3 "Nunito",sans-serif;opacity:.75}
.pw-mimi .st{font:800 10.5px/1 "Nunito",sans-serif;background:#8c87cf;color:#fff;padding:6px 10px;border-radius:99px}
/* the stage fills spare height (phone, a tall window) and gives some back when short; she sizes from it, never wider than it allows */
.pw-mimi .stage{position:relative;flex:1 1 300px;min-height:250px;margin:6px -16px 0;touch-action:none;overflow:hidden;container-type:size}
.pw-mimi .txt{position:absolute;left:16px;top:10px;width:46%;z-index:1}
.pw-mimi h4{margin:0;font:900 clamp(18px,6.2cqw,26px)/1.05 "Nunito",sans-serif;text-wrap:balance}
.pw-mimi .gauge{position:relative;margin-top:14px;padding-left:15px;min-height:92px}
.pw-mimi .gauge i{position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:3px;background:rgba(36,50,74,.16);overflow:hidden}
.pw-mimi .gauge i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--f,1) * 100%);border-radius:3px;background:#24324a;transition:height .25s linear}
.pw-mimi .deg{display:block;padding-top:8px;font:900 22px/1 "Nunito",sans-serif;font-variant-numeric:tabular-nums}
.pw-mimi .gauge small{display:block;margin-top:5px;max-width:130px;font:700 11.5px/1.35 "Nunito",sans-serif;opacity:.6}
.pw-mimi .av{position:absolute;right:-6px;bottom:0;height:min(100cqh,87cqw);aspect-ratio:1216/1296}
.pw-mimi .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.97);transition:opacity .5s,transform .5s var(--v-ease)}
.pw-mimi .av img.on{opacity:1;transform:none}
.pw-mimi .pills{position:absolute;left:12px;right:12px;bottom:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.pw-mimi .pills span{font:800 11.5px/1 "Nunito",sans-serif;background:rgba(255,255,255,.88);padding:7px 11px;border-radius:99px;box-shadow:0 4px 10px -6px rgba(36,50,74,.5);animation:pw-pill .45s calc(var(--k) * 60ms) cubic-bezier(.3,1.5,.6,1) both}
@keyframes pw-pill{from{opacity:0;transform:translateY(-8px) scale(.85)}}
.pw-mimi .sm{margin:8px 0 10px;font:700 11px/1 "Nunito",sans-serif;opacity:.6;text-align:center}
.pw-mimi .st-go{background:#8c87cf;font-family:"Nunito",sans-serif;font-weight:800}
/* CVR+ · Tony */
.pw-cvr{gap:10px}
.pw-cvr .hd b{font:700 15px/1.1 var(--v-ui)}.pw-cvr .hd small{display:block;font-size:11.5px;color:var(--v-sub)}
.pw-cvr .st{font:700 10.5px/1 var(--v-ui);color:#9c52f2;box-shadow:inset 0 0 0 1.5px #9c52f2;padding:5px 9px;border-radius:99px}
.pw-cvr .tree{position:relative;height:170px;flex:none;border-radius:12px;background:#f3f7f6}
.pw-cvr .tree svg{position:absolute;inset:0;width:100%;height:100%}
.pw-cvr .nd{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid rgba(29,42,47,.1);border-radius:9px;padding:5px 8px;font:600 10.5px/1.2 var(--v-ui);white-space:nowrap;box-shadow:0 6px 14px -10px rgba(29,42,47,.5);transition:box-shadow .4s}
.pw-cvr .nd small{display:block;font-weight:500;color:var(--v-sub);font-size:9.5px}
.pw-cvr .nd.p{border-radius:99px;background:var(--v-ink);color:#fff;border-color:transparent}.pw-cvr .nd.p small{color:#b5d1cc}
.pw-cvr .nd.hot{box-shadow:0 0 0 2px #9c52f2,0 6px 14px -10px rgba(29,42,47,.5)}
.pw-cvr .ask{display:flex;flex-direction:column;gap:6px}
.pw-cvr .q{align-self:flex-end;background:#2f6fe0;color:#fff;border-radius:13px 13px 4px 13px;padding:6px 10px;font:500 11.5px/1.3 var(--v-ui)}
.pw-cvr .a{align-self:flex-start;background:#eef3f1;border-radius:13px 13px 13px 4px;padding:6px 10px;font:500 11.5px/1.35 var(--v-ui);max-width:88%}
.pw-cvr .a code{font:600 10.5px/1 ui-monospace,Menlo,monospace;color:#9c52f2}
/* Tumle · Tony: Tumle's paper and slate, its own scene cards and mascot */
.pw-tumle{background:#F7F1E3;color:#1B3644;font-family:"Nunito",ui-rounded,system-ui,sans-serif}
.pw-tumle .hd img{border-radius:0}
.pw-tumle .hd b{font:900 16px/1 "Nunito",sans-serif}.pw-tumle .hd small{display:block;font:600 11.5px/1.3 "Nunito",sans-serif;color:rgba(27,54,68,.74)}
.pw-tumle .st{font:800 10.5px/1 "Nunito",sans-serif;color:#8F4900;background:#EBD999;padding:6px 10px;border-radius:99px}
.pw-tumle h4{margin:14px 0 0;font:900 20px/1.15 "Nunito",sans-serif;text-wrap:balance}
/* one big card in front, the other two smaller behind it; the deck fills spare height and the cards size from it, so nothing spills over the chips */
.pw-tumle .deck3{position:relative;flex:1 1 auto;aspect-ratio:2/1;min-height:150px;min-width:0;margin:10px 0 12px;container-type:size}
.pw-tumle figure{--w:min(62cqw,(100cqh - 46px) * 1.28);position:absolute;top:50%;left:50%;width:var(--w);margin:0;background:#FFFCF5;border-radius:14px;padding:6px 6px 8px;box-shadow:0 12px 24px -16px rgba(27,54,68,.6);transition:transform .7s var(--v-ease),opacity .7s,filter .7s}
.pw-tumle figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;display:block}
.pw-tumle figure span{display:flex;justify-content:space-between;margin-top:6px;font:900 12px/1 "Nunito",sans-serif}
.pw-tumle figure span i{font-style:normal;font-weight:700;color:rgba(27,54,68,.56)}
.pw-tumle figure[data-p="0"]{transform:translate(-50%,-50%) translateX(-62%) scale(.76) rotate(-7deg);z-index:1;filter:saturate(.8) brightness(.96)}
.pw-tumle figure[data-p="1"]{transform:translate(-50%,-50%);z-index:3}
.pw-tumle figure[data-p="2"]{transform:translate(-50%,-50%) translateX(62%) scale(.76) rotate(7deg);z-index:2;filter:saturate(.8) brightness(.96)}
.pw-tumle .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pw-tumle .chips span{font:800 11px/1 "Nunito",sans-serif;padding:7px 10px;border-radius:99px;background:#FFFCF5;border:1px solid rgba(27,54,68,.12)}
.pw-tumle .st-go.wip{background:#1B3644;color:#fff;box-shadow:none;font-family:"Nunito",sans-serif;font-weight:800}
/* Sunny · Tony: ivory stock, Wada Orange, condensed figures and ink bars */
.pw-sunny{background:#F3EBD6;color:#16130F;font-family:"Schibsted Grotesk",system-ui,sans-serif}
.pw-sunny .hd b{font:900 22px/1 "Sofia Sans Extra Condensed",sans-serif}.pw-sunny .hd small{display:block;font-size:11.5px;color:#4c463d;margin-top:2px}
.pw-sunny .st{font:800 12px/1 "Sofia Sans Extra Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase;background:#16130F;color:#FF5200;padding:6px 9px}
.pw-sunny .motto{margin:14px 0 0;font:900 46px/.92 "Sofia Sans Extra Condensed",sans-serif}
.pw-sunny .motto em{font-style:normal;background:#FF5200;padding:0 6px}
.pw-sunny .ink{margin-top:auto;display:grid;gap:10px;border-top:1.5px solid #16130F;padding-top:10px}
.pw-sunny .ink div{display:grid;grid-template-columns:1fr auto;gap:5px 8px;align-items:baseline}
.pw-sunny .ink span{font:600 12.5px/1 "Schibsted Grotesk",sans-serif}
.pw-sunny .ink b{font:800 19px/1 "Sofia Sans Extra Condensed",sans-serif;font-variant-numeric:tabular-nums}
.pw-sunny .ink i{grid-column:1/-1;height:9px;border:1.5px solid #16130F;background:repeating-linear-gradient(-55deg,#16130F 0 1px,transparent 1px 4px);position:relative;overflow:hidden}
.pw-sunny .ink i::after{content:"";position:absolute;inset:0;right:auto;width:calc(var(--f) * 100%);background:#FF5200;border-right:1.5px solid #16130F;transform-origin:0 50%;animation:pw-fill 1.4s cubic-bezier(.16,1,.3,1) both}
@keyframes pw-fill{from{transform:scaleX(0)}}
.pw-sunny .sm{margin:10px 0;font:600 9.5px/1 "Schibsted Grotesk",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4c463d}
.pw-sunny .st-go.wip{background:#16130F;color:#FF5200;box-shadow:none;border-radius:0;font:800 15px/1 "Sofia Sans Extra Condensed",sans-serif;letter-spacing:.05em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.pw *{animation:none!important;transition:none!important}}
/* hand-off (v7.15): an empty avatar ring waits, the agent swirls into it and its face settles in */
.chat2 .log .lav.slot{border-radius:8px;outline:1.5px dashed rgba(29,42,47,.35);outline-offset:1px}
.chat2 .log .lav.slot svg{opacity:0;scale:.3;rotate:-90deg;transition:opacity .25s,scale .45s cubic-bezier(.3,1.7,.5,1),rotate .45s var(--v-ease)}
.chat2 .log .lav.slot.in{outline-color:transparent;animation:lav-in .55s ease-out}
.chat2 .log .lav.slot.in svg{opacity:1;scale:1;rotate:0deg}
@keyframes lav-in{from{box-shadow:0 0 0 0 rgba(47,111,224,.55)}to{box-shadow:0 0 0 9px rgba(47,111,224,0)}}
@media (prefers-reduced-motion:reduce){.chat2 .log .lav.slot svg{opacity:1;scale:1;rotate:0deg}}
/* lock screen (v7.15): notifications wait in a stack; opened, the time folds away and Mark takes its place */
.phone .ph-lock{max-height:180px;overflow:hidden;transition:opacity .3s,transform .45s var(--v-ease),max-height .45s var(--v-ease),padding .45s var(--v-ease)}
.phone.ex .ph-lock{opacity:0;max-height:0;padding:0;transform:translateY(-28px)}
.phone .phmark span{transition:opacity .3s}
.phone.ex .phmark svg{width:60px;height:60px}
.phone.ex .phmark span{opacity:0;height:0;overflow:hidden}
.phone:not(.ex) .notes{justify-content:flex-end;overflow:hidden;-webkit-mask:none;mask:none;padding-bottom:18px}
.phone:not(.ex) .notes .note{display:none}
.phone.ex .nsum{display:none}
.nsum{position:relative;flex:none;border:0;text-align:left;font:inherit;cursor:pointer;background:rgba(245,247,250,.86);color:#13222b;border-radius:16px;padding:11px 13px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:2px 10px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:notein .45s var(--slow) both}
.nsum::before,.nsum::after{content:"";position:absolute;left:10px;right:10px;bottom:-7px;height:7px;border-radius:0 0 13px 13px;background:rgba(245,247,250,.62)}
.nsum::after{left:22px;right:22px;bottom:-13px;height:6px;background:rgba(245,247,250,.4)}
.nsum .ic{grid-row:1/3;width:34px;height:34px;border-radius:9px;overflow:hidden}.nsum .ic svg,.nsum .ic img{width:100%;height:100%;display:block}
.nsum b{font-size:13.5px}.nsum .tx{font-size:13px;color:#3b4d58;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nsum[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.phone .ph-lock,.phmark svg{transition:none}}
/* the pull: the stack lifts and fans, Mark and the time give way a little; released early, it all springs back */
.phone:not(.ex) .nsum{translate:0 calc(var(--pull,0) * -26px)}
.phone:not(.ex) .nsum::before{height:calc(7px + var(--pull,0) * 14px);bottom:calc(-7px - var(--pull,0) * 14px)}
.phone:not(.ex) .nsum::after{height:calc(6px + var(--pull,0) * 12px);bottom:calc(-13px - var(--pull,0) * 26px)}
.phone:not(.ex) .phmark svg{scale:calc(1 - var(--pull,0) * .16)}
.phone.ex .notes{translate:0 calc(var(--pull,0) * 56px)}
.phone:not(.pulling) .nsum,.phone:not(.pulling) .nsum::before,.phone:not(.pulling) .nsum::after,.phone:not(.pulling) .phmark svg,.phone:not(.pulling) .notes{transition:translate .45s cubic-bezier(.3,1.4,.5,1),scale .45s cubic-bezier(.3,1.4,.5,1),height .4s var(--v-ease),bottom .4s var(--v-ease),width .45s var(--v-ease)}
/* portrait (the phone, a tall narrow window): MIMI stands centred under the words, bigger; Tumle's front card goes wide and the other two stack behind it */
@container (orientation:portrait){
  .pw-mimi .av{right:50%;translate:50% 0;height:min(70cqh,118cqw)}
  .pw-mimi .txt{width:auto;right:16px}
  .pw-tumle figure{--w:min(84cqw,(100cqh - 90px) * 1.28)}
  .pw-tumle figure[data-p="0"]{transform:translate(-50%,-50%) translateY(-13%) scale(.9);filter:saturate(.8) brightness(.96)}
  .pw-tumle figure[data-p="2"]{transform:translate(-50%,-50%) translateY(-24%) scale(.8);filter:saturate(.7) brightness(.93)}
  .pw-tumle figure[data-p="1"]{transform:translate(-50%,-50%) translateY(6%)}
}
/* Messages (v7.17): @mentions in blue, receipts for things done, the folded away-line with a face, Rebecca's recap card */
.chat2 .log .at{color:#2f6fe0;font-weight:700}
.chat2 .log .did{align-self:flex-start;margin-left:30px;max-width:none;display:flex;align-items:center;gap:7px;font:600 11.5px/1.2 var(--v-ui);color:var(--v-ink);background:#fff;border:1px solid var(--os-line);border-radius:10px;padding:6px 10px;animation:notein .35s var(--slow) both}
.chat2 .log .did svg{width:14px;height:14px;flex:none;color:#1f8f4e}
.chat2 .log .bgf summary{display:flex;align-items:center;gap:7px}.chat2 .log .bgf summary::before{display:none}
.chat2 .log .bgf .fav svg{width:16px;height:16px;border-radius:5px;display:block}
.chat2 .log .bgf summary em{font-style:normal;margin-left:auto;color:#2f6fe0}.chat2 .log .bgf[open] summary em{visibility:hidden}
.chat2 .log .recap{position:relative;margin-left:30px;align-self:flex-start;width:min(78%,300px);background:#fff;border:1px solid var(--os-line);border-radius:15px;border-bottom-left-radius:4px;padding:10px 12px;font:13px/1.4 var(--sys)}
.chat2 .log .recap .rh{display:block;font:800 10.5px/1 var(--v-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--os-sub);margin-bottom:8px}
.chat2 .log .recap .rr{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:6px 0;border-top:1px solid var(--os-line)}.chat2 .log .recap .rr:first-of-type{border-top:0;padding-top:0}
.chat2 .log .recap .rav svg{width:22px;height:22px;border-radius:6px;display:block}
.chat2 .log .recap ul{margin:2px 0 0;padding-left:16px;font-size:12.5px;line-height:1.35}.chat2 .log .recap li::marker{color:var(--os-sub)}
/* phone (v7.17): the home screen follows a pull down and springs back; the open list's Mark swells as you pull it back to the top */
.phone.unlocked .phhome,.phone.relock .phhome{translate:0 calc(var(--hpv,0) * 170px);scale:calc(1 - var(--hpv,0) * .08);border-radius:calc(var(--hpv,0) * 38px);overflow:hidden}
.phone.unlocked:not(.hpulling) .phhome{transition:transform .45s var(--slow),translate .55s cubic-bezier(.3,1.5,.5,1),scale .55s cubic-bezier(.3,1.5,.5,1),border-radius .4s var(--v-ease)}
.phone.unlocked.hpulling .ph-lock{opacity:var(--hpv);translate:0 calc((1 - var(--hpv)) * -40px)}
.phone.relock .phhome{transform:translateY(22%) scale(.88);opacity:0;transition:transform .42s cubic-bezier(.5,0,.75,0),opacity .3s .05s}
.phone.relock:not(.hpulling) .ph-lock{animation:rl-time .62s cubic-bezier(.3,1.35,.5,1) .12s both}
.phone.relock .phmark svg{animation:rl-mark .8s cubic-bezier(.3,1.6,.45,1) .18s both}
.phone.relock .nsum{animation:rl-up .55s cubic-bezier(.3,1.3,.5,1) .26s both}
@keyframes rl-time{from{opacity:0;transform:translateY(-44px) scale(.95)}}
@keyframes rl-mark{from{scale:.25;opacity:0;rotate:-14deg}}
@keyframes rl-up{from{opacity:0;transform:translateY(46px)}}
@media (prefers-reduced-motion:reduce){.phone.relock .ph-lock,.phone.relock .phmark svg,.phone.relock .nsum{animation:none}.phone.relock .phhome{transition:none}}
.phone.ex .phmark svg{scale:calc(1 + var(--pull,0) * .45);transform-origin:50% 0}
/* on the phone the app's name and icon sit in the sheet's header, so the project window doesn't repeat its logo */
.ps-bd .pw .hd>img,.ps-bd .pw-gh .top>svg{display:none}
/* a nudged agent's grumble: a tiny aside, not a speech bubble */
.agent .grr{position:absolute;left:50%;bottom:58px;translate:-50% 0;font:700 10.5px/1 var(--v-ui);color:var(--v-ink);background:var(--v-paper);padding:4px 7px;border-radius:99px;white-space:nowrap;box-shadow:0 4px 10px -6px rgba(29,42,47,.5);pointer-events:none;animation:grr 1.8s var(--v-ease) both}
@keyframes grr{0%{opacity:0;scale:.6}12%{opacity:1;scale:1.08}20%{scale:1}80%{opacity:1}100%{opacity:0;translate:-50% -8px}}