/* lesspull.com — the website is quiet. The drawn desktop is ordinary: calm, tidy, and full of pull. */
:root {
  --page: #14120f; --page-2: #1b1814; --ink: #efe8dd; --ink-2: #b8afa2; --ink-3: #8a8277;
  --line: rgba(255, 236, 210, 0.09); --amber: #e8894a; --amber-ink: #1d1208; --blue: #2f6fed;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Inter, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --head: 56px;
  --head-bg: rgba(20, 18, 15, 0.92); --card-bg: rgba(22, 19, 16, 0.9); --card-ink: #efe8dd; --card-text: #e6dfd3; --card-line: rgba(255, 236, 210, 0.1);
  --card-dot: rgba(255, 236, 210, 0.18); --card-btn: rgba(255, 236, 210, 0.1); --kbd-bg: #2a2520; --kbd-line: rgba(255, 236, 210, 0.35);
  --device-shadow: 0 0 0 1px rgba(255, 240, 220, 0.08), 0 30px 90px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --page: #f4efe6; --page-2: #fffcf6; --ink: #24201a; --ink-2: #5a5348; --ink-3: #8b8274; --line: rgba(60, 40, 10, 0.12);
  --head-bg: rgba(244, 239, 230, 0.9); --card-bg: rgba(255, 252, 246, 0.95); --card-ink: #24201a; --card-text: #4a4337; --card-line: rgba(60, 40, 10, 0.12);
  --card-dot: rgba(60, 40, 10, 0.16); --card-btn: rgba(60, 40, 10, 0.08); --kbd-bg: #fff; --kbd-line: rgba(60, 40, 10, 0.3);
  --device-shadow: 0 0 0 1px rgba(60, 40, 10, 0.08), 0 30px 80px rgba(60, 40, 10, 0.22);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --page: #f4efe6; --page-2: #fffcf6; --ink: #24201a; --ink-2: #5a5348; --ink-3: #8b8274; --line: rgba(60, 40, 10, 0.12);
    --head-bg: rgba(244, 239, 230, 0.9); --card-bg: rgba(255, 252, 246, 0.95); --card-ink: #24201a; --card-text: #4a4337; --card-line: rgba(60, 40, 10, 0.12);
    --card-dot: rgba(60, 40, 10, 0.16); --card-btn: rgba(60, 40, 10, 0.08); --kbd-bg: #fff; --kbd-line: rgba(60, 40, 10, 0.3);
    --device-shadow: 0 0 0 1px rgba(60, 40, 10, 0.08), 0 30px 80px rgba(60, 40, 10, 0.22);
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden means hidden, whatever display a class gives */
html { background: var(--page); }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sys); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--amber); color: var(--amber-ink); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mark { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, var(--amber) 50%); flex: none; }

/* ================= the website frame ================= */
.site-head { position: sticky; top: 0; z-index: 30; height: var(--head); display: flex; align-items: center; gap: 22px; padding: 0 18px 0 20px; background: var(--head-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand b { font-size: 16px; letter-spacing: -0.01em; }
.brand-line { color: var(--ink-3); font-size: 14px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 14px; }
.site-nav a, .nav-btn { color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.site-nav a:hover, .nav-btn:hover { color: var(--ink); }
.download { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background 0.15s, transform 0.15s; }
.download:hover { background: #f09a5e; }
.download.big { padding: 15px 30px; font-size: 17px; box-shadow: 0 14px 40px rgba(232, 137, 74, 0.25); }

.hero { position: relative; height: calc(100vh - var(--head)); height: calc(100svh - var(--head)); min-height: 520px; padding: 10px; scroll-margin-top: var(--head); } /* #top lands at the very top: the header never covers the drawn menu bar */
.device { position: absolute; inset: 10px; border-radius: 14px; overflow: hidden; box-shadow: var(--device-shadow); }
.screen-clip { position: absolute; inset: 0; overflow: hidden; }
.screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; font: 13px/1.35 var(--sys); color: #1d1d1f; user-select: none; -webkit-user-select: none; cursor: default; color-scheme: light; }
.tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0; }

/* The tour card: the website talking, outside the drawn screen. */
.tour-card {
  position: absolute; left: 26px; bottom: 26px; z-index: 20; width: min(380px, calc(100vw - 52px)); padding: 15px 18px 16px;
  border-radius: 18px; background: var(--card-bg); color: var(--card-ink); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 0 0 1px var(--card-line), 0 24px 60px rgba(0, 0, 0, 0.35);
}
.tour-card.bump { animation: cardIn 0.35s cubic-bezier(.2, .9, .3, 1); }
@keyframes cardIn { from { transform: translateY(8px); opacity: 0.5; } }
.tc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.tc-skip { border: 0; background: none; color: var(--ink-3); font-size: 12.5px; cursor: pointer; padding: 2px 0; }
.tc-skip:hover { color: var(--card-ink); }
.tc-title { margin: 0 0 5px; font: 600 18px/1.25 var(--display); letter-spacing: -0.01em; }
.tc-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--card-text); }
.tc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.tc-btn { border: 0; border-radius: 999px; padding: 8px 15px; background: var(--card-btn); color: var(--card-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.tc-btn:hover { filter: brightness(1.12); }
.tc-btn.primary { background: var(--amber); color: var(--amber-ink); }
.tc-btn.primary:hover { background: #f09a5e; }
kbd { display: inline-block; min-width: 18px; padding: 0 5px; margin: 0 1px; border: 1px solid var(--kbd-line); border-bottom-width: 2px; border-radius: 5px; background: var(--kbd-bg); font: 600 12px/1.5 var(--sys); text-align: center; color: var(--card-ink); }

/* ================= the drawn screen ================= */
.wall { position: absolute; inset: 0; transition: filter 0.6s ease; }
.wall-svg { width: 100%; height: 100%; display: block; }
.mc-on .wall { filter: brightness(0.62) saturate(0.9); }
.desk { position: absolute; inset: 0; }

/* menu bar */
.menubar { position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 700; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 10px; color: #fff; font-size: 13.5px; background: rgba(28, 22, 60, 0.32); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); transition: transform 0.3s ease; }
.mb-left, .mb-right { display: flex; align-items: center; height: 100%; gap: 2px; }
.mb-item { height: 23px; padding: 0 9px; border-radius: 6px; display: flex; align-items: center; gap: 6px; white-space: nowrap; border: 0; background: none; color: inherit; cursor: default; }
.mb-item:hover, .mb-item.open, .lp-icon.open { background: rgba(255, 255, 255, 0.2); }
.mb-app { font-weight: 700; }
.mb-glyph { width: 32px; justify-content: center; }
.mb-glyph svg { width: 15px; height: 15px; }
.mb-clock { font-variant-numeric: tabular-nums; }
.mb-site svg { width: 13px; height: 13px; flex: none; }
.mb-tour { gap: 5px; font-weight: 600; cursor: pointer; }
.mb-fs { width: 30px; justify-content: center; padding: 0; cursor: pointer; }
.mb-slot { display: flex; align-items: center; gap: 2px; margin-right: 2px; }
.mb-slot.quit { display: none; }
.lp-icon { position: relative; width: 30px; height: 23px; border: 0; border-radius: 6px; background: none; color: #fff; display: grid; place-items: center; padding: 0; cursor: default; }
.lp-icon svg { width: 18px; height: 18px; overflow: visible; }
.lp-icon.away { opacity: 0.55; }
.lp-icon.calling::after, .lp-icon.beckon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: call 1.5s ease-out infinite; pointer-events: none; }
@keyframes call { 0% { transform: scale(0.55); opacity: 0.95; } 100% { transform: scale(1.5); opacity: 0; } }
.lp-label { font: 600 12.5px/1 var(--sys); font-variant-numeric: tabular-nums; margin-right: 4px; }
.lp-label:empty { display: none; }
.lp-label.over { color: #ffb070; animation: breathe 2.4s ease-in-out infinite; }
.lp-label.away { opacity: 0.6; }
@keyframes breathe { 50% { opacity: 0.55; } }
.is-full .menubar { transform: translateY(-100%); }
.is-full .menubar.peek { transform: none; }
.zone { position: absolute; left: 0; right: 0; z-index: 650; display: none; }
.zone-top { top: 0; height: 6px; } .zone-bottom { bottom: 0; height: 8px; }
.is-full .zone { display: block; }

/* windows */
.win {
  position: absolute; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 14px; transform-origin: 0 0;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.28), 0 18px 50px rgba(10, 10, 40, 0.28), 0 4px 12px rgba(10, 10, 40, 0.12);
  transition: transform 0.6s cubic-bezier(.2, .85, .25, 1), opacity 0.4s ease, left 0.45s cubic-bezier(.2, .85, .25, 1), top 0.45s cubic-bezier(.2, .85, .25, 1), width 0.45s cubic-bezier(.2, .85, .25, 1), height 0.45s cubic-bezier(.2, .85, .25, 1), border-radius 0.3s;
}
.no-anim .win, .win.no-anim, .win.dragging { transition: none !important; }
.win.is-closed, .win.is-min { pointer-events: none; }
.win.in-strip, .win.in-mc { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 30px 70px rgba(10, 10, 40, 0.4); }
.win.in-strip *, .win.in-mc * { animation-play-state: paused !important; }
.win.hidden-strip { pointer-events: none; }
.win.is-active[style*="z-index: 90"] { border-radius: 0; }
.cover { position: absolute; inset: 0; display: none; z-index: 5; cursor: pointer; }
.in-strip .cover, .in-mc .cover { display: block; }
.in-mc:hover { filter: brightness(1.04); }
.rz { position: absolute; z-index: 4; }
.rz-n { top: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; } .rz-s { bottom: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.rz-e { right: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; } .rz-w { left: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: 14px; height: 14px; }
.rz-ne { top: -3px; right: -3px; cursor: nesw-resize; } .rz-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
.rz-nw { top: -3px; left: -3px; cursor: nwse-resize; } .rz-se { bottom: -3px; right: -3px; cursor: nwse-resize; }
.in-strip .rz, .in-mc .rz, .is-full .is-active .rz { display: none; }
.titlebar { height: 38px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px; position: relative; background: #f6f5f3; border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); }
.lights { display: flex; gap: 8px; position: relative; z-index: 2; flex: none; }
.light { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18); cursor: default; position: relative; }
.light.close { background: #ff5f57; } .light.min { background: #febc2e; } .light.zoom { background: #28c840; } .light.off { background: #dcd9d4; }
.lights:hover .light.close::after { content: "×"; } .lights:hover .light.min::after { content: "–"; } .lights:hover .light.zoom::after { content: "⤢"; font-size: 8px; }
.light::after { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/12px var(--sys); color: rgba(0, 0, 0, 0.55); }
.tb { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.wtitle { font-weight: 600; font-size: 13px; color: #4a4a4f; pointer-events: none; }
.wbody { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.win.dark { background: #1c1c1e; }
.win.dark .titlebar { background: #2a2a2d; border-bottom-color: rgba(255, 255, 255, 0.06); }
.win.dark .wtitle { color: #d8d8dc; }
.win.float { z-index: 300; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), 0 24px 70px rgba(10, 10, 40, 0.38); transition: none; }
.win.float[hidden] { display: none; }
.win.float.opening { animation: floatIn 0.22s cubic-bezier(.2, .9, .3, 1); }
@keyframes floatIn { from { transform: scale(0.96); opacity: 0; } }

/* the strip of previews, and Mission Control labels */
.strip { position: absolute; inset: 0; pointer-events: none; z-index: 45; transition: opacity 0.3s; }
.is-full .strip { opacity: 0; }
.strip-badge { position: absolute; pointer-events: auto; display: flex; align-items: center; gap: 6px; border: 0; padding: 0; background: none; cursor: pointer; animation: badgeIn 0.5s ease both; }
@keyframes badgeIn { from { opacity: 0; transform: translateY(6px); } }
.strip-icon svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.strip-name { opacity: 0; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: opacity 0.15s; white-space: nowrap; }
.strip-badge:hover .strip-name { opacity: 1; }
.mc { position: absolute; inset: 0; z-index: 0; }
.mc-on .mc { z-index: 30; }
.mc-label { position: absolute; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; font-size: 13px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); white-space: nowrap; animation: badgeIn 0.4s ease both 0.2s; pointer-events: none; }
.mc-label .strip-icon svg { width: 22px; height: 22px; }
.mc-on .win.in-mc { z-index: 40 !important; }

/* Dock */
.dock { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 600; display: flex; align-items: flex-end; gap: 7px; padding: 6px 9px; border-radius: 22px; background: rgba(255, 255, 255, 0.24); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 10px 40px rgba(10, 10, 40, 0.22); transition: transform 0.3s ease; }
.is-full .dock, .dock.away { transform: translate(-50%, 130%); }
.is-full .dock.peek { transform: translateX(-50%); }
.dock-item { position: relative; width: 56px; height: 56px; border: 0; padding: 0; background: none; cursor: default; transition: transform 0.18s cubic-bezier(.2, .9, .3, 1.3); }
.dock-item:hover { transform: translateY(-8px) scale(1.1); }
.dock-icon svg { width: 56px; height: 56px; display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22)); }
.badge { position: absolute; top: -4px; right: -5px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: #ff3b30; color: #fff; font: 700 11.5px/21px var(--sys); text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.dock-label { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; padding: 5px 10px; border-radius: 8px; background: rgba(40, 38, 36, 0.86); color: #fff; font-size: 12.5px; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.dock-item:hover .dock-label { opacity: 1; }
.dock-dot { position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); opacity: 0; }
.dock-item.running .dock-dot { opacity: 1; }
.dock-sep { align-self: stretch; width: 1px; margin: 6px 4px; background: rgba(255, 255, 255, 0.4); }
.dock-item.bounce .dock-icon { animation: bounce 0.7s ease; }
@keyframes bounce { 25% { transform: translateY(-16px); } 50% { transform: translateY(0); } 70% { transform: translateY(-7px); } }

/* notifications and the notification center */
.notifs { position: absolute; top: 40px; right: 12px; width: 352px; display: flex; flex-direction: column; gap: 8px; z-index: 500; }
.notif { position: relative; display: grid; grid-template-columns: 36px 1fr auto; gap: 11px; align-items: center; padding: 11px 13px; border-radius: 18px; background: rgba(248, 247, 250, 0.94); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 12px 34px rgba(10, 10, 40, 0.24); animation: notifIn 0.5s cubic-bezier(.2, .9, .2, 1); cursor: default; }
.notif.leaving { animation: notifOut 0.26s ease forwards; }
@keyframes notifIn { from { transform: translateX(115%); } }
@keyframes notifOut { to { transform: translateX(115%); opacity: 0; } }
.notif-icon svg { width: 36px; height: 36px; display: block; }
.notif-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.notif-text b { font-size: 13px; } .notif-text span { font-size: 13px; color: #333; }
.notif time { align-self: start; font-size: 11.5px; color: #8a8a8e; }
.notif-x { position: absolute; left: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); font-size: 13px; line-height: 20px; color: #555; opacity: 0; transition: opacity 0.15s; cursor: default; }
.notif:hover .notif-x { opacity: 1; }
.ncenter { width: 340px; max-height: 70vh; overflow: auto; }
.nc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nc-item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: 12px; padding: 8px; background: rgba(255, 255, 255, 0.7); margin-bottom: 6px; cursor: default; }
.nc-item:hover { background: #fff; }
.nc-item svg { width: 30px; height: 30px; display: block; }
.nc-item b { display: block; font-size: 12.5px; } .nc-item small { font-size: 12px; color: #555; }
.nc-empty { margin: 4px 0; color: #6b6b70; font-size: 13px; }

/* menus and panels */
.pops { position: absolute; inset: 0; pointer-events: none; z-index: 800; }
.pop { pointer-events: auto; }
.menu, .panel { position: absolute; color: #1d1d1f; font-size: 13.5px; background: rgba(246, 245, 243, 0.97); border-radius: 11px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22), 0 16px 46px rgba(10, 10, 40, 0.3); animation: popIn 0.12s ease-out; }
@keyframes popIn { from { opacity: 0; transform: translateY(-3px); } }
.menu { min-width: 230px; padding: 5px; }
.lp-menu { width: 300px; }
.mi { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 24px; padding: 2px 12px 2px 24px; border: 0; border-radius: 6px; background: none; text-align: left; font: inherit; color: inherit; white-space: nowrap; cursor: default; }
.mi:hover:not(.head), .mi.hover { background: var(--blue); color: #fff; }
.mi.head { color: #8a8a8e; }
.mi.check.on::before { content: "✓"; position: absolute; left: 8px; font-size: 12px; font-weight: 700; }
.mi-icon { display: grid; place-items: center; width: 17px; height: 17px; }
.mi-icon svg { width: 17px; height: 17px; }
.msep { height: 1px; margin: 5px 10px; background: rgba(0, 0, 0, 0.1); }
.has-sub .chev { margin-left: auto; font-size: 15px; opacity: 0.7; }
.submenu { display: none; right: calc(100% - 2px); top: -5px; min-width: 210px; }
.has-sub:hover > .submenu { display: block; }
.has-sub:hover > .submenu .mi { color: #1d1d1f; }
.has-sub:hover > .submenu .mi:hover { color: #fff; }
.mi.hint:not(:hover) { animation: hintPulse 1.3s ease-in-out infinite; }
@keyframes hintPulse { 50% { background: rgba(47, 111, 237, 0.2); } }
.mwarm { padding: 6px 14px 4px 24px; }
.mwarm-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.mwarm-head b { font-weight: 500; color: #6b6b70; font-variant-numeric: tabular-nums; }
.mwarm-ticks { display: flex; justify-content: space-between; font-size: 10px; color: #8a8a8e; padding: 0 2px; }
.ramp { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: default; }
.ramp::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--ramp); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18); }
.ramp::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ramp); }
.ramp::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.25); }
.ramp::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.25); }
.panel { width: 316px; padding: 14px 14px 12px; }
.pan-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pan-icon svg { width: 24px; height: 24px; display: block; }
.pan-head b { font-size: 14px; }
.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: rgba(0, 0, 0, 0.07); }
.seg button { border: 0; border-radius: 6px; background: none; padding: 4px 8px; font-size: 12px; color: #333; cursor: default; white-space: nowrap; }
.seg button.on { background: #fff; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.2); color: #111; font-weight: 600; }
.seg button.hint { box-shadow: 0 0 0 2px var(--blue); animation: hintRing 1.3s ease-in-out infinite; }
@keyframes hintRing { 50% { box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.35); } }
.seg.scope { display: flex; margin-bottom: 8px; } .seg.scope button { flex: 1; }
.pan-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; font-size: 13px; }
.chk { display: flex; align-items: center; gap: 8px; margin: 9px 0; font-size: 13px; }
.chk input { margin: 0; accent-color: var(--blue); }
.pan-warm .mwarm { padding: 2px 0 0; }
.pan-warm .mwarm.inherit { opacity: 0.55; }
.pan-note { margin: 10px 0 0; font-size: 11.5px; color: #8a8a8e; line-height: 1.35; }
.ses { width: 304px; }
.ses-title { display: block; font-size: 14px; }
.ses-sub { margin: 3px 0 10px; font-size: 12.5px; color: #6b6b70; line-height: 1.4; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(0, 0, 0, 0.07); font-size: 13px; font-weight: 600; cursor: default; }
.chip:hover { background: var(--blue); color: #fff; }
.ses-big { margin: 0; font: 700 20px/1.2 var(--display); }
.ses-over { margin: 0; font: 700 32px/1.1 var(--display); color: #d5702f; font-variant-numeric: tabular-nums; }
.ses-q { margin: 12px 0 7px; font-size: 13px; font-weight: 600; }
.ses-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn { border: 0; border-radius: 7px; padding: 6px 13px; background: rgba(0, 0, 0, 0.08); font-size: 13px; font-weight: 600; color: #1d1d1f; cursor: default; }
.btn:hover { background: rgba(0, 0, 0, 0.13); }
.btn.primary { background: var(--blue); color: #fff; }
.btn:disabled { opacity: 0.45; }
.dim { color: #8a8a8e; }

/* the HUD, the glow, the shutdown that isn't, the guide cursor */
.hud { position: absolute; left: 50%; bottom: 110px; transform: translate(-50%, 10px); z-index: 760; padding: 9px 16px; border-radius: 12px; background: rgba(30, 28, 26, 0.88); color: #fff; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; white-space: nowrap; }
.hud.on { opacity: 1; transform: translate(-50%, 0); }
.glow { position: absolute; inset: 0; z-index: 900; pointer-events: none; opacity: 0; display: grid; place-items: center; background: radial-gradient(65% 60% at 50% 44%, rgba(255, 176, 96, 0.62) 0%, rgba(255, 140, 64, 0.3) 45%, rgba(255, 120, 40, 0) 75%); }
.glow.on { animation: glow 3s ease forwards; }
@keyframes glow { 0% { opacity: 0; transform: scale(0.97); } 28% { opacity: 1; transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; } }
.glow-line { position: relative; top: -6%; margin: 0; padding: 26px 70px; font: 300 34px/1.2 var(--sys); letter-spacing: 0.005em; color: rgba(255, 255, 255, 0.96); text-shadow: 0 1px 2px rgba(50, 20, 0, 0.6), 0 0 16px rgba(50, 20, 0, 0.55); } /* like the app's: light white letters in the warm bloom, no box */
.glow-line::before { content: ""; position: absolute; inset: -6px -24px; z-index: -1; background: rgba(36, 14, 0, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent); mask-image: radial-gradient(closest-side, #000 52%, transparent); } /* a soft, frosted shade with no edge, so the words read over a busy screen */
.shutdown { position: absolute; inset: 0; z-index: 1000; background: #000; opacity: 0; pointer-events: none; display: grid; place-items: center; transition: opacity 0.7s ease; }
.shutdown.on { opacity: 1; pointer-events: auto; }
.hero:has(.shutdown.on) :is(.tour-dot, .tour-card, .guide-layer, .peek-prompt) { visibility: hidden; } /* a black screen is black: the website's own bits step out too */
.shutdown.restarting::after { content: ""; position: absolute; left: 50%; top: 62%; width: 180px; height: 4px; margin-left: -90px; border-radius: 2px; background: linear-gradient(90deg, #d9d2c6, #d9d2c6) no-repeat 0 0 / 0% 100%, rgba(217, 210, 198, 0.2); animation: bootBar 1.6s 0.4s ease-in-out forwards; }
@keyframes bootBar { to { background-size: 100% 100%, auto; } }
.shutdown-line { max-width: 620px; margin: 0; padding: 0 24px; text-align: center; font: 500 22px/1.45 var(--display); color: #d9d2c6; }
.ghost { position: absolute; left: 0; top: 0; z-index: 2000; width: 26px; height: 26px; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.ghost.on { opacity: 1; }
.ghost svg { width: 26px; height: 26px; display: block; margin: -3px 0 0 -5px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); transition: transform 0.12s; }
.ghost.press svg { transform: scale(0.86); }
.ghost-keys { position: absolute; left: 24px; top: 22px; display: none; gap: 3px; padding: 4px 6px; border-radius: 9px; background: rgba(20, 18, 16, 0.85); }
.ghost-keys kbd { background: var(--amber); color: var(--amber-ink); border-color: rgba(0, 0, 0, 0.3); transform: translateY(1px); }
.ghost.keys .ghost-keys { display: flex; }
.ghost-ring { position: absolute; left: -16px; top: -16px; z-index: 1999; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); pointer-events: none; animation: ring 0.55s ease-out forwards; }
.ghost-ring.right { border-color: #ffd29a; }
@keyframes ring { from { scale: 0.4; opacity: 1; } to { scale: 1.6; opacity: 0; } }

/* ================= the apps ================= */
/* Browser */
.br-titlebar { justify-content: flex-start; gap: 6px; }
.br-tabs { display: flex; gap: 4px; min-width: 0; flex: 1; overflow: hidden; }
.br-tab { flex: 0 1 220px; min-width: 70px; height: 28px; border-radius: 8px; display: flex; align-items: center; gap: 7px; padding: 0 6px 0 10px; font-size: 12.5px; color: #555; white-space: nowrap; overflow: hidden; cursor: default; }
.br-tab:hover { background: rgba(0, 0, 0, 0.05); }
.br-tab.on { background: #fff; color: #1d1d1f; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.16); }
.br-tab-t { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.br-tab-x { flex: none; width: 18px; height: 18px; border: 0; border-radius: 5px; background: none; color: #888; font-size: 14px; line-height: 18px; padding: 0; opacity: 0; cursor: default; }
.br-tab:hover .br-tab-x, .br-tab.on .br-tab-x { opacity: 1; }
.br-tab-x:hover { background: rgba(0, 0, 0, 0.08); }
.br-plus { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; font-size: 18px; color: #666; cursor: default; }
.br-plus:hover { background: rgba(0, 0, 0, 0.06); }
.fav { flex: none; width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; font: 900 8.5px/1 var(--sys); color: #fff; }
.fav-pulse { background: #ff2d2d; } .fav-now { background: #e10600; } .fav-shop { background: linear-gradient(135deg, #ff1f8e, #ff7a00); } .fav-new { background: #b9b6b0; }
.fav-lp { background: linear-gradient(90deg, #2a2622 50%, #e8894a 50%); border-radius: 50%; }
.br { height: 100%; display: flex; flex-direction: column; position: relative; }
.br-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #fbfaf9; border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); }
.br-nav { width: 28px; height: 26px; border: 0; border-radius: 7px; background: none; font-size: 20px; line-height: 1; color: #555; cursor: default; }
.br-nav:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); }
.br-nav:disabled { opacity: 0.3; }
.br-url { flex: 1; max-width: 560px; margin: 0 auto; height: 30px; border-radius: 9px; background: rgba(0, 0, 0, 0.055); display: flex; align-items: center; gap: 7px; padding: 0 12px; }
.br-url svg { width: 11px; height: 11px; color: #777; flex: none; }
.br-url input { flex: 1; min-width: 0; border: 0; background: none; font: 13px var(--sys); color: #222; outline: none; text-align: center; }
.br-url input:focus { text-align: left; }
.br-url:focus-within { background: #fff; box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.35); }
.br-ext { width: 30px; height: 28px; border: 0; border-radius: 7px; background: none; display: grid; place-items: center; cursor: default; }
.br-ext:hover { background: rgba(0, 0, 0, 0.06); }
.ext-mark { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #2a2622; background: linear-gradient(90deg, #2a2622 50%, var(--amber) 50%); vertical-align: -2px; }
.br-extpop { position: absolute; right: 10px; top: 44px; z-index: 10; width: 270px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 14px 40px rgba(10, 10, 40, 0.25); font-size: 13px; }
.br-extpop b { display: flex; align-items: center; gap: 7px; }
.br-extpop p { margin: 6px 0 10px; color: #444; line-height: 1.4; }
.br-view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #fff; }

/* Pulse */
.pulse { min-height: 100%; background: #0f0f10; color: #f1f1f1; position: relative; }
.pu-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: rgba(15, 15, 16, 0.96); }
.pu-logo { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: #fff; font: 800 18px/1 var(--display); letter-spacing: -0.03em; cursor: default; }
.pu-play { display: grid; place-items: center; width: 26px; height: 18px; border-radius: 5px; background: #ff2d2d; font-size: 9px; }
.pu-search { flex: 1; max-width: 460px; margin: 0 auto; }
.pu-search input { width: 100%; height: 32px; border-radius: 999px; border: 1px solid #333; background: #181818; color: #eee; padding: 0 14px; font: 13px var(--sys); outline: none; }
.pu-search input:focus { border-color: #3b82f6; }
.pu-bell { position: relative; border: 0; background: none; font-size: 17px; cursor: default; }
.pu-bell i { position: absolute; top: -6px; right: -10px; background: #ff2d2d; color: #fff; font: 800 9.5px/1 var(--sys); font-style: normal; padding: 3px 4px; border-radius: 99px; }
.pu-me { width: 28px; height: 28px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #e8894a, #c2410c); cursor: default; }
.pu-drop { position: absolute; right: 18px; top: 50px; z-index: 5; width: 280px; padding: 6px; border-radius: 12px; background: #222; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.pu-drop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: #eee; text-align: left; font-size: 13px; cursor: default; }
.pu-drop button:hover { background: #333; }
.pu-drop p { margin: 8px 10px; font-size: 13px; color: #ccc; }
.pu-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--h, 20) 90% 60%), hsl(calc(var(--h, 20) + 50) 90% 50%)); }
.pu-chips { display: flex; gap: 8px; padding: 2px 18px 12px; }
.pu-chip { border: 0; border-radius: 8px; padding: 6px 12px; background: #262626; color: #eee; font-size: 13px; font-weight: 600; cursor: default; }
.pu-chip.on { background: #f1f1f1; color: #111; }
.pu-results { margin: 4px 18px 12px; color: #aaa; font-size: 13px; }
.pu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 14px; padding: 0 18px 24px; }
.pu-card { border: 0; padding: 0; background: none; color: inherit; text-align: left; cursor: default; }
.pu-th { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.pu-th svg { width: 100%; height: 100%; display: block; transition: transform 0.4s; }
.pu-card:hover .pu-th svg { transform: scale(1.04); }
.pu-card:hover .bob, .playing .bob { animation: bob 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.playing .beam, .pu-card:hover .beam { animation: beam 2s ease-in-out infinite; transform-origin: 50% 0; transform-box: fill-box; }
.playing .nudge-arrow { animation: poke 0.9s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-2deg) scale(1.03); } }
@keyframes beam { 50% { transform: rotate(14deg); } }
@keyframes poke { 50% { translate: -6px 0; } }
.pu-th em { position: absolute; right: 6px; bottom: 6px; padding: 2px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.8); color: #fff; font: 600 11px/1.3 var(--sys); font-style: normal; }
.pu-th em.live { background: #ff2d2d; }
.pu-meta { display: flex; gap: 10px; padding-top: 9px; }
.pu-meta b { display: block; font-size: 13.5px; line-height: 1.3; }
.pu-meta small { display: block; margin-top: 3px; color: #aaa; font-size: 12px; }
.pu-watch { display: grid; grid-template-columns: 1fr 300px; gap: 18px; padding: 4px 18px 24px; }
.pu-player { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.pu-player svg { width: 100%; height: 100%; display: block; }
.pu-vid { position: absolute; inset: 0; }
.pu-vid svg { animation: kb 15s ease-in-out infinite alternate; animation-play-state: paused; }
.pu-player.playing .pu-vid svg { animation-play-state: running; }
@keyframes kb { to { transform: scale(1.08); } }
.pu-pp { width: 36px; height: 30px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; cursor: default; }
.pu-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.25); }
.pu-prog i { display: block; height: 100%; width: 0; background: #ff2d2d; }
.pu-main h2 { margin: 12px 0 10px; font: 700 19px/1.25 var(--display); }
.pu-chan { display: flex; align-items: center; gap: 10px; }
.pu-chan b { display: block; font-size: 14px; } .pu-chan small { color: #aaa; font-size: 12px; }
.pu-sub { margin-left: 14px; border: 0; border-radius: 999px; padding: 8px 16px; background: #f1f1f1; color: #111; font-weight: 700; font-size: 13px; cursor: default; }
.pu-sub.on { background: #333; color: #eee; }
.pu-next h4 { margin: 0 0 10px; font-size: 14px; }
.pu-nv { display: grid; grid-template-columns: 140px 1fr; gap: 10px; width: 100%; margin-bottom: 12px; border: 0; padding: 0; background: none; color: inherit; text-align: left; cursor: default; }
.pu-nt { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; display: block; }
.pu-nt svg { width: 100%; height: 100%; display: block; }
.pu-nt em { position: absolute; right: 4px; bottom: 4px; padding: 1px 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.8); font: 600 10px/1.3 var(--sys); font-style: normal; }
.pu-nv b { display: block; font-size: 12.5px; line-height: 1.3; } .pu-nv small { color: #aaa; font-size: 11.5px; }

/* NOW */
.now { min-height: 100%; background: #fff; color: #111; }
.now-ticker { height: 26px; background: #e10600; color: #fff; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.now-track { display: inline-flex; gap: 46px; padding-left: 20px; font: 800 12px/1 var(--sys); letter-spacing: 0.04em; text-transform: uppercase; animation: ticker 28s linear infinite; }
.now-track span::before { content: "●"; margin-right: 12px; color: #ffd400; }
@keyframes ticker { to { transform: translateX(-50%); } }
.now-mast { display: flex; align-items: center; gap: 12px; padding: 12px 22px 10px; border-bottom: 3px solid #111; }
.now-logo { border: 0; background: none; padding: 0; font: 900 34px/0.9 var(--display); letter-spacing: -0.05em; color: #e10600; cursor: default; }
.now-live { display: inline-flex; align-items: center; gap: 6px; background: #e10600; color: #fff; font: 800 11px/1 var(--sys); padding: 4px 8px; border-radius: 4px; letter-spacing: 0.06em; }
.now-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.now-upd { color: #6b6b6b; font-size: 12px; }
.now-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; padding: 16px 22px; }
.now-hero { border: 0; padding: 0; background: none; text-align: left; color: inherit; cursor: default; }
.now-img { position: relative; display: block; aspect-ratio: 16 / 8; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #ff1e56 0%, #ff6a00 55%, #ffd000 100%); }
.now-img i { position: absolute; display: block; background: #fff; border-radius: 10px; }
.now-img i:nth-child(1) { left: 18%; top: 14%; width: 28px; height: 60%; transform: rotate(-8deg); box-shadow: 0 0 0 6px rgba(255, 230, 0, 0.6); }
.now-img i:nth-child(2) { left: 16.6%; bottom: 9%; width: 32px; height: 32px; border-radius: 50%; }
.now-img i:nth-child(3) { right: 8%; top: 18%; width: 44%; height: 46%; border-radius: 50%; background: radial-gradient(circle, #fff200 0 30%, #ff2a6d 31% 55%, transparent 56%); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }
.now-hero b { display: block; margin: 12px 0 4px; font: 800 24px/1.12 var(--display); letter-spacing: -0.02em; }
.now-hero small { color: #555; font-size: 13.5px; }
.now-side h4 { margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid #111; font: 800 11.5px/1 var(--sys); letter-spacing: 0.06em; text-transform: uppercase; color: #e10600; }
.now-side ol { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.now-side li { counter-increment: n; display: grid; grid-template-columns: 24px 1fr; padding: 9px 0; border-bottom: 1px solid #eee; }
.now-side li::before { content: counter(n); font: 900 18px/1 var(--display); color: #e10600; }
.now-side li button { border: 0; padding: 0; background: none; text-align: left; font: 650 13.5px/1.3 var(--sys); cursor: default; color: #111; }
.now-side li button:hover, .now-hero:hover b { text-decoration: underline; }
.now-sub { display: block; width: calc(100% - 44px); margin: 4px 22px 22px; border: 0; background: #ffe600; color: #111; text-align: center; font: 900 13px/1 var(--sys); letter-spacing: 0.08em; padding: 12px 8px; border-radius: 6px; animation: glare 1.6s ease-in-out infinite; cursor: default; }
@keyframes glare { 50% { background: #fff36b; } }
.now-art { max-width: 640px; margin: 0 auto; padding: 18px 22px 40px; }
.now-back { border: 0; background: none; padding: 0; color: #e10600; font-weight: 700; cursor: default; }
.now-art .d-h1 { margin: 14px 0 6px; font: 800 30px/1.1 var(--display); letter-spacing: -0.02em; }
.now-dek { margin: 0 0 6px; font-size: 17px; color: #444; }
.now-by { margin: 0 0 18px; font-size: 12.5px; color: #888; }
.now-art p { font-size: 15.5px; line-height: 1.6; }

/* Last Chance */
.shop { min-height: 100%; background: #fff4fa; position: relative; }
.shop-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
.shop-logo { font: 900 20px/1 var(--display); letter-spacing: -0.03em; color: #ff1f8e; }
.shop-flash { margin: 0 auto; padding: 7px 12px; border-radius: 8px; background: #111; color: #fff; font: 800 12.5px/1 var(--sys); letter-spacing: 0.05em; }
.shop-flash b { color: #ffe600; font-family: var(--mono); font-size: 14px; }
.shop-cart { position: relative; border: 1px solid #f2c6dc; border-radius: 999px; padding: 7px 14px; background: #fff; font-weight: 700; font-size: 13px; cursor: default; }
.shop-cart i { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #ff1f8e; color: #fff; font: 800 10.5px/18px var(--sys); font-style: normal; text-align: center; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 18px 22px 26px; }
.shop-item { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.shop-art { position: relative; height: 130px; border-radius: 12px; background: linear-gradient(135deg, var(--a), var(--b) 55%, var(--c)); overflow: hidden; }
.shop-art i { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 40% 60% 55% 45%; background: rgba(255, 255, 255, 0.45); animation: blob 6s ease-in-out infinite; }
@keyframes blob { 50% { border-radius: 60% 40% 45% 55%; transform: rotate(20deg) scale(1.08); } }
.shop-item b { font-size: 14px; line-height: 1.25; }
.shop-price { font: 900 18px/1.2 var(--display); color: #ff1f1f; }
.shop-price s { color: #9a9a9a; font-weight: 500; font-size: 13px; }
.shop-stock { align-self: flex-start; background: #ff7a00; color: #fff; font: 800 11px/1 var(--sys); padding: 5px 8px; border-radius: 6px; }
.shop-add { margin-top: 4px; border: 0; border-radius: 10px; padding: 10px; background: linear-gradient(90deg, #ff1f8e, #ff7a00); color: #fff; font: 800 13px/1 var(--sys); cursor: default; }
.shop-add.added { background: #22c55e; }
.shop-cartpop { position: absolute; right: 22px; top: 54px; z-index: 3; width: 280px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(60, 0, 40, 0.2); font-size: 13px; }
.shop-cartpop p { margin: 6px 0 10px; color: #444; line-height: 1.4; }

/* lesspull.com inside the drawn browser: the GitHub page, simplified */
.lps { min-height: 100%; background: #faf8f4; color: #23201b; padding-bottom: 30px; }
.lps-nav { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 26px; background: rgba(250, 248, 244, 0.96); border-bottom: 1px solid #ece6dc; }
.lps-nav b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.lps-dl { border: 0; border-radius: 999px; padding: 9px 16px; background: var(--amber); color: var(--amber-ink); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.lps-dl:hover { background: #f09a5e; }
.lps section { max-width: 640px; margin: 0 auto; padding: 22px 26px 6px; }
.lps .d-h1 { margin: 18px 0 10px; font: 700 40px/1.05 var(--display); letter-spacing: -0.03em; }
.lps h2 { margin: 0 0 8px; font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; }
.lps p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: #3b3832; }
.lps-hero small { display: block; margin-top: 10px; color: #8a8277; font-size: 12.5px; }
.lps-glance ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.7; color: #3b3832; }
.lps-ex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lps-card { padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #ece6dc; font-size: 12.5px; }
.lps-card i { display: block; height: 54px; border-radius: 8px; margin-bottom: 8px; }
.lps-card.gray i { background: linear-gradient(135deg, #8a8a8a, #cfcfcf); }
.lps-card.color i { background: linear-gradient(135deg, #ff5e62, #ffb45e 50%, #3b82f6); }
.lps-card.warm i { background: linear-gradient(135deg, #9a6a3a, #e9b97a); }
.lps-card b { display: block; } .lps-card small { color: #8a8277; }
.lps-link { color: #9a4f17; font-weight: 600; text-decoration: none; }
.lps-end { text-align: center; padding-top: 26px !important; }

.ntp { min-height: 100%; padding: 50px 30px; background: #f5f4f2; text-align: center; }
.ntp h3 { margin: 0 0 18px; font: 700 20px/1.2 var(--display); color: #333; }
.ntp-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }
.ntp-grid button { width: 96px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; color: #333; cursor: default; }
.ntp-ic { width: 64px; height: 64px; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); display: grid; place-items: center; }
.ntp-ic .fav { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
.ntp-ic .fav-lp { border-radius: 50%; }
.ntp-grid button:hover .ntp-ic { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); }
.ntp-note { margin-top: 30px; color: #8a8a8e; font-size: 13px; }
.nod { min-height: 100%; padding: 60px 40px; background: #fafafa; text-align: center; color: #333; }
.nod h2 { font: 700 24px/1.2 var(--display); }
.nod button { border: 0; background: none; padding: 0; color: var(--blue); font-weight: 600; cursor: default; }

/* Everyone */
.ev { height: 100%; display: flex; background: #fff; position: relative; }
.ev-nav { flex: none; width: 168px; padding: 14px 10px; border-right: 1px solid #f0f0f0; display: flex; flex-direction: column; gap: 4px; }
.ev-logo { padding: 4px 10px 14px; font: 800 20px/1 var(--display); letter-spacing: -0.03em; background: linear-gradient(90deg, #ff2d6f, #ff8a2f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev-nav button { display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 10px; padding: 9px 10px; background: none; text-align: left; font-size: 14px; color: #333; cursor: default; }
.ev-nav button:hover { background: #f5f5f5; }
.ev-nav button.on { font-weight: 700; color: #111; background: #f2f2f2; }
.ev-nav i { font-style: normal; background: #ff2d55; color: #fff; font: 800 10.5px/1 var(--sys); padding: 3px 6px; border-radius: 99px; }
.ev-nav i:empty { display: none; }
.ev-main { flex: 1; min-width: 0; overflow-y: auto; position: relative; }
.ev-home { max-width: 520px; margin: 0 auto; padding: 0 0 30px; }
.ev-stories { display: flex; gap: 14px; padding: 14px 16px; overflow: hidden; border-bottom: 1px solid #f2f2f2; }
.ev-st { flex: none; width: 66px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: #444; cursor: default; padding: 0; }
.ev-st small { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-ring { padding: 2.5px; border-radius: 50%; background: conic-gradient(#ffd23f, #ff2d6f, #c13cff, #ffd23f); }
.ev-st.me .ev-ring { background: #ddd; }
.ev-ring .ev-av { width: 56px; height: 56px; border: 3px solid #fff; display: grid; place-items: center; color: #555; font-size: 20px; }
.ev-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); }
.ev-av.big { width: 84px; height: 84px; }
.ev-new { position: sticky; top: 10px; z-index: 3; display: block; margin: 0 auto -32px; border: 0; border-radius: 999px; padding: 8px 14px; background: #1d9bf0; color: #fff; font-weight: 700; font-size: 13px; box-shadow: 0 8px 20px rgba(29, 155, 240, 0.4); cursor: default; }
.ev-new[hidden] { display: none; }
.ev-post { border-bottom: 1px solid #f2f2f2; padding: 12px 16px; position: relative; transition: opacity 0.25s; }
.ev-post.gone { opacity: 0; }
.ev-post header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ev-post header b { font-size: 13.5px; } .ev-post header small { color: #8a8a8e; font-size: 12px; }
.ev-more { margin-left: auto; border: 0; background: none; font-size: 16px; color: #888; letter-spacing: 1px; cursor: default; }
.ev-menu { position: absolute; right: 14px; top: 40px; z-index: 4; padding: 5px; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.ev-menu button { display: block; width: 100%; border: 0; border-radius: 7px; padding: 8px 14px; background: none; text-align: left; font-size: 13px; cursor: default; }
.ev-menu button:hover { background: #f2f2f2; }
.ev-media { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.ev-media svg { width: 100%; height: 100%; display: block; }
.ev-media.video { aspect-ratio: 16 / 9; }
.ev-vid { position: absolute; left: 10px; bottom: 10px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11.5px; font-weight: 600; }
.ev-big { margin: 4px 0 10px; font: 650 20px/1.3 var(--display); }
.ev-acts { display: flex; gap: 18px; margin: 10px 0 6px; }
.ev-acts button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; color: #555; font-size: 12.5px; cursor: default; }
.ev-acts svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ev-acts .ev-like.on { color: #ff2d55; } .ev-acts .ev-like.on svg { fill: currentColor; }
.ev-acts .ev-save { margin-left: auto; } .ev-acts .ev-save.on svg { fill: currentColor; }
.ev-like.pop svg { animation: likePop 0.4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes likePop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
.ev-acts b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-cap { margin: 2px 0 0; font-size: 13.5px; } .ev-cap b { margin-right: 4px; }
.ev-cbox { display: flex; gap: 8px; margin-top: 8px; }
.ev-cbox[hidden] { display: none; }
.ev-cbox input { flex: 1; border: 1px solid #e3e3e3; border-radius: 999px; padding: 7px 12px; font: 13px var(--sys); outline: none; }
.ev-c { margin: 6px 0 0; font-size: 13px; } .ev-c b { margin-right: 5px; }
.ev-story { position: absolute; inset: 0; z-index: 10; background: #111; display: flex; align-items: center; justify-content: center; }
.ev-story[hidden] { display: none; }
.ev-sbars { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; gap: 4px; z-index: 2; }
.ev-sbars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; position: relative; }
.ev-sbars i.done { background: #fff; }
.ev-sbars i.run::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: sbar 3.6s linear forwards; }
@keyframes sbar { from { transform: scaleX(0); } }
.ev-shead { position: absolute; top: 24px; left: 14px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; color: #fff; }
.ev-sx { margin-left: auto; border: 0; background: none; color: #fff; font-size: 26px; cursor: default; }
.ev-sart { width: min(360px, 70%); aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; }
.ev-sart svg { width: 100%; height: 100%; display: block; }
.ev-stext { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; color: #fff; font: 700 20px/1.2 var(--display); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.ev-sprev, .ev-snext { position: absolute; top: 0; bottom: 0; width: 40%; border: 0; background: none; cursor: default; }
.ev-sprev { left: 0; } .ev-snext { right: 0; }
.ev-reels { height: 100%; display: grid; place-items: center; background: #111; padding: 16px; }
.ev-reel { position: relative; height: 100%; max-height: 640px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; }
.ev-reel svg { width: 100%; height: 100%; display: block; }
.ev-rtext { position: absolute; left: 14px; right: 70px; bottom: 26px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.ev-rtext p { margin: 4px 0 0; font-size: 13.5px; }
.ev-rside { position: absolute; right: 10px; bottom: 30px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ev-rside button { border: 0; background: rgba(0, 0, 0, 0.35); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; cursor: default; }
.ev-rside .ev-like { height: auto; padding: 8px 0; flex-direction: column; font-size: 11px; display: flex; gap: 2px; }
.ev-rside .ev-like svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; }
.ev-rside .ev-like.on svg { fill: #ff2d55; stroke: #ff2d55; }
.ev-rbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.3); }
.ev-rbar i { display: block; height: 100%; width: 0; background: #fff; }
.ev-act { max-width: 560px; margin: 0 auto; padding: 14px 18px; }
.ev-acthead { display: flex; align-items: center; justify-content: space-between; }
.ev-acthead h3 { margin: 4px 0 10px; font-size: 18px; }
.ev-act p { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; margin: 0; padding: 10px 0; border-bottom: 1px solid #f2f2f2; font-size: 13.5px; }
.ev-act p.new { background: linear-gradient(90deg, rgba(29, 155, 240, 0.08), transparent); }
.ev-act small { color: #8a8a8e; }
.ev-prof { padding: 40px; text-align: center; }
.ev-prof h3 { margin: 12px 0 4px; } .ev-prof p { color: #555; }

/* Darkroom */
.dr { height: 100%; display: flex; background: #1c1c1e; color: #e5e5ea; }
.dr-side { flex: none; width: 176px; padding: 12px 10px; background: #232326; border-right: 1px solid #2f2f33; overflow-y: auto; }
.dr-side h5 { margin: 12px 8px 6px; font: 700 10.5px/1 var(--sys); letter-spacing: 0.08em; text-transform: uppercase; color: #8e8e93; }
.dr-side button { display: block; width: 100%; border: 0; border-radius: 7px; padding: 7px 9px; background: none; text-align: left; color: #e5e5ea; font-size: 13px; cursor: default; }
.dr-side button:hover { background: #2e2e32; }
.dr-side button.on { background: #3a3a3f; }
.dr-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dr-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #2f2f33; }
.dr-bar b { font-size: 14px; } .dr-bar > span { color: #8e8e93; font-size: 12.5px; }
.dr-zoom { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8e8e93; }
.dr-zoom input { width: 100px; accent-color: #e5e5ea; }
.dr-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 6px; padding: 10px; align-content: start; }
.dr-ph { position: relative; border: 0; padding: 0; background: none; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; cursor: default; }
.dr-ph svg { width: 100%; height: 100%; display: block; transition: transform 0.3s; }
.dr-ph:hover svg { transform: scale(1.04); }
.dr-ph i { position: absolute; right: 6px; bottom: 4px; color: #fff; font-style: normal; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.dr-empty { margin: 40px; color: #8e8e93; text-align: center; }
.dr-back { border: 0; background: none; color: #0a84ff; font-size: 13.5px; cursor: default; padding: 0; }
.dr-tools { margin-left: auto; display: flex; gap: 6px; }
.dr-tools button { border: 0; border-radius: 7px; padding: 5px 10px; background: #2e2e32; color: #e5e5ea; font-size: 13px; cursor: default; }
.dr-tools button:hover { background: #3a3a3f; }
.dr-tools .dr-fav.on { color: #ff375f; } .dr-tools .dr-edit.on { background: #e5e5ea; color: #111; }
.dr-view { flex: 1; min-height: 0; display: flex; }
.dr-big { flex: 1; min-width: 0; display: grid; place-items: center; padding: 18px; }
.dr-big svg { width: 100%; height: 100%; max-height: 100%; display: block; }
.dr-adj { display: none; width: 220px; flex: none; padding: 14px; border-left: 1px solid #2f2f33; }
.dr-view.editing .dr-adj { display: block; }
.dr-adj h5 { margin: 0 0 12px; font: 700 10.5px/1 var(--sys); letter-spacing: 0.08em; text-transform: uppercase; color: #8e8e93; }
.dr-adj label { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin-bottom: 14px; font-size: 12.5px; }
.dr-adj label b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-adj input { grid-column: 1 / -1; accent-color: #e5e5ea; }
.dr-adj .btn { background: #2e2e32; color: #e5e5ea; }

/* Draft */
.dft { height: 100%; display: flex; flex-direction: column; background: #f4f1ec; }
.dft-tools { flex: none; display: flex; align-items: center; gap: 4px; padding: 7px 12px; background: #fbfaf8; border-bottom: 1px solid #e8e2d8; }
.dft-tools button { border: 0; border-radius: 6px; min-width: 30px; height: 26px; padding: 0 8px; background: none; font-size: 14px; color: #3a352d; cursor: default; }
.dft-tools button:hover { background: #ece6dc; }
.dft-tools button.on { background: #3a352d; color: #fff; }
.dft-sep { width: 1px; height: 18px; background: #e0d9cd; margin: 0 6px; }
.dft-count { margin-left: auto; font-size: 12px; color: #9a9283; font-variant-numeric: tabular-nums; }
.dft-page { flex: 1; overflow-y: auto; padding: 28px 20px 60px; }
.dft-doc { max-width: 600px; margin: 0 auto; padding: 40px 52px 50px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(60, 40, 10, 0.08); outline: none; color: #2b2720; font: 16px/1.7 Georgia, "Iowan Old Style", "Times New Roman", serif; cursor: text; user-select: text; -webkit-user-select: text; }
.dft-doc .d-h1 { margin: 0 0 18px; font: 600 30px/1.2 var(--display); letter-spacing: -0.02em; }
.dft-doc p { margin: 0 0 16px; }
.dft-fig { margin: 24px 0 22px; padding: 14px 14px 10px; border: 1px solid #ece6dc; border-radius: 10px; background: #fdfcfa; user-select: none; -webkit-user-select: none; cursor: default; }
.dft-fig figcaption { font: 600 12.5px/1 var(--sys); color: #6b6357; margin-bottom: 6px; }
.dft-fig svg { width: 100%; display: block; }
.dft-hit { cursor: pointer; }
.dft-line { transition: stroke-width 0.15s; }
.dft-line.picked { stroke-width: 8; }
.dft-legend { display: flex; gap: 16px; font: 12.5px var(--sys); color: #4a443a; padding: 4px 4px 0; }
.dft-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dft.focused .dft-doc p:not(:hover), .dft.focused .dft-doc h1:not(:hover) { opacity: 0.32; transition: opacity 0.3s; }

/* Cut */
.cut { height: 100%; display: flex; flex-direction: column; background: #141416; color: #e5e5ea; }
.cut-top { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 10px; }
.cut-mon { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #000; border-radius: 8px; overflow: hidden; }
.cut-frame { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.cut-frame svg { width: 100%; height: 100%; display: block; }
.cut-tc { padding: 6px 10px; font: 13px var(--mono); color: #aaa; background: #0b0b0c; }
.cut-insp { width: 220px; flex: none; padding: 12px; background: #1c1c1f; border-radius: 8px; }
.cut-insp h5 { margin: 0 0 12px; font: 700 10.5px/1 var(--sys); letter-spacing: 0.08em; text-transform: uppercase; color: #8e8e93; }
.cut-insp label { display: block; margin-bottom: 14px; font-size: 12.5px; }
.cut-insp input { display: block; width: 100%; margin-top: 6px; accent-color: #a78bfa; }
.cut-insp .btn { background: #8b5cf6; color: #fff; }
.cut-trans { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 12px; font-size: 12px; color: #8e8e93; }
.cut-play { width: 34px; height: 26px; border: 0; border-radius: 7px; background: #2e2e32; color: #fff; font-size: 12px; cursor: default; }
.cut-tl { position: relative; flex: none; height: 110px; margin: 0 12px 12px; padding: 10px 0; background: #1c1c1f; border-radius: 8px; cursor: pointer; }
.cut-track { position: relative; height: 40px; margin: 0 10px 8px; }
.cut-clip { position: absolute; top: 0; height: 100%; border-radius: 6px; padding: 4px 8px; font-size: 11.5px; font-weight: 600; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); overflow: hidden; }
.cut-track.audio { height: 30px; }
.cut-wave { position: absolute; inset: 0; border-radius: 6px; background: repeating-linear-gradient(90deg, #34d399 0 2px, transparent 2px 5px); opacity: 0.6; }
.cut-head { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); pointer-events: none; }

/* Family */
.fam { height: 100%; display: flex; flex-direction: column; background: #f2f2f7; }
.fam-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e5e5ea; }
.fam-avs { display: flex; } .fam-avs i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; } .fam-avs i:first-child { margin-left: 0; }
.fam-head b { display: block; font-size: 14px; } .fam-head small { color: #8a8a8e; font-size: 12px; }
.fam-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.fam-m { align-self: flex-start; max-width: 75%; margin: 0; padding: 8px 12px; border-radius: 16px; background: #fff; font-size: 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
.fam-m b { display: block; font-size: 11.5px; color: #8a8a8e; margin-bottom: 2px; }
.fam-m.me { align-self: flex-end; background: #34c759; color: #fff; }
.fam-typing { align-self: flex-start; margin: 4px 0 0; font-size: 12.5px; color: #8a8a8e; }
.typing { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: #8a8a8e; animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 40% { transform: translateY(-3px); opacity: 0.4; } }
.fam-in { flex: none; display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid #e5e5ea; }
.fam-in input { flex: 1; border: 1px solid #e5e5ea; border-radius: 999px; padding: 8px 14px; font: 14px var(--sys); outline: none; }

.nothing { height: 100%; display: grid; place-content: center; text-align: center; background: #f4f1ec; color: #8a847b; }
.nothing p { margin: 2px 0; font-size: 15px; }
.nothing p:first-child { color: #5d574e; font-weight: 600; }
.trash { height: 100%; display: flex; flex-direction: column; background: #fff; }
.trash-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #eee; }
.trash-empty { flex: 1; display: grid; place-content: center; text-align: center; color: #8a8a8e; }
.trash-empty p { margin: 0 0 6px; font-size: 16px; color: #555; }

/* small system windows and Less Pull Settings */
.about { text-align: center; padding: 8px 18px 22px; }
.about-icon svg { width: 76px; height: 76px; }
.about h3 { margin: 6px 0 2px; font: 700 20px/1.2 var(--display); }
.about-sub { margin: 0 0 14px; font-size: 12px; color: #8a8a8e; }
.about dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.about dt { text-align: right; color: #6b6b70; } .about dd { margin: 0; text-align: left; font-weight: 600; }
.fq { padding: 12px 16px 16px; font-size: 12.5px; color: #3a3a3f; }
.fq p { margin: 0 0 10px; }
.fq-list { background: #fff; border: 0.5px solid rgba(0, 0, 0, 0.18); border-radius: 6px; padding: 4px; }
.fq-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; padding: 5px 8px; border-radius: 4px; background: none; text-align: left; font-size: 13px; cursor: default; }
.fq-row.on { background: var(--blue); color: #fff; }
.fq-row em { margin-left: auto; font-style: normal; opacity: 0.85; }
.fq-dot { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #ff6a95, #ff8f2e); }
.fq-ic svg { width: 16px; height: 16px; display: block; }
.fq-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.lps-set { font-size: 13px; }
.set-tabs { display: flex; justify-content: center; gap: 4px; padding: 10px; background: #f6f5f3; border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); }
.set-tabs button { border: 0; border-radius: 7px; padding: 6px 12px; background: none; font-size: 13px; color: #444; cursor: default; }
.set-tabs button.on { background: #fff; color: #111; font-weight: 600; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.18); }
.set-body { padding: 16px 22px 20px; min-height: 180px; }
.set-note { margin: -4px 0 12px 24px; color: #8a8a8e; font-size: 12px; line-height: 1.4; }
.set-keys p { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; }
.set-keys .set-note { display: block; margin: 0 0 12px; }
.set-keys kbd { background: #fff; color: #222; border-color: rgba(0, 0, 0, 0.25); }
.set-row { display: grid; grid-template-columns: 22px 1fr auto auto auto auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; }
.set-ic svg { width: 20px; height: 20px; display: block; }
.chk.mini { margin: 0; font-size: 12px; }
.set-l { font-size: 12px; color: #6b6b70; }
.set-x { border: 0; background: none; color: #c0392b; font-size: 12px; cursor: default; }
.set-empty { color: #6b6b70; line-height: 1.5; }
.set-about { text-align: center; }
.set-about h3 { margin: 6px 0 2px; }
.set-about p { color: #555; }

/* The real page below the drawing: see "the real page" at the end of this file. */
.phone-note { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; padding: 14px 16px; border-radius: 16px; background: var(--card-bg); color: var(--card-ink); font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.phone-note p { margin: 0; display: flex; gap: 10px; align-items: center; }
@media (max-width: 900px) { .brand-line, .site-nav a { display: none; } }
@media (max-width: 560px) { .site-nav { display: none; } .site-head { gap: 14px; } .site-head .cord { margin-left: auto; } }

@media (prefers-reduced-motion: reduce) {
  .win, .menubar, .dock, .notif, .strip-badge, .mc-label, .tour-card, .hud, .shutdown { transition: none !important; animation: none !important; }
  .now-track, .now-live i, .now-img i, .now-sub, .shop-art i, .typing i, .lp-label.over, .lp-icon::after, .bob, .beam, .nudge-arrow, .pu-player svg { animation: none !important; }
  .glow.on { animation: glowStill 3s steps(1, end) forwards; }
  @keyframes glowStill { 0% { opacity: 1; } 100% { opacity: 0; } }
}

/* ---------- second round: details ---------- */
.mi.version { color: #a3a3a8; font-size: 11.5px; min-height: 20px; }
.vframe { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.vbg { position: absolute; inset: -12%; filter: blur(20px) brightness(0.65) saturate(1.2); }
.vbg svg, .vfg svg { width: 100%; height: 100%; display: block; }
.vbg .bob, .vbg .beam, .vbg .nudge-arrow { animation: none !important; }
.vfg { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 16 / 9; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
.pu-note { margin: -2px 18px 12px; color: #aaa; font-size: 13px; }
.pu-rank { position: absolute; left: 8px; top: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.72); color: #fff; font: 800 12px/1 var(--sys); font-style: normal; }
.pu-livetag { position: absolute; left: 12px; top: 12px; padding: 4px 8px; border-radius: 5px; background: #ff2d2d; color: #fff; font: 800 12px/1 var(--sys); letter-spacing: 0.05em; }
.pu-player.live .pu-prog i { width: 100% !important; }
.dft-hint { display: none; margin-left: 8px; font-size: 12px; color: #9a9283; }
.dft.focused .dft-hint { display: inline; }
.dft.focused .dft-doc > * { transition: opacity 0.3s; }
.dft.focused .dft-doc > :not(.here):not(:hover) { opacity: 0.3; }
.dft.focused .dft-doc p:not(:hover), .dft.focused .dft-doc h1:not(:hover) { opacity: unset; }
.ev-caught { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #f2f9f1; color: #2f6b3a; font-size: 13.5px; display: block !important; }
.dr-side small { color: #8e8e93; font-size: 11px; margin-left: 4px; }
.dr-memory { flex: none; display: block; width: calc(100% - 20px); margin: 10px 10px 0; padding: 14px 16px; border: 0; border-radius: 12px; text-align: left; color: #fff; cursor: default; background: linear-gradient(120deg, #7b2fbe 0%, #ff5e62 60%, #ffb45e 100%); }
.dr-memory small { display: block; font: 700 10.5px/1 var(--sys); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-bottom: 6px; }
.dr-memory b { font-size: 15px; line-height: 1.3; }
.dr-info { display: none; width: 240px; flex: none; padding: 14px; border-left: 1px solid #2f2f33; }
.dr-view.info .dr-info { display: block; }
.dr-info h5 { margin: 0 0 12px; font: 700 10.5px/1 var(--sys); letter-spacing: 0.08em; text-transform: uppercase; color: #8e8e93; }
.dr-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 12.5px; }
.dr-info dt { color: #8e8e93; } .dr-info dd { margin: 0; color: #e5e5ea; }
.dr-tools .dr-inf.on { background: #e5e5ea; color: #111; }

/* The light switch: a pull cord. The one pull we recommend. */
.cord { position: relative; align-self: flex-start; flex: none; width: 24px; height: 46px; margin: 0 4px 0 2px; border: 0; padding: 0; background: none; cursor: pointer; }
.cord-swing { position: absolute; inset: 0; transform-origin: 50% 0; }
.cord-line { position: absolute; left: 50%; top: 0; width: 1.5px; height: 16px; margin-left: -0.75px; background: var(--ink-3); transition: height 0.2s; }
/* The pull is a little sun or moon: the usual day-and-night sign, so it's clear what the cord does. It shows the light you have now. */
.cord-knob { position: absolute; left: 50%; top: 14px; width: 24px; height: 24px; margin-left: -12px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--amber-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); transition: top 0.2s; }
.cord-knob svg { display: none; width: 15px; height: 15px; }
.cord.night .cord-moon, .cord:not(.night) .cord-sun { display: block; }
.cord.tug .cord-knob svg { animation: knobSpin 0.55s ease-out; }
@keyframes knobSpin { from { transform: rotate(-90deg) scale(0.6); opacity: 0; } }
.cord:hover .cord-swing { animation: sway 1.6s ease-in-out infinite; }
.cord.tug .cord-line { animation: tugLine 0.55s cubic-bezier(.3, 1.6, .5, 1); }
.cord.tug .cord-knob { animation: tugKnob 0.55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(7deg); } 70% { transform: rotate(-6deg); } }
@keyframes tugLine { 35% { height: 24px; } }
@keyframes tugKnob { 35% { top: 22px; } }
.cord:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .cord-swing, .cord-line, .cord-knob, .cord-knob svg { animation: none !important; } }
.fam-read { align-self: flex-end; margin: -4px 4px 0 0; font-size: 11px; color: #8a8a8e; }
.fam-voice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fam-voice b { width: 100%; }
.fam-play { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #34c759; color: #fff; font-size: 11px; cursor: default; }
.fam-wave { width: 120px; height: 20px; background: repeating-linear-gradient(90deg, #b8b8bd 0 2px, transparent 2px 5px); -webkit-mask: linear-gradient(90deg, #000 0 100%); border-radius: 3px; }
.fam-voice.playing .fam-wave { background: repeating-linear-gradient(90deg, #34c759 0 2px, transparent 2px 5px); animation: wave 1s linear infinite; }
.fam-voice small { color: #8a8a8e; font-size: 11.5px; }
@keyframes wave { to { background-position: 10px 0; } }
/* Pictures fill their frames exactly (percentage heights don't resolve inside aspect-ratio boxes). */
.dr-ph, .pu-th, .pu-nt, .ev-media, .pu-player, .lps-card i { position: relative; }
.dr-ph > svg, .pu-th > svg, .pu-nt > svg, .ev-media > svg, .pu-player > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cut-frame { position: relative; }
.cut-frame > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dr-ph { aspect-ratio: auto; height: 0; padding: 0 0 66.6667%; display: block; }

/* ================= the drawn Mac in dark mode ================= */
.wall-svg.wall-night { display: none; } /* not .light/.dark: .light is a window's traffic-light button */
.os-dark .wall-svg.wall-day { display: none; }
.os-dark .wall-svg.wall-night { display: block; }
.os-dark .menubar { background: rgba(8, 8, 20, 0.45); }
.os-dark .dock { background: rgba(28, 28, 34, 0.5); border-color: rgba(255, 255, 255, 0.12); }
.os-dark .dock-label { background: rgba(50, 50, 55, 0.92); }
.os-dark .win { background: #1e1e20; color: #ececf0; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 18px 50px rgba(0, 0, 0, 0.5); }
.os-dark .titlebar { background: #2a2a2d; border-bottom-color: rgba(255, 255, 255, 0.07); }
.os-dark .wtitle { color: #d8d8dc; }
.os-dark .win.inactive .light, .os-dark .light.off { background: #4a4a4e; }
.os-dark .menu, .os-dark .panel { background: rgba(42, 42, 46, 0.98); color: #ececf0; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 16px 46px rgba(0, 0, 0, 0.5); }
.os-dark .has-sub:hover > .submenu .mi { color: #ececf0; }
.os-dark .mi.head, .os-dark .pan-note, .os-dark .mwarm-ticks, .os-dark .ses-sub, .os-dark .mi.version { color: #8e8e93; }
.os-dark .msep { background: rgba(255, 255, 255, 0.12); }
.os-dark .mwarm-head b { color: #a0a0a5; }
.os-dark .seg { background: rgba(255, 255, 255, 0.09); }
.os-dark .seg button { color: #d6d6da; }
.os-dark .seg button.on { background: #5c5c62; color: #fff; }
.os-dark .btn { background: rgba(255, 255, 255, 0.12); color: #ececf0; }
.os-dark .btn:hover { background: rgba(255, 255, 255, 0.18); }
.os-dark .btn.primary { background: var(--blue); color: #fff; }
.os-dark .chip { background: rgba(255, 255, 255, 0.1); color: #ececf0; }
.os-dark .notif { background: rgba(44, 44, 48, 0.96); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 12px 34px rgba(0, 0, 0, 0.45); }
.os-dark .notif-text b { color: #f2f2f5; } .os-dark .notif-text span { color: #c8c8cc; }
.os-dark .notif-x { background: #3a3a3e; color: #ddd; }
.os-dark .nc-item { background: rgba(255, 255, 255, 0.06); color: #ececf0; } .os-dark .nc-item:hover { background: rgba(255, 255, 255, 0.1); }
.os-dark .nc-item small, .os-dark .nc-empty { color: #a0a0a5; }
.os-dark .dialog .wbody, .os-dark .float .wbody { background: #232326; }
.os-dark .about dt, .os-dark .about-sub { color: #9a9aa0; }
.os-dark .fq { color: #d6d6da; } .os-dark .fq-list { background: #1c1c1e; border-color: rgba(255, 255, 255, 0.12); }
.os-dark .set-tabs { background: #2a2a2d; border-bottom-color: rgba(255, 255, 255, 0.07); }
.os-dark .set-tabs button { color: #c8c8cc; } .os-dark .set-tabs button.on { background: #3e3e43; color: #fff; }
.os-dark .set-row { border-bottom-color: #333; } .os-dark .set-note, .os-dark .set-empty, .os-dark .set-l, .os-dark .set-about p { color: #9a9aa0; }
.os-dark .set-keys kbd { background: #3a3a3e; color: #eee; border-color: rgba(255, 255, 255, 0.2); }
/* Browser chrome goes dark; websites keep their own look, except lesspull.com, which has a dark mode */
.os-dark .br-tab { color: #b8b8bd; } .os-dark .br-tab:hover { background: rgba(255, 255, 255, 0.06); }
.os-dark .br-tab.on { background: #3c3c41; color: #fff; box-shadow: none; }
.os-dark .br-plus, .os-dark .br-nav, .os-dark .br-tab-x { color: #c8c8cc; }
.os-dark .br-bar { background: #242427; border-bottom-color: rgba(255, 255, 255, 0.07); }
.os-dark .br-url { background: rgba(255, 255, 255, 0.08); } .os-dark .br-url input { color: #ececf0; }
.os-dark .br-url:focus-within { background: #1c1c1e; }
.os-dark .br-ext:hover, .os-dark .br-plus:hover, .os-dark .br-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.os-dark .ext-mark { border-color: #ececf0; background: linear-gradient(90deg, #ececf0 50%, var(--amber) 50%); }
.os-dark .br-extpop { background: #2c2c30; color: #ececf0; } .os-dark .br-extpop p { color: #c8c8cc; }
.os-dark .br-view { background: #1e1e20; }
.os-dark .ntp { background: #1e1e20; } .os-dark .ntp h3, .os-dark .ntp-grid button { color: #ececf0; } .os-dark .ntp-ic { background: #2c2c30; }
/* Everyone, Draft, Family, Nothing, Trash in dark */
.os-dark .ev { background: #0f0f10; color: #ececf0; }
.os-dark .ev-nav { border-right-color: #232325; } .os-dark .ev-nav button { color: #c8c8cc; } .os-dark .ev-nav button:hover { background: #1c1c1e; } .os-dark .ev-nav button.on { background: #222225; color: #fff; }
.os-dark .ev-stories, .os-dark .ev-post, .os-dark .ev-act p { border-color: #232325; }
.os-dark .ev-st { color: #b8b8bd; } .os-dark .ev-ring .ev-av { border-color: #0f0f10; }
.os-dark .ev-post header small, .os-dark .ev-act small { color: #8e8e93; } .os-dark .ev-acts button { color: #b8b8bd; }
.os-dark .ev-menu { background: #2c2c30; } .os-dark .ev-menu button { color: #ececf0; } .os-dark .ev-menu button:hover { background: #3a3a3e; }
.os-dark .ev-cbox input { background: #1c1c1e; border-color: #333; color: #eee; }
.os-dark .ev-caught { background: #13261a; color: #8fd9a3; }
.os-dark .ev-act p.new { background: linear-gradient(90deg, rgba(29, 155, 240, 0.16), transparent); }
.os-dark .ev-prof p { color: #b8b8bd; }
.os-dark .dft { background: #1b1a18; } .os-dark .dft-tools { background: #232220; border-bottom-color: #33312c; }
.os-dark .dft-tools button { color: #e2dccf; } .os-dark .dft-tools button:hover { background: #33312c; } .os-dark .dft-tools button.on { background: #e2dccf; color: #1b1a18; }
.os-dark .dft-doc { background: #262522; color: #e8e2d6; box-shadow: none; }
.os-dark .dft-fig { background: #2c2b28; border-color: #3a3833; } .os-dark .dft-fig line { stroke: #3a3833; }
.os-dark .dft-fig figcaption, .os-dark .dft-legend { color: #cfc8bb; }
.os-dark .fam { background: #000; } .os-dark .fam-head, .os-dark .fam-in { background: #1c1c1e; border-color: #2c2c2e; }
.os-dark .fam-head b { color: #f2f2f5; } .os-dark .fam-m { background: #26262a; color: #ececf0; box-shadow: none; } .os-dark .fam-m.me { background: #30a14e; }
.os-dark .fam-in input { background: #2c2c2e; border-color: #3a3a3c; color: #eee; }
.os-dark .nothing { background: #1f1d1a; color: #a29a8e; } .os-dark .nothing p:first-child { color: #d6cfc3; }
.os-dark .trash { background: #1e1e20; } .os-dark .trash-bar { border-bottom-color: #2c2c2e; } .os-dark .trash-empty p { color: #d6d6da; }
/* lesspull.com, the drawn one, in dark */
.os-dark .lps { background: #14120f; color: #efe8dd; }
.os-dark .lps-nav { background: rgba(20, 18, 15, 0.96); border-bottom-color: rgba(255, 236, 210, 0.09); }
.os-dark .lps p, .os-dark .lps-feats p, .os-dark .lps-faq p { color: #b8afa2; }
.os-dark .lps-feats > div, .os-dark .lps-faq details { background: #1b1814; border-color: rgba(255, 236, 210, 0.09); }
.os-dark .lps-cap, .os-dark .lps-hero small, .os-dark .lps-navlinks { color: #8a8277; }
.os-dark .nod { background: #1e1e20; color: #ececf0; } .os-dark .sketch { background: #26262a; } .os-dark .nod-sub, .os-dark .nod-end { color: #b8b8bd; }

/* ================= this round: new pieces ================= */
/* shop product pages */
.shop-art { border: 0; padding: 0; width: 100%; cursor: default; display: block; }
.shop-name { border: 0; padding: 0; background: none; text-align: left; font: 700 14px/1.25 var(--sys); color: #1a1a1a; cursor: default; }
.shop-name:hover { text-decoration: underline; }
.shop-detail { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(40, 0, 30, 0.35); }
.shop-detail[hidden] { display: none; }
.shop-dcard { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(640px, 90%); padding: 20px; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(60, 0, 40, 0.3); }
.shop-art.big { height: 220px; }
.shop-dtext { display: flex; flex-direction: column; gap: 8px; }
.shop-dtext b { font-size: 19px; } .shop-dtext p { margin: 0; color: #555; font-size: 14px; line-height: 1.45; }
.shop-add.big { margin-top: auto; padding: 13px; font-size: 14px; }
.shop-dx { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 24px; color: #888; cursor: default; }
/* lesspull.com, drawn */
.lps-navlinks { display: flex; gap: 18px; margin-left: auto; margin-right: 18px; font-size: 13px; color: #8a8277; }
.lps-hero { text-align: center; padding-top: 34px !important; }
.lps-logo { display: inline-block; width: 46px; height: 46px; border-radius: 50%; border: 3px solid currentColor; background: linear-gradient(90deg, currentColor 50%, var(--amber) 50%); margin-bottom: 4px; }
.lps .d-h1 { font-size: 46px; }
.lps-lead { max-width: 520px; margin: 0 auto 18px !important; font-size: 16px !important; }
.lps-dl.big { padding: 13px 24px; font-size: 15px; }
.lps-split { padding-top: 10px !important; }
.lps-shot { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(60, 40, 10, 0.15); }
.lps-half { position: relative; height: 150px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #fff; }
.lps-half i { border-radius: 8px; }
.lps-half i:nth-child(1) { grid-row: span 2; background: linear-gradient(135deg, #ff3d6e, #ffb000); }
.lps-half i:nth-child(2) { background: linear-gradient(135deg, #22d3ee, #6366f1); } .lps-half i:nth-child(3) { background: linear-gradient(135deg, #34d399, #fde047); }
.lps-half b { position: absolute; left: 10px; top: 8px; min-width: 22px; height: 22px; border-radius: 11px; background: #ff3b30; color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
.lps-half.quiet { filter: grayscale(1) sepia(0.32); }
.lps-cap { margin: 10px 0 0 !important; font-size: 13px !important; color: #8a8277 !important; text-align: center; }
.lps-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lps-feats > div { padding: 14px; border-radius: 12px; background: #fff; border: 1px solid #ece6dc; }
.lps-feats b { display: block; margin: 8px 0 2px; font-size: 14px; } .lps-feats p { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
.lps-ic { display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 26px; min-width: 26px; border-radius: 8px; }
.lps-ic.gray { background: linear-gradient(90deg, #555, #ccc); } .lps-ic.warm { width: 60px; background: linear-gradient(90deg, #eee, #f3b37a, #e0472b); }
.lps-ic.peek kbd { background: #fff; color: #222; border-color: #ccc; }
.lps-ic.exc { width: 46px; background: linear-gradient(90deg, #888 50%, #ff5e62 50%); }
.lps-ic.ses { width: 26px; border-radius: 50%; border: 3px solid #e8894a; border-right-color: #e5ddd1; }
.lps-ic.priv { width: 22px; border-radius: 6px 6px 8px 8px; background: #3b3832; }
.lps-mid { text-align: center; margin-top: 14px; }
.lps-faq details { margin-bottom: 8px; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid #ece6dc; }
.lps-faq summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.lps-faq p { margin: 8px 0 2px !important; font-size: 13.5px !important; }
.lps-end h2 { font-size: 26px; }
/* an undrawn website: a sketch, as a reward */
.nod { text-align: left; padding: 34px 40px 40px; }
.nod-badge { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; background: #fff4d6; color: #8a5a00; font: 700 12px/1 var(--sys); }
.nod h2 { margin: 0 0 6px; }
.nod-sub { margin: 0 0 16px; color: #555; }
.sketch { position: relative; max-width: 640px; padding: 16px; border-radius: 10px; background: #fffdf7; border: 2px dashed #bdb6a8; font-family: "Marker Felt", "Comic Sans MS", "Chalkboard SE", var(--sys); color: #5a5348; }
.sketch * { font-family: inherit; }
.sk-nav { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px dashed #d6cfc1; }
.sk-logo { padding: 2px 10px; border: 2px solid #8b8274; border-radius: 6px; font-weight: 700; }
.sk-links { font-size: 13px; } .sk-btn { margin-left: auto; padding: 3px 10px; border: 2px solid #8b8274; border-radius: 14px; font-size: 13px; }
.sk-hero { display: flex; align-items: center; gap: 14px; margin: 14px 0; padding: 22px; border: 2px solid #8b8274; border-radius: 8px; }
.sk-play { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #8b8274; }
.sk-grid { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 10px; align-items: center; font-size: 13px; }
.sk-grid i { height: 46px; border: 2px dashed #8b8274; border-radius: 6px; }
.sk-pop { position: absolute; right: 24px; top: 58px; width: 230px; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 2px solid #5a5348; border-radius: 10px; background: #fffdf7; box-shadow: 4px 4px 0 #d6cfc1; transform: rotate(1.5deg); transition: transform 0.4s, opacity 0.4s; }
.sk-input { padding: 4px 8px; border: 2px solid #b5ad9e; border-radius: 6px; font-size: 13px; color: #a29a8e; }
.sk-pop button, .sk-cookie button { border: 2px solid #5a5348; border-radius: 8px; background: #fff; padding: 4px 8px; font-size: 13px; color: #3a352d; cursor: pointer; }
.sk-pop .sk-no { border-style: dashed; font-size: 11.5px; }
.sk-cookie { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px; border: 2px solid #5a5348; border-radius: 8px; font-size: 12.5px; background: #f7f1e3; transition: transform 0.4s, opacity 0.4s; }
.sk-cookie span { flex: 1; }
.sketch .gone { opacity: 0; transform: translateY(16px) rotate(-6deg) scale(0.9); pointer-events: none; }
.sk-foot { display: block; margin-top: 10px; font-size: 11px; color: #a29a8e; }
.nod-end { margin-top: 18px; color: #555; }
/* Everyone: a double-click heart */
.ev-media { cursor: default; }
.ev-burst { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; color: #fff; animation: burst 0.8s ease forwards; pointer-events: none; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35)); }
.ev-burst svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes burst { 0% { transform: scale(0.3); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
/* Cut: effects, captions, export */
.cut-insp { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.cut-insp h5 { margin: 6px 0 4px; }
.cut-fx { border: 1px solid #3a3a3f; border-radius: 8px; padding: 7px 10px; background: #232327; color: #e5e5ea; text-align: left; font-size: 12.5px; cursor: default; }
.cut-fx:hover { background: #2c2c31; } .cut-fx.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.cut-export { margin-top: auto; }
.cut-mon { position: relative; }
.cut-cap { position: absolute; left: 0; right: 0; bottom: 46px; margin: 0; text-align: center; font: 900 30px/1.1 var(--display); color: #fff; letter-spacing: 0.01em; text-shadow: 0 3px 0 #000, 0 0 12px rgba(0, 0, 0, 0.6); -webkit-text-stroke: 1.5px #000; pointer-events: none; }
.cut-frame.zoom > svg { animation: dzoom 2.4s ease-in-out infinite alternate; transform-origin: 40% 45%; }
.cut-frame.playing > svg { animation: kb 8s ease-in-out infinite alternate; }
.cut-frame.zoom.playing > svg { animation: dzoom 1.2s ease-in-out infinite alternate; }
@keyframes dzoom { from { transform: scale(1); } to { transform: scale(1.35); } }
.cut-snd { position: absolute; left: 10px; top: 7px; font-style: normal; font-size: 11px; color: #fff; opacity: 0; }
.cut.sound .cut-wave { background: repeating-linear-gradient(90deg, #f472b6 0 2px, transparent 2px 4px); opacity: 0.9; }
.cut.sound .cut-snd { opacity: 0.9; }
.cut-sheet { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); }
.cut-sheet[hidden] { display: none; }
.cut-sbox { width: 380px; padding: 18px; border-radius: 14px; background: #2a2a2e; color: #ececf0; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 12px; }
.cut-sbox b { font-size: 15px; }
.cut-sbox .seg { background: rgba(255, 255, 255, 0.08); } .cut-sbox .seg button { color: #ddd; flex: 1; } .cut-sbox .seg button.on { background: #5c5c62; color: #fff; }
.cut-fmt { display: flex; }
.cut-prog { height: 6px; border-radius: 3px; background: #3a3a3f; overflow: hidden; } .cut-prog i { display: block; height: 100%; width: 0; background: #8b5cf6; transition: width 0.1s linear; }
.cut-status { margin: 0; font-size: 12.5px; color: #a0a0a5; } .cut-file { margin: 0; font-size: 14px; }
.cut-sact { display: flex; justify-content: flex-end; gap: 8px; }
.cut-sbox .btn { background: rgba(255, 255, 255, 0.12); color: #eee; } .cut-sbox .btn.primary { background: #8b5cf6; }

/* ================= build 41: menu hints, exception panel, Session | Break, Settings ================= */
.mi-kbd { margin-left: auto; padding-left: 18px; color: #9a9aa0; font-size: 12.5px; letter-spacing: 0.04em; }
.mi:hover .mi-kbd { color: rgba(255, 255, 255, 0.85); }
.pill { display: inline-block; border: 0; border-radius: 999px; padding: 3px 10px; background: rgba(0, 0, 0, 0.07); font: 600 12px/1.4 var(--sys); color: #444; text-decoration: none; cursor: default; white-space: nowrap; }
.pill:hover { background: rgba(0, 0, 0, 0.12); }
.gear { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; padding: 0; background: none; color: #6b6b70; display: grid; place-items: center; cursor: default; }
.gear svg { width: 17px; height: 17px; display: block; }
.gear:hover { background: rgba(0, 0, 0, 0.07); color: #1d1d1f; }
.lp-panel.exc { width: 480px; }
.exc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.exc-head b { font-size: 14px; margin-right: auto; }
.exc-head .chk { margin: 0 4px 0 0; font-size: 12.5px; }
.exc-scope { margin: 0 0 8px; font-size: 12px; color: #8a8a8e; }
.exc-scope .seg { display: inline-flex; }
.exc-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; flex-wrap: wrap; }
.exc-row > span:nth-of-type(2) { margin-left: 12px; }
.exc-warm { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 10px 0 2px; }
.exc-warm[hidden] { display: none; }
.exc-warm .chk { margin: 0; }
.exc-warm b { min-width: 38px; text-align: right; font-weight: 500; color: #6b6b70; font-variant-numeric: tabular-nums; }
.ses { width: 344px; }
.ses-switch { display: flex; width: 230px; margin: 0 auto 10px; }
.ses-switch button { flex: 1; padding: 5px 10px; font-size: 13px; }
.ses-body.fade { animation: sesFade 0.28s ease; }
@keyframes sesFade { from { opacity: 0; } }
.ses .ses-q { margin: 0 0 10px; text-align: center; font-size: 12.5px; font-weight: 400; color: #6b6b70; }
.ses .chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 8px; }
.ses .chip { border-radius: 8px; padding: 7px 4px; text-align: center; }
.ses-or { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 12px 0 8px; font-size: 12.5px; color: #8a8a8e; }
.ses-or input { width: 100%; accent-color: #8a8a8e; }
.ses-or b { min-width: 54px; text-align: right; font-size: 13.5px; color: #1d1d1f; }
.ses-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ses-row .chk { margin: 0; font-size: 12.5px; }
.ses-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 10px; }
.ses-later { border: 0; background: none; padding: 0; color: #8a8a8e; font-size: 12.5px; cursor: default; }
.ses-later:hover { color: #1d1d1f; }
.ses.end .ses-over { margin: 2px 0 0; text-align: center; font: 600 34px/1.1 var(--display); color: #e57a2e; font-variant-numeric: tabular-nums; }
.ses-was { margin: 4px 0 12px; text-align: center; font-size: 13px; color: #555; }
.ses.end .ses-row { margin-top: 12px; }
.ses.end .ses-row .btn[data-a="leave"] { margin-left: auto; }
.lps-set { font-size: 13px; }
.lps-set .set-tabs { display: flex; justify-content: center; gap: 2px; padding: 8px 10px 6px; }
.lps-set .set-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 72px; padding: 6px 8px 5px; border-radius: 8px; font-size: 11.5px; box-shadow: none; font-weight: 400; }
.lps-set .set-tabs button span svg { width: 20px; height: 20px; display: block; }
.lps-set .set-tabs button.on { color: var(--blue); background: rgba(0, 0, 0, 0.06); font-weight: 600; box-shadow: none; }
.lps-set .set-body { padding: 14px 22px 18px; max-height: 64vh; overflow-y: auto; }
.set-intro { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.set-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 2px; }
.set-field input, .set-field select, .lps-set select[data-a="add-app"] { min-width: 240px; padding: 5px 9px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 7px; background: #fff; font: 13px var(--sys); color: #222; }
.lps-set .set-note { margin: 2px 0 10px; }
.lps-set .chk + .set-note { margin-left: 24px; }
.set-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.set-line b { margin-right: auto; }
.set-line .chk { margin: 0; }
.set-key { min-width: 124px; padding: 5px 12px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 7px; background: #f4f4f6; font: 600 13px var(--sys); color: #222; cursor: default; }
.set-key.rec { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.3); color: var(--blue); }
.set-sec { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.set-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.set-rule { padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.6); }
.set-h { display: block; margin: 14px 0 4px; }
.lps-set .set-about { display: flex; gap: 16px; align-items: flex-start; text-align: left; }
.lps-set .set-about h3 { margin: 2px 0 2px; font-size: 20px; }
.lps-set .set-about p { margin: 2px 0; color: inherit; }
.set-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
.set-grid { display: grid; grid-template-columns: 80px 1fr; gap: 10px 14px; align-items: center; margin: 16px 0 6px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.set-grid span { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.set-grid .chk { margin: 0; }
.lps-set .set-note.wide { margin-left: 94px; }
.set-small { display: flex; gap: 8px; margin: 12px 0 0; }
/* build 41 pieces in dark */
.os-dark .pill { background: rgba(255, 255, 255, 0.1); color: #ddd; }
.os-dark .pill:hover { background: rgba(255, 255, 255, 0.16); }
.os-dark .gear { color: #a0a0a5; } .os-dark .gear:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.os-dark .exc-warm b, .os-dark .ses-or b { color: #ececf0; }
.os-dark .ses .ses-q, .os-dark .ses-was { color: #b0b0b5; }
.os-dark .ses-later:hover { color: #fff; }
.os-dark .lps-set .set-tabs button { color: #c8c8cc; } .os-dark .lps-set .set-tabs button.on { color: #6aa0ff; background: rgba(255, 255, 255, 0.08); }
.os-dark .set-field input, .os-dark .set-field select, .os-dark .lps-set select[data-a="add-app"] { background: #1c1c1e; border-color: #3a3a3c; color: #eee; }
.os-dark .set-key { background: #2c2c30; border-color: #3a3a3c; color: #eee; }
.os-dark .set-rule { background: rgba(255, 255, 255, 0.04); border-color: #333; }
.os-dark .set-sec, .os-dark .set-grid { border-color: rgba(255, 255, 255, 0.08); }

/* ================= the tour: a clear start, a clear guide, a clear prompt ================= */
.tour-intro { position: absolute; inset: 10px; z-index: 25; display: grid; place-items: center; border-radius: 14px; background: rgba(10, 8, 6, 0.38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: tiIn 0.45s ease; }
.tour-intro.leaving { animation: tiOut 0.38s ease forwards; }
@keyframes tiIn { from { opacity: 0; } }
@keyframes tiOut { to { opacity: 0; } }
.ti-card { width: min(460px, calc(100% - 40px)); padding: 26px 28px 24px; border-radius: 22px; background: var(--card-bg); color: var(--card-ink); text-align: center; box-shadow: 0 0 0 1px var(--card-line), 0 30px 80px rgba(0, 0, 0, 0.45); animation: tiCard 0.5s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes tiCard { from { transform: translateY(14px) scale(0.96); opacity: 0; } }
.ti-kicker { margin: 0 0 6px; font: 600 12px/1 var(--sys); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.ti-card h2 { margin: 0 0 8px; font: 600 26px/1.15 var(--display); letter-spacing: -0.02em; }
.ti-card p { margin: 0 0 18px; color: var(--card-text); font-size: 15px; line-height: 1.45; }
.ti-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ti-go { position: relative; overflow: hidden; border: 0; border-radius: 999px; padding: 13px 30px; background: var(--amber); color: var(--amber-ink); font: 600 16px/1 var(--sys); cursor: pointer; }
.ti-go span { position: relative; z-index: 1; }
.ti-skip { border: 0; background: none; color: var(--ink-3); font-size: 13.5px; cursor: pointer; }
.ti-skip:hover { color: var(--card-ink); }
.tour-card.live { box-shadow: 0 0 0 1px var(--card-line), 0 0 0 4px rgba(232, 137, 74, 0.0), 0 24px 60px rgba(0, 0, 0, 0.35); animation: cardIn 0.35s cubic-bezier(.2, .9, .3, 1), liveRing 2.4s ease-in-out infinite 0.4s; }
@keyframes liveRing { 50% { box-shadow: 0 0 0 1px var(--card-line), 0 0 0 4px rgba(232, 137, 74, 0.45), 0 24px 60px rgba(0, 0, 0, 0.35); } }
.tc-label { margin-right: auto; padding-right: 10px; font: 600 11.5px/1 var(--sys); letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.tc-top { gap: 8px; }
.ghost-tag { position: absolute; left: 20px; top: 20px; padding: 3px 8px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); font: 700 11px/1.2 var(--sys); white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); }
.ghost.keys .ghost-tag { display: none; }
/* Peek: a piece of a keyboard, low on the stage under the chart. The A key presses itself, slowly, until the visitor
   holds the real one. It's the website talking, outside the drawn screen, so A stays amber while the screen is gray. */
.peek-prompt { --u: calc(38px * var(--k, 1)); --g: calc(5px * var(--k, 1)); position: absolute; left: 50%; bottom: calc(14px + 8px * var(--k, 1)); z-index: 24; transform: translateX(-50%); display: flex; align-items: center; gap: calc(22px * var(--k, 1)); padding: calc(14px * var(--k, 1)) calc(26px * var(--k, 1)) calc(14px * var(--k, 1)) calc(14px * var(--k, 1)); border-radius: calc(22px * var(--k, 1)); background: var(--card-bg); color: var(--card-ink); box-shadow: 0 0 0 1px var(--card-line), 0 24px 60px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: ppIn 0.45s cubic-bezier(.2, .9, .3, 1.15) both; pointer-events: none; }
@keyframes ppIn { from { opacity: 0; transform: translate(-50%, 16px); } }
.kb { display: grid; gap: var(--g); padding: var(--g); border-radius: calc(12px * var(--k, 1)); background: color-mix(in srgb, var(--card-ink) 9%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.kb-row { display: flex; gap: var(--g); }
.kb-key { position: relative; flex: none; width: calc(var(--u) * var(--w) + var(--g) * (var(--w) - 1)); height: var(--u); display: grid; place-items: center; border-radius: calc(7px * var(--k, 1)); background: var(--kbd-bg); color: var(--card-ink); box-shadow: inset 0 0 0 1px var(--kbd-line), 0 calc(3px * var(--k, 1)) 0 color-mix(in srgb, var(--kbd-line) 70%, transparent); font: 500 calc(15px * var(--k, 1))/1 var(--sys); opacity: 0.75; }
.kb-key.mod { place-items: end start; padding: 0 0 calc(6px * var(--k, 1)) calc(7px * var(--k, 1)); font-size: calc(10px * var(--k, 1)); color: var(--card-text); }
.kb-key.caps::before { content: ""; position: absolute; left: calc(7px * var(--k, 1)); top: calc(7px * var(--k, 1)); width: calc(4px * var(--k, 1)); height: calc(4px * var(--k, 1)); border-radius: 50%; background: color-mix(in srgb, var(--card-ink) 30%, transparent); }
/* A: amber, pressing itself: down, held for a moment (the bar fills), up again. */
.kb-key.a { opacity: 1; z-index: 1; background: var(--amber); color: var(--amber-ink); font-weight: 700; font-size: calc(17px * var(--k, 1)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 calc(4px * var(--k, 1)) 0 #b4612b; animation: aPress 2.6s ease-in-out infinite; }
.kb-key.a::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: calc(5px * var(--k, 1)); height: calc(3px * var(--k, 1)); border-radius: 2px; background: rgba(29, 18, 8, 0.25); background-image: linear-gradient(90deg, var(--amber-ink), var(--amber-ink)); background-repeat: no-repeat; background-size: 0% 100%; animation: aHold 2.6s ease-in-out infinite; }
@keyframes aPress { 0%, 14% { transform: translateY(0); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 calc(4px * var(--k, 1)) 0 #b4612b, 0 0 0 0 rgba(232, 137, 74, 0); } 22%, 72% { transform: translateY(calc(3px * var(--k, 1))); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 calc(1px * var(--k, 1)) 0 #b4612b, 0 0 0 calc(7px * var(--k, 1)) rgba(232, 137, 74, 0.28); } 80%, 100% { transform: translateY(0); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 calc(4px * var(--k, 1)) 0 #b4612b, 0 0 0 0 rgba(232, 137, 74, 0); } }
@keyframes aHold { 0%, 22% { background-size: 0% 100%; } 72% { background-size: 100% 100%; } 80%, 100% { background-size: 0% 100%; } }
.peek-prompt.down .kb-key.a { animation: none; transform: translateY(calc(3px * var(--k, 1))); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 calc(1px * var(--k, 1)) 0 #b4612b, 0 0 0 calc(9px * var(--k, 1)) rgba(232, 137, 74, 0.35); }
.peek-prompt.down .kb-key.a::after { animation: none; background-size: 100% 100%; }
.pp-text { margin: 0; display: grid; gap: calc(4px * var(--k, 1)); }
.pp-big { font: 600 calc(22px * var(--k, 1))/1.15 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.pp-big kbd { min-width: calc(30px * var(--k, 1)); padding: 0 calc(7px * var(--k, 1)); font-size: calc(17px * var(--k, 1)); line-height: 1.45; vertical-align: 0.06em; background: var(--amber); color: var(--amber-ink); border-color: rgba(0, 0, 0, 0.2); }
.pp-small { color: var(--card-text); font-size: calc(15px * var(--k, 1)); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tour-intro, .ti-card, .tour-card.live, .peek-prompt, .kb-key.a, .kb-key.a::after { animation: none !important; } }

/* ================= Cut: a quiet clip, and everything that makes it pull ================= */
.cut-insp h5 { margin: 2px 0 6px; }
.cut-fx { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; }
.cut-fx b { font-size: 12.5px; font-weight: 600; }
.cut-fx small { font-size: 11px; color: #a0a0a5; }
.cut-fx.on small { color: rgba(255, 255, 255, 0.85); }
.cut-fx.on b::before { content: "✓ "; }
.cut-meter { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin: 10px 0 4px; font-size: 12px; color: #a0a0a5; }
.cut-meter b { grid-column: 1 / -1; font-size: 12.5px; color: #fff; }
.cut-bar { height: 7px; border-radius: 4px; background: #3a3a3f; overflow: hidden; }
.cut-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #8f9fd6, #f59e0b, #ff3b5c); transition: width 0.4s cubic-bezier(.2, .9, .3, 1); }
.cut-reset { background: #2e2e32; color: #e5e5ea; }
.cut-frame > svg { transform-origin: 50% 55%; }
.cut.playing .cut-frame > svg { animation: kb 16s ease-in-out infinite alternate; }
.cut.playing .drift { animation: drift 16s linear infinite; }
@keyframes drift { to { transform: translateX(40px); } }
.cut.fx-punch.playing .cut-frame > svg { animation: punch 1.034s ease-out infinite; } /* every other beat, and gentler */
@keyframes punch { 0% { transform: scale(1.06); } 35%, 100% { transform: scale(1); } }
.cut-ov { position: absolute; inset: 0 0 30px; pointer-events: none; overflow: hidden; }
.cut-ov > * { opacity: 0; transition: opacity 0.25s, transform 0.25s; }
.cut-hook { position: absolute; left: 6%; right: 6%; top: 8%; margin: 0; text-align: center; font: 900 28px/1.05 var(--display); color: #fff; letter-spacing: -0.01em; text-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 0, 0, 0.5); }
.cut-hook { background: none; }
.fx-hook .cut-hook { opacity: 1; }
.cut-count { position: absolute; left: 0; right: 0; top: 42%; margin: 0; text-align: center; font: 900 40px/1 var(--display); color: #ffe600; text-shadow: 0 3px 0 #000; }
.fx-count .cut-count { opacity: 1; }
.cut-face { position: absolute; right: 4%; bottom: 8%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ff2d55; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.cut-face svg { width: 100%; height: 100%; display: block; }
.fx-face .cut-face { opacity: 1; }
.fx-face.playing .cut-face { animation: bobface 0.9s ease-in-out infinite; }
@keyframes bobface { 50% { transform: translateY(-6px) rotate(-4deg); } }
.cut-sub { position: absolute; left: 4%; bottom: 10%; padding: 9px 14px; border-radius: 8px; background: #ff1a1a; color: #fff; font: 900 15px/1 var(--sys); letter-spacing: 0.04em; box-shadow: 0 6px 16px rgba(255, 26, 26, 0.45); }
.fx-sub .cut-sub { opacity: 1; }
.fx-sub.playing .cut-sub { animation: subBounce 0.8s ease-in-out infinite; }
@keyframes subBounce { 30% { transform: translateY(-10px) scale(1.06); } 60% { transform: translateY(0); } }
.cut-nothing { position: absolute; left: 0; right: 0; bottom: 20%; margin: 0; text-align: center; font: 700 22px/1 var(--display); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.the-end .cut-nothing { opacity: 1; }
.cut-track.fxt { height: 26px; }
.cut-track.fxt .cut-clip { opacity: 0; transition: opacity 0.25s; padding: 3px 8px; }
.fx-hook .t-hook, .fx-count .t-count, .fx-face .t-face, .fx-sub .t-sub { opacity: 1 !important; }
.cut-amb { position: absolute; left: 10px; top: 7px; font-style: normal; font-size: 11px; color: #cfe8d8; }
.cut-snd { opacity: 0; }
.cut.fx-sound .cut-wave { background: repeating-linear-gradient(90deg, #f472b6 0 2px, transparent 2px 4px); opacity: 0.9; }
.cut.fx-sound .cut-snd { opacity: 0.95; }
.cut.fx-sound .cut-amb { opacity: 0; }
.cut-top { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .cut .cut-frame > svg, .cut .drift, .cut-face, .cut-sub { animation: none !important; } }

/* ================= the tour, lower right, with dots you can click ================= */
.tour-card { left: auto; right: 26px; bottom: calc(var(--k, 1) * 96px + 22px); }
.ti-logo { display: inline-block; width: 58px; height: 58px; margin: 2px 0 12px; border-radius: 50%; border: 3.5px solid var(--card-ink); background: linear-gradient(90deg, var(--card-ink) 50%, var(--amber) 50%); box-shadow: 0 10px 30px rgba(232, 137, 74, 0.25); }
.ti-card h2 { font-size: 32px; margin-bottom: 10px; }
.ti-lead { margin: 0 0 10px !important; font: 400 17px/1.45 var(--display) !important; color: var(--card-ink) !important; }
.ti-sub { margin: 0 0 20px !important; font-size: 14px !important; color: var(--card-text) !important; }
.ti-card { width: min(500px, calc(100% - 40px)); padding: 30px 32px 26px; }


/* ================= round six ================= */
/* The real buttons below say hello when a drawn one sends you there. */
.download.big.beckon, .support-cta.beckon { animation: beckon 1.1s ease-out 2; }
@keyframes beckon { 0% { box-shadow: 0 0 0 0 rgba(232, 137, 74, 0.7); transform: scale(1); } 30% { transform: scale(1.05); } 100% { box-shadow: 0 0 0 24px rgba(232, 137, 74, 0); transform: scale(1); } }

/* The tour: a close button you can see, a last card that invites you to stay, a circle to come back. */
.tc-x { flex: none; width: 28px; height: 28px; margin-left: 12px; display: grid; place-items: center; padding: 0 0 2px; border: 0; border-radius: 50%; background: var(--card-btn); color: var(--card-ink); font: 400 20px/1 var(--sys); cursor: pointer; transition: background 0.15s, color 0.15s; }
.tc-x:hover { background: var(--amber); color: var(--amber-ink); }
.tc-x:focus-visible, .tour-dot:focus-visible, .tc-try button:focus-visible, .tc-steps button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tc-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.tc-try span { margin-right: 2px; font: 600 11.5px/1 var(--sys); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tc-try button { border: 1px solid var(--card-line); border-radius: 999px; padding: 5px 11px; background: none; color: var(--card-ink); font-size: 13px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.tc-try button:hover { border-color: var(--amber); color: var(--amber); }
.tc-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.tc-steps button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border: 0; border-radius: 8px; background: none; color: var(--card-ink); font-size: 13.5px; text-align: left; cursor: pointer; }
.tc-steps button:hover { background: var(--card-btn); }
.tc-steps span { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--card-btn); font: 600 11px/1 var(--sys); }
.tour-dot { position: absolute; right: 26px; bottom: calc(var(--k, 1) * 96px + 22px); z-index: 20; width: 50px; height: 50px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--card-bg); color: var(--card-ink); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 1px var(--card-line), 0 0 0 3px rgba(232, 137, 74, 0.55), 0 14px 34px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.15s; }
.tour-dot svg { width: 24px; height: 24px; margin: 3px 0 0 4px; }
.tour-dot:hover { transform: scale(1.08); }
.tour-dot.landed::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--amber); animation: dotRing 1.6s ease-out 2; pointer-events: none; }
@keyframes dotRing { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
.td-tip { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 8px; background: var(--card-bg); color: var(--card-ink); box-shadow: 0 0 0 1px var(--card-line); font: 600 12.5px/1 var(--sys); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.tour-dot:hover .td-tip, .tour-dot:focus-visible .td-tip { opacity: 1; }
.tour-dot.landed .td-tip { animation: tipShow 3.4s ease forwards; }
@keyframes tipShow { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tour-dot, .tour-dot::after, .td-tip { animation: none !important; } }

/* Notifications: a way to turn them off, right where they bother you. */
.notif-off { position: absolute; right: 10px; top: 9px; padding: 3px 9px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.08); color: #333; font: 600 11.5px/1.3 var(--sys); opacity: 0; transition: opacity 0.15s; cursor: default; }
.notif:hover .notif-off { opacity: 1; }
.notif:hover time { opacity: 0; }
.notif-off:hover { background: rgba(0, 0, 0, 0.15); }
.nc-dnd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.78); cursor: default; }
.nc-dnd b { display: block; font-size: 13px; } .nc-dnd small { font-size: 12px; color: #555; }
.nc-dnd input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 21px; margin: 0; border-radius: 11px; background: #c7c7cc; transition: background 0.2s; }
.nc-dnd input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.nc-dnd input:checked { background: #34c759; }
.nc-dnd input:checked::after { transform: translateX(15px); }
.mb-dnd svg { width: 14px; height: 14px; }
.os-dark .notif-off { background: rgba(255, 255, 255, 0.12); color: #eee; }
.os-dark .nc-dnd { background: rgba(255, 255, 255, 0.07); color: #ececf0; } .os-dark .nc-dnd small { color: #a0a0a5; }

/* Pulse: a video that plays, says things, ends, and offers the next one. */
.pu-cap { position: absolute; left: 0; right: 0; bottom: 50px; margin: 0; text-align: center; pointer-events: none; }
.pu-cap span { display: inline-block; max-width: 82%; padding: 5px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.74); color: #fff; font: 600 16px/1.35 var(--sys); animation: capIn 0.3s ease; }
@keyframes capIn { from { opacity: 0; transform: translateY(4px); } }
.pu-player.ended .pu-cap { display: none; }
.pu-player:not(.playing):not(.ended) .pu-vid::after { content: "▶"; position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 24px; line-height: 66px; text-align: center; text-indent: 4px; pointer-events: none; }
.pu-ctrl { position: absolute; left: 12px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.pu-time { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; background: rgba(0, 0, 0, 0.6); color: #fff; font: 600 12px/1.2 var(--sys); font-variant-numeric: tabular-nums; }
.pu-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff2d2d; animation: breathe 1.6s ease-in-out infinite; }
.pu-prog { height: 5px; cursor: default; }
.pu-prog::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; }
.pu-prog i { position: relative; transition: width 0.2s linear; }
.pu-prog i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #ff2d2d; }
.pu-end { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; background: rgba(0, 0, 0, 0.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: capIn 0.3s ease; }
.pu-end-k { margin: 0; color: #fff; font: 700 19px/1.2 var(--display); } .pu-end-k b { font-size: 24px; }
.pu-end-s { margin: -4px 0 0; color: #cfcfd4; font-size: 14px; }
.pu-end-v { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; max-width: 460px; padding: 8px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.09); color: #fff; text-align: left; cursor: default; }
.pu-end-v:hover { background: rgba(255, 255, 255, 0.15); }
.pu-end-v b { font-size: 14.5px; line-height: 1.3; }
.pu-end-b { display: flex; gap: 8px; }
.pu-end .btn { padding: 8px 16px; border-radius: 999px; background: #333; color: #fff; } .pu-end .btn:hover { background: #444; }
.pu-end .btn.primary { background: #f1f1f1; color: #111; }
.pu-like { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; border: 0; border-radius: 999px; padding: 8px 14px; background: #262626; color: #eee; font-size: 13px; white-space: nowrap; cursor: default; }
.pu-like.on { background: #f1f1f1; color: #111; }
.pu-coms { margin-top: 20px; }
.pu-coms h4, .pu-chat h4 { margin: 0 0 12px; font-size: 15px; }
.pu-cbox { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pu-cbox input { flex: 1; min-width: 0; height: 32px; border: 0; border-bottom: 1px solid #3a3a3a; background: none; color: #eee; font: 13.5px var(--sys); outline: none; }
.pu-cbox input:focus { border-bottom-color: #f1f1f1; }
.pu-post { flex: none; border: 0; border-radius: 999px; padding: 7px 14px; background: #263850; color: #9cc3ff; font-weight: 700; font-size: 13px; cursor: default; }
.pu-post:hover { background: #2f4566; }
.pu-c { display: flex; gap: 10px; margin-bottom: 14px; }
.pu-c b { font-size: 12.5px; } .pu-c p { margin: 3px 0 4px; color: #e6e6e6; font-size: 13.5px; line-height: 1.4; }
.pu-c small { color: #8a8a8e; font-size: 12px; }
.pu-c.mine { animation: capIn 0.3s ease; }
.pu-clike { margin-left: -6px; padding: 2px 7px; border: 0; border-radius: 999px; background: none; color: #aaa; font-size: 12.5px; cursor: default; }
.pu-clike:hover { background: #262626; } .pu-clike.on { color: #fff; background: #262626; }
.pu-chat { display: flex; flex-direction: column; align-self: start; max-height: 560px; border: 1px solid #262626; border-radius: 12px; overflow: hidden; }
.pu-chat h4 { margin: 0; padding: 11px 12px; border-bottom: 1px solid #262626; }
.pu-chatlog { flex: 1; min-height: 300px; max-height: 440px; overflow-y: auto; padding: 8px 12px; }
.pu-cl { margin: 0 0 6px; color: #e6e6e6; font-size: 13px; line-height: 1.35; animation: capIn 0.25s ease; }
.pu-cl b { margin-right: 4px; font-weight: 600; }
.pu-chatin { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #262626; }
.pu-chatin input { flex: 1; min-width: 0; height: 30px; padding: 0 12px; border: 1px solid #333; border-radius: 999px; background: #181818; color: #eee; font: 13px var(--sys); outline: none; }
.pu-logo:active .pu-play { transform: scale(0.9); }
@media (prefers-reduced-motion: reduce) { .pu-cap span, .pu-end, .pu-cl, .pu-dot { animation: none !important; } }

/* Darkroom: every photo says what it is. */
.dr-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 9px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.66)); color: #fff; font-size: 12px; font-weight: 600; text-align: left; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.dr-ph:hover .dr-t, .dr-ph:focus-visible .dr-t, .dr-grid.big .dr-t { opacity: 1; }
.dr-big { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; }
.dr-pic { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.dr-pic svg { width: min(100cqw, 150cqh); height: min(100cqh, 66.667cqw); } /* exactly 3:2, so nothing drawn outside the photo shows */
.dr-cap { margin: 0; text-align: center; color: #b9b9be; font-size: 14px; line-height: 1.4; }
.dr-cap b { color: #f2f2f5; font-weight: 600; }

/* Receipt: what Less Pull costs. */
.rcpt { min-height: 100%; display: grid; justify-items: center; align-content: start; padding: 22px 16px 34px; background: #ece7df; }
.rc-paper { position: relative; width: 100%; max-width: 330px; padding: 22px 22px 26px; background: #fffdf8; color: #2a2620; font: 13px/1.5 var(--mono); box-shadow: 0 8px 24px rgba(60, 40, 10, 0.12); user-select: text; -webkit-user-select: text; }
.rc-paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(135deg, #fffdf8 6px, transparent 0) 0 0 / 12px 12px repeat-x, linear-gradient(225deg, #fffdf8 6px, transparent 0) 0 0 / 12px 12px repeat-x; }
.rc-shop { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font: 700 17px/1.2 var(--mono); letter-spacing: 0.14em; }
.rc-shop .mark { border-color: #2a2620; background: linear-gradient(90deg, #2a2620 50%, var(--amber) 50%); }
.rc-sub { margin: 4px 0 14px; text-align: center; color: #7a7266; font-size: 12px; }
.rc-meta { display: flex; justify-content: space-between; margin: 0; padding-bottom: 10px; border-bottom: 1px dashed #c9bfae; color: #5a5348; font-size: 12px; }
.rc-items, .rc-total { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; padding: 10px 0; border-bottom: 1px dashed #c9bfae; }
.rc-items dt, .rc-items dd, .rc-total dt, .rc-total dd { margin: 0; }
.rc-items dd, .rc-total dd { text-align: right; }
.rc-total dt:first-of-type, .rc-total dd:first-of-type { font-weight: 700; font-size: 15px; }
.rc-note { margin: 12px 0; color: #3d372e; font-size: 12.5px; line-height: 1.55; }
.rc-btn { display: block; width: 100%; padding: 10px 14px; border: 1.5px solid #2a2620; border-radius: 999px; background: none; color: #2a2620; font: 700 13px/1 var(--mono); letter-spacing: 0.04em; cursor: default; }
.rc-btn:hover { background: #2a2620; color: #fffdf8; }
.rc-thanks { margin: 14px 0 12px; text-align: center; font-weight: 700; }
.rc-bars { height: 34px; margin: 0 12px; background: repeating-linear-gradient(90deg, #2a2620 0 2px, transparent 2px 4px, #2a2620 4px 5px, transparent 5px 8px, #2a2620 8px 11px, transparent 11px 12px); }
.rc-no { margin: 6px 0 0; text-align: center; color: #8a8277; font-size: 11px; }
.os-dark .rcpt { background: #1f1d1b; }

/* lesspull.com, the drawn one: a real little website. */
.lps-nav { background: #faf8f4; }
.os-dark .lps-nav { background: #14120f; }
.lps-navlinks button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.lps-navlinks button:hover { color: #23201b; }
.lps .lps-hero2, #lps-how, #lps-feats, .lps .lps-faq, .lps .lps-paid, .lps .lps-end { max-width: 860px; }
.lps-hero2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 28px; align-items: center; padding-top: 40px !important; }
.lps-kick { margin: 0 0 8px !important; color: #b4642a !important; font: 600 12px/1 var(--sys) !important; letter-spacing: 0.1em; text-transform: uppercase; }
.lps-hero2 .d-h1 { margin: 0 0 12px; }
.lps-hero2 .lps-lead { margin: 0 0 18px !important; }
.lps-htext small { display: block; margin-top: 10px; color: #8a8277; font-size: 12.5px; }
.lps-hshot .lps-half { height: 168px; }
.lps-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.lps-steps > div { position: relative; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #ece6dc; }
.lps-steps b { display: block; margin: 12px 0 2px; font-size: 14.5px; }
.lps-steps p { margin: 0 !important; font-size: 13px !important; line-height: 1.45 !important; }
.lps-num { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font: 700 11.5px/1 var(--sys); vertical-align: 1px; }
.lps-viz { position: relative; display: block; height: 70px; border-radius: 10px; overflow: hidden; }
.lps-viz.circle { background: linear-gradient(135deg, #ff7a59, #ffcf5a 55%, #5ac8fa); }
.lps-viz.circle::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: rgba(20, 18, 15, 0.82); }
.lps-viz.circle::after { content: ""; position: absolute; right: 12px; top: 3px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #efe8dd; background: linear-gradient(90deg, #efe8dd 50%, var(--amber) 50%); box-shadow: 0 0 0 4px rgba(232, 137, 74, 0.4); }
.lps-viz.fade { background: linear-gradient(90deg, #ff3d6e, #ffb000 30%, #9a9a9a 70%, #c9c9c9); }
.lps-viz.keep { background: linear-gradient(135deg, #8a8a8a, #cfcfcf); }
.lps-viz.keep::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 64%; transform: translate(-50%, -50%); border-radius: 6px; background: linear-gradient(135deg, #ff7a59, #ffcf5a 55%, #34d399); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.lps-feats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lps-ic.night { width: 22px; min-width: 22px; height: 22px; border-radius: 50%; box-shadow: inset -6px -3px 0 0 #e8894a; }
.lps-paid { text-align: center; }
.lps-paid p { max-width: 520px; margin: 0 auto 14px !important; }
.lps-sup { padding: 10px 20px; border: 1.5px solid #23201b; border-radius: 999px; background: none; color: #23201b; font-weight: 700; font-size: 14px; cursor: pointer; }
.lps-sup:hover { background: #23201b; color: #faf8f4; }
.lps-by { margin: 10px auto 0 !important; color: #8a8277 !important; font-size: 12.5px !important; }
.os-dark .lps-steps > div { background: #1b1814; border-color: rgba(255, 236, 210, 0.09); }
.os-dark .lps-navlinks button:hover { color: #efe8dd; }
.os-dark .lps-sup { border-color: #efe8dd; color: #efe8dd; } .os-dark .lps-sup:hover { background: #efe8dd; color: #14120f; }
.os-dark .lps-htext small { color: #8a8277; }

/* About This Not-a-Mac: who drew it, and what it costs. */
.about-by { margin: 12px 0 4px; color: #6b6b70; font-size: 12px; }
.about-link { padding: 2px 4px; border: 0; background: none; color: var(--blue); font-size: 12.5px; font-weight: 600; cursor: default; }
.about-link:hover { text-decoration: underline; }
.os-dark .about-by { color: #a0a0a5; } .os-dark .about-link { color: #6aa0ff; }

/* Family: a thumbs-up counts as a reply. */
.fam-react { align-self: flex-start; margin: -2px 0 0 6px; color: #8a8a8e; font-size: 11.5px; }

/* The end of the tour: a clear "your turn" in the middle, lighter than the welcome, so the desktop shows through. */
.tour-outro { background: rgba(10, 8, 6, 0.22); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tour-outro .ti-card h2 { font-size: 36px; }
.tour-outro .ti-lead { max-width: 420px; margin-left: auto !important; margin-right: auto !important; }
.tour-outro .tc-try { justify-content: center; margin: 4px 0 22px; }
.ti-note { margin: 16px 0 0 !important; font-size: 12.5px !important; color: var(--ink-3) !important; }
.tour-outro .ti-card { -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
.ti-card .ti-kicker { color: var(--amber); }

/* The tour points: a ring on what the guide is about to click.
   It lives outside the drawn screen, so Less Pull's gray never touches it. */
.tour-layer { position: absolute; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
.tour-spot { position: absolute; border-radius: 12px; box-shadow: 0 0 0 2.5px var(--amber), 0 0 0 7px rgba(232, 137, 74, 0.22), 0 0 26px rgba(232, 137, 74, 0.45); animation: spotIn 0.3s ease, spotPulse 1.2s ease-in-out 0.3s infinite; transition: opacity 0.25s; }
.tour-spot.out { opacity: 0; }
@keyframes spotIn { from { opacity: 0; scale: 1.18; } }
@keyframes spotPulse { 50% { box-shadow: 0 0 0 2.5px var(--amber), 0 0 0 11px rgba(232, 137, 74, 0.1), 0 0 34px rgba(232, 137, 74, 0.32); } }
@media (prefers-reduced-motion: reduce) { .tour-spot { animation: none !important; } }

/* The morph: one shape that becomes the next thing (card → circle, circle → card, welcome → card). */
.tour-morph { position: absolute; z-index: 26; overflow: hidden; pointer-events: none; background: var(--card-bg); color: var(--card-ink); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
.tm-content { position: absolute; left: 0; top: 0; }
.tm-content > * { position: static !important; inset: auto !important; width: 100% !important; margin: 0 !important; transform: none !important; animation: none !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; visibility: visible !important; }
.tm-glyph { position: absolute; inset: 0; display: grid; place-items: center; }
.tm-glyph svg { width: 24px; height: 24px; margin: 3px 0 0 4px; }

/* The guide: a small character above the drawn screen, with a speech bubble that follows it. */
.guide-layer { position: absolute; inset: 0; z-index: 27; pointer-events: none; overflow: hidden; }
.guide-say { position: absolute; left: 0; top: 0; width: max-content; max-width: 260px; padding: 9px 13px 10px; border-radius: 14px; background: #fffaf2; color: #241d14; font: 600 14.5px/1.35 var(--display); letter-spacing: -0.005em; box-shadow: 0 0 0 1.5px rgba(232, 137, 74, 0.95), 0 12px 30px rgba(0, 0, 0, 0.32); opacity: 0; transition: opacity 0.18s; transform-origin: 0 100%; }
.guide-say.on { opacity: 1; }
.guide-say.pop { animation: sayPop 0.32s cubic-bezier(.2, .9, .3, 1.45); }
@keyframes sayPop { from { scale: 0.82; } }
.guide-say::after { content: ""; position: absolute; left: 12px; bottom: -6px; width: 11px; height: 11px; background: #fffaf2; transform: rotate(45deg); box-shadow: 1.5px 1.5px 0 0 rgba(232, 137, 74, 0.95); }
.guide-say.below { transform-origin: 0 0; }
.guide-say.below::after { bottom: auto; top: -6px; box-shadow: -1.5px -1.5px 0 0 rgba(232, 137, 74, 0.95); }
.guide-say.flip { transform-origin: 100% 100%; }
.guide-say.flip::after { left: auto; right: 12px; }
.guide-say.flip.below { transform-origin: 100% 0; }
.ghost.arrive svg { animation: ghostArrive 0.5s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes ghostArrive { from { scale: 0.2; opacity: 0; } }
.ghost.wave svg { transform-origin: 30% 15%; animation: ghostWave 0.95s ease-in-out; }
@keyframes ghostWave { 15%, 47%, 79% { rotate: -18deg; } 31%, 63% { rotate: 14deg; } 100% { rotate: 0deg; } }
.ghost.idle svg { animation: ghostBob 1.7s ease-in-out infinite; }
@keyframes ghostBob { 50% { translate: 0 -3px; } }
.ghost.leaving svg { scale: 0.45; opacity: 0.25; transition: scale 0.6s ease, opacity 0.6s ease; }
.ghost.leaving .ghost-tag { opacity: 0; transition: opacity 0.25s; }
@media (prefers-reduced-motion: reduce) { .guide-say, .ghost svg { animation: none !important; } }
/* Resting, the guide can be clicked: it reacts. */
.ghost.pokable { pointer-events: auto; cursor: pointer; }
.ghost.pokable::before { content: ""; position: absolute; left: -12px; top: -12px; width: 50px; height: 50px; }
.ghost.pokable:hover svg { scale: 1.12; }
.ghost.poked svg { animation: ghostPoke 0.45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ghostPoke { 30% { scale: 1.28 0.78; } 60% { scale: 0.88 1.18; } }
/* Slower: a small switch on the tour card, next to the close button. */
.tc-pace { flex: none; margin-left: 12px; padding: 4px 10px; border: 1px solid var(--card-line); border-radius: 999px; background: none; color: var(--card-text); font: 600 12px/1.2 var(--sys); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tc-pace:hover { border-color: var(--amber); color: var(--amber); }
.tc-pace.on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.tc-pace:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Sent down by the drawing: a way back up. */
.back-up { position: fixed; left: 50%; bottom: 22px; z-index: 40; transform: translateX(-50%); padding: 11px 20px; border: 0; border-radius: 999px; background: var(--card-bg); color: var(--card-ink); font: 600 14px/1 var(--sys); box-shadow: 0 0 0 1px var(--card-line), 0 14px 34px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); cursor: pointer; animation: backUpIn 0.35s cubic-bezier(.2, .9, .3, 1.3); }
.back-up:hover { background: var(--amber); color: var(--amber-ink); }
@keyframes backUpIn { from { opacity: 0; translate: 0 12px; } }
.card.beckon { animation: cardBeckon 1.2s ease-out 2; }
@keyframes cardBeckon { 0% { box-shadow: 0 0 0 0 rgba(232, 137, 74, 0.6); } 100% { box-shadow: 0 0 0 20px rgba(232, 137, 74, 0); } }
/* More ways down from the drawing. */
.now-runs { margin-top: 10px; padding: 10px 16px; border: 0; border-radius: 6px; background: #111; color: #fff; font: 700 14px/1 var(--sys); cursor: default; }
.now-runs:hover { background: #e10600; }
.shop-stock.calm { background: #e8f0df; color: #4b6a38; } /* no countdown, no hurry: a quiet green chip */
.shop-get { margin-top: auto; padding: 9px 12px; border: 1.5px solid #23201b; border-radius: 10px; background: none; color: #23201b; font-weight: 700; font-size: 13px; cursor: default; }
.shop-get:hover { background: #23201b; color: #fff; }
.shop-get.big { margin-top: 8px; padding: 11px 16px; font-size: 14px; }
.lps-runs { padding: 0; border: 0; background: none; color: #9a4f17; font: inherit; font-weight: 600; cursor: pointer; }
.lps-runs:hover { text-decoration: underline; }
.os-dark .lps-runs { color: #e8a06a; }
.fam-link { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-weight: 600; text-decoration: underline; cursor: default; }
.os-dark .fam-link { color: #6aa0ff; }
@media (prefers-reduced-motion: reduce) { .back-up, .card.beckon { animation: none !important; } }

/* Light mode: Darkroom and Pulse follow the system like the apps they echo (Cut stays dark, like real video editors).
   Their dark look is the default above; these are the light versions. */
.screen:not(.os-dark) .dr { background: #fff; color: #1d1d1f; }
.screen:not(.os-dark) .dr-side { background: #f5f5f7; border-right-color: #e5e5ea; }
.screen:not(.os-dark) .dr-side button { color: #1d1d1f; }
.screen:not(.os-dark) .dr-side button:hover { background: #ebebef; }
.screen:not(.os-dark) .dr-side button.on { background: #dfdfe5; }
.screen:not(.os-dark) .dr-bar { border-bottom-color: #e5e5ea; }
.screen:not(.os-dark) .dr-bar > span, .screen:not(.os-dark) .dr-zoom { color: #6e6e73; }
.screen:not(.os-dark) .dr-zoom input, .screen:not(.os-dark) .dr-adj input { accent-color: #1d1d1f; }
.screen:not(.os-dark) .dr-tools button { background: #f0f0f3; color: #1d1d1f; }
.screen:not(.os-dark) .dr-tools button:hover { background: #e5e5ea; }
.screen:not(.os-dark) .dr-tools .dr-edit.on, .screen:not(.os-dark) .dr-tools .dr-inf.on { background: #1d1d1f; color: #fff; }
.screen:not(.os-dark) .dr-adj, .screen:not(.os-dark) .dr-info { border-left-color: #e5e5ea; }
.screen:not(.os-dark) .dr-adj .btn { background: #f0f0f3; color: #1d1d1f; }
.screen:not(.os-dark) .dr-info dd { color: #1d1d1f; }
.screen:not(.os-dark) .dr-cap { color: #55555a; }
.screen:not(.os-dark) .dr-cap b { color: #1d1d1f; }

.screen:not(.os-dark) .pulse { background: #fff; color: #0f0f0f; }
.screen:not(.os-dark) .pu-head { background: rgba(255, 255, 255, 0.97); }
.screen:not(.os-dark) .pu-logo { color: #0f0f0f; }
.screen:not(.os-dark) .pu-search input { border-color: #d3d3d3; background: #fff; color: #0f0f0f; }
.screen:not(.os-dark) .pu-drop { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.18); }
.screen:not(.os-dark) .pu-drop button { color: #0f0f0f; }
.screen:not(.os-dark) .pu-drop button:hover { background: #f2f2f2; }
.screen:not(.os-dark) .pu-drop p { color: #333; }
.screen:not(.os-dark) .pu-chip { background: #f2f2f2; color: #0f0f0f; }
.screen:not(.os-dark) .pu-chip.on { background: #0f0f0f; color: #fff; }
.screen:not(.os-dark) .pu-results, .screen:not(.os-dark) .pu-note, .screen:not(.os-dark) .pu-meta small, .screen:not(.os-dark) .pu-nv small, .screen:not(.os-dark) .pu-chan small, .screen:not(.os-dark) .pu-c small { color: #606060; }
.screen:not(.os-dark) .pu-sub { background: #0f0f0f; color: #fff; }
.screen:not(.os-dark) .pu-sub.on { background: #f2f2f2; color: #0f0f0f; }
.screen:not(.os-dark) .pu-like { background: #f2f2f2; color: #0f0f0f; }
.screen:not(.os-dark) .pu-like.on { background: #0f0f0f; color: #fff; }
.screen:not(.os-dark) .pu-cbox input { border-bottom-color: #ccc; color: #0f0f0f; }
.screen:not(.os-dark) .pu-cbox input:focus { border-bottom-color: #0f0f0f; }
.screen:not(.os-dark) .pu-post { background: #e8f0fe; color: #065fd4; }
.screen:not(.os-dark) .pu-post:hover { background: #d3e3fd; }
.screen:not(.os-dark) .pu-c p { color: #0f0f0f; }
.screen:not(.os-dark) .pu-clike { color: #606060; }
.screen:not(.os-dark) .pu-clike:hover, .screen:not(.os-dark) .pu-clike.on { background: #f2f2f2; color: #0f0f0f; }
.screen:not(.os-dark) .pu-chat, .screen:not(.os-dark) .pu-chat h4, .screen:not(.os-dark) .pu-chatin { border-color: #e5e5e5; }
.screen:not(.os-dark) .pu-cl { color: #0f0f0f; }
.screen:not(.os-dark) .pu-cl b { filter: brightness(0.62) saturate(1.3); }
.screen:not(.os-dark) .pu-chatin input { border-color: #d3d3d3; background: #fff; color: #0f0f0f; }

/* Full screen: the stage alone, still framed, so it reads as a drawing. */
.hero:fullscreen { width: 100%; height: 100%; min-height: 0; padding: 14px; background: var(--page); }
.hero:-webkit-full-screen { width: 100%; height: 100%; min-height: 0; padding: 14px; background: var(--page); }
.hero:fullscreen .device { inset: 14px; }
.hero:-webkit-full-screen .device { inset: 14px; }
.fs-exit { display: none; position: absolute; left: 26px; bottom: 22px; z-index: 21; padding: 7px 13px; border: 0; border-radius: 999px; background: var(--card-bg); color: var(--card-ink); font: 600 12.5px/1 var(--sys); box-shadow: 0 0 0 1px var(--card-line), 0 10px 26px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; }
.fs-exit:hover { background: var(--amber); color: var(--amber-ink); }
.hero:fullscreen .fs-exit { display: block; }
.hero:-webkit-full-screen .fs-exit { display: block; }
/* A question in the guide's bubble: two small answers. */
.guide-say.ask { pointer-events: auto; }
.say-btns { display: flex; gap: 6px; margin-top: 8px; }
.say-btns button { padding: 5px 11px; border: 1.5px solid rgba(232, 137, 74, 0.95); border-radius: 999px; background: none; color: #241d14; font: 700 12.5px/1 var(--sys); cursor: pointer; }
.say-btns button:first-child { background: #e8894a; border-color: #e8894a; color: #1d1208; }
.say-btns button:hover { filter: brightness(1.06); }
/* Beside an open menu or panel: the tail points right, at the guide. */
.guide-say.beside { transform-origin: 100% 50%; }
.guide-say.beside::after { left: auto; right: -6px; top: 50%; bottom: auto; margin-top: -6px; box-shadow: 1.5px -1.5px 0 0 rgba(232, 137, 74, 0.95); }

/* The step bar at the bottom of the tour card: numbered, easy to hit, each says its name on hover. */
.tc-stepper { position: relative; display: flex; justify-content: space-between; margin: 15px 2px 2px; }
.tc-stepper::before, .tc-stepper::after { content: ""; position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px; background: var(--card-dot); }
.tc-stepper::after { right: auto; width: calc((100% - 26px) * var(--done) / 100); background: var(--amber); }
.tc-stepper button { position: relative; z-index: 1; width: 26px; height: 26px; padding: 0; border: 1.5px solid var(--card-line); border-radius: 50%; background: var(--card-bg); color: var(--ink-3); font: 700 12px/1 var(--sys); cursor: pointer; transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s; }
.tc-stepper button.done { border-color: var(--amber); color: var(--amber); }
.tc-stepper button.on { border-color: var(--amber); background: var(--amber); color: var(--amber-ink); transform: scale(1.12); }
.tc-stepper button:hover { transform: scale(1.18); border-color: var(--amber); color: var(--card-ink); }
.tc-stepper button.on:hover { color: var(--amber-ink); }
.tc-stepper button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tc-stepper button::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 5px 9px; border-radius: 7px; background: var(--card-ink); color: var(--page); font: 600 11.5px/1 var(--sys); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.tc-stepper button:hover::after, .tc-stepper button:focus-visible::after { opacity: 1; }
.tc-stepper button:first-child::after { left: 0; transform: none; }
.tc-stepper button:last-child::after { left: auto; right: 0; transform: none; }

/* ================= the real page, below the drawing ================= */
/* Quiet and plain to use. What exists is solid, what's coming is dashed, and the page has an end. */
main.calm { position: relative; background: var(--page); overflow-x: clip; }
.band { max-width: 1120px; margin: 0 auto; padding: 116px 24px 10px; }
.band-title { margin: 0 0 40px; font: 600 clamp(32px, 4.4vw, 56px)/1.05 var(--display); letter-spacing: -0.035em; }

/* Download: the app itself, one button, three facts. After the click, what happens next. */
.get { position: relative; max-width: 920px; margin: 0 auto; padding: 124px 24px 20px; text-align: center; isolation: isolate; }
.get::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 30px; width: min(760px, 100vw); height: 440px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(232, 137, 74, 0.14), rgba(232, 137, 74, 0)); pointer-events: none; }
.get-icon { display: block; width: 112px; height: 112px; margin: 0 auto 30px; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)); transition: transform 0.5s cubic-bezier(.2, .9, .3, 1.4); }
.get:has(.download.big:hover) .get-icon { transform: translateY(-5px) rotate(-5deg); }
.get h2 { margin: 0 0 12px; font: 600 clamp(32px, 4.4vw, 56px)/1.06 var(--display); letter-spacing: -0.035em; }
.get-sub { margin: 0 0 32px; color: var(--ink-2); font-size: 19px; line-height: 1.45; }
.download.big { gap: 10px; padding: 16px 30px 16px 25px; font-size: 17px; }
.dl-glyph { width: 19px; height: 19px; flex: none; }
.get-meta { margin: 22px 0 0; font-size: 13.5px; color: var(--ink-3); }
.get-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.get-facts li { display: inline-flex; align-items: center; gap: 9px; }
.get-facts li::before { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(-45deg); }
.get-after { max-width: 780px; margin: 36px auto 0; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--page-2); text-align: left; animation: riseIn 0.5s cubic-bezier(.2, .9, .3, 1.1) both; }
.ga-title { margin: 0 0 16px; font: 600 17px/1.3 var(--display); color: var(--ink); }
.ga-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ga-steps li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); animation: riseIn 0.45s ease-out both; }
.ga-steps li:nth-child(2) { animation-delay: 0.2s; }
.ga-steps li:nth-child(3) { animation-delay: 0.4s; }
.ga-n { flex: none; width: 24px; height: 24px; margin-top: -1px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font: 700 12.5px/1 var(--sys); }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } }

/* Where it runs: a road. Each stop draws its stretch of line to the next one; the dots are the mark's idea, full, half, empty. */
.road { --gap: 18px; --dash: color-mix(in srgb, var(--ink-3) 75%, transparent); display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--gap); margin: 0; padding: 0; list-style: none; }
.stop { position: relative; display: flex; flex-direction: column; min-width: 0; }
.stop::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--gap)); top: 11px; height: 2px; background: var(--amber); }
.stop.next::before { background: repeating-linear-gradient(90deg, var(--dash) 0 7px, transparent 7px 13px); }
.stop.later::before { right: 0; background: repeating-linear-gradient(90deg, var(--dash) 0 7px, transparent 7px 13px); -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent); mask-image: linear-gradient(90deg, #000 45%, transparent); }
.stop-head { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 11px; margin: 0 0 20px; padding-right: 14px; background: var(--page); font: 600 12.5px/24px var(--sys); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.stop-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--amber); background: var(--amber); }
.road.seen .stop.today .stop-dot { animation: live 2.6s ease-out 3; } /* three soft pulses when you arrive, then still: no endless motion on a page about less pull */
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(232, 137, 74, 0.55); } 70%, 100% { box-shadow: 0 0 0 11px rgba(232, 137, 74, 0); } }
.stop.next .stop-head { color: color-mix(in srgb, var(--amber) 62%, var(--ink-2)); }
.stop.next .stop-dot { background: linear-gradient(90deg, transparent 50%, var(--amber) 50%); }
.stop.later .stop-head { color: var(--ink-3); }
.stop.later .stop-dot { background: none; border-color: var(--ink-3); }
.stop-cards { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
.calm .card { padding: 24px 24px 22px; border-radius: 20px; background: var(--page-2); border: 1px solid var(--line); }
/* What's coming isn't built yet, so it has no box: just the words, on the dashed stretch. */
.calm .stop.next .card, .calm .stop.later .card { margin: -8px -10px 0; padding: 10px 10px 8px; background: none; border: 0; border-radius: 14px; } /* the margin keeps the words in line; the padding gives a highlight room */
.calm .stop.next .card + .card { margin-top: 12px; }
.calm .stop.later .card h3 { color: var(--ink-2); }
.calm .stop.later .card p { color: var(--ink-3); }
.calm .card h3 { margin: 0 0 10px; font: 600 22px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.calm .card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
/* The Mac card ends with a tiny menu bar: where the app lives. */
.calm .card.mac { display: flex; flex-direction: column; }
.mini-bar { margin-top: auto; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 12px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.calm .card.mac p { margin-bottom: 22px; }
.mini-bar i { display: block; width: 22px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.mini-bar i:first-child { width: 14px; background: color-mix(in srgb, var(--ink) 34%, transparent); }
.mini-bar i:nth-child(3) { width: 30px; }
.mini-bar .mini-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mini-bar .mini-right em { display: block; width: 9px; height: 9px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.mini-bar .mark { width: 13px; height: 13px; border-width: 1.4px; box-shadow: 0 0 0 4px rgba(232, 137, 74, 0.22), 0 0 0 8px rgba(232, 137, 74, 0.08); }
.mini-bar .clock { width: 34px; }
.card-links { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px !important; }
.card-links a { color: var(--ink); text-decoration-color: rgba(232, 137, 74, 0.6); text-underline-offset: 3px; }
.card-links span { color: var(--ink-3); }
.road-follow { margin: 24px 0 0; color: var(--ink-3); font-size: 15px; text-align: right; }
.road-follow a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: rgba(232, 137, 74, 0.6); }
.road-follow a:hover { color: var(--ink); }
.road-beyond { margin-top: 8px; margin-left: auto; max-width: 620px; line-height: 1.5; text-wrap: balance; }
@media (max-width: 980px) {
  .road { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .stop { padding-left: 34px; }
  .stop::before { left: 8px; right: auto; top: 12px; bottom: -30px; width: 2px; height: auto; }
  .stop.next::before { background: repeating-linear-gradient(180deg, var(--dash) 0 7px, transparent 7px 13px); }
  .stop.later::before { bottom: 0; background: repeating-linear-gradient(180deg, var(--dash) 0 7px, transparent 7px 13px); -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
  .stop-head { margin-left: -34px; padding: 0; background: none; }
  .stop-dot { box-shadow: 0 0 0 5px var(--page); }
  .road.seen .stop.today .stop-dot { animation: none; }
  .road-follow { text-align: left; padding-left: 34px; }
  .road-beyond { margin-left: 0; }
}
@media (max-width: 640px) { .stop-cards { grid-template-columns: minmax(0, 1fr); } }

/* Already paid for: the words, one door to the ways, and a stamp that comes down once when you arrive. */
.paid-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 70px; align-items: center; }
.support-text { max-width: 780px; margin: 0; font: 400 clamp(21px, 2.3vw, 29px)/1.45 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.support-links { margin: 36px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.support-cta { padding: 14px 26px; border: 0; border-radius: 999px; background: var(--amber); color: var(--amber-ink); text-decoration: none; font: 600 16px/1.2 var(--sys); cursor: pointer; transition: background 0.15s; }
.support-cta:hover { background: #f09a5e; }
.support-links a:not(.support-cta) { color: var(--ink-2); text-underline-offset: 4px; text-decoration-color: rgba(232, 137, 74, 0.45); }
.support-links a:not(.support-cta):hover { color: var(--ink); }
.stamp { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.5 0 0 0 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  margin: 0 26px 0 0; display: grid; justify-items: center; gap: 6px; padding: 18px 28px 16px; border: 6px double var(--amber); border-radius: 18px; color: var(--amber); transform: rotate(-8deg); opacity: 0.9; -webkit-mask-image: var(--grain); mask-image: var(--grain); user-select: none; -webkit-user-select: none; }
.stamp b { font: 800 66px/0.9 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.stamp small { font: 700 14px/1 var(--sys); letter-spacing: 0.34em; text-transform: uppercase; }
.stamp.waiting { opacity: 0; }
.stamp.down { animation: stampDown 0.45s cubic-bezier(.3, 1.5, .55, 1) both; }
@keyframes stampDown { 0% { opacity: 0; transform: rotate(-1deg) scale(1.9); } 65% { opacity: 0.95; transform: rotate(-9deg) scale(0.95); } 100% { opacity: 0.9; transform: rotate(-8deg) scale(1); } }
@media (max-width: 860px) { .paid-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .stamp { justify-self: end; margin: 0 18px 0 0; } .stamp b { font-size: 48px; } }

/* Ways to support: one door, then the choice. */
.ways { margin-top: 56px; scroll-margin-top: 84px; animation: riseIn 0.45s cubic-bezier(.2, .9, .3, 1.1) both; }
.ways-title { margin: 0 0 6px; font: 600 24px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.ways-lead { margin: 0 0 22px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.way-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.way { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text qr" "act qr"; gap: 18px 22px; padding: 22px 20px 20px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--page-2); transition: border-color 0.2s; }
.way:hover { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.way-text { grid-area: text; min-width: 0; }
.way-text h3 { display: flex; align-items: center; gap: 11px; margin: 0 0 8px; font: 600 19px/1.2 var(--display); color: var(--ink); }
/* Each way in its own colors: a small sign to find it by, and its Open button. Color where it matters, and nowhere else. */
.way.bmc { --brand: #ffdd00; --brand-ink: #0d0c22; }
.way.paypal { --brand: #0070e0; --brand-ink: #fff; }
.way.wise { --brand: #9fe870; --brand-ink: #163300; }
.way.btc { --brand: #f7931a; --brand-ink: #241300; }
.way-logo { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--brand); color: var(--brand-ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.way-logo svg { width: 19px; height: 19px; }
.way-logo b { font: 800 17px/1 var(--display); }
.way.paypal .way-logo b { font-style: italic; margin-left: -1px; }
.way.btc .way-logo { color: #fff; }
.way.btc .way-logo b { font-size: 18px; transform: rotate(-14deg); }
.way-btn.go { border-color: transparent; background: var(--brand); color: var(--brand-ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.way-btn.go:hover { border-color: transparent; color: var(--brand-ink); filter: brightness(1.07) saturate(1.05); }
.way-text p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
/* A QR code is a button: a click shows it big. The small magnifier says so. */
.way-qr { grid-area: qr; align-self: start; position: relative; display: block; padding: 0; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); cursor: zoom-in; transition: transform 0.2s cubic-bezier(.2, .9, .3, 1.3), box-shadow 0.2s; }
.way-qr img { display: block; width: 96px; height: 96px; border-radius: 12px; }
.way-qr:hover { transform: scale(1.05); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); }
.way-qr:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.qr-zoom { position: absolute; right: -7px; bottom: -7px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--page-2); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, 0.18); transition: background 0.15s, color 0.15s; }
.way-qr:hover .qr-zoom, .way-qr:focus-visible .qr-zoom { background: var(--amber); color: var(--amber-ink); }
.way-act { grid-area: act; align-self: end; display: flex; flex-wrap: wrap; gap: 8px; }
.way.no-money { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text act"; align-items: center; }
.way.no-money .way-act { align-self: center; }
.way-btn { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font: 600 13px/1 var(--sys); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.way-btn:hover { border-color: var(--amber); color: var(--amber); }
.way.beckon { animation: cardBeckon 1.2s ease-out 2; }
/* The note under "Without money": the link to pass on, or where feedback goes. */
.way-note { margin: 12px 0 0 !important; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--amber) 10%, transparent); color: var(--ink) !important; font-size: 14.5px; line-height: 1.5; }
.way-note.in { animation: riseIn 0.35s ease-out both; }
.way-note a, .note-btn { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(232, 137, 74, 0.7); text-underline-offset: 3px; }
.note-btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.way-note a:hover, .note-btn:hover { color: var(--amber); }
/* The big QR code: in the middle of the screen, as large as the window allows. */
.qr-big { padding: 0; border: 0; border-radius: 26px; background: var(--page-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 30px 90px rgba(0, 0, 0, 0.5); }
.qr-big[open] { animation: qrIn 0.28s cubic-bezier(.2, .9, .3, 1.15); }
.qr-big::backdrop { background: rgba(12, 10, 8, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes qrIn { from { opacity: 0; transform: scale(0.92); } }
.qr-inner { position: relative; display: grid; justify-items: center; gap: 12px; padding: 30px 36px 30px; text-align: center; }
.qr-inner h3 { margin: 0 30px; font: 600 22px/1.2 var(--display); letter-spacing: -0.01em; }
.qr-inner img { display: block; width: min(340px, 72vw, 58vh); height: auto; aspect-ratio: 1; border-radius: 16px; background: #fff; }
.qr-cap { margin: 4px 0 0; max-width: 32ch; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.qr-addr { max-width: 340px; color: var(--ink); font: 13px/1.4 var(--mono); word-break: break-all; user-select: all; -webkit-user-select: all; }
.qr-close { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0 0 2px; border: 0; border-radius: 50%; background: var(--card-btn); color: var(--ink); font: 400 20px/1 var(--sys); cursor: pointer; }
.qr-close:hover { background: var(--amber); color: var(--amber-ink); }
.qr-inner:focus { outline: none; }
.qr-close:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 760px) { .way-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .way, .way.no-money { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "act"; } .way-qr { display: none; } }

/* The end: the page stops, and the mark sets on the footer's line like a sun. */
.page-end { max-width: 1120px; margin: 150px auto 0; padding: 0 24px; text-align: center; }
.end-big { margin: 0; font: 600 clamp(36px, 5vw, 64px)/1 var(--display); letter-spacing: -0.035em; color: var(--ink); }
.end-small { margin: 14px 0 0; color: var(--ink-2); font-size: 18px; line-height: 1.45; }
.end-up { margin: 24px 0 0; padding: 10px 17px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-2); font: 600 13.5px/1 var(--sys); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.end-up:hover { border-color: var(--amber); color: var(--ink); }
.sunset { position: relative; height: 112px; margin-top: 60px; overflow: hidden; }
.sunset::before { content: ""; position: absolute; left: 50%; bottom: -150px; width: min(760px, 100%); height: 300px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(232, 137, 74, 0.2), rgba(232, 137, 74, 0)); transition: opacity 7s ease-in-out; }
.sunset::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(232, 137, 74, 0), rgba(232, 137, 74, 0.7) 50%, rgba(232, 137, 74, 0)); }
.sun { position: absolute; left: 50%; top: 0; width: 196px; height: 196px; margin-left: -98px; padding: 0; border-radius: 50%; border: 3px solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(180deg, #f6924b, #ea6438); cursor: pointer; transition: transform 7s cubic-bezier(.45, 0, .4, 1), translate 0.35s ease; }
.sun:hover, .sun:focus-visible { translate: 0 -6px; }
.sun:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.sunset.set .sun { transform: translateY(42px); }
.sunset.set::before { opacity: 0.45; }
.footer { max-width: 1120px; margin: 0 auto; padding: 26px 24px 60px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 30px; font-size: 14px; color: var(--ink-3); }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.footer-brand img { display: block; width: 22px; height: 22px; }
.footer-brand a { color: var(--ink); text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; }
.footer-links a { color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-note { grid-column: 1 / -1; margin: 0; font-size: 13.5px; }
@media (max-width: 640px) { .footer { grid-template-columns: minmax(0, 1fr); } .footer-links { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .road.seen .stop.today .stop-dot, .stamp.down, .get-after, .ga-steps li, .ways, .way-note.in, .qr-big[open] { animation: none !important; } .way-qr { transition: none !important; } .sun, .sunset::before, .get-icon { transition: none !important; } }

/* ================= the small pages: what I'm building, and how it's funded ================= */
.doc-body { max-width: 780px; margin: 0 auto; padding: 104px 24px 30px; }
.doc-eyebrow { margin: 0 0 16px; font: 600 12.5px/1 var(--sys); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.doc-eyebrow a { color: var(--amber); text-decoration: none; }
.doc-eyebrow a:hover { text-decoration: underline; text-underline-offset: 4px; }
.doc h1 { margin: 0; font: 600 clamp(36px, 5vw, 60px)/1.04 var(--display); letter-spacing: -0.035em; color: var(--ink); }
.doc-lead { margin: 22px 0 0; font: 400 clamp(20px, 2.2vw, 25px)/1.45 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.doc h2 { margin: 70px 0 14px; font: 600 clamp(24px, 2.6vw, 30px)/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.doc-body > p:not([class]), .doc-help > p:not([class]) { margin: 0 0 14px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.doc-never { margin: 22px 0 0; padding: 16px 20px; border-left: 3px solid var(--amber); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--amber) 9%, transparent); font: 500 18px/1.5 var(--display); color: var(--ink); }
.doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.doc-cards li { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--page-2); }
.doc-cards h3 { margin: 0 0 8px; font: 600 19px/1.25 var(--display); color: var(--ink); }
.doc-cards p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.doc-help { margin-top: 70px; padding: 30px 32px 32px; border-radius: 24px; background: var(--page-2); border: 1px solid var(--line); }
.doc-help h2 { margin-top: 0; }
.doc-help .support-links { margin-top: 22px; }
.doc-help a.support-cta { display: inline-block; }
.doc-more { margin: 56px 0 0; text-align: center; font-size: 16px; color: var(--ink-3); }
.doc-more a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: rgba(232, 137, 74, 0.6); }
.doc ~ .footer { margin-top: 80px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .doc-cards { grid-template-columns: minmax(0, 1fr); } .doc-help { padding: 24px 22px; } }

/* The first step's one pause: the stage dims around the guide and its card, so nobody misses where the tour went. */
.tour-dim { position: absolute; inset: 10px; z-index: 19; border-radius: 14px; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient(circle at var(--x, 80%) var(--y, 80%), rgba(8, 6, 4, 0) var(--r, 200px), rgba(8, 6, 4, 0.5) calc(var(--r, 200px) + 240px)); }
.tour-dim.on { opacity: 1; }
.gate-go { animation: gateGo 1.8s ease-in-out infinite; }
@keyframes gateGo { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 137, 74, 0.6); } 50% { box-shadow: 0 0 0 7px rgba(232, 137, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .gate-go { animation: none !important; } .tour-dim { transition: none !important; } }

/* Cut in the light: the panels, the timeline and the export sheet turn light; the viewer stays black, like a real editor's. */
.screen:not(.os-dark) .cut { background: #f2f2f5; color: #1d1d1f; }
.screen:not(.os-dark) .cut-insp, .screen:not(.os-dark) .cut-tl { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); }
.screen:not(.os-dark) .cut-fx { border-color: #dcdce1; background: #f7f7f9; color: #1d1d1f; }
.screen:not(.os-dark) .cut-fx:hover { background: #ececf1; }
.screen:not(.os-dark) .cut-fx.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.screen:not(.os-dark) .cut-fx small { color: #6e6e73; }
.screen:not(.os-dark) .cut-fx.on small { color: rgba(255, 255, 255, 0.85); }
.screen:not(.os-dark) .cut-play { background: #e3e3e8; color: #1d1d1f; }
.screen:not(.os-dark) .cut-head { background: #1d1d1f; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }
.screen:not(.os-dark) .cut-snd { color: #1d1d1f; }
.screen:not(.os-dark) .cut-amb { color: #2f6b4f; }
.screen:not(.os-dark) .cut-meter { color: #6e6e73; }
.screen:not(.os-dark) .cut-meter b { color: #1d1d1f; }
.screen:not(.os-dark) .cut-bar, .screen:not(.os-dark) .cut-prog { background: #e3e3e8; }
.screen:not(.os-dark) .cut-reset { background: #e5e5ea; color: #1d1d1f; }
.screen:not(.os-dark) .cut-sheet { background: rgba(0, 0, 0, 0.25); }
.screen:not(.os-dark) .cut-sbox { background: #fff; color: #1d1d1f; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.screen:not(.os-dark) .cut-sbox .seg { background: rgba(0, 0, 0, 0.06); }
.screen:not(.os-dark) .cut-sbox .seg button { color: #333; }
.screen:not(.os-dark) .cut-sbox .seg button.on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.screen:not(.os-dark) .cut-status { color: #6e6e73; }
.screen:not(.os-dark) .cut-sbox .btn { background: rgba(0, 0, 0, 0.06); color: #1d1d1f; }
.screen:not(.os-dark) .cut-sbox .btn.primary { background: #8b5cf6; color: #fff; }
.cut .cut-export.btn.primary { background: #8b5cf6; color: #fff; } /* Cut's own purple, in the light and in the dark */

/* Tell a friend: its own section after the download. One row: the places in their own colors, a thin line, then email, copy
   and the browser's share menu, quiet. Each says its name under it. */
.tell { max-width: 920px; margin: 0 auto; padding: 96px 24px 10px; text-align: center; }
.tell h2 { margin: 0 0 12px; font: 600 clamp(28px, 3.4vw, 40px)/1.1 var(--display); letter-spacing: -0.03em; }
.tell-sub { max-width: 620px; margin: 0 auto 30px; color: var(--ink-2); font-size: 18px; line-height: 1.5; }
.tell-note { margin: 22px 0 0; color: var(--ink-3); font-size: 14.5px; }
.share { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 6px 4px; border-radius: 22px; }
.share.beckon { animation: cardBeckon 1.2s ease-out 2; }
.share-btn { position: relative; width: 76px; display: grid; justify-items: center; gap: 8px; padding: 6px 0; border: 0; border-radius: 14px; background: none; color: var(--ink-2); font: 500 12.5px/1.2 var(--sys); text-decoration: none; cursor: pointer; }
.share-dot { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: transform 0.15s ease; }
.share-dot svg { width: 24px; height: 24px; }
.share-btn:hover .share-dot { transform: translateY(-2px); }
.share-btn:hover { color: var(--ink); }
.share-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.share-btn.plain .share-dot { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.share-btn.tip .share-label { color: var(--amber); }
.share-sep { align-self: center; width: 1px; height: 34px; margin: -18px 8px 0; background: var(--line); }
@media (max-width: 640px) { .share-sep { display: none; } }
@media (prefers-reduced-motion: reduce) { .share.beckon { animation: none !important; } .share-dot { transition: none !important; } }

/* Night at the end: the sun sets for good, stars come out one by one, a moon rises, and once a shooting star. Morning undoes it. */
.page-end { position: relative; }
.page-end > :not(.stars) { position: relative; z-index: 1; }
.end-small { transition: opacity 0.38s ease; }
.end-small.swap { opacity: 0; }
.page-end.night .sun { transform: translateY(170px); transition: transform 1.9s cubic-bezier(.55, 0, .75, .2), translate 0.35s ease; }
.page-end.morning .sun { transition: transform 2.2s cubic-bezier(.2, .7, .3, 1), translate 0.35s ease; }
.page-end.night .sunset::before { opacity: 0.12; transition: opacity 1.6s ease; }
.page-end.night .sunset::after { opacity: 0.35; }
.night-glow { position: absolute; left: 50%; bottom: -150px; width: min(760px, 100%); height: 300px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(120, 150, 230, 0.22), rgba(120, 150, 230, 0)); opacity: 0; transition: opacity 1.8s ease 0.6s; pointer-events: none; }
.page-end.night .night-glow { opacity: 1; }
.moon { position: absolute; left: calc(50% - 300px); top: 130px; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset -13px 5px 0 0 #f1ead9; cursor: pointer; opacity: 0; transition: transform 2.4s cubic-bezier(.25, .8, .3, 1) 0.7s, opacity 0.8s ease 0.7s, translate 0.35s ease; }
.page-end.night .moon { transform: translateY(-104px); opacity: 1; }
.page-end.night .moon:hover, .moon:focus-visible { translate: 0 -5px; }
.moon:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.stars { position: absolute; left: 0; right: 0; top: -70px; bottom: 0; z-index: 0; pointer-events: none; }
.stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #f4eedf; box-shadow: 0 0 6px rgba(244, 238, 223, 0.6); opacity: 0; }
.page-end.night .stars i { animation: starIn 1.2s ease-out var(--d) both, twinkle 3.4s ease-in-out calc(var(--d) + 1.2s) infinite alternate; }
@keyframes starIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 0.85; transform: scale(1); } }
@keyframes twinkle { from { opacity: 0.85; } to { opacity: 0.3; } }
.shooting { position: absolute; right: 16%; top: 14%; width: 110px; height: 1.6px; border-radius: 1px; background: linear-gradient(90deg, #f4eedf, rgba(244, 238, 223, 0)); opacity: 0; transform: rotate(-17deg); }
.page-end.night .shooting { animation: shoot 1.15s ease-in 3.4s 1 both; }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-17deg); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-300px, 92px) rotate(-17deg); } }
/* The light changes softly while you watch it. */
.theme-fade body, .theme-fade main.calm, .theme-fade .site-head, .theme-fade .footer, .theme-fade .footer *, .theme-fade .end-big, .theme-fade .end-small, .theme-fade .end-up { transition: background-color 1.2s ease, color 1.2s ease, border-color 1.2s ease, opacity 0.38s ease; } /* the sun and moon keep their own motion */
@media (prefers-reduced-motion: reduce) { .page-end .sun, .moon, .night-glow, .end-small { transition: none !important; } .page-end.night .stars i { animation: none !important; opacity: 0.8; } .page-end.night .shooting { animation: none !important; } }

/* The drawing's own big titles look like headings but aren't: the page has one main heading, the real one. */
.d-h1 { color: inherit; }
/* For screen readers and AI agents: said, not shown. */
.sr-only { 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; }

/* Questions: folded, quiet, and all there for whoever reads the page as text. */
.faq-list { max-width: 860px; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { position: relative; display: block; padding: 20px 44px 20px 0; font: 500 19px/1.35 var(--display); color: var(--ink); cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.2s ease, margin-top 0.2s ease; }
.qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--amber); }
.qa summary:hover { color: var(--amber); }
.qa summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }
.qa p { max-width: 720px; margin: -6px 0 22px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; animation: riseIn 0.3s ease-out both; }
@media (prefers-reduced-motion: reduce) { .qa p { animation: none !important; } .qa summary::after { transition: none !important; } }