:root {
    --bg: #04070d;
    --panel: rgba(8, 18, 30, 0.78);
    --line: rgba(61, 184, 196, 0.22);
    --teal: #3db8c4;
    --teal-dim: #2e8f98;
    --red: #e64c42;
    --gold: #e4af01;
    --text: #d8e6ea;
    --muted: #7d939b;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    overflow: hidden;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

#rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .5; mix-blend-mode: screen; pointer-events: none; }
body.unlocked #rain { opacity: 0.12; transition: opacity 1.4s ease; }

/* ---------- Lock screen ---------- */
.lock {
    position: relative; z-index: 1;
    min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 16px; gap: 14px;
    background: radial-gradient(circle at 50% 42%, rgba(4, 7, 13, 0.75) 0%, rgba(4, 7, 13, 0.35) 45%, rgba(4, 7, 13, 0.1) 75%);
}
.lock.leaving { animation: lockOut 1.1s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes lockOut {
    0% { opacity: 1; transform: scale(1); filter: blur(0); }
    100% { opacity: 0; transform: scale(1.6); filter: blur(12px); }
}

.dial { position: relative; width: min(60vw, 290px); aspect-ratio: 1; margin-bottom: 8px; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.r { fill: none; stroke: var(--teal); transform-origin: 100px 100px; }
.r1 { stroke-width: .6; stroke-dasharray: 2 6; opacity: .7; animation: spin 40s linear infinite; }
.r2 { stroke-width: 1.4; stroke-dasharray: 60 14 8 14; opacity: .55; animation: spin 26s linear infinite reverse; }
.r3 { stroke-width: .8; stroke-dasharray: 1 3; opacity: .8; animation: spin 18s linear infinite; }
.r4 { stroke-width: 2; stroke-dasharray: 110 230; stroke: var(--gold); opacity: .7; animation: spin 9s linear infinite reverse; }
.ticks line { stroke: var(--teal-dim); stroke-width: 1; }
.ticks line.on { stroke: var(--teal); stroke-width: 2; filter: drop-shadow(0 0 3px var(--teal)); }
@keyframes spin { to { transform: rotate(360deg); } }

.dial.working .r1 { animation-duration: 3s; }
.dial.working .r2 { animation-duration: 1.6s; }
.dial.working .r3 { animation-duration: 1.1s; }
.dial.working .r4 { animation-duration: .7s; }
.dial.granted .r { animation-play-state: paused; stroke: var(--teal); opacity: 1; transition: stroke .3s; }
.dial.granted { animation: pulse .5s ease 2; }
.dial.denied .r { stroke: var(--red); }
.dial.denied { animation: shake .45s ease; }
@keyframes pulse { 50% { transform: scale(1.06); filter: drop-shadow(0 0 22px var(--teal)); } }
@keyframes shake {
    20% { transform: translateX(-10px); } 40% { transform: translateX(9px); }
    60% { transform: translateX(-6px); } 80% { transform: translateX(4px); }
}

.dial .core {
    position: absolute; inset: 0; margin: auto; width: 62%; height: 62%;
    border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(228, 175, 1, .55), 0 0 26px rgba(228, 175, 1, .35), inset 0 0 22px rgba(0, 0, 0, .6);
    opacity: 0; transform: scale(.9); animation: coreIn 2.2s ease forwards .4s;
}
.dial .core img { width: 112%; height: 112%; margin: -6%; object-fit: cover; display: block; filter: sepia(.25) contrast(1.08) brightness(.92); }
.dial .core::after {           /* candle vignette over the drawing */
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle, transparent 52%, rgba(4, 7, 13, .55) 100%);
}
@keyframes coreIn { to { opacity: 1; transform: none; } }
.dial.working .core { animation: corePulse 1.1s ease-in-out infinite alternate; opacity: 1; }
.dial.working .core img { filter: sepia(.1) contrast(1.2) brightness(1.1); }
.dial.granted .core { box-shadow: 0 0 0 2px var(--teal), 0 0 40px var(--teal); }
.dial.denied .core { box-shadow: 0 0 0 2px var(--red), 0 0 34px var(--red); }
.dial.denied .core img { filter: sepia(1) hue-rotate(-50deg) saturate(3) brightness(.7); }
@keyframes corePulse { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes spin2 { to { transform: rotate(360deg); } }

/* ---------- Reading room: manuscript scans ---------- */
.folios { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #050403; }
.folio {
    position: absolute; inset: -6%;
    background: center / cover no-repeat;
    opacity: 0; transition: opacity 3.2s ease;
    filter: sepia(.35) saturate(.85) brightness(.5) contrast(1.08);
}
.folio.on { opacity: 1; animation: kenburns 26s ease-in-out both; }
.folio:nth-child(even).on { animation-name: kenburns2; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2.5%, -2%); } }
@keyframes kenburns2 { from { transform: scale(1.14) translate(2%, 1.5%); } to { transform: scale(1.03) translate(0, 0); } }
body.working .folio.on { filter: sepia(.2) saturate(1) brightness(.62) contrast(1.12); transition: filter .6s, opacity 3.2s; }
body.denied .folio.on { filter: sepia(1) hue-rotate(-40deg) saturate(2.2) brightness(.45); transition: filter .3s, opacity 3.2s; }
body.unlocked .folios, body.unlocked .scroll-strip, body.unlocked .caption, body.unlocked .grain { opacity: 0; transition: opacity 1.2s; pointer-events: none; }

.scroll-strip {
    position: fixed; top: 0; right: 2.5vw; width: clamp(90px, 9vw, 150px); height: 100%;
    z-index: 0; overflow: hidden; opacity: .55;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
    filter: sepia(.3) brightness(.8);
}
.scroll-strip img { width: 100%; display: block; animation: unroll 160s linear infinite alternate; }
@keyframes unroll { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 100vh)); } }

/* Warm candlelight that breathes across the page */
.grain {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 110%, rgba(228, 150, 60, .16), transparent 60%),
                radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(2, 3, 6, .78) 100%);
    animation: candle 5s ease-in-out infinite alternate;
}
@keyframes candle { 0% { opacity: .85; } 40% { opacity: 1; } 55% { opacity: .9; } 100% { opacity: 1; } }

.caption {
    position: fixed; left: 24px; bottom: 18px; z-index: 1; margin: 0; max-width: min(520px, 70vw);
    font: italic 12px/1.4 "Iowan Old Style", "Palatino", Georgia, serif; letter-spacing: .04em;
    color: rgba(228, 214, 180, .62); transition: opacity 1.2s ease;
}
.caption.fade { opacity: 0; }
body.working .caption { opacity: 0; }

.title {
    margin: 0; font-size: clamp(30px, 8vw, 54px); letter-spacing: .38em; padding-left: .38em;
    font-weight: 600; color: #eaf7f9;
    text-shadow: 0 0 18px rgba(61, 184, 196, .55);
}
.subtitle { margin: 0; font-size: clamp(10px, 2.6vw, 12px); letter-spacing: .32em; color: var(--muted); text-align: center; }

.passform {
    margin-top: 22px; width: min(420px, 100%);
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line); background: rgba(5, 14, 24, .7);
    padding: 10px 12px; border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(61, 184, 196, .05), inset 0 0 24px rgba(61, 184, 196, .06);
    transition: border-color .2s, box-shadow .2s;
}
.passform:focus-within { border-color: var(--teal); box-shadow: 0 0 22px rgba(61, 184, 196, .25); }
.passform.err { border-color: var(--red); box-shadow: 0 0 22px rgba(230, 76, 66, .35); }
.prompt { color: var(--teal); }
.passform input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
    color: var(--teal); font: 16px var(--mono); letter-spacing: .25em; caret-color: var(--teal);
}
.passform input::placeholder { color: #3c5560; letter-spacing: .12em; }
.passform button, .keybtn {
    background: transparent; border: 1px solid var(--line); color: var(--teal);
    font: 14px var(--mono); padding: 4px 10px; border-radius: 3px; cursor: pointer;
}
.passform button:hover, .keybtn:hover { background: rgba(61, 184, 196, .12); }
.keybtn { letter-spacing: .08em; }

.log {
    margin: 10px 0 0; width: min(520px, 100%); min-height: 0;
    font: 12px/1.65 var(--mono); color: var(--teal-dim); white-space: pre-wrap; word-break: break-word;
}
.log .ok { color: var(--teal); }
.log .bad { color: var(--red); }
.log .dim { color: #44606a; }

.bar { width: min(520px, 100%); height: 2px; background: rgba(61, 184, 196, .1); opacity: 0; transition: opacity .3s; }
.bar.on { opacity: 1; }
.bar i { display: block; height: 100%; width: 0; background: var(--teal); box-shadow: 0 0 10px var(--teal); transition: width .35s ease; }

.verdict { min-height: 1.4em; font-size: clamp(16px, 4.4vw, 24px); letter-spacing: .3em; font-weight: 600; text-align: center; }
.verdict.ok { color: var(--teal); text-shadow: 0 0 16px var(--teal); }
.verdict.bad { color: var(--red); text-shadow: 0 0 16px var(--red); animation: glitch .3s steps(2) 3; }
@keyframes glitch {
    0% { transform: translate(0); clip-path: inset(0 0 0 0); }
    33% { transform: translate(-3px, 1px); clip-path: inset(20% 0 35% 0); }
    66% { transform: translate(3px, -1px); clip-path: inset(55% 0 5% 0); }
    100% { transform: translate(0); clip-path: inset(0 0 0 0); }
}
.back { margin-top: 18px; color: #3c5560; font-size: 12px; text-decoration: none; }
.back:hover { color: var(--teal); }

body.flash::after {
    content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none;
    background: radial-gradient(circle, rgba(61, 184, 196, .55), transparent 70%);
    animation: flash .7s ease-out forwards;
}
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Reader ---------- */
body.unlocked { overflow: hidden; }
.app {
    position: fixed; inset: 0; z-index: 2;
    display: grid; grid-template-columns: 300px 1fr;
    animation: appIn .9s ease both;
}
@keyframes appIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.side {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--panel); border-right: 1px solid var(--line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 8px; }
.brand { letter-spacing: .4em; color: var(--teal); font-weight: 600; font-size: 14px; }
.search {
    margin: 6px 14px 10px; padding: 8px 10px; border-radius: 4px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--text);
    font: 13px var(--mono); outline: 0;
}
.search:focus { border-color: var(--teal); }
.tree { flex: 1; overflow-y: auto; padding: 0 6px 12px; font-size: 13px; }
.tree details > summary {
    list-style: none; cursor: pointer; padding: 5px 10px; border-radius: 3px; color: var(--muted);
    letter-spacing: .04em; user-select: none;
}
.tree details > summary::before { content: "▸ "; color: var(--teal-dim); }
.tree details[open] > summary::before { content: "▾ "; }
.tree details > summary:hover { color: var(--text); background: rgba(61, 184, 196, .07); }
.tree details details { margin-left: 12px; }
.tree a {
    display: block; padding: 4px 10px 4px 24px; color: var(--text); text-decoration: none;
    border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--sans); font-size: 13.5px;
}
.tree a:hover { background: rgba(61, 184, 196, .1); }
.tree a.active { background: rgba(61, 184, 196, .18); color: #fff; box-shadow: inset 2px 0 0 var(--teal); }
.tree .hit small { display: block; color: var(--muted); font-size: 11px; white-space: normal; }
.side-foot { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ghost {
    flex: 1; background: transparent; border: 1px solid var(--line); color: var(--teal);
    font: 12px var(--mono); padding: 7px 8px; border-radius: 3px; cursor: pointer;
}
.ghost:hover { background: rgba(61, 184, 196, .1); }
.ghost.danger { color: var(--red); border-color: rgba(230, 76, 66, .3); }
.ghost.danger:hover { background: rgba(230, 76, 66, .1); }

.reader { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: rgba(4, 7, 13, .72); }
.topbar {
    display: flex; align-items: center; gap: 12px; padding: 12px 28px;
    border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted);
}
.crumbs { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .05em; }
.timer { color: #44606a; font-variant-numeric: tabular-nums; }
.icon { background: transparent; border: 0; color: var(--teal); font-size: 18px; cursor: pointer; padding: 2px 6px; }
.only-mobile { display: none; }

.note {
    flex: 1; overflow-y: auto; padding: 36px clamp(16px, 5vw, 72px) 120px;
    font: 16.5px/1.75 var(--sans); color: var(--text);
}
.note > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.note h1 { font-size: 2.1em; line-height: 1.2; margin: 0 auto .3em; color: #fff; letter-spacing: .01em; }
.note h2 { font-size: 1.4em; margin-top: 1.8em; color: var(--teal); border-bottom: 1px solid var(--line); padding-bottom: .25em; }
.note h3 { font-size: 1.15em; margin-top: 1.5em; color: var(--gold); }
.note h4, .note h5 { color: #bcd; }
.note a { color: var(--teal); text-decoration: none; border-bottom: 1px dotted var(--teal-dim); }
.note a:hover { color: #fff; border-color: #fff; }
.note a.missing { color: var(--muted); border-bottom-style: dashed; cursor: default; }
.note pre, .note code { font-family: var(--mono); font-size: .88em; }
.note pre {
    background: rgba(61, 184, 196, .06); border: 1px solid var(--line); border-radius: 4px;
    padding: 14px 18px; overflow-x: auto; line-height: 1.25;
}
.note pre.glyph { width: max-content; min-width: 90px; text-align: center; color: var(--gold); font-size: 1.1em; letter-spacing: .3em; }
.note :not(pre) > code { background: rgba(255, 255, 255, .06); padding: .1em .35em; border-radius: 3px; }
.note blockquote { border-left: 3px solid var(--gold); margin-left: auto; padding: .2em 1em; color: #c4d2d6; background: rgba(228, 175, 1, .05); }
.note table { border-collapse: collapse; display: block; overflow-x: auto; }
.note th, .note td { border: 1px solid var(--line); padding: 6px 10px; }
.note img { max-width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); display: block; }
.note .embed-missing { color: var(--muted); font-size: .85em; font-family: var(--mono); }
.note hr { border: 0; border-top: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.6em !important; }
.chip { font: 11px var(--mono); padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
.chip.tag { color: var(--teal); }
.decode { color: var(--teal); }

.keydialog {
    background: #071420; color: var(--text); border: 1px solid var(--teal); border-radius: 6px;
    max-width: min(460px, calc(100vw - 32px)); font: 14px/1.6 var(--sans);
}
.keydialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.keydialog h2 { margin-top: 0; font: 600 14px var(--mono); letter-spacing: .2em; color: var(--teal); }
.keydialog code { font-family: var(--mono); font-size: .9em; color: var(--gold); word-break: break-all; }
.keydialog .row { display: flex; justify-content: flex-end; }

@media (max-width: 800px) {
    .scroll-strip { display: none; }
    .caption { left: 16px; right: 16px; bottom: 10px; max-width: none; text-align: center; font-size: 11px; }
    .app { grid-template-columns: 1fr; }
    .side {
        position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); z-index: 3;
        transform: translateX(-102%); transition: transform .3s ease;
    }
    .side.open { transform: none; }
    .only-mobile { display: inline-block; }
    .topbar { padding: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.setup { display: flex; align-items: center; gap: 10px; font-size: 12px; max-width: min(420px, 100%); }
.setup input { color: var(--muted); font: 11px var(--mono); max-width: 220px; }

/* Lockout screen (gate refused this device) */
body.blocked .lock { background: radial-gradient(circle at 50% 42%, rgba(40, 4, 4, .55), rgba(4, 2, 2, .92) 70%); }
body.blocked .verdict { font-size: clamp(22px, 6vw, 34px); letter-spacing: .5em; }
body.blocked .folio.on { filter: sepia(1) hue-rotate(-40deg) saturate(2) brightness(.35); }

/* Attachments: PDFs, recordings, images from the private bucket */
.tree a.file-link { color: #b9c9cd; font-size: 13px; }
.file-card {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin: 1em auto;
    background: rgba(61, 184, 196, .05); font-family: var(--sans);
}
.file-card .fc-icon { font-size: 22px; }
.file-card .fc-name { flex: 1; min-width: 140px; overflow-wrap: anywhere; }
.file-card .fc-size { color: var(--muted); font: 12px var(--mono); }
.file-card .ghost { flex: 0 0 auto; }
.file-progress { position: relative; width: 100%; height: 26px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 10px auto; }
.file-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(61, 184, 196, .25); transition: width .25s; }
.file-progress span { position: relative; display: block; text-align: center; font: 12px/26px var(--mono); color: var(--teal); }
.note .file-pdf { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: 4px; background: #fff; display: block; }
.note .file-audio, .note .file-video { width: 100%; margin: 12px auto; display: block; }
.note .file-save { display: inline-block; margin: 10px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.file-card audio { width: 100%; }