/* The sample Windows desktop (os-demo.js). The rest of the site is monochrome; this section uses Windows'
   own colors (blue accent, colorful app icons, dark code and terminal) so it reads as a real workspace.
   The AI chat inside it stays neutral, with provider colors only on small model marks. */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Section: a centered frame with the step bar and the desktop, like a product showcase. */
.desk-section {
  --accent: #0067c0;
  --accent-hover: #1975c5;
  --accent-soft: #e5f1fb;
  --win-text: #1b1b1b;
  --win-text-2: #5c5c5c;
  --win-line: rgba(0, 0, 0, 0.08);
  padding: 0 0 56px; background: #fbfaf8;
}
.desk-frame { display: flex; flex-direction: column; gap: 8px; width: min(90%, 1180px); margin: 0 auto; }
.desk-bar { display: flex; align-items: center; gap: 8px 16px; min-height: 40px; padding: 0 4px; }
.desk-bar h2 { font-size: 15px; line-height: 20px; white-space: nowrap; }
.desk-actions { display: flex; align-items: center; gap: 8px; }
/* Steps: a circle per step, the label beside it. Dashes sit exactly in the middle of the gap between two
   steps. Labels that are hidden (narrow screens) collapse and expand smoothly instead of jumping. */
.flow { --flow-gap: 20px; position: relative; display: flex; align-items: center; gap: var(--flow-gap); margin: 0 auto; padding: 0; list-style: none; counter-reset: step; }
.flow li {
  counter-increment: step; position: relative; display: flex; align-items: center; padding: 4px 10px 4px 4px; border-radius: 999px;
  color: var(--text-3); font-size: 13px; line-height: 20px; white-space: nowrap;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), padding 360ms var(--ease-out);
}
.flow li span {
  display: block; max-width: 90px; margin-left: 6px; overflow: hidden; opacity: 1;
  transition: max-width 360ms var(--ease-out), margin 360ms var(--ease-out), opacity 240ms var(--ease-out);
}
.flow li::before {
  content: counter(step); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 11px; font-weight: 600;
}
/* The connector before a step fills in, left to right, once that step is reached: a progress line. */
.flow li + li::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--flow-gap) / -2); width: 12px; height: 2px; border-radius: 1px;
  background: linear-gradient(var(--text), var(--text)) left center / 0% 100% no-repeat, var(--line-strong);
  transform: translate(-50%, -50%); transition: background-size 420ms var(--ease-out);
}
.flow li.is-done::after, .flow li.is-active::after { background-size: 100% 100%; }
.flow li::before { transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.flow li.is-done { color: var(--text-2); }
.flow li.is-done::before { content: "✓"; background: var(--surface-2); box-shadow: none; animation: step-done 360ms var(--spring); }
@keyframes step-done { from { transform: scale(0.6); } }
/* The step that becomes active springs in after its connector fills, and its number sends out one ring. */
.flow li.is-active::before { animation: step-ring 900ms var(--ease-out) 260ms; }
@keyframes step-on { from { transform: scale(0.9); } }
@keyframes step-ring { from { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } to { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }
/* One black pill slides from step to step behind the steps (position set by os-demo.js). */
.flow::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pill-x, 0); width: var(--pill-w, 0); border-radius: 999px;
  background: var(--text); opacity: var(--pill-on, 0);
  transition: left 420ms var(--ease-out), width 420ms var(--ease-out), opacity 200ms var(--ease-out);
}
.flow li { z-index: 1; }
.flow li.is-active { color: #fff; }
.flow li.is-active::before { background: #fff; color: var(--text); box-shadow: none; }

/* The screen ------------------------------------------------------------------------------------------ */
.os {
  position: relative; height: clamp(540px, calc(100svh - var(--header-h) - 80px), 760px); overflow: hidden; isolation: isolate; border-radius: 12px;
  color: var(--win-text); font-family: var(--font); line-height: 1.4; /* no backdrop: nothing dark shows at the rounded corners */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 24px 48px -28px rgba(0, 0, 0, 0.45); /* the thin frame border */
  -webkit-user-select: none; user-select: none;
}
.os-inner { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit; }
.os-screen {
  position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate;
  /* A bloom of light blue petals on a soft sky, drawn with gradients (no image files). */
  background:
    radial-gradient(34% 44% at 50% 64%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    radial-gradient(30% 62% at 38% 74%, rgba(70, 150, 255, 0.85), rgba(70, 150, 255, 0) 70%),
    radial-gradient(30% 62% at 62% 74%, rgba(16, 98, 226, 0.85), rgba(16, 98, 226, 0) 70%),
    radial-gradient(70% 50% at 50% 104%, #0b3f9c, rgba(11, 63, 156, 0) 75%),
    linear-gradient(180deg, #dbe9fb 0%, #b2d0f6 42%, #5b98e8 78%, #2a66c9 100%);
}
.os :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.os .win-dark :focus-visible { outline-color: #4cc2ff; }
.os kbd {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 4px; background: #fff; color: var(--win-text);
  box-shadow: inset 0 -1px 0 #c8c8c8, 0 0 0 1px #d6d6d6; font: 600 11px/18px var(--font); text-align: center;
}

/* Windows */
.win {
  position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: #f9f9f9;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
  transition: box-shadow 200ms var(--ease-out);
}
.win:not([hidden]) { animation: win-in 180ms var(--ease-out); }
.win.is-active { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 32px 64px rgba(0, 0, 0, 0.28), 0 2px 21px rgba(0, 0, 0, 0.2); }
.win.is-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.win[data-app="browser"] { left: 2%; top: 3%; width: 43%; height: 50%; }
.win[data-app="pdf"] { left: 5%; top: 49%; width: 40%; height: 48%; }
.win[data-app="notes"] { left: 47%; top: 4%; width: 18%; height: 52%; }
/* Tablets: fewer, larger windows: the browser and paper on the left, notes between, the chat on the right. */
@media (min-width: 768px) and (max-width: 1100px) {
  .win[data-app="browser"] { left: 1%; top: 2%; width: 60%; height: 56%; }
  .win[data-app="pdf"] { left: 4%; top: 40%; width: 52%; height: 57%; }
  .win[data-app="notes"] { left: 33%; top: 16%; width: 30%; height: 46%; }
  .os .win[data-app="assistant"] { left: 58%; top: 2%; width: 41%; height: 96%; }
}
/* During the replay each source is briefly in the spotlight; during the capture, the window a layer is
   being read from glows. */
.win.is-reading { box-shadow: 0 0 0 3px rgba(0, 103, 192, 0.55), 0 32px 64px rgba(0, 0, 0, 0.28); transition: box-shadow 180ms var(--ease-out); }
.win.is-spot { box-shadow: 0 0 0 2px var(--accent), 0 32px 64px rgba(0, 0, 0, 0.28), 0 0 0 8px rgba(0, 103, 192, 0.18); }

/* Browser: tabs in the title bar, then the address bar and the page. */
.br-bar { gap: 0; padding-left: 6px; background: #ebebeb; }
.win:not(.is-active) .br-bar { background: #f3f3f3; }
.br-tabs { display: flex; flex: 1; align-self: flex-end; gap: 2px; min-width: 0; height: 28px; }
.br-tab {
  display: flex; align-items: center; gap: 6px; flex: 0 1 170px; min-width: 0; padding: 0 10px; border: 0; border-radius: 8px 8px 0 0;
  background: none; color: #3d3d3d; font: 12px/16px var(--font); cursor: default;
}
.br-tab:hover { background: rgba(255, 255, 255, 0.5); }
.br-tab[aria-selected="true"] { background: #fff; color: #1b1b1b; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.04); }
.br-tab-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.br-fav { display: grid; place-items: center; width: 14px; height: 14px; flex: none; border-radius: 3px; background: #2f6fc6; color: #fff; font: 700 8px/1 var(--font); }
.br-tab:nth-child(2) .br-fav { background: #16a34a; }
.br-tab:nth-child(3) .br-fav { background: #6b7280; }
.br-tab:nth-child(4) .br-fav { background: #c2410c; }
.br-toolbar { display: flex; flex: none; align-items: center; gap: 10px; height: 36px; padding: 0 10px; background: #fff; box-shadow: inset 0 -1px 0 #ececec; }
.br-nav { display: flex; gap: 12px; }
.br-nav i { width: 8px; height: 8px; border: solid #8a8a8a; border-width: 1.5px 1.5px 0 0; transform: rotate(-135deg); }
.br-nav i:nth-child(2) { transform: rotate(45deg); }
.br-nav i:nth-child(3) { border-radius: 50%; border-width: 1.5px; border-right-color: transparent; transform: none; }
.br-url { flex: 1; min-width: 0; height: 26px; padding: 0 12px; border-radius: 999px; background: #f1f1f1; color: #5c5c5c; font-size: 12px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-host { color: #1b1b1b; }
.br-page { flex: 1; min-height: 0; overflow: auto; padding: 18px 24px; background: #fff; color: #1b1b1b; }
.br-site { margin: 0 0 4px; color: #5c5c5c; font-size: 11px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.04em; }
.br-h { margin: 0 0 10px; font: 600 19px/25px var(--font); }
.br-p { margin: 0 0 10px; font-size: 13px; line-height: 20px; color: #333; }

/* PDF reader: a toolbar and a white page on gray. */
.pdf-tools { display: flex; flex: none; align-items: center; gap: 16px; height: 34px; padding: 0 12px; background: #f9f9f9; color: #5c5c5c; font-size: 11.5px; box-shadow: inset 0 -1px 0 #e5e5e5; }
.pdf-hl-tool { margin-left: auto; padding: 2px 8px; border-radius: 4px; background: #fff3a8; color: #5c4a00; }
.pdf-view { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: #e7e7e7; }
.pdf-page { max-width: 520px; margin: 0 auto; padding: 22px 26px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); color: #222; font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; }
.pdf-journal { margin: 0 0 6px; color: #777; font: 10.5px/14px var(--font); }
.pdf-title { margin: 0 0 6px; font: 600 16px/21px ui-serif, Georgia, Cambria, "Times New Roman", serif; }
.pdf-authors { margin: 0 0 12px; color: #555; font-size: 11.5px; font-style: italic; }
.pdf-h { margin: 12px 0 4px; font: 600 12px/16px var(--font); }
.pdf-p { margin: 0; font-size: 12.5px; line-height: 19px; }
.pdf-mark { padding: 0 1px; background: #fff3a8; color: inherit; }
.win.is-spot .pdf-mark { animation: mark-on 900ms var(--ease-out); }
@keyframes mark-on { from { background: transparent; } }

/* Notepad (Windows 11): a menu row, plain text, a status bar. */
.np-menu { display: flex; flex: none; gap: 14px; height: 30px; padding: 0 12px; align-items: center; background: #f9f9f9; color: #1b1b1b; font-size: 12px; }
.np-text { flex: 1; min-height: 0; margin: 0; padding: 10px 14px; overflow: auto; background: #fff; color: #1b1b1b; font: 12.5px/20px "Cascadia Mono", Consolas, var(--mono); white-space: pre-wrap; box-shadow: inset 0 1px 0 #ececec; }
.np-status { display: flex; flex: none; gap: 16px; height: 24px; padding: 0 12px; align-items: center; background: #f3f3f3; color: #5c5c5c; font-size: 11px; }
.win[data-app="assistant"] { left: 66%; top: 3%; width: 33%; height: 94%; }
@keyframes win-in { from { opacity: 0; transform: scale(0.97); } }

.win-bar { display: flex; flex: none; align-items: center; gap: 8px; height: 32px; padding-left: 10px; background: #f3f3f3; color: var(--win-text); touch-action: none; }
.win:not(.is-active) .win-bar { background: #f9f9f9; color: #8a8a8a; }
.win-ic { width: 16px; height: 16px; flex: none; }
.win-title { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
.caps { display: flex; align-self: stretch; flex: none; }
.cap { position: relative; width: 46px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: default; }
.cap::before, .cap::after { content: ""; position: absolute; left: 50%; top: 50%; }
.cap-min::before { width: 10px; height: 1px; margin-left: -5px; background: currentColor; }
.cap-max::before { width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1px solid currentColor; border-radius: 2px; }
.win.is-max .cap-max::before { width: 7px; height: 7px; margin: -3px 0 0 -5px; }
.win.is-max .cap-max::after { width: 7px; height: 7px; margin: -6px 0 0 -2px; border: solid currentColor; border-width: 1px 1px 0 0; border-radius: 0 2px 0 0; }
.cap-close::before, .cap-close::after { width: 12px; height: 1px; margin-left: -6px; background: currentColor; transform: rotate(45deg); }
.cap-close::after { transform: rotate(-45deg); }
.cap:hover { background: rgba(0, 0, 0, 0.06); }
.cap-close:hover { background: #c42b1c; color: #fff; }
.os .cap:focus-visible { outline-offset: -2px; border-radius: 0; }

/* Dark apps: code editor and terminal */
.win-dark { background: #1f1f1f; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.2); }
.win-dark.is-active { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 32px 64px rgba(0, 0, 0, 0.32), 0 2px 21px rgba(0, 0, 0, 0.24); }
.win-dark .win-bar { background: #202020; color: #e6e6e6; }
.win-dark:not(.is-active) .win-bar { background: #272727; color: #9a9a9a; }
.win-dark .cap:hover { background: rgba(255, 255, 255, 0.08); }
.win-dark .cap-close:hover { background: #c42b1c; }

.code-tabs { display: flex; flex: none; height: 30px; background: #181818; box-shadow: inset 0 -1px 0 #2b2b2b; }
.code-tab { display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #1f1f1f; color: #fff; font-size: 12px; box-shadow: inset 0 1px 0 #0078d4, inset -1px 0 0 #2b2b2b; }
.lang-badge { color: #3178c6; font: 700 9px/1 var(--mono); }
.lang-badge.is-json { color: #cbcb41; }
.code { position: relative; display: flex; flex: 1; min-height: 0; background: #1f1f1f; }
.gutter { flex: none; width: 36px; margin: 0; padding: 6px 8px 6px 0; overflow: hidden; color: #6e7681; font: 11.5px/18px var(--mono); text-align: right; }
.code-area { position: relative; flex: 1; min-width: 0; }
.code-hl, .editor {
  position: absolute; inset: 0; margin: 0; padding: 6px 12px 6px 4px; border: 0; border-radius: 0;
  font: 11.5px/18px var(--mono); tab-size: 2; white-space: pre; overflow: hidden;
}
.code-hl { color: #d4d4d4; pointer-events: none; }
.editor {
  overflow: auto; resize: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent;
  caret-color: #aeafad; -webkit-user-select: text; user-select: text; outline: none;
}
.editor::selection { background: rgba(38, 79, 120, 0.85); }
.os .editor:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #0078d4; }
.tk-ctl { color: #c586c0; }
.tk-kw { color: #569cd6; }
.tk-str { color: #ce9178; }
.tk-fn { color: #dcdcaa; }
.tk-num { color: #b5cea8; }
.tk-type { color: #4ec9b0; }
.tk-com { color: #6a9955; }
.tk-key { color: #9cdcfe; }
.code-status { display: flex; flex: none; justify-content: space-between; height: 22px; padding: 0 10px; background: #0078d4; color: #fff; font-size: 11px; line-height: 22px; }

.win[data-app="terminal"] { background: #0c0c0c; }
.term-out {
  flex: 1; min-height: 0; margin: 0; padding: 8px 12px; overflow: auto; background: #0c0c0c; color: #cccccc;
  font: 11.5px/17px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text;
}
.t-line { display: block; min-height: 17px; }
.t-prompt { color: #cccccc; }
.t-cmd { color: #f9f1a5; }
.t-arg { color: #cccccc; }
.t-dim { color: #767676; }
.t-err { color: #e74856; }
.t-ok { color: #16c60c; }
.t-str { color: #61d6d6; }
.t-caret { display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #cccccc; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.term-cmds { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; background: #181818; box-shadow: inset 0 1px 0 #2b2b2b; }
.term-label { color: #767676; font: 11px/16px var(--mono); }
.cmd { padding: 2px 8px; border: 1px solid #3c3c3c; border-radius: 4px; background: #252526; color: #e6e6e6; font: 11px/16px var(--mono); cursor: pointer; }
.cmd:hover { border-color: #5a5a5a; background: #2f2f31; }

/* File Explorer and System Information */
.ex-address { display: flex; align-items: center; gap: 6px; margin: 6px 8px 4px; padding: 4px 10px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px #e5e5e5; font-size: 12px; line-height: 16px; }
.ex-head { display: grid; grid-template-columns: 1fr 76px; margin: 0; padding: 2px 16px 2px 36px; border-bottom: 1px solid #ececec; color: var(--win-text-2); font-size: 11px; line-height: 16px; }
.files-list { flex: 1; min-height: 0; margin: 0; padding: 4px; overflow: auto; list-style: none; }
.file {
  display: grid; grid-template-columns: 18px 1fr 76px; align-items: center; gap: 8px; width: 100%; padding: 2px 8px;
  border: 1px solid transparent; border-radius: 4px; background: none; color: var(--win-text); font: 12px/20px var(--font); text-align: left; cursor: default;
}
.file:hover { background: #f0f0f0; }
.file.is-selected { border-color: #99d1ff; background: #cce8ff; }
.file-ic { width: 16px; height: 14px; border-radius: 2px; background: #3178c6; color: #fff; font: 700 7px/14px var(--mono); text-align: center; }
.file-ic.is-json { background: #e3a21a; }
.file-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-type { color: var(--win-text-2); font-size: 11px; }
.ex-status { flex: none; margin: 0; padding: 4px 12px; border-top: 1px solid #ececec; color: var(--win-text-2); font-size: 11px; line-height: 16px; }
.sysinfo { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; padding: 12px; font-size: 12px; line-height: 16px; }
.sysinfo dt { color: var(--win-text-2); }
.sysinfo dd { min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Taskbar and menus ------------------------------------------------------------------------------------ */
.taskbar {
  position: relative; z-index: 62; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex: none; height: 48px; padding: 0 8px;
  background: rgba(238, 242, 248, 0.86); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  border-radius: 0 0 12px 12px; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
}
.tb-sim { justify-self: start; padding: 0 8px; color: var(--win-text-2); font-size: 11px; line-height: 16px; }
.tb-center { display: flex; align-items: center; gap: 4px; }
/* The Search box beside Start, and the system tray's status icons, as on Windows 11. */
.tb-search {
  display: flex; align-items: center; gap: 8px; width: 150px; height: 32px; margin: 0 4px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); color: #5c5c5c; font-size: 12px; line-height: 16px;
}
.tb-search svg { width: 14px; height: 14px; flex: none; }
.tb-sys { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border-radius: 4px; color: var(--win-text); }
.tb-sys svg { width: 15px; height: 15px; }
.tb-sys:hover { background: rgba(255, 255, 255, 0.72); }
@media (max-width: 1100px) { .tb-search { width: auto; padding: 0 10px; font-size: 0; gap: 0; } }
@media (max-width: 767px) { .tb-search, .tb-sys { display: none; } }
.tb-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: default; transition: background-color 150ms var(--ease-out); }
.tb-btn svg, .tb-btn img { width: 24px; height: 24px; transition: transform 150ms var(--ease-out); }
.tb-btn:hover { background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.tb-btn:active svg, .tb-btn:active img { transform: scale(0.88); }
.tb-app::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 3px; border-radius: 2px; background: #8a8a8a; transform: translateX(-50%); transition: width 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.tb-app.is-open::after { width: 6px; }
.tb-app.is-active { background: rgba(255, 255, 255, 0.72); }
.tb-app.is-active::after { width: 16px; background: var(--accent); }
.tb-tray { justify-self: end; display: flex; align-items: center; gap: 2px; }
.tb-cs img { width: 20px; height: 20px; }
.tb-badge { position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #eef2f8; transform: scale(0); transition: transform 300ms var(--spring); }
.tb-cs.has-clip .tb-badge { transform: scale(1); }
.tb-cs.is-ping img { animation: ping 520ms var(--ease-out); }
@keyframes ping { 35% { transform: scale(1.22); } }
.tb-clock { display: flex; flex-direction: column; align-items: flex-end; padding: 0 8px; color: var(--win-text); font-size: 11.5px; line-height: 15px; white-space: nowrap; }

.start-menu, .tray-menu {
  position: absolute; z-index: 61; border-radius: 8px; background: rgba(246, 247, 249, 0.92);
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 32px 64px rgba(0, 0, 0, 0.28);
}
.start-menu[hidden], .tray-menu[hidden] { display: none; }
.menu-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; line-height: 18px; }
.menu-title img { width: 18px; height: 18px; }
.start-menu { left: 50%; bottom: 12px; width: min(440px, calc(100% - 24px)); padding: 20px 20px 0; transform: translateX(-50%); animation: start-in 220ms var(--ease-out); }
@keyframes start-in { from { opacity: 0; transform: translate(-50%, 24px); } }
.start-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.start-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; border: 0; border-radius: 4px; background: none; color: var(--win-text); font: 11px/14px var(--font); cursor: default; }
.start-app svg { width: 30px; height: 30px; }
.start-app:hover { background: rgba(0, 0, 0, 0.05); }
.start-foot { display: flex; justify-content: space-between; gap: 8px; margin: 16px -20px 0; padding: 10px 16px; border-top: 1px solid var(--win-line); border-radius: 0 0 8px 8px; background: rgba(0, 0, 0, 0.025); }
.start-foot button, .tray-item { padding: 6px 10px; border: 0; border-radius: 4px; background: none; color: var(--win-text); font: 12px/16px var(--font); cursor: default; }
.start-foot button:hover, .tray-item:hover { background: rgba(0, 0, 0, 0.05); }
.tray-menu { right: 12px; bottom: 12px; width: min(290px, calc(100% - 24px)); padding: 14px; animation: menu-in 200ms var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(12px); } }
.tray-item { display: flex; justify-content: space-between; width: 100%; font-weight: 600; text-align: left; }
.tray-item span { color: var(--win-text-2); font-weight: 400; }
.tray-sub { margin: 10px 0 4px; padding: 0 10px; color: var(--win-text-2); font-size: 11px; line-height: 16px; }
.levels { display: grid; gap: 2px; }
.level { position: relative; padding: 6px 10px 6px 30px; border: 0; border-radius: 4px; background: none; color: var(--win-text); font: 12px/16px var(--font); text-align: left; cursor: default; }
.level::before { content: ""; position: absolute; left: 10px; top: 8px; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px #8a8a8a; }
.level:hover { background: rgba(0, 0, 0, 0.05); }
.level[aria-checked="true"]::before { box-shadow: inset 0 0 0 4px var(--accent); }
.tray-note { margin: 8px 0 0; padding: 0 10px; color: var(--win-text-2); font-size: 11px; line-height: 15px; }

/* Capture: keys, status pill, and the capture layer (placed over the captured window by os-demo.js) - */
.capture.is-local { inset: 0 0 48px; border-radius: 8px; }
/* On the sample desktop the capture also brings a faint Windows-blue glow in from the screen edges. */
.capture.is-local .capture-scrim { box-shadow: inset 0 0 48px rgba(0, 103, 192, 0.32); }
.os-keys {
  position: absolute; left: 50%; bottom: 20px; z-index: 64; display: flex; gap: 6px; padding: 10px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}
.os.is-keys .os-keys { opacity: 1; transform: translate(-50%, 0); }
.os-keys kbd { min-width: 44px; padding: 6px 10px; font-size: 13px; line-height: 20px; transition: transform 80ms var(--ease-out), background-color 80ms, color 80ms; }
.os-keys kbd.is-down { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px #005a9e; transform: translateY(1px) scale(0.97); }
.os-pill {
  position: absolute; left: 50%; top: 12px; z-index: 67; display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 8px;
  border-radius: 999px; background: rgba(32, 32, 32, 0.88); color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}
.os-pill img { width: 18px; height: 18px; padding: 1px; border-radius: 4px; background: #fff; }
.os.is-status .os-pill { opacity: 1; transform: translate(-50%, 0); }
.ca-close, .ca-remove { position: relative; width: 28px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--win-text-2); cursor: pointer; }
.ca-close::before, .ca-close::after, .ca-remove::before, .ca-remove::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.2px; margin-left: -5.5px; background: currentColor; transform: rotate(45deg); }
.ca-close::after, .ca-remove::after { transform: rotate(-45deg); }
.ca-close:hover, .ca-remove:hover { background: rgba(0, 0, 0, 0.06); color: var(--win-text); }
.snap-md {
  margin: 0; padding: 8px 10px; overflow: auto; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #e5e5e5;
  color: #333; font: 10.5px/15px var(--mono); white-space: normal; -webkit-user-select: text; user-select: text; overscroll-behavior: contain;
}
.snap-md .ln { display: block; min-height: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.snap-md .is-heading, .snap-md .is-strong { color: #111; font-weight: 700; }
.snap-md .is-muted { color: #8a8a8a; }
.snap-md mark { padding: 0 3px; border-radius: 3px; background: #fff4ce; color: #111; }

/* Context transfer (os-demo.js): sheets of the snapshot lift out of the captured window and stack on a
   small clipboard, which carries them to the chat. Everything here is built per run and removed after. */
.xfer { position: absolute; inset: 0; z-index: 66; pointer-events: none; perspective: 1100px; perspective-origin: 50% 35%; }
.sheet {
  position: absolute; overflow: hidden; padding: 7px 9px; border-radius: 5px; background: #fff; opacity: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09), inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.06), 0 14px 26px -12px rgba(15, 30, 60, 0.45);
  backface-visibility: hidden; will-change: transform, opacity;
}
.sheet::after { content: ""; position: absolute; inset: auto 0 0; height: 14px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.sheet-label { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; overflow: hidden; color: var(--accent); font: 700 9.5px/13px var(--mono); white-space: nowrap; }
.sheet-label span { overflow: hidden; text-overflow: ellipsis; }
.sheet-label .src-ic { width: 11px; height: 11px; }
.sheet-lines { margin: 0; overflow: hidden; color: #3a3a3a; font: 8.5px/12px var(--mono); white-space: pre; }
.clipb { position: absolute; transform-style: preserve-3d; will-change: transform, opacity; }
.clipb-board {
  position: absolute; inset: 0; border-radius: 9px; opacity: 0; transform-style: preserve-3d;
  background: linear-gradient(160deg, #3a3a3e 0%, #2a2a2d 55%, #232326 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 0 #1a1a1c, 0 18px 30px -14px rgba(10, 20, 40, 0.55);
}
.clipb-papers { position: absolute; left: 9%; right: 9%; top: 16%; bottom: 17%; }
.clipb-paper {
  position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: #fbfbfa;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.12);
  transform: translate(calc(var(--i) * -0.6px), calc(var(--i) * -1.2px));
  animation: page-in 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes page-in { from { transform: translate(calc(var(--i) * -0.6px), calc(var(--i) * -1.2px - 6px)); } }
.clipb-md { margin: 0; padding: 5px 6px; color: #3a3a3a; font: 6.5px/9px var(--mono); white-space: normal; animation: fade 200ms ease both; }
.clipb-md .ln { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clipb-md .is-heading, .clipb-md .is-strong { color: #111; font-weight: 700; }
.clipb-md .is-muted { color: #9a9a9a; }
.clipb-md mark { background: #fff4ce; }
/* The metal clip at the top: a curved bar with a darker hinge and a highlight. */
.clipb-clip {
  position: absolute; left: 30%; right: 30%; top: 4%; height: 15%; border-radius: 5px 5px 3px 3px; transform-origin: 50% 0;
  background: linear-gradient(180deg, #e9ebee 0%, #c3c7cd 45%, #9aa0a8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 3px rgba(0, 0, 0, 0.35);
}
.clipb-clip::before { content: ""; position: absolute; left: 34%; right: 34%; top: -22%; height: 40%; border-radius: 4px 4px 0 0; background: #b7bcc3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.clipb-label { position: absolute; left: 9%; right: 9%; bottom: 3%; display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; color: #f2f2f2; font: 600 9px/13px var(--font); white-space: nowrap; opacity: 0; transform: translateY(3px); transition: opacity 220ms var(--ease-out), transform 260ms var(--spring); }
.clipb-label.is-done { opacity: 1; transform: none; }
.clipb-check { position: relative; width: 11px; height: 11px; flex: none; border-radius: 50%; background: #3fb950; }
.clipb-check::after { content: ""; position: absolute; left: 3.6px; top: 2px; width: 3px; height: 5.5px; border: solid #fff; border-width: 0 1.4px 1.4px 0; transform: rotate(45deg); }

/* The sample AI chat --------------------------------------------------------------------------------- */
.win[data-app="assistant"] { background: #fff; }
.ca { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; background: #fff; color: #0d0d0d; font-size: 13px; line-height: 20px; }
.ca-head { display: flex; flex: none; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 6px; border-bottom: 1px solid #f0f0f0; }
.ca-model { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: #0d0d0d; font: 600 14px/20px var(--font); cursor: pointer; }
.ca-model span:not(.pv) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ca-model:hover, .ca-model[aria-expanded="true"] { background: #f4f4f4; }
.ca-chev { width: 7px; height: 7px; flex: none; margin: -3px 2px 0; border: solid #8f8f8f; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
/* A narrow chat window keeps the model's logo and name readable: the name truncates before it overlaps. */
.ca { container-type: inline-size; }
.ca-model { flex: 0 1 auto; overflow: hidden; }
@container (max-width: 340px) {
  .ca-head { gap: 6px; }
}
.ca-new { margin-left: auto; padding: 4px 10px; border: 1px solid #e3e3e3; border-radius: 999px; background: #fff; color: #0d0d0d; font: 500 12px/16px var(--font); cursor: pointer; white-space: nowrap; }
.ca-new:hover { background: #f4f4f4; }

/* Provider marks: a letter on the provider's color, small and quiet. Not the providers' logos. */
.pv { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 5px; color: #fff; font: 700 10px/1 var(--font); }
.pv { color: #0d0d0d; }
.pv-logo { width: 100%; height: 100%; }

/* The chat dressed as the picked product. ChatGPT is the base look above. */
.ca[data-skin="claude"] { background: #faf9f5; color: #3d3929; }
.ca[data-skin="claude"] .ca-head { border-bottom-color: rgba(61, 57, 41, 0.1); }
.ca[data-skin="claude"] .ca-model { color: #3d3929; }
.ca[data-skin="claude"] .ca-bubble { border-radius: 14px; background: #f0eee6; color: #3d3929; }
.ca[data-skin="claude"] .ca-body { font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; font-size: 14px; line-height: 22px; }
.ca[data-skin="claude"] .ca-body code { background: rgba(61, 57, 41, 0.08); }
.ca[data-skin="claude"] .ca-ai > .pv { display: none; }
.ca[data-skin="claude"] .ca-composer { border-radius: 16px; box-shadow: 0 0 0 1px rgba(61, 57, 41, 0.15), 0 2px 8px rgba(61, 57, 41, 0.05); }
.ca[data-skin="claude"] .ca-send { border-radius: 8px; background: #c96442; }
.ca[data-skin="claude"] .ca-hello { font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; font-weight: 400; font-size: 20px; }
.ca[data-skin="gemini"] .ca-bubble { border-radius: 20px 6px 20px 20px; background: #e9eef6; color: #1f1f1f; }
.ca[data-skin="gemini"] .ca-composer { border-radius: 26px; background: #f0f4f9; box-shadow: none; }
.ca[data-skin="gemini"] .ca-send { background: #0b57d0; }
.ca[data-skin="gemini"] .ca-hello { background: linear-gradient(90deg, #4b7cf3, #8a73e6 50%, #d36aa9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ca[data-skin="chatgpt"] .ca-ai > .pv { display: none; }

.ca-menu {
  position: absolute; left: 8px; top: 44px; z-index: 5; width: min(260px, calc(100% - 16px)); max-height: calc(100% - 56px); padding: 6px; overflow: auto;
  border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.18); animation: menu-in 160ms var(--ease-out);
}
.ca-menu[hidden] { display: none; }
.ca-group + .ca-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid #f0f0f0; }
.ca-group-label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 8px; color: #6b6b6b; font-size: 11px; font-weight: 600; line-height: 16px; }
.ca-group-label .pv { width: 16px; height: 16px; font-size: 9px; opacity: 0.85; }
.ca-option { position: relative; padding: 6px 30px 6px 32px; border-radius: 8px; color: #0d0d0d; font-size: 13px; line-height: 18px; cursor: pointer; }
.ca-option:hover, .ca-option:focus { background: #f4f4f4; outline: none; }
.ca-option:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.ca-option[aria-selected="true"] { font-weight: 600; }
.ca-option[aria-selected="true"]::after { content: ""; position: absolute; right: 12px; top: 9px; width: 4px; height: 9px; border: solid #0d0d0d; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ca-option-product { display: flex; align-items: center; gap: 10px; padding-left: 10px; }
.ca-menu-note { margin: 6px 0 0; padding: 6px 8px 2px; border-top: 1px solid #f0f0f0; color: #8f8f8f; font-size: 11px; line-height: 15px; }

.ca-log { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; padding: 16px 16px 8px; overflow: auto; -webkit-user-select: text; user-select: text; overscroll-behavior: contain; }
.ca-empty { margin: auto; color: #6b6b6b; font-size: 13px; line-height: 20px; text-align: center; }
.ca-empty[hidden] { display: none; }
.ca-empty p { margin: 0; }
.ca-hello { color: #0d0d0d; font-size: 18px; font-weight: 600; line-height: 26px; }
.ca-keys { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin-top: 12px !important; color: #8f8f8f; font-size: 11px; }
.ca-keys span { margin: 0 4px; }
.ca-msg { animation: msg-in 300ms var(--ease-out) both; }
.ca-me { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; align-self: flex-end; max-width: 88%; }
.ca-bubble { margin: 0; padding: 8px 14px; border-radius: 18px; background: #f2f2f2; white-space: pre-wrap; overflow-wrap: anywhere; }
.ca-sent-file, .ca-file { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid #e3e3e3; border-radius: 12px; background: #fff; color: #0d0d0d; font: 12px/16px var(--font); text-align: left; cursor: pointer; }
.ca-sent-file:hover, .ca-file:hover { background: #f9f9f9; }
.md-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 6px; background: #0d0d0d; color: #fff; font: 700 9px/1 var(--mono); }
.ca-file small { display: block; color: #8f8f8f; font-size: 11px; }
.ca-ai { display: flex; gap: 10px; align-items: flex-start; }
.ca-ai > .pv { margin-top: 1px; opacity: 0.9; }
.ca-body { flex: 1; min-width: 0; }
.ca-body p { margin: 0 0 8px; }
.ca-body ul { margin: 0 0 8px; padding-left: 18px; }
.ca-body li { margin: 2px 0; }
.ca-body code { padding: 1px 4px; border-radius: 4px; background: #f2f2f2; font: 12px var(--mono); overflow-wrap: anywhere; }
.ca-code { position: relative; margin: 0 0 8px; padding: 22px 12px 10px; overflow: auto; border-radius: 8px; background: #171717; color: #e6e6e6; font: 11.5px/17px var(--mono); }
.ca-code code { padding: 0; background: none; font: inherit; white-space: pre; }
.ca-code-lang { position: absolute; left: 12px; top: 4px; color: #8f8f8f; font: 10px/16px var(--font); }
.ca-used { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0 !important; color: #8f8f8f; font-size: 11px; line-height: 18px; }
.ca-used-label { margin-right: 2px; }
.ca-used-item { padding: 0 8px; border-radius: 999px; background: #f2f2f2; color: #3d3d3d; }
.ca-thinking { align-items: center; }
.ca-dots { display: inline-flex; gap: 4px; }
.ca-dots, .ca-dots::before, .ca-dots::after { width: 6px; height: 6px; border-radius: 50%; background: #b4b4b4; }
.ca-dots { position: relative; margin-left: 10px; animation: typing 1s ease-in-out infinite 150ms; }
.ca-dots::before, .ca-dots::after { content: ""; position: absolute; top: 0; animation: typing 1s ease-in-out infinite; }
.ca-dots::before { left: -10px; animation-delay: 0ms; }
.ca-dots::after { left: 10px; animation-delay: 300ms; }
.ca-notice { align-self: center; margin: 0; padding: 4px 10px; border-radius: 8px; background: #fff4ce; color: #5c4a00; font-size: 12px; line-height: 16px; text-align: center; }

.ca-suggest { display: flex; flex: none; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.ca-chip { padding: 5px 10px; border: 1px solid #e3e3e3; border-radius: 999px; background: #fff; color: #3d3d3d; font: 12px/16px var(--font); cursor: pointer; }
.ca-chip:hover { border-color: #c4c4c4; background: #f9f9f9; color: #0d0d0d; }
.ca-composer { flex: none; margin: 0 12px 12px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #e3e3e3, 0 2px 8px rgba(0, 0, 0, 0.05); }
.ca-composer:focus-within { box-shadow: 0 0 0 1px #c4c4c4, 0 2px 8px rgba(0, 0, 0, 0.06); }
.ca-attach { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.ca-attach[hidden] { display: none; }
.ca-attach.is-new .ca-file { animation: attach-in 420ms var(--spring); }
@keyframes attach-in { from { opacity: 0; transform: scale(0.85); } }
.ca-input {
  display: block; width: 100%; min-height: 24px; max-height: 120px; margin: 0; padding: 2px 6px; border: 0; resize: none; background: none;
  color: #0d0d0d; font: 13px/20px var(--font); outline: none; -webkit-user-select: text; user-select: text;
}
.ca-input::placeholder { color: #8f8f8f; }
.os .ca-input:focus-visible { outline: none; }
.ca-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ca-hint { padding-left: 6px; color: #a3a3a3; font-size: 10.5px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-hint kbd { min-width: 0; padding: 0 4px; background: #f4f4f4; box-shadow: none; color: #6b6b6b; font-size: 10px; line-height: 15px; }
.ca-send { position: relative; width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 50%; background: #0d0d0d; cursor: pointer; }
.ca-send::before { content: ""; position: absolute; left: 50%; top: 9px; width: 1.6px; height: 12px; margin-left: -0.8px; background: #fff; }
.ca-send::after { content: ""; position: absolute; left: 50%; top: 9px; width: 7px; height: 7px; margin-left: -4.5px; border: solid #fff; border-width: 1.6px 0 0 1.6px; transform: rotate(45deg); }
.ca-send:hover { background: #3d3d3d; }
.ca-inspect { position: absolute; inset: 44px 0 0; z-index: 6; display: flex; flex-direction: column; padding: 12px; background: rgba(255, 255, 255, 0.98); animation: fade 160ms ease both; }
.ca-inspect[hidden] { display: none; }
.ca-inspect header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ca-inspect header span { margin-left: auto; color: #8f8f8f; font-size: 11px; }
.ca-inspect .snap-md { flex: 1; }

@media (max-width: 1180px) {
  .desk-bar h2 { display: none; }
}
@media (max-width: 960px) {
  .flow li:not(.is-active) span { max-width: 0; margin-left: 0; opacity: 0; }
  .flow li:not(.is-active) { padding-right: 4px; }
}

/* Phones: one window at a time, full screen; the taskbar switches between them. */
@media (max-width: 767px) {
  .desk-section { padding-bottom: 32px; }
  .desk-frame { width: calc(100% - 16px); }
  .os { height: clamp(520px, calc(100svh - var(--header-h) - 120px), 760px); }
  .desk-bar { flex-wrap: wrap; gap: 6px; }
  .desk-bar h2, .desk-actions .tag { display: none; }
  .flow { order: 2; width: 100%; justify-content: space-between; margin: 0; }
  .flow li { padding: 2px; font-size: 12px; }
  .flow li + li::after { display: none; }
  .flow li:not(.is-active) span { max-width: 0; margin-left: 0; opacity: 0; }
  .flow li.is-active { padding-right: 10px; }
  .desk-actions { margin-left: auto; }
  .tb-sim, .cap-max, [data-date] { display: none; }
  .taskbar { grid-template-columns: auto 1fr; padding: 0 4px; }
  .tb-center { gap: 0; }
  .tb-btn { width: 38px; }
  .win, .win-dark { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; box-shadow: none; }
  .win:not(.is-active) { display: none; }
  .start-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ca-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .win:not([hidden]), .start-menu, .tray-menu, .ca-menu, .ca-msg, .ca-attach.is-new .ca-file { animation: none; }
  .os-keys, .os-pill { transition: opacity 150ms ease; transform: translate(-50%, 0); }
  .t-caret, .ca-dots, .ca-dots::before, .ca-dots::after { animation: none; }
  .flow::before, .flow li, .flow li span, .flow li::before, .flow li::after { transition: none; animation: none; }
}

/* Collection (os-demo.js): the window being read glows and carries a small tag; data streams out of it. */
.cselect {
  position: absolute; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: #fff; color: #0b4f9c; font: 600 11px/16px var(--font); box-shadow: 0 0 0 1px rgba(0, 103, 192, 0.35), 0 4px 10px rgba(0, 0, 0, 0.12);
}
.cselect i { width: 7px; height: 7px; border-radius: 50%; background: #0067c0; animation: cselect-dot 1s ease-in-out infinite; }
@keyframes cselect-dot { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .cselect i { animation: none; } }

/* The data card that travels from a window to the clipboard, and the text-like bars on it and on the
   clipboard's pages (data, not readable text). */
.cdata {
  position: absolute; overflow: hidden; padding: 10px 11px; border-radius: 6px; background: #fbfbfa; opacity: 0; transform-origin: 50% 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 14px 30px -12px rgba(15, 30, 60, 0.45); will-change: transform, opacity;
}
.cdata-head { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; color: #1b1b1b; font-size: 12px; line-height: 16px; }
.cdata-ic { width: 16px; height: 16px; flex: none; }
.cdata-bar { display: block; height: 5px; margin-top: 5px; border-radius: 3px; background: #d4dbe5; }
.clipb-ic { display: block; width: 10px; height: 10px; margin: 5px 0 0 6px; }
.clipb-bar { display: block; height: 3px; margin: 3px 6px 0; border-radius: 2px; background: #c9d1dc; }
.clipb-bar:first-of-type { margin-top: 4px; height: 4px; background: #9fb2cc; }
/* A visible stack: each new page sits a little higher and to the side of the one before. */
.clipb-paper { transform: translate(calc(var(--i) * 2px), calc(var(--i) * -4px)) rotate(calc((var(--i) - 1) * -1.2deg)); }