/* ==========================================================================
   Home page only: the hero, the player marks thrown out behind it, the source
   switcher, and the interactive app window. Everything the home page shares
   with another page lives in site.css.
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   The hero fills the screen down to the requirements line, and stops there:
   the app window below it starts off screen. That line and the download
   buttons are fixed heights, so --room is what is left for the parts
   that can scale, and they take the same share of it at every screen height.
   No breakpoint, so there is no size at which it suddenly does not fit.
   -------------------------------------------------------------------------- */
.home-hero {
  --room: max(420px, calc(100vh - 220px));
  position: relative;
  overflow: hidden;
  padding: min(72px, calc(var(--room) * 0.082)) 0 0;
  text-align: center;
}
.home-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -40px;
  left: 50%;
  width: min(1100px, 130vw);
  height: 620px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.05), transparent 70%);
}
@media (prefers-color-scheme: light) {
  .home-hero::before { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.03), transparent 70%); }
}

.hero-inner { position: relative; z-index: 2; }

/* However the headline happens to wrap, the text block reaches the bottom of
   the screen, so the app window under it always starts off screen. Above this
   height the icon and the headline hit their caps and cannot fill the screen
   anyway, so the window is welcome to show. */
@media (max-height: 1100px) {
  .hero-inner { min-height: calc(100vh - min(72px, calc(var(--room) * 0.082))); }
}
.hero-app { display: block; width: min(340px, calc(var(--room) * 0.385)); height: min(340px, calc(var(--room) * 0.385)); max-width: 72vw; margin: 0 auto min(32px, 2.7vh); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.home-hero h1 { max-width: none; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; font-size: clamp(34px, min(7.4vw, calc(var(--room) * 0.109)), 96px); text-wrap: balance; }
.home-hero h1 em { font-style: normal; color: var(--accent); }
.home-hero .lede { max-width: 700px; margin-top: min(26px, 2.4vh); font-size: clamp(17px, min(2.1vw, 2.2vh), 21px); font-weight: 450; }
.hero-ctas { margin-top: min(42px, 3.7vh); }
.hero-note { margin-top: min(26px, 2.2vh); color: var(--muted-2); font-size: 13.5px; }

/* The player marks, thrown out from behind the app icon */
.hero-float { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.hero-float .hf {
  position: absolute;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 30px;
  box-shadow: 0 22px 52px -20px rgba(0, 0, 0, 0.55);
  animation: floatDrift 7s ease-in-out infinite;
}
.hero-float .hf img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes floatDrift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.hf1 { top: min(126px, 13vh); left: 5%; animation-delay: -0.4s; transform: perspective(720px) rotateX(15deg) rotateY(-22deg) rotate(-9deg); }
.hf2 { top: min(116px, 12vh); right: 6%; animation-delay: -2.3s; transform: perspective(720px) rotateX(-11deg) rotateY(20deg) rotate(8deg); }
.hf3 { top: min(320px, 32vh); left: 11%; animation-delay: -3.6s; transform: perspective(720px) rotateX(17deg) rotateY(15deg) rotate(-6deg); }
.hf4 { top: min(332px, 33vh); right: 10%; animation-delay: -1.2s; transform: perspective(720px) rotateX(-15deg) rotateY(-17deg) rotate(9deg); }
.hf5 { top: min(500px, 50vh); left: 3%; animation-delay: -4.2s; transform: perspective(720px) rotateX(13deg) rotateY(24deg) rotate(-12deg); }
.hf6 { top: min(514px, 51vh); right: 4%; animation-delay: -2.8s; transform: perspective(720px) rotateX(-17deg) rotateY(-13deg) rotate(10deg); }

@media (max-width: 1400px) {
  .hero-float .hf { width: 84px; height: 84px; border-radius: 21px; box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.5); }
  .hf1 { top: min(150px, 15vh); left: -1%; }
  .hf2 { top: min(120px, 12vh); right: -1%; }
  .hf3 { top: min(330px, 33vh); left: 1%; }
  .hf4 { top: min(342px, 34vh); right: 1%; }
  .hf5 { top: min(512px, 51vh); left: -1%; }
  .hf6 { top: min(524px, 52vh); right: -1%; }
}
/* Narrow: keep four marks, drop the lowest pair that would crowd the text */
@media (max-width: 760px) { .hero-float .hf5, .hero-float .hf6 { display: none; } }

@media (max-width: 600px) {
  .home-hero { padding: calc(24px + env(safe-area-inset-top, 0px)) 0 0; }
  .hero-app { width: 180px; height: 180px; max-width: 48vw; margin: 0 auto 16px; border-radius: 34px; }
  .home-hero h1 { font-size: clamp(36px, 11vw, 52px); }
  .home-hero h1 .brk { display: none; }
  .home-hero .lede { margin-top: 14px; font-size: clamp(18px, 4.8vw, 22px); }
  .hero-ctas { margin-top: 22px; }
  .hero-note { margin-top: 14px; }
  .hero-float .hf { width: 54px; height: 54px; border-radius: 14px; }
  .hf1 { top: 44px; left: 10px; }
  .hf2 { top: 44px; right: 10px; }
  .hf3 { top: 140px; left: 14px; }
  .hf4 { top: 140px; right: 14px; }
}

/* --- Source switcher ------------------------------------------------------ */
.opts-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 48px auto 0;
  padding: 5px;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-pill);
  background: var(--glass);
}
.opts-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 24px;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.opts-tabs button svg { width: 20px; height: 20px; }
.opts-tabs button[aria-selected="true"] { color: var(--ink); background: var(--txt); }
.opts-tabs button[aria-selected="false"]:hover { color: var(--txt); }

.opts-wrap { max-width: 980px; margin: var(--sp-5) auto 0; }
.opt-panel {
  display: none;
  overflow: hidden;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r);
  background: var(--glass);
}
.opt-panel.on { display: grid; animation: fade 0.5s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.opt-copy { display: flex; flex-direction: column; justify-content: center; padding: 52px 46px; }
.opt-copy h3 { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.opt-copy p { margin-top: 14px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.opt-ic { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 22px; border-radius: var(--r-sm); }
.opt-ic svg { width: 36px; height: 36px; }
.opt-exts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.opt-exts span { padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--ink-2); font-size: 12px; font-weight: 550; }
.opt-na { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3); color: var(--muted-2); font-size: 12.5px; font-weight: 550; }
.opt-na svg { width: 15px; height: 15px; }
.opt-visual { display: grid; place-items: center; padding: 30px; border-left: 1px solid var(--glass-brd); background: var(--ink-2); }
.opt-bigicon { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 26px; color: #fff; }
.opt-bigicon svg { width: 56px; height: 56px; }

/* Source identity colours are fine on the source icons themselves */
.i-yt { background: #e0271d; }
.i-rss { background: #f26522; }
.i-file { background: #7357d8; }

@media (min-width: 761px) { .opt-ic { display: none; } }
@media (max-width: 760px) {
  .opt-panel.on { grid-template-columns: 1fr; }
  .opt-visual { display: none; }
  .opt-copy { padding: 38px 32px; }
}
@media (max-width: 560px) {
  .opts-tabs { display: flex; flex-direction: column; width: 100%; max-width: 340px; border-radius: var(--r-sm); }
  .opts-tabs button { justify-content: flex-start; width: 100%; padding: 13px 18px; border-radius: calc(var(--r-sm) - 5px); white-space: nowrap; }
}

/* --- The Feedcast window --------------------------------------------------
   A recreation of the real app rather than an illustration of it: the same
   three panes under one split toolbar, the same controls in the same places,
   the same restraint about colour. macOS chrome is grey; the accent only
   appears where the app puts it, on the primary action and the playhead.
   -------------------------------------------------------------------------- */
.stage { position: relative; z-index: 2; max-width: 1080px; margin: 72px auto 0; padding: 0 20px; text-align: left; }
@media (min-width: 1320px) { .stage { max-width: 1260px; } }
@media (min-width: 1600px) { .stage { max-width: 1420px; } }

.macwin {
  /* The window keeps its own dark palette in both site themes, because the
     app itself is being shown in dark appearance. */
  --w-txt: #f2f2f4;
  --w-muted: #9b9aa2;
  --w-dim: #6f6e77;
  --w-line: rgba(255, 255, 255, 0.09);
  --w-fill: rgba(255, 255, 255, 0.07);
  --w-fill-hi: rgba(255, 255, 255, 0.13);
  --w-sel: rgba(255, 255, 255, 0.11);

  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 348px;
  grid-template-rows: 52px minmax(0, 1fr);
  grid-template-areas:
    "bar-side bar-main bar-detail"
    "side     main     detail";
  overflow: hidden;
  height: 716px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  color: var(--w-txt);
  background: #1b1b1d;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  font-size: 13px;
  letter-spacing: normal;
  opacity: 0;
  transform: translateY(60px);
  transition: transform 1s var(--ease), opacity 1s ease;
}
.macwin.in { opacity: 1; transform: translateY(0); }
.macwin button { font: inherit; color: inherit; border: 0; cursor: pointer; }

/* Toolbar. Three regions, aligned to the three panes below them. */
.w-bar { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.w-bar-side { grid-area: bar-side; background: rgba(255, 255, 255, 0.035); }
.w-bar-main { grid-area: bar-main; }
.w-bar-detail { grid-area: bar-detail; gap: 6px; }
.w-side { grid-area: side; overflow-y: auto; min-height: 0; padding: 0 10px 10px; background: rgba(255, 255, 255, 0.035); }
.w-main { grid-area: main; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.w-detail { grid-area: detail; overflow-y: auto; min-height: 0; padding: 0 16px 16px; }

/* Each pane scrolls on its own, the way the real window does, and the bars
   stay hidden because macOS only shows them while you are scrolling. */
.w-side, .w-detail, .w-eplist { scrollbar-width: none; }
.w-side::-webkit-scrollbar, .w-detail::-webkit-scrollbar, .w-eplist::-webkit-scrollbar { display: none; }

/* The dividers run the full height of the window, toolbar included */
.w-bar-side, .w-side { border-right: 1px solid var(--w-line); }
.w-bar-detail, .w-detail { border-left: 1px solid var(--w-line); }

.lights { display: flex; gap: 8px; }
.lights button { width: 12px; height: 12px; padding: 0; border-radius: 50%; }
.lights button:nth-child(1) { background: #ff5f57; }
.lights button:nth-child(2) { background: #febc2e; }
.lights button:nth-child(3) { background: #28c840; }
.w-spacer { flex: 1; }

.w-ic {
  display: grid;
  place-items: center;
  background: none;
  width: 28px;
  height: 24px;
  border-radius: 6px;
  color: var(--w-muted);
  transition: background 0.15s, color 0.15s;
}
.w-ic svg { width: 16px; height: 16px; }
.w-ic:hover { color: var(--w-txt); background: var(--w-fill); }
.w-ic.accent { color: var(--accent-bright); }
.w-ic.danger { color: #ff6961; }
.w-ic.wide { display: flex; align-items: center; justify-content: center; width: 38px; gap: 1px; }
.w-ic.wide svg:last-child { width: 9px; height: 9px; }
.w-group { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: var(--w-fill); }

.w-app-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* Segmented control, the Local / RSS / YouTube source picker */
.w-seg { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--w-fill); }
.w-seg button { padding: 4px 14px; background: none; border-radius: 6px; color: var(--w-muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.w-seg button[aria-pressed="true"] { color: #fff; background: var(--w-fill-hi); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.w-seg button[aria-pressed="false"]:hover { color: var(--w-txt); }

.w-search { display: flex; flex: 1; align-items: center; gap: 6px; overflow: hidden; min-width: 0; padding: 5px 10px; border-radius: 7px; color: var(--w-dim); background: var(--w-fill); font-size: 12.5px; white-space: nowrap; }
.w-search svg { flex: none; width: 13px; height: 13px; }
.w-search span { overflow: hidden; text-overflow: ellipsis; }

/* Artwork tiles stand in for the podcast covers the real app downloads */
.w-art { display: grid; flex: none; place-items: center; overflow: hidden; color: #fff; font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; }
.w-art svg { width: 44%; max-width: 24px; height: auto; }
.w-art.a { background: #6f5bd6; }
.w-art.b { background: #2f74d0; }
.w-art.c { background: #cf5a35; }
.w-art.d { background: #1c9268; }
.w-art.e { background: #c9424f; }
.w-art.f { background: #4d4d59; }
.w-art.g { background: #7c4bc4; }

/* Sidebar */
.w-side-label { padding: 8px 8px 6px; color: var(--w-dim); font-size: 11px; font-weight: 600; }
.w-feed { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 8px; background: none; text-align: left; transition: background 0.15s; }
.w-feed:hover { background: var(--w-fill); }
.w-feed[aria-current="true"] { background: var(--w-sel); }
.w-feed .w-art { width: 38px; height: 38px; border-radius: 8px; font-size: 13px; }
.w-feed-meta { min-width: 0; }
.w-feed-name { display: block; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.w-feed-sub { display: block; margin-top: 1px; color: var(--w-muted); font-size: 11px; }

/* Middle pane */
.w-import { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.w-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.w-btn svg { width: 14px; height: 14px; }
.w-btn.primary { color: #fff; background: var(--accent); }
.w-btn.primary:hover { background: var(--accent-bright); }
.w-btn.plain { color: var(--w-txt); background: var(--w-fill); font-weight: 500; }
.w-btn.plain:hover { background: var(--w-fill-hi); }
.w-btn.done { color: #fff; background: #2f9e6b; }
.w-field { display: flex; flex: 1; align-items: center; gap: 7px; min-width: 0; padding: 6px 12px; border-radius: 8px; color: var(--w-dim); background: var(--w-fill); font-size: 12.5px; }
.w-field svg { flex: none; width: 14px; height: 14px; }
.w-pop { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 130px; padding: 6px 10px; border-radius: 8px; color: var(--w-txt); background: var(--w-fill); font-size: 12.5px; }
.w-pop svg { width: 11px; height: 11px; color: var(--w-muted); }

.w-feedhead { display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 14px; border-top: 1px solid var(--w-line); }
.w-feedhead .w-art { width: 78px; height: 78px; border-radius: 11px; font-size: 24px; }
.w-feedhead-info { flex: 1; min-width: 0; }
.w-feedhead-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.w-feedhead-top > div:first-child { flex: 1 1 auto; min-width: 0; }
.w-feedhead-title { overflow: hidden; font-size: 19px; font-weight: 650; letter-spacing: -0.015em; white-space: nowrap; text-overflow: ellipsis; }
.w-feedhead-count { margin-top: 2px; color: var(--w-muted); font-size: 12px; }
.w-feedhead-desc { display: -webkit-box; overflow: hidden; margin-top: 8px; color: var(--w-muted); font-size: 12px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.w-feedhead-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }

.w-source { display: flex; align-items: center; gap: 10px; margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: var(--w-fill); }
.w-source-icon { display: grid; place-items: center; width: 22px; height: 22px; color: var(--w-muted); }
.w-source-icon svg { width: 16px; height: 16px; }
.w-source-meta { flex: 1; min-width: 0; }
.w-source-name { display: block; font-size: 12.5px; font-weight: 600; }
.w-source-sub { display: block; margin-top: 1px; color: var(--w-muted); font-size: 11px; }
.w-toggle { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: var(--accent); transition: background 0.2s; }
.w-toggle::after { content: ""; position: absolute; top: 2px; left: 18px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.2s; }
.w-toggle[aria-pressed="false"] { background: rgba(255, 255, 255, 0.18); }
.w-toggle[aria-pressed="false"]::after { left: 2px; }

.w-eplist { flex: 1; overflow-y: auto; min-height: 0; padding: 0 10px 10px; }
.w-ep { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 8px; border-radius: 9px; background: none; text-align: left; transition: background 0.15s; }
.w-ep:hover { background: var(--w-fill); }
.w-ep[aria-current="true"] { background: var(--w-sel); }
.w-ep .w-art { width: 40px; height: 40px; border-radius: 7px; font-size: 12px; }
.w-ep-info { flex: 1; min-width: 0; }
.w-ep-title { display: block; overflow: hidden; font-size: 13px; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
.w-ep-sub { display: block; overflow: hidden; margin-top: 3px; color: var(--w-muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.w-ep-bar { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.w-ep-bar span { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.w-ep-glyph { flex: none; color: var(--w-dim); }
.w-ep-glyph svg { width: 16px; height: 16px; }

/* Detail pane */
.w-picker { display: flex; gap: 4px; margin: 12px 0 14px; padding: 3px; border-radius: 9px; background: var(--w-fill); }
.w-picker button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; border-radius: 7px; color: var(--w-muted); background: none; font-size: 12.5px; font-weight: 550; transition: color 0.15s, background 0.15s; }
.w-picker button svg { width: 14px; height: 14px; }
.w-picker button[aria-pressed="true"] { color: var(--w-txt); background: var(--w-fill-hi); }

/* The three editors keep the colours of the apps they are */
.w-editors { display: flex; gap: 8px; margin-bottom: 14px; }
.w-editor { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; overflow: hidden; min-width: 0; padding: 8px 6px; border-radius: 9px; color: #fff; font-size: 12px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.w-editor.chaptercast { background: #0a84ff; }
.w-editor.autochapter { background: #30d158; }
.w-editor.sponsorscrub { color: #211c00; background: #ffd60a; }
.w-editor:disabled { color: var(--w-dim); background: var(--w-fill); cursor: default; }

.w-cover { position: relative; width: 178px; height: 178px; margin: 0 auto 14px; border-radius: 12px; font-size: 38px; }
.w-cover.video { width: 100%; height: 172px; border-radius: 10px; }
.w-cover.video span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); }
.w-cover.video span svg { width: 22px; max-width: none; }

.w-chapter { display: flex; align-items: center; gap: 7px; padding: 6px 2px; color: var(--w-txt); font-size: 12px; font-weight: 550; }
.w-chapter svg { flex: none; width: 12px; height: 12px; color: var(--w-muted); }

.w-wave { display: flex; align-items: flex-end; gap: 2px; height: 54px; padding: 0 2px; }
.w-wave i { flex: 1; border-radius: 1px; background: rgba(255, 255, 255, 0.22); }
.w-wave i.played { background: var(--accent); }

.w-transport { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.w-transport .w-ic { width: 22px; height: 22px; }
.w-transport .w-ic svg { width: 14px; height: 14px; }
.w-play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--w-txt); background: none; }
.w-play:hover { background: var(--w-fill); }
.w-play svg { width: 15px; height: 15px; }
.w-time { color: var(--w-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.w-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); }
.w-track span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; background: var(--accent); }
.w-track i { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); }

.w-ep-heading { margin-top: 16px; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.w-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.w-fact { display: inline-flex; align-items: center; gap: 6px; color: var(--w-muted); font-size: 11.5px; }
.w-fact svg { flex: none; width: 13px; height: 13px; }
.w-desc { margin-top: 14px; color: var(--w-muted); font-size: 12.5px; line-height: 1.5; }
.w-rows { display: grid; grid-template-columns: auto auto; gap: 3px 12px; width: max-content; margin-top: 14px; font-size: 12px; }
.w-rows b { color: var(--w-muted); font-weight: 450; text-align: right; }

/* Transcript tab */
.w-tsearch { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 10px; border-radius: 8px; color: var(--w-dim); background: var(--w-fill); }
.w-tsearch > svg { flex: none; width: 14px; height: 14px; }
.w-tsearch input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--w-txt); background: none; font: inherit; font-size: 12.5px; }
.w-tsearch input::placeholder { color: var(--w-dim); }
.w-tcount { color: var(--w-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.w-lines { display: flex; flex-direction: column; }
.w-line { display: flex; gap: 12px; width: 100%; padding: 5px 6px; border-radius: 6px; background: none; text-align: left; }
.w-line:hover { background: var(--w-fill); }
.w-line.now { background: rgba(203, 48, 224, 0.18); }
.w-line time { flex: none; color: var(--w-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.w-line p { color: var(--w-txt); font-size: 12.5px; line-height: 1.45; }
.w-line mark { padding: 0 1px; border-radius: 2px; color: #211c00; background: #ffd60a; }

@media (max-width: 1180px) {
  .macwin { grid-template-columns: 220px minmax(0, 1fr) 310px; height: 680px; }
  .w-editor { font-size: 11px; padding-inline: 3px; }
}
@media (max-width: 1000px) {
  .macwin { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "bar-main bar-detail" "main detail"; }
  .w-bar-side, .w-side { display: none; }
  .w-bar-main { padding-left: 16px; }
}
@media (max-width: 760px) { .stage { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .macwin { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-float .hf, .hero-app { animation: none !important; }
}