:root{
    --bg:#0a0e18;
    --surface:#121a2b;
    --surface-2:#1a2440;
    --surface-3:#212c4d;
    --line:#293356;
    --text:#e8ebf3;
    --text-dim:#98a2ba;
    --text-faint:#6b7590;
    --accent:#4c86f7;
    --accent-strong:#7fa8fb;
    --accent-soft:rgba(76,134,247,0.14);
    --tab:#e0a856;
    --tab-soft:rgba(224,168,86,0.14);
    --shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
    --radius-card: 14px;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  :root[data-theme="light"]{
    --bg:#f7f5f0;
    --surface:#ffffff;
    --surface-2:#f0ede4;
    --surface-3:#e8e3d6;
    --line:#ddd7c8;
    --text:#20222a;
    --text-dim:#5a5c68;
    --text-faint:#8a8c98;
    --accent:#2f63d6;
    --accent-strong:#1f4bb8;
    --accent-soft:rgba(47,99,214,0.10);
    --tab:#a3690f;
    --tab-soft:rgba(163,105,15,0.12);
    --shadow: 0 20px 50px -20px rgba(30,25,10,0.18);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } }

  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition: background .45s ease, color .45s ease;
  }

  /* every panel/card that uses a theme color token gets a soft cross-fade instead of a hard cut */
  body, .index-rail, .drawer, .demo-book, .demo-toolbar, .demo-form, .demo-form input,
  .detail-card, .mode, .recipe, .recipe-head, pre, .stamp, .btn-ghost, .btn-icon,
  .demo-toast, .app-titlebar, footer, .colophon{
    transition: background .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
  }

  /* ---------- theme toggle ---------- */
  .theme-toggle{
    width:38px; height:38px; flex:none;
    border-radius:10px;
    border:1px solid var(--line);
    background:var(--surface-2);
    color:var(--tab);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    margin-top:auto;
    margin-bottom:14px;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
  }
  .theme-toggle:hover{ border-color:var(--tab); transform:translateY(-1px); }
  .theme-toggle svg{ width:18px; height:18px; }
  .theme-toggle .sun-ico{ display:none; }
  :root[data-theme="light"] .theme-toggle .moon-ico{ display:none; }
  :root[data-theme="light"] .theme-toggle .sun-ico{ display:block; }
  @media (max-width: 860px){ .theme-toggle{ margin:0 0 0 auto; } }

  /* view-transition cross fade so a toggle reads as an animated wipe, not a snap */
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.5s; }

  ::selection{ background:var(--accent-soft); color:var(--text); }

  a{ color:var(--accent-strong); }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  h1,h2,h3{
    font-family:var(--serif);
    font-weight:600;
    text-wrap:balance;
    margin:0;
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--tab);
  }

  code, .mono{ font-family:var(--mono); }

  /* ---------- index rail ---------- */
  .index-rail{
    position:fixed;
    top:0; left:0; bottom:0;
    width:64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 0;
    background:var(--surface);
    border-right:1px solid var(--line);
    z-index:50;
  }
  .index-rail .mark{
    width:34px; height:34px;
    border-radius:9px;
    background:linear-gradient(155deg, var(--accent-strong), var(--accent));
    display:flex; align-items:center; justify-content:center;
    margin-bottom:30px;
    flex:none;
  }
  .index-rail .mark svg{ width:18px; height:18px; }
  .rail-tabs{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    width:100%;
    align-items:center;
  }
  .rail-tabs a{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-faint);
    text-decoration:none;
    padding:10px 6px;
    border-radius:0 6px 6px 0;
    border-left:2px solid transparent;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .rail-tabs a:hover, .rail-tabs a.active{
    color:var(--bg);
    background:var(--tab);
    border-left-color:var(--tab);
  }
  .rail-foot{
    font-family:var(--mono);
    font-size:10px;
    color:var(--text-faint);
    writing-mode:vertical-rl;
  }

  @media (max-width: 860px){
    .index-rail{
      position:sticky;
      width:100%; height:auto;
      flex-direction:row;
      top:0;
      padding:10px 14px;
      border-right:none;
      border-bottom:1px solid var(--line);
      overflow-x:auto;
    }
    .index-rail .mark{ margin:0 14px 0 0; }
    .rail-tabs{ flex-direction:row; width:auto; gap:4px; }
    .rail-tabs a{ writing-mode:horizontal-tb; border-left:none; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; white-space:nowrap; }
    .rail-tabs a:hover, .rail-tabs a.active{ border-bottom-color:var(--tab); border-left-color:transparent; }
    .rail-foot{ display:none; }
    main{ margin-left:0 !important; }
  }

  main{ margin-left:64px; }

  /* ---------- hero / cover ---------- */
  .cover{
    padding:96px 0 84px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .cover::before{
    content:"";
    position:absolute;
    inset:-40% -10% auto auto;
    width:640px; height:640px;
    background:radial-gradient(circle at center, rgba(76,134,247,0.16), transparent 70%);
    pointer-events:none;
  }
  .cover-inner{
    position:relative;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:56px;
    align-items:center;
  }
  @media (max-width: 900px){ .cover-inner{ grid-template-columns:1fr; } }

  .imprint{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--text-faint);
    letter-spacing:0.05em;
    margin:0 0 22px;
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  }
  .imprint b{ color:var(--tab); font-weight:500; }
  .imprint .dot{ opacity:.5; }

  .cover h1{
    font-size:clamp(40px, 5.4vw, 68px);
    line-height:1.04;
    letter-spacing:-0.01em;
    color:var(--text);
    animation: coverOpen 900ms cubic-bezier(.2,.8,.2,1) both;
    transform-origin:left center;
  }
  @keyframes coverOpen{
    from{ transform:rotateY(-8deg) translateX(-14px); opacity:0; }
    to{ transform:rotateY(0) translateX(0); opacity:1; }
  }
  .cover h1 em{
    font-style:italic;
    font-weight:500;
    color:var(--accent-strong);
  }

  .cover p.lede{
    font-size:18px;
    color:var(--text-dim);
    max-width:46ch;
    margin:20px 0 32px;
  }

  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--sans); font-weight:600; font-size:15px;
    padding:13px 22px;
    border-radius:10px;
    text-decoration:none;
    border:1px solid transparent;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-primary{
    background:linear-gradient(155deg, var(--accent-strong), var(--accent));
    color:#081022;
    box-shadow:0 14px 30px -12px rgba(76,134,247,0.55);
  }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 18px 36px -12px rgba(76,134,247,0.7); }
  .btn-ghost{
    color:var(--text);
    border-color:var(--line);
    background:var(--surface);
  }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent-strong); }
  .btn svg{ width:16px; height:16px; flex:none; }

  .cover-note{
    margin-top:18px;
    font-size:13px;
    color:var(--text-faint);
    font-family:var(--mono);
  }

  /* ---------- app-mock: a pixel-accurate replica of the real PySide6 window ----------
     Colors and sizes are pulled straight from scripts/styles.py and
     main_window.py, not invented - Segoe UI, the exact button hex codes,
     the exact dark table on a light window. */
  :root{
    --win-bg:#f0f0f0;
    --win-input-bg:#ffffff;
    --win-border:#cccccc;
    --win-text:#1a1a1a;
    --win-table-bg:#2b2b2b;
    --win-table-alt:#323232;
    --win-header-bg:#1f1f1f;
    --win-btn-blue-bg:#1F2A44; --win-btn-blue-border:#2563EB;
    --win-btn-grey-bg:#262b33; --win-btn-grey-border:#374151;
    --win-btn-red-bg:#3A1E1E;  --win-btn-red-border:#EF4444;
    --win-btn-green-bg:#1B3A2A; --win-btn-green-border:#22C55E;
  }
  .app-mock{
    font-family:"Segoe UI", var(--sans);
    background:var(--win-bg);
    border-radius:8px;
    box-shadow:var(--shadow);
    overflow:hidden;
    border:1px solid #00000022;
    max-width:460px;
  }
  .app-titlebar{
    display:flex; align-items:center; gap:8px;
    padding:8px 12px;
    background:#e2e2e2;
    border-bottom:1px solid #00000014;
  }
  .app-titlebar .dot{ width:15px; height:15px; opacity:0; } /* Windows chrome has no colored dots; spacer only */
  .app-titlebar .app-icon{ width:16px; height:16px; border-radius:3px; background:linear-gradient(155deg, var(--accent-strong), var(--accent)); flex:none; }
  .app-titlebar .app-title{ font-size:12.5px; color:#3a3a3a; }
  .app-titlebar .win-controls{ margin-left:auto; display:flex; gap:14px; color:#5a5a5a; font-size:13px; }
  .app-body{ padding:16px; }
  .app-toprow{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .app-toprow .lbl{ font-size:12.5px; color:var(--win-text); white-space:nowrap; }
  .app-search{
    flex:1; height:26px; border-radius:5px;
    border:1.5px solid var(--win-border); background:var(--win-input-bg);
    display:flex; align-items:center; padding:0 9px; font-size:11.5px; color:#8a8a8a; font-weight:600;
  }
  .app-combo{
    height:26px; min-width:104px; border-radius:5px;
    border:1.5px solid var(--win-border); background:var(--win-input-bg);
    display:flex; align-items:center; justify-content:space-between; padding:0 9px;
    font-size:11.5px; color:var(--win-text); font-weight:600;
  }
  .app-newbook{
    width:30px; height:26px; border-radius:8px; flex:none;
    background:var(--win-btn-grey-bg); border:1px solid var(--win-btn-grey-border);
    display:flex; align-items:center; justify-content:center;
  }
  .app-newbook svg{ width:13px; height:13px; }
  .app-table{ background:var(--win-table-bg); border-radius:4px; overflow:hidden; }
  .app-table .thead{
    display:grid; grid-template-columns:26px 1fr 1fr 1fr;
    background:var(--win-header-bg); padding:6px 10px; gap:8px;
  }
  .app-table .thead span{ color:#fff; font-size:10.5px; font-weight:700; }
  .app-table .trow{
    display:grid; grid-template-columns:26px 1fr 1fr 1fr;
    padding:7px 10px; gap:8px; align-items:center;
  }
  .app-table .trow:nth-child(even){ background:var(--win-table-alt); }
  .app-table .trow span{ color:#fff; font-size:11px; }
  .app-table .trow .chk{
    width:13px; height:13px; border:1.5px solid #8a8a8a; border-radius:3px;
  }
  .app-buttons{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
  .app-ibtn{
    width:34px; height:28px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
  }
  .app-ibtn svg{ width:14px; height:14px; }
  .app-ibtn.blue{ background:var(--win-btn-blue-bg); border:1px solid var(--win-btn-blue-border); }
  .app-ibtn.grey{ background:var(--win-btn-grey-bg); border:1px solid var(--win-btn-grey-border); }
  .app-ibtn.red{ background:var(--win-btn-red-bg); border:1px solid var(--win-btn-red-border); }
  .app-ibtn.green{ background:var(--win-btn-green-bg); border:1px solid var(--win-btn-green-border); }

  /* a light-window dialog, matching view_dialog.py exactly */
  .win-dialog{
    font-family:"Segoe UI", var(--sans);
    background:var(--win-bg);
    border-radius:8px;
    box-shadow:var(--shadow);
    overflow:hidden;
    border:1px solid #00000022;
    max-width:340px;
  }
  .win-dialog .app-body{ padding:20px 22px; }
  .win-dialog h5{ margin:0 0 16px; font-size:19px; font-weight:700; color:var(--win-text); }
  .win-dialog .drow{ display:flex; gap:8px; padding:7px 0; font-size:13px; color:var(--win-text); font-weight:600; }
  .win-dialog .drow .k{ color:#4a4a4a; }
  .win-dialog .dclose{
    margin-top:14px; width:100%; height:30px; border-radius:8px;
    background:var(--win-btn-grey-border); color:#fff; font-size:12.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center; border:none;
  }

  /* ---------- generic section ---------- */
  section{ padding:88px 0; border-bottom:1px solid var(--line); }
  .section-head{ max-width:60ch; margin-bottom:48px; }
  .section-head h2{ font-size:clamp(28px,3.4vw,38px); margin-top:10px; }
  .section-head p{ color:var(--text-dim); margin-top:14px; font-size:16px; }

  /* ---------- contents / feature drawers ---------- */
  .drawers{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  @media (max-width: 900px){ .drawers{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width: 620px){ .drawers{ grid-template-columns:1fr; } }

  .drawer{
    position:relative;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:26px 22px 22px;
    transition:transform .18s ease, border-color .18s ease;
  }
  .drawer:hover{ transform:translateY(-3px); border-color:var(--accent); }
  .drawer .tag{
    position:absolute; top:-12px; left:22px;
    width:30px; height:22px;
    background:var(--surface-3);
    border:1px solid var(--line);
    border-bottom:none;
    border-radius:5px 5px 0 0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:12px; color:var(--tab);
  }
  .drawer .icon{
    width:38px; height:38px;
    border-radius:9px;
    background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px;
  }
  .drawer .icon svg{ width:20px; height:20px; stroke:var(--accent-strong); }
  .drawer h3{ font-size:19px; margin-bottom:8px; }
  .drawer p{ margin:0; color:var(--text-dim); font-size:14.5px; }

  /* ---------- side-by-side app mockups ---------- */
  .spread-mocks{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:28px; align-items:start; }
  @media (max-width: 780px){ .spread-mocks{ grid-template-columns:1fr; } }

  .detail-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px;
  }
  .detail-card .initial{
    width:46px; height:46px; border-radius:50%;
    background:linear-gradient(155deg, var(--accent-strong), var(--accent));
    color:#081022; font-family:var(--serif); font-weight:600; font-size:19px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
  }
  .detail-card h4{ font-family:var(--serif); font-size:21px; margin-bottom:14px; }
  .detail-row{ display:flex; gap:10px; font-size:13.5px; padding:6px 0; border-top:1px solid var(--line); }
  .detail-row:first-of-type{ border-top:none; }
  .detail-row .k{ width:78px; color:var(--text-faint); font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding-top:2px; }
  .detail-row .v{ font-family:var(--mono); font-size:13px; }
  figcaption{ font-family:var(--serif); font-style:italic; color:var(--text-faint); font-size:13.5px; margin-top:16px; }

  /* ---------- live demo ---------- */
  .demo-book{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .demo-toolbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px; border-bottom:1px solid var(--line);
    background:var(--surface-2);
  }
  .demo-count{ color:var(--text-faint); font-size:12.5px; }
  .btn-sm{ padding:9px 16px; font-size:13.5px; border-radius:8px; }
  .btn-icon{
    width:32px; height:32px; border-radius:7px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line); background:transparent; cursor:pointer;
    color:var(--text-dim); transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .btn-icon:hover{ border-color:var(--accent); color:var(--accent-strong); background:var(--accent-soft); }
  .btn-icon.danger:hover{ border-color:#e0765a; color:#e0765a; background:rgba(224,118,90,0.12); }
  .btn-icon svg{ width:15px; height:15px; }

  .demo-rows{ list-style:none; margin:0; padding:0; }
  .demo-row{
    display:flex; align-items:center; gap:16px;
    padding:15px 22px; border-bottom:1px solid var(--line);
  }
  .demo-row:last-child{ border-bottom:none; }
  .demo-row .initial{
    width:36px; height:36px; border-radius:50%; flex:none;
    background:var(--surface-3); color:var(--accent-strong);
    font-family:var(--serif); font-weight:600; font-size:15px;
    display:flex; align-items:center; justify-content:center;
  }
  .demo-row .who{ flex:1; min-width:0; }
  .demo-row .who .name{ font-weight:500; font-size:14.5px; }
  .demo-row .who .sub{ font-family:var(--mono); font-size:12px; color:var(--text-faint); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .demo-row .actions{ display:flex; gap:8px; flex:none; }
  .demo-empty{ padding:44px 22px; text-align:center; color:var(--text-faint); font-size:14px; }
  .demo-empty a{ color:var(--accent-strong); cursor:pointer; }

  .demo-form{
    padding:20px 22px; border-bottom:1px solid var(--line);
    background:var(--surface-2);
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
  }
  @media (max-width:620px){ .demo-form{ grid-template-columns:1fr; } }
  .demo-form .field{ display:flex; flex-direction:column; gap:6px; }
  .demo-form .field.full{ grid-column:1 / -1; }
  .demo-form label{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); }
  .demo-form input{
    background:var(--surface); border:1px solid var(--line); border-radius:8px;
    padding:10px 12px; color:var(--text); font-family:var(--sans); font-size:14px;
  }
  .demo-form input:focus{ outline:none; border-color:var(--accent); }
  .demo-form .field.err input{ border-color:#e0765a; }
  .demo-form .errmsg{ font-size:11.5px; color:#e0765a; min-height:14px; }
  .demo-form-actions{ grid-column:1 / -1; display:flex; gap:10px; justify-content:flex-end; }

  .demo-note{ padding:14px 22px; font-size:12.5px; color:var(--text-faint); border-top:1px solid var(--line); }

  .demo-overlay{
    position:fixed; inset:0; background:rgba(6,9,16,0.65);
    display:flex; align-items:center; justify-content:center;
    padding:20px; z-index:100; opacity:0; pointer-events:none;
    transition:opacity .15s ease;
  }
  .demo-overlay.open{ opacity:1; pointer-events:auto; }
  .demo-overlay .detail-card{ width:100%; max-width:340px; position:relative; }
  .demo-overlay .close{
    position:absolute; top:14px; right:14px;
    width:26px; height:26px; border-radius:6px; border:none;
    background:transparent; color:var(--text-faint); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .demo-overlay .close:hover{ color:var(--text); }

  .demo-toast{
    position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(20px);
    background:var(--surface-3); border:1px solid var(--line); color:var(--text);
    padding:12px 18px; border-radius:10px; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:16px; font-size:13.5px;
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    z-index:100;
  }
  .demo-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
  .demo-toast button{
    background:none; border:none; color:var(--accent-strong); font-weight:600;
    font-family:var(--sans); font-size:13.5px; cursor:pointer; padding:0;
  }

  /* ---------- calling ---------- */
  .call-modes{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width:780px){ .call-modes{ grid-template-columns:1fr; } }
  .mode{
    border:1px solid var(--line); border-radius:12px; padding:24px;
    background:var(--surface);
  }
  .mode .eyebrow{ margin-bottom:10px; display:block; }
  .mode h3{ font-size:19px; margin-bottom:10px; }
  .mode p{ color:var(--text-dim); font-size:14.5px; margin:0; }

  /* ---------- privacy stamp ---------- */
  .privacy{
    display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center;
  }
  @media (max-width:780px){ .privacy{ grid-template-columns:1fr; justify-items:center; text-align:center; } }
  .stamp{
    width:168px; height:168px; flex:none;
    border:3px solid var(--tab);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transform:rotate(-11deg);
    position:relative;
  }
  .stamp::before{
    content:"";
    position:absolute; inset:9px;
    border:1px solid var(--tab);
    border-radius:50%;
  }
  .stamp-text{
    font-family:var(--mono); font-size:12px; letter-spacing:.12em;
    color:var(--tab); text-align:center; text-transform:uppercase; line-height:1.5;
  }
  .stamp-text b{ font-size:16px; display:block; letter-spacing:.06em; }
  .privacy-copy h2{ font-size:clamp(26px,3vw,34px); margin-bottom:16px; }
  .privacy-copy p{ color:var(--text-dim); max-width:56ch; }
  .privacy-copy p + p{ margin-top:12px; }

  /* ---------- install recipes ---------- */
  .recipes{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:780px){ .recipes{ grid-template-columns:1fr; } }
  .recipe{
    border:1px solid var(--line); border-radius:12px; overflow:hidden;
    background:var(--surface);
  }
  .recipe-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--line);
  }
  .recipe-head h3{ font-size:17px; }
  .badge{
    font-family:var(--mono); font-size:11px; letter-spacing:.05em;
    background:var(--tab-soft); color:var(--tab);
    padding:4px 9px; border-radius:5px; text-transform:uppercase;
  }
  pre{
    margin:0; padding:20px; overflow-x:auto;
    font-family:var(--mono); font-size:13px; color:var(--text);
    background:var(--surface-2);
  }
  pre .c{ color:var(--text-faint); }
  .recipe p.note{ padding:14px 20px 20px; margin:0; font-size:13.5px; color:var(--text-dim); }

  /* ---------- colophon ---------- */
  footer{ padding:56px 0 72px; }
  .colophon{
    display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
    padding-top:28px; border-top:1px solid var(--line);
  }
  .colophon .block{ font-size:13px; color:var(--text-faint); max-width:34ch; }
  .colophon .block b{ color:var(--text-dim); font-weight:500; }
  .colophon a{ color:var(--text-dim); text-decoration:none; }
  .colophon a:hover{ color:var(--accent-strong); }
  .icon-link{ display:inline-flex; align-items:center; gap:5px; }
  .credit-icon{ width:14px; height:14px; flex:none; border-radius:3px; }
  svg.credit-icon{ border-radius:0; }
  footer .top-line{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  footer .top-line h3{ font-size:22px; }
  footer .top-line span{ font-family:var(--mono); font-size:12px; color:var(--text-faint); }