/* The playground is a Mac running Moe.
   Nothing here is guessed. The island's outline is IslandShape.swift, its sizes
   are NotchIsland.swift, the glow colours and the light that laps the notch are
   IslandView.swift, the window is MainWindow.swift + Chat/ChatPane.swift, and
   every hex is MoeDesign/Theme.swift. */

:root{
  /* Theme.swift, light */
  --paper:#FCFBF2; --raised:#FFFEF8; --sunk:#F0ECDA; --sidebar:#F5F2E3;
  --ink:#1C1B17; --ink2:#5C594E; --ink3:#6E6A5C;
  --rule:#E3DFCD; --ruleStrong:#D0CBB4;
  --accent:#6B7FD7; --accentDeep:#4D5FB0; --accentTint:#E4E8FB; --onAccent:#fff;
  --warn:#B07D29; --bad:#B0453C;
  /* Theme.Island — the five states of the glow */
  --g-idle:#8CB3D9; --g-listen:#59D98C; --g-think:#73BFF2; --g-speak:#73D9B3;
  --g-dictation:#B79AF5; --g-amber:#E8A64A;
  /* hardware */
  --bar:32px; --notch-w:187px;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,sans-serif;
  --serif:ui-serif,"New York",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
html,body{height:100%}
html{background:#000}
body.desk{margin:0;overflow:hidden;background:#000;color:var(--ink);
  font:13px/1.45 var(--ui);-webkit-font-smoothing:antialiased}
.screen{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate;
  border-radius:12px}
.wall{position:absolute;inset:0;background:#8a8f95 image-set(
  url(/assets/wallpaper.webp) type("image/webp"),
  url(/assets/wallpaper.jpg) type("image/jpeg")) center/cover no-repeat}
.wall::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,14,.28) 0,rgba(8,10,14,.16) 6%,rgba(10,8,5,0) 22%)}

/* ---------------------------- menu bar ---------------------------- */
.menubar{position:absolute;top:0;left:0;right:0;height:var(--bar);z-index:40;
  display:flex;align-items:center;gap:18px;padding:0 14px;color:#fff;font-size:13.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  -webkit-user-select:none;user-select:none}
.menubar .home{display:grid;place-items:center;width:16px;height:16px;color:inherit;
  text-decoration:none;flex:none}
.menubar .home svg{width:15px;height:15px;display:block}
.menubar .app{font-weight:600;letter-spacing:.01em}
.menubar .mm{opacity:.95;padding:2px 8px;border-radius:6px;cursor:default}
.menubar .mm:hover{background:rgba(255,255,255,.22)}
.mb-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.mb-right .clock{font-variant-numeric:tabular-nums}
.mi{width:17px;height:15px;flex:none;opacity:.95;display:block}
.srcbtn{appearance:none;border:0;background:transparent;font:inherit;color:inherit;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:2px 8px;
  border-radius:6px;text-shadow:inherit}
.srcbtn:hover,.srcbtn[aria-expanded="true"]{background:rgba(255,255,255,.24)}
.srcbtn .dot{width:7px;height:7px;border-radius:50%;background:var(--g-listen)}

/* ---------------------------- the notch and its light ---------------------------- */
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:var(--notch-w);height:var(--bar);background:#000;z-index:60;
  border-radius:0 0 13px 13px;pointer-events:none}

/* The filled halo: a band of light spilling out around the notch's edges. The
   part over the notch is invisible because the notch is a hole, not a screen. */
.halo{position:absolute;top:-7px;left:50%;transform:translateX(-50%);z-index:52;
  width:calc(var(--notch-w) + 30px);height:calc(var(--bar) + 20px);
  border-radius:22px;pointer-events:none;filter:blur(9px);
  background:var(--halo-c,#E8F1FA);opacity:var(--halo-o,.55);
  transition:opacity .4s ease,background .35s ease}

/* A neon light that runs around the outline of the notch: down one side, across
   the bottom, up the other. A snake, not a clock hand. 2.4s a lap. */
/* above the notch, and just outside its edge: the notch is a hole, so the
   light has to run around the outside of it to be seen at all */
.trail{position:absolute;top:-3px;left:50%;transform:translateX(-50%);z-index:61;
  width:calc(var(--notch-w) + 8px);height:calc(var(--bar) + 6px);
  pointer-events:none;opacity:0;transition:opacity .35s}
.trail[data-on="true"]{opacity:1}
.trail path{fill:none;stroke-linecap:round}
.trail .tail{stroke:var(--g-think);stroke-opacity:.30;stroke-width:1.5;filter:blur(2px)}
.trail .glow{stroke:var(--g-think);stroke-opacity:.9;stroke-width:5.5;filter:blur(5px)}
.trail .head{stroke:var(--g-think);stroke-width:2}
@media (prefers-reduced-motion:no-preference){
  .trail .tail{animation:lap 2.4s linear infinite}
  .trail .glow,.trail .head{animation:lap 2.4s linear infinite}
}
@keyframes lap{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}

/* ---------------------------- the island ---------------------------- */
/* The bleed has to live on a wrapper: clip-path is applied to the filtered
   result, so a drop-shadow on the clipped element is cut away by its own path. */
.islandwrap{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:62;
  filter:var(--bleed);pointer-events:none;line-height:0}
.island{position:relative;pointer-events:auto;
  width:var(--notch-w);height:var(--bar);background:#000;overflow:hidden;
  -webkit-clip-path:var(--shape);clip-path:var(--shape);
  transition:width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .island,.island .inner,.halo,.trail,.hint,.tile{transition:none!important}
  .tile:hover{transform:none}
  .trail .tail,.trail .glow,.trail .head{animation:none}
}
/* visibility switches at once on the way in, so the panel's controls are
   clickable the moment it is open, and only waits on the way out */
.island .inner{position:absolute;left:0;right:0;top:var(--bar);bottom:0;
  display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transition:opacity .2s,visibility 0s .2s;color:#EFECE2;padding:2px 14px 12px}
.island[data-state="peek"] .inner,.island[data-state="open"] .inner{opacity:1;visibility:visible;
  transition:opacity .2s .14s,visibility 0s}
/* Under the island, never over it: at z-index 58 this swallowed every click
   inside the panel, including its own microphone. The island keeps itself open
   with its own pointerenter, so the zone only has to catch the arrival. */
.notch-zone{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(var(--notch-w) + 110px);height:calc(var(--bar) + 10px);z-index:53;cursor:pointer}

.i-state{flex:none;display:flex;align-items:center;gap:7px;font:600 9px/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:#8D8880;padding:8px 2px 4px}
.i-state .d{width:6px;height:6px;border-radius:50%;background:var(--g-idle)}
.i-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:11px;
  padding:6px 2px;scrollbar-width:thin}
.i-log:empty::after{content:"Press the microphone and talk, or type.";color:#8D8880;font-size:12.5px}
.i-msg{font-size:13px;line-height:1.45}
.i-msg .w{display:block;font:600 9px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:4px}
.i-msg.you .w{color:#8FD0A8}
.i-msg.moe .w{color:#6FC9E8}
.i-msg .x{color:#EFECE2}
.i-msg.err .x{color:#E26055}
.i-form{display:flex;gap:8px;align-items:center;flex:none;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.07)}
.i-form input{flex:1;min-width:0;background:rgba(255,255,255,.07);color:#EFECE2;
  border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 10px;
  font:400 13px/1 var(--ui)}
.i-form input::placeholder{color:#8D8880}
.i-form input:focus{outline:1.5px solid var(--g-think);outline-offset:0}

.mic{appearance:none;flex:none;width:31px;height:31px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#CFCABC;position:relative}
.mic:hover{background:rgba(255,255,255,.16)}
.mic[data-on="true"]{background:var(--g-listen);border-color:var(--g-listen);color:#0d2417}
.mic svg{width:14px;height:14px;display:block}

/* ---------------------------- sources popover ---------------------------- */
.pop{position:absolute;top:calc(var(--bar) + 4px);right:10px;z-index:70;width:282px;
  padding:13px;background:rgba(252,251,242,.84);backdrop-filter:saturate(180%) blur(30px);
  -webkit-backdrop-filter:saturate(180%) blur(30px);color:var(--ink);
  border:.5px solid rgba(0,0,0,.16);border-radius:12px;
  box-shadow:0 20px 50px -14px rgba(0,0,0,.44);display:none}
.pop[data-open="true"]{display:block}
.pop .pophead{margin:0 0 2px;font:600 13px/1.3 var(--ui)}
.pop .sub{margin:0 0 11px;font-size:12px;color:var(--ink2)}
.srcrail{display:grid;gap:4px}
.src{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:7px;padding:7px 9px;
  font:400 13px/1 var(--ui);color:var(--ink)}
.src .d{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:none}
.src.on{background:var(--accentTint);border-color:rgba(107,127,215,.28)}
.src.on .d{background:var(--accent)}
.src:hover{background:rgba(0,0,0,.05)}
.src.on:hover{background:var(--accentTint)}

/* ---------------------------- the app window ---------------------------- */
/* MainWindow: sidebar 186. ChatPane: conversations 172, a hairline, the thread. */
.win{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1000px,calc(100vw - 40px));height:min(600px,calc(100svh - 120px));
  display:none;grid-template-columns:186px 172px minmax(0,1fr);overflow:hidden;
  background:var(--sidebar);border-radius:16px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 24px 60px -12px rgba(0,0,0,.42),
    0 6px 16px rgba(0,0,0,.16)}
.win[data-open="true"]{display:grid}
.side{background:var(--sidebar);display:flex;flex-direction:column;gap:1px;
  padding:0 6px 8px}
.tl{display:flex;gap:8px;height:34px;align-items:center;padding-left:7px;flex:none;
  cursor:default;touch-action:none}

.tl button{width:12px;height:12px;border-radius:50%;border:0;padding:0;cursor:pointer;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08);position:relative;
  font:700 9px/12px var(--ui);color:transparent}
.tl:hover button{color:rgba(0,0,0,.62)}
.tl .c{background:#FF5F57}.tl .m{background:#FEBC2E}.tl .z{background:#28C840}
.grp{font:600 9px/1 var(--ui);letter-spacing:1.1px;
  color:var(--ink3);padding:16px 8px 4px}
.row{display:flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;
  border-radius:8px;padding:6px 8px;font:400 12px/1 var(--ui);color:var(--ink2);text-align:left}
.row:hover{background:rgba(28,27,23,.04)}
.row[aria-current="true"]{background:rgba(107,127,215,.13);color:var(--ink);font-weight:600}
.row .g{width:14px;text-align:center;opacity:.8;font-size:11px}
.side .spacer{flex:1}
.side .foot{font-size:10.5px;color:var(--ink3);padding:8px;border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:6px;margin-top:6px}
.side .foot .d{width:6px;height:6px;border-radius:50%;background:#4E7A52}

.convos{background:var(--paper);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;padding:16px 6px 12px;
  border-radius:11px 0 0 11px;border:1px solid var(--rule);border-right-width:1px;
  margin:6px 0 6px 0}
.convos .h{display:flex;align-items:center;padding:0 6px 8px;
  font:600 9px/1 var(--ui);letter-spacing:1.1px;color:var(--ink3)}
.convos .h button{margin-left:auto;border:0;background:transparent;cursor:pointer;
  color:var(--ink3);font-size:12px;padding:0}
.day{font:600 9px/1 var(--ui);letter-spacing:1.1px;
  color:var(--ink3);padding:12px 8px 4px}
.convo{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  border-radius:8px;padding:7px 8px;font:400 12px/1.35 var(--ui);color:var(--ink2)}
.convo[aria-current="true"]{background:rgba(107,127,215,.13);color:var(--ink)}
.convo:hover{background:rgba(28,27,23,.04)}

.thread{display:flex;flex-direction:column;min-width:0;background:var(--raised);
  border-radius:0 11px 11px 0;border:1px solid var(--rule);border-left:0;
  margin:6px 6px 6px 0;overflow:hidden}
.live{display:none;align-items:center;gap:8px;padding:8px 32px;background:var(--accentTint);
  font:400 11px/1 var(--ui);color:var(--ink2);flex:none}
.live[data-on="true"]{display:flex}
.live .d{width:6px;height:6px;border-radius:50%;background:var(--ink3)}
.live[data-mode="listening"] .d{background:var(--bad)}
.live .end{margin-left:auto;border:0;background:transparent;cursor:pointer;
  font:600 11px/1 var(--ui);color:var(--accentDeep)}
.turns{flex:1;min-height:0;overflow-y:auto;padding:24px 32px;display:flex;
  flex-direction:column;gap:20px}
.greet h1{font:400 30px/1.15 var(--serif);color:var(--ink);margin:4px 0 8px}
.greet p{margin:0;font:400 15px/1.5 var(--serif);color:var(--ink2);max-width:560px}
.turn .m{display:flex;gap:8px;align-items:baseline;margin-bottom:6px}
.turn .l{font:600 9px/1 var(--ui);letter-spacing:1.1px;color:var(--ink3)}
.turn .t{font:400 9px/1 var(--mono);color:var(--ink3)}
.turn p{margin:0;font:400 15px/1.5 var(--serif);color:var(--ink2);max-width:560px}
.turn.err p{color:#8c342b}
.compose{flex:none;display:flex;gap:8px;align-items:center;padding:12px 32px 20px;
  border-top:1px solid var(--rule)}
.compose input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--ruleStrong);
  border-radius:10px;padding:10px 12px;font:400 13.5px/1 var(--ui);color:var(--ink)}
.compose input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.compose .mic{border-color:var(--ruleStrong);background:var(--paper);color:var(--ink2)}
.compose .mic[data-on="true"]{background:var(--bad);border-color:var(--bad);color:#fff}
.compose .send{appearance:none;border:0;cursor:pointer;background:var(--accent);
  color:var(--onAccent);border-radius:10px;padding:10px 16px;font:600 13px/1 var(--ui)}
.tips{display:flex;gap:6px;flex-wrap:wrap;padding:0 32px 4px;flex:none}
.tip{appearance:none;cursor:pointer;background:var(--sunk);border:1px solid var(--rule);
  color:var(--ink2);border-radius:999px;padding:6px 11px;font:400 12px/1 var(--ui)}
.tip:hover{background:var(--accentTint);color:var(--accentDeep);border-color:rgba(107,127,215,.3)}

/* ---------------------------- the dock ---------------------------- */
.dock{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:35;
  display:flex;align-items:flex-end;gap:5px;padding:5px 5px 11px;
  background:rgba(255,255,255,.2);backdrop-filter:saturate(190%) blur(26px);
  -webkit-backdrop-filter:saturate(190%) blur(26px);
  border:.5px solid rgba(255,255,255,.18);border-radius:30px;
  box-shadow:0 14px 40px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55)}
.tile{position:relative;width:64px;height:64px;border-radius:14px;border:0;cursor:pointer;overflow:hidden;
  padding:0;display:grid;place-items:center;font:600 23px/1 var(--ui);color:#fff;
  box-shadow:0 3px 8px -2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.34)}
.tile .run{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  width:4.5px;height:4.5px;border-radius:50%;background:rgba(0,0,0,.55);opacity:0}
.tile[data-running="true"] .run{opacity:1}
.tile.moe{background:#fff url(/assets/icon-180.png) center/cover}
.dock .sep{width:1px;height:44px;background:rgba(255,255,255,.18);margin:0 4px;
  align-self:center}
.dock .trash{background:linear-gradient(180deg,#dfe5ea,#b9c3cc);color:#4a5560}

/* The only thing on this page that says there is anything to do. It was a
   12px pill under the notch, and people read the page, never held the space
   bar, and left thinking the playground was a picture of one. So it starts
   the size of an instruction and becomes a reminder the first time somebody
   actually holds space (`learnPTT`, remembered per browser). Both states are
   the same element, so the shrink is a transition and not a swap. */
/* **Centred without a transform, and never scaled.** Both halves of that are
   why the big hint came out soft. `left:50%` plus `translateX(-50%)` lands
   the box on a half pixel whenever its width is odd, and a `scale()` pulse
   makes the browser rasterise the text once and then resample it every
   frame — on a backdrop-filtered layer that is a blur you can see, and the
   owner saw it. Auto margins centre on whole pixels, and the pulse is now
   the shadow and the background, which cost the glyphs nothing. */
.hint{position:absolute;top:calc(var(--bar) + 12px);left:0;right:0;
  margin-inline:auto;width:max-content;max-width:calc(100% - 32px);
  z-index:50;color:#fff;font-size:12px;padding:5px 11px;border-radius:999px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(10px);
  transition:opacity .4s,font-size .45s,padding .45s,background-color .45s,top .45s;
  pointer-events:none;white-space:nowrap;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased}
.hint[data-gone="true"]{opacity:0}

.hint[data-big="true"]{top:calc(var(--bar) + 26px);
  font-size:clamp(15px,1.7vw,20px);font-weight:600;letter-spacing:-.01em;
  padding:13px 24px;background:rgba(0,0,0,.62);
  animation:hintbeat 2.8s ease-in-out infinite}
.hint[data-big="true"] kbd{font-size:.86em;padding:4px 9px;margin:0 3px;
  background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.42)}
@keyframes hintbeat{
  0%,100%{box-shadow:0 8px 26px rgba(0,0,0,.30),0 0 0 0 rgba(255,255,255,.14)}
  50%    {box-shadow:0 12px 38px rgba(0,0,0,.38),0 0 0 7px rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
  .hint[data-big="true"]{animation:none;box-shadow:0 8px 26px rgba(0,0,0,.30)}
}

@media (max-width:900px){
  .win{grid-template-columns:186px minmax(0,1fr)}
  .convos{display:none}
}
@media (max-width:760px){
  .menubar .mm{display:none}
  .win{width:calc(100vw - 16px);height:calc(100svh - 140px);
    grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  /* the close button lives in the sidebar, so the sidebar collapses to just it */
  .side{display:flex;flex-direction:row;align-items:center;padding:0 8px;
    border-right:0;border-bottom:1px solid var(--rule)}
  .side .grp,.side .row,.side .foot,.side .spacer{display:none}
  .side .tl{height:36px}
  .dock{gap:4px;padding:5px 7px}
  .tile{width:36px;height:36px;border-radius:9px;font-size:14px}
  .dock .tile:nth-child(n+9):not(.moe){display:none}
}

/* the head runs ahead of its own tail */
@keyframes lapHead{from{stroke-dashoffset:-15}to{stroke-dashoffset:-115}}
.trail .tail{stroke-dasharray:20 80}
.trail .glow,.trail .head{stroke-dasharray:5 95}
@media (prefers-reduced-motion:no-preference){
  .trail .glow,.trail .head{animation-name:lapHead}
}

/* dock icons, drawn rather than borrowed */

/* the beat before the first token arrives */
.waiting{opacity:.5;animation:breathe 1.15s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.28}50%{opacity:.72}}
@media (prefers-reduced-motion:reduce){.waiting{animation:none}}

/* announced, not seen */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* what the playground is, said before anyone types into it */
.greet .disclose{margin-top:14px;font-size:12.5px;color:var(--ink3);max-width:58ch}
.greet .disclose a{color:var(--accentDeep)}

/* a dock cannot be wider than the screen it sits on */
.dock{max-width:calc(100vw - 10px)}
@media (max-width:440px){
  .dock{gap:3px;padding:5px 6px}
  .dock .tile:nth-child(n+7):not(.moe){display:none}
  .dock .tile{width:34px;height:34px;border-radius:9px;font-size:13px}
}

/* the Settings shortcut, and the two states the app's footer shows */
.row.settings{position:relative}
.row .kbd{margin-left:auto;font:400 10px/1 var(--mono);color:var(--ink3)}
.side .foot{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.side .foot span{display:flex;align-items:center;gap:6px}
.side .foot .d.warn{background:#B07D29}

/* the composer is a card in the app, not a rule with a bordered field on it */
.compose{border-top:0;padding:8px 32px 20px}
.compose .card{flex:1;display:flex;gap:8px;align-items:center;min-width:0;
  background:var(--paper);border:2px solid var(--ruleStrong);border-radius:14px;
  padding:12px 16px}
.compose input{background:transparent;border:0;padding:0;font:400 13px/1.2 var(--ui)}
.compose input:focus{outline:0}
.compose .card:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(107,127,215,.45)}
.compose .card:focus-within{border-color:var(--accent)}
.compose .mic{width:26px;height:26px;border:0;background:transparent;color:var(--ink3)}
.compose .mic:hover{background:rgba(28,27,23,.06)}
.compose .send{width:26px;height:26px;border-radius:50%;padding:0;display:grid;
  place-items:center;font:700 13px/1 var(--ui);flex:none}

/* SF Symbols at 12pt in a 16pt slot, per MainWindow */
.row .g{width:16px;height:16px;display:grid;place-items:center;opacity:1}
.row .g svg{width:14px;height:14px;display:block;color:var(--ink3)}
.row[aria-current="true"] .g svg{color:var(--accentDeep)}

/* where it looked */
.cites{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.cites i{font-style:normal;font:500 10.5px/1 var(--mono);color:var(--accentDeep);
  background:var(--accentTint);border:1px solid rgba(107,127,215,.28);
  border-radius:5px;padding:5px 7px}
.i-msg .cites i{color:#9dbad6;background:rgba(157,186,214,.13);
  border-color:rgba(157,186,214,.26)}

/* Hold to talk. A keyboard has the space bar; touch gets a button you hold. */
.hint kbd{font:600 11px/1 var(--mono);background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:2px 5px;margin:0 1px}
.ptt{display:none;position:absolute;right:16px;bottom:96px;z-index:36;
  align-items:center;gap:9px;padding:12px 18px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);color:#fff;font:600 14px/1 var(--ui);
  background:rgba(20,18,14,.55);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);touch-action:none;
  -webkit-user-select:none;user-select:none}
.ptt svg{width:17px;height:17px;display:block}
.ptt[data-on="true"]{background:var(--g-listen);border-color:var(--g-listen);color:#0d2417}
@media (hover:none),(pointer:coarse){
  .ptt{display:inline-flex}
  .hint{display:none}
}

/* the icons are drawn, so the tile is only a mask and a shadow */
.tile svg{width:100%;height:100%;display:block}
/* ---------------------------------------------------------------- the other
   apps on the desk. Seven windows, all absolute and sized in px so the script
   can place, show and hide them: .win2[data-app][data-open]. Moe's window is
   .win and is not touched by anything here. */
.win2{position:absolute;z-index:28;left:80px;top:64px;display:none;flex-direction:column;overflow:hidden;
  background:var(--paper);color:var(--ink);border-radius:16px;
  font:13px/1.45 var(--ui);-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;
  box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 24px 60px -12px rgba(0,0,0,.42),
    0 6px 16px rgba(0,0,0,.16)}
.win2[data-open="true"]{display:flex}
.win2 *{box-sizing:border-box}
.win2 ::-webkit-scrollbar{width:0;height:0}

/* the title bar every window carries: lights left, title in the middle */
.win2 .w2bar{position:relative;flex:none;display:flex;align-items:center;height:38px;
  padding:0 12px;background:var(--sidebar);border-bottom:1px solid var(--rule)}
.win2 .w2bar .tl{height:auto;padding-left:0}
.win2 .w2bar .ttl{position:absolute;left:78px;right:78px;text-align:center;
  font:600 13px/1 var(--ui);color:var(--ink);pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win2 .w2bar .ttl i{font-style:normal;font-weight:400;color:var(--ink3)}
.win2 .w2bar .btns{margin-left:auto;display:flex;align-items:center;gap:14px;
  color:var(--ink3)}
.win2 .w2bar .btns svg{width:15px;height:15px;display:block}
.win2 .w2body{flex:1;min-height:0;display:flex}

/* a source-list sidebar, shared by Mail, Notes, Finder, Messages, Calendar */
.win2 .sb{flex:none;background:var(--sidebar);border-right:1px solid var(--rule);
  padding:6px 8px 10px;overflow:hidden}
.win2 .sb .h{font:600 10px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);padding:13px 7px 5px}
.win2 .sb .h:first-child{padding-top:6px}
.win2 .sb .it{display:flex;align-items:center;gap:8px;border-radius:7px;padding:5px 7px;
  font:400 12.5px/1.35 var(--ui);color:var(--ink2)}
.win2 .sb .it .ic{width:16px;height:16px;flex:none;display:grid;place-items:center;
  color:var(--accent)}
.win2 .sb .it .ic svg{width:14px;height:14px;display:block}
.win2 .sb .it .n{margin-left:auto;font:600 11px/1 var(--ui);color:var(--ink3);
  font-variant-numeric:tabular-nums}
.win2 .sb .it.on{background:rgba(107,127,215,.15);color:var(--ink);font-weight:590}
.win2 .sb .it.on .n{color:var(--accentDeep)}
.win2 .sb .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-left:3px}

/* ------------------------------------------------------------------- Mail */
.win2[data-app="mail"]{width:900px;height:580px}
.win2[data-app="mail"] .sb{width:176px}
.win2[data-app="mail"] .list{flex:none;width:268px;background:var(--paper);
  border-right:1px solid var(--rule);overflow:hidden}
.win2 .m-row{display:block;padding:9px 12px 10px 22px;position:relative;
  border-bottom:1px solid var(--rule)}
.win2 .m-row.on{background:rgba(107,127,215,.15)}
.win2 .m-row .unread{position:absolute;left:8px;top:14px;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.win2 .m-row .top{display:flex;align-items:baseline;gap:8px}
.win2 .m-row .from{font:600 12.5px/1.3 var(--ui);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win2 .m-row .when{margin-left:auto;font:400 11px/1.3 var(--ui);color:var(--ink3);
  flex:none}
.win2 .m-row .subj{font:400 12.5px/1.35 var(--ui);color:var(--ink);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win2 .m-row .prev{font:400 12px/1.35 var(--ui);color:var(--ink3);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.win2 .m-read{flex:1;min-width:0;background:var(--raised);overflow:hidden;
  display:flex;flex-direction:column}
.win2 .m-head{flex:none;padding:20px 26px 14px;border-bottom:1px solid var(--rule)}
.win2 .m-head h2{margin:0 0 12px;font:600 17px/1.3 var(--ui);color:var(--ink)}
.win2 .m-head .who{display:flex;align-items:center;gap:10px}
.win2 .m-head .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--accentTint);color:var(--accentDeep);
  font:600 12px/1 var(--ui)}
.win2 .m-head .nm{font:600 12.5px/1.35 var(--ui);color:var(--ink)}
.win2 .m-head .to{font:400 11.5px/1.35 var(--ui);color:var(--ink3)}
.win2 .m-head .dt{margin-left:auto;font:400 11.5px/1.35 var(--ui);color:var(--ink3);
  text-align:right}
.win2 .m-body{flex:1;min-height:0;padding:20px 26px;overflow:hidden;
  font:400 13.5px/1.62 var(--ui);color:var(--ink)}
.win2 .m-body p{margin:0 0 13px}
.win2 .m-body .sig{color:var(--ink3)}
.win2 .m-att{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  padding:6px 11px 6px 8px;border:1px solid var(--rule);border-radius:8px;
  background:var(--paper);font:400 12px/1 var(--ui);color:var(--ink2)}
.win2 .m-att .pdf{width:18px;height:22px;border-radius:2px;background:#fff;
  border:1px solid var(--ruleStrong);display:grid;place-items:end center;
  font:700 5.5px/1 var(--ui);color:var(--bad);padding-bottom:2px}

/* ----------------------------------------------------------------- Safari */
.win2[data-app="safari"]{width:880px;height:560px}
.win2[data-app="safari"] .w2bar{border-bottom:0;height:36px;background:#F6F3E6}
.win2 .s-tool{flex:none;display:flex;align-items:center;gap:10px;padding:0 12px 8px;
  background:#F6F3E6}
.win2 .s-nav{display:flex;align-items:center;gap:2px;color:var(--ink3)}
.win2 .s-nav b{width:26px;height:24px;border-radius:6px;display:grid;place-items:center;
  font-weight:400}
.win2 .s-nav b.off{opacity:.32}
.win2 .s-nav svg{width:13px;height:13px;display:block}
.win2 .s-url{flex:1;min-width:0;height:28px;border-radius:8px;background:var(--sunk);
  display:flex;align-items:center;justify-content:center;gap:6px;
  font:400 12.5px/1 var(--ui);color:var(--ink2);padding:0 12px}
.win2 .s-url .lock{width:9px;height:11px;border-radius:1.5px;border:1.4px solid var(--ink3);
  border-top:0;position:relative;flex:none}
.win2 .s-url .lock::before{content:"";position:absolute;left:1.4px;top:-4.4px;width:4.4px;
  height:4.4px;border:1.4px solid var(--ink3);border-bottom:0;border-radius:3px 3px 0 0}
.win2 .s-url .dom{color:var(--ink)}
.win2 .s-tabs{flex:none;display:flex;gap:1px;padding:0 8px;background:#F6F3E6;
  border-bottom:1px solid var(--ruleStrong)}
.win2 .s-tab{flex:1;min-width:0;height:30px;display:flex;align-items:center;gap:7px;
  padding:0 10px;font:400 12px/1 var(--ui);color:var(--ink3);
  border-radius:7px 7px 0 0;white-space:nowrap;overflow:hidden}
.win2 .s-tab .fav{width:13px;height:13px;border-radius:3px;flex:none}
.win2 .s-tab span{overflow:hidden;text-overflow:ellipsis}
.win2 .s-tab.on{background:var(--raised);color:var(--ink);
  box-shadow:0 0 0 .5px rgba(0,0,0,.07)}
.win2 .s-page{flex:1;min-height:0;background:#fff;overflow:hidden}
.win2 .s-hd{display:flex;align-items:center;gap:22px;padding:15px 28px;
  border-bottom:1px solid #ECE7DA}
.win2 .s-hd .logo{font:400 17px/1 var(--serif);letter-spacing:.14em;color:#2B3A2E;
  text-transform:uppercase}
.win2 .s-hd .nav{display:flex;gap:18px;font:400 11.5px/1 var(--ui);color:#5B6A5E;
  letter-spacing:.05em;text-transform:uppercase}
.win2 .s-hd .bag{margin-left:auto;font:400 11.5px/1 var(--ui);color:#5B6A5E}
.win2 .s-main{padding:20px 28px}
.win2 .s-main h1{margin:0 0 4px;font:400 25px/1.2 var(--serif);color:#22301F}
.win2 .s-main .lede{margin:0 0 14px;font:400 12.5px/1.5 var(--ui);color:#6B7A6D;
  max-width:52ch}
.win2 .s-chips{display:flex;gap:7px;margin-bottom:16px}
.win2 .s-chips b{font:400 11.5px/1 var(--ui);padding:6px 11px;border-radius:999px;
  border:1px solid #DCD6C6;color:#5B6A5E;font-weight:400}
.win2 .s-chips b.on{background:#2E4632;border-color:#2E4632;color:#fff}
.win2 .s-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  align-items:start}
/* the product shot: a soft wash, a cluster of blurred petals over it, a vignette */
.win2 .s-card .ph{height:146px;border-radius:7px;position:relative;overflow:hidden;
  background:#E7EBE0}
.win2 .s-card .ph::before{content:"";position:absolute;inset:-18%;filter:blur(12px);
  background:
    radial-gradient(circle at 62% 34%,#FFFDF6 0 18%,rgba(255,253,246,0) 60%),
    radial-gradient(circle at 22% 70%,#DCE6D4 0 20%,rgba(220,230,212,0) 62%),
    linear-gradient(158deg,#EDF0E6,#D3DCCB)}
.win2 .s-card .ph .bl{position:absolute;inset:0;filter:blur(1.8px);
  background:
    radial-gradient(circle at 24% 41%,#FFFFFF 0 5.6%,rgba(255,255,255,0) 6.1%),
    radial-gradient(circle at 33% 31%,#F9F8F0 0 4.6%,rgba(0,0,0,0) 5.1%),
    radial-gradient(circle at 44% 41%,#FFFFFF 0 6%,rgba(0,0,0,0) 6.5%),
    radial-gradient(circle at 54% 29%,#F5F4EA 0 4.4%,rgba(0,0,0,0) 4.9%),
    radial-gradient(circle at 63% 39%,#FFFFFF 0 5.4%,rgba(0,0,0,0) 5.9%),
    radial-gradient(circle at 74% 30%,#F2F1E6 0 4%,rgba(0,0,0,0) 4.5%),
    radial-gradient(circle at 31% 55%,#FDFCF5 0 5%,rgba(0,0,0,0) 5.5%),
    radial-gradient(circle at 47% 58%,#F4F3E9 0 4.4%,rgba(0,0,0,0) 4.9%),
    radial-gradient(circle at 62% 55%,#FFFFFF 0 4.8%,rgba(0,0,0,0) 5.3%),
    radial-gradient(circle at 78% 48%,#F8F7EF 0 4.2%,rgba(0,0,0,0) 4.7%),
    radial-gradient(circle at 17% 60%,#EFEEE2 0 3.6%,rgba(0,0,0,0) 4.1%),
    radial-gradient(circle at 86% 60%,#8EA787 0 5.4%,rgba(0,0,0,0) 5.9%),
    radial-gradient(circle at 13% 74%,#7B9475 0 6%,rgba(0,0,0,0) 6.5%),
    radial-gradient(circle at 38% 74%,#89A382 0 5%,rgba(0,0,0,0) 5.5%),
    radial-gradient(circle at 66% 76%,#6C8767 0 6.4%,rgba(0,0,0,0) 6.9%),
    radial-gradient(circle at 50% 92%,#5F7B5B 0 8%,rgba(0,0,0,0) 8.5%)}
.win2 .s-card .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 56%,rgba(40,50,38,.13))}
.win2 .s-card.two .ph .bl{transform:scale(-1,1) rotate(4deg) scale(1.08)}
.win2 .s-card.three .ph .bl{transform:rotate(-6deg) scale(1.05);filter:blur(3.4px) saturate(.9)}
.win2 .s-card .nm{margin-top:10px;font:400 13.5px/1.3 var(--serif);color:#22301F}
.win2 .s-card .pr{margin-top:3px;font:400 12px/1.3 var(--ui);color:#4A5A4C}
.win2 .s-card .dl{margin-top:5px;font:400 11px/1.3 var(--ui);color:#8A968B}
.win2 .s-promo{padding:6px 28px;background:#F4F2EA;border-bottom:1px solid #ECE7DA;
  font:400 10.5px/1.4 var(--ui);color:#6B7A6D;letter-spacing:.03em;text-align:center}
.win2 .s-foot{margin-top:20px;padding:12px 28px 0;border-top:1px solid #ECE7DA;
  display:flex;gap:22px;font:400 10.5px/1.4 var(--ui);color:#8A968B}
.win2 .s-foot em{margin-left:auto;font-style:normal}

/* --------------------------------------------------------------- Messages */
.win2[data-app="messages"]{width:640px;height:490px}
.win2[data-app="messages"] .sb{width:210px;padding:6px 7px}
.win2 .g-row{display:flex;gap:9px;padding:8px 8px;border-radius:9px}
.win2 .g-row.on{background:rgba(107,127,215,.15)}
.win2 .g-row .av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:#C9CFE9;color:#3E4A7A;font:600 11.5px/1 var(--ui)}
.win2 .g-row .av.o{background:#DCD5C2;color:#6A5F44}
.win2 .g-row .av.p{background:#CFE0D2;color:#3E5C46}
.win2 .g-row .tx{min-width:0;flex:1}
.win2 .g-row .nm{display:flex;align-items:baseline;gap:6px;
  font:600 12.5px/1.3 var(--ui);color:var(--ink)}
.win2 .g-row .nm em{margin-left:auto;font-style:normal;font:400 10.5px/1.3 var(--ui);
  color:var(--ink3)}
.win2 .g-row .sn{font:400 11.5px/1.35 var(--ui);color:var(--ink3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.win2 .g-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--raised)}
.win2 .g-top{flex:none;height:42px;display:flex;align-items:center;justify-content:center;
  gap:8px;border-bottom:1px solid var(--rule);font:600 12.5px/1 var(--ui);color:var(--ink)}
.win2 .g-top .av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:#CFE0D2;color:#3E5C46;font:600 9px/1 var(--ui)}
.win2 .g-thread{flex:1;min-height:0;padding:12px 16px 4px;display:flex;
  flex-direction:column;gap:3px;overflow:hidden;justify-content:flex-end}
.win2 .g-when{text-align:center;font:400 10px/1 var(--ui);color:var(--ink3);
  padding:6px 0 5px}
.win2 .g-when b{color:var(--ink2);font-weight:600}
.win2 .g-thread .b{max-width:74%;padding:7px 12px;border-radius:17px;
  font:400 13px/1.4 var(--ui);width:fit-content}
.win2 .g-thread .b.in{background:var(--sunk);color:var(--ink);align-self:flex-start;
  border-bottom-left-radius:5px}
.win2 .g-thread .b.out{background:#3B78F5;color:#fff;align-self:flex-end;
  border-bottom-right-radius:5px}
.win2 .g-tail{align-self:flex-end;font:400 10px/1 var(--ui);color:var(--ink3);
  padding:3px 6px 0}
.win2 .g-fld{flex:none;display:flex;align-items:center;gap:9px;padding:9px 14px 12px}
.win2 .g-fld .box{flex:1;height:29px;border:1px solid var(--ruleStrong);border-radius:15px;
  display:flex;align-items:center;padding:0 12px;font:400 12.5px/1 var(--ui);
  color:var(--ink3);background:var(--paper)}
.win2 .g-fld .up{width:24px;height:24px;border-radius:50%;background:var(--sunk);
  display:grid;place-items:center;color:var(--ink3);font-size:12px;flex:none}

/* --------------------------------------------------------------- Calendar */
.win2[data-app="calendar"]{width:900px;height:560px}
.win2 .c-tool{flex:none;display:flex;align-items:center;gap:14px;height:42px;
  padding:0 16px;border-bottom:1px solid var(--rule);background:var(--paper)}
.win2 .c-tool .mo{font:600 15px/1 var(--ui);color:var(--ink)}
.win2 .c-tool .arrows{display:flex;align-items:center;gap:14px;color:var(--ink3);
  font-size:11px}
.win2 .c-tool .today{font:400 11.5px/1 var(--ui);color:var(--ink2);
  border:1px solid var(--ruleStrong);border-radius:6px;padding:5px 10px}
.win2 .c-seg{margin-left:auto;display:flex;border:1px solid var(--ruleStrong);
  border-radius:7px;overflow:hidden;font:400 11.5px/1 var(--ui)}
.win2 .c-seg b{padding:5px 12px;color:var(--ink2);font-weight:400;
  border-right:1px solid var(--ruleStrong)}
.win2 .c-seg b:last-child{border-right:0}
.win2 .c-seg b.on{background:var(--accent);color:#fff}
.win2 .c-days{flex:none;display:flex;border-bottom:1px solid var(--rule);
  background:var(--paper)}
.win2 .c-days .gut{width:54px;flex:none;border-right:1px solid var(--rule)}
.win2 .c-days .d{flex:1;text-align:center;padding:7px 0 8px;
  border-right:1px solid var(--rule)}
.win2 .c-days .d:last-child{border-right:0}
.win2 .c-days .wd{font:400 10px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3)}
.win2 .c-days .dn{font:400 20px/1.2 var(--ui);color:var(--ink2);margin-top:3px}
.win2 .c-days .d.now .wd{color:var(--accentDeep)}
.win2 .c-days .d.now .dn{display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;background:var(--accent);color:#fff;font-size:16px;line-height:1;
  margin:2px auto 0}
.win2 .c-all{flex:none;display:flex;height:34px;border-bottom:1px solid var(--ruleStrong);
  background:var(--paper)}
.win2 .c-all .gut{width:54px;flex:none;border-right:1px solid var(--rule);
  font:400 9.5px/1 var(--ui);color:var(--ink3);text-align:right;padding:6px 6px 0}
.win2 .c-all .d{flex:1;border-right:1px solid var(--rule);padding:5px 4px}
.win2 .c-all .d:last-child{border-right:0}
.win2 .c-grid{flex:1;min-height:0;display:flex;overflow:hidden;background:var(--raised);
  position:relative}
.win2 .c-gut{width:54px;flex:none;border-right:1px solid var(--rule);background:var(--paper)}
.win2 .c-gut b{display:block;height:40px;font:400 9.5px/1 var(--ui);color:var(--ink3);
  text-align:right;padding:3px 7px 0 0;font-weight:400}
.win2 .c-col{flex:1;position:relative;border-right:1px solid var(--rule)}
.win2 .c-col:last-child{border-right:0}
.win2 .c-col.now{background:rgba(107,127,215,.05)}
.win2 .c-col i{position:absolute;left:0;right:0;height:40px;
  border-bottom:1px solid var(--rule)}
.win2 .ev{position:absolute;left:3px;right:3px;border-radius:5px;overflow:hidden;
  padding:3px 5px 3px 7px;background:var(--accentTint);
  box-shadow:inset 3px 0 0 var(--accent)}
.win2 .ev .t{font:600 10.5px/1.25 var(--ui);color:#2F3E7A;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win2 .ev .h{font:400 10px/1.25 var(--ui);color:#5A67A0}
.win2 .ev.green{background:#E1EEE3;box-shadow:inset 3px 0 0 #4E7A52}
.win2 .ev.green .t{color:#2C4531}.win2 .ev.green .h{color:#4E7052}
.win2 .ev.amber{background:#F6EBD7;box-shadow:inset 3px 0 0 #B07D29}
.win2 .ev.amber .t{color:#59421A}.win2 .ev.amber .h{color:#8A6A31}
.win2 .allday{border-radius:5px;padding:3px 7px;background:#F0E4EC;
  box-shadow:inset 3px 0 0 #9A5C86}
.win2 .allday .t{font:600 10.5px/1.25 var(--ui);color:#5E3450;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win2 .c-line{position:absolute;left:54px;right:0;height:1px;background:var(--bad);
  z-index:3}
.win2 .c-line::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--bad)}

/* ------------------------------------------------------------------ Notes */
.win2[data-app="notes"]{width:760px;height:500px}
.win2[data-app="notes"] .sb{width:172px}
.win2[data-app="notes"] .n-list{flex:none;width:214px;background:var(--paper);
  border-right:1px solid var(--rule);padding:6px}
.win2 .n-search{height:26px;border-radius:7px;background:var(--sunk);margin:2px 2px 8px;
  display:flex;align-items:center;gap:6px;padding:0 9px;font:400 12px/1 var(--ui);
  color:var(--ink3)}
.win2 .n-item{border-radius:8px;padding:7px 9px 8px;
  box-shadow:inset 0 -1px 0 var(--rule)}
.win2 .n-item.on{background:rgba(107,127,215,.15);box-shadow:none}
.win2 .n-item .t{font:600 12.5px/1.35 var(--ui);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win2 .n-item .s{font:400 11.5px/1.35 var(--ui);color:var(--ink3);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win2 .n-item .s b{color:var(--ink2);font-weight:400}
.win2 .n-doc{flex:1;min-width:0;background:var(--raised);display:flex;
  flex-direction:column}
.win2 .n-fmt{flex:none;height:34px;display:flex;align-items:center;gap:18px;
  justify-content:center;border-bottom:1px solid var(--rule);color:var(--ink3);
  font:400 12px/1 var(--ui)}
.win2 .n-fmt b{font-weight:400}
.win2 .n-pg{flex:1;min-height:0;padding:22px 44px;overflow:hidden}
.win2 .n-pg .stamp{font:400 10.5px/1 var(--ui);color:var(--ink3);text-align:center;
  margin-bottom:16px}
.win2 .n-pg h2{margin:0 0 10px;font:600 20px/1.3 var(--serif);color:var(--ink)}
.win2 .n-pg p{margin:0 0 11px;font:400 14.5px/1.6 var(--serif);color:var(--ink);
  max-width:60ch}
.win2 .n-pg ul{margin:0 0 11px;padding-left:20px}
.win2 .n-pg li{font:400 14.5px/1.6 var(--serif);color:var(--ink)}
.win2 .n-pg li s{color:var(--ink3)}
.win2 .n-pg .chk{list-style:none;padding-left:0}
.win2 .n-pg .chk li{display:flex;gap:9px;align-items:flex-start}
.win2 .n-pg .chk i{width:14px;height:14px;border-radius:50%;border:1.4px solid var(--ruleStrong);
  flex:none;margin-top:5px}
.win2 .n-pg .chk li span{min-width:0}
.win2 .n-pg .chk i.d{background:var(--accent);border-color:var(--accent)}

/* ----------------------------------------------------------------- Finder */
.win2[data-app="finder"]{width:760px;height:460px}
.win2[data-app="finder"] .sb{width:178px}
.win2 .f-main{flex:1;min-width:0;background:var(--raised);display:flex;
  flex-direction:column}
.win2 .f-cols{flex:none;display:flex;height:26px;align-items:center;
  border-bottom:1px solid var(--rule);background:var(--paper);
  font:400 11px/1 var(--ui);color:var(--ink3)}
.win2 .f-cols b,.win2 .f-row .c{font-weight:400;padding:0 10px}
.win2 .f-cols b{border-right:1px solid var(--rule);height:100%;display:flex;
  align-items:center}
.win2 .f-cols b:last-child{border-right:0}
.win2 .cn{flex:1;min-width:0}.win2 .cd{width:146px;flex:none}
.win2 .cs{width:70px;flex:none;text-align:right}.win2 .ck{width:112px;flex:none}
/* the stripes keep going under the last file, the way Finder's list does */
.win2 .f-rows{flex:1;min-height:0;overflow:hidden;background:repeating-linear-gradient(
  180deg,var(--raised) 0 24px,var(--paper) 24px 48px)}
.win2 .f-row{display:flex;align-items:center;height:24px;font:400 12px/1 var(--ui);
  color:var(--ink)}
.win2 .f-row.on{background:var(--accent);color:#fff}
.win2 .f-row.on .c{color:#fff}
.win2 .f-row .c{padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink2)}
.win2 .f-row .cn{display:flex;align-items:center;gap:7px;color:var(--ink)}
.win2 .f-row .cs{text-align:right;font-variant-numeric:tabular-nums}
.win2 .f-row .cd{font-variant-numeric:tabular-nums}
.win2 .fi{width:14px;height:17px;border-radius:2px;flex:none;background:#fff;
  border:1px solid var(--ruleStrong);display:grid;place-items:end center;
  font:700 4.6px/1 var(--ui);color:var(--bad);padding-bottom:1.5px;letter-spacing:.02em}
.win2 .fi.ai{color:#B0752C}
.win2 .fi.fold{background:#7FB6E8;border:0;border-radius:2px 3px 3px 3px;
  box-shadow:inset 0 5px 0 #6AA5DC}
.win2 .f-path{flex:none;height:24px;display:flex;align-items:center;gap:5px;
  padding:0 12px;border-top:1px solid var(--rule);background:var(--paper);
  font:400 10.5px/1 var(--ui);color:var(--ink3)}
.win2 .f-path em{font-style:normal;color:var(--ink3)}
.win2 .f-path b{font-weight:400;color:var(--ink2)}

/* ---------------------------------------------------------------- Preview */
.win2[data-app="preview"]{width:540px;height:660px}
.win2[data-app="preview"] .w2body{flex-direction:column;background:#8A8880}
.win2 .p-tool{flex:none;height:34px;display:flex;align-items:center;gap:16px;
  padding:0 14px;background:var(--sidebar);border-bottom:1px solid var(--ruleStrong);
  font:400 11.5px/1 var(--ui);color:var(--ink3)}
.win2 .p-tool .zoom{margin-left:auto;font-variant-numeric:tabular-nums}
.win2 .p-canvas{flex:1;min-height:0;overflow:hidden;padding:18px 0 0;
  display:flex;justify-content:center;
  background:linear-gradient(180deg,#8A8880,#79776F)}
.win2 .p-page{width:462px;flex:none;background:#fff;color:#14130F;
  padding:38px 40px;font:400 11px/1.6 var(--ui);
  box-shadow:0 3px 14px rgba(0,0,0,.34)}
.win2 .p-page .hd{display:flex;align-items:flex-start}
.win2 .p-page .me{font:400 15px/1.2 var(--serif);letter-spacing:.02em}
.win2 .p-page .me em{display:block;font-style:normal;font:400 9.5px/1.5 var(--ui);
  color:#6C6A62;letter-spacing:.02em;margin-top:4px}
.win2 .p-page .inv{margin-left:auto;text-align:right}
.win2 .p-page .inv b{display:block;font:600 10px/1 var(--ui);letter-spacing:.13em;
  color:#6C6A62}
.win2 .p-page .inv u{display:block;text-decoration:none;font:400 20px/1.3 var(--serif)}
.win2 .p-page .rule{height:1px;background:#E2DFD4;margin:22px 0 18px}
.win2 .p-page .two{display:flex;gap:34px;margin-bottom:24px}
.win2 .p-page .two div{flex:1}
.win2 .p-page .lbl{font:600 8.5px/1 var(--ui);letter-spacing:.13em;color:#8A877D;
  text-transform:uppercase;margin-bottom:5px}
.win2 .p-page table{width:100%;border-collapse:collapse;font:400 10.5px/1.5 var(--ui)}
.win2 .p-page th{text-align:left;font:600 8.5px/1 var(--ui);letter-spacing:.11em;
  text-transform:uppercase;color:#8A877D;padding:0 0 7px;border-bottom:1px solid #E2DFD4}
.win2 .p-page td{padding:9px 0;border-bottom:1px solid #EFEDE5;vertical-align:top}
.win2 .p-page td.r,.win2 .p-page th.r{text-align:right;padding-left:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.win2 .p-page .q{width:58px}.win2 .p-page .ra{width:56px}.win2 .p-page .am{width:74px}
.win2 .p-page .tot{display:flex;margin-top:14px;font:400 10.5px/1.9 var(--ui)}
.win2 .p-page .tot .k{margin-left:auto;text-align:right;color:#6C6A62;min-width:96px}
.win2 .p-page .tot .v{text-align:right;min-width:86px;font-variant-numeric:tabular-nums}
.win2 .p-page .tot .v b{font-weight:600}
.win2 .p-page .due{margin-top:20px;padding-top:14px;border-top:1px solid #E2DFD4;
  font:400 9.5px/1.6 var(--ui);color:#6C6A62}
/* THE WAY IN — see assets/intro.js.
   The cover is in the markup and black before anything else paints, so there
   is no window in which the desktop shows through underneath it. If the
   script never runs at all -- blocked, failed, whatever -- the animation
   clears it on its own rather than leaving a black page. */
.intro{position:fixed;inset:0;z-index:9999;background:#000;will-change:opacity;
  animation:introclear .45s linear 1.8s forwards}
.intro.held{animation:none}
.intro.gone{opacity:0;pointer-events:none;
  transition:opacity .62s cubic-bezier(.33,0,.2,1)}
.intro video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes introclear{to{opacity:0;visibility:hidden}}

/* Deliberately longer than the black takes to clear (.62s), so the desktop
   is still settling after the black has gone. Two animations that end
   together read as two animations; one that outlives the other reads as a
   single camera move finishing. */
.screen.arriving{transform:scale(1.055);transform-origin:50% 46%}
.screen{transition:transform .86s cubic-bezier(.16,.72,.24,1);
  will-change:transform;backface-visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .screen.arriving{transform:none}
}

/* ---------------------------------------------------------- the hands */
/* what Moe did, beside where it looked */
.cites i.did{color:#3E7A52;background:rgba(78,122,82,.1);border-color:rgba(78,122,82,.3)}
.i-msg .cites i.did{color:#8FD0A8;background:rgba(143,208,168,.12);border-color:rgba(143,208,168,.28)}

/* the confirm sheet: before anything leaves, what is going out and to whom */
.confirm{border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.i-msg.confirm{background:rgba(232,168,60,.1);border:1px solid rgba(232,168,60,.35)}
.turn.confirm{background:#FBF3E1;border:1px solid #E8D3A6;max-width:560px}
.confirm .gl{font:600 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#B07D29}
.confirm .kv{display:grid;grid-template-columns:52px minmax(0,1fr);gap:3px 8px;font-size:12.5px}
.confirm .kv i{font-style:normal;opacity:.55}
.i-msg.confirm .kv{color:#EFECE2}
.confirm .body{padding:8px 10px;border-radius:8px;font-size:12.5px;line-height:1.45;
  background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);color:var(--ink)}
.i-msg.confirm .body{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#EFECE2}
.confirm .acts{display:flex;gap:6px;margin-top:4px}
.confirm .acts button{border:0;border-radius:7px;padding:6px 12px;cursor:pointer;font:600 12px/1 var(--ui)}
.confirm .ok{background:#E8A83C;color:#241703}
.confirm .no{background:rgba(0,0,0,.08);color:var(--ink)}
.i-msg.confirm .no{background:rgba(255,255,255,.12);color:#fff}
.i-msg.sys,.turn.sys{font:400 11px/1.4 var(--mono);color:var(--ink3);letter-spacing:.02em}
.i-msg.sys{color:#8D8880}

/* Memory — the list Moe keeps, in the app's own words */
.mempane{flex:1;min-height:0;overflow-y:auto;padding:24px 32px}
.mem-head h1{font:400 26px/1.15 var(--serif);color:var(--ink);margin:0 0 8px}
.mem-head p{margin:0 0 20px;font:400 13px/1.5 var(--ui);color:var(--ink2);max-width:60ch}
.mem-file{margin-bottom:18px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--paper)}
.mem-path{padding:8px 12px;background:var(--sunk);font:500 10.5px/1 var(--mono);color:var(--ink2);border-bottom:1px solid var(--rule)}
.mem-path i{font-style:normal;opacity:.55}
.mem-file ul{list-style:none;margin:0;padding:4px 12px}
.mem-file li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--rule);font:400 12.5px/1.45 var(--ui);color:var(--ink)}
.mem-file li:first-child{border-top:0}
.mem-file li.fresh{background:linear-gradient(90deg,rgba(107,127,215,.12),transparent 60%);margin:0 -12px;padding-inline:12px}
.mem-file .tag{font:500 10px/1 var(--mono);letter-spacing:.04em;white-space:nowrap;border:1px solid var(--ruleStrong);
  border-radius:5px;padding:3px 6px;color:var(--ink2)}
.mem-file .fix{border:0;background:transparent;cursor:pointer;font:400 11px/1 var(--ui);color:var(--accentDeep)}
/* the thread's parts are laid out with flex, which outranks the hidden
   attribute's own display:none — so say it again, louder */
.thread [hidden]{display:none !important}

/* ---------------------------------------------------------- the shop */
.win2 .s-prod{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start}
.win2 .s-card.big .ph{height:280px}
.win2 .s-buy h1{margin:0 0 6px}
.win2 .s-buy .pr{font:400 20px/1.3 var(--serif);color:#22301F;margin-top:8px}
.win2 .s-buy .dl{color:#8A968B;font-size:11px;margin:4px 0 14px}
.win2 .s-btn{appearance:none;border:0;cursor:pointer;background:#2E4632;color:#fff;border-radius:999px;
  padding:10px 18px;font:500 12.5px/1 var(--ui);letter-spacing:.02em}
.win2 .s-line{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #ECE7DA;font-size:13px;color:#22301F}
.win2 .s-line .pr{margin-left:auto;color:#4A5A4C}
.win2 .s-thumb{width:56px;height:44px;border-radius:5px;position:relative;overflow:hidden;background:#E7EBE0;flex:none}
.win2 .s-thumb .bl{position:absolute;inset:0;filter:blur(1.4px);background:radial-gradient(circle at 40% 40%,#fff 0 14%,rgba(0,0,0,0) 15%),radial-gradient(circle at 65% 55%,#F5F4EA 0 12%,rgba(0,0,0,0) 13%),radial-gradient(circle at 30% 75%,#7B9475 0 12%,rgba(0,0,0,0) 13%)}
.win2 .s-sum{display:flex;justify-content:space-between;padding:10px 0;font-size:12.5px;color:#5B6A5E}
.win2 .s-sum.tot{font:500 14px/1.4 var(--ui);color:#22301F;border-top:1px solid #ECE7DA;margin-bottom:12px}
.win2 .s-co .s-fs{padding:10px 0;border-bottom:1px solid #ECE7DA;font-size:12.5px;color:#22301F;line-height:1.5}
.win2 .s-co .lbl{font:600 9.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:#8A968B;margin-bottom:4px}
.win2 .s-msg{font:400 13px/1.5 var(--serif);font-style:italic}
.win2 .s-done h1{margin-bottom:8px}

/* --------------------------------------------------- the pointer, driving */
/* Moe's hand on the Mac: the macOS arrow, moved by easing between named
   targets. Any pointer or key from the visitor stops it dead (the rule). */
.cursor{position:absolute;left:0;top:0;z-index:90;width:18px;height:24px;pointer-events:none;opacity:0;
  transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .2s;will-change:transform;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.cursor[data-on="true"]{opacity:1}
.cursor svg{width:18px;height:24px;display:block}
.cursor .ripple{position:absolute;left:-9px;top:-9px;width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(115,191,242,.9);opacity:0;transform:scale(.4)}
.cursor[data-click="true"] .ripple{animation:ripple .45s ease-out}
@keyframes ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}
@media (prefers-reduced-motion:reduce){.cursor{transition:none}.cursor .ripple{animation:none}}

/* a menu dropped from the menu bar */
.menubar .mm[data-open="true"]{background:rgba(255,255,255,.28)}
.dropmenu{position:absolute;z-index:85;top:calc(var(--bar) + 2px);left:0;min-width:236px;padding:5px;
  background:rgba(252,251,242,.88);backdrop-filter:saturate(180%) blur(28px);-webkit-backdrop-filter:saturate(180%) blur(28px);
  border:.5px solid rgba(0,0,0,.16);border-radius:9px;box-shadow:0 14px 40px -10px rgba(0,0,0,.4);color:var(--ink);
  font:400 13px/1 var(--ui);display:none}
.dropmenu[data-open="true"]{display:block}
.dropmenu div{padding:6px 10px 6px 22px;border-radius:5px;display:flex;justify-content:space-between;gap:24px}
.dropmenu div.sep{padding:0;height:1px;margin:5px 0;background:rgba(0,0,0,.12)}
.dropmenu div.hot{background:var(--accent);color:#fff}
.dropmenu div.dim{color:var(--ink3)}
.dropmenu kbd{font:400 12px/1 var(--ui);color:inherit;opacity:.6}

/* the export sheet, dropped from a window's title bar */
.win2 .sheet2{position:absolute;left:50%;top:38px;transform:translateX(-50%);z-index:5;width:420px;
  background:var(--sidebar);border:.5px solid rgba(0,0,0,.2);border-top:0;border-radius:0 0 12px 12px;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.4);padding:16px 18px 14px;font:400 12.5px/1.4 var(--ui);color:var(--ink);
  display:none;grid-template-columns:96px minmax(0,1fr);gap:9px 10px;align-items:center}
.win2 .sheet2[data-open="true"]{display:grid}
.win2 .sheet2 label{text-align:right;color:var(--ink2)}
.win2 .sheet2 .fld{background:var(--raised);border:1px solid var(--ruleStrong);border-radius:6px;padding:5px 8px}
.win2 .sheet2 .chk{display:flex;align-items:center;gap:8px}
.win2 .sheet2 .box{width:14px;height:14px;border-radius:3.5px;border:1px solid var(--ruleStrong);background:var(--raised);display:grid;place-items:center;font-size:10px;color:#fff}
.win2 .sheet2 .box[data-on="true"]{background:var(--accent);border-color:var(--accent)}
.win2 .sheet2 .btns{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.win2 .sheet2 .btns b{font-weight:400;padding:6px 14px;border-radius:6px;border:1px solid var(--ruleStrong);background:var(--raised)}
.win2 .sheet2 .btns b.go{background:var(--accent);border-color:var(--accent);color:#fff}

/* ------------------------------------------------------ the other ten */
.win2[data-app="reminders"]{width:640px;height:440px}
.win2[data-app="reminders"] .sb{width:200px}
.win2 .r-smart{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 0 6px}
.win2 .r-tile{border-radius:9px;padding:8px 9px;font:500 11px/1.2 var(--ui);color:var(--ink2);background:var(--raised);
  border:1px solid var(--rule);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.win2 .r-tile b{font:600 17px/1 var(--ui);color:var(--ink)}
.win2 .r-tile.blue b{color:#3B78F5}.win2 .r-tile.red b{color:#E2483F}.win2 .r-tile.amber b{color:#E8A64A}
.win2 .r-main{flex:1;min-width:0;background:var(--raised);padding:14px 18px;overflow:hidden}
.win2 .r-h{margin:0 0 8px;font:600 22px/1.2 var(--ui);color:#3B78F5}
.win2 .r-row{display:flex;gap:10px;align-items:flex-start;padding:8px 2px;border-bottom:1px solid var(--rule);font:400 13px/1.4 var(--ui);cursor:pointer}
.win2 .r-dot{width:16px;height:16px;border-radius:50%;border:1.4px solid var(--ruleStrong);flex:none;margin-top:2px}
.win2 .r-row.done .r-dot{background:#3B78F5;border-color:#3B78F5}
.win2 .r-row.done .r-tx{color:var(--ink3);text-decoration:line-through}
.win2 .r-tx em{display:block;font-style:normal;font-size:11px;color:var(--ink3)}
.win2 .r-empty{color:var(--ink3);font-size:12.5px}

.win2[data-app="contacts"]{width:640px;height:430px}
.win2 .ct-list{width:220px;flex:none;background:var(--paper);border-right:1px solid var(--rule);padding:6px}
.win2 .ct-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;font:400 12.5px/1 var(--ui);cursor:pointer}
.win2 .ct-row.on{background:rgba(107,127,215,.15)}
.win2 .ct-row .av,.win2 .ct-card .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#C9CFE9;color:#3E4A7A;font:600 10px/1 var(--ui);flex:none}
.win2 .av.o{background:#DCD5C2;color:#6A5F44}.win2 .av.p{background:#CFE0D2;color:#3E5C46}
.win2 .ct-card{flex:1;min-width:0;background:var(--raised);padding:26px 28px;display:flex;flex-direction:column;align-items:center;text-align:center}
.win2 .ct-card .av.big{width:64px;height:64px;font-size:20px;margin-bottom:10px}
.win2 .ct-card h2{margin:0;font:600 18px/1.2 var(--ui)}
.win2 .ct-card .role{margin:2px 0 14px;color:var(--ink3);font-size:12px}
.win2 .ct-kv{display:grid;grid-template-columns:auto auto;gap:6px 12px;font-size:12.5px;text-align:left}
.win2 .ct-kv i{font-style:normal;color:var(--ink3);text-align:right}
.win2 .ct-kv span{color:#3B78F5}
.win2 .ct-mem{margin-top:18px;padding-top:12px;border-top:1px solid var(--rule);font-size:12px;text-align:left;width:100%;display:flex;flex-direction:column;gap:4px}
.win2 .ct-mem i{font-style:normal;font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}

.win2[data-app="settings"]{width:820px;height:560px}
.win2 .st-sb{width:190px}
.win2 .st-sb .it{padding:4px 7px;font-size:12px}
.win2 .moeico{width:16px;height:16px;border-radius:4px;background:#fff url(/assets/icon-180.png) center/cover;display:inline-block}
.win2 .moeico.big{width:44px;height:44px;border-radius:10px}
.win2 .st-main{flex:1;min-width:0;background:var(--raised);display:flex;flex-direction:column}
.win2 .st-tabs{flex:none;display:flex;gap:2px;padding:10px 16px;border-bottom:1px solid var(--rule)}
.win2 .st-tabs b{font:400 12px/1 var(--ui);padding:6px 11px;border-radius:7px;color:var(--ink2)}
.win2 .st-tabs b.on{background:var(--accentTint);color:var(--accentDeep);font-weight:600}
.win2 .st-pane{flex:1;min-height:0;overflow-y:auto;padding:18px 22px}
.win2 .st-pane .mem-head h1{font-size:20px}

.win2[data-app="maps"]{width:760px;height:480px}
.win2 .mp-body{position:relative;display:block}
.win2 .mp-map{position:absolute;inset:0;width:100%;height:100%}
.win2 .mp-search{position:absolute;left:14px;top:14px;z-index:2;width:260px;display:flex;flex-direction:column;gap:8px}
.win2 .mp-card{background:rgba(252,251,242,.92);backdrop-filter:blur(14px);border:.5px solid rgba(0,0,0,.14);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink2)}
.win2 .mp-card b{font:600 13.5px/1.3 var(--ui);color:var(--ink)}
.win2 .mp-note{font-style:italic;color:var(--ink3);margin-top:4px}
.win2 .mp-btns{display:flex;gap:6px;margin-top:8px}
.win2 .mp-btns b{font:500 11.5px/1 var(--ui);padding:6px 10px;border-radius:6px;background:var(--sunk)}
.win2 .mp-btns b.go{background:#3B78F5;color:#fff}

.win2[data-app="photos"]{width:820px;height:520px}
.win2 .ph-main{flex:1;min-width:0;background:var(--raised);display:flex;flex-direction:column}
.win2 .ph-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--rule);font:600 14px/1 var(--ui)}
.win2 .ph-head .n-search{margin:0;width:160px}
.win2 .ph-grid{flex:1;min-height:0;overflow:hidden;padding:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-content:start}
.win2 .ph-tile{margin:0;position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;cursor:pointer;background:#ccc}
.win2 .ph-tile.on{outline:3px solid #3B78F5;outline-offset:-3px}
.win2 .ph-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;font:500 10.5px/1.25 var(--ui);color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.win2 .ph-tile em{display:block;font-style:normal;font-size:9px;opacity:.8}
.win2 .ph-tile.sea{background:linear-gradient(160deg,#9CC7D8,#3E7FA0 55%,#E4D7B8 56%,#D8C9A6)}
.win2 .ph-tile.sea2{background:linear-gradient(200deg,#BFE0EA,#4C8FAF 60%,#EBDFC4 61%)}
.win2 .ph-tile.paper{background:linear-gradient(135deg,#F3EFE4,#D9D2C0);box-shadow:inset 0 0 0 14px #fff}
.win2 .ph-tile.ink{background:repeating-linear-gradient(0deg,#f4f2ea 0 12px,#e6e2d6 12px 14px)}
.win2 .ph-tile.green{background:radial-gradient(circle at 30% 40%,#8FB27E,#4E7A52 70%)}
.win2 .ph-tile.blush{background:radial-gradient(circle at 40% 45%,#FFF6F0,#F0C9CF 45%,#B98A8C)}
.win2 .ph-tile.wood{background:linear-gradient(180deg,#F6F1E5 0 55%,#8E6E4C 55%)}
.win2 .ph-tile.steel{background:linear-gradient(135deg,#7E8790,#3C444C)}

.win2[data-app="music"]{width:640px;height:420px}
.win2 .mu-main{flex:1;min-width:0;background:var(--raised);display:flex;flex-direction:column;align-items:center;padding:22px;text-align:center}
.win2 .mu-art{width:150px;height:150px;border-radius:10px;background:linear-gradient(160deg,#BFE0EA,#3E7FA0 60%,#E4D7B8 61%);box-shadow:0 10px 30px -10px rgba(0,0,0,.4);margin-bottom:14px}
.win2 .mu-main h2{margin:0;font:600 16px/1.2 var(--ui)}
.win2 .mu-main p{margin:3px 0 14px;color:var(--ink3);font-size:12px}
.win2 .mu-bar{width:260px;height:4px;border-radius:2px;background:var(--rule);overflow:hidden}
.win2 .mu-bar i{display:block;height:100%;background:#E2483F}
.win2 .mu-time{width:260px;display:flex;justify-content:space-between;font:400 10px/1 var(--ui);color:var(--ink3);margin-top:5px}
.win2 .mu-ctl{display:flex;gap:26px;align-items:center;margin-top:14px;font-size:18px;color:var(--ink)}
.win2 .mu-ctl .play{font-size:26px;cursor:pointer}

.win2[data-app="appstore"]{width:820px;height:520px}
.win2 .as-main{flex:1;min-width:0;background:var(--raised);padding:18px 22px;overflow:hidden}
.win2 .as-hero{border-radius:14px;padding:22px 24px;background:linear-gradient(135deg,#3d4430,#5b6548);color:#f2eede}
.win2 .as-kick{font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#c8a27e}
.win2 .as-hero h2{margin:8px 0 6px;font:600 24px/1.1 var(--serif);color:#fff}
.win2 .as-hero p{margin:0 0 16px;font-size:12.5px;line-height:1.5;color:#c6c9b2;max-width:52ch}
.win2 .as-row,.win2 .as-item{display:flex;align-items:center;gap:12px;font-size:12.5px}
.win2 .as-row em,.win2 .as-item em{display:block;font-style:normal;font-size:11px;opacity:.7}
.win2 .as-get{margin-left:auto;font:600 11.5px/1 var(--ui);padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff}
.win2 .as-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:18px}
.win2 .as-item .as-get{background:var(--sunk);color:var(--accentDeep)}
.win2 .as-ic{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#C9CFE9,#6B7FD7)}

.win2[data-app="downloads"],.win2[data-app="trash"]{width:700px;height:400px}
.win2[data-app="downloads"] .sb{width:170px}
.win2 .tr-empty{font:400 12px/1 var(--ui);padding:4px 10px;border-radius:6px;border:1px solid var(--ruleStrong);opacity:.6}

/* Launchpad is the screen itself, blurred, with the apps on it */
.win2.launchpad{left:0;top:0;width:100%;height:100%;border-radius:0;background:rgba(20,18,14,.55);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:none;z-index:70}
.win2 .lp-grid{display:grid;grid-template-columns:repeat(5,110px);gap:34px 28px;justify-content:center;align-content:center;height:100%;padding-bottom:60px}
.win2 .lp-app{appearance:none;border:0;background:transparent;cursor:pointer;color:#fff;font:500 12px/1 var(--ui);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.win2 .lp-ic{width:64px;height:64px;border-radius:14px;box-shadow:0 6px 16px -4px rgba(0,0,0,.5);background:#fff}
.win2 .lp-ic.finder{background:linear-gradient(180deg,#5AB8F6,#2E7CD6)}.win2 .lp-ic.safari{background:radial-gradient(circle,#fff 0 30%,#3B9BF5 31%)}
.win2 .lp-ic.messages{background:linear-gradient(180deg,#6BE07A,#2DB84C)}.win2 .lp-ic.mail{background:linear-gradient(180deg,#63B5F7,#2F86EA)}
.win2 .lp-ic.maps{background:linear-gradient(135deg,#DCE9C8,#8FC7EA)}.win2 .lp-ic.photos{background:conic-gradient(#F6C, #FC6, #6CF, #6F9, #F6C)}
.win2 .lp-ic.facetime{background:linear-gradient(180deg,#6BE07A,#2DB84C)}.win2 .lp-ic.calendar{background:#fff;box-shadow:inset 0 12px 0 #E2483F}
.win2 .lp-ic.contacts{background:linear-gradient(180deg,#D8CBB3,#A38E6A)}.win2 .lp-ic.reminders{background:#fff;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 16px #F0F0F0}
.win2 .lp-ic.notes{background:linear-gradient(180deg,#FBE38A 0 22%,#fff 22%)}.win2 .lp-ic.music{background:linear-gradient(180deg,#FF6A7A,#E2483F)}
.win2 .lp-ic.appstore{background:linear-gradient(180deg,#4FA8F8,#1F6FE0)}.win2 .lp-ic.settings{background:linear-gradient(180deg,#8E8E93,#5C5C61)}
.win2 .lp-ic.preview{background:linear-gradient(135deg,#8FB6E8,#3f5670)}

/* --------------------------------------------------------- FaceTime */
.win2[data-app="facetime"]{width:820px;height:520px}
.win2 .ft-body{flex-direction:column;background:#141414;color:#fff}
.win2 .ft-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px;position:relative}
.win2 .ft-tile{position:relative;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:#2a2d31}
.win2 .ft-tile.sara{background:radial-gradient(circle at 50% 40%,#5f6d5a,#2a3328)}
.win2 .ft-tile.marcus{background:radial-gradient(circle at 50% 40%,#6a5f56,#2f2a26)}
.win2 .ft-tile.hale{background:radial-gradient(circle at 50% 40%,#5b6470,#262b31)}
.win2 .ft-tile.talking{outline:2px solid #59D98C;outline-offset:-2px}
.win2 .ft-av{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font:600 22px/1 var(--ui);color:#fff}
.win2 .ft-name{position:absolute;left:10px;bottom:8px;font:500 11.5px/1 var(--ui);padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.45)}
.win2 .ft-tile.me{position:absolute;right:16px;bottom:16px;width:150px;height:100px;box-shadow:0 8px 24px -6px rgba(0,0,0,.6);background:radial-gradient(circle at 50% 40%,#7a6a5a,#3a3128)}
.win2 .ft-tile.me .ft-av{width:44px;height:44px;font-size:14px}
.win2 .ft-bar{flex:none;height:56px;display:flex;align-items:center;justify-content:center;gap:14px;background:#1c1c1e}
.win2 .ft-bar b{width:40px;height:40px;border-radius:50%;background:#3a3a3c;display:grid;place-items:center;font-weight:400;font-size:16px}
.win2 .ft-bar b.ft-end{width:auto;padding:0 18px;border-radius:20px;background:#E2483F;font:600 13px/1 var(--ui);cursor:pointer}
.win2 .ft-rec{position:absolute;left:16px;display:flex;align-items:center;gap:7px;font:500 11.5px/1 var(--ui);color:#ffb3ad}
.win2 .ft-rec i{width:8px;height:8px;border-radius:50%;background:#E2483F;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.win2 .ft-idle{flex:1;display:flex;align-items:center;justify-content:center}
.win2 .ft-recent{width:380px;background:#1c1c1e;border-radius:12px;padding:10px}
.win2 .ft-recent .h{font:600 10px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:#8e8e93;padding:6px 8px}
.win2 .ft-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;font:500 13px/1.3 var(--ui);cursor:pointer}
.win2 .ft-row:hover{background:#2a2a2d}
.win2 .ft-row em{display:block;font-style:normal;font:400 11px/1.3 var(--ui);color:#8e8e93}
.win2 .ft-row b{margin-left:auto;color:#59D98C;font-weight:400}
.win2 .ft-row .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#C9CFE9;color:#3E4A7A;font:600 10px/1 var(--ui)}

/* the call-detected card, top right, and the consent sheet */
.offer{position:absolute;top:calc(var(--bar) + 10px);right:14px;z-index:75;width:300px;padding:13px 14px;
  background:rgba(252,251,242,.9);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);
  border:.5px solid rgba(0,0,0,.16);border-radius:12px;box-shadow:0 20px 50px -14px rgba(0,0,0,.44);color:var(--ink);
  display:none;flex-direction:column;gap:6px}
.offer[data-open="true"]{display:flex}
.offer-t{font:600 13px/1.3 var(--ui)}
.offer-s{font:400 11.5px/1.4 var(--ui);color:var(--ink2)}
.offer-b{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.offer-b button,.consent-b button{appearance:none;border:1px solid var(--ruleStrong);background:var(--raised);color:var(--ink);
  border-radius:7px;padding:6px 12px;font:500 12px/1 var(--ui);cursor:pointer}
.offer-b button.pri,.consent-b button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.offer-b button.quiet{border-color:transparent;background:transparent;color:var(--ink3)}
.consent{position:absolute;inset:0;z-index:80;display:none;place-items:center;background:rgba(0,0,0,.28)}
.consent[data-open="true"]{display:grid}
.consent-p{width:380px;background:var(--sidebar);border:.5px solid rgba(0,0,0,.2);border-radius:14px;padding:22px 22px 18px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);color:var(--ink)}
.consent-p h2{margin:0 0 10px;font:600 15px/1.3 var(--ui)}
.consent-p p{margin:0 0 10px;font:400 12.5px/1.5 var(--ui)}
.consent-p p.small{font-size:11.5px;color:var(--ink2)}
.consent-b{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* a steady red ring around the notch: you are being recorded */
.ring{position:absolute;top:-3px;left:50%;transform:translateX(-50%);z-index:61;
  width:calc(var(--notch-w) + 8px);height:calc(var(--bar) + 6px);pointer-events:none;opacity:0;transition:opacity .3s}
.ring[data-on="true"]{opacity:1}
.ring path{fill:none;stroke:#E2483F;stroke-width:2.5;stroke-linecap:round}
.ring[data-flash="true"] path{animation:ringflash .9s ease-in-out 2}
@keyframes ringflash{0%,100%{stroke-opacity:1}50%{stroke-opacity:.15}}
/* the live transcript in the island */
.i-transcript{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:6px 2px;scrollbar-width:thin}
.i-transcript:empty::after{content:"Listening to the room — the transcript appears in a moment.";color:#8D8880;font-size:12px}
.i-transcript div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;font-size:12.5px;line-height:1.4;color:#EFECE2}
.i-transcript i{font-style:normal;font:600 9px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8FD0A8}
.i-transcript div.them i{color:#6FC9E8}
.i-transcript div.mark{color:#E8A64A;font-size:11px;grid-template-columns:1fr}
.i-state .noteit{margin-left:auto;appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#CFCABC;
  border-radius:6px;padding:4px 8px;font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.i-state .acts{font:600 9px/1 var(--mono);letter-spacing:.1em;color:#E8A64A}
/* Meetings — the notes */
.mt-rec{border:1px solid var(--rule);border-radius:12px;padding:18px 20px;background:var(--paper);margin-bottom:16px}
.mt-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mt-h h2{margin:0;font:600 17px/1.3 var(--ui)}
.mt-h span{font:400 11px/1 var(--mono);color:var(--ink3)}
.mt-sum{margin:8px 0 14px;font:400 13.5px/1.55 var(--serif);color:var(--ink)}
.mt-rec h3{margin:12px 0 4px;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.mt-rec ul{margin:0;padding-left:18px;font:400 13px/1.5 var(--ui)}
.mt-rec .chk{list-style:none;padding-left:0}
.mt-rec .chk li{display:flex;gap:9px;align-items:flex-start;cursor:pointer;padding:3px 0}
.mt-rec .chk i{width:14px;height:14px;border-radius:50%;border:1.4px solid var(--ruleStrong);flex:none;margin-top:3px}
.mt-rec .chk i.d{background:var(--accent);border-color:var(--accent)}
.mt-rec .chk em{font-style:normal;color:var(--ink3)}
.mt-note{margin:4px 0 0;font-size:11px;color:var(--ink3)}
.mt-rec details{margin-top:12px}
.mt-rec summary{cursor:pointer;font:600 12px/1 var(--ui);color:var(--accentDeep)}
.mt-tr{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.mt-tr div{display:grid;grid-template-columns:60px minmax(0,1fr);gap:8px;font-size:12.5px;line-height:1.4}
.mt-tr i{font-style:normal;font:600 9px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#3E7A52}
.mt-tr div.them i{color:#3f5670}
.mt-who{margin:10px 0 0;font-size:11.5px;color:var(--ink3)}
/* the ring hangs above the panel, as IslandView draws it; and inside the
   island, hidden means hidden even for the flex children */
.ring{z-index:63}
.island [hidden]{display:none !important}
/* on a phone every window is the screen, and the pointer's choreography
   still has somewhere to point */
@media (max-width:760px){
  .win2:not(.launchpad){left:8px !important;top:44px !important;width:calc(100vw - 16px) !important;
    height:calc(100svh - 150px) !important}
  .win2 .sb,.win2 .ct-list,.win2 .list,.win2[data-app="notes"] .n-list{display:none}
  .win2 .s-prod{grid-template-columns:1fr}
  .win2 .lp-grid{grid-template-columns:repeat(3,84px);gap:22px 16px}
  .win2 .ft-grid{grid-template-columns:1fr}
  .offer{left:14px;right:14px;width:auto}
  .consent-p{width:calc(100vw - 32px)}
}