/* (unchanged styles trimmed in this paste for brevity - same as your original) */
    /* ---------- Theme variables ---------- */
    :root{
      --bg: #060606;
      --card-bg: rgba(6,6,8,0.96);
      --overlay: rgba(11,11,11,0.55);
      --text: #e9eef6;
      --muted: #bfc3c7;
      --accent: #2dd4bf;
      --radius: 14px;
      --maxw: 920px;
      --gap: 1.125rem;
      --card-pad: 1.0rem;
      --shadow: 0 10px 30px rgba(0,0,0,0.45);
      --transition: 250ms ease;
      --btn-bg: rgba(255,255,255,0.03);
      --btn-border: rgba(255,255,255,0.06);
      --btn-hover: rgba(255,255,255,0.06);
      color-scheme: dark;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      box-sizing: border-box;
    }

    html[data-theme="light"],
    body.light {
      --bg: #f6f7fb;
      --card-bg: rgba(255,255,255,0.98);
      --overlay: rgba(255,255,255,0.72);
      --text: #0b1220;
      --muted: #47515a;
      --accent: #0b73ff;
      --btn-bg: rgba(0,0,0,0.03);
      --btn-border: rgba(0,0,0,0.06);
      --btn-hover: rgba(0,0,0,0.06);
      color-scheme: light;
    }

    *,*::before,*::after{box-sizing:inherit}
    html,body{height:100%;margin:0}
    body{
      min-height:100vh;
      background-color:var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.6;
      padding:2.25rem 1rem;
      transition: background-color var(--transition), color var(--transition);
    }

    .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
    .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 0.75rem; background: var(--card-bg); color: var(--text); border-radius: 8px; z-index: 1200; text-decoration: none; border: 1px solid rgba(255,255,255,0.06); }

    .bg-media-wrapper { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; overflow: hidden; display:block; }
    .bg-media-wrapper img { width: 100%; height: 100%; object-fit: cover; display:block; transform-origin: center; filter: saturate(.95) contrast(.98); opacity: 0; transition: opacity 300ms ease; }
    .bg-media-wrapper img[data-loaded="true"] { opacity: 1; }
    .bg-overlay { position: fixed; inset:0; z-index:-1; pointer-events:none; background:var(--overlay); transition: background-color var(--transition); }

    .page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2.25rem 1rem; }
    .container { width:100%; max-width:var(--maxw); background: var(--card-bg); border-radius:var(--radius); padding: var(--card-pad); box-shadow: var(--shadow); backdrop-filter: blur(6px) saturate(1.03); border: 1px solid rgba(255,255,255,0.04); transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); max-height: calc(100vh - 4rem); overflow:auto; }
    .container:focus-within { box-shadow: 0 14px 40px rgba(0,0,0,0.55); transform: translateY(-2px); }

    header { display:flex; align-items:center; justify-content:space-between; gap:var(--gap); margin-bottom:0.6rem; }
    .head-left { display:flex; flex-direction:column; gap:0.25rem; min-width:0; }
    h1 { margin:0; font-size:1.28rem; line-height:1.1; word-break:break-word; }
    .meta { color:var(--muted); font-size:0.92rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    .controls { display:flex; gap:0.45rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .controls > * { min-width:0; }
    .theme-toggle { order: 1; }
    .home-link   { order: 2; }
    .controls > *:not(.theme-toggle):not(.home-link) { order: 3; }

    .home-link, .theme-toggle { display:inline-flex; align-items:center; gap:0.45rem; padding:0.32rem 0.56rem; border-radius:9px; text-decoration:none; border:1px solid var(--btn-border); color:var(--text); background: var(--btn-bg); cursor:pointer; font-size:0.92rem; transition: background-color 180ms ease, transform 120ms ease, border-color var(--transition); }
    .home-link svg, .theme-toggle svg{ width:1rem; height:1rem; display:block; flex-shrink:0; }
    .home-link:hover, .theme-toggle:hover, .home-link:focus, .theme-toggle:focus { background: var(--btn-hover); transform: translateY(-1px); }
    .home-link:active, .theme-toggle:active { transform: translateY(0); }
    .theme-toggle .label { display:inline-block; }
    .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

    main { color:var(--text); font-size:1rem; max-width:74ch; margin:0 auto; padding-top:0.2rem; }
    h2 { margin-top:1.05rem; margin-bottom:0.35rem; font-size:1.02rem; }
    p { margin:0.45rem 0; color:var(--text); }
    ul { margin:0.45rem 0 0.6rem 1.1rem; }
    a { color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; }
    footer { margin-top:0.9rem; color:var(--muted); font-size:0.88rem; text-align:center; display:block; }
    .attribution { display:block; margin-top:6px; color:var(--muted); font-size:0.82rem; }

    :focus-visible { outline: 3px solid rgba(45,212,191,0.95); outline-offset: 3px; border-radius:6px; }

    @media (max-width: 520px) {
      header { align-items:flex-start; gap:0.5rem; }
      .head-left { width:100%; }
      .controls { width:100%; justify-content:flex-end; margin-top:0.15rem; gap:0.35rem; }
      .theme-toggle .label { display:none; }
      .home-link .label { display:none; }
      .meta { white-space:normal; display:block; overflow:visible; }
    }

    @media (max-width:420px) {
      .container { padding:0.8rem; max-height: calc(100vh - 2.5rem); }
      h1 { font-size:1.05rem; }
    }

    @media (max-width:380px) {
      .theme-toggle, .home-link { padding: 0.22rem 0.36rem; font-size:0.88rem; }
    }

    @media print {
      body { background:#fff; color:#000 }
      .container { box-shadow:none; border-radius:0; background:transparent; border:none; max-height:none; overflow:visible; }
      .theme-toggle, .skip-link, .bg-media-wrapper, .bg-overlay { display:none }
    }

    @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

    .container::-webkit-scrollbar { width: 10px; height:10px; }
    .container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
    body.light .container::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); }