/* ============ Base ============ */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --cell: 104px;
  --icon: 64px;
  --label-size: 12px;
  --gap: 9px;
  --accent: #0a84ff;
  --ease-spring: cubic-bezier(.2, 1.25, .35, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

[data-mode="dark"] {
  color-scheme: dark;
  --label: #fff;
  --label-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .25);
  --text: #f5f5f7;
  --text-2: rgba(235, 235, 245, .62);
  --glass: rgba(40, 40, 46, .42);
  --glass-strong: rgba(36, 36, 40, .72);
  --glass-line: rgba(255, 255, 255, .14);
  --folder-glass: rgba(255, 255, 255, .22);
  --win-bg: #1e1e20;
  --win-bar: #2b2b2e;
  --win-line: rgba(255, 255, 255, .08);
  --doc-text: #e8e8ed;
}

[data-mode="light"] {
  color-scheme: light;
  --label: #1d1d1f;
  --label-shadow: 0 1px 2px rgba(255, 255, 255, .55);
  --text: #1d1d1f;
  --text-2: rgba(60, 60, 67, .62);
  --glass: rgba(255, 255, 255, .45);
  --glass-strong: rgba(250, 250, 252, .78);
  --glass-line: rgba(255, 255, 255, .6);
  --folder-glass: rgba(255, 255, 255, .5);
  --win-bg: #ffffff;
  --win-bar: #ececee;
  --win-line: rgba(0, 0, 0, .1);
  --doc-text: #1d1d1f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
}

body {
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

/* ============ Wallpaper ============ */
.wallpaper {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  container-type: size;
  transition: background-color .6s;
}

.wp-blob {
  position: absolute;
  width: 90cqmax;
  height: 90cqmax;
  border-radius: 50%;
  opacity: .9;
  will-change: transform;
  animation: drift-a 34s ease-in-out infinite alternate;
}

.wallpaper[data-mode="light"] .wp-blob { opacity: .95; }

.wp-blob-0 { left: -32cqmax; top: -38cqmax; }
.wp-blob-1 { right: -36cqmax; top: -18cqmax; animation-name: drift-b; animation-duration: 41s; }
.wp-blob-2 { left: -18cqmax; bottom: -46cqmax; animation-name: drift-c; animation-duration: 47s; }
.wp-blob-3 { right: -30cqmax; bottom: -40cqmax; animation-name: drift-d; animation-duration: 38s; }

@keyframes drift-a {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(22cqmax, 14cqmax) scale(1.18); }
  100% { transform: translate(8cqmax, 30cqmax) scale(.92); }
}
@keyframes drift-b {
  0% { transform: translate(0, 0) scale(1.05); }
  50% { transform: translate(-26cqmax, 18cqmax) scale(.9); }
  100% { transform: translate(-10cqmax, -6cqmax) scale(1.2); }
}
@keyframes drift-c {
  0% { transform: translate(0, 0) scale(.95); }
  50% { transform: translate(24cqmax, -20cqmax) scale(1.15); }
  100% { transform: translate(40cqmax, -4cqmax) scale(1); }
}
@keyframes drift-d {
  0% { transform: translate(0, 0) scale(1.1); }
  50% { transform: translate(-30cqmax, -14cqmax) scale(.95); }
  100% { transform: translate(-12cqmax, -32cqmax) scale(1.1); }
}

.wp-grain {
  position: absolute;
  inset: 0;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .wp-blob { animation: none !important; }
}

/* ============ Desk ============ */
.desk-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}

.desk-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
  position: relative;
}

.tile {
  position: relative;
  min-width: 0;
  animation: tile-in .6s var(--ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 16ms);
}

@keyframes tile-in {
  from { opacity: 0; transform: scale(.82); }
}

.tile-icon {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: calc(var(--cell) * .1) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--cell) * .065);
  cursor: pointer;
  outline: none;
}

.tile-icon .icon-wrap {
  width: var(--icon);
  height: var(--icon);
  position: relative;
  flex: none;
  transition: transform .25s var(--ease-out), filter .2s;
}

.tile-icon:active .icon-wrap { transform: scale(.9); filter: brightness(.82); }
.tile-icon:focus-visible .icon-wrap { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 24%; }

.icon {
  width: 100%;
  height: 100%;
  border-radius: 23%;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 6px 18px rgba(0, 0, 0, .16);
}

.icon-app::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
  pointer-events: none;
}

.icon img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }

.glyph {
  color: #fff;
  font-family: var(--font-display);
  font-size: calc(var(--icon) * .46);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.glyph.is-emoji { font-size: calc(var(--icon) * .54); text-shadow: none; }
.glyph.is-long { font-size: calc(var(--icon) * .3); }
.glyph-dark .glyph { color: #1c1c1e; text-shadow: none; }

.icon-file { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.file-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .28)); }

.icon-folder {
  display: block;
  place-items: normal;
  padding: 14%;
  background: var(--folder-glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 6px 18px rgba(0, 0, 0, .14);
}
.folder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--icon) * .065);
}
.folder-grid .icon {
  height: auto;
  aspect-ratio: 1;
  border-radius: 26%;
  box-shadow: none;
}
.folder-grid .icon-app::after { display: none; }
.folder-grid .file-svg { filter: none; }

.label {
  font-size: var(--label-size);
  font-weight: 500;
  color: var(--label);
  text-shadow: var(--label-shadow);
  max-width: calc(var(--cell) * 1.08);
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  letter-spacing: -.005em;
}

/* Runaway (in development) */
.tile.is-dev { will-change: transform; z-index: 2; }
.tile.hop { transition: transform .38s var(--ease-spring); }
.tile.shake .icon-wrap { animation: shake .5s; }
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-7px) rotate(-6deg); }
  30% { transform: translateX(6px) rotate(5deg); }
  45% { transform: translateX(-5px) rotate(-4deg); }
  60% { transform: translateX(4px) rotate(3deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
}

.tile.launch .icon-wrap { animation: launch .45s var(--ease-out); }
@keyframes launch {
  0% { transform: scale(1); }
  35% { transform: scale(.86); filter: brightness(.8); }
  100% { transform: scale(1); }
}

/* ============ Widgets ============ */
.tile-widget, .tile-note { padding: var(--gap); }

.widget {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--cell) * .24);
  padding: calc(var(--cell) * .17);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--cell) * .08);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 14px 34px rgba(0, 0, 0, .18);
  transition: transform .3s var(--ease-out);
}

.tile-widget[role="link"] { cursor: pointer; outline: none; }
.tile-widget[role="link"]:active .widget { transform: scale(.97); }
.tile-widget[role="link"]:focus-visible .widget { outline: 2px solid var(--accent); outline-offset: 3px; }

.w-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(var(--cell) * .045);
  min-height: 0;
  flex: 1;
}

.w-head { display: flex; align-items: center; gap: calc(var(--cell) * .1); min-width: 0; }
.w-head-text { display: flex; flex-direction: column; gap: calc(var(--cell) * .02); min-width: 0; }
.w-head .w-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-avatar {
  width: calc(var(--cell) * .46);
  height: calc(var(--cell) * .46);
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent), 0 4px 12px rgba(0, 0, 0, .2);
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.size-4x2 .w-avatar, .size-4x4 .w-avatar { width: calc(var(--cell) * .66); height: calc(var(--cell) * .66); }
.size-2x2 .has-avatar .w-text { -webkit-line-clamp: 2; }

.w-eyebrow {
  font-size: max(8px, calc(var(--cell) * .105));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .72;
}

.w-title {
  font-family: var(--font-display);
  font-size: max(10px, calc(var(--cell) * .2));
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.size-2x2 .w-title { font-size: max(10px, calc(var(--cell) * .17)); }
.size-4x4 .w-title { font-size: max(12px, calc(var(--cell) * .26)); }

.w-text {
  font-size: max(9px, calc(var(--cell) * .125));
  line-height: 1.32;
  opacity: .8;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: pre-line;
}
.size-2x2 .w-text { -webkit-line-clamp: 3; }
.size-4x4 .w-text { -webkit-line-clamp: 10; }
.widget.no-link .w-text { flex: 1 1 auto; min-height: 0; }

.w-link {
  position: relative;
  z-index: 2;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: max(9px, calc(var(--cell) * .12));
  padding: .38em .9em;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.w-arrow { font-size: 1.3em; line-height: .8; margin-top: -.08em; }

.w-glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  color: var(--label);
  box-shadow: inset 0 0 0 .5px var(--glass-line), 0 14px 34px rgba(0, 0, 0, .14);
}
.w-light { background: #fff; color: #1d1d1f; }
.w-light .w-eyebrow { color: #ff3b30; opacity: 1; }
.w-dark { background: #1c1c1e; color: #fff; }
.w-dark .w-eyebrow { color: #ff9f0a; opacity: 1; }
.w-blue { background: linear-gradient(160deg, #47a3ff, #0058e0); }
.w-indigo { background: linear-gradient(160deg, #8a7dff, #4b3fd1); }
.w-pink { background: linear-gradient(160deg, #ff7ab0, #e6246b); }
.w-orange { background: linear-gradient(160deg, #ffb547, #ff6a00); }
.w-green { background: linear-gradient(160deg, #5fdc7c, #12a150); }
.w-red { background: linear-gradient(160deg, #ff7369, #d7261e); }

.widget.has-image { color: #fff; }
.w-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.widget.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, 0));
}
.widget.has-image .w-body { justify-content: flex-end; }
.widget.has-image .w-eyebrow { color: #fff; }

/* ============ Sticky notes ============ */
.tile-note { z-index: 1; }

.note {
  width: 100%;
  height: 100%;
  background: var(--note);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 30%);
  color: #3b3524;
  transform: rotate(var(--tilt));
  padding: calc(var(--cell) * .22) calc(var(--cell) * .17) calc(var(--cell) * .16);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 16px 26px -10px rgba(0, 0, 0, .45);
  position: relative;
  font-family: var(--font);
  font-size: max(10px, calc(var(--cell) * .135));
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.005em;
}

/* Strip of tape stuck over the top edge, as if taped to the screen. */
.note::before {
  content: '';
  position: absolute;
  top: calc(var(--cell) * -.12);
  left: 50%;
  width: 46%;
  height: calc(var(--cell) * .23);
  transform: translateX(-50%) rotate(calc(var(--tilt) * -1.6 - 2deg));
  background:
    linear-gradient(to bottom, rgba(255, 253, 245, .72), rgba(245, 242, 232, .55)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 5px);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.1);
  backdrop-filter: blur(1.5px) saturate(1.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 0 0 .5px rgba(255, 255, 255, .45);
  clip-path: polygon(0 6%, 4% 0, 8% 8%, 12% 1%, 16% 7%, 84% 4%, 88% 0, 92% 8%, 96% 2%, 100% 7%, 100% 93%, 96% 100%, 92% 94%, 88% 100%, 84% 95%, 16% 97%, 12% 100%, 8% 92%, 4% 100%, 0 94%);
  pointer-events: none;
}

.note-text {
  height: 100%;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  position: relative;
}

/* ============ Stickers ============ */
.sticker {
  position: absolute;
  left: calc(50% + var(--dx) * var(--cell));
  top: calc(50% + var(--dy) * var(--cell));
  z-index: 20;
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(var(--scale));
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28)) drop-shadow(0 5px 9px rgba(0, 0, 0, .22));
  animation: none;
}

/* Word sticker: white die-cut edge, metallic foil, one corner peeling up. */
.stk-face {
  padding: calc(var(--cell) * .028);
  border-radius: calc(var(--cell) * .11);
  background: #fbfbfc;
}
.stk-ink {
  position: relative;
  overflow: hidden;
  padding: .36em .8em .34em;
  border-radius: calc(var(--cell) * .085);
  background: var(--foil);
  background-size: 160% 160%;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: calc(var(--cell) * .15);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45), 0 -1px 0 rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18), inset 0 1px 1px rgba(255, 255, 255, .6);
}
.stk-ink::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 46%, rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%;
  mix-blend-mode: overlay;
  animation: foil-sheen 7s ease-in-out infinite;
}
@keyframes foil-sheen {
  0%, 15% { background-position: 120% 0; }
  60%, 100% { background-position: -40% 0; }
}

.stk-flapwrap {
  position: absolute;
  width: var(--peel);
  height: var(--peel);
  filter: drop-shadow(-1px -1px 1.5px rgba(0, 0, 0, .3));
}
.stk-flap {
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(to top left, #ffffff 50%, #d3d6dc 100%);
}
.peel-br .stk-face { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peel)), calc(100% - var(--peel)) 100%, 0 100%); }
.peel-br .stk-flapwrap { right: 0; bottom: 0; }
.peel-bl .stk-face { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--peel) 100%, 0 calc(100% - var(--peel))); }
.peel-bl .stk-flapwrap { left: 0; bottom: 0; transform: scaleX(-1); }
.peel-tr .stk-face { clip-path: polygon(0 0, calc(100% - var(--peel)) 0, 100% var(--peel), 100% 100%, 0 100%); }
.peel-tr .stk-flapwrap { right: 0; top: 0; transform: scaleY(-1); }
.peel-tl .stk-face { clip-path: polygon(var(--peel) 0, 100% 0, 100% 100%, 0 100%, 0 var(--peel)); }
.peel-tl .stk-flapwrap { left: 0; top: 0; transform: scale(-1, -1); }

/* PNG sticker: white outline that follows the artwork, glossy sweep masked to its shape. */
.sticker-img { width: calc(var(--cell) * .9); }
.stk-img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}
.stk-gloss {
  position: absolute;
  inset: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .75) 46%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 45%);
  background-size: 260% 100%, 100% 100%;
  mix-blend-mode: screen;
  animation: foil-sheen 8s ease-in-out infinite;
}
.stk-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 24%;
  border: 2px dashed rgba(255, 255, 255, .7);
  color: #fff;
  font-weight: 800;
  font-size: calc(var(--cell) * .16);
  background: rgba(0, 0, 0, .25);
}

@media (prefers-reduced-motion: reduce) {
  .stk-ink::after, .stk-gloss { animation: none; }
}

/* ============ Flow mode (phones, portrait tablets) ============ */
.mode-flow { overflow: hidden; }
.mode-flow .desk-area {
  top: 0;
  bottom: 0;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 20px) var(--side) calc(40px + env(safe-area-inset-bottom));
}
.mode-flow .desk-grid {
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: none;
  grid-auto-rows: var(--cell);
  justify-content: center;
}
.flow-header {
  display: none;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--label);
  text-shadow: var(--label-shadow);
  margin: 0 0 14px;
  opacity: .85;
}
.mode-flow .flow-header { display: block; }


/* ============ Folder overlay ============ */
.folder-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  animation: fade-in .3s var(--ease-out);
}
[data-mode="light"] .folder-overlay { background: rgba(255, 255, 255, .12); }
.folder-overlay.closing { animation: fade-out .26s var(--ease-out) forwards; pointer-events: none; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.folder-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--label);
  text-shadow: var(--label-shadow);
  margin: 0 0 22px;
  text-align: center;
}

.folder-panel {
  max-width: 100%;
  max-height: 70dvh;
  overflow-y: auto;
  padding: calc(var(--cell) * .18) calc(var(--cell) * .2) calc(var(--cell) * .22);
  border-radius: calc(var(--cell) * .4);
  background: var(--folder-glass);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 30px 80px rgba(0, 0, 0, .25);
}
.folder-panel .desk-grid {
  grid-template-columns: repeat(var(--fcols), var(--cell));
  grid-template-rows: none;
  grid-auto-rows: var(--cell);
}
.folder-empty { padding: 20px 30px; color: var(--label); opacity: .7; font-size: 14px; }

/* ============ Windows ============ */
.window {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--win-bg);
  color: var(--text);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35), 0 24px 70px rgba(0, 0, 0, .45);
  -webkit-user-select: text;
  user-select: text;
}
.window.is-inactive { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 12px 40px rgba(0, 0, 0, .3); }
.window.is-max { border-radius: 0; }

.win-bar {
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--win-bar);
  border-bottom: .5px solid var(--win-line);
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

.traffic { display: flex; gap: 8px; position: relative; z-index: 1; }
.traffic button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .22);
  cursor: default;
  position: relative;
}
.traffic .t-close { background: #ff5f57; }
.traffic .t-min { background: #febc2e; }
.traffic .t-max { background: #28c840; }
.window.is-inactive .traffic button { background: rgba(128, 128, 128, .35); }
.traffic button::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 0, 0, .55);
  opacity: 0;
}
.traffic .t-close::after { content: '×'; font-size: 11px; }
.traffic .t-min::after { content: '−'; }
.traffic .t-max::after { content: '+'; }
.traffic:hover button::after { opacity: 1; }

.win-title {
  position: absolute;
  left: 90px;
  right: 90px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: .9;
}

.win-actions { margin-left: auto; display: flex; gap: 4px; position: relative; z-index: 1; }
.win-btn {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
  opacity: .8;
}
.win-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); opacity: 1; }
.win-done { display: none; font-weight: 600; color: var(--accent); opacity: 1; font-size: 16px; }

.win-body { flex: 1; min-height: 0; overflow: auto; position: relative; background: var(--win-bg); }
.win-body iframe { border: 0; width: 100%; height: 100%; display: block; background: #fff; }
.window.is-dragging iframe, .window.is-resizing iframe { pointer-events: none; }

.win-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 2;
}

.mode-flow .window {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0;
  min-width: 0;
  padding-top: env(safe-area-inset-top);
}
.mode-flow .win-bar { height: 52px; background: var(--win-bg); }
.mode-flow .traffic, .mode-flow .win-resize { display: none; }
.mode-flow .win-title { left: 70px; right: 70px; font-size: 16px; }
.mode-flow .win-done { display: inline-flex; }
.mode-flow .win-actions .win-btn:not(.win-done) span { display: none; }

/* Document page */
.doc-page {
  max-width: 740px;
  margin: 0 auto;
  padding: 48px 56px 96px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--doc-text);
  -webkit-user-select: text;
  user-select: text;
}
.mode-flow .doc-page { padding: 24px 22px 80px; }
.doc-page h1 { font-family: var(--font-display); font-size: 32px; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 .6em; }
.doc-page h2 { font-family: var(--font-display); font-size: 23px; line-height: 1.25; letter-spacing: -.015em; margin: 1.6em 0 .5em; }
.doc-page h3 { font-size: 18px; margin: 1.4em 0 .4em; }
.doc-page p { margin: 0 0 1em; }
.doc-page a { color: var(--accent); text-decoration: none; }
.doc-page a:hover { text-decoration: underline; }
.doc-page blockquote { margin: 1.2em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--accent); color: var(--text-2); }
.doc-page img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 1.2em 0; }
.doc-page hr { border: 0; border-top: 1px solid var(--win-line); margin: 2em 0; }
.doc-page code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; padding: .1em .35em; border-radius: 5px; background: color-mix(in srgb, currentColor 9%, transparent); }
.doc-page pre { padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, currentColor 7%, transparent); overflow-x: auto; }
.doc-page pre code { background: none; padding: 0; }
.doc-page ul, .doc-page ol { padding-left: 1.4em; margin: 0 0 1em; }

.pdf-fallback { display: grid; place-items: center; height: 100%; padding: 30px; text-align: center; color: var(--text-2); }

/* ============ Toast ============ */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  max-width: calc(100vw - 32px);
  padding: 10px 20px 10px 10px;
  border-radius: 24px;
  color: #fff;
  background: rgba(24, 24, 28, .78);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 16px 40px rgba(0, 0, 0, .35);
  transform: translateX(-50%);
  animation: toast-in .55s var(--ease-spring);
  pointer-events: none;
}
.mode-flow .toast { top: calc(env(safe-area-inset-top) + 12px); }
.toast.out { animation: toast-out .3s var(--ease-out) forwards; }
@keyframes toast-in { from { transform: translate(-50%, -30px) scale(.85); opacity: 0; } }
@keyframes toast-out { to { transform: translate(-50%, -20px) scale(.9); opacity: 0; } }
.toast .icon-wrap { --icon: 38px; width: 38px; height: 38px; flex: none; }
.toast-title { font-size: 14px; font-weight: 600; line-height: 1.25; }
.toast-msg { font-size: 13px; opacity: .72; line-height: 1.3; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }