path: root/index.css

  /* ============= LOCKED PALETTE ============= */
  :root {
    --sky: url("img/wallpaper.png") center / cover no-repeat, linear-gradient(180deg, oklch(78% 0.10 215) 0%, oklch(88% 0.14 145) 100%);
    --sun: radial-gradient(circle, oklch(99% 0.02 215) 0%, oklch(94% 0.05 215 / 0) 60%);
    --icon-blue:   linear-gradient(135deg, oklch(92% 0.06 215), oklch(72% 0.13 220) 60%, oklch(48% 0.13 230));
    --icon-orange: linear-gradient(135deg, oklch(94% 0.10 145), oklch(78% 0.18 145) 55%, oklch(52% 0.16 150));
    --icon-green:  linear-gradient(135deg, oklch(94% 0.12 130), oklch(76% 0.18 140) 55%, oklch(50% 0.16 150));
    --icon-pink:   linear-gradient(135deg, oklch(88% 0.08 195), oklch(68% 0.13 200) 60%, oklch(45% 0.13 210));
    --icon-silver: linear-gradient(135deg, oklch(98% 0.005 220), oklch(85% 0.015 220) 60%, oklch(62% 0.03 225));
    --title-bar:   linear-gradient(to bottom, oklch(94% 0.05 195), oklch(78% 0.10 200) 50%, oklch(60% 0.12 215));
    --start-btn:   linear-gradient(to bottom, oklch(94% 0.10 145) 0%, oklch(75% 0.18 145) 48%, oklch(50% 0.16 150) 52%, oklch(68% 0.18 145) 100%);
    --start-border: oklch(40% 0.14 150);
  }
  .desk { position: fixed; inset: 0; overflow: hidden; background: var(--sky); background-size: cover; background-position: center; }
  .icons { position: absolute; left: 24px; top: 24px; display: grid; grid-template-columns: 1fr; gap: 18px; z-index: 10; }
  .icon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; cursor: pointer; text-align: center; }
  .icon .glyph {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, oklch(88% 0.10 220), oklch(70% 0.14 230) 60%, oklch(50% 0.13 240));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -3px 6px rgba(40,80,140,0.4), 0 4px 14px rgba(40,80,140,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    position: relative;
  }
  .icon .glyph::before { content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 40%; border-radius: 12px; background: linear-gradient(to bottom, rgba(255,255,255,0.75), transparent); }
  .icon .glyph.orange { background: linear-gradient(135deg, oklch(92% 0.08 70), oklch(75% 0.16 55) 60%, oklch(55% 0.15 35)); }
  .icon .glyph.green  { background: linear-gradient(135deg, oklch(90% 0.10 145), oklch(75% 0.15 145) 60%, oklch(50% 0.13 155)); }
  .icon .glyph.pink   { background: linear-gradient(135deg, oklch(90% 0.10 350), oklch(75% 0.16 350) 60%, oklch(55% 0.16 340)); }
  .icon .glyph.silver { background: linear-gradient(135deg, oklch(95% 0.01 240), oklch(78% 0.03 240) 60%, oklch(55% 0.04 240)); }
  .icon .label { font-size: 12px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.6); font-weight: 500; }
  .icon:hover .glyph { transform: translateY(-2px) scale(1.04); transition: transform 200ms; }

  .win { position: absolute; min-width: 320px; z-index: 50; }
  /* When a window has been resized, it switches to a flex column so the
     body becomes a scroll region — keeps content from getting clipped */
  .win.resized {
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
  }
  .win.resized .body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    border-radius: 0 0 18px 18px;
  }
  /* The browser window is already a flex column internally; let it fill */
  .win.resized > .browser { flex: 1; min-height: 0; }
  /* RESIZE HANDLES */
  .rs { position: absolute; z-index: 5; }
  .rs-e { right: -3px; top: 14px; bottom: 18px; width: 8px; cursor: ew-resize; }
  .rs-s { left: 14px; right: 18px; bottom: -3px; height: 8px; cursor: ns-resize; }
  .rs-se {
    right: 0; bottom: 0; width: 22px; height: 22px;
    cursor: nwse-resize;
    background-image:
      linear-gradient(135deg, transparent 0 38%, rgba(40,80,140,0.85) 38% 48%, transparent 48% 60%, rgba(40,80,140,0.75) 60% 70%, transparent 70%, rgba(40,80,140,0.6) 82% 92%, transparent 92%);
    border-radius: 0 0 18px 0;
    opacity: 0.65;
    transition: opacity 150ms, filter 150ms;
  }
  .rs-se:hover { opacity: 1; filter: drop-shadow(0 0 4px rgba(120,170,220,0.8)); }
  body.rs-cursor-e, body.rs-cursor-e * { cursor: ew-resize !important; }
  body.rs-cursor-s, body.rs-cursor-s * { cursor: ns-resize !important; }
  body.rs-cursor-se, body.rs-cursor-se * { cursor: nwse-resize !important; }
  .win .titlebar {
    height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
    border-radius: 18px 18px 0 0;
    background: var(--title-bar);
    color: var(--title-fg, white); font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px var(--title-shadow, rgba(0,0,0,0.3));
    cursor: grab; user-select: none;
    border-bottom: 1px solid rgba(0,0,0,0.15);
  }
  .win .titlebar .dots { display: flex; gap: 6px; margin-right: 8px; }
  .win .titlebar .dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.35); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
  .win .titlebar .dot.r { background: radial-gradient(circle at 35% 30%, oklch(85% 0.18 30), oklch(55% 0.18 30)); }
  .win .titlebar .dot.y { background: radial-gradient(circle at 35% 30%, oklch(95% 0.15 95), oklch(70% 0.18 80)); }
  .win .titlebar .dot.g { background: radial-gradient(circle at 35% 30%, oklch(90% 0.18 145), oklch(60% 0.18 150)); }
  .win .body { padding: 16px; font-size: 13px; line-height: 1.55; color: oklch(22% 0.04 240); border-radius: 0 0 18px 18px; }

  .taskbar {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    height: 56px; padding: 0 12px; display: flex; align-items: center; gap: 10px;
    border-radius: 28px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(180,210,240,0.45));
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 12px 36px rgba(40,80,140,0.3);
    z-index: 200;
  }
  .taskbar .start {
    height: 40px; padding: 0 18px 0 14px; display: inline-flex; align-items: center; gap: 8px;
    border-radius: 20px;
    background: var(--start-btn);
    color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.4); font-weight: 700; font-size: 13px;
    border: 1px solid var(--start-border); cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 3px 10px rgba(180,90,40,0.3);
  }
  .taskbar .sep { width: 1px; height: 32px; background: linear-gradient(to bottom, transparent, rgba(60,100,160,0.4), transparent); }
  .tray { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12px; color: oklch(25% 0.05 240); }
  .clock { font-family: "Segoe UI", Tahoma; font-weight: 600; }

  /* SYSTEM-TRAY ALERT (keep android open) */
  .tray-alert {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 12px; cursor: pointer;
    background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,220,180,0.35));
    border: 1px solid rgba(220,140,60,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 3px rgba(180,90,30,0.18);
    transition: transform 160ms, box-shadow 160ms;
  }
  .tray-alert:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 3px 8px rgba(180,90,30,0.3); }
  .tra-led {
    width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, oklch(96% 0.16 60), oklch(62% 0.20 45));
    box-shadow: 0 0 6px oklch(70% 0.20 50 / 0.9);
    animation: tra-pulse 1.8s ease-in-out infinite;
  }
  @keyframes tra-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.78); } }
  .tra-label { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; color: oklch(38% 0.12 50); text-transform: uppercase; }
  .tra-count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: oklch(30% 0.10 45); }

  body[data-theme="chrome"] .tray-alert {
    background: linear-gradient(to bottom, oklch(30% 0.04 280), oklch(20% 0.05 290)) !important;
    border-color: oklch(60% 0.20 50) !important;
    box-shadow: inset 0 1px 0 oklch(50% 0.10 280), 0 0 12px oklch(60% 0.20 45 / 0.4) !important;
  }
  body[data-theme="chrome"] .tra-label { color: oklch(85% 0.14 60) !important; }
  body[data-theme="chrome"] .tra-count { color: oklch(92% 0.06 60) !important; }

  /* SYSTEM ALERT WINDOW */
  .win.koa-alert { z-index: 300; }
  .koa-title {
    background: linear-gradient(to bottom, oklch(72% 0.14 35), oklch(55% 0.18 30) 50%, oklch(42% 0.16 28)) !important;
    color: oklch(99% 0 0) !important;
    text-shadow: 0 1px 2px oklch(20% 0.10 30 / 0.7) !important;
  }
  .koa-body { padding: 14px 16px 16px !important; }
  .koa-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .koa-bot {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    background: linear-gradient(135deg, oklch(90% 0.14 145), oklch(65% 0.20 145));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 10px oklch(55% 0.18 145 / 0.4);
    animation: koa-bot-bob 3.4s ease-in-out infinite;
  }
  @keyframes koa-bot-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }
  .koa-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: oklch(48% 0.18 35); margin-bottom: 3px;
  }
  .koa-headline {
    font-size: 17px; font-weight: 700; line-height: 1.2;
    color: oklch(22% 0.06 240);
    letter-spacing: -0.2px;
  }
  .koa-copy { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: oklch(25% 0.04 240); }
  .koa-countdown {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin-bottom: 14px;
  }
  .koa-cd-cell {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px 7px; border-radius: 10px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(220,232,245,0.4));
    border: 1px solid rgba(120,160,200,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(40,80,140,0.08);
  }
  .koa-cd-n {
    font-family: 'IBM Plex Mono', monospace; font-size: 19px; font-weight: 600;
    color: oklch(35% 0.14 35);
    line-height: 1;
  }
  .koa-cd-l {
    font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
    color: oklch(40% 0.04 240); font-weight: 600;
  }
  .koa-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .koa-dismiss {
    background: transparent; border: 0; cursor: pointer;
    font-size: 11px; color: oklch(40% 0.03 240); text-decoration: underline;
    font-family: inherit;
  }
  .koa-dismiss:hover { color: oklch(22% 0.06 240); }

  body[data-theme="chrome"] .koa-title {
    background: linear-gradient(180deg,
      oklch(58% 0.20 30) 0%,
      oklch(42% 0.20 28) 45%,
      oklch(28% 0.16 25) 52%,
      oklch(40% 0.20 28) 60%,
      oklch(52% 0.20 30) 100%) !important;
    color: oklch(99% 0.02 60) !important;
    text-shadow: 0 1px 0 oklch(18% 0.10 25 / 0.85), 0 0 6px oklch(80% 0.18 50 / 0.4) !important;
    border-bottom: 1px solid oklch(20% 0.10 25) !important;
  }
  body[data-theme="chrome"] .koa-headline { color: oklch(18% 0.06 240) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
  body[data-theme="chrome"] .koa-copy { color: oklch(22% 0.03 240) !important; }
  body[data-theme="chrome"] .koa-eyebrow { color: oklch(48% 0.20 35) !important; }
  body[data-theme="chrome"] .koa-cd-cell {
    background: linear-gradient(to bottom, oklch(18% 0.03 250), oklch(10% 0.03 250)) !important;
    border: 1px solid oklch(35% 0.06 250) !important;
    box-shadow: inset 0 1px 0 oklch(40% 0.06 250 / 0.5), 0 1px 3px rgba(0,0,0,0.4) !important;
  }
  body[data-theme="chrome"] .koa-cd-n { color: oklch(92% 0.16 60) !important; text-shadow: 0 0 8px oklch(70% 0.20 50 / 0.7); }
  body[data-theme="chrome"] .koa-cd-l { color: oklch(70% 0.04 240) !important; }
  body[data-theme="chrome"] .koa-dismiss { color: oklch(35% 0.04 240) !important; }
  body[data-theme="chrome"] .koa-dismiss:hover { color: oklch(18% 0.06 240) !important; }

  /* SERVER ROW */
  .srv-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 0;
    border-bottom: 1px dotted oklch(72% 0.05 220); font-size: 12px;
  }
  .srv-row:last-child { border-bottom: 0; }
  .srv-led {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    animation: led-pulse 2.2s ease-in-out infinite;
  }
  .srv-led.ok   { background: radial-gradient(circle at 30% 30%, oklch(96% 0.18 145), oklch(60% 0.18 150)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 8px oklch(70% 0.18 145 / 0.7); }
  .srv-led.warn { background: radial-gradient(circle at 30% 30%, oklch(95% 0.16 85),  oklch(70% 0.18 75));  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 8px oklch(70% 0.18 80 / 0.6); }
  @keyframes led-pulse { 50% { opacity: 0.55; } }
  .srv-host { font-family: 'Courier New', monospace; flex: 1; color: oklch(25% 0.05 230); }
  .srv-meta { font-size: 10px; opacity: 0.7; }

  /* FILM DIARY ROW */
  .film-row {
    display: flex; gap: 10px; padding: 8px 0;
    border-bottom: 1px dotted oklch(72% 0.05 220);
  }
  .film-row:last-child { border-bottom: 0; }
  .film-poster {
    width: 38px; height: 56px; border-radius: 4px; flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(40,80,140,0.2);
  }
  .film-meta { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; }
  .film-title { font-weight: 700; color: oklch(25% 0.06 230); font-size: 13px; }
  .film-year { font-weight: 400; opacity: 0.6; font-size: 11px; margin-left: 3px; }
  .film-rating { font-size: 11px; margin: 1px 0 2px; }
  .film-rating .star { color: oklch(80% 0.04 230); }
  .film-rating .star.on { color: oklch(72% 0.16 60); text-shadow: 0 0 4px oklch(80% 0.18 70 / 0.5); }
  .film-rating .star.half { background: linear-gradient(90deg, oklch(72% 0.16 60) 50%, oklch(80% 0.04 230) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .film-note { font-size: 11px; opacity: 0.75; font-style: italic; }

  /* ============= FAUX BROWSER ============= */
  .browser { display: flex; flex-direction: column; height: 100%; }
  .browser .titlebar { border-bottom: 1px solid rgba(0,0,0,0.18); }
  .browser-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(to bottom, oklch(96% 0.005 220), oklch(86% 0.015 225) 50%, oklch(78% 0.025 230));
    border-bottom: 1px solid oklch(60% 0.04 230);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
  }
  .nav-btn {
    width: 28px; height: 24px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(to bottom, oklch(99% 0.005 220), oklch(88% 0.015 225) 50%, oklch(74% 0.03 230));
    border: 1px solid oklch(55% 0.05 230);
    color: oklch(35% 0.05 235); font-size: 13px; line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(40,80,140,0.25);
    transition: transform 100ms, box-shadow 100ms;
  }
  .nav-btn:hover { transform: translateY(-0.5px); }
  .nav-btn:active { transform: translateY(0.5px); box-shadow: inset 0 1px 3px rgba(40,80,140,0.4); }
  .nav-btn[disabled] { opacity: 0.35; cursor: default; transform: none !important; }
  .nav-btn.refresh.spinning svg { animation: spin 700ms linear; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .url-bar {
    flex: 1; height: 26px; display: flex; align-items: center; gap: 6px;
    padding: 0 10px;
    background: linear-gradient(to bottom, oklch(99% 0.003 220), oklch(94% 0.008 220));
    border: 1px solid oklch(60% 0.04 230);
    border-radius: 13px;
    box-shadow: inset 0 1px 2px rgba(40,80,140,0.18);
    font: 12px "IBM Plex Mono", "Courier New", monospace;
    color: oklch(28% 0.05 235);
    overflow: hidden; min-width: 0;
  }
  .url-bar .lock { font-size: 10px; color: oklch(58% 0.16 145); flex-shrink: 0; }
  .url-bar .url-scheme { opacity: 0.55; }
  .url-bar .url-host { color: oklch(30% 0.08 240); font-weight: 600; }
  .url-bar .url-path { opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .url-bar .caret { width: 1px; height: 14px; background: oklch(40% 0.08 240); animation: blink 1s steps(2) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .browser-bookmarks {
    display: flex; align-items: center; gap: 2px;
    padding: 4px 10px;
    background: linear-gradient(to bottom, oklch(94% 0.01 220), oklch(86% 0.02 225));
    border-bottom: 1px solid oklch(62% 0.04 230);
    font-size: 11px;
    overflow-x: auto; scrollbar-width: none;
  }
  .browser-bookmarks::-webkit-scrollbar { display: none; }
  .bm {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 8px;
    color: oklch(28% 0.06 235); white-space: nowrap; cursor: pointer;
    border: 1px solid transparent;
    transition: background 120ms, border-color 120ms;
  }
  .bm:hover { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.95); }
  .bm.active { background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(200,230,255,0.4)); border-color: rgba(120,170,220,0.5); }
  .bm .favicon { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
  .bm.home .favicon { background: linear-gradient(135deg, oklch(85% 0.10 220), oklch(55% 0.14 235)); }
  .browser-page {
    flex: 1; min-height: 0; overflow-y: auto;
    background: oklch(98% 0.004 220);
    color: oklch(20% 0.03 240);
    font: 14px "Georgia", "Times New Roman", serif;
    line-height: 1.65;
    padding: 0;
    position: relative;
  }
  .browser-page::-webkit-scrollbar { width: 12px; }
  .browser-page::-webkit-scrollbar-track { background: linear-gradient(to right, oklch(92% 0.01 220), oklch(96% 0.005 220)); }
  .browser-page::-webkit-scrollbar-thumb { background: linear-gradient(to right, oklch(82% 0.03 225), oklch(70% 0.05 230)); border-radius: 6px; border: 2px solid oklch(94% 0.008 220); }
  .browser-status {
    height: 22px; padding: 0 12px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(to bottom, oklch(90% 0.01 220), oklch(80% 0.02 225));
    border-top: 1px solid oklch(60% 0.04 230);
    font: 11px "Segoe UI", Tahoma, sans-serif;
    color: oklch(35% 0.05 235);
    border-radius: 0 0 18px 18px;
  }
  .browser-status .progress {
    flex: 1; max-width: 80px; height: 8px; margin: 0 8px;
    background: oklch(82% 0.02 225); border-radius: 4px;
    border: 1px solid oklch(65% 0.04 230);
    overflow: hidden; box-shadow: inset 0 1px 2px rgba(40,80,140,0.15);
  }
  .browser-status .progress-bar {
    height: 100%; width: 100%;
    background: linear-gradient(to bottom, oklch(82% 0.13 220), oklch(58% 0.14 235));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
  }
  /* index page */
  .idx-hero {
    padding: 32px 40px 24px;
    background:
      radial-gradient(60% 80% at 100% 0%, oklch(88% 0.10 215 / 0.5) 0%, transparent 60%),
      linear-gradient(to bottom, oklch(94% 0.03 220), oklch(98% 0.004 220));
    border-bottom: 1px solid oklch(88% 0.02 220);
  }
  .idx-eyebrow { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 2px; text-transform: uppercase; color: oklch(45% 0.10 230); margin-bottom: 8px; }
  .idx-title { font: 700 38px/1.05 "Georgia", "Times New Roman", serif; color: oklch(22% 0.06 235); letter-spacing: -1px; margin: 0 0 10px; }
  .idx-title em { font-style: italic; font-weight: 400; color: oklch(45% 0.12 220); }
  .idx-sub { font: italic 14px/1.5 "Georgia", serif; color: oklch(40% 0.04 235); max-width: 440px; margin: 0; }
  .idx-list { padding: 16px 40px 40px; }
  .idx-art { display: grid; grid-template-columns: 60px 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid oklch(90% 0.015 220); cursor: pointer; transition: padding 120ms; }
  .idx-art:last-child { border-bottom: 0; }
  .idx-art:hover { padding-left: 6px; }
  .idx-art:hover .idx-art-title { color: oklch(40% 0.16 230); text-decoration: underline; text-decoration-color: oklch(70% 0.13 220 / 0.5); text-underline-offset: 3px; }
  .idx-art-num { font: 600 28px/1 "IBM Plex Mono", monospace; color: oklch(80% 0.04 225); padding-top: 4px; }
  .idx-art-title { font: 700 18px/1.25 "Georgia", serif; color: oklch(22% 0.06 235); margin: 0 0 4px; letter-spacing: -0.2px; }
  .idx-art-excerpt { font: 13px/1.55 "Georgia", serif; color: oklch(40% 0.04 235); margin: 4px 0 0; }
  .idx-art-meta { font: 11px "IBM Plex Mono", monospace; color: oklch(55% 0.06 230); text-align: right; padding-top: 4px; line-height: 1.6; white-space: nowrap; }
  .idx-art-tag { display: inline-block; padding: 1px 6px; border-radius: 3px; background: oklch(92% 0.04 220); color: oklch(40% 0.10 230); font-size: 10px; text-transform: lowercase; letter-spacing: 0.5px; }
  /* article page */
  .art-page { padding: 36px 56px 60px; max-width: 620px; margin: 0 auto; }
  .art-back { display: inline-flex; align-items: center; gap: 6px; font: 500 11px "IBM Plex Mono", monospace; color: oklch(45% 0.10 230); text-decoration: none; margin-bottom: 24px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; }
  .art-back:hover { color: oklch(35% 0.16 230); }
  .art-eyebrow { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 2px; text-transform: uppercase; color: oklch(55% 0.10 220); margin-bottom: 12px; }
  .art-title { font: 700 32px/1.15 "Georgia", "Times New Roman", serif; color: oklch(20% 0.06 235); letter-spacing: -0.6px; margin: 0 0 14px; }
  .art-byline { font: italic 13px/1.5 "Georgia", serif; color: oklch(48% 0.04 235); margin: 0 0 32px; padding-bottom: 16px; border-bottom: 1px solid oklch(88% 0.015 220); }
  .art-body { font-size: 15px; line-height: 1.75; color: oklch(22% 0.03 240); }
  .art-body p { margin: 0 0 18px; text-wrap: pretty; }
  .art-body p:first-of-type::first-letter { font-size: 56px; font-weight: 700; float: left; line-height: 0.9; padding: 4px 8px 0 0; color: oklch(40% 0.14 220); font-family: "Georgia", serif; }
  .art-body em { color: oklch(35% 0.10 230); }
  .art-body a, .art-body .ilink { color: oklch(40% 0.16 230); text-decoration: underline; text-decoration-color: oklch(70% 0.13 220 / 0.4); text-underline-offset: 2px; cursor: pointer; }
  .art-body h2 { font: 700 18px "Georgia", serif; color: oklch(22% 0.06 235); margin: 32px 0 12px; letter-spacing: -0.2px; }
  .art-body blockquote { margin: 24px 0; padding: 0 0 0 18px; border-left: 3px solid oklch(78% 0.10 220); font-style: italic; color: oklch(38% 0.06 230); }
  .art-body code { font: 13px "IBM Plex Mono", monospace; background: oklch(94% 0.01 220); padding: 1px 5px; border-radius: 3px; color: oklch(35% 0.10 230); }
  .art-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid oklch(88% 0.015 220); font: 12px "IBM Plex Mono", monospace; color: oklch(55% 0.06 230); display: flex; justify-content: space-between; align-items: center; }
  .art-foot .more { color: oklch(40% 0.16 230); cursor: pointer; }

  /* music toggle button — on-state gradient (off-state is set inline by Aero.musicToggleHTML) */
  .mt-btn.on { background: radial-gradient(circle at 30% 25%, white, oklch(75% 0.14 55) 60%, oklch(55% 0.15 35)) !important; }

  /* film row trailing date */
  .film-when { opacity: 0.6; margin-left: 8px; }
  /* films stats numerals */
  #films-stats strong { color: oklch(28% 0.08 230); font-size: 13px; }

  /* podcast episode rows */
  .pod-ep { display: flex; justify-content: space-between; gap: 8px; }
  .pod-ep a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pod-dur { opacity: 0.6; flex-shrink: 0; }

  /* "now playing" recent list */
  .np-recent-label { margin-top: 14px; font-size: 11px; opacity: 0.75; text-transform: uppercase; letter-spacing: 1px; }
  #np-recent { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
  .np-row { display: flex; justify-content: space-between; }
  .np-ago { opacity: 0.6; }

  /* generic empty/loading message used in fetched lists */
  .empty-msg { opacity: 0.5; font-style: italic; }