/* ================================================================
   BIR.XAT — editorial rose-noir design system
   Built without external runtime libraries or remote image assets.
   ================================================================ */
:root {
  color-scheme: dark;
  --night: #17151c;
  --night-soft: #211d27;
  --night-lift: #2a2330;
  --paper: #f5efe8;
  --paper-soft: #eee5dc;
  --paper-rose: #f1e4e1;
  --ink: #28242b;
  --ink-soft: #514a51;
  --muted: #aaa0a6;
  --muted-dark: #81777f;
  --rose: #c18b8e;
  --rose-bright: #d7a4a1;
  --rose-deep: #8d5e69;
  --gold: #d4b98d;
  --sage: #9ca899;
  --line-dark: rgba(255, 245, 238, .14);
  --line-light: rgba(42, 35, 43, .14);
  --serif: "Iowan Old Style", "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
  color: var(--paper);
  background: var(--night);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--night); }
body { margin: 0; min-height: 100vh; }
button, input, textarea { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
[hidden] { display: none !important; }
::selection { color: var(--night); background: #e2c6b2; }

/* Shared type and details */
.eyebrow, .topbar-note, .topbar-index, .micro-label, .cover-index,
.cover-footnote, .gate-footer, .letter-footer, .art-caption,
.scene-overline, .scene-index, .story-intro-index, .reading-rail,
.admin-overline, .scene-total, .editor-scene-number, .editor-label,
.login-bottom, .letter-ending .eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
}
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 23px; color: var(--rose-bright); font-size: 9px; font-weight: 750; }
.eyebrow-line { display: inline-block; width: 27px; height: 1px; background: var(--gold); opacity: .85; }
em { color: var(--rose); font-family: var(--serif); font-weight: 400; }
.wordmark { display: inline-flex; align-items: baseline; color: #f6eee7; font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.075em; text-decoration: none; }
.wordmark span { color: var(--rose-bright); }
.topbar-note { color: rgba(239, 228, 220, .47); font-size: 8px; font-weight: 700; letter-spacing: .2em; }
.close-link { display: inline-flex; align-items: center; gap: 13px; color: rgba(245, 239, 232, .72); font-size: 11px; text-decoration: none; transition: color .25s ease; }
.close-link span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--gold); font-size: 16px; transition: transform .25s ease, background .25s ease; }
.close-link:hover { color: #fff; }
.close-link:hover span { transform: rotate(90deg); background: rgba(255,255,255,.08); }

/* Atmospheric layers */
.grain-layer { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.ambient { position: fixed; z-index: 0; border: 1px solid rgba(207, 163, 154, .13); border-radius: 50%; pointer-events: none; }
.ambient-one { width: 690px; height: 690px; top: -410px; right: -220px; box-shadow: 0 0 0 38px rgba(207,163,154,.018), 0 0 0 90px rgba(207,163,154,.012); animation: orbit-drift 28s ease-in-out infinite alternate; }
.ambient-two { width: 480px; height: 480px; bottom: -310px; left: -220px; box-shadow: 0 0 0 42px rgba(207,163,154,.016); animation: orbit-drift 32s ease-in-out infinite alternate-reverse; }
.ambient-three { width: 150px; height: 150px; top: 44%; left: 46%; border-color: rgba(212,185,141,.1); box-shadow: 0 0 80px rgba(193,139,142,.09); }

/* Buttons */
.button { position: relative; display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 24px; overflow: hidden; padding: 0 23px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .035em; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease, border-color .28s ease, color .28s ease; }
.button::before { position: absolute; top: -80%; left: -55%; width: 38%; height: 260%; transform: rotate(25deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.19), transparent); content: ""; transition: left .65s cubic-bezier(.2,.8,.2,1); }
.button:hover::before { left: 130%; }
.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(-1px) scale(.99); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button-primary { color: #fff8f1; background: linear-gradient(120deg, #9b6871, #80535e 55%, #76505c); box-shadow: 0 13px 30px rgba(117, 71, 83, .27), inset 0 1px 0 rgba(255,255,255,.18); }
.button-primary:hover { background: linear-gradient(120deg, #b17d82, #93636c 55%, #835965); box-shadow: 0 17px 38px rgba(117, 71, 83, .36), inset 0 1px 0 rgba(255,255,255,.2); }
.button-quiet { color: var(--paper); border-color: var(--line-dark); background: rgba(255,255,255,.045); }
.button-quiet:hover { border-color: rgba(215,164,161,.55); background: rgba(255,255,255,.09); }
.button-arrow { font-size: 17px; font-weight: 400; line-height: 1; }

/* ------------------------------ ENTRY ----------------------------- */
.gate-page { position: relative; display: flex; min-height: 100svh; flex-direction: column; overflow: hidden; padding: 0 6.2vw; background: radial-gradient(ellipse at 12% 15%, rgba(125,83,96,.23), transparent 33%), radial-gradient(ellipse at 88% 80%, rgba(153,117,104,.13), transparent 28%), linear-gradient(135deg, #18151d 0%, #211b26 48%, #17151c 100%); }
.gate-page::before { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.018) 50%, transparent 100%); content: ""; }
.gate-topbar, .letter-topbar, .admin-topbar { position: relative; z-index: 2; display: flex; width: min(100%, 1360px); min-height: 86px; align-items: center; justify-content: space-between; margin: 0 auto; border-bottom: 1px solid rgba(255,255,255,.075); }
.gate-layout { position: relative; z-index: 1; display: grid; width: min(100%, 1200px); flex: 1; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr); align-items: center; gap: clamp(48px, 9vw, 150px); margin: 0 auto; padding: 72px 0 82px; }
.gate-intro { max-width: 650px; padding-bottom: 12px; animation: intro-rise .9s cubic-bezier(.2,.8,.2,1) both; }
.gate-intro h1 { margin: 0; color: #f4ece5; font-family: var(--serif); font-size: clamp(60px, 7.3vw, 104px); font-weight: 400; letter-spacing: -.075em; line-height: .93; }
.gate-intro h1 em { color: #d6a4a1; }
.gate-copy { max-width: 420px; margin: 33px 0 0; color: rgba(236,225,219,.66); font-size: 14px; line-height: 1.95; }
.gate-signature { display: flex; align-items: center; gap: 13px; margin-top: 54px; color: rgba(231,215,203,.5); font-family: var(--serif); font-size: 16px; font-style: italic; }
.signature-star { color: var(--gold); font-size: 20px; }
.gate-card { position: relative; padding: 32px clamp(25px, 4vw, 48px) 27px; border: 1px solid rgba(255,242,232,.17); border-radius: 4px; background: linear-gradient(150deg, rgba(255,250,244,.095), rgba(255,250,244,.035)); box-shadow: 0 32px 90px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.09); backdrop-filter: blur(20px); animation: card-rise 1s .13s cubic-bezier(.2,.8,.2,1) both; }
.gate-card::before, .gate-card::after { position: absolute; width: 44px; height: 44px; border-color: rgba(212,185,141,.55); border-style: solid; content: ""; pointer-events: none; }
.gate-card::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.gate-card::after { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; }
.gate-card-top { display: flex; justify-content: space-between; color: rgba(236,224,215,.49); }
.micro-label { color: #aa9395; font-size: 8px; font-weight: 800; }
.card-index { color: rgba(236,224,215,.42); font-family: var(--serif); font-size: 12px; letter-spacing: .12em; }
.card-index i { color: var(--gold); font-style: normal; }
.gate-card-symbol { position: relative; display: grid; width: 96px; height: 96px; place-items: center; margin: 26px auto 20px; }
.symbol-orbit { position: absolute; inset: 7px; border: 1px solid rgba(212,185,141,.35); border-radius: 50%; }
.symbol-orbit-one { animation: slow-spin 23s linear infinite; }
.symbol-orbit-one::before, .symbol-orbit-two::after { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); content: ""; }
.symbol-orbit-one::before { top: 10px; right: 13px; }
.symbol-orbit-two { inset: 16px; border-color: rgba(215,164,161,.38); border-style: dashed; animation: slow-spin 36s linear infinite reverse; }
.symbol-orbit-two::after { bottom: 9px; left: 7px; background: var(--rose-bright); }
.symbol-envelope { display: grid; width: 43px; height: 34px; place-items: center; border: 1px solid rgba(239,218,200,.75); border-radius: 3px; color: #e5c8b2; font-size: 21px; box-shadow: 0 0 28px rgba(193,139,142,.16); }
.symbol-spark { position: absolute; color: var(--gold); }
.symbol-spark-one { top: 6px; left: 8px; font-size: 11px; }
.symbol-spark-two { right: 1px; bottom: 14px; font-size: 25px; }
.gate-card-title { margin: 0; color: #f4eae2; font-family: var(--serif); font-size: clamp(35px, 4vw, 45px); letter-spacing: -.055em; line-height: .98; text-align: center; }
.gate-card-title em { color: #d7a4a1; }
.gate-card-copy { margin: 17px 0 27px; color: rgba(238,226,218,.55); font-size: 12px; line-height: 1.7; text-align: center; }
.name-form { display: grid; gap: 11px; }
.name-form label, .admin-login-form label { color: #b8a5a0; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.input-wrap { position: relative; }
.input-symbol { position: absolute; top: 50%; left: 17px; transform: translateY(-50%); color: var(--gold); font-size: 13px; }
.name-form input, .admin-login-form input, .editor-input, .editor-textarea { width: 100%; border: 1px solid rgba(246,232,221,.17); border-radius: 3px; background: rgba(12,10,15,.23); color: #f8eee7; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.name-form input { height: 57px; padding: 0 15px 0 42px; font-family: var(--serif); font-size: 18px; letter-spacing: .13em; text-align: left; }
.name-form input::placeholder { color: rgba(237,220,207,.32); font-family: var(--sans); font-size: 9px; letter-spacing: .17em; }
.name-form input:focus, .admin-login-form input:focus { border-color: rgba(215,164,161,.75); background: rgba(12,10,15,.4); box-shadow: 0 0 0 4px rgba(193,139,142,.1); outline: 0; }
.name-form .button { width: 100%; margin-top: 7px; }
.form-message { min-height: 17px; margin: 0; color: #b9c5ae; font-size: 11px; line-height: 1.5; text-align: center; }
.form-message.is-error, .editor-message.is-error { color: #e1a1a0; }
.gate-card-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 17px; color: rgba(237,224,215,.4); font-size: 9px; }
.tiny-lock { color: var(--gold); font-size: 13px; }
.gate-footer { position: relative; z-index: 1; display: flex; width: min(100%, 1360px); min-height: 58px; align-items: center; justify-content: space-between; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.075); color: rgba(236,224,215,.34); font-size: 7px; font-weight: 750; }
.footer-ornament { color: var(--rose); font-size: 13px; }

/* ------------------------------ LETTER ---------------------------- */
.letter-page { position: relative; overflow-x: clip; background: radial-gradient(ellipse at 75% 12%, rgba(125,78,96,.2), transparent 32%), linear-gradient(180deg, #19161e 0%, #211c25 44%, #17151c 100%); }
.letter-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.letter-atmosphere span { position: absolute; display: block; border: 1px solid rgba(212,185,141,.12); border-radius: 50%; }
.letter-atmosphere span:nth-child(1) { top: 90px; right: -230px; width: 620px; height: 620px; box-shadow: 0 0 0 45px rgba(212,185,141,.018), 0 0 0 100px rgba(212,185,141,.012); animation: orbit-drift 26s ease-in-out infinite alternate; }
.letter-atmosphere span:nth-child(2) { top: 650px; left: -290px; width: 550px; height: 550px; border-color: rgba(193,139,142,.11); box-shadow: 0 0 0 55px rgba(193,139,142,.018); }
.letter-atmosphere span:nth-child(3) { top: 1550px; right: -320px; width: 650px; height: 650px; border-color: rgba(212,185,141,.09); }
.letter-topbar { width: min(calc(100% - 11vw), 1360px); min-height: 82px; }
.letter-main { position: relative; z-index: 1; }
.reading-progress { position: fixed; z-index: 30; top: 0; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,.06); pointer-events: none; }
.reading-progress progress { display: block; width: 100%; height: 2px; border: 0; appearance: none; background: transparent; }
.reading-progress progress::-webkit-progress-bar { background: rgba(255,255,255,.06); }
.reading-progress progress::-webkit-progress-value { background: linear-gradient(90deg, #9e6977, #d8b78a 70%, #e5cbc0); box-shadow: 0 0 12px rgba(215,164,161,.55); transition: width .12s linear; }
.reading-progress progress::-moz-progress-bar { background: linear-gradient(90deg, #9e6977, #d8b78a 70%, #e5cbc0); box-shadow: 0 0 12px rgba(215,164,161,.55); }
.letter-cover { position: relative; display: grid; width: min(calc(100% - 11vw), 1250px); min-height: min(790px, calc(100svh - 145px)); grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr); align-items: center; gap: 4vw; margin: 0 auto; padding: 55px 0 86px; }
.cover-copy-column { position: relative; z-index: 2; max-width: 620px; padding: 35px 0; animation: intro-rise .9s cubic-bezier(.2,.8,.2,1) both; }
.cover-index { margin: 0 0 23px; color: rgba(238,226,218,.39); font-size: 8px; font-weight: 750; letter-spacing: .21em; }
.cover-index span { padding: 0 8px; color: var(--gold); }
.letter-cover h1 { margin: 0; color: #f5ece4; font-family: var(--serif); font-size: clamp(66px, 8vw, 112px); font-weight: 400; letter-spacing: -.083em; line-height: .9; }
.letter-cover h1 em { color: #d4a0a0; }
.cover-copy { max-width: 430px; margin: 31px 0 30px; color: rgba(238,226,218,.64); font-size: 13px; line-height: 1.95; }
.cover-button { min-width: 190px; }
.cover-footnote { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; color: rgba(237,224,215,.38); font-size: 7px; font-weight: 800; }
.footnote-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 12px rgba(156,168,153,.7); }
.cover-art { position: relative; display: grid; min-height: 570px; place-items: center; animation: art-fade 1.3s .12s ease both; }
.art-glow { position: absolute; width: min(70%, 440px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(190,130,132,.22), rgba(163,113,113,.08) 40%, transparent 70%); filter: blur(14px); animation: glow-pulse 7s ease-in-out infinite alternate; }
.art-orbit { position: absolute; width: 470px; max-width: 90%; aspect-ratio: 1; border: 1px solid rgba(212,185,141,.12); border-radius: 50%; }
.art-orbit-one { transform: rotate(-24deg) scaleY(.75); }
.art-orbit-two { width: 390px; border-style: dashed; border-color: rgba(215,164,161,.15); transform: rotate(32deg) scaleY(.75); animation: slow-spin 80s linear infinite; }
.envelope-scene { position: relative; z-index: 1; width: min(430px, 78%); aspect-ratio: 1.28; perspective: 1100px; transform: rotate(-7deg); animation: envelope-float 7s ease-in-out infinite; }
.envelope-shadow { position: absolute; right: 5%; bottom: -9%; left: 5%; height: 22%; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(25px); }
.envelope-back { position: absolute; inset: 0; border: 1px solid rgba(255,244,231,.2); border-radius: 8px; background: linear-gradient(145deg, #d9c4b1, #a9847d 65%, #876772); box-shadow: 0 30px 80px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45); }
.envelope-letter { position: absolute; z-index: 1; top: -14%; left: 9%; display: flex; width: 82%; height: 85%; flex-direction: column; align-items: flex-start; padding: 12% 12% 8%; border: 1px solid rgba(85,66,62,.1); background: linear-gradient(145deg, #fff8ef, #eaded2); box-shadow: 0 15px 30px rgba(0,0,0,.18); transform: translateY(-2%); animation: letter-lift 5.5s ease-in-out infinite alternate; }
.letter-mark { color: #765c62; font-family: var(--serif); font-size: 17px; letter-spacing: -.08em; }
.letter-mark span { color: #b47c7d; }
.letter-lines { display: block; width: 72%; height: 1px; margin-top: 17%; background: rgba(110,88,80,.25); }
.letter-lines.short { width: 47%; margin-top: 7%; }
.letter-sign { margin-top: auto; align-self: flex-end; color: #b27b7d; font-size: 22px; }
.envelope-front { position: absolute; z-index: 2; inset: 0; border-radius: 8px; background: linear-gradient(145deg, #d7c0ac, #bd9a8f); clip-path: polygon(0 0, 50% 53%, 100% 0, 100% 100%, 0 100%); filter: drop-shadow(0 -1px 0 rgba(255,255,255,.28)); }
.envelope-flap { position: absolute; z-index: 3; inset: 0; border-radius: 8px; background: linear-gradient(155deg, #e2cbbb, #c29a91); clip-path: polygon(0 0, 100% 0, 50% 58%); transform-origin: top center; filter: drop-shadow(0 1px 1px rgba(68,43,45,.22)); }
.envelope-flap { backface-visibility: hidden; transition: transform .78s cubic-bezier(.2,.82,.2,1); }
.letter-cover.is-opening .envelope-flap { transform: rotateX(178deg); }
.letter-cover.is-opening .envelope-letter { transform: translateY(-24%) scale(1.035); transition: transform .82s cubic-bezier(.2,.82,.2,1); }
.letter-cover.is-opening .cover-copy-column { opacity: 0; transform: translateY(-14px); transition: opacity .45s ease, transform .55s ease; }
.letter-cover.is-opening .cover-bottomline { opacity: 0; transition: opacity .35s ease; }
.wax-seal { position: absolute; z-index: 4; top: 46%; left: 50%; display: grid; width: 57px; height: 57px; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(255,229,211,.42); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #c68d91, #925e6b 70%); color: #f5d9bf; font-size: 23px; box-shadow: 0 6px 18px rgba(73,37,51,.32), inset 0 1px 3px rgba(255,255,255,.24); }
.art-caption { position: absolute; color: rgba(239,224,211,.4); font-size: 7px; font-weight: 750; letter-spacing: .2em; }
.art-caption-top { top: 17%; right: 7%; }
.art-caption-bottom { bottom: 15%; left: 5%; }
.art-spark { position: absolute; color: var(--gold); text-shadow: 0 0 17px rgba(212,185,141,.5); }
.art-spark-one { top: 20%; left: 17%; font-size: 14px; animation: twinkle 3s ease-in-out infinite; }
.art-spark-two { right: 11%; bottom: 24%; font-size: 21px; animation: twinkle 4s .6s ease-in-out infinite; }
.art-spark-three { top: 36%; right: 15%; font-size: 34px; opacity: .5; }
.cover-bottomline { position: absolute; right: 0; bottom: 22px; left: 0; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.09); padding-top: 16px; color: rgba(237,224,215,.32); font-size: 7px; font-weight: 750; letter-spacing: .16em; }
.cover-bottom-center { color: rgba(212,185,141,.6); }

/* Story intro and chapters */
.story-view { position: relative; padding-bottom: 45px; animation: story-enter .85s cubic-bezier(.2,.8,.2,1) both; }
.story-intro { width: min(calc(100% - 40px), 800px); margin: 0 auto; padding: 110px 0 77px; text-align: center; }
.story-intro .eyebrow { justify-content: center; }
.story-intro-index { margin: 0 0 22px; color: rgba(238,226,218,.4); font-size: 8px; font-weight: 750; letter-spacing: .19em; }
.story-intro-index span { color: var(--gold); }
.story-intro h2 { margin: 0; color: #f4eae2; font-family: var(--serif); font-size: clamp(56px, 7vw, 82px); font-weight: 400; letter-spacing: -.075em; line-height: .92; }
.story-intro h2 em { color: #d3a0a0; }
.story-intro > p:last-of-type { max-width: 390px; margin: 23px auto 0; color: rgba(238,226,218,.53); font-size: 12px; line-height: 1.9; }
.story-intro-rule { display: flex; width: 180px; align-items: center; gap: 12px; margin: 34px auto 0; color: var(--gold); }
.story-intro-rule span { flex: 1; height: 1px; background: rgba(212,185,141,.36); }
.story-intro-rule i { font-size: 14px; font-style: normal; }
.story-reading-layout { display: grid; width: min(calc(100% - 11vw), 1180px); grid-template-columns: 150px minmax(0,1fr); align-items: start; gap: clamp(28px, 5vw, 72px); margin: 0 auto; }
.reading-rail { position: sticky; top: 115px; display: flex; flex-direction: column; gap: 19px; padding: 17px 0; color: rgba(238,226,218,.42); font-size: 7px; font-weight: 800; }
.reading-rail-top { display: grid; gap: 8px; }
.reading-rail-top strong { color: var(--gold); font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: .05em; }
.reading-rail-top strong i { color: rgba(238,226,218,.35); font-size: 12px; font-style: normal; }
.progress-dots { display: grid; gap: 9px; }
.progress-dot { display: flex; width: 100%; align-items: center; gap: 10px; padding: 6px 0; border: 0; background: transparent; color: rgba(238,226,218,.39); cursor: pointer; text-align: left; transition: color .25s ease, transform .25s ease; }
.progress-dot::before { display: block; width: 18px; height: 1px; background: rgba(238,226,218,.24); content: ""; transition: width .3s ease, background .3s ease; }
.progress-dot span { font-size: 8px; letter-spacing: .08em; }
.progress-dot:hover, .progress-dot.is-active { color: #f4eae2; }
.progress-dot.is-active::before { width: 31px; background: var(--rose-bright); }
.progress-dot:hover { transform: translateX(3px); }
.reading-rail-bottom { display: grid; gap: 6px; margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.reading-rail-bottom span:first-child { color: #d6a4a1; font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: 0; }
.scene-list { display: grid; gap: 27px; min-width: 0; }
.story-scene { position: relative; display: grid; min-height: 415px; grid-template-columns: .78fr 1.22fr; align-items: stretch; overflow: hidden; border: 1px solid rgba(255,245,238,.2); border-radius: 5px; background: linear-gradient(135deg, #f8f1e9, #eadfd5); box-shadow: 0 25px 75px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.65); opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); scroll-margin-top: 120px; }
.story-scene.is-visible { opacity: 1; transform: translateY(0); }
.story-scene:nth-child(even) { grid-template-columns: 1.22fr .78fr; background: linear-gradient(135deg, #f0e5e1, #e8d9d5); }
.story-scene:nth-child(even) .scene-visual { order: 2; }
.story-scene:nth-child(even) .scene-copy { order: 1; }
.scene-visual { position: relative; display: grid; min-height: 100%; overflow: hidden; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(255,245,233,.45), transparent 30%), linear-gradient(145deg, #4b3547, #2b2532 65%, #26222d); }
.scene-visual::before, .scene-visual::after { position: absolute; border: 1px solid rgba(229,200,177,.25); border-radius: 50%; content: ""; }
.scene-visual::before { width: 270px; height: 270px; box-shadow: 0 0 0 24px rgba(229,200,177,.035), 0 0 0 62px rgba(229,200,177,.025); }
.scene-visual::after { width: 190px; height: 190px; border-style: dashed; border-color: rgba(215,164,161,.42); transform: rotate(20deg) scaleY(.7); }
.scene-visual-orb { position: absolute; width: 145px; height: 145px; border-radius: 50%; background: radial-gradient(circle at 33% 28%, #e6c4aa 0%, #c28c8b 35%, #805969 72%, #4a3548 100%); box-shadow: 0 20px 50px rgba(0,0,0,.25), 0 0 80px rgba(193,139,142,.2); animation: orb-breathe 7s ease-in-out infinite alternate; }
.scene-visual-glyph { position: relative; z-index: 1; color: rgba(255,244,231,.78); font-family: var(--serif); font-size: 40px; text-shadow: 0 3px 25px rgba(255,229,204,.38); }
.scene-visual-index { position: absolute; bottom: 23px; left: 27px; color: rgba(247,235,225,.5); font-family: var(--serif); font-size: 14px; letter-spacing: .16em; }
.story-scene:nth-child(2) .scene-visual { background: radial-gradient(circle at 70% 28%, rgba(225,186,162,.24), transparent 30%), linear-gradient(145deg, #5d3c4a, #352936 68%, #25212b); }
.story-scene:nth-child(2) .scene-visual-orb { width: 122px; height: 122px; background: radial-gradient(circle at 32% 28%, #f0d7b9, #d39a91 43%, #9c6372 78%); }
.story-scene:nth-child(3) .scene-visual { background: radial-gradient(circle at 50% 60%, rgba(211,190,151,.2), transparent 32%), linear-gradient(145deg, #3c4542, #26312f 65%, #21242a); }
.story-scene:nth-child(3) .scene-visual-orb { width: 160px; height: 160px; background: radial-gradient(circle at 35% 27%, #e8d4b5, #a5a98f 43%, #59675e 80%); }
.story-scene:nth-child(4) .scene-visual { background: radial-gradient(circle at 30% 35%, rgba(216,173,169,.2), transparent 28%), linear-gradient(145deg, #654956, #3b2b39 70%, #26222d); }
.story-scene:nth-child(4) .scene-visual-orb { width: 135px; height: 135px; background: radial-gradient(circle at 32% 28%, #f0d2c3, #c58d91 43%, #855e72 82%); }
.story-scene:nth-child(5) .scene-visual { background: radial-gradient(circle at 60% 45%, rgba(212,185,141,.18), transparent 32%), linear-gradient(145deg, #4b4c43, #31372f 65%, #22252a); }
.story-scene:nth-child(5) .scene-visual-orb { width: 150px; height: 150px; background: radial-gradient(circle at 32% 27%, #e9dbbf, #a7a88d 45%, #657164 84%); }
.story-scene:nth-child(6) .scene-visual { background: radial-gradient(circle at 50% 35%, rgba(216,179,163,.22), transparent 32%), linear-gradient(145deg, #574050, #332936 70%, #24212b); }
.scene-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 5vw, 76px); color: var(--ink); }
.scene-overline { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: #946a70; font-size: 8px; font-weight: 800; }
.scene-overline::before { display: block; width: 21px; height: 1px; background: #b98b88; content: ""; }
.scene-copy h2 { max-width: 480px; margin: 0; color: #332c34; font-family: var(--serif); font-size: clamp(34px, 4vw, 54px); font-weight: 400; letter-spacing: -.06em; line-height: .98; }
.scene-copy p { max-width: 490px; margin: 24px 0 0; color: #655b60; font-size: 13px; line-height: 2.05; white-space: pre-line; }
.scene-copy-bottom { display: flex; align-items: center; gap: 11px; margin-top: 32px; color: #9b8584; font-size: 8px; font-weight: 750; letter-spacing: .16em; }
.scene-copy-bottom::before { width: 24px; height: 1px; background: #c49b94; content: ""; }

/* Ending */
.letter-ending { position: relative; width: min(calc(100% - 40px), 760px); margin: 115px auto 100px; padding: 76px 35px 70px; overflow: hidden; border: 1px solid rgba(255,245,238,.17); border-radius: 5px; background: radial-gradient(ellipse at 50% 0%, rgba(193,139,142,.16), transparent 48%), linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); box-shadow: 0 25px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07); text-align: center; }
.letter-ending::before, .letter-ending::after { position: absolute; width: 100px; height: 100px; border: 1px solid rgba(212,185,141,.2); border-radius: 50%; content: ""; }
.letter-ending::before { top: -66px; left: -52px; }
.letter-ending::after { right: -50px; bottom: -66px; }
.ending-orbit { position: relative; display: grid; width: 74px; height: 74px; place-items: center; margin: 0 auto 30px; }
.ending-orbit span { position: absolute; inset: 0; border: 1px solid rgba(212,185,141,.4); border-radius: 50%; animation: slow-spin 24s linear infinite; }
.ending-orbit span::before { position: absolute; top: 5px; right: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); content: ""; }
.ending-orbit i { color: var(--rose-bright); font-size: 22px; font-style: normal; }
.letter-ending .eyebrow { justify-content: center; }
.letter-ending h2 { margin: 0; color: #f5ece5; font-family: var(--serif); font-size: clamp(57px, 8vw, 82px); font-weight: 400; letter-spacing: -.075em; line-height: .9; }
.letter-ending h2 em { color: #d4a0a0; }
.ending-copy { max-width: 485px; margin: 26px auto 27px; color: rgba(238,226,218,.64); font-size: 13px; line-height: 2; }
.ending-signature { display: flex; max-width: 220px; align-items: center; gap: 12px; margin: 0 auto 31px; color: rgba(212,185,141,.56); font-size: 7px; letter-spacing: .2em; }
.ending-signature span { flex: 1; height: 1px; background: rgba(212,185,141,.3); }
.ending-button { min-width: 175px; }
.letter-footer { position: relative; z-index: 1; display: flex; min-height: 64px; align-items: center; justify-content: center; gap: 24px; border-top: 1px solid rgba(255,255,255,.075); color: rgba(236,224,215,.35); font-size: 7px; font-weight: 750; letter-spacing: .17em; }
.footer-flower { color: var(--rose); font-size: 13px; }
.noscript-note { padding: 20px; color: var(--paper); text-align: center; }

/* ------------------------------ ADMIN ----------------------------- */
.admin-page { position: relative; min-height: 100svh; overflow-x: hidden; background: radial-gradient(ellipse at 92% 4%, rgba(125,78,96,.16), transparent 32%), linear-gradient(135deg, #19161e, #211c25 55%, #17151c); }
.admin-topbar { width: min(calc(100% - 11vw), 1360px); }
.admin-main { position: relative; z-index: 1; width: min(calc(100% - 11vw), 1180px); min-height: calc(100svh - 150px); margin: 0 auto; padding: 70px 0 90px; }
.panel { border: 1px solid rgba(255,245,238,.16); background: linear-gradient(145deg, rgba(255,250,244,.085), rgba(255,250,244,.035)); box-shadow: 0 32px 100px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(18px); }
.admin-login { position: relative; display: grid; width: min(100%, 920px); min-height: 530px; grid-template-columns: .76fr 1.24fr; margin: 0 auto; overflow: hidden; border-radius: 5px; }
.login-art { position: relative; display: grid; overflow: hidden; place-items: center; background: radial-gradient(circle at 50% 42%, rgba(225,179,158,.25), transparent 31%), linear-gradient(145deg, #634451, #302735 70%, #24212a); }
.login-art::before, .login-art::after { position: absolute; width: 300px; height: 300px; border: 1px solid rgba(240,211,187,.28); border-radius: 50%; content: ""; }
.login-art::before { box-shadow: 0 0 0 28px rgba(240,211,187,.035), 0 0 0 65px rgba(240,211,187,.02); }
.login-art::after { width: 215px; height: 215px; border-style: dashed; transform: rotate(-25deg) scaleY(.75); }
.login-art span { position: absolute; width: 135px; height: 135px; border-radius: 50%; background: radial-gradient(circle at 33% 25%, #efcfb4, #bd8788 44%, #754f65 80%); box-shadow: 0 20px 55px rgba(0,0,0,.25), 0 0 90px rgba(193,139,142,.3); animation: orb-breathe 7s ease-in-out infinite alternate; }
.login-art i { position: relative; z-index: 1; color: rgba(255,244,231,.84); font-size: 41px; font-style: normal; }
.login-content { align-self: center; padding: 58px clamp(35px, 6vw, 70px) 55px; }
.admin-overline { margin: 0 0 19px; color: rgba(238,226,218,.37); font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.admin-login h1, .editor-heading h1 { margin: 0; color: #f3eae3; font-family: var(--serif); font-size: clamp(48px, 6vw, 68px); font-weight: 400; letter-spacing: -.07em; line-height: .94; }
.admin-login h1 em, .editor-heading h1 em { color: #d3a0a0; }
.admin-intro { max-width: 470px; margin: 21px 0 27px; color: rgba(238,226,218,.59); font-size: 12px; line-height: 1.9; }
.admin-login-form { display: grid; gap: 11px; }
.admin-login-form input { height: 53px; padding: 0 15px; }
.admin-login-form input::placeholder { color: rgba(237,220,207,.3); font-size: 11px; }
.admin-login-form .button { width: 100%; margin-top: 5px; }
.admin-login .privacy-note { display: flex; align-items: center; gap: 8px; margin: 19px 0 0; color: rgba(238,226,218,.38); font-size: 9px; }
.login-bottom { position: absolute; right: 25px; bottom: 0; left: 25px; display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.1); color: rgba(238,226,218,.32); font-size: 7px; font-weight: 750; }
.editor-panel { animation: intro-rise .65s ease both; }
.editor-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; }
.editor-heading-copy { max-width: 650px; }
.editor-heading .admin-intro { max-width: 530px; margin-bottom: 0; }
.editor-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
.editor-heading-actions .button { min-height: 43px; padding: 0 15px; font-size: 10px; }
.editor-summary { display: flex; align-items: center; gap: 15px; margin: 39px 0 0; padding: 18px 20px; border: 1px solid rgba(255,245,238,.13); background: rgba(255,255,255,.045); }
.summary-mark { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid rgba(212,185,141,.35); border-radius: 50%; color: var(--gold); }
.editor-summary > div:nth-child(2) { display: grid; gap: 5px; }
.editor-summary strong { color: #eee3da; font-family: var(--serif); font-size: 17px; font-weight: 400; }
.editor-summary .scene-total { margin-left: auto; color: rgba(238,226,218,.5); font-size: 8px; font-weight: 800; white-space: nowrap; }
.editor-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 37px 0 8px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.12); }
.toolbar-heading { display: grid; gap: 7px; }
.toolbar-heading strong { color: #eee3da; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.toolbar-actions .button { min-height: 43px; padding: 0 15px; font-size: 10px; }
.plus-icon { font-size: 16px; }
.editor-message { min-height: 20px; margin: 13px 0 17px; color: #b8c5ac; font-size: 11px; }
.scene-list { display: grid; gap: 13px; }
.editor-scene-card { position: relative; padding: 23px 25px 25px; border: 1px solid rgba(255,245,238,.13); border-radius: 4px; background: linear-gradient(135deg, rgba(255,250,244,.07), rgba(255,250,244,.028)); transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.editor-scene-card:focus-within { border-color: rgba(215,164,161,.38); background: rgba(255,250,244,.07); }
.editor-scene-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.editor-scene-number { display: flex; align-items: center; gap: 10px; color: #c69a99; font-size: 8px; font-weight: 800; }
.editor-scene-number::before { display: block; width: 20px; height: 1px; background: var(--gold); content: ""; }
.scene-actions { display: flex; align-items: center; gap: 5px; }
.icon-button, .text-button { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid rgba(255,245,238,.16); border-radius: 3px; background: rgba(255,255,255,.035); color: rgba(238,226,218,.72); cursor: pointer; font-size: 11px; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.icon-button:hover, .text-button:hover { border-color: rgba(215,164,161,.5); background: rgba(215,164,161,.09); color: #fff; }
.text-button { border-color: transparent; background: transparent; font-size: 9px; }
.danger-button { color: #d89b9b; }
.editor-label { display: grid; gap: 8px; margin-top: 15px; color: #b5a2a1; font-size: 8px; font-weight: 800; }
.editor-input, .editor-textarea { border-color: rgba(255,245,238,.14); background: rgba(11,9,14,.22); color: #f5ebe3; text-transform: none; letter-spacing: 0; }
.editor-input { height: 44px; padding: 0 12px; font-size: 13px; }
.editor-textarea { min-height: 116px; padding: 12px; resize: vertical; font-size: 13px; line-height: 1.75; }
.editor-input:focus, .editor-textarea:focus { border-color: rgba(215,164,161,.65); background: rgba(11,9,14,.34); box-shadow: 0 0 0 3px rgba(193,139,142,.09); outline: 0; }
.editor-footnote { display: flex; align-items: flex-start; gap: 12px; margin-top: 30px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.1); color: rgba(238,226,218,.42); }
.editor-footnote p { margin: 0; font-size: 10px; line-height: 1.8; }
.footnote-seal { color: var(--gold); font-size: 17px; }

/* Motion */
@keyframes intro-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-rise { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes art-fade { from { opacity: 0; transform: translateY(17px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes story-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes orbit-drift { from { transform: translate3d(-12px, 8px, 0) rotate(-8deg); } to { transform: translate3d(15px, -14px, 0) rotate(8deg); } }
@keyframes envelope-float { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-14px) rotate(-4deg); } }
@keyframes letter-lift { from { transform: translateY(0); } to { transform: translateY(-7%); } }
@keyframes glow-pulse { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.08); } }
@keyframes twinkle { 0%,100% { opacity: .35; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.16) rotate(18deg); } }
@keyframes orb-breathe { from { transform: scale(.94); filter: saturate(.9); } to { transform: scale(1.06); filter: saturate(1.12); } }

/* Responsive */
@media (min-width: 1500px) {
  .gate-layout { padding-top: 90px; padding-bottom: 100px; }
  .letter-cover { min-height: 820px; }
}
@media (max-width: 980px) {
  .gate-page { padding: 0 5vw; }
  .gate-layout { grid-template-columns: minmax(0,1fr) minmax(320px,.86fr); gap: 5vw; }
  .gate-intro h1 { font-size: clamp(58px, 8vw, 80px); }
  .letter-cover { width: min(calc(100% - 9vw), 1250px); grid-template-columns: minmax(0,1fr) minmax(310px,.9fr); }
  .letter-cover h1 { font-size: clamp(62px, 8.5vw, 88px); }
  .cover-art { min-height: 470px; }
  .story-reading-layout { width: calc(100% - 8vw); grid-template-columns: 115px minmax(0,1fr); gap: 30px; }
  .scene-copy { padding: 38px; }
}
@media (max-width: 700px) {
  .gate-page { min-height: 100svh; padding: 0 20px; }
  .gate-topbar, .letter-topbar, .admin-topbar { min-height: 70px; }
  .topbar-note { display: none; }
  .topbar-index { color: rgba(236,224,215,.35); font-size: 7px; letter-spacing: .14em; }
  .gate-layout { width: min(100%, 480px); grid-template-columns: 1fr; gap: 32px; padding: 52px 0 45px; }
  .gate-intro { padding: 0; }
  .gate-intro .eyebrow { margin-bottom: 19px; }
  .gate-intro h1 { font-size: clamp(56px, 13vw, 76px); }
  .gate-copy { max-width: 370px; margin-top: 20px; font-size: 12px; }
  .gate-signature { display: none; }
  .gate-card { padding: 25px 25px 23px; }
  .gate-card-symbol { width: 76px; height: 76px; margin: 18px auto 17px; }
  .gate-card-title { font-size: 38px; }
  .gate-card-copy { margin: 13px 0 21px; }
  .gate-footer { min-height: 49px; font-size: 6px; }
  .letter-topbar, .admin-topbar { width: calc(100% - 40px); }
  .letter-cover { width: calc(100% - 40px); min-height: auto; grid-template-columns: 1fr; gap: 4px; padding: 66px 0 73px; }
  .cover-copy-column { padding: 0; }
  .letter-cover h1 { font-size: clamp(65px, 15vw, 91px); }
  .cover-copy { max-width: 420px; margin: 24px 0 25px; font-size: 12px; }
  .cover-art { min-height: 320px; margin-top: 5px; }
  .envelope-scene { width: min(350px, 75%); }
  .art-orbit { width: 350px; }
  .art-orbit-two { width: 290px; }
  .art-caption-top { top: 8%; right: 4%; }
  .art-caption-bottom { bottom: 7%; left: 3%; }
  .cover-bottomline { bottom: 19px; font-size: 6px; }
  .cover-bottom-center { display: none; }
  .story-intro { padding: 76px 0 52px; }
  .story-intro h2 { font-size: clamp(54px, 13vw, 70px); }
  .story-reading-layout { width: calc(100% - 32px); display: block; }
  .reading-rail { position: sticky; z-index: 5; top: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px 17px; padding: 11px 16px; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(28,24,32,.91); backdrop-filter: blur(18px); }
  .reading-rail-top { display: flex; align-items: center; gap: 9px; }
  .reading-rail-top strong { font-size: 16px; }
  .progress-dots { display: flex; flex: 1; justify-content: center; gap: 5px; }
  .progress-dot { width: 14px; justify-content: center; padding: 8px 0; }
  .progress-dot::before { width: 7px; height: 7px; border-radius: 50%; }
  .progress-dot.is-active::before { width: 18px; border-radius: 5px; }
  .progress-dot span { display: none; }
  .reading-rail-bottom { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; }
  .reading-rail-bottom span:first-child { font-size: 16px; }
  .reading-rail-bottom span:last-child { display: none; }
  .scene-list { gap: 16px; }
  .story-scene, .story-scene:nth-child(even) { min-height: auto; grid-template-columns: 1fr; }
  .story-scene:nth-child(even) .scene-visual, .story-scene:nth-child(even) .scene-copy { order: initial; }
  .scene-visual { min-height: 205px; }
  .scene-visual::before { width: 160px; height: 160px; }
  .scene-visual::after { width: 116px; height: 116px; }
  .scene-visual-orb { width: 92px; height: 92px; }
  .story-scene:nth-child(2) .scene-visual-orb, .story-scene:nth-child(3) .scene-visual-orb, .story-scene:nth-child(4) .scene-visual-orb, .story-scene:nth-child(5) .scene-visual-orb { width: 88px; height: 88px; }
  .scene-copy { padding: 29px 25px 32px; }
  .scene-overline { margin-bottom: 15px; }
  .scene-copy h2 { font-size: 38px; }
  .scene-copy p { margin-top: 17px; font-size: 12px; line-height: 1.9; }
  .scene-copy-bottom { margin-top: 23px; }
  .letter-ending { margin: 68px auto 70px; padding: 55px 23px 52px; }
  .ending-copy { font-size: 12px; }
  .letter-footer { min-height: 55px; gap: 13px; font-size: 6px; }
  .admin-main { width: calc(100% - 36px); padding: 40px 0 60px; }
  .admin-login { min-height: 0; grid-template-columns: 1fr; }
  .login-art { min-height: 175px; }
  .login-art::before { width: 200px; height: 200px; }
  .login-art::after { width: 140px; height: 140px; }
  .login-art span { width: 86px; height: 86px; }
  .login-art i { font-size: 28px; }
  .login-content { padding: 36px 27px 42px; }
  .login-bottom { right: 18px; left: 18px; font-size: 6px; }
  .editor-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .editor-heading-actions { width: 100%; }
  .editor-heading-actions .button { flex: 1; }
  .editor-summary { margin-top: 28px; padding: 14px; }
  .editor-summary strong { font-size: 15px; }
  .editor-toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { width: 100%; justify-content: stretch; }
  .toolbar-actions .button { flex: 1; }
  .editor-scene-card { padding: 18px 16px 20px; }
  .editor-scene-top { align-items: flex-start; }
}
@media (max-width: 390px) {
  .gate-page { padding: 0 15px; }
  .gate-intro h1 { font-size: 54px; }
  .gate-card { padding-right: 19px; padding-left: 19px; }
  .gate-card-foot { font-size: 8px; }
  .letter-cover { width: calc(100% - 32px); }
  .letter-cover h1 { font-size: 61px; }
  .cover-art { min-height: 285px; }
  .cover-bottomline { font-size: 5px; }
  .reading-rail { gap: 7px; }
  .reading-rail-top { gap: 5px; }
  .reading-rail-top > span { font-size: 6px; }
  .reading-rail-top strong { font-size: 14px; }
  .progress-dots { gap: 2px; }
  .progress-dot { width: 11px; }
  .reading-rail-bottom span:first-child { font-size: 14px; }
  .scene-copy h2 { font-size: 34px; }
  .toolbar-actions { flex-direction: column; }
  .toolbar-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}