/* Chester at /chester. The TENFOUR way of moving through an app (Slacker!: a fixed top bar, the title drops every
   section, a knob turns a section over to its back), in Chester's own palette and type (chester-plus, 6 Oct). */
:root{
  --orange:#F7901E; --orange-dk:#D4720A; --orange-lt:#FBAB50; --ember:#E4601A;
  --navy:#1A1941; --navy-d:#0F0E2A; --indigo:#343370;
  --paper:#FBF6EE; --cream:#FFFCF7; --sand:#E8E1D9; --line:#ECE2D3; --line-2:#E2D4BF;
  --text:#2B2E34; --muted:#6D6A73;
  --wall-1:#F6F0E7; --wall-2:#EDE3D5;
  --oak-1:#E2C49B; --oak-2:#CDA676; --oak-3:#B48A58;
  --serif:"Fraunces",Georgia,serif; --sans:"Source Sans 3",system-ui,-apple-system,sans-serif;
  --gutter:clamp(16px,3vw,48px);
  --phone-h:min(calc(100vh - 116px),860px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--text);background:var(--wall-1);overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--orange-dk);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The studio room: a warm seamless backdrop, a soft lamp behind the phone, a little grain */
.room{position:fixed;inset:0;z-index:0;pointer-events:none;--spot-x:46%;--spot-y:46%;
  background:
    radial-gradient(48% 42% at var(--spot-x) var(--spot-y),rgba(255,190,110,.42),transparent 72%),
    radial-gradient(110% 70% at 30% -10%,rgba(255,251,243,.95),transparent 62%),
    radial-gradient(150% 115% at 50% 38%,transparent 52%,rgba(110,70,30,.24) 100%),
    linear-gradient(180deg,#F4EBE0 0%,#EBDDCB 60%,#DFCDB5 100%)}
.room::after{content:"";position:absolute;inset:0;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.light{position:absolute;inset:0;
  background:repeating-linear-gradient(105deg,rgba(255,252,240,0) 0 90px,rgba(255,252,240,.35) 90px 150px,rgba(255,252,240,0) 150px 240px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}

.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px var(--gutter) 0}
.mark{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--navy);line-height:1}
.mark-1{font:600 18px/1 var(--sans);letter-spacing:.32em;margin-right:-.32em}
.mark-2{font:600 9px/1 var(--sans);letter-spacing:.62em;margin:6px -.62em 0 0}
.who{display:flex;align-items:center;gap:12px}
.pill{font:600 13px/1 var(--sans);color:var(--navy);padding:9px 13px;border-radius:99px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(26,25,65,.18)}
.me{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--navy)}
.dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font:600 14px/1 var(--serif)}

/* Desktop: the phone is the main thing; the back office sits beside it */
.desk{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,580px) auto;justify-content:center;gap:clamp(32px,4vw,72px);align-items:start;
  margin:0 auto;padding:14px var(--gutter) 20px}
.phone-col{display:flex;flex-direction:column;align-items:center;order:2}
.phone{height:var(--phone-h);aspect-ratio:410/880;border-radius:52px;background:#18181B;padding:11px;position:relative;z-index:2;
  box-shadow:inset 0 0 0 2px #3A3A40,0 34px 44px -26px rgba(20,15,40,.55),0 4px 10px rgba(20,15,40,.18)}
.shelf{width:calc(var(--phone-h) * .62);height:20px;border-radius:3px;margin-top:-2px;position:relative;z-index:1;
  background:linear-gradient(180deg,var(--oak-1),var(--oak-2) 55%,var(--oak-3));box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 20px 26px -14px rgba(70,45,15,.45)}
.hint{margin:12px 0 0;font-size:14px;color:var(--muted);text-align:center;max-width:34ch}

/* The shell: TENFOUR's frame around Chester's app */
.shell{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.bar{flex:none;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:6px;padding:26px 12px 8px;
  background:var(--cream);border-bottom:1px solid var(--line);position:relative;z-index:5}
.bar-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--navy);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.bar-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.shell[data-side="back"] .bar-btn{background:var(--navy);color:#fff;box-shadow:none}
.title{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1;padding:2px 0;color:var(--navy);min-width:0}
.t-eyebrow{font:600 9px/1 var(--sans);letter-spacing:.42em;margin-right:-.42em;color:var(--muted)}
.t-name{font:500 21px/1.05 var(--serif);letter-spacing:.02em}
.t-sec{display:flex;align-items:center;gap:6px;font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-top:4px;color:var(--navy);max-width:100%}
.t-sec #secName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-side{color:var(--orange-dk)}
.t-sec svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s;flex:none}
.title[aria-expanded="true"] .t-sec svg{transform:rotate(180deg)}
.knob{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;justify-self:end;
  background:radial-gradient(circle at 35% 30%,#FFE1B5,var(--orange) 55%,var(--orange-dk));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(140,60,0,.35),0 4px 10px -3px rgba(180,80,0,.5);transition:transform .35s}
.knob-face{width:4px;height:14px;border-radius:2px;background:#fff;transform:translateY(-6px)}
.shell[data-side="back"] .knob{transform:rotate(180deg)}

.menu{position:absolute;left:12px;right:12px;top:92px;z-index:6;border-radius:22px;background:#fff;
  box-shadow:0 0 0 1px var(--line),0 24px 50px -18px rgba(26,25,65,.45);padding:12px 8px 10px;max-height:calc(100% - 110px);overflow:auto}
.menu-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 6px 6px 0}
.menu-hello{margin:2px 12px 2px;font:500 18px/1.2 var(--serif);color:var(--navy)}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menu li button{width:100%;display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;text-align:left;padding:8px 10px;border-radius:14px}
.menu li button:hover{background:var(--paper)}
.menu li button[aria-current="true"]{background:#FFF1DC}
.menu .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--paper);color:var(--orange-dk)}
.menu .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.menu b{display:block;font-weight:700;color:var(--navy);font-size:15px;letter-spacing:.02em}
.menu small{display:block;color:var(--muted);font-size:12.5px;line-height:1.3}
.menu .cnt{font-size:12px;color:var(--muted)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:10px 6px 0;padding:4px;border-radius:14px;background:var(--paper)}
.seg button{min-height:38px;border-radius:11px;font-weight:700;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(26,25,65,.15)}

.faces{position:relative;flex:1;min-height:0}
.face{position:absolute;inset:0}
.front-face{overflow:hidden;background:#fff}
.front-face iframe{display:block;border:0;width:390px;transform-origin:0 0;background:#fff}
.back-face{overflow:hidden;background:var(--paper);display:flex;flex-direction:column}

/* Board: a home screen of folders */
.board{padding:14px 14px 18px;overflow:auto;flex:1;min-height:0}
.board h2{font:500 22px/1.15 var(--serif);color:var(--navy);margin:0 0 2px}
.board .sub{margin:0 0 14px;color:var(--muted);font-size:13.5px}
.board h3{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:16px 2px 10px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 8px}
.folder{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;padding:4px 0;border-radius:14px}
.folder:hover .f{transform:translateY(-1px)}
.folder .f{position:relative;width:62px;height:50px;transition:transform .15s}
.folder .f svg.shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(120,60,10,.22))}
.folder .shape .back{fill:#E9893A}
.folder .shape .front{fill:url(#fOrange)}
.folder.project .shape .back{fill:#2B2A63}
.folder.project .shape .front{fill:url(#fNavy)}
.folder .glyph{position:absolute;left:0;right:0;top:15px;display:grid;place-items:center;color:#fff}
.folder .glyph svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.folder .badge{position:absolute;right:-4px;top:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--navy);color:#fff;font:700 10.5px/18px var(--sans);box-shadow:0 0 0 2px var(--paper)}
.folder.project .badge{background:var(--orange-dk)}
.folder span.l{font-size:12px;font-weight:600;color:var(--navy);line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder[aria-current="true"]{background:rgba(247,144,30,.12)}

/* An open folder: tabs across the top, one page under them */
.open{display:flex;flex-direction:column;flex:1;min-height:0}
.tabs{flex:none;display:flex;align-items:flex-end;gap:2px;overflow-x:auto;padding:12px 10px 0;scrollbar-width:none;background:var(--paper)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;min-height:36px;padding:0 14px;border-radius:12px 12px 0 0;background:#EADFCE;color:var(--muted);font-size:13px;font-weight:700;
  box-shadow:inset 0 -1px 0 var(--line-2);display:flex;align-items:center;gap:6px;position:relative}
.tab.home{padding:0 11px}
.tab.home svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.tab.project{background:#DCDAEC}
.tab[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:0 -2px 6px -2px rgba(26,25,65,.15);z-index:1;min-height:40px}
.tab.project[aria-selected="true"]{color:var(--indigo)}
.page{flex:1;min-height:0;overflow:auto;background:#fff;padding:16px 16px 22px;border-top:0;box-shadow:0 -1px 0 var(--line)}
.page h2{font:500 22px/1.15 var(--serif);color:var(--navy);margin:0 0 4px}
.page .sub{margin:0 0 12px;color:var(--muted);font-size:14px}
.page h3{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.go-front{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--orange-dk);margin-bottom:6px}
.now{margin:0;padding-left:18px;font-size:14px;display:grid;gap:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:99px;font:700 14.5px/1 var(--sans);white-space:nowrap}
.btn-orange{background:var(--orange-dk);color:#fff}
.btn-orange:hover{background:#BF650A}

.kinds{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0 0 10px;padding:0}
.kinds legend{font-weight:700;color:var(--navy);font-size:14px;margin-bottom:8px;padding:0}
.kind{min-height:34px;padding:0 13px;border-radius:99px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13.5px;font-weight:700;color:var(--navy)}
.kind[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:none}
form.note-form{display:grid;gap:10px;margin-top:4px}
form.note-form textarea{width:100%;min-height:58px;border:0;border-radius:14px;padding:11px 13px;font:inherit;font-size:15px;color:var(--navy);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);resize:vertical}
.form-foot{display:flex;gap:10px;align-items:center;justify-content:space-between}
.aud{display:flex;gap:3px;border:0;margin:0;padding:3px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.aud label{position:relative;display:flex;align-items:center;min-height:34px;padding:0 11px;border-radius:9px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.aud input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.aud label:has(input:checked){background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(26,25,65,.15)}
.aud label:has(input:focus-visible){outline:3px solid var(--orange-dk);outline-offset:1px}
.aud label.off{opacity:.45;cursor:not-allowed}
.aud-explain{margin:0;font-size:12.5px;color:var(--muted)}
.kind-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.kind-row::-webkit-scrollbar{display:none}
.kind{flex:none}
.sec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sec-head .go-front{flex:none;margin-top:4px}
.about{margin:4px 0 12px;padding:9px 11px;border-radius:12px;background:var(--paper)}
.about summary{cursor:pointer;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.about .now{margin:8px 0 6px}

.notes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.notes li{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--paper)}
.notes .by{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.tag{font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:5px 7px;border-radius:6px;background:#FFF0D9;color:#7A4A12;white-space:nowrap}
.k{display:inline-block;font:700 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:4px 6px;border-radius:5px;background:#E9E7F4;color:var(--indigo);margin-right:6px}
.empty{color:var(--muted);font-style:italic;font-size:14px;margin:0}
.callout{padding:12px 14px;border-radius:12px;background:#F4F1EC;color:var(--muted);font-size:14px;margin:0}

/* Status pieces (shared with the Status folder) */
.facts{display:grid;gap:10px;margin:0}
.facts div{border-top:1px solid var(--line);padding-top:8px}
.facts dt{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.facts dd{margin:0;color:var(--navy);font-weight:600;font-size:15px}
.facts dd small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;border:0}
.chips legend{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding:0}
.chip{min-height:32px;padding:0 11px;border-radius:99px;background:var(--paper);color:var(--navy);font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1px var(--line)}
.chip[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:none}
.chip .n{opacity:.65;font-weight:400;margin-left:5px}
.checkline{font-size:13px;color:var(--muted);margin:0 0 10px}
.feature{border-top:1px solid var(--line)}
.feature>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:11px 2px;align-items:center}
.feature>summary::-webkit-details-marker{display:none}
.feature>summary .name{font-weight:700;color:var(--navy);font-size:15px;display:flex;gap:8px;align-items:center}
.feature>summary .name::before{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .2s;flex:none}
.feature[open]>summary .name::before{transform:rotate(45deg)}
.feature .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted);padding-left:15px}
.bar-p{width:110px;height:7px;border-radius:7px;background:var(--sand);overflow:hidden;align-self:center}
.bar-p i{display:block;height:100%;background:var(--orange-dk)}
.state{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:7px;font:700 11.5px/1 var(--sans);background:var(--sand);color:var(--navy);white-space:nowrap}
.state.s-blocked{background:#F6DCD4;color:#8A2B12}
.state.s-tested,.state.s-tested-in-a-named-environment{background:#E4E8F5;color:var(--indigo)}
.state.s-deployed,.state.s-accepted{background:#E8F0E0;color:#2F5A1A}
.fbody{padding:0 2px 14px 15px;font-size:14px}
.fbody p{margin:0 0 8px}
.fbody h4{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
.gates,.deps,.ev{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--line);display:grid;gap:6px}
.gates li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.gates .why{flex-basis:100%;color:#8A2B12;font-size:13px}
.who-tag{font-size:12.5px;color:var(--muted)}
.deps summary{cursor:pointer;color:var(--navy);font-weight:700}

.me{background:none;border:0;cursor:pointer;padding:4px 6px 4px 4px;border-radius:99px}
.me:hover{background:rgba(255,255,255,.6)}

/* Talk back: always there under the title while you use the app */
.talk{flex:none;display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--cream);border-bottom:1px solid var(--line);position:relative;z-index:4}
.talk .mic{width:38px;height:38px;flex:none}
.talk .say{flex:1;min-width:0;height:38px;border-radius:99px;padding:0 14px;text-align:left;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk .quick{width:36px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--navy);flex:none}
.talk .quick:hover{background:var(--paper)}
.talk .quick svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.mic{border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,var(--orange-lt),var(--orange-dk));box-shadow:0 3px 8px -3px rgba(180,80,0,.6)}
.mic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.mic.big{width:48px;height:48px;flex:none}
.mic.big svg{width:22px;height:22px}
.mic.on{background:#C8331B;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(200,51,27,.18)}}

/* The phone's talk sheet rises over the app */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:7;max-height:88%;overflow:auto;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -18px 40px -18px rgba(26,25,65,.45)}
.sheet-in{padding:14px 16px calc(18px + env(safe-area-inset-bottom))}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.sheet-head h2{font:500 21px/1.1 var(--serif);color:var(--navy);margin:0}
.linkish{color:var(--orange-dk);font-weight:700;font-size:14px;padding:6px 2px}

/* The composer */
.composer{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:6px 0 4px;min-width:0}
.composer>*{min-width:0}
.sheet-in{overflow-x:hidden}
.form-foot{flex-wrap:wrap}
.inputrow{display:flex;gap:10px;align-items:center}
.inputrow textarea{flex:1;min-width:0;min-height:52px;border:0;border-radius:14px;padding:11px 13px;font:inherit;font-size:15px;color:var(--navy);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);resize:vertical}
.recbar{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--paper);font-size:14px;color:var(--navy)}
.recbar.on{background:#FCE6E1}
.recbar audio{height:34px;flex:1;min-width:0;width:100%}
.dotlive{width:9px;height:9px;border-radius:50%;background:#C8331B}
.roles{display:flex;flex-wrap:wrap;gap:4px 12px;margin:2px 0 10px;font-size:13px;color:var(--muted)}
.roles b{color:var(--navy);font-weight:700}
.roles em{font-style:normal;font:700 10px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 6px;border-radius:5px;background:var(--sand)}
.signin-cta{padding:14px;border-radius:14px;background:var(--paper);display:grid;gap:10px;justify-items:start}
.signin-cta p{margin:0;color:var(--navy);font-size:15px}
.btn-line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn.sm{min-height:34px;padding:0 13px;font-size:13px}
.k-like{background:#E8F0E0;color:#2F5A1A}.k-dislike{background:#F6DCD4;color:#8A2B12}.k-better{background:#FFF0D9;color:#7A4A12}
.k-broken{background:#F3D7E4;color:#7B1E4A}.k-idea{background:#E9E7F4;color:var(--indigo)}
.notes li{flex-direction:column;align-items:stretch}
.nt{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.notes audio{width:100%;height:34px;margin-top:6px}
.reply{margin:6px 0 0;padding:6px 10px;border-left:3px solid var(--orange);font-size:14px;background:#fff;border-radius:0 8px 8px 0}
.owner-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.owner-tools .reply-form{flex:1 1 220px}
.reply-form{display:flex;gap:6px}
.reply-form input{flex:1;min-width:0;height:34px;border:0;border-radius:10px;padding:0 10px;font:inherit;font-size:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.status-row{display:flex;gap:4px}

/* The Chester AI desk: its own colour, same family */
.folder.ai .shape .back{fill:#127C8F}
.folder.ai .shape .front{fill:url(#fTeal)}
.tab.ai{background:#D3ECEF}
.tab.ai[aria-selected="true"]{color:#0E6676}
.ai-eyebrow{margin:0 0 6px;font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#0E6676}
.ai-desk h3{color:#0E6676}
.qs{margin:0;padding-left:20px;display:grid;gap:5px;font-size:14px}

/* The owner's readout */
.lines{padding:12px 14px;border-radius:14px;background:#F4F1FA;display:grid;gap:4px;margin-bottom:6px}
.lines p{margin:0;color:var(--navy);font-size:15px}
.lines p:first-child{font-weight:700}
.tally{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.tally li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* Account */
.acct{border:0;border-radius:22px;padding:0;width:min(420px,calc(100vw - 32px));box-shadow:0 30px 70px -20px rgba(26,25,65,.5)}
.acct::backdrop{background:rgba(15,14,42,.35)}
.acct-in{padding:24px}
.acct h2{font:500 26px/1.1 var(--serif);color:var(--navy);margin:0 0 4px}
.acct .sub{color:var(--muted);margin:0 0 14px;font-size:14px}
.acct form{display:grid;gap:12px}
.acct label{display:grid;gap:5px;font-weight:700;font-size:14px;color:var(--navy)}
.acct input{height:46px;border:0;border-radius:12px;padding:0 13px;font:inherit;font-size:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.acct .alt{margin:14px 0 0;font-size:14px;color:var(--muted)}
.acct .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.err{margin:0;color:#8A2B12;font-size:14px}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:50;background:var(--navy);color:#fff;padding:12px 18px;border-radius:14px;font-weight:600;font-size:14px;transition:all .25s;pointer-events:none;max-width:calc(100vw - 32px)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* Desktop tabs over the panel */
.ptabs{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.ptabs button{min-height:40px;padding:0 16px;border-radius:99px;font-weight:700;font-size:14px;color:var(--navy);background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--line-2)}
.ptabs button[aria-selected="true"]{background:var(--navy);color:#fff;box-shadow:none}
.ptabs button.ai[aria-selected="true"]{background:#0E6676}
.page.solo{border-radius:24px;box-shadow:none}

/* Desktop panel */
.panel-col{order:1;min-width:0;display:flex;flex-direction:column;height:calc(var(--phone-h) + 18px)}
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:6px 0 10px}
.panel-col h1{font:400 34px/1.05 var(--serif);letter-spacing:-.02em;color:var(--navy);margin:4px 0 14px}
.desk-board{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--paper);
  box-shadow:0 0 0 1px var(--line),0 24px 50px -34px rgba(60,40,10,.45)}
.desk-board .board{padding:22px 24px}
.desk-board .grid{grid-template-columns:repeat(auto-fill,104px);gap:18px 12px}
.desk-board .folder span.l{font-size:13px}
.desk-board .page{padding:22px 26px 28px}
.desk-board .tabs{padding:14px 14px 0}

.note{position:relative;z-index:1;padding:0 var(--gutter) 18px;font-size:12.5px;color:var(--muted);max-width:1480px;margin:0 auto}

/* An editing studio, on every screen. Chester's app on an iPhone in the middle, the tools floating around it,
   the sections laid out like clips on a timeline. */
@media all{
  body{background:#EDE2D4}
  .desk{display:block;padding:0;max-width:none}
  .phone-col{display:block}
  .phone{height:100vh;height:100dvh;aspect-ratio:auto;width:100%;border-radius:0;padding:0;box-shadow:none;background:none}
  .shell{border-radius:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;color:var(--navy);overflow:hidden;background:transparent}
  .talk{display:none!important}

  /* Studio bar */
  .bar{background:transparent;border-bottom:0;padding:max(10px,env(safe-area-inset-top)) 12px 4px;z-index:6}
  .bar-btn{background:linear-gradient(180deg,#fff,#F7F0E6);color:var(--navy);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(150,110,60,.14),0 6px 14px -8px rgba(80,45,10,.45)}
  .shell[data-side="back"] .bar-btn{background:var(--navy);color:#fff}
  .title,.t-sec{color:var(--navy)}
  .t-eyebrow{color:var(--muted)}
  .t-side{color:var(--orange-dk)}
  .menu{top:calc(70px + env(safe-area-inset-top))}

  /* The phone is the hero; one slim rail of crystal bubbles floats on its right edge */
  .faces{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:4px 0 6px 12px;min-height:0}
  .front-face{position:relative;inset:auto;flex:none;
    height:min(100%,calc((100vw - 70px) * 844 / 390));aspect-ratio:390/844;
    border-radius:36px;border:7px solid #0A0A0C;background:#fff;overflow:hidden;
    box-shadow:0 0 0 1px #4A4A50,0 0 0 2.5px #1B1B1E,0 26px 40px -22px rgba(60,30,5,.6),0 60px 90px -40px rgba(60,30,5,.35),0 0 110px -10px rgba(247,144,30,.35)}
  .front-face::after{content:"";position:absolute;top:6px;left:50%;width:30%;height:15px;margin-left:-15%;border-radius:12px;background:#0A0A0C;z-index:2;pointer-events:none}
  .bubbles.rail{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:13px}
  .bubbles .bub{--c:var(--navy);--g:247 144 30;position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--c);
    background:radial-gradient(circle at 32% 26%,#fff 0%,#FBF6EE 48%,#E9DDCB 100%);
    box-shadow:inset 0 1px 1px #fff,inset 0 -3px 6px rgba(120,80,30,.14),0 8px 16px -8px rgba(80,45,10,.5),0 0 22px 3px rgb(var(--g) / .4);
    transition:transform .18s,box-shadow .18s}
  .bubbles .bub::before{content:"";position:absolute;inset:-12px;border-radius:50%;z-index:-1;pointer-events:none;
    background:radial-gradient(circle,rgb(var(--g) / .34),transparent 68%)}
  .bub svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .bub:active{transform:scale(.92)}
  .bubbles .bub.rec{--g:247 144 30;color:#fff;background:radial-gradient(circle at 35% 28%,#FFD08A,var(--orange) 58%,var(--orange-dk));
    box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -3px 6px rgba(140,60,0,.3),0 8px 16px -8px rgba(160,70,0,.7),0 0 26px 5px rgb(var(--g) / .55)}
  .bubbles .bub.rec.on{--g:200 51 27;background:radial-gradient(circle at 35% 28%,#FF8A73,#C8331B);animation:pulse 1.3s ease-in-out infinite}
  .bub.k-like{--c:#3F7A22;--g:120 190 80}.bub.k-dislike{--c:#A33A1C;--g:235 120 90}.bub.k-better{--c:#B0620A;--g:247 170 50}
  .bub.k-broken{--c:#9A2860;--g:225 100 160}.bub.k-idea{--c:#4A47A0;--g:140 125 235}.bub.notes-bub{--c:var(--navy);--g:120 110 200}
  .bub .n{position:absolute;right:-4px;top:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--orange-dk);color:#fff;font:700 10px/16px var(--sans)}
  .bub .n:empty{display:none}

  /* Timeline of sections */
  .timeline{display:block;position:relative;padding:8px 0 max(10px,env(safe-area-inset-bottom))}
  .timeline .track{display:flex;gap:5px;overflow-x:auto;padding:0 12px;scrollbar-width:none;scroll-snap-type:x proximity}
  .timeline .track::-webkit-scrollbar{display:none}
  .clip{flex:none;scroll-snap-align:center;position:relative;height:34px;padding:0 11px;border-radius:17px;display:flex;align-items:center;gap:6px;
    font:700 12px/1 var(--sans);color:var(--navy);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,250,243,.75));
    box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(150,110,60,.12),0 6px 12px -8px rgba(80,45,10,.4)}
  .clip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--orange-dk)}
  .clip[aria-current="true"]{color:#1A1941;background:linear-gradient(180deg,#FFD08A,var(--orange));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 16px -8px rgba(200,100,0,.7)}
  .clip[aria-current="true"] svg{color:#1A1941}
  .clip .dots{position:absolute;right:7px;top:5px;display:flex;gap:2px}
  .clip .dots i{width:4px;height:4px;border-radius:50%;background:var(--orange-dk)}
  .clip[aria-current="true"] .dots i{background:#1A1941}

  /* Back office over the studio */
  .back-face{top:0;padding-top:calc(70px + env(safe-area-inset-top));z-index:5;background:var(--paper);color:var(--text)}
  .shell[data-side="back"] .timeline,.shell[data-side="back"] .bubbles{visibility:hidden}

  /* The crystal: a small frosted card, the app still showing through */
  .sheet.crystal{left:14px;right:62px;bottom:calc(58px + env(safe-area-inset-bottom));max-height:none;overflow:visible;z-index:8;border-radius:22px;
    background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.55),0 20px 44px -16px rgba(0,0,0,.55);padding:10px}
  .crystal-form{display:grid;gap:8px;margin:0}
  .cry-row{display:flex;align-items:center;gap:8px;min-width:0}
  .cry-row.cry-top{justify-content:space-between}
  .kinds-row{display:flex;gap:3px;flex:none}
  .cry-row.cry-top{gap:6px}
  .ck{width:27px;height:27px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(26,25,65,.1);color:var(--navy)}
  .ck svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ck[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:none}
  .ck.k-like[aria-pressed="true"]{background:#2F5A1A}.ck.k-dislike[aria-pressed="true"]{background:#8A2B12}.ck.k-better[aria-pressed="true"]{background:#B4600A}
  .ck.k-broken[aria-pressed="true"]{background:#7B1E4A}.ck.k-idea[aria-pressed="true"]{background:var(--indigo)}
  .aud.mini{padding:2px;border-radius:10px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(26,25,65,.08)}
  .aud.mini{flex:none}
  .aud.mini label{min-height:25px;padding:0 6px;font-size:11px;border-radius:8px;white-space:nowrap}
  .x{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1;color:var(--navy);background:rgba(255,255,255,.5);flex:none}
  .cmic,.csend{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
  .cmic{color:#fff;background:radial-gradient(circle at 35% 28%,#FFC77A,var(--orange) 60%,var(--orange-dk))}
  .cmic.on{background:#C8331B;animation:pulse 1.3s ease-in-out infinite}
  .cmic svg,.csend svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .csend{color:#fff;background:var(--navy)}
  .crystal-form input[name="text"]:not([type="hidden"]){flex:1;min-width:0;height:40px;border:0;border-radius:20px;padding:0 14px;font:inherit;font-size:15px;color:var(--navy);
    background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(26,25,65,.1)}
  .cry-rec{flex:1;min-width:0;height:40px;border-radius:20px;display:flex;align-items:center;gap:8px;padding:0 12px;background:rgba(255,255,255,.7);color:var(--navy)}
  .cry-rec .wave{display:flex;gap:2px;align-items:center;flex:1;overflow:hidden}
  .cry-rec .wave i{width:3px;height:12px;border-radius:2px;background:#C8331B;opacity:.7;animation:wv 1s ease-in-out infinite}
  .cry-rec .wave i:nth-child(odd){animation-delay:-.4s}.cry-rec .wave i:nth-child(3n){animation-delay:-.7s}
  @keyframes wv{50%{height:4px}}
  .cry-clip{flex:1;min-width:0;display:flex;align-items:center;gap:4px}
  .cry-clip audio{flex:1;min-width:0;height:36px}
  .cry-msg{margin:0;flex:1;color:var(--navy);font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .bub,.cmic,.cry-rec .wave i{animation:none!important}
  .mic.on{animation:none}
  #toast{transition:none}
  .knob,.t-sec svg,.feature>summary .name::before{transition:none}
}

.pill:empty,.note span:empty{display:none}
.note:has(span:empty){display:none}
.sec-head{align-items:center}
.sec-head h2{margin:0}
.composer .kind{min-height:32px;padding:0 12px;font-size:13px}
.desk-board .page{padding:20px 22px 24px}
.desk-board .board{display:grid;gap:18px;align-content:start}
.board .grid + .grid{padding-top:16px;border-top:1px solid var(--line)}
.ai-desk .qs{margin:4px 0 14px;color:var(--navy)}
.about summary{font-weight:700;color:var(--navy)}
.lines p:first-child{font-weight:700}

@media all{
  .cry-top .x{position:absolute;top:-10px;right:-10px;width:26px;height:26px;background:rgba(255,255,255,.85);box-shadow:0 4px 10px -4px rgba(0,0,0,.4),inset 0 0 0 1px rgba(26,25,65,.1)}
  .cry-row.cry-top{justify-content:flex-start}
  .cry-top .aud.mini{margin-left:auto}
}

/* Phone and tablet: the studio is the whole screen */
@media (max-width:999px){
  .top,.panel-col,.shelf,.desk-talk,.note{display:none!important}
}

/* TENFOUR controls: Ryan's own style for every editing tool (the TENFOUR plaque: black ink, a cream face, a red
   signal glow), on top of Chester's app. Phone and desktop alike. */
:root{--t4-ink:#1A1A1D;--t4-ink2:#26262B;--t4-cream:#F4F2EC;--t4-red:#E0392C;--t4-glow:255 74 58;--t4-muted:#9A968E;
  --t4-sans:system-ui,-apple-system,"SF Pro Display","Helvetica Neue","Source Sans 3",Arial,sans-serif}
.t4-glass{background:linear-gradient(180deg,rgba(38,38,43,.9),rgba(22,22,25,.92));color:var(--t4-cream)}
@media all{
  .room{background:
    radial-gradient(46% 40% at var(--spot-x) var(--spot-y),rgba(255,214,160,.5),transparent 72%),
    radial-gradient(110% 70% at 30% -10%,rgba(255,253,248,.9),transparent 62%),
    radial-gradient(150% 115% at 50% 38%,transparent 50%,rgba(60,50,40,.28) 100%),
    linear-gradient(180deg,#ECE8E0 0%,#DEDAD0 60%,#CFCAC0 100%)}

  /* Bar: glossy black buttons, a radio knob with a red mark */
  .bar-btn{background:radial-gradient(circle at 35% 25%,#4A4A50,var(--t4-ink) 62%,#0E0E10);color:var(--t4-cream);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.5),0 8px 16px -8px rgba(0,0,0,.6)}
  .shell[data-side="back"] .bar-btn{background:var(--t4-red);color:#fff}
  .knob{background:radial-gradient(circle at 35% 28%,#55555C,var(--t4-ink) 60%,#0B0B0D);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 4px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.5),0 8px 16px -8px rgba(0,0,0,.6)}
  .knob-face{background:var(--t4-red);box-shadow:0 0 8px rgb(var(--t4-glow) / .9)}
  .t-eyebrow{color:var(--t4-red);font-family:var(--t4-sans);font-weight:800;letter-spacing:.38em}
  .t-name{font:800 22px/1.05 var(--t4-sans);letter-spacing:-.01em;color:var(--t4-ink)}
  .t-sec{font-family:var(--t4-sans);font-weight:700;color:var(--t4-ink)}
  .t-side{color:var(--t4-red)}

  /* Bubbles: glossy black orbs, cream icons, each with its own glow; Rec is the red signal */
  .bubbles .bub{color:var(--t4-cream);
    background:radial-gradient(circle at 32% 24%,#55555C 0%,#2A2A2F 42%,var(--t4-ink) 70%,#0C0C0E 100%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -3px 6px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.45),0 10px 18px -8px rgba(0,0,0,.6),0 0 22px 3px rgb(var(--g) / .45)}
  .bubbles .bub::before{background:radial-gradient(circle,rgb(var(--g) / .4),transparent 68%)}
  .bub.k-like{--g:120 200 90}.bub.k-dislike{--g:240 120 90}.bub.k-better{--g:250 175 60}.bub.k-broken{--g:235 95 170}.bub.k-idea{--g:140 130 255}.bub.notes-bub{--g:200 196 186}
  .bub.k-like svg{color:#B9E79A}.bub.k-dislike svg{color:#FFB3A0}.bub.k-better svg{color:#FFD58A}.bub.k-broken svg{color:#FFA9D6}.bub.k-idea svg{color:#C9C3FF}
  .bubbles .bub.rec{--g:var(--t4-glow);color:#fff;background:radial-gradient(circle at 50% 50%,#FF6B5E 0 22%,var(--t4-red) 23% 34%,#1A1A1D 35% 47%,var(--t4-red) 48% 56%,#1A1A1D 57%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 0 0 1px rgba(0,0,0,.5),0 10px 18px -8px rgba(0,0,0,.6),0 0 26px 6px rgb(var(--g) / .55)}
  .bubbles .bub.rec svg{display:none}
  .bubbles .bub.rec.on{--g:var(--t4-glow);background:radial-gradient(circle at 50% 50%,#fff 0 18%,var(--t4-red) 19%)}
  .bub .n{background:var(--t4-red);box-shadow:0 0 8px rgb(var(--t4-glow) / .8)}

  /* Timeline: black pills, the current one cream with a red signal dot */
  .clip{font:700 12px/1 var(--t4-sans);color:var(--t4-cream);background:linear-gradient(180deg,#2C2C31,var(--t4-ink));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 6px 12px -8px rgba(0,0,0,.6)}
  .clip svg{color:#BDB8AE}
  .clip[aria-current="true"]{color:var(--t4-ink);background:var(--t4-cream);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.15),0 0 18px rgb(var(--t4-glow) / .35)}
  .clip[aria-current="true"] svg{color:var(--t4-red)}
  .clip .dots i,.clip[aria-current="true"] .dots i{background:var(--t4-red)}

  /* The card: black glass, cream type */
  .sheet.crystal{background:rgba(24,24,27,.82);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);color:var(--t4-cream);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07),0 22px 44px -16px rgba(0,0,0,.7)}
  .crystal-form{font-family:var(--t4-sans)}
  .ck{background:rgba(255,255,255,.07);color:var(--t4-cream);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .ck.k-like{color:#B9E79A}.ck.k-dislike{color:#FFB3A0}.ck.k-better{color:#FFD58A}.ck.k-broken{color:#FFA9D6}.ck.k-idea{color:#C9C3FF}
  .ck[aria-pressed="true"],.ck.k-like[aria-pressed="true"],.ck.k-dislike[aria-pressed="true"],.ck.k-better[aria-pressed="true"],.ck.k-broken[aria-pressed="true"],.ck.k-idea[aria-pressed="true"]{background:var(--t4-cream);color:var(--t4-ink);box-shadow:0 0 14px rgba(255,255,255,.18)}
  .aud.mini{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .aud.mini label{color:var(--t4-muted)}
  .aud.mini label:has(input:checked){background:var(--t4-cream);color:var(--t4-ink);box-shadow:none}
  .x{color:var(--t4-cream);background:rgba(255,255,255,.12)}
  .cry-top .x{background:#2A2A2F;color:var(--t4-cream);box-shadow:0 4px 10px -4px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12)}
  .cmic{color:#fff;background:radial-gradient(circle at 35% 28%,#FF7A6C,var(--t4-red) 60%,#A8241B);box-shadow:0 0 16px rgb(var(--t4-glow) / .45)}
  .cmic.on{background:#fff;color:var(--t4-red)}
  .csend{color:var(--t4-ink);background:var(--t4-cream);box-shadow:0 0 14px rgba(255,255,255,.15)}
  .crystal-form input[name="text"]:not([type="hidden"]){color:var(--t4-cream);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .crystal-form input[name="text"]::placeholder{color:#8F8B84}
  .cry-rec{background:rgba(255,255,255,.08);color:var(--t4-cream)}
  .cry-rec .wave i{background:var(--t4-red);opacity:.9}
  .cry-msg{color:var(--t4-cream)}
  .crystal-form audio{filter:invert(.88) hue-rotate(180deg)}
  .sheet .btn-orange,.desk-talk .btn-orange{background:var(--t4-cream);color:var(--t4-ink);box-shadow:0 0 16px rgba(255,255,255,.18)}
  .cry-chip{background:rgba(255,74,58,.14);color:#FFB3A0}
  .cry-chip .play{background:var(--t4-cream);color:var(--t4-red)}
  .cry-chip .play.on{background:var(--t4-red);color:#fff}
  .cry-chip .x{background:#2A2A2F;color:var(--t4-cream)}
  .crystal-form :focus-visible,.bub:focus-visible,.clip:focus-visible{outline-color:var(--t4-red)}
}

/* Phone and tablet: the phone a little smaller, centred, the bubbles in their own lane on the right */
@media (max-width:999px){
  .faces{justify-content:center;padding:10px 64px 12px 18px}
  .front-face{height:min(94%,calc((100vw - 104px) * 844 / 390))}
  .bubbles.rail{right:12px}
  .sheet.crystal{left:16px;right:16px}
}

/* Desktop: a studio office. A backlit StokeHouse plaque over the top, a monitor and the phone standing on a floating oak
   shelf (tops lined up, both on the shelf), the bubbles beside the phone, and the note bar across the whole width. */
.desk-talk,.stand{display:none}
.ck-l{display:none}
@media (min-width:1000px){
  :root{--hdr:84px;--barh:58px;--shelf-h:34px;--sink:8px;
    --ph:clamp(400px,calc(100vh - 84px - 58px - 34px - 70px - 28px - 32px),700px);
    --pstand:clamp(34px,calc(var(--ph) * .08),56px);
    --pfh:calc(var(--ph) - var(--pstand));
    --pw:calc(var(--pfh) * 390 / 844);
    --pcol:calc(var(--pw) + 200px);
    --stand:clamp(52px,calc(var(--ph) * .12),84px);
    --deskw:min(calc(100vw - 2 * var(--gutter)),1640px)}
  .room{--spot-x:calc(50% + (var(--deskw) - var(--pcol)) / 2);--spot-y:46%}
  .room::before{content:"";position:absolute;inset:0;
    background:radial-gradient(30% 34% at 18% 30%,rgba(255,236,205,.55),transparent 70%),radial-gradient(26% 30% at 50% 6%,rgba(255,226,180,.55),transparent 70%)}
  .light{opacity:.5}
  .note{display:none!important}

  /* The plaque, centred over the room, backlit */
  .top{width:var(--deskw);margin:0 auto;padding:14px 0 0;height:var(--hdr);display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
  .top::before{content:""}
  .who{justify-self:end;margin-top:8px}
  .mark{position:relative;padding:12px 30px 11px;border-radius:12px;color:var(--t4-ink);background:linear-gradient(180deg,#FBF9F4,var(--t4-cream) 60%,#E9E5DC);
    box-shadow:inset 0 0 0 3px var(--t4-ink),inset 0 0 0 5px #3A3A40,inset 0 2px 0 6px rgba(255,255,255,.5),0 10px 18px -10px rgba(0,0,0,.6),0 0 46px 10px rgba(255,190,110,.55),0 0 110px 30px rgba(255,170,80,.25)}
  .mark-1{font:900 20px/1 var(--t4-sans);letter-spacing:.3em;margin-right:-.3em;text-shadow:0 1px 0 rgba(255,255,255,.7),0 0 1px rgba(0,0,0,.4)}
  .mark-2{font:800 9px/1 var(--t4-sans);letter-spacing:.6em;margin:7px -.6em 0 0;color:var(--t4-red);text-shadow:0 0 8px rgb(var(--t4-glow) / .6)}
  .mark::before,.mark::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9A968E,#3A3A40)}
  .mark::before{left:11px}.mark::after{right:11px}
  .me{color:var(--t4-ink)}
  .dot{background:var(--t4-ink);color:var(--t4-cream);box-shadow:0 0 0 2px var(--t4-cream),0 0 14px rgba(255,180,100,.6)}

  .desk{display:grid;width:var(--deskw);margin:0 auto;padding:0 0 30px;
    grid-template-columns:minmax(0,1fr) var(--pcol);row-gap:0;column-gap:clamp(64px,6vw,120px);
    grid-template-rows:var(--barh) var(--ph) var(--shelf-h) auto;align-items:stretch;justify-content:stretch}
  .phone-col,.panel-col{display:contents}

  /* Glowing wall text */
  #deskTitle{grid-column:1;grid-row:1;justify-self:center;align-self:center;margin:0 0 10px;font:800 30px/1 var(--t4-sans);letter-spacing:-.01em;color:var(--t4-ink);
    text-shadow:0 0 16px rgba(255,180,95,.95),0 0 38px rgba(255,150,60,.55)}
  .title .t-name,.title .t-sec{text-shadow:0 0 14px rgba(255,180,95,.9),0 0 32px rgba(255,150,60,.45)}

  /* The phone */
  .phone{grid-column:2;grid-row:1 / 3;height:auto;width:auto;aspect-ratio:auto;padding:0;border-radius:0;background:none;box-shadow:none;z-index:2;transform:translateY(var(--sink))}
  .shell{height:100%;overflow:visible;grid-template-rows:var(--barh) var(--ph)}
  .timeline,.sheet{display:none!important}
  .bar{padding:0 calc((var(--pcol) - var(--pw)) / 2) 10px;align-items:center}
  .menu{top:calc(var(--barh) + 4px);left:50%;right:auto;width:340px;margin-left:-170px}
  .faces{display:flex;justify-content:center;align-items:flex-end;padding:0}
  .front-face{height:var(--ph);z-index:2;border-width:9px;border-radius:44px}
  .faces::after{content:"";position:absolute;z-index:1;left:50%;bottom:-6px;width:calc(var(--pw) * 1.02);height:14px;transform:translateX(-50%);
    border-radius:50%;background:radial-gradient(closest-side,rgba(30,15,0,.6),rgba(30,15,0,0));pointer-events:none}
  .bubbles.rail{left:calc(50% + var(--pw) / 2 + 36px);right:auto;gap:clamp(10px,calc(var(--ph) / 36),20px)}
  .bubbles .bub{width:clamp(38px,calc(var(--ph) / 13),50px);height:clamp(38px,calc(var(--ph) / 13),50px)}
  .bubbles .bub svg{width:21px;height:21px}
  .bubbles .bub:hover{transform:translateY(-2px);box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -3px 6px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.45),0 14px 22px -8px rgba(0,0,0,.6),0 0 32px 7px rgb(var(--g) / .6)}
  .bub .n{right:-3px;top:-3px}

  /* The monitor: landscape, black bezel, a chin, on a stand */
  .board-obj{grid-column:1;grid-row:2;min-height:0;margin-bottom:var(--stand);position:relative;z-index:2;display:flex;flex-direction:column;
    padding:12px 12px 26px;border-radius:18px;transform:translateY(var(--sink));
    background:linear-gradient(180deg,#2E2E33,var(--t4-ink) 40%,#111113);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.5),0 30px 50px -24px rgba(30,15,0,.65),0 0 120px -20px rgba(255,190,110,.45)}
  .board-obj::before{content:"";position:absolute;left:50%;bottom:9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--t4-red);box-shadow:0 0 8px rgb(var(--t4-glow) / .9)}
  .board-obj::after{content:"";position:absolute;inset:12px 12px 26px;border-radius:6px;pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 100%)}
  .board-obj .ptabs{margin:0;padding:14px 16px 12px;border-bottom:1px solid var(--line);background:#FFFDF9;border-radius:6px 6px 0 0}
  .ptabs button{font-family:var(--t4-sans);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
  .ptabs button[aria-selected="true"]{background:var(--t4-ink);color:var(--t4-cream);box-shadow:0 0 12px rgba(0,0,0,.2)}
  .ptabs button.ai[aria-selected="true"]{background:#0E6676;color:#fff}
  .desk-board{flex:1;min-height:0;overflow:auto;border-radius:0 0 6px 6px;background:#FBF7F0;box-shadow:none}
  .desk-board>.page.solo{background:transparent}
  .stand{display:block;position:absolute;left:50%;top:100%;width:110px;height:var(--stand);transform:translateX(-50%);pointer-events:none}
  .stand::before{content:"";position:absolute;left:50%;top:0;bottom:8px;width:64px;transform:translateX(-50%);
    background:linear-gradient(90deg,#141416,#3A3A40 45%,#1E1E22);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
  .stand::after{content:"";position:absolute;left:50%;bottom:0;width:230px;height:10px;transform:translateX(-50%);border-radius:6px 6px 3px 3px;
    background:linear-gradient(180deg,#4A4A50,var(--t4-ink));box-shadow:0 6px 10px -4px rgba(30,15,0,.6),0 10px 16px 0 rgba(30,15,0,.25)}
  .empty-desk{display:grid;justify-items:center;gap:10px;text-align:center;padding:9vh 20px 20px;color:var(--muted);font-size:15px}
  .empty-desk .orb{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--t4-cream);
    background:radial-gradient(circle at 32% 24%,#55555C,var(--t4-ink) 70%);box-shadow:0 10px 20px -10px rgba(0,0,0,.6),0 0 26px 4px rgba(255,170,80,.3)}
  .empty-desk .orb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .empty-desk b{color:var(--t4-ink);font:800 19px/1.2 var(--t4-sans)}
  .empty-desk p{margin:0}

  /* The shelf: thick floating oak, a lit top surface, grain on the front, a warm light washing the wall under it */
  .shelf{display:block;grid-column:1 / -1;grid-row:3;width:auto;height:var(--shelf-h);margin:0 calc(-1 * min(56px, var(--gutter) - 6px));border-radius:5px;position:relative;z-index:1;
    background:
      linear-gradient(180deg,#F7E8CF 0,#EFD9B6 60%,#E6CA9F 100%) 0 0/100% 11px no-repeat,
      linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)) 0 11px/100% 2px no-repeat,
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2400' height='40' preserveAspectRatio='none'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.0035 .42' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .26  0 0 0 0 .1  0 0 0 1.6 -.55'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") 0 11px/2400px 100% no-repeat,
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2400' height='12' preserveAspectRatio='none'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.006 .9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .32  0 0 0 0 .12  0 0 0 .35 -.05'/></filter><rect width='100%' height='100%' filter='url(%23t)'/></svg>") 0 0/2400px 11px no-repeat,
      linear-gradient(180deg,#DDB98A 11px,#CFA673 50%,#B98D59 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(90,55,20,.35),0 2px 1px rgba(90,55,20,.25),0 24px 28px -16px rgba(40,20,0,.55),0 60px 70px -40px rgba(40,20,0,.35)}
  .shelf::before{content:"";position:absolute;left:4%;right:4%;top:100%;height:92px;pointer-events:none;
    background:radial-gradient(60% 100% at 50% 0,rgba(255,196,120,.55),rgba(255,196,120,0) 70%)}
  .shelf::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;border-radius:2px;background:#FFE0B0;box-shadow:0 0 10px 2px rgba(255,200,130,.85)}

  /* The note bar: dark, across the whole room */
  .desk-talk{display:block;grid-column:1 / -1;grid-row:4;margin-top:28px;position:relative;z-index:2;padding:12px 14px;border-radius:24px;
    background:linear-gradient(180deg,rgba(40,40,45,.96),rgba(22,22,25,.97));color:var(--t4-cream);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.4),0 24px 44px -20px rgba(20,10,0,.7),0 0 80px -24px rgba(255,170,80,.5)}
  .desk-talk .crystal-form{gap:0}
  .desk-talk .cry-row{gap:12px}
  .desk-talk .kinds-row{gap:6px;flex:none}
  .desk-talk .sep{width:1px;align-self:stretch;margin:4px 4px;background:rgba(255,255,255,.12)}
  .desk-talk .ck{width:auto;height:40px;padding:0 15px 0 12px;border-radius:20px;display:inline-flex;align-items:center;gap:7px;font:700 13.5px/1 var(--t4-sans)}
  .desk-talk .ck svg{width:16px;height:16px}
  .desk-talk .ck-l{display:inline;color:var(--t4-cream)}
  .desk-talk .ck[aria-pressed="true"] .ck-l{color:var(--t4-ink)}
  .desk-talk .x[data-sheet]{display:none}
  .desk-talk .cmic,.desk-talk .csend{width:46px;height:46px}
  .desk-talk .crystal-form input[name="text"]:not([type="hidden"]),.desk-talk .cry-rec{height:46px;border-radius:23px;font-size:15.5px}
  .desk-talk .aud.mini{padding:3px;border-radius:14px}
  .desk-talk .aud.mini label{min-height:38px;padding:0 13px;font-size:13px;border-radius:11px}
  .desk-talk>.cry-row{justify-content:center}
  .cry-chip{flex:none;position:relative;display:flex;align-items:center;height:46px;padding:0 5px;border-radius:23px}
  .cry-chip .play{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
  .cry-chip .play svg{width:14px;height:14px;fill:currentColor;stroke:none}
  .cry-chip .x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;font-size:14px;box-shadow:0 2px 6px -2px rgba(0,0,0,.5)}
  #toast{background:var(--t4-ink);color:var(--t4-cream)}
}
@media (min-width:1000px) and (max-height:820px){
  .bar{padding:0 calc((var(--pcol) - var(--pw)) / 2 - 56px) 10px}
}
@media (min-width:1000px) and (max-width:1380px){
  .desk-talk .ck{width:40px;padding:0;justify-content:center}
  .desk-talk .ck-l{display:none}
}

/* Desktop, ninth pass: the phone on its own stand, a solid walnut shelf, the bar's buttons gone, a light/dark switch */
.pstand,.pstand-lip,.pstand-foot,.theme-seg{display:none}
@media (min-width:1000px){
  .bar-btn,.knob{visibility:hidden}
  .faces{padding-bottom:var(--pstand)}
  .front-face{height:var(--pfh)}
  .bubbles.rail{top:calc(50% - var(--pstand) / 2)}
  .faces::after{bottom:-5px;width:200px}

  /* The phone stand: a cradle lip holding the phone, a neck, a weighted foot */
  .pstand{display:block;position:absolute;z-index:3;left:50%;bottom:0;width:46px;height:var(--pstand);transform:translateX(-50%);pointer-events:none;
    background:linear-gradient(90deg,#121214,#3C3C42 45%,#1B1B1E);clip-path:polygon(22% 0,78% 0,90% 100%,10% 100%)}
  .pstand-lip{display:block;position:absolute;z-index:3;left:50%;bottom:calc(var(--pstand) - 12px);width:calc(var(--pw) * .58);height:16px;transform:translateX(-50%);border-radius:4px 4px 8px 8px;pointer-events:none;
    background:linear-gradient(180deg,#45454B,#1E1E22 60%,#141416);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 10px -4px rgba(0,0,0,.6)}
  .pstand-foot{display:block;position:absolute;z-index:3;left:50%;bottom:0;width:170px;height:10px;transform:translateX(-50%);border-radius:6px 6px 3px 3px;pointer-events:none;
    background:linear-gradient(180deg,#4A4A50,var(--t4-ink));box-shadow:0 6px 10px -4px rgba(0,0,0,.6),0 10px 16px 0 rgba(0,0,0,.25)}

  /* Solid walnut */
  .shelf{background:
      linear-gradient(180deg,#80593A 0,#6A4A30 55%,#573A23 100%) 0 0/100% 11px no-repeat,
      linear-gradient(180deg,rgba(255,225,190,.28),rgba(255,225,190,0)) 0 11px/100% 2px no-repeat,
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2400' height='40' preserveAspectRatio='none'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.003 .38' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .05  0 0 0 0 .02  0 0 0 2 -.7'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") 0 11px/2400px 100% no-repeat,
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2400' height='40' preserveAspectRatio='none'><filter id='h'><feTurbulence type='fractalNoise' baseFrequency='.005 .6' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .78  0 0 0 0 .55  0 0 0 0 .34  0 0 0 1.4 -.62'/></filter><rect width='100%' height='100%' filter='url(%23h)'/></svg>") 0 11px/2400px 100% no-repeat,
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2400' height='12' preserveAspectRatio='none'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.005 .9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .1  0 0 0 0 .04  0 0 0 1.2 -.4'/></filter><rect width='100%' height='100%' filter='url(%23t)'/></svg>") 0 0/2400px 11px no-repeat,
      linear-gradient(180deg,#4E311C 11px,#3E2615 45%,#2C1A0D 100%);
    box-shadow:inset 0 1px 0 rgba(255,220,180,.35),inset 0 -2px 0 rgba(0,0,0,.45),inset 2px 0 0 rgba(255,220,180,.08),inset -2px 0 0 rgba(0,0,0,.3),0 2px 1px rgba(0,0,0,.35),0 26px 30px -16px rgba(0,0,0,.6),0 60px 70px -40px rgba(0,0,0,.4)}

  /* The light/dark switch, top right */
  .theme-seg{display:flex;gap:2px;padding:3px;border-radius:99px;background:rgba(26,26,29,.08);box-shadow:inset 0 0 0 1px rgba(26,26,29,.12)}
  .theme-seg button{width:34px;height:30px;border-radius:99px;display:grid;place-items:center;color:#6A6760}
  .theme-seg button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .theme-seg button[aria-pressed="true"]{background:var(--t4-ink);color:var(--t4-cream);box-shadow:0 2px 8px -2px rgba(0,0,0,.5)}
  .who{gap:14px}

  /* Dark: a studio at night. Warm lamp behind the phone, a soft light over the plaque, deep walls */
  html[data-theme="dark"] body{background:#121110;color:var(--t4-cream)}
  html[data-theme="dark"] .room{background:
      radial-gradient(38% 40% at var(--spot-x) var(--spot-y),rgba(255,160,80,.2),transparent 70%),
      radial-gradient(30% 30% at 50% 2%,rgba(255,196,130,.2),transparent 70%),
      radial-gradient(30% 40% at 26% 40%,rgba(255,200,140,.08),transparent 70%),
      radial-gradient(150% 120% at 50% 40%,transparent 40%,rgba(0,0,0,.6)),
      linear-gradient(180deg,#221E1A,#171513 60%,#0F0E0C)}
  html[data-theme="dark"] .room::before{display:none}
  html[data-theme="dark"] .room::after{opacity:.35;filter:invert(1)}
  html[data-theme="dark"] .light{opacity:.04}
  html[data-theme="dark"] #deskTitle{color:#FBF4E6;text-shadow:0 0 18px rgba(255,170,85,.85),0 0 44px rgba(255,140,50,.45)}
  html[data-theme="dark"] .title .t-name,html[data-theme="dark"] .title .t-sec{color:#FBF4E6;text-shadow:0 0 16px rgba(255,170,85,.8),0 0 36px rgba(255,140,50,.4)}
  html[data-theme="dark"] .me{color:var(--t4-cream)}
  html[data-theme="dark"] .me:hover{background:rgba(255,255,255,.06)}
  html[data-theme="dark"] .pill{color:var(--t4-cream);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  html[data-theme="dark"] .theme-seg{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  html[data-theme="dark"] .theme-seg button{color:#9A968E}
  html[data-theme="dark"] .theme-seg button[aria-pressed="true"]{background:var(--t4-cream);color:var(--t4-ink)}
  html[data-theme="dark"] .board-obj{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.07),0 30px 50px -24px rgba(0,0,0,.8),0 0 140px -20px rgba(255,170,90,.28)}
  html[data-theme="dark"] .front-face{box-shadow:0 0 0 1px #55555C,0 0 0 2.5px #1B1B1E,0 26px 40px -22px rgba(0,0,0,.8),0 0 120px -10px rgba(255,150,60,.35)}
  html[data-theme="dark"] .bubbles .bub{box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -3px 6px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1),0 10px 18px -8px rgba(0,0,0,.7),0 0 24px 4px rgb(var(--g) / .5)}
  html[data-theme="dark"] .desk-talk{background:linear-gradient(180deg,rgba(48,46,50,.96),rgba(30,29,32,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.07),0 24px 44px -20px rgba(0,0,0,.8),0 0 80px -24px rgba(255,160,70,.4)}
  html[data-theme="dark"] .mark{box-shadow:inset 0 0 0 3px var(--t4-ink),inset 0 0 0 5px #3A3A40,inset 0 2px 0 6px rgba(255,255,255,.5),0 10px 18px -10px rgba(0,0,0,.8),0 0 50px 12px rgba(255,170,80,.45),0 0 130px 40px rgba(255,150,60,.18)}
  html[data-theme="dark"] .desk-board,html[data-theme="dark"] .ptabs,html[data-theme="dark"] .menu,html[data-theme="dark"] .acct{color:var(--text)}
  html[data-theme="dark"] .menu{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 50px -18px rgba(0,0,0,.8)}
}

/* Desktop, tenth pass: the steel plaque, the welcome on the left in Fraunces italic, no title over the phone, the phone
   and its bubbles moved in from the right edge, a wider monitor */
@media (min-width:1000px){
  :root{--hdr:104px;
    --ph:clamp(380px,calc(100vh - 104px - 58px - 34px - 70px - 28px - 32px),700px);
    --pcol:calc(var(--pw) + 130px);
    --rgap:clamp(0px,calc(6vw - 40px),80px)}
  .room{--spot-x:calc(50% + var(--deskw) / 2 - var(--rgap) - var(--pcol) - clamp(44px,3.5vw,72px) + 20px + var(--pw) / 2)}
  .desk{grid-template-columns:minmax(0,1fr) var(--pcol) var(--rgap);column-gap:clamp(44px,3.5vw,72px)}
  .bar{visibility:hidden}
  .faces{justify-content:flex-start;padding-left:20px}
  .bubbles.rail{left:calc(20px + var(--pw) + 34px)}
  .pstand,.pstand-lip,.pstand-foot,.faces::after{left:calc(20px + var(--pw) / 2)}

  /* Welcome: on the left, in Fraunces italic, no glow */
  #deskTitle,html[data-theme="dark"] #deskTitle{justify-self:start;align-self:center;margin:0 0 12px 4px;font:italic 500 40px/1 "Fraunces",Georgia,serif;letter-spacing:-.01em;text-shadow:none}
  #deskTitle{color:var(--t4-ink)}
  html[data-theme="dark"] #deskTitle{color:#F4EDE1}

  /* StokeHouse Productions: a polished steel plaque, bevelled, four screws, engraved letters, lit from behind */
  .mark,html[data-theme="dark"] .mark{padding:18px 52px 16px;border-radius:10px;color:#24272B;
    background:
      repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 1px,rgba(255,255,255,.22) 1px 2px,rgba(0,0,0,.035) 2px 3px),
      linear-gradient(100deg,#9AA0A8 0%,#E8EBEE 16%,#C2C7CD 32%,#FAFBFC 48%,#B4BAC1 66%,#E4E7EA 82%,#9EA4AC 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.2),inset 0 0 0 4px rgba(255,255,255,.28),inset 0 0 0 5px rgba(0,0,0,.08),
      0 2px 0 #7A8088,0 4px 0 #555A61,0 16px 24px -10px rgba(0,0,0,.7),0 0 70px 14px rgba(255,190,120,.3)}
  .mark-1{font:900 30px/1 var(--t4-sans);letter-spacing:.3em;margin-right:-.3em;color:#26292E;text-shadow:0 1px 0 rgba(255,255,255,.85),0 -1px 0 rgba(0,0,0,.28)}
  .mark-2{font:800 11px/1 var(--t4-sans);letter-spacing:.66em;margin:9px -.66em 0 0;color:#B42A20;text-shadow:0 1px 0 rgba(255,255,255,.7)}
  .mark::before,.mark::after{width:9px;height:9px;margin-top:-4.5px;
    background:linear-gradient(45deg,transparent 42%,rgba(0,0,0,.45) 42% 58%,transparent 58%),radial-gradient(circle at 35% 30%,#FDFDFD,#9097A0 70%,#6B7179);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.7)}
  .mark::before{left:18px}.mark::after{right:18px}
}
/* The monitor stands off the wall: an edge you can see, a shadow cast down and right onto the wall, a soft back-light */
@media (min-width:1000px){
  .board-obj,html[data-theme="dark"] .board-obj{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.05),
      1px 1px 0 #0C0C0E,2px 2px 0 #0C0C0E,3px 3px 0 #0A0A0B,4px 4px 0 #09090A,5px 5px 1px #070708,
      22px 34px 46px -8px rgba(0,0,0,.42),46px 70px 90px -20px rgba(0,0,0,.28),
      0 0 0 1px rgba(255,255,255,.06),0 0 160px 24px rgba(255,170,90,.22)}
  html[data-theme="light"] .board-obj{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.05),
      1px 1px 0 #0C0C0E,2px 2px 0 #0C0C0E,3px 3px 0 #0A0A0B,4px 4px 0 #09090A,5px 5px 1px #070708,
      22px 34px 46px -8px rgba(60,35,10,.38),46px 70px 90px -20px rgba(60,35,10,.22),0 0 160px 24px rgba(255,190,110,.35)}
}
/* The monitor works like a screen: a window bar with traffic lights, a real scrollbar, a dock along the bottom */
.dock{display:none}
@media (min-width:1000px){
  .board-obj .ptabs{display:flex;align-items:center;gap:6px;padding:10px 14px;background:linear-gradient(180deg,#F7F4EE,#ECE7DE);border-bottom:1px solid #DCD5C9}
  .lights{display:flex;gap:7px;margin:0 10px 0 2px;flex:none}
  .lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
  .lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
  .ptabs button{min-height:32px;padding:0 14px;font-size:13px}

  .desk-board{overflow-y:scroll;scrollbar-width:auto;scrollbar-color:#B9B1A4 transparent}
  .desk-board::-webkit-scrollbar{width:12px}
  .desk-board::-webkit-scrollbar-track{background:#F1ECE4;border-left:1px solid #E2DBCF}
  .desk-board::-webkit-scrollbar-thumb{background:#C2BAAE;border-radius:8px;border:3px solid #F1ECE4}
  .desk-board::-webkit-scrollbar-thumb:hover{background:#A69D8F}

  .dock{display:flex;justify-content:center;flex:none;padding:6px 10px 8px;background:linear-gradient(180deg,#FBF7F0,#F1ECE4);border-radius:0 0 6px 6px;border-top:1px solid #E6DFD3}
  .desk-board{border-radius:0}
  .dock-in{display:flex;align-items:flex-end;gap:6px;padding:6px 8px;border-radius:16px;max-width:100%;
    background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(26,26,29,.08),0 8px 18px -10px rgba(40,25,10,.45)}
  .dock-sep{width:1px;align-self:stretch;margin:4px 3px;background:rgba(26,26,29,.14)}
  .dock-app{position:relative;display:grid;place-items:center;transition:transform .16s ease}
  .dock-app .tile{width:clamp(30px,3.9vh,44px);height:clamp(30px,3.9vh,44px);border-radius:10px;display:grid;place-items:center;color:#fff;
    background:linear-gradient(160deg,var(--a,#FFB257),var(--b,#E36A12));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.15),0 4px 8px -4px rgba(0,0,0,.45)}
  .dock-app .tile svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .dock-app:hover{transform:translateY(-5px) scale(1.14)}
  .dock-app:hover + .dock-app,.dock-app:has(+ .dock-app:hover){transform:translateY(-2px) scale(1.06)}
  .dock-app[aria-current="true"]::after{content:"";position:absolute;bottom:-6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#1A1A1D}
  .dock-app .n{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--t4-red);color:#fff;font:700 10px/16px var(--t4-sans);box-shadow:0 0 0 1.5px #fff}
  .dock-app .tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;
    padding:5px 9px;border-radius:7px;background:rgba(26,26,29,.88);color:#fff;font:600 12px/1 var(--t4-sans)}
  .dock-app:hover .tip,.dock-app:focus-visible .tip{opacity:1}
  .d-readout{--a:#5A5A62;--b:#1A1A1D}.d-p-notes{--a:#FFE08A;--b:#F2B31C}
  .d-welcome{--a:#FFC56E;--b:#F38A1C}.d-today{--a:#FFB36B;--b:#E9601E}.d-people{--a:#7FD3A0;--b:#2E9A63}
  .d-journal{--a:#8FB7FF;--b:#3E6FD8}.d-library{--a:#C59CFF;--b:#7A4BD6}.d-shop{--a:#FF9AA8;--b:#D9405A}
  .d-orange{--a:#FFA94D;--b:#F06A00}.d-ai{--a:#6FD6E0;--b:#178A9C}.d-studio{--a:#B0B6C0;--b:#5C6370}
  .d-p-status{--a:#9FE0B8;--b:#3A8F5E}.d-p-project{--a:#C9C3B6;--b:#7E776B}.d-home{--a:#E3DED4;--b:#A49D90}
}
@media (prefers-reduced-motion:reduce){.dock-app{transition:none}}

/* Desktop, eleventh pass: a title line instead of the plaque, the welcome up in the header row, no window bar on the
   monitor (taller screen), the dock as round icons floating under the monitor in front of its stand, the phone back to
   the right and taller */
@media (min-width:1000px){
  :root{--hdr:78px;--stand:92px;--rgap:0px;
    --ph:clamp(380px,calc(100vh - 78px - 14px - 34px - 70px - 28px - 30px),780px)}
  .room{--spot-x:calc(50% + var(--deskw) / 2 - var(--pcol) + 20px + var(--pw) / 2)}
  .top{grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 0 0}
  .top::before{display:none}
  #deskTitle,html[data-theme="dark"] #deskTitle{grid-column:1;justify-self:start;margin:0;font-size:34px}

  /* StokeHouse Productions: one clean line, the portal's name under it */
  .mark,html[data-theme="dark"] .mark{grid-column:2;padding:0;background:none;box-shadow:none;border-radius:0;align-items:center}
  .mark::before,.mark::after{display:none}
  .mark-1{font:800 21px/1 var(--t4-sans);letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase;color:var(--t4-ink);text-shadow:none}
  .mark-2{font:italic 500 15px/1 "Fraunces",Georgia,serif;letter-spacing:.01em;margin:8px 0 0;color:#8A847A;text-transform:none;text-shadow:none}
  .mark-2::before,.mark-2::after{content:"";display:inline-block;width:26px;height:1px;margin:0 10px;vertical-align:middle;background:currentColor;opacity:.5}
  html[data-theme="dark"] .mark-1{color:#F4EDE1}
  html[data-theme="dark"] .mark-2{color:#B9AE9C}
  .who{grid-column:3;margin-top:0}

  .desk{grid-template-rows:var(--ph) var(--shelf-h) auto;padding-top:14px}
  .phone{grid-row:1}
  .shell{grid-template-rows:var(--ph)}
  .bar{display:none}
  .board-obj{grid-row:1}

  /* The monitor: just the screen */
  .board-obj .ptabs{display:none}
  .board-obj{padding:12px 12px 26px}
  .desk-board{border-radius:6px}
  .board-obj::after{inset:12px 12px 26px}
  .dock{position:absolute;z-index:4;left:0;right:0;top:calc(100% + 16px);display:flex;justify-content:center;padding:0;background:none;border:0;border-radius:0}
  .dock-in{gap:clamp(6px,.7vw,12px);padding:0;background:none;box-shadow:none;border-radius:0}
  .dock-app .tile{width:clamp(30px,2.6vw,44px);height:clamp(30px,2.6vw,44px);border-radius:50%;
    background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.55),rgba(255,255,255,0) 42%),linear-gradient(160deg,var(--a,#FFB257),var(--b,#E36A12));
    box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -3px 5px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.25),0 8px 14px -6px rgba(0,0,0,.6)}
  .dock-app:hover{transform:translateY(-4px) scale(1.12)}
  .dock-app:hover .tile{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -3px 5px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.25),0 10px 18px -6px rgba(0,0,0,.6),0 0 22px 2px var(--a)}
  .dock-app[aria-current="true"] .tile{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -3px 5px rgba(0,0,0,.22),0 0 0 2px #F4EDE1,0 0 0 4px var(--b),0 8px 14px -6px rgba(0,0,0,.6)}
  .dock-app[aria-current="true"]::after{display:none}
  .dock-app .n{box-shadow:0 0 0 1.5px #1A1A1D}
  .dock-app .tip{bottom:calc(100% + 12px);padding:7px 11px;border-radius:9px;font:700 12.5px/1 var(--t4-sans);letter-spacing:.02em;
    background:rgba(26,26,29,.92);color:#F4EDE1;box-shadow:0 8px 18px -8px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08);transform:translate(-50%,4px);transition:opacity .14s,transform .14s}
  .dock-app .tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:rgba(26,26,29,.92)}
  .dock-app:hover .tip,.dock-app:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
  html[data-theme="light"] .dock-app[aria-current="true"] .tile{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -3px 5px rgba(0,0,0,.22),0 0 0 2px #fff,0 0 0 4px var(--b),0 8px 14px -6px rgba(0,0,0,.4)}
  .stand::before{width:56px}
}
@media (min-width:1000px){.shelf{grid-row:2}.desk-talk{grid-row:3}}
/* The dock spans the monitor's full width, icons a little larger */
@media (min-width:1000px){
  .dock{top:calc(100% + 14px)}
  .dock-in{width:100%;justify-content:space-between;padding:0 14px}
  .dock-app .tile{width:clamp(36px,3.3vw,54px);height:clamp(36px,3.3vw,54px)}
  .dock-app .n{top:-4px;right:-4px}
}
/* The menu under the monitor: Chester's app by name across the full width, notes and folders under it */
@media (min-width:1000px){
  .dock{top:calc(100% + 12px);flex-direction:column;align-items:stretch;gap:8px;padding:0 6px}
  .menu-main{display:flex;justify-content:space-between;gap:2px;padding:5px;border-radius:16px;
    background:linear-gradient(180deg,rgba(46,46,51,.94),rgba(24,24,27,.96));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(0,0,0,.45),0 14px 26px -12px rgba(0,0,0,.7)}
  .menu-main .dock-app{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 clamp(6px,.7vw,12px);border-radius:12px;
    font:700 clamp(11.5px,.92vw,13.5px)/1 var(--t4-sans);letter-spacing:.01em;color:#D9D3C8;white-space:nowrap;transition:background .15s,color .15s}
  .menu-main .dock-app:hover{background:rgba(255,255,255,.07);color:#fff;transform:none}
  .menu-main .dock-app[aria-current="true"]{background:var(--t4-cream);color:var(--t4-ink);box-shadow:0 0 18px rgba(255,200,140,.25)}
  .dock-app .dot{width:8px;height:8px;border-radius:50%;flex:none;background:linear-gradient(160deg,var(--a,#FFB257),var(--b,#E36A12));box-shadow:0 0 8px var(--a,#FFB257)}
  .dock-app .n{position:static;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--t4-red);color:#fff;font:800 10.5px/18px var(--t4-sans);box-shadow:none}
  .menu-main .dock-app[aria-current="true"] .n{background:var(--t4-ink);color:var(--t4-cream)}
  .menu-sub{display:flex;justify-content:center;align-items:center;gap:4px}
  .menu-sub .dock-app{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;font:700 11.5px/1 var(--t4-sans);letter-spacing:.14em;text-transform:uppercase;color:#A39C90}
  .menu-sub .dock-app .dot{display:none}
  .menu-sub .dock-app:hover{color:#F4EDE1;transform:none}
  .menu-sub .dock-app[aria-current="true"]{color:#F4EDE1;box-shadow:inset 0 -2px 0 var(--t4-red);border-radius:0}
  .menu-sub .sep{color:#5E5951}
  .menu-sub .dock-app .n{height:16px;min-width:16px;font-size:10px;line-height:16px;letter-spacing:0}
  html[data-theme="light"] .menu-main{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,242,235,.95));box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(26,26,29,.1),0 14px 26px -14px rgba(60,35,10,.45)}
  html[data-theme="light"] .menu-main .dock-app{color:#3A3833}
  html[data-theme="light"] .menu-main .dock-app:hover{background:rgba(26,26,29,.06);color:var(--t4-ink)}
  html[data-theme="light"] .menu-main .dock-app[aria-current="true"]{background:var(--t4-ink);color:var(--t4-cream);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
  html[data-theme="light"] .menu-main .dock-app[aria-current="true"] .n{background:var(--t4-cream);color:var(--t4-ink)}
  html[data-theme="light"] .menu-sub .dock-app{color:#7C766C}
  html[data-theme="light"] .menu-sub .dock-app:hover,html[data-theme="light"] .menu-sub .dock-app[aria-current="true"]{color:var(--t4-ink)}
  html[data-theme="light"] .menu-sub .sep{color:#B8B1A5}
}
/* The menu fits the monitor's width exactly, whatever the screen */
@media (min-width:1000px){
  .dock{container-type:inline-size}
  .menu-main{gap:1px;padding:4px}
  .menu-main .dock-app{flex:1 1 auto;min-width:0;gap:clamp(4px,.8cqi,8px);padding:0 clamp(4px,1cqi,12px);font-size:clamp(10.5px,1.5cqi,14px);height:clamp(34px,4.6cqi,42px)}
  .menu-main .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .menu-main .dock-app .n{min-width:16px;height:16px;padding:0 4px;font-size:10px;line-height:16px}
}
@container (max-width:860px){
  .menu-main .dock-app .dot{display:none}
}
@media (min-width:1000px){
  .menu-main .dock-app{min-width:auto}
  .menu-main .lbl{flex:none;overflow:visible}
}
@container (max-width:700px){
  .menu-main .dock-app{padding:0 4px;gap:4px;font-size:10.5px}
  .menu-main .dock-app .n{min-width:14px;height:14px;font-size:9px;line-height:14px;padding:0 3px}
}
.dock .short{display:none}
@media (min-width:1000px){
  .menu-main .dock-app{font-size:clamp(10px,1.3cqi,13.5px);padding:0 clamp(3px,.7cqi,10px);gap:clamp(3px,.6cqi,7px)}
}
@container (max-width:760px){
  .menu-main .full:has(+ .short){display:none}
  .menu-main .short{display:inline}
}

/* The front door: Chester's office (Christy's picture), a frosted sign-in card, StokeHouse Productions small at the bottom */
.gate{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:1fr minmax(0,440px);align-items:center;padding:clamp(20px,5vw,80px);overflow:hidden;background:#3A3A2E}
body.at-gate{overflow:hidden}
.gate-art{position:absolute;inset:0;transform:scale(1.07);transform-origin:72% 28%;
  background:
    linear-gradient(90deg,rgba(18,12,6,0) 38%,rgba(18,12,6,.42) 100%),
    linear-gradient(180deg,rgba(18,12,6,.15),rgba(18,12,6,0) 25%,rgba(18,12,6,0) 70%,rgba(18,12,6,.45)),
    url("office.webp") 50% 40%/cover no-repeat,
    radial-gradient(60% 70% at 26% 34%,#F6D58E 0%,rgba(246,213,142,0) 60%),
    linear-gradient(90deg,#8DA77F 0%,#A7B98E 30%,#7A4E2C 42%,#8A5A33 70%,#9CB28C 72%,#A9BC93 100%)}
.gate-card{position:relative;grid-column:2;border-radius:26px;padding:30px 30px 26px;color:var(--t4-ink);
  background:linear-gradient(180deg,rgba(255,252,246,.86),rgba(250,244,234,.8));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.35),0 40px 80px -30px rgba(20,10,0,.75)}
.gate-eyebrow{margin:0 0 10px;font:800 11px/1 var(--t4-sans);letter-spacing:.28em;text-transform:uppercase;color:#B42A20}
.gate-card h1,.gate-card h2{font:italic 500 46px/1 "Fraunces",Georgia,serif;letter-spacing:-.015em;color:var(--t4-ink);margin:0 0 6px}
.gate-card h2{font-size:30px}
.gate-sub,.gate-card .sub{margin:0 0 20px;font:400 17px/1.4 var(--sans);color:#5C574E}
.gate-card form{display:grid;gap:14px}
.gate-card label{display:grid;gap:6px;font:700 13px/1 var(--t4-sans);letter-spacing:.04em;color:#3A3833}
.gate-card input{height:50px;border:0;border-radius:14px;padding:0 16px;font:inherit;font-size:16px;font-weight:400;letter-spacing:0;color:var(--t4-ink);background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px rgba(26,26,29,.14)}
.gate-card input:focus-visible{outline:3px solid #B42A20;outline-offset:1px}
.gate-card .btn{min-height:52px;border-radius:14px;font:800 15px/1 var(--t4-sans);letter-spacing:.04em}
.gate-card .btn-orange{background:var(--t4-ink);color:var(--t4-cream);box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.gate-card .btn-orange:hover{background:#000}
.gate-card .alt{margin:16px 0 0;font-size:14px;color:#6A655B}
.gate-card .linkish{color:#9A2A1F}
.gate-card .err{color:#9A2A1F}
.gate-foot{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;font:800 10.5px/1 var(--t4-sans);letter-spacing:.42em;text-transform:uppercase;color:rgba(255,248,236,.82);text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media (max-width:999px){
  .gate{grid-template-columns:1fr;align-items:end;padding:16px 16px 44px}
  .gate-card{grid-column:1;padding:22px 20px 20px}
  .gate-card h1{font-size:38px}
  .gate-art{transform-origin:60% 20%}
}

/* Desktop front door: Christy's picture of Chester's office (7 Oct), the card on the right wall over the calligraphy,
   the "Best Day Ever" pillow and the Kindness lamp left in view */
@media (min-width:1000px){
  .gate{align-items:start;padding-top:max(40px,8vh)}
  .gate-art{transform:none;
    background:
      linear-gradient(90deg,rgba(18,12,6,0) 55%,rgba(18,12,6,.18) 100%),
      linear-gradient(180deg,rgba(18,12,6,.1),rgba(18,12,6,0) 20%,rgba(18,12,6,0) 75%,rgba(18,12,6,.4)),
      url("office.webp") 50% 50%/cover no-repeat,#5E7A4E}
  .gate-card{width:min(400px,28vw);justify-self:end;margin-right:max(0px,1vw)}
}
@media (min-width:1000px){.gate-card h1{font-size:clamp(34px,3.2vw,46px);white-space:nowrap}}

/* Inside, on a desktop: the same office, now an editing suite in the evening. Christy's picture, softened and dimmed,
   warm lamp light pooling behind the phone and the monitor. Light mode is the same room by day. */
@media (min-width:1000px){
  .room::before,html[data-theme="dark"] .room::before{display:block;content:"";position:absolute;inset:-24px;
    background:url("office.webp") 50% 45%/cover no-repeat;filter:blur(7px) saturate(.75) sepia(.28) brightness(.36) contrast(1.05)}
  html[data-theme="dark"] .room::after{opacity:1;filter:none;
    background:
      radial-gradient(36% 42% at var(--spot-x) 46%,rgba(255,150,60,.22),transparent 70%),
      radial-gradient(40% 46% at 28% 44%,rgba(255,170,90,.12),transparent 70%),
      linear-gradient(180deg,rgba(14,10,6,.35),rgba(14,10,6,.1) 30%,rgba(14,10,6,.25) 70%,rgba(8,6,4,.75)),
      radial-gradient(140% 110% at 50% 40%,transparent 45%,rgba(0,0,0,.55))}
  html[data-theme="light"] .room::before{filter:blur(6px) saturate(.8) brightness(1.02)}
  html[data-theme="light"] .room::after{opacity:1;filter:none;
    background:
      linear-gradient(180deg,rgba(246,240,230,.62),rgba(246,240,230,.5) 60%,rgba(236,228,215,.7)),
      radial-gradient(36% 42% at var(--spot-x) 46%,rgba(255,200,130,.25),transparent 70%)}
  .light{display:none}
}
@media (min-width:1000px){
  html[data-theme="light"] .menu-sub .dock-app{color:#3E3A34;text-shadow:0 0 8px rgba(255,250,240,.9)}
  html[data-theme="light"] .menu-sub .sep{color:#6E675C}
  html[data-theme="light"] .mark-2{color:#5E574C;text-shadow:0 0 8px rgba(255,250,240,.9)}
  html[data-theme="light"] .mark-1,html[data-theme="light"] #deskTitle{text-shadow:0 0 14px rgba(255,250,240,.9)}
  html[data-theme="dark"] .menu-sub .dock-app{text-shadow:0 0 8px rgba(0,0,0,.8)}
}
@media (min-width:1000px){
  .menu-sub{align-self:center;padding:3px 10px;border-radius:99px;background:rgba(20,18,16,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  html[data-theme="light"] .menu-sub{background:rgba(255,252,246,.82);box-shadow:0 0 0 1px rgba(26,26,29,.08),0 6px 14px -8px rgba(0,0,0,.35)}
  html[data-theme="light"] .menu-sub .dock-app{text-shadow:none}
}

/* The front door's card is a crystal: clear glass, a prism edge, a sheen, centred on Chester's office */
.gate,.gate{grid-template-columns:minmax(0,440px);justify-content:center;align-items:center;justify-items:stretch}
@media (min-width:1000px){.gate{align-items:center;padding-top:clamp(20px,5vw,80px)}.gate-card{width:auto;justify-self:stretch;margin:0}}
.gate-card{grid-column:1;color:#fff;isolation:isolate;
  background:linear-gradient(140deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.12) 45%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.16) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.7) brightness(.92);backdrop-filter:blur(24px) saturate(1.7) brightness(.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.18),inset 0 0 40px rgba(255,255,255,.07),0 40px 90px -24px rgba(0,0,0,.7)}
.gate-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from 210deg,rgba(255,255,255,.9),rgba(255,190,220,.7),rgba(190,215,255,.75),rgba(200,255,230,.7),rgba(255,240,190,.75),rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.gate-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 62%,rgba(255,255,255,.1) 78%,rgba(255,255,255,0) 90%)}
.gate-art::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 50% at 50% 50%,rgba(10,6,2,.32),rgba(10,6,2,0) 75%)}
.gate-eyebrow{color:#FFE2D8;text-shadow:0 0 12px rgba(255,120,90,.55)}
.gate-card h1,.gate-card h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.gate-sub,.gate-card .sub{color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.gate-card label{color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.gate-card input{color:#fff;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),inset 0 1px 0 rgba(255,255,255,.25)}
.gate-card input:focus-visible{outline:2px solid rgba(255,255,255,.95);outline-offset:2px;background:rgba(255,255,255,.22)}
.gate-card .btn-orange{background:linear-gradient(180deg,#FFFFFF,#EDE7DC);color:var(--t4-ink);box-shadow:0 0 24px rgba(255,255,255,.3),0 10px 20px -10px rgba(0,0,0,.6)}
.gate-card .btn-orange:hover{background:#fff}
.gate-card .btn-line{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.gate-card .alt{color:rgba(255,255,255,.75)}
.gate-card .linkish{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.gate-card .err{color:#FFD2C8;text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media (max-width:999px){.gate{align-items:center;padding:16px 16px 48px}}
.gate-eyebrow,.gate-card h1,.gate-sub,.gate-card .alt{text-align:center}
.gate-card h2,.gate-card .sub{text-align:center}

/* Twelfth pass: the phone and its bubbles further right (the monitor gets the room), and the menu under the monitor
   as a row of console keys: nine equal keys, each an icon and its full name (two lines if it needs them), never cut */
@media (min-width:1000px){
  :root{--pcol:calc(var(--pw) + 100px);--stand:104px}
  .desk{column-gap:clamp(32px,2.6vw,56px)}
  .bubbles.rail{left:calc(20px + var(--pw) + 26px)}

  .dock{top:calc(100% + 10px);gap:7px}
  .menu-main{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;padding:5px;border-radius:16px}
  .menu-main .dock-app.key{position:relative;flex:none;min-width:0;height:auto;min-height:clamp(46px,6cqi,58px);padding:7px 3px 6px;border-radius:11px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;white-space:normal;
    font:700 clamp(10px,1.2cqi,12.5px)/1.12 var(--t4-sans);letter-spacing:.01em;color:#DCD6CB;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.04),0 2px 0 rgba(0,0,0,.45);transition:background .15s,transform .1s,color .15s}
  .menu-main .dock-app.key .lbl{flex:none;min-width:0;max-width:100%;overflow:visible;text-overflow:clip;overflow-wrap:normal;hyphens:none}
  .key-ic{display:grid;place-items:center;color:var(--a,#FFB257)}
  .key-ic svg{width:clamp(15px,1.9cqi,19px);height:clamp(15px,1.9cqi,19px);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--a,#FFB257) 45%,transparent))}
  .menu-main .dock-app.key:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#fff}
  .menu-main .dock-app.key:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(0,0,0,.45)}
  .menu-main .dock-app.key[aria-current="true"]{color:var(--t4-ink);background:linear-gradient(180deg,#FFFDF8,#EAE3D6);transform:translateY(1px);
    box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.08),0 1px 0 rgba(0,0,0,.45),0 0 20px rgba(255,210,150,.28)}
  .menu-main .dock-app.key[aria-current="true"] .key-ic{color:var(--b,#E36A12)}
  .menu-main .dock-app.key[aria-current="true"] .key-ic svg{filter:none}
  .menu-main .dock-app.key .n{position:absolute;top:4px;right:4px;min-width:15px;height:15px;padding:0 4px;font-size:9.5px;line-height:15px}
  .menu-main .dock-app.key[aria-current="true"] .n{background:var(--t4-red);color:#fff}
  html[data-theme="light"] .menu-main .dock-app.key{color:#3A3833;background:linear-gradient(180deg,#FFFFFF,#F2EDE4);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(26,26,29,.07),0 2px 0 rgba(26,26,29,.14)}
  html[data-theme="light"] .menu-main .dock-app.key:hover{background:#fff;color:var(--t4-ink)}
  html[data-theme="light"] .menu-main .dock-app.key[aria-current="true"]{color:var(--t4-cream);background:linear-gradient(180deg,#2E2E33,var(--t4-ink));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 0 rgba(0,0,0,.3),0 6px 14px -6px rgba(0,0,0,.5)}
  html[data-theme="light"] .menu-main .dock-app.key[aria-current="true"] .key-ic{color:var(--a)}
}
@media (min-width:1000px){:root{--stand:120px}}

/* The crystal floats above the office: layered shadows, a soft shadow on the room below, a slow drift, a slight tilt
   toward the pointer */
.gate{perspective:1400px}
.gate-card{transform-style:preserve-3d;will-change:transform;
  transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,0deg)) translateZ(40px);transition:transform .25s ease-out;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.2),inset 0 0 40px rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.18),0 12px 24px -6px rgba(0,0,0,.35),0 40px 70px -20px rgba(0,0,0,.55),0 90px 120px -50px rgba(0,0,0,.6)}
.gate-float{position:relative;grid-column:1;animation:drift 7s ease-in-out infinite}
.gate-float::after{content:"";position:absolute;left:12%;right:12%;bottom:-46px;height:34px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));filter:blur(6px);animation:shadowdrift 7s ease-in-out infinite}
@keyframes drift{50%{transform:translateY(-8px)}}
@keyframes shadowdrift{50%{transform:scale(.9);opacity:.75}}
@media (prefers-reduced-motion:reduce){.gate-float,.gate-float::after{animation:none}.gate-card{transition:none}}
@media (min-width:1000px){:root{--stand:124px}}
.gate-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.2),inset 0 0 40px rgba(255,255,255,.08),
  0 2px 4px rgba(0,0,0,.25),0 16px 30px -8px rgba(0,0,0,.5),0 50px 90px -20px rgba(0,0,0,.7),0 110px 140px -50px rgba(0,0,0,.75)}
.gate-float::after{left:6%;right:6%;bottom:-70px;height:46px;background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,0));filter:blur(10px)}
/* Depth: the office a touch out of focus behind the crystal, the crystal's thickness showing, a darker shadow under it */
.gate-art{filter:blur(1.2px) saturate(1.05)}
.gate-float{z-index:1}
.gate-float::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:26px;pointer-events:none;
  transform:perspective(1400px) rotateX(4deg) translateY(10px) translateZ(20px);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 30px 60px -10px rgba(0,0,0,.65)}
.gate-float::after{left:2%;right:2%;bottom:-78px;height:56px;background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,0));filter:blur(8px)}

/* Studio mode: Chester's office behind the editing suite, clearer than before, still dim and warm like evening */
@media (min-width:1000px){
  .room::before,html[data-theme="dark"] .room::before{filter:blur(2.5px) saturate(.85) sepia(.2) brightness(.5) contrast(1.05)}
  html[data-theme="light"] .room::before{filter:blur(2px) saturate(.9) brightness(1)}
  html[data-theme="light"] .room::after{background:linear-gradient(180deg,rgba(246,240,230,.5),rgba(246,240,230,.38) 60%,rgba(236,228,215,.6)),radial-gradient(36% 42% at var(--spot-x) 46%,rgba(255,200,130,.25),transparent 70%)}
}

/* Phone: the same evening office behind the studio */
@media (max-width:999px){
  body{background:#14100C}
  .room::before{display:block;content:"";position:absolute;inset:-20px;background:url("office.webp") 50% 45%/cover no-repeat;
    filter:blur(2.5px) saturate(.85) sepia(.2) brightness(.45) contrast(1.05)}
  .room::after{opacity:1;filter:none;
    background:
      radial-gradient(60% 40% at 42% 46%,rgba(255,150,60,.24),transparent 70%),
      linear-gradient(180deg,rgba(14,10,6,.45),rgba(14,10,6,.1) 22%,rgba(14,10,6,.15) 72%,rgba(8,6,4,.8)),
      radial-gradient(140% 100% at 50% 45%,transparent 45%,rgba(0,0,0,.55))}
  .light{display:none}
  .title,.t-sec,.t-name{color:#F6EFE3}
  .t-name{text-shadow:0 0 16px rgba(255,170,85,.55)}
  .bar-btn,.knob{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.12),0 8px 16px -8px rgba(0,0,0,.7)}
  .clip{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1),0 6px 12px -8px rgba(0,0,0,.7)}
  .front-face{box-shadow:0 0 0 1px #55555C,0 0 0 2.5px #1B1B1E,0 26px 40px -22px rgba(0,0,0,.85),0 0 110px -10px rgba(255,150,60,.4)}
  .shell[data-side="back"] .title,.shell[data-side="back"] .t-sec,.shell[data-side="back"] .t-name{color:var(--t4-ink);text-shadow:none}
}
@media (max-width:999px){
  .shell[data-side="back"] .title,.shell[data-side="back"] .t-sec,.shell[data-side="back"] .t-name{color:#F6EFE3}
  .shell[data-side="back"] .timeline{display:none}
  .back-face{top:4px;padding-top:0;border-radius:22px 22px 0 0;box-shadow:0 -10px 30px -10px rgba(0,0,0,.6)}
  .back-face .mic{background:radial-gradient(circle at 35% 28%,#FF7A6C,var(--t4-red) 60%,#A8241B);box-shadow:0 0 14px rgb(var(--t4-glow) / .4)}
  .back-face .btn-orange{background:var(--t4-ink);color:var(--t4-cream)}
}

/* Genesis: a readable companion view beside the immersive review studio. */
.view-controls{position:fixed;z-index:30;top:72px;right:18px;display:flex;gap:8px}
.view-controls button{min-height:36px;padding:8px 14px;border-radius:100px;border:1px solid #ffffff38;background:#211e1bea;color:#fff6e9;font:600 13px/1.2 var(--sans);box-shadow:0 3px 12px #0003;backdrop-filter:blur(16px)}
.view-controls button:hover{background:#3a3026}
#focusNote{display:none}
.at-gate .view-controls,.at-gate .connection-status{display:none}
.connection-status{position:fixed;z-index:50;bottom:8px;left:50%;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:100px;background:#fff2df;color:#382819;font-size:13px;box-shadow:0 4px 20px #0003}
.noscript{position:fixed;inset:0;z-index:200;background:#231c15;color:#fff;padding:20vh 24px;text-align:center}
body.app-view .top,body.app-view .panel-col,body.app-view .shelf,body.app-view #deskTalk,body.app-view .bar,body.app-view .timeline,body.app-view .bubbles,body.app-view .pstand,body.app-view .pstand-foot,body.app-view .pstand-lip{display:none!important}
body.app-view .desk,body.app-view .phone-col,body.app-view .phone,body.app-view .shell{display:contents}
body.app-view .faces{position:fixed;inset:58px 0 0;display:block;padding:0;z-index:20}
body.app-view .faces::after{display:none}
body.app-view .front-face{position:relative;inset:auto;margin:0 auto;width:min(100%,440px);height:100%;max-height:none;border:0;border-radius:24px 24px 0 0;aspect-ratio:auto;box-shadow:0 0 60px #0004}
body.app-view .front-face::after{display:none}
body.app-view .view-controls{top:10px;right:50%;transform:translateX(50%);width:min(100% - 24px,440px);justify-content:space-between}
body.app-view #focusNote{display:block}
body.app-view .sheet{z-index:50}
@media(max-width:999px){
 .view-controls{top:76px;right:14px}
 .view-controls button{font-size:12px;min-height:32px;padding:7px 12px}
 body.app-view .front-face{border-radius:0;box-shadow:none}
}
@media(min-width:1000px){
 .view-controls{top:74px;right:max(32px,calc((100vw - var(--deskw))/2))}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
.section-guide{padding:22px 24px;margin:18px 0 24px;border:1px solid #e9dfcf;border-radius:18px;background:linear-gradient(125deg,#fffdf8,#f8efdf);color:#353132}
.section-guide .guide-label{font:700 10px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:#8b5c2e;margin:0 0 9px}
.section-guide h3{font:600 clamp(18px,2cqi,24px)/1.25 var(--serif);margin:0 0 10px;color:#292442}
.section-guide>p:not(.guide-label){font-size:15px;margin:0;color:#635b56}
.guide-prompt{padding-top:14px;margin-top:14px;border-top:1px solid #e9ddcc;font-size:14px;line-height:1.5;color:#6a5847}
.section-guide h3{text-transform:none;letter-spacing:-.015em}
.empty-desk{padding:22px 12px!important;gap:8px!important}
.empty-desk .orb{width:38px!important;height:38px!important}
.empty-desk .orb svg{width:20px!important;height:20px!important}
.empty-desk b{font-size:16px!important}
.empty-desk p{font-size:13px;line-height:1.5}

/* Voice notes to text: the transcript sits under the recording; its states say plainly where it stands */
.tx{margin:8px 0 0;font-size:14px;line-height:1.45;color:#5C574E}
.tx-done{margin:8px 0 0;padding:9px 12px;border-left:3px solid #E0392C;border-radius:0 10px 10px 0;background:#F7F2EA;color:#24211D;font-style:normal}
.tx-label{display:block;margin-bottom:3px;font:800 10px/1 system-ui,-apple-system,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#9A2A1F}
.tx-done .linkish{margin-left:6px;font-size:13px}
.tx-wait{display:flex;align-items:center;gap:8px;color:#6A655B}
.tx-dot{width:8px;height:8px;border-radius:50%;background:#E0392C;animation:txpulse 1.2s ease-in-out infinite}
@keyframes txpulse{50%{opacity:.3}}
.tx-fail{color:#9A2A1F}
.tx-off{font-size:12.5px;color:#8A847A}
.transcript-form{display:grid;gap:6px;margin-top:8px}
.transcript-form textarea{width:100%;min-height:72px;border:0;border-radius:10px;padding:9px 11px;font:inherit;font-size:14px;background:#fff;box-shadow:inset 0 0 0 1px #E2D4BF;resize:vertical}
.tx-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (prefers-reduced-motion:reduce){.tx-dot{animation:none}}