/* ═══════════════════════════════════════════════════════════════════════════ RIMEFALL · THE RIME REGISTER Not a magazine and not a drawing. This is a warden's field register: a ruled notebook kept beside a cave mouth, in which every run is written down as a dated observation of a thing that falls in sequence. The two hands on the page are never mixed up: · PRINTED FURNITURE, the stuff the stationer put there, is Public Sans. Small, letterspaced, uppercase, quiet. Labels, column heads, captions, small print. It never says anything, it only names things. · THE WARDEN'S HAND, everything actually recorded, is EB Garamond. Roman for figures, italic for notes in the margin. Prose is set in the serif and sits on feint ruling, because it was written on ruled paper. Rules this sheet keeps without exception: · 0px radius on structure. 2px on the four things a finger operates. · No elevation anywhere. No shadow, no glow, no gradient fill. A hairline and empty paper do every job a shadow would have done. · The measure is asymmetric on purpose: a vertical margin rule at 46px, marginalia and entry keys hanging to the LEFT of it, the column to the right of it, stopping short of the right edge. · Rhythm is 24px, which is also the pitch of the feint ruling. · Motion is one 240ms ease-out crossfade. Nothing travels, nothing scales, nothing bounces, nothing loops. · One mark in the whole app, the hanging spike. Everything else is a word. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Written from JS by applySafeArea(). 0 outside Telegram fullscreen, so every utility that reads them collapses on its own. */ --tg-safe-top: 0px; --tg-safe-bottom: 0px; /* ── the paper. Duplicated from brand.js so the cover paints correctly on frame one, before shell.js has stamped the palette onto . ── */ --leaf: #E6E7E2; /* cold register stock, never a screen white */ --writ: #1B1720; /* the ink: violet-black, the way iron gall dries */ --writ-2: #4E4757; /* secondary prose */ --writ-3: #6C6478; /* printed furniture, captions, small print */ --feint: #C9C9C2; /* the stationer's ruling and every hairline */ --mark: #8E2F5E; /* the vault light, dried on paper: margin rule, marginalia, underlines, your own line on the board */ --mark-2: #C79FB4; /* the same, faded: the vertical margin rule */ --logged: #1D6350; /* a quota written off as done */ /* ── the plate. These eleven are read straight off the root element by game.js, so the vault inside the plate can never drift away from the register it is pasted into. They are the cavern, not the paper. ── */ --bg: #160A18; --surface: #221228; --tint: #2E1436; --tint-2: #3E1B49; --line: #4C2559; --ink: #F7EDFB; --ink-2: #BCA6C8; --ink-3: #93789F; --accent: #E879F9; --accent-d: #F5B7FC; --good: #7DD3FC; --warn: #FB7185; --f-serif: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; --f-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* The measure. Content starts right of the margin rule and stops short of the right edge; rules and full-bleed heads do not. */ --rule-x: 46px; /* where the vertical margin rule falls */ --mg-l: 58px; /* where the column starts */ --mg-r: 22px; --short: 26px; /* how far prose stops short of the right edge */ --t: 240ms ease-out; } *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Overlays set their own display, which outranks the UA rule for [hidden]. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; background: var(--leaf); overscroll-behavior: none; -webkit-overflow-scrolling: touch; } body { font-family: var(--f-sans); font-size: 14.5px; line-height: 1.55; color: var(--writ); -webkit-font-smoothing: antialiased; } h1, h2, p, ol, ul, figure, figcaption { margin: 0; padding: 0; } ol, ul { list-style: none; } button, input { font: inherit; color: inherit; } button { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; } /* The mark sheet itself never renders. */ .marks { position: absolute; width: 0; height: 0; overflow: hidden; } /* One mark, one weight, drawn not filled. A spike hanging off a roof line. */ .mk { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; } .mk-lg { width: 40px; height: 40px; stroke-width: 0.75; } /* ── the two hands ───────────────────────────────────────────────────────── */ /* Printed furniture: what the stationer put on the page. */ .pr { font-family: var(--f-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--writ-3); line-height: 1.5; } /* The warden's marginalia: italic, small, hanging left of the margin rule, level with the first line of whatever it is a note about. */ .side { position: absolute; left: calc(var(--mg-l) * -1); top: 3px; width: 40px; text-align: right; font-family: var(--f-serif); font-style: italic; font-size: 12.5px; line-height: 1.25; color: var(--mark); } /* ── entries ─────────────────────────────────────────────────────────────── */ /* Every block on a leaf is an entry: a roman numeral hanging in the gutter, a printed label, then whatever was written under it. */ .entry { position: relative; margin-top: 26px; padding-top: 18px; } /* The rule over an entry runs wider than the measure, out to both edges, so the column reads as a column sitting on a full page. */ .entry::before { content: ""; position: absolute; top: 0; left: calc(var(--mg-l) * -1); right: calc(var(--mg-r) * -1); height: 1px; background: var(--feint); } .entry-k { position: absolute; left: calc(var(--mg-l) * -1); top: 17px; width: 40px; text-align: right; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: var(--mark); } .entry-h { font-family: var(--f-serif); font-weight: 500; font-size: 22px; line-height: 1.2; margin-top: 5px; padding-right: var(--short); } /* The account: written prose, on the stationer's ruling. Line height is locked to the 24px pitch of the ruling so the writing sits on the lines. The ruling is deliberately faint: it is stock, not decoration. */ .account { position: relative; font-family: var(--f-serif); font-size: 17.5px; line-height: 24px; color: var(--writ); margin-top: 14px; padding-right: var(--short); background-image: repeating-linear-gradient( to bottom, transparent 0 23px, var(--feint) 23px 24px); background-position: 0 5px; } .account + .account { margin-top: 0; } .account em { font-style: italic; } /* ── actions ────────────────────────────────────────────────────────────── One bordered primary, sitting inline with the writing rather than spanning the width, and underlined words for everything else. */ .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 22px; } .btn-prime { display: inline-flex; align-items: baseline; gap: 9px; flex: none; border: 1px solid var(--writ); border-radius: 2px; padding: 10px 18px; font-family: var(--f-serif); font-size: 17px; font-weight: 500; line-height: 1.15; color: var(--writ); background: transparent; transition: background var(--t), color var(--t), border-color var(--t); } .btn-prime:active { background: var(--writ); color: var(--leaf); } .btn-prime:disabled { color: var(--writ-3); border-color: var(--feint); } .link { font-family: var(--f-serif); font-size: 16px; color: var(--writ); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--mark); text-underline-offset: 4px; transition: color var(--t), text-decoration-color var(--t); } .link:active { color: var(--mark); } .link:disabled { color: var(--writ-3); text-decoration-color: var(--feint); } /* ── recorded figures ───────────────────────────────────────────────────── A figure someone wrote in is set in the serif and ruled under by hand. */ .fig-n { display: inline-block; font-family: var(--f-serif); font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--mark); padding-bottom: 3px; margin-top: 10px; } .fig-l { display: block; margin-top: 7px; } /* The four counters, set as a form somebody filled in: printed label above, written figure below, ruled off underneath. */ .form { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; margin-top: 22px; } .cell { padding: 9px 0 8px; border-bottom: 1px solid var(--feint); } .cell .pr { display: block; } .cell b { display: block; font-family: var(--f-serif); font-weight: 500; font-size: 21px; line-height: 1.2; font-variant-numeric: tabular-nums; } /* ── the drip chart, the module a sequence game earns ───────────────────── Three dated observations of the same phenomenon: how long one spike stays in the air against how long until the next one lets go. Hairlines only. */ .chart { display: block; width: 100%; height: auto; margin-top: 16px; color: var(--writ); overflow: visible; } .chart line, .chart rect { stroke: currentColor; fill: none; stroke-width: 1; } .chart .ch-bar { fill: var(--writ); stroke: none; } .chart .ch-bar2 { fill: var(--writ-3); stroke: none; } .chart .ch-lap { fill: var(--mark); stroke: none; opacity: 0.28; } .chart .ch-ax { stroke: var(--feint); } .chart .ch-key { fill: var(--mark); stroke: none; font-family: var(--f-serif); font-size: 13px; font-style: italic; } .chart .ch-t { fill: var(--writ-3); stroke: none; font-family: var(--f-sans); font-size: 8.5px; font-weight: 600; letter-spacing: 0.18em; } .cap { margin-top: 12px; padding-right: var(--short); font-family: var(--f-serif); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--writ-2); } /* ── the quota, and the stamp that closes it ─────────────────────────────── */ .quota-g { font-family: var(--f-serif); font-size: 19px; line-height: 1.3; margin-top: 8px; padding-right: var(--short); } .gauge { height: 2px; background: var(--feint); margin-top: 14px; } .gauge i { display: block; height: 100%; width: 0; background: var(--writ); transition: width var(--t), background var(--t); } .gauge i.is-low { background: var(--warn); } .quota-f { display: flex; align-items: center; gap: 14px; margin-top: 12px; } .quota-n { font-family: var(--f-serif); font-size: 16px; font-variant-numeric: tabular-nums; color: var(--writ-2); } /* The one device on the page that was not written: a rubber stamp, pressed slightly off square, the way a stamp always lands. */ .stamp { margin-left: auto; border: 1.5px solid var(--mark); color: var(--mark); padding: 3px 9px 2px; font-family: var(--f-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; transform: rotate(-0.9deg); transition: color var(--t), border-color var(--t); } .stamp.is-done { color: var(--logged); border-color: var(--logged); } /* The ad notice, set as a slip pinned into the register. */ .notice-tx { font-family: var(--f-serif); font-size: 17px; line-height: 1.4; margin-top: 8px; padding-right: var(--short); color: var(--writ-2); } /* shell.js writes the daily cap here and leaves it EMPTY when there is none, so the line has to disappear on its own rather than leave a hole. */ .notice-cap { display: block; margin-top: 5px; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: var(--writ-3); } .notice-cap:empty { display: none; } .notice .link { display: inline-block; margin-top: 14px; } /* ── small print ─────────────────────────────────────────────────────────── */ .small { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--feint); font-size: 11.5px; line-height: 1.6; color: var(--writ-3); } /* Deliberately NOT pushed to the floor with margin-top:auto. auto REPLACES the 30px whenever the leaf overflows, which puts the rule on top of the last line on exactly the leaves that scroll. */ /* ── cover ───────────────────────────────────────────────────────────────── */ #splash { position: fixed; inset: 0; z-index: 90; background: var(--leaf); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--writ); transition: opacity var(--t); } #splash.out { opacity: 0; } .cv-name { font-family: var(--f-serif); font-size: 44px; font-weight: 400; letter-spacing: -0.01em; margin-top: 22px; } .cv-line { font-family: var(--f-serif); font-style: italic; font-size: 16px; color: var(--writ-2); margin-top: 2px; } .cv-pr { margin-top: 20px; } /* ── the register itself ─────────────────────────────────────────────────── */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--leaf); } main { position: relative; flex: 1; min-height: 0; z-index: 0; } /* A leaf of the register. There is no persistent chrome bar above it: each leaf carries its own printed head and its own top inset, so the writing starts at the top of the page the way it does in a notebook. */ .leaf { position: absolute; inset: 0; display: none; overflow-y: auto; } @keyframes fade { from { opacity: 0; } } .leaf.is-active { display: block; animation: fade var(--t) ease-out; } /* The margin rule: one faded vertical hairline down the whole leaf, drawn as a background so it runs the full scroll height rather than the viewport. background-attachment:local ties it to the content, not the window, and the gradient is left to TILE: pin it to 100% of the box instead and the rule stops dead at one viewport height on any leaf that scrolls. */ .leaf--field { padding: 0 var(--mg-r) 34px var(--mg-l); background-image: linear-gradient(to right, transparent 0 var(--rule-x), var(--mark-2) var(--rule-x) calc(var(--rule-x) + 1px), transparent calc(var(--rule-x) + 1px)); background-attachment: local; background-repeat: repeat-y; background-size: 100% 40px; } /* ── the printed head of a leaf ──────────────────────────────────────────── */ .head { position: relative; margin: 0 calc(var(--mg-r) * -1) 0 calc(var(--mg-l) * -1); padding: 20px var(--mg-r) 14px var(--mg-l); padding-top: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 20px); border-bottom: 1px solid var(--writ); } /* Fullscreen already reserves the chrome inset; trim a cosmetic sliver so the head does not read as a gap, floored at the inset itself. */ [data-fullscreen="1"] .head { padding-top: max(var(--tg-safe-top), calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 20px - 1.6vh)); } .head-in { display: flex; align-items: flex-end; gap: 14px; } .head-tx { flex: 1; min-width: 0; } .head-t { display: block; font-family: var(--f-serif); font-weight: 500; font-size: 27px; line-height: 1.1; letter-spacing: -0.005em; margin-top: 3px; } .head-sub { font-family: var(--f-serif); font-style: italic; font-size: 14.5px; color: var(--writ-2); margin-top: 2px; } /* The grade, recorded in the right-hand column of the head. */ .head-g { flex: none; text-align: right; padding-bottom: 3px; } .head-g .pr { display: block; } .head-g span:last-child { font-family: var(--f-serif); font-size: 17px; color: var(--writ); } /* The mark sits in the gutter beside the head, where a register keeps its embossed stamp. */ .head-mk { position: absolute; left: 13px; bottom: 16px; color: var(--mark); } /* ── bottom nav: four printed tabs over a hairline ───────────────────────── */ .nav { flex: none; display: flex; border-top: 1px solid var(--writ); background: var(--leaf); padding: 10px 8px; padding-bottom: calc(10px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); } .navtab { flex: 1; padding: 2px 4px; text-align: center; font-family: var(--f-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--writ-3); transition: color var(--t); } /* Present on every tab, inked only on the active one, so nothing shifts. */ .navtab::after { content: ""; display: block; width: 16px; height: 1px; margin: 6px auto 0; background: transparent; transition: background var(--t); } .navtab.is-on { color: var(--writ); } .navtab.is-on::after { background: var(--mark); } /* On the plate the register furniture steps aside entirely. */ [data-screen="play"] .nav { display: none; } /* ── the plate ───────────────────────────────────────────────────────────── */ .leaf--plate { padding: 0 18px 10px; } .leaf--plate.is-active { display: flex; flex-direction: column; overflow: hidden; } .hudline { flex: none; display: flex; align-items: flex-end; gap: 16px; padding-top: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 14px); padding-bottom: 12px; border-bottom: 1px solid var(--feint); } .hud-s { margin-right: auto; } .hud-s .pr { display: block; } .hud-n { display: block; font-family: var(--f-serif); font-size: 38px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* The clean-break chain, written in the margin of the run rather than badged. */ .chain { font-family: var(--f-serif); font-style: italic; font-size: 20px; color: var(--mark); opacity: 0; transition: opacity var(--t); } .chain.is-on { opacity: 1; } .ward { font-family: var(--f-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--writ-2); } /* Three shards, kept as tally strokes. game.js strikes one out per landing. */ .tally { display: flex; align-items: flex-end; gap: 5px; padding-bottom: 3px; } .tally i { display: block; width: 2px; height: 18px; background: var(--writ); transform: rotate(-9deg); transition: background var(--t); } .tally i.is-out { background: var(--feint); } .hud-a { display: flex; gap: 16px; flex: none; padding-bottom: 2px; } .hud-a .link { font-size: 15px; } /* The plate is a photographic plate pasted into the register: one ink hairline, 0 radius, no shadow, nothing between it and the paper. */ .plate { flex: 1; min-height: 0; position: relative; margin-top: 14px; border: 1px solid var(--writ); background: var(--bg); } #stage { display: block; width: 100%; height: 100%; background: var(--bg); touch-action: none; } .plate-cap { flex: none; margin-top: 9px; font-family: var(--f-serif); font-style: italic; font-size: 13.5px; color: var(--writ-3); } /* ── standing orders, laid over the plate until the watch begins ─────────── */ .orders { position: absolute; inset: 0; background: var(--leaf); display: flex; align-items: center; padding: 20px 18px; overflow-y: auto; } .orders-in { width: 100%; max-width: 340px; margin: auto; } .orders-h { font-family: var(--f-serif); font-weight: 500; font-size: 25px; line-height: 1.15; margin-top: 5px; } .orders-l { margin-top: 16px; counter-reset: ord; } /* Lettered keys in the margin, the way a warden keys a note back to a line. */ .orders-l li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--feint); font-family: var(--f-serif); font-size: 16px; line-height: 1.4; color: var(--writ-2); counter-increment: ord; } .orders-l li:last-child { border-bottom: 1px solid var(--feint); } .orders-l li::before { content: counter(ord, lower-alpha) "."; position: absolute; left: 2px; top: 11px; font-style: italic; color: var(--mark); } .orders-l b { font-weight: 600; color: var(--writ); } .orders .acts { margin-top: 18px; } /* ── the board ───────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 26px; margin-top: 18px; border-bottom: 1px solid var(--feint); } .seg-btn { padding: 0 0 9px; font-family: var(--f-serif); font-size: 19px; font-weight: 400; color: var(--writ-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t), border-color var(--t); } .seg-btn.is-on { color: var(--writ); border-bottom-color: var(--writ); } .colhead { display: flex; justify-content: space-between; margin-top: 20px; padding-bottom: 7px; border-bottom: 1px solid var(--writ); } .board { margin-bottom: 4px; } /* One line of the register per descent. */ .rw { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--feint); } .rw-pos { min-width: 18px; font-family: var(--f-serif); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--writ-3); } /* Icons are almost absent in this language, and an avatar disc is an icon. */ .rw-av { display: none; } .rw-nm { flex: 1; min-width: 0; font-size: 14.5px; } .rw-sc { font-family: var(--f-serif); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; } .rw--top .rw-pos { color: var(--writ); } /* Your own line is marked in the margin, the way a reader marks a page. */ .rw--me { margin-left: -14px; padding-left: 12px; border-left: 2px solid var(--mark); } .rw--me .rw-nm { font-weight: 600; } .rw--me .rw-sc { color: var(--mark); } /* ── settings and references ─────────────────────────────────────────────── */ .prefs { margin-top: 14px; } .pref { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--feint); } .pref span { flex: 1; min-width: 0; font-family: var(--f-serif); font-size: 17px; } /* A ruled box with an ink block in it, ticked across. No pill, no radius. */ .sw { appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative; width: 42px; height: 22px; border: 1px solid var(--writ); border-radius: 2px; background: var(--leaf); transition: background var(--t); } .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--writ); transition: transform var(--t), background var(--t); } .sw:checked { background: var(--writ); } .sw:checked::after { transform: translateX(20px); background: var(--leaf); } .refs { margin-top: 14px; } .refs li { padding: 12px 0; border-bottom: 1px solid var(--feint); } /* ── overlays ────────────────────────────────────────────────────────────── */ .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(22, 10, 24, .60); } .sheet { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; background: var(--leaf); border-top: 1px solid var(--writ); display: flex; flex-direction: column; padding-bottom: max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 40px); /* Deliberately NOT animated. A sheet that slides in from below sits, for the length of the animation, with its own Close control under the fold, and if a client throttles animations it stays there. The sheet just appears. */ } .sheet-head { flex: none; position: relative; padding: 18px var(--mg-r) 13px var(--mg-l); border-bottom: 1px solid var(--writ); } .sheet-t { font-family: var(--f-serif); font-weight: 500; font-size: 24px; line-height: 1.15; margin-top: 3px; padding-right: 62px; } .sheet-x { position: absolute; right: var(--mg-r); bottom: 15px; font-size: 15px; } .sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px var(--mg-r) 4px var(--mg-l); font-family: var(--f-serif); font-size: 16.5px; line-height: 1.5; color: var(--writ-2); } .sheet-body p { margin-bottom: 15px; padding-right: var(--short); } .sheet-body ul { margin-bottom: 15px; } .sheet-body li { position: relative; padding: 0 var(--short) 12px 0; } /* A tick in the margin instead of a bullet: this is a checked-off note. */ .sheet-body li::before { content: ""; position: absolute; left: -16px; top: 9px; width: 6px; height: 1px; background: var(--mark); } .sheet-body b { font-weight: 600; color: var(--writ); } .sheet-foot { flex: none; padding: 13px var(--mg-r) 18px var(--mg-l); border-top: 1px solid var(--feint); } .modal { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 22px; pointer-events: none; } /* A slip torn out of the register and left on top of it. */ .slip { pointer-events: auto; width: 100%; max-width: 328px; background: var(--leaf); border: 1px solid var(--writ); padding: 22px 20px; animation: fade var(--t) ease-out; } .slip-n { font-family: var(--f-serif); font-size: 62px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 8px; } .slip-l { font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--writ-2); margin-top: 3px; } .slip-sub { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--feint); font-size: 13px; color: var(--writ-2); } .slip-h { font-family: var(--f-serif); font-weight: 500; font-size: 25px; line-height: 1.15; margin-top: 6px; } .slip-alt { display: inline-block; margin-top: 16px; } /* The ad offer: a bordered notice that prints its terms before the tap, never a bright button. */ .slip-ad { display: block; width: 100%; margin-top: 16px; padding: 13px; border: 1px solid var(--feint); border-radius: 2px; transition: border-color var(--t); } .slip-ad:active { border-color: var(--writ); } .slip-ad b { display: block; font-family: var(--f-serif); font-size: 16px; font-weight: 600; } .slip-ad i { display: block; font-family: var(--f-serif); font-size: 13.5px; line-height: 1.4; color: var(--writ-3); margin-top: 3px; } .slip-ad i:empty { display: none; } .revive { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(22, 10, 24, .66); pointer-events: none; } .revive span { font-family: var(--f-serif); font-size: 132px; font-weight: 400; line-height: 1; color: var(--leaf); font-variant-numeric: tabular-nums; animation: fade var(--t) ease-out; } .toast { position: fixed; z-index: 70; left: var(--mg-r); right: var(--mg-r); bottom: calc(88px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); background: var(--writ); color: var(--leaf); border-radius: 2px; padding: 12px 18px; font-size: 13.5px; text-align: center; } /* ── reduce motion: kill all of it ───────────────────────────────────────── */ [data-reduce-motion="1"] *, [data-reduce-motion="1"] *::before, [data-reduce-motion="1"] *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Short phones: the display sizes give first, the measure never does. */ @media (max-height: 690px) { .head { padding-bottom: 11px; } .head-t { font-size: 24px; } .entry { margin-top: 20px; padding-top: 15px; } .entry-h { font-size: 20px; } .account { font-size: 16.5px; } .fig-n { font-size: 44px; } .hud-n { font-size: 32px; } .slip-n { font-size: 52px; } .orders-h { font-size: 22px; } .orders-l li { padding-top: 8px; padding-bottom: 8px; } } /* Narrow phones: pull the gutter in so the column keeps its measure. */ @media (max-width: 359px) { :root { --rule-x: 38px; --mg-l: 48px; --mg-r: 18px; --short: 18px; } }