/* PACK RAT — theme: the cardboard-tag / label-maker visual language on top of css/tokens.css.
 * Base page, animated dusk backdrop, buttons, tags, label strips, chips, bubbles, toasts, modals, loading screen.
 * Screen layouts live in css/ui.css. Everything honours html.pr-reduce (reduced motion) and html.pr-cb (colour-blind safe). */

:root {
  --pr-bg-1: #0d2622; --pr-bg-2: #163a3f; --pr-bg-3: #2c3a63; --pr-bg-4: #6b4a6f; --pr-glow: #ff9d4a;
  --pr-kraft: #c99358; --pr-kraft-2: #b98046; --pr-edge: rgba(0, 0, 0, .22);
  --pr-good-ink: #1d7a44; --pr-bad-ink: #b3261a;
  --pr-topbar: 56px;
  --pr-gutter: clamp(12px, 3vw, 28px);
  --pr-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .1  0 0 0 .2 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  --pr-flute: repeating-linear-gradient(90deg, rgba(0, 0, 0, .055) 0 2px, rgba(255, 255, 255, .05) 2px 4px, transparent 4px 7px);
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
}
html.pr-cb { --pr-good: #2f7df6; --pr-bad: #e8710a; --pr-good-ink: #1f5fcc; --pr-bad-ink: #a04a00; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--pr-bg-1); color: var(--pr-ink); font-family: var(--pr-font-ui); font-size: clamp(14px, 0.5vw + 12px, 18px); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body { position: fixed; inset: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3, h4 { font-family: var(--pr-font-display); font-weight: 400; margin: 0; letter-spacing: .02em; line-height: 1.05; }
p { margin: 0; line-height: 1.35; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--pr-brand-accent); outline-offset: 3px; border-radius: 10px; }
.ic { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.ic .fill, .ic.is-fill { fill: currentColor; }
.ic .fill { stroke: none; }
.ic.is-fill { stroke-width: 1.4; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(255, 246, 227, .28); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ app shell */
#pr-app { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }
#pr-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, var(--pr-bg-1) 0%, var(--pr-bg-2) 38%, var(--pr-bg-3) 72%, var(--pr-bg-4) 100%); }
#pr-bg::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 157, 74, .38), transparent 70%); }
#pr-bg .stars { position: absolute; inset: 0 0 45% 0; background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff8, transparent), radial-gradient(1.5px 1.5px at 33% 12%, #fffa, transparent), radial-gradient(1px 1px at 55% 30%, #fff9, transparent), radial-gradient(1.5px 1.5px at 78% 16%, #fffb, transparent), radial-gradient(1px 1px at 90% 34%, #fff8, transparent), radial-gradient(1px 1px at 22% 40%, #fff7, transparent), radial-gradient(1px 1px at 66% 8%, #fff9, transparent); animation: pr-twinkle 6s ease-in-out infinite alternate; }
#pr-bg .ridge { position: absolute; left: -10%; width: 220%; bottom: 0; background-repeat: repeat-x; background-size: 50% 100%; will-change: transform; }
#pr-bg .r1 { height: 42%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'><path d='M0 200V120L60 96 130 128 210 70 290 118 370 84 450 130 540 62 620 112 700 90 800 126V200z' fill='%23324a72' fill-opacity='.55'/></svg>"); animation: pr-drift 240s linear infinite; }
#pr-bg .r2 { height: 30%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'><path d='M0 200V110L90 70 170 120 260 60 340 108 430 74 520 120 610 66 700 104 800 80V200z' fill='%23233c5a' fill-opacity='.75'/></svg>"); animation: pr-drift 170s linear infinite reverse; }
#pr-bg .r3 { height: 18%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'><path d='M0 200V100L70 60 150 110 240 50 330 104 420 70 510 116 600 56 690 100 800 70V200z' fill='%230e2a2e'/></svg>"); animation: pr-drift 110s linear infinite; }
#pr-bg .boxes i { position: absolute; bottom: -60px; width: var(--s); height: var(--s); left: var(--x); background: var(--pr-kraft); border-radius: 4px; opacity: .1; transform: rotate(var(--r)); animation: pr-float var(--d) ease-in-out infinite; }
#pr-bg .boxes i::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 14%; background: rgba(255, 255, 255, .5); }
#pr-bg .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .35)); }
@keyframes pr-drift { to { transform: translateX(-50%); } }
@keyframes pr-twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes pr-float { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(calc(var(--s) * -1.3)) rotate(calc(var(--r) + 8deg)); } }
#pr-screens { position: absolute; inset: 0; z-index: 1; }
#pr-overlay { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#pr-overlay > * { pointer-events: auto; }
#pr-toasts { position: absolute; z-index: 30; left: 0; right: 0; top: calc(var(--sat) + 12px); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }

.pr-screen { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--pr-paper); opacity: 0; transition: opacity .18s ease; }
.pr-screen.enter { transform: translateY(14px) scale(.985); }
.pr-screen.shown { opacity: 1; transform: none; transition: opacity .28s ease, transform .34s var(--pr-ease); }
.pr-screen.leaving { opacity: 0; pointer-events: none; transition: opacity .16s ease; }

/* ------------------------------------------------------------------ buttons */
.pr-btn { --bg: #fff6e3; --edge: #cdb98f; --fg: var(--pr-ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .68em 1.2em; border: 0; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #fff) 0%, var(--bg) 100%); color: var(--fg); font-family: var(--pr-font-display); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; box-shadow: 0 5px 0 var(--edge), 0 9px 14px rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .45); transition: transform .09s ease, box-shadow .09s ease, filter .15s; min-height: 44px; -webkit-appearance: none; appearance: none; }
.pr-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 7px 0 var(--edge), 0 12px 16px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .45); }
.pr-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge), 0 3px 6px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .35); }
.pr-btn:disabled { filter: grayscale(.7) brightness(.85); opacity: .6; cursor: not-allowed; }
.pr-btn .ic { font-size: 1.15em; }
.pr-btn.k-primary { --bg: var(--pr-brand-accent); --edge: color-mix(in srgb, var(--pr-brand-accent) 55%, #5a2c00); }
.pr-btn.k-brand { --bg: var(--pr-brand); --edge: var(--pr-brand-dark); --fg: #fff; }
.pr-btn.k-danger { --bg: #ff5a4a; --edge: #a92417; --fg: #fff; }
.pr-btn.k-paper { --bg: #fff6e3; --edge: #cdb98f; }
.pr-btn.k-ghost { --bg: transparent; --edge: transparent; --fg: var(--pr-paper); background: rgba(255, 246, 227, .08); box-shadow: inset 0 0 0 2px rgba(255, 246, 227, .35); }
.pr-btn.k-ghost:hover:not(:disabled) { background: rgba(255, 246, 227, .16); box-shadow: inset 0 0 0 2px rgba(255, 246, 227, .6); transform: none; }
.pr-btn.k-ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 2px rgba(255, 246, 227, .5); }
.pr-btn.sm { font-size: .82rem; padding: .5em .85em; min-height: 36px; box-shadow: 0 3px 0 var(--edge), 0 6px 10px rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .4); }
.pr-btn.lg { font-size: 1.35rem; padding: .8em 1.6em; border-radius: 18px; }
.pr-btn.icon-only { padding: .55em; min-width: 44px; }
.pr-btn.pulse { animation: pr-pulse 1.6s ease-in-out infinite; }
@keyframes pr-pulse { 0%, 100% { box-shadow: 0 5px 0 var(--edge), 0 9px 14px rgba(0, 0, 0, .28), 0 0 0 0 color-mix(in srgb, var(--bg) 70%, transparent); } 50% { box-shadow: 0 5px 0 var(--edge), 0 9px 14px rgba(0, 0, 0, .28), 0 0 0 10px transparent; } }

/* ------------------------------------------------------------------ label-maker strips, chips, stars */
.pr-label { display: inline-flex; align-items: center; gap: .45em; padding: .18em .7em; border-radius: 4px; background: linear-gradient(180deg, #2c3d3b, #1c2927); color: #f8f3e6; font-family: var(--pr-font-display); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 -1px 0 rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .4), 0 2px 0 rgba(0, 0, 0, .3); background-image: linear-gradient(180deg, #2c3d3b, #1c2927), repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px); background-blend-mode: normal, overlay; transform: rotate(var(--rot, 0deg)); }
.pr-label.amber { background: linear-gradient(180deg, #ffd35e, #f5b52a); color: #2b2412; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.pr-label.teal { background: linear-gradient(180deg, color-mix(in srgb, var(--pr-brand) 85%, #fff), var(--pr-brand)); color: #fff; }
.pr-label.paper { background: linear-gradient(180deg, #fffdf6, #efe4c8); color: var(--pr-ink); text-shadow: 0 1px 0 #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 0 rgba(0, 0, 0, .25); }
.pr-label.red { background: linear-gradient(180deg, #ff7a6b, #e5473a); color: #fff; }
.pr-label .ic { font-size: 1.1em; }
.pr-chip { display: inline-flex; align-items: center; gap: .35em; padding: .22em .6em .22em .5em; border-radius: 999px; background: rgba(255, 246, 227, .12); color: var(--pr-paper); font-size: .78rem; font-weight: 600; line-height: 1.2; box-shadow: inset 0 0 0 1.5px rgba(255, 246, 227, .28); white-space: nowrap; }
.pr-chip .ic { font-size: 1.05em; }
.pr-chip.warn { background: rgba(255, 182, 39, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 182, 39, .7); color: #ffe2a0; }
.pr-chip.bad { background: rgba(255, 90, 74, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 90, 74, .75); color: #ffc4bd; }
.pr-chip.good { background: rgba(63, 192, 110, .2); box-shadow: inset 0 0 0 1.5px rgba(63, 192, 110, .7); color: #bff0d0; }
.pr-chip.info { background: rgba(74, 168, 255, .2); box-shadow: inset 0 0 0 1.5px rgba(74, 168, 255, .7); color: #cfe6ff; }
.pr-chip.ink { background: rgba(29, 43, 42, .09); box-shadow: inset 0 0 0 1.5px rgba(29, 43, 42, .25); color: var(--pr-ink); }
.pr-chip.ink.warn { background: rgba(255, 182, 39, .28); color: #6b4a00; box-shadow: inset 0 0 0 1.5px rgba(214, 140, 0, .7); }
.pr-chip.ink.bad { background: rgba(255, 90, 74, .18); color: #8c1d12; box-shadow: inset 0 0 0 1.5px rgba(214, 60, 44, .6); }
.pr-chip.ink.good { background: rgba(63, 192, 110, .2); color: #17603a; box-shadow: inset 0 0 0 1.5px rgba(40, 150, 80, .6); }
.pr-chip.ink.info { background: rgba(74, 168, 255, .18); color: #1c5e9c; box-shadow: inset 0 0 0 1.5px rgba(50, 130, 215, .55); }
.pr-stars { display: inline-flex; gap: .12em; }
.pr-stars .ic { width: 1em; height: 1em; }
.pr-stars .on { color: var(--pr-brand-accent); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.pr-stars .off { color: rgba(29, 43, 42, .22); }
.pr-pips { display: inline-flex; gap: 3px; } .pr-pips i { width: .55em; height: .55em; border-radius: 50%; background: rgba(29, 43, 42, .2); } .pr-pips i.on { background: var(--pr-brand-accent); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }

/* ------------------------------------------------------------------ tags, paper, cardboard */
.pr-tag { position: relative; background: var(--pr-grain), linear-gradient(180deg, #fffdf6, #fff3d8); background-blend-mode: multiply, normal; color: var(--pr-ink); border-radius: 16px; box-shadow: var(--pr-shadow); padding: 34px 16px 16px; }
.pr-tag::before { content: ""; position: absolute; left: 50%; top: 9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle, #16302b 0 38%, var(--pr-kraft) 40% 66%, #a97438 67% 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .6), inset 0 1px 2px rgba(0, 0, 0, .5); z-index: 1; }
.pr-tag::after { content: ""; position: absolute; left: 50%; top: -22px; width: 60px; height: 40px; margin-left: -30px; border: 2.5px solid #dcc79b; border-color: #dcc79b transparent transparent transparent; border-radius: 50%; transform: rotate(var(--string, -8deg)); pointer-events: none; opacity: .9; }
.pr-tag.notag::before, .pr-tag.notag::after { display: none; }
.pr-tag.notag { padding-top: 16px; }
.pr-paper { background: var(--pr-grain), #fffbee; background-blend-mode: multiply, normal; color: var(--pr-ink); border-radius: 6px; box-shadow: var(--pr-shadow-sm); }
.pr-kraft { background: var(--pr-flute), var(--pr-grain), linear-gradient(180deg, var(--pr-kraft), var(--pr-kraft-2)); background-blend-mode: normal, multiply, normal; color: #2b1a08; border-radius: 14px; box-shadow: var(--pr-shadow); }
.pr-tape { position: absolute; width: 74px; height: 22px; background: linear-gradient(180deg, rgba(236, 211, 154, .9), rgba(219, 190, 120, .85)); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); opacity: .92; transform: rotate(var(--tr, -6deg)); }
.pr-tape::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, .25) 5px 6px); }
.pr-stamp { display: inline-block; padding: .1em .55em; border: 3px solid currentColor; border-radius: 8px; font-family: var(--pr-font-display); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); opacity: .9; mix-blend-mode: multiply; }
.pr-dotline { border: 0; border-top: 2px dashed rgba(29, 43, 42, .25); margin: .5em 0; }
.pr-portrait { display: block; border-radius: 50%; background: rgba(255, 246, 227, .1); box-shadow: 0 0 0 3px var(--pr-paper), 0 4px 0 3px rgba(0, 0, 0, .2); object-fit: cover; }
.pr-portrait.sq { border-radius: 12px; }

/* speech bubbles */
.pr-bubble { display: flex; gap: 14px; align-items: flex-start; }
.pr-bubble.right { flex-direction: row-reverse; }
.pr-bubble .av { flex: none; }
.pr-bubble .say { position: relative; background: var(--pr-card); color: var(--pr-ink); border-radius: 16px; padding: .7em 1em .8em; box-shadow: var(--pr-shadow-sm); flex: 1; min-width: 0; }
.pr-bubble .say::before { content: ""; position: absolute; left: -9px; top: 18px; width: 18px; height: 18px; background: var(--pr-card); transform: rotate(45deg); border-radius: 3px; }
.pr-bubble.right .say::before { left: auto; right: -9px; }
.pr-bubble .who { display: block; font-family: var(--pr-font-display); font-weight: 400; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-brand); margin-bottom: .2em; }
.pr-bubble .who .sig { font-family: var(--pr-font-ui); font-weight: 500; font-size: .72rem; letter-spacing: 0; text-transform: none; color: var(--pr-ink-soft); margin-left: .6em; }
.pr-bubble p { font-weight: 500; font-size: .98rem; }

/* toasts */
.pr-toast { display: inline-flex; align-items: center; gap: .55em; padding: .55em 1.05em; border-radius: 999px; background: #fff6e3; color: var(--pr-ink); font-weight: 600; box-shadow: var(--pr-shadow-sm); transform: translateY(-14px) scale(.96); opacity: 0; transition: transform .28s var(--pr-ease), opacity .22s; max-width: min(92vw, 520px); }
.pr-toast.in { transform: none; opacity: 1; }
.pr-toast.good { background: #d7f5e0; } .pr-toast.bad { background: #ffd9d3; } .pr-toast.gold { background: #ffe9a8; }

/* modal */
.pr-modal-back { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 24, 21, .62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.pr-modal-back.in { opacity: 1; }
.pr-modal { width: min(460px, 100%); max-height: 100%; overflow: auto; display: flex; gap: 14px; transform: translateY(16px) scale(.96); transition: transform .3s var(--pr-ease); padding-top: 32px; }
.pr-modal.wide { width: min(640px, 100%); }
.pr-modal-back.in .pr-modal { transform: none; }
.pr-modal .mp { flex: none; margin-top: 2px; }
.pr-modal .mb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .7em; }
.pr-modal h2 { font-size: 1.6rem; color: var(--pr-brand-dark); }
.pr-modal p { font-size: 1rem; color: var(--pr-ink-soft); font-weight: 500; }
.pr-modal .mbtn { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: .3em; }
@media (max-width: 460px) { .pr-modal { flex-direction: column; align-items: stretch; } .pr-modal .mp { align-self: center; } .pr-modal .mbtn .pr-btn { flex: 1; } }

/* tooltips: [data-tip] (desktop hover / keyboard focus) */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 220px; padding: .45em .75em; border-radius: 8px; background: #16302b; color: #fff6e3; font: 500 .8rem/1.3 var(--pr-font-ui); text-transform: none; letter-spacing: 0; text-align: left; z-index: 40; pointer-events: none; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); white-space: normal; }

.pr-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.pr-confetti i { position: absolute; top: 40%; border-radius: 2px; }

/* ------------------------------------------------------------------ loading screen (static markup in index.html) */
#pr-loading { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; padding: 24px; text-align: center; color: var(--pr-paper); background: linear-gradient(180deg, var(--pr-bg-1), var(--pr-bg-2) 55%, var(--pr-bg-3)); transition: opacity .5s ease; }
#pr-loading.gone { opacity: 0; pointer-events: none; }
#pr-loading .ld-title { font-family: var(--pr-font-display); font-size: clamp(2.6rem, 9vw, 5rem); letter-spacing: .06em; color: var(--pr-brand-accent); text-shadow: 0 5px 0 rgba(0, 0, 0, .3); }
#pr-loading .ld-sub { opacity: .8; font-weight: 500; letter-spacing: .04em; margin-top: -10px; }
#pr-loading .ld-bar { width: min(320px, 70vw); height: 12px; border-radius: 99px; background: rgba(255, 246, 227, .15); overflow: hidden; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
#pr-loading .ld-bar i { display: block; height: 100%; width: 8%; border-radius: 99px; background: repeating-linear-gradient(45deg, var(--pr-brand-accent) 0 12px, #e59a00 12px 24px); transition: width .5s ease-out; animation: pr-stripes 1s linear infinite; background-size: 34px 34px; }
@keyframes pr-stripes { to { background-position: 34px 0; } }
#pr-loading .ld-tip { max-width: min(520px, 88vw); min-height: 4.4em; }
#pr-loading .ld-tip small { display: block; text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; opacity: .7; margin-bottom: .5em; font-family: var(--pr-font-display); }
#pr-loading .ld-tip p { font-size: 1.15rem; font-weight: 500; animation: pr-tipin .5s ease both; }
#pr-loading .ld-by { display: flex; align-items: center; gap: 12px; opacity: .95; font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; }
@keyframes pr-tipin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ fatal / recovery */
.pr-fatal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(9, 25, 22, .9); color: var(--pr-paper); }
.pr-fatal .pr-tag { max-width: 460px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: .8em; align-items: center; }
.pr-fatal h2 { font-size: 1.8rem; color: var(--pr-brand-dark); }
.pr-fatal p { color: var(--pr-ink-soft); font-weight: 500; }
.pr-fatal details { text-align: left; font-size: .75rem; color: var(--pr-ink-soft); max-width: 100%; }
.pr-fatal pre { white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: auto; background: rgba(0, 0, 0, .06); padding: 6px; border-radius: 6px; user-select: text; }

/* ------------------------------------------------------------------ reduced motion */
html.pr-reduce *, html.pr-reduce *::before, html.pr-reduce *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
html.pr-reduce #pr-bg .ridge, html.pr-reduce #pr-bg .boxes i, html.pr-reduce #pr-bg .stars { animation: none !important; }