*, *::before, *::after
        {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }

        /* ══════════════════════════════════════════════
           PALETTE — lifted from calchemy.org (warm dark
           theme: near-black warm background, cream text,
           subtle warm-grey borders) instead of SoundwaveFocus's
           previous cool blue-black theme.
        ══════════════════════════════════════════════ */
        :root
        {
            --bg:          #141413;
            --surface:     #1e1d1b;
            --surface2:    #262421;
            --border:      #55504a;
            --border-vis:  #55504a;
            --text:        #f0efe9;
            --muted:       #aaa69c;
            --muted-dim:   #6b6862;
            --accent:      #fb923c;

            --white-col:   #cfe6f7;
            --white-bg:    rgba(207,230,247,0.14);
            --pink-col:    #f472b6;
            --pink-bg:     rgba(244,114,182,0.14);
            --brown-col:   #fb923c;
            --brown-bg:    rgba(251,146,60,0.14);
            --grey-col:    #b7b3aa;
            --grey-bg:     rgba(183,179,170,0.14);
            --blue-col:    #93b4ff;
            --blue-bg:     rgba(147,180,255,0.14);
            --green-col:   #5fcf85;
            --green-bg:    rgba(95,207,133,0.14);
            --violet-col:  #c4b5fd;
            --violet-bg:   rgba(196,181,253,0.14);

            --safe-top:    env(safe-area-inset-top,    0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left:   env(safe-area-inset-left,   0px);
            --safe-right:  env(safe-area-inset-right,  0px);
            --thumb-size:  26px;
        }

        /* ══════════════════════════════════════════════
           LIGHT THEME — same variable names as :root above,
           so every existing rule adapts automatically. The
           7 noise-type colours are re-tuned (darker/more
           saturated) since the originals were chosen for
           contrast against a near-black background and would
           wash out against white.
        ══════════════════════════════════════════════ */
        html[data-theme="light"]
        {
            --bg:          #f7f5f0;
            --surface:     #ffffff;
            --surface2:    #efece4;
            --border:      #c7c0b3;
            --border-vis:  #c7c0b3;
            --text:        #1f1d1a;
            --muted:       #6f6a61;
            --muted-dim:   #a29b8d;
            --accent:      #c65b0a;

            --white-col:   #4f7ea8;
            --white-bg:    rgba(79,126,168,0.12);
            --pink-col:    #c2226f;
            --pink-bg:     rgba(194,34,111,0.1);
            --brown-col:   #b5651d;
            --brown-bg:    rgba(181,101,29,0.12);
            --grey-col:    #5c5850;
            --grey-bg:     rgba(92,88,80,0.1);
            --blue-col:    #1c6fd1;
            --blue-bg:     rgba(28,111,209,0.1);
            --green-col:   #1f8a4c;
            --green-bg:    rgba(31,138,76,0.1);
            --violet-col:  #7c3aed;
            --violet-bg:   rgba(124,58,237,0.1);
        }

        /* ══════════════════════════════════════════════
           COLOUR-BLIND-SAFE PALETTE — Okabe-Ito palette,
           chosen to stay distinguishable under protanopia,
           deuteranopia and tritanopia. Only overrides the 7
           noise-type colours; works on top of either theme
           since it's independent of --bg/--surface/--text.
        ══════════════════════════════════════════════ */
        html[data-cvd="true"]
        {
            --white-col:   #56b4e9;
            --white-bg:    rgba(86,180,233,0.14);
            --pink-col:    #cc79a7;
            --pink-bg:     rgba(204,121,167,0.14);
            --brown-col:   #d55e00;
            --brown-bg:    rgba(213,94,0,0.14);
            --grey-col:    #949494;
            --grey-bg:     rgba(148,148,148,0.14);
            --blue-col:    #0072b2;
            --blue-bg:     rgba(0,114,178,0.14);
            --green-col:   #009e73;
            --green-bg:    rgba(0,158,115,0.14);
            --violet-col:  #e69f00;
            --violet-bg:   rgba(230,159,0,0.14);
        }

        html { height: -webkit-fill-available; }

        html, body
        {
            height: 100%;
            overscroll-behavior: none;
            -webkit-overflow-scrolling: touch;
        }

        body
        {
            background: var(--bg);
            color: var(--text);
            /* Fix: calchemy uses a single Inter stack throughout, no
               secondary display font — carried over here from the POC */
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            display: flex;
            flex-direction: column;
            min-height: 100%;
            min-height: 100dvh;
            transition: background 0.3s ease, color 0.3s ease;
            padding-top:    var(--safe-top);
            padding-bottom: var(--safe-bottom);
            padding-left:   var(--safe-left);
            padding-right:  var(--safe-right);
            overflow-x: hidden;
        }

        .app
        {
            flex: 1;
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 560px;
            margin: 0 auto;
            padding: 1.25rem 1rem 1rem;
            gap: 0.85rem;
        }

        /* ══════════════════════════
           LAYOUT (main content + controls sidebar)
           Below 1024px this is just a plain stacked column — .layout,
           .main and .sidebar add no visual change, so mobile/tablet is
           untouched. At 1024px+ the sidebar (Sound Controls + Auto-stop
           timer) becomes a sticky left-hand panel, calchemy.org-style,
           via flex `order` — no DOM reordering needed, so this same
           markup serves both layouts.
        ══════════════════════════ */
        .layout { display: flex; flex-direction: column; gap: 0.85rem; }
        .main   { display: flex; flex-direction: column; gap: 0.85rem; }
        .sidebar { display: flex; flex-direction: column; gap: 0.85rem; }

        /* ══════════════════════════
           HEADER
        ══════════════════════════ */
        .app-header { display: flex; align-items: center; justify-content: space-between; }

        .header-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

        .icon-toggle-btn
        {
            position: relative;
            width: 34px; height: 34px; border-radius: 50%;
            border: 1px solid var(--border); background: var(--surface);
            color: var(--muted); display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: border-color 0.25s, color 0.25s, background 0.25s;
            -webkit-appearance: none; appearance: none; flex-shrink: 0; padding: 0;
        }
        .icon-toggle-btn svg { width: 17px; height: 17px; pointer-events: none; }
        .icon-toggle-btn:hover { color: var(--text); border-color: var(--muted-dim); }
        .icon-toggle-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: rgba(251,146,60,0.1); }

        /* Fix: hover/focus tooltip explaining each header toggle, styled to
           match the palette instead of the browser's default title tooltip */
        .icon-toggle-btn::after
        {
            content: attr(data-tooltip);
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--surface2);
            color: var(--text);
            border: 1px solid var(--border);
            padding: 0.35rem 0.6rem;
            border-radius: 6px;
            font-size: 0.68rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease;
            z-index: 10;
        }
        .icon-toggle-btn:hover::after, .icon-toggle-btn:focus-visible::after { opacity: 1; }

        .app-title
        {
            font-weight: 800;
            font-size: clamp(1.25rem, 4vw, 1.75rem);
            letter-spacing: -0.02em;
            color: var(--text);
        }

        .app-title span { color: var(--muted); font-weight: 400; }
        .app-title a { color: inherit; text-decoration: none; }
        .app-title a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

        .app-subtitle
        {
            font-size: 0.68rem;
            font-weight: 500;
            color: var(--muted);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-top: 0.15rem;
        }

        .card-tagline, .toggle-pill { display: none; }
        .noise-card { cursor: pointer; }

        /* ══════════════════════════
           VISUALISER
        ══════════════════════════ */
        #visualiser
        {
            width: 100%;
            height: 60px;
            border-radius: 12px;
            background: var(--surface);
            display: block;
            border: 1px solid var(--border);
            flex-shrink: 0;
        }

        /* ══════════════════════════
           NOISE CARDS — calchemy-style: flat warm surface,
           subtle neutral border, colour lives in a small icon
           badge (like calchemy's .card-icon) rather than a
           full-card colour wash.
        ══════════════════════════ */
        .noise-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }

        .noise-cards > .noise-card:first-child { grid-column: 1 / -1; }

        .noise-card
        {
            position: relative;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0.9rem 1rem;
            transition: border-color 0.3s, background 0.3s;
        }

        .noise-card.active { border-color: var(--col); background: var(--surface2); }

        .featured-pill
        {
            position: absolute;
            top: -10px;
            left: 1rem;
            background: var(--accent);
            color: #1a1200;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            border-radius: 2rem;
            padding: 0.22rem 0.6rem;
        }

        .card-top { display: flex; align-items: center; gap: 0.7rem; }

        /* calchemy-style icon badge: 32x32, radius 8, tinted bg + coloured glyph */
        .card-badge
        {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--bg-tint);
            color: var(--col);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        .toggle-pill
        {
            width: 48px; height: 28px; border-radius: 14px;
            background: var(--border); border: none; cursor: pointer;
            position: relative; flex-shrink: 0; transition: background 0.3s;
            padding: 0; -webkit-appearance: none; appearance: none;
        }
        .toggle-pill::after
        {
            content: ''; position: absolute; width: 22px; height: 22px;
            border-radius: 50%; background: var(--muted-dim); top: 3px; left: 3px;
            transition: transform 0.3s, background 0.3s;
        }
        .noise-card.active .toggle-pill { background: var(--bg-tint); }
        .noise-card.active .toggle-pill::after { transform: translateX(20px); background: var(--col); }

        .card-label { flex: 1; min-width: 0; }
        .card-name { font-size: clamp(0.82rem, 2.5vw, 0.95rem); font-weight: 700; color: var(--text); }
        .card-tagline { font-size: clamp(0.6rem, 1.8vw, 0.68rem); color: var(--muted); margin-top: 0.06rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .info-btn
        {
            width: 36px; height: 36px; border-radius: 50%;
            border: 1px solid var(--border); background: none; color: var(--muted);
            cursor: pointer; font-size: 0.8rem; font-weight: 600;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; transition: border-color 0.3s, color 0.3s;
            -webkit-appearance: none; appearance: none;
        }
        .noise-card.active .info-btn { border-color: var(--col); color: var(--col); }

        .card-volume
        {
            display: flex; align-items: center; gap: 0.6rem; overflow: hidden;
            max-height: 0; opacity: 0; margin-top: 0; padding-top: 0;
            border-top: 1px solid transparent;
            transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease, padding-top 0.35s ease, border-top-color 0.35s ease;
        }
        .noise-card.active .card-volume { max-height: 56px; opacity: 1; margin-top: 0.8rem; padding-top: 0.7rem; border-top-color: var(--border); }

        .vol-icon { font-size: 0.85rem; color: var(--muted); flex-shrink: 0; }

        /* ══════════════════════════
           RANGE SLIDERS
        ══════════════════════════ */
        .slider-wrap { flex: 1; position: relative; height: var(--thumb-size); display: flex; align-items: center; }

        input[type="range"]
        {
            -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
            background: var(--border); border-radius: 2px; outline: none; cursor: pointer;
            border: none; padding: 0;
        }
        input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--border); }
        input[type="range"]::-webkit-slider-thumb
        {
            -webkit-appearance: none; appearance: none; width: var(--thumb-size); height: var(--thumb-size);
            border-radius: 50%; background: var(--text); box-shadow: 0 1px 6px rgba(0,0,0,0.5);
            margin-top: calc((var(--thumb-size) / -2) + 2px); cursor: pointer;
        }
        input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border); border: none; }
        input[type="range"]::-moz-range-thumb
        {
            width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%; border: none;
            background: var(--text); box-shadow: 0 1px 6px rgba(0,0,0,0.5); cursor: pointer;
        }
        input[type="range"]::-ms-track { height: 4px; border-color: transparent; background: transparent; color: transparent; }
        input[type="range"]::-ms-fill-lower { background: var(--border); border-radius: 2px; }
        input[type="range"]::-ms-fill-upper { background: var(--border); border-radius: 2px; }
        input[type="range"]::-ms-thumb { width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%; border: none; background: var(--text); }

        .vol-slider { --pct: 0%; }
        .vol-slider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--col) var(--pct), var(--border) var(--pct)); }
        .vol-slider::-webkit-slider-thumb { background: var(--col); }
        .vol-slider::-moz-range-track { background: linear-gradient(to right, var(--col) var(--pct), var(--border) var(--pct)); }
        .vol-slider::-moz-range-thumb { background: var(--col); }
        .vol-slider::-ms-fill-lower { background: var(--col); }

        .vol-pct { font-size: 0.7rem; color: var(--muted); min-width: 2.4rem; text-align: right; flex-shrink: 0; }

        /* ══════════════════════════
           PLAY BUTTON
        ══════════════════════════ */
        .play-row { display: flex; align-items: center; justify-content: center; padding: 0.1rem 0; }

        #play-btn
        {
            width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--border);
            background: var(--surface); cursor: pointer; display: flex; align-items: center;
            justify-content: center; color: var(--text); transition: border-color 0.35s, box-shadow 0.35s, transform 0.12s;
            flex-shrink: 0; -webkit-appearance: none; appearance: none; -webkit-user-select: none; user-select: none;
        }
        #play-btn:active { transform: scale(0.91); }
        #play-btn svg { width: 28px; height: 28px; fill: currentColor; pointer-events: none; }
        #play-btn.playing { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 24px rgba(251,146,60,0.18); }

        /* ══════════════════════════
           SECTION CARDS
        ══════════════════════════ */
        .section-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
        .section-title { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

        /* ══════════════════════════
           CONTROL ROWS
           Fix: back to a single inline row per slider (label, Slow/Fast
           flanking the slider, value at the end) — the earlier "stacked"
           3-line version wasn't wanted after all. The real fix for the
           squashed/overlapping thumb was that .ctrl-label previously used
           a vw-based width (`clamp(52px, 18vw, 86px)`), which sized itself
           off the full viewport width even inside the narrow sidebar —
           at a 1024px+ viewport that's up to ~184px eaten by the label
           alone, leaving almost nothing for the slider. Fixed px widths
           below, plus a wider sidebar (see 1024px breakpoint), fix that
           properly instead.
        ══════════════════════════ */
        .ctrl-grid { display: flex; flex-direction: column; gap: 1rem; }
        .ctrl-row { display: flex; align-items: center; gap: 0.6rem; }
        .ctrl-label { font-size: 0.75rem; font-weight: 500; color: var(--text); width: 62px; flex-shrink: 0; }
        .ctrl-ends { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
        .ctrl-end-label { font-size: 0.62rem; color: var(--muted-dim); white-space: nowrap; flex-shrink: 0; }
        .ctrl-val { font-size: 0.72rem; color: var(--muted); min-width: 3.4rem; text-align: right; flex-shrink: 0; white-space: nowrap; }

        .ctrl-toggle-row { display: flex; flex-direction: column; gap: 0.55rem; }
        .segment-btns { display: flex; gap: 0.4rem; width: 100%; }
        .seg-btn
        {
            flex: 1; padding: 0.5rem 0; border-radius: 8px; border: 1px solid var(--border);
            background: var(--surface2); color: var(--muted); font-size: 0.75rem;
            cursor: pointer; transition: border-color 0.25s, color 0.25s, background 0.25s;
            min-height: 40px; -webkit-appearance: none; appearance: none;
        }
        .seg-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(251,146,60,0.1); }

        /* ══════════════════════════
           TIMER
        ══════════════════════════ */
        .timer-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
        .timer-btn
        {
            background: var(--surface2); border: 1px solid var(--border); border-radius: 2rem;
            padding: 0.38rem 0.75rem; font-size: clamp(0.7rem, 2vw, 0.78rem); color: var(--muted);
            cursor: pointer; transition: border-color 0.3s, color 0.3s; min-height: 38px;
            display: flex; align-items: center; -webkit-appearance: none; appearance: none;
        }
        .timer-btn.active { border-color: var(--accent); color: var(--accent); }
        #timer-display { font-size: 0.78rem; color: var(--text); min-height: 1em; }

        /* ══════════════════════════
           NO-ACTIVE HINT
        ══════════════════════════ */
        #no-active-msg { font-size: 0.75rem; color: var(--muted); text-align: center; opacity: 0; transition: opacity 0.3s; min-height: 1em; }
        #no-active-msg.visible { opacity: 1; }

        /* ══════════════════════════
           FOOTER
        ══════════════════════════ */
        .app-footer { text-align: center; font-size: 0.6rem; color: var(--muted-dim); letter-spacing: 0.04em; padding-bottom: 0.25rem; }

        /* ══════════════════════════
           INFO MODAL
        ══════════════════════════ */
        .modal-backdrop
        {
            position: fixed; inset: 0; background: rgba(10,10,9,0.82); display: flex;
            align-items: flex-end; justify-content: center; z-index: 100; opacity: 0;
            pointer-events: none; transition: opacity 0.3s;
            padding-left: var(--safe-left); padding-right: var(--safe-right);
        }
        .modal-backdrop.open { opacity: 1; pointer-events: all; }
        .modal-sheet
        {
            background: var(--surface); border-radius: 20px 20px 0 0; border: 1px solid var(--border);
            border-bottom: none; padding: 1.25rem 1.25rem calc(1.5rem + var(--safe-bottom));
            width: 100%; max-width: 560px; transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); max-height: 88vh;
            overflow-y: auto; -webkit-overflow-scrolling: touch;
        }
        .modal-backdrop.open .modal-sheet { transform: translateY(0); }
        .modal-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 1.1rem; }
        .modal-dot { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 0.75rem; background: var(--bg-tint); border: 1px solid var(--col); }
        .modal-title { font-size: clamp(1.1rem, 4vw, 1.3rem); font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
        .modal-subtitle { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1rem; }
        .modal-body p { font-size: clamp(0.82rem, 2.5vw, 0.9rem); line-height: 1.7; color: var(--text); margin-bottom: 0.8rem; }
        .modal-body .modal-tagline { font-weight: 600; color: var(--col); }
        .modal-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }
        .modal-tag { border-radius: 2rem; padding: 0.26rem 0.65rem; font-size: 0.7rem; border: 1px solid; }
        .modal-sheet .modal-tag { border-color: var(--col); color: var(--col); }
        .modal-close
        {
            width: 100%; margin-top: 1.1rem; padding: 0.85rem; border-radius: 10px;
            background: var(--surface2); border: 1px solid var(--border); color: var(--text);
            font-size: 0.9rem; cursor: pointer; transition: background 0.2s;
            -webkit-appearance: none; appearance: none; min-height: 44px;
        }
        .modal-close:active { background: var(--border); }

        @media (min-width: 600px)
        {
            .app { padding: 1.75rem 1.5rem 1.25rem; gap: 1rem; }
            #visualiser { height: 72px; }
        }

        @media (min-width: 768px)
        {
            body { align-items: center; }
            .app { max-width: 560px; padding: 2rem 1.5rem 1.5rem; gap: 1.1rem; }
            .noise-cards { gap: 0.75rem; }
            .noise-card { padding: 1rem; }
            .card-volume { flex-direction: column; align-items: stretch; }
            .vol-icon { display: none; }
            .modal-backdrop { align-items: center; }
            .modal-sheet { border-radius: 20px; border: 1px solid var(--border); max-width: 440px; margin: 1rem; padding-bottom: 1.5rem; }
        }

        @media (min-width: 1024px)
        {
            /* Fix: 26px thumbs are sized for touch (mobile/tablet); on a
               desktop-width layout with mouse precision they read as
               oversized "blobs". Shrink for this breakpoint only. */
            .app { max-width: 940px; --thumb-size: 18px; }

            .layout { flex-direction: row; align-items: flex-start; gap: 2rem; }

            .main { flex: 1; max-width: 560px; }

            .sidebar
            {
                order: -1;
                width: 320px;
                flex-shrink: 0;
                position: sticky;
                top: 2rem;
                background: var(--surface2);
                border: 1px solid var(--border);
                border-radius: 16px;
                padding: 1.25rem;
                gap: 1.25rem;
            }

            /* Fix: the two Sound Controls / Timer cards merge into one
               continuous panel inside the sidebar (calchemy.org's left
               nav reads as a single grouped panel, not stacked separate
               cards) — divided by an internal rule instead of borders */
            .sidebar .section-card { background: none; border: none; padding: 0; border-radius: 0; }
            .sidebar .section-card + .section-card { padding-top: 1.25rem; border-top: 1px solid var(--border); }
        }

        @media (max-height: 500px) and (orientation: landscape)
        {
            .app { gap: 0.5rem; padding: 0.75rem 1rem; }
            #visualiser { height: 44px; }
            .app-subtitle { display: none; }
            .noise-card { padding: 0.6rem 0.75rem; }
            .play-row { padding: 0; }
            #play-btn { width: 58px; height: 58px; }
            .section-card { padding: 0.6rem 0.75rem; gap: 0.5rem; }
            .ctrl-grid { gap: 0.4rem; }
        }
    
/* ══════════════════════════════════════════════
   MULTI-PAGE ADDITIONS (v3 restructure) — shared
   across the hub homepage and every noise-type page.
══════════════════════════════════════════════ */
.back-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--muted); text-decoration: none; margin-bottom: 0.4rem; }
.back-link:hover { color: var(--text); }

.hero { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; padding: 0.5rem 0 0.25rem; }
.hero h1 { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 700; color: var(--text); line-height: 1.2; }
.hero .hero-lede { font-size: clamp(0.85rem, 2.6vw, 0.95rem); color: var(--muted); max-width: 640px; margin: 0 auto; line-height: 1.6; }

.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.panel-link
{
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.1s ease;
}
.panel-link:hover { border-color: var(--muted-dim); }
.panel-link:active { transform: scale(0.98); }

.panel-link .panel-band
{
    background: var(--bg-tint, transparent);
    color: var(--col);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
}

.panel-link .panel-body { position: relative; overflow: hidden; padding: 0.65rem 0.85rem 0.8rem; }

.panel-link .panel-ghost
{
    position: absolute;
    right: 0.55rem;
    top: 0.35rem;
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--col);
    opacity: 0.08;
    pointer-events: none;
}

.panel-link .panel-name { position: relative; font-size: 0.9rem; font-weight: 700; color: var(--text); }
.panel-link .panel-tagline { position: relative; font-size: 0.68rem; color: var(--muted); line-height: 1.4; margin-top: 0.15rem; }

.panel-link .panel-wave { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 10px; margin-top: 0.55rem; }
.panel-link .panel-wave span { width: 3px; border-radius: 1px; background: var(--col); display: block; }

.article-content { display: flex; flex-direction: column; gap: 0.9rem; }
.article-content h2 { font-size: 1rem; font-weight: 700; color: var(--text); margin-top: 0.4rem; }
.article-content p { font-size: 0.85rem; line-height: 1.7; color: var(--muted); }
.article-content .article-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
.article-content .article-tag { border-radius: 2rem; padding: 0.26rem 0.65rem; font-size: 0.7rem; border: 1px solid var(--border); color: var(--muted); }

/* Guide pages (v3.2.0) — lists, sub-headings, settings card and note box
   used by /for-sleep/, /for-focus/ and /for-adhd/. */
.article-content h3 { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-top: 0.2rem; }
.article-content ul, .article-content ol { display: flex; flex-direction: column; gap: 0.45rem; padding-left: 1.15rem; }
.article-content li { font-size: 0.85rem; line-height: 1.65; color: var(--muted); }
.article-content strong { color: var(--text); font-weight: 600; }
.article-content a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.article-content a:hover { color: var(--accent); }

.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.6rem; }
.settings-card .settings-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.82rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.settings-card .settings-row:last-child { border-bottom: none; padding-bottom: 0; }
.settings-card .settings-name { color: var(--text); font-weight: 600; flex-shrink: 0; }
.settings-card .settings-val { color: var(--muted); text-align: right; }

.article-note { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 0.75rem 0.95rem; font-size: 0.78rem; line-height: 1.6; color: var(--muted); background: var(--surface); }

.site-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; font-size: 0.7rem; margin-bottom: 0.5rem; }
.site-footer-nav a { color: var(--muted); text-decoration: none; }
.site-footer-nav a:hover { color: var(--text); }

@media (min-width: 600px)
{
    .panel-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px)
{
    .panel-grid { grid-template-columns: repeat(4, 1fr); }
    .hero h1 { font-size: 2.2rem; }
}