/* Loading state, picked B · Fresh Page (27 Oct), ported from Design/loading/b.html */
.ldb { --ink: #161616; --room: #f3c63f; position: fixed; inset: 0; z-index: 300; overflow: hidden; }
.ldb[hidden] { display: none; }
.ldb-sheet { position: absolute; inset: -2px 0 0; background: #fbfaf6; transform-origin: 0 0; will-change: transform; box-shadow: 0 30px 60px -20px rgba(22,22,22,.35); }
/* perforations along the top: the sheet tears off here */
.ldb-perf { position: absolute; left: 0; right: 0; top: 22px; height: 8px; background: radial-gradient(circle, rgba(22,22,22,.22) 0 2.6px, transparent 3.2px) 0 0 / 14px 8px repeat-x; }
.ldb-margin { position: absolute; top: 0; bottom: 0; left: clamp(44px, 9vw, 120px); width: 9px; background: linear-gradient(90deg, rgba(236,91,155,.6) 0 2px, transparent 2px 7px, rgba(236,91,155,.6) 7px 9px); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.1s cubic-bezier(.6, 0, .2, 1); }
.ldb-rules i { position: absolute; left: 0; right: 0; height: 1.5px; background: rgba(45,79,216,.26); transform-origin: 0 50%; transform: scaleX(0); transition: transform .62s cubic-bezier(.65, 0, .25, 1); }
.ldb-rules i.on { transform: scaleX(1); }
.ldb.go .ldb-margin { transform: scaleY(1); }
.ldb-head { position: absolute; right: clamp(16px, 6vw, 80px); top: 52px; display: flex; gap: 22px; width: min(340px, 62vw); font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(45,79,216,.65); }
.ldb-head span { position: relative; flex: 1; padding-bottom: 6px; border-bottom: 1.5px solid rgba(45,79,216,.45); }
.ldb-head span:first-child { flex: .55; }
.ldb-head em { position: absolute; left: 44px; bottom: 4px; font: 700 22px/1 'Caveat', cursive; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ldb-head em b { display: inline-block; font-weight: 700; opacity: 0; transform: translateY(4px) rotate(-8deg); transition: opacity .15s, transform .3s cubic-bezier(.3,1.5,.5,1); }
.ldb.done .ldb-head em b { opacity: 1; transform: none; }
/* the counter: big Plex Mono with a highlighter swipe that grows with progress */
.ldb-count { position: absolute; left: calc(clamp(44px, 9vw, 120px) + 34px); bottom: clamp(70px, 14vh, 140px); margin: 0; }
.ldb-num { position: relative; isolation: isolate; display: block; font: 600 clamp(84px, 15vw, 210px)/.8 'IBM Plex Mono', monospace; letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ldb-num sup { font-size: .32em; letter-spacing: 0; vertical-align: top; margin-left: .1em; position: relative; top: .25em; }
.ldb-hl { position: absolute; left: -.12em; right: -.1em; bottom: .02em; height: .34em; background: var(--room); opacity: .75; transform-origin: 0 50%; transform: scaleX(0); z-index: -1; border-radius: 2px 6px 3px 5px; }
.ldb-sub { display: block; margin-top: 18px; font: 600 11px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(22,22,22,.6); }
.ldb-hand { display: block; height: 1.1em; margin: 0 0 .3em .1em; font: 700 clamp(30px, 4vw, 46px)/1 'Caveat', cursive; color: #2d4fd8; transform: rotate(-3deg); transform-origin: 0 100%; }
.ldb-hand b { display: inline-block; font-weight: 700; opacity: 0; transform: translateY(6px) rotate(-6deg); transition: opacity .16s, transform .32s cubic-bezier(.3,1.5,.5,1); }
.ldb.done .ldb-hand b { opacity: 1; transform: none; }
/* the stub left behind on the pad when the sheet tears */
.ldb-stub { position: absolute; left: 0; right: 0; top: -2px; height: 30px; background: #fbfaf6; opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 70%, 98% 100%, 96% 72%, 93% 98%, 90% 74%, 86% 100%, 82% 70%, 78% 96%, 74% 72%, 70% 100%, 66% 74%, 62% 98%, 58% 70%, 54% 100%, 50% 74%, 46% 96%, 42% 72%, 38% 100%, 34% 70%, 30% 98%, 26% 74%, 22% 100%, 18% 72%, 14% 96%, 10% 70%, 6% 100%, 3% 74%, 0 96%); }
.ldb-stub::after { content: ''; position: absolute; left: 0; right: 0; top: 24px; height: 8px; background: radial-gradient(circle, rgba(22,22,22,.22) 0 2.6px, transparent 3.2px) 0 0 / 14px 8px repeat-x; }