:root{
    --hud-bg: rgba(0,0,0,0.35);
    --hud-fg: rgba(255,255,255,0.85);
    --btn-bg: rgba(255,255,255,0.10);
    --btn-bg-hover: rgba(255,255,255,0.18);
    --btn-border: rgba(255,255,255,0.20);

    --panel-bg: rgba(10, 10, 16, 0.72);
    --panel-border: rgba(255,255,255,0.12);
    --panel-text: rgba(255,255,255,0.86);
    --panel-muted: rgba(255,255,255,0.62);

    /* Blog / editorial fonts (loaded in index.html) */
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    --font-serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", Times, serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --ink: rgba(255,255,255,0.92);
    --ink-muted: rgba(255,255,255,0.72);
    --ink-faint: rgba(255,255,255,0.55);

    /* “gravity” gradient: heavier at top */
    --card-top: rgba(18, 18, 26, 0.92);
    --card-mid: rgba(12, 12, 18, 0.84);
    --card-bot: rgba(10, 10, 16, 0.78);
}

body{
    margin:0;
    background:#000;
    overflow:hidden;
    touch-action:none;
}

/* Stage: JS sets width/height to match active variant aspect */
#stage{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

/* Image layers */
.layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform-origin:50% 50%;
    will-change:transform, opacity;
    user-select:none;
    -webkit-user-drag:none;
    image-rendering:auto;
    object-fit:contain;
    background:#000; /* prevents “transparent” flash */
}

/* =========================
   Reticle overlay (center marker)
   ========================= */
#reticle{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    pointer-events:none;
    opacity:0;
    transform:scale(0.985);
    transition: opacity 280ms ease, transform 280ms ease;
    z-index:5; /* above images */
}
#reticle.visible{
    opacity:1;
    transform:scale(1);
}
#reticle .reticle-ring{
    width:56px;
    height:56px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.55);
    box-shadow:0 0 0 1px rgba(0,0,0,0.35);
}
#reticle .reticle-dot{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,0.75);
    box-shadow:0 0 0 2px rgba(0,0,0,0.35);
}
#reticle .reticle-line{
    position:absolute;
    background:rgba(255,255,255,0.65);
    box-shadow:0 0 0 1px rgba(0,0,0,0.25);
}
#reticle .reticle-h{
    height:1px;
    width:min(44%, 260px);
}
#reticle .reticle-v{
    width:1px;
    height:min(44%, 260px);
}
@media (max-width:420px){
    #reticle .reticle-ring{ width:46px; height:46px; }
    #reticle .reticle-h{ width:min(52%, 220px); }
    #reticle .reticle-v{ height:min(52%, 220px); }
}

/* HUD */
#hud{
    position:fixed;
    left:0;
    right:0;
    bottom:18px;
    display:flex;
    justify-content:center;
    pointer-events:none;
    font-family: var(--font-mono);
    color:var(--hud-fg);
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-size:14px;
    z-index:20;
}
/* HUD progress bar (subtle, bar only) */
#hud .pill{
    padding:10px 12px;
}

.hud-progress{
    width: min(260px, 52vw);
    height: 6px;
    border-radius: 999px;
    overflow: hidden;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}

.hud-progress-fill{
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: rgba(255,255,255,0.45);
    transition: width 120ms linear;
}

@media (prefers-reduced-motion: reduce){
    .hud-progress-fill{ transition:none; }
}

/* Top menu */
#topbar{
    position:fixed;
    top:16px;
    left:16px;
    right:16px;
    z-index:45;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
}
#location-menu{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--btn-border);
    background:rgba(0,0,0,0.35);
    color:rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    font-family: var(--font-mono);
    letter-spacing:1.2px;
    text-transform:uppercase;
    font-size:12px;
    user-select:none;
}
.loc-item{
    border:1px solid transparent;
    padding:8px 10px;
    border-radius:999px;
    cursor:pointer;
    background:transparent;
    color:rgba(255,255,255,0.82);
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.loc-item:hover{ background:rgba(255,255,255,0.10); }
.loc-item:active{ transform:scale(0.98); }
.loc-item.active{
    background:rgba(255,255,255,0.14);
    border-color:rgba(255,255,255,0.18);
    color:rgba(255,255,255,0.92);
}

/* =========================
   NEW: Left action menu (slimmer)
   + / − / i stacked vertically
   ========================= */
#actionbar{
    position:fixed;
    left: calc(16px + env(safe-area-inset-left, 0px));
    top: 50%;
    transform: translateY(-50%);
    z-index:46;
    pointer-events:none;
}

#action-menu{
    pointer-events:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;                    /* slimmer than before */

    padding:8px 8px;            /* match top menu vibe */
    border-radius:999px;
    border:1px solid var(--btn-border);
    background:rgba(0,0,0,0.35);
    color:rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    font-family: var(--font-mono);
    letter-spacing:1.0px;       /* slightly less loud */
    text-transform:uppercase;    /* keep global style */
    font-size:12px;
    user-select:none;
}

.action-item{
    width:40px;                 /* slimmer */
    height:40px;                /* slimmer */
    border-radius:999px;
    border:1px solid transparent;
    display:grid;
    place-items:center;

    cursor:pointer;
    background:transparent;
    color:rgba(255,255,255,0.90);

    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
    -webkit-tap-highlight-color:transparent;
}
.action-item:hover{ background:rgba(255,255,255,0.10); }
.action-item:active{ transform:scale(0.98); }
.action-item.active{
    background:rgba(255,255,255,0.14);
    border-color:rgba(255,255,255,0.18);
    color:rgba(255,255,255,0.95);
}

/* + and − */
#btn-in, #btn-out{
    font-size:18px;
    line-height:1;
}

/* IMPORTANT: force lowercase i even though menu is uppercase */
#btn-info{
    font-size:13px;
    line-height:1;
    text-transform:none;        /* keeps 'i' as 'i' */
    letter-spacing:0;           /* looks cleaner for single letter */
}

/* If you still have old elements around, hide them */
#controls{ display:none !important; }
#info-toggle{ display:none !important; }

/* Info panel */
#info-panel{
    position:fixed;
    inset:0;
    z-index:60;
    display:none;
    pointer-events:none;
}
#info-panel.open{
    display:block;
    pointer-events:auto;
}
#info-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Card feels more editorial / “paper-like”, with top-to-bottom weight */
#info-card{
    position:absolute;
    top:16px;
    left:16px;
    right:16px;
    margin:0 auto;

    max-width:920px;
    max-height:calc(100vh - 32px);

    background: linear-gradient(180deg, var(--card-top) 0%, var(--card-mid) 46%, var(--card-bot) 100%);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    box-shadow:
            0 18px 60px rgba(0,0,0,0.55),
            0 0 0 1px rgba(0,0,0,0.25) inset;

    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* Optional subtle grain (very light, still subtle) */
#info-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0.06;
    background:
            repeating-linear-gradient(
                    0deg,
                    rgba(255,255,255,0.25) 0px,
                    rgba(255,255,255,0.25) 1px,
                    rgba(255,255,255,0.00) 2px,
                    rgba(255,255,255,0.00) 5px
            );
    mix-blend-mode: overlay;
}

/* Header: stronger “masthead” */
#info-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:16px 16px 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0));
}

#info-title{
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.2px;
    text-transform: none;
    opacity: 0.95;

    display:flex;
    align-items:center;
    gap:10px;
}

/* Make the dot feel like an “accent” */
#info-title .dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background: rgba(255,255,255,0.75);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.30);
}

#info-close{
    width:38px;
    height:38px;
    border-radius:12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.07);
    color:rgba(255,255,255,0.86);
    cursor:pointer;

    display:grid;
    place-items:center;

    font-size:18px;
    line-height:1;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}
#info-close:hover{ background: rgba(255,255,255,0.12); }
#info-close:active{ transform:scale(0.98); }

/* Content reading layout */
#info-content{
    padding: 18px 22px 22px 22px;
    overflow:auto;

    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
}

/* Reduce indentation */
#info-content > *{
    max-width: 86ch;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Headline */
#info-content h2{
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.6px;
    margin: 4px 0 12px 0;
    color: rgba(255,255,255,0.96);
    text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* Lead under H2 */
#info-content h2 + p{
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-muted);
    margin-top: -2px;
    margin-bottom: 14px;
}

/* H3: bigger, bolder, flush-left */
#info-content h3{
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.18;
    letter-spacing: -0.2px;
    text-transform: none;

    margin: 26px 0 10px 0;
    color: rgba(255,255,255,0.95);
    position: relative;
    padding-top: 18px;
    text-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* Divider above H3 */
#info-content h3::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background: linear-gradient(90deg,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.00)
    );
}

/* Paragraphs */
#info-content p{
    color: rgba(255,255,255,0.84);
    margin: 0 0 12px 0;
}

/* Muted */
#info-content .muted{
    color: var(--ink-faint);
}

/* Lists */
#info-content ul{
    margin: 10px 0 16px 0;
    padding-left: 18px;
}
#info-content li{
    margin: 8px 0;
    color: rgba(255,255,255,0.82);
}

/* Code */
#info-content code{
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 3px 8px;
    border-radius: 999px;
    color: rgba(255,255,255,0.92);
}

/* Blockquote */
#info-content blockquote{
    margin: 16px 0;
    padding: 12px 14px;
    border-left: 3px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
    color: rgba(255,255,255,0.78);
}

/* =========================
   INFO: step-by-step story
   ========================= */

.info-step{ display:none; }
.info-step.active{
    display:block;
    animation: infoStepIn 160ms ease;
}
@keyframes infoStepIn{
    from{ opacity:0; transform: translateY(6px); }
    to  { opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
    .info-step.active{ animation:none; }
}

/* Sticky bottom nav inside the scroll area */
.info-nav{
    position: sticky;
    bottom: 0;

    /* pull to edges of #info-content (because #info-content has padding) */
    margin: 18px -22px -8px -22px;
    padding: 14px 22px 12px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    background: linear-gradient(
            180deg,
            rgba(0,0,0,0.00) 0%,
            rgba(10,10,16,0.55) 35%,
            rgba(10,10,16,0.80) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-top: 1px solid rgba(255,255,255,0.10);
}

.info-nav-counter{
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    user-select:none;
}

.info-nav-btn{
    width: 44px;
    height: 44px;
    border-radius: 999px;

    border:1px solid var(--btn-border);
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.88);

    display:grid;
    place-items:center;

    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;

    transition: background 120ms ease, transform 120ms ease, opacity 120ms ease;
}
.info-nav-btn:hover{ background: rgba(255,255,255,0.10); }
.info-nav-btn:active{ transform: scale(0.98); }
.info-nav-btn[disabled]{
    opacity:0.35;
    cursor:default;
    pointer-events:none;
}
/* =========================
   INFO: step-by-step story
   ========================= */

.info-step{ display:none; }
.info-step.active{
    display:block;
    animation: infoStepIn 160ms ease;
}
@keyframes infoStepIn{
    from{ opacity:0; transform: translateY(6px); }
    to  { opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
    .info-step.active{ animation:none; }
}

/* Sticky bottom nav inside the scroll area */
.info-nav{
    position: sticky;
    bottom: 0;

    /* pull to edges of #info-content (because #info-content has padding) */
    margin: 18px -22px -8px -22px;
    padding: 14px 22px 12px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    background: linear-gradient(
            180deg,
            rgba(0,0,0,0.00) 0%,
            rgba(10,10,16,0.55) 35%,
            rgba(10,10,16,0.80) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-top: 1px solid rgba(255,255,255,0.10);
}

.info-nav-counter{
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    user-select:none;
}

.info-nav-btn{
    width: 44px;
    height: 44px;
    border-radius: 999px;

    border:1px solid var(--btn-border);
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.88);

    display:grid;
    place-items:center;

    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;

    transition: background 120ms ease, transform 120ms ease, opacity 120ms ease;
}
.info-nav-btn:hover{ background: rgba(255,255,255,0.10); }
.info-nav-btn:active{ transform: scale(0.98); }
.info-nav-btn[disabled]{
    opacity:0.35;
    cursor:default;
    pointer-events:none;
}

/* =========================================================
   INFO PANEL — mobile bottom padding + link styling
   Paste at END of styles.css
   ========================================================= */

/* Give the card a bit more usable height on phones (account for safe-area) */
#info-card{
    max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px));
}

/* Make sure the scroll area has enough bottom breathing room on mobile.
   (If you have a bottom step-nav inside the card, this prevents overlap.) */
#info-content{
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px) + 64px); /* 64px = room for bottom controls */
    -webkit-overflow-scrolling: touch;
}

/* Tighten on smaller screens + add safe-area aware insets */
@media (max-width: 520px){
    #info-card{
        top: 12px;
        left: 12px;
        right: 12px;
        max-height: calc(100vh - 24px - env(safe-area-inset-bottom, 0px));
        border-radius: 18px;
    }

    #info-content{
        padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px) + 72px) 16px;
    }
}

/* Optional: if you implemented a bottom nav inside info-card (recommended)
   e.g. <div id="info-nav"> ... </div> */
#info-nav{
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 12px;

    background: linear-gradient(180deg,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.22) 35%,
    rgba(0,0,0,0.34) 100%);
    border-top: 1px solid rgba(255,255,255,0.10);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* =========================================================
   LINKS — clean, non-blue, “editorial” style
   (Only inside the info panel content)
   ========================================================= */
#info-content a,
#info-content a:visited{
    color: rgba(255,255,255,0.90);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.34);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    border-radius: 8px;
    padding: 0 2px;
    transition: background 140ms ease, color 140ms ease, text-decoration-color 140ms ease;
}

#info-content a:hover{
    color: rgba(255,255,255,0.98);
    background: rgba(255,255,255,0.07);
    text-decoration-color: rgba(255,255,255,0.55);
}

#info-content a:active{
    background: rgba(255,255,255,0.10);
}

#info-content a:focus-visible{
    outline: 2px solid rgba(255,255,255,0.28);
    outline-offset: 3px;
}

/* =========================================================
   INFO PANEL — better mobile padding + proper footer nav
   Paste at END of styles.css
   ========================================================= */

/* Reset the “fake space” technique (override any earlier rule) */
#info-content{
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: touch;
}

/* Card layout: content scrolls, footer stays visible */
#info-card{
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px));
}

/* Make content area the scroller */
#info-content{
    flex: 1 1 auto;
    overflow: auto;
}

/* ===== Footer nav (always at bottom) ===== */
#info-nav{
    flex: 0 0 auto;

    /* visually matches your top chip style */
    border-top: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* safe area on iPhone home bar etc */
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 12px;
}

/* Inner aligns with the same reading column as content,
   so the right arrow is NOT “too right”. */
#info-nav .info-nav-inner{
    max-width: 86ch;
    margin: 0 auto;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Buttons look like chips / controls from your UI */
#info-nav .info-nav-btn{
    width: 40px;
    height: 36px;
    border-radius: 12px;

    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.88);

    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1;

    display: grid;
    place-items: center;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#info-nav .info-nav-btn:hover{
    background: rgba(255,255,255,0.12);
}
#info-nav .info-nav-btn:active{
    transform: scale(0.98);
}
#info-nav .info-nav-btn:focus-visible{
    outline: 2px solid rgba(255,255,255,0.26);
    outline-offset: 3px;
}

/* Optional step text */
#info-nav .info-nav-meta{
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    padding: 0 6px;
}

/* Mobile tweaks: tighter padding */
@media (max-width: 520px){
    #info-card{
        top: 12px;
        left: 12px;
        right: 12px;
        max-height: calc(100vh - 24px - env(safe-area-inset-bottom, 0px));
    }

    #info-content{
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px !important;
    }

    #info-nav{
        padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)) 10px;
    }

    #info-nav .info-nav-btn{
        width: 38px;
        height: 34px;
        border-radius: 11px;
    }
}

/* =========================================================
   LINKS — keep your nice “editorial” links (no blue)
   (Only inside #info-content)
   ========================================================= */
#info-content a,
#info-content a:visited{
    color: rgba(255,255,255,0.90);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.34);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    border-radius: 8px;
    padding: 0 2px;
    transition: background 140ms ease, color 140ms ease, text-decoration-color 140ms ease;
}

#info-content a:hover{
    color: rgba(255,255,255,0.98);
    background: rgba(255,255,255,0.07);
    text-decoration-color: rgba(255,255,255,0.55);
}

#info-content a:active{
    background: rgba(255,255,255,0.10);
}

#info-content a:focus-visible{
    outline: 2px solid rgba(255,255,255,0.28);
    outline-offset: 3px;
}

/* =========================================================
   INFO CARD: always fit viewport + real scrolling for long steps
   Paste at END of styles.css
   ========================================================= */

/* Ensure the overlay never causes “page scroll” behind it */
#info-panel.open{
    overflow: hidden;
}

/* Force the card to always fit inside the visible viewport on mobile.
   100dvh fixes address-bar issues better than 100vh. */
#info-card{
    /* override older layout that used left/right + max-height */
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;

    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: min(920px, calc(100vw - 24px)) !important;

    max-height: none !important;
    height: auto !important;

    display: flex;
    flex-direction: column;
}

/* Critical: allow the scroll child inside a flex column to actually scroll */
#info-content{
    flex: 1 1 auto;
    min-height: 0;                 /* <-- THIS is the “long content goes out of view” fix */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Footer stays visible, content scrolls behind it */
#info-nav{
    flex: 0 0 auto;
}

/* Show only one story step at a time (prevents stacking = “too long”) */
.info-step{ display: none; }
.info-step.active{ display: block; }

/* Prevent long links / KaTeX blocks from blowing layout */
#info-content{
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* KaTeX display math can be wider than the column — let it scroll horizontally */
#info-content .katex-display{
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
}