/* "The Case File" preview: calm deep-space atmosphere + a forensics desk. Decoration (sky, orbits,
   dust) is illustrative only; every exhibit's content comes from a live lookup in case.js. */
:root {
  --bg: #04060d; --ink: #e9eefb; --soft: #a3afcf; --faint: #6f7b9c; --line: rgb(255 255 255 / .09);
  --accent: #6f95ff; --cyan: #5ee7ff; --ok: #4ade80; --bad: #fb923c; --warn: #fbbf24; --paper: #10172b; --paper2: #0b1122;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 Geist, -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--accent); }
[hidden] { display: none !important; }

/* Sky */
.cf-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(900px 600px at 50% 18%, rgb(36 64 160 / .32), transparent 70%), radial-gradient(700px 500px at 85% 80%, rgb(124 58 237 / .14), transparent 70%), radial-gradient(800px 500px at 10% 90%, rgb(14 116 144 / .12), transparent 70%); }
.cf-orbit { position: absolute; left: 50%; top: 30%; border: 1px solid rgb(140 170 255 / .16); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.cf-orbit.o1 { width: 620px; height: 240px; } .cf-orbit.o2 { width: 980px; height: 380px; border-color: rgb(140 170 255 / .1); } .cf-orbit.o3 { width: 1400px; height: 540px; border-color: rgb(140 170 255 / .06); }
.cf-orbit::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); top: -2.5px; left: 50%; opacity: .7; }
.cf-orbit.o1 { animation: cf-spin 90s linear infinite; } .cf-orbit.o2 { animation: cf-spin 140s linear infinite reverse; } .cf-orbit.o3 { animation: cf-spin 220s linear infinite; }
.cf-dust { position: absolute; inset: -50%; opacity: .5; background-image: radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 140px 90px, #cfe0ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 260px 180px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 330px 40px, #9fb7ff 50%, transparent 51%); background-size: 380px 260px; animation: cf-drift 160s linear infinite; }
@keyframes cf-spin { to { transform: translate(-50%, -50%) rotate(342deg); } }
@keyframes cf-drift { to { transform: translate(380px, 260px); } }

/* Top bar */
.cf-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); background: linear-gradient(var(--bg), rgb(4 6 13 / .6) 70%, transparent); backdrop-filter: blur(6px); }
.cf-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 650; letter-spacing: -.01em; }
.cf-brand em { font-style: normal; font-weight: 500; color: var(--faint); }
.cf-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #2f5bea; box-shadow: 0 0 20px rgb(47 91 234 / .5); }
.cf-nav { display: flex; align-items: center; gap: 8px; }
.cf-link { font: inherit; font-size: 14px; color: var(--soft); background: none; border: 1px solid transparent; border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.cf-link:hover { color: var(--ink); border-color: var(--line); }
.cf-cta { font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; background: #2f5bea; padding: 8px 14px; border-radius: 10px; box-shadow: 0 8px 24px -8px rgb(47 91 234 / .8); }
.cf-history { position: fixed; right: clamp(16px, 4vw, 40px); top: 62px; z-index: 11; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 14px; background: rgb(12 18 36 / .96); border: 1px solid var(--line); box-shadow: 0 30px 60px -20px #000; }
.cf-history ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.cf-history a { color: var(--ink); text-decoration: none; } .cf-history a:hover { color: var(--cyan); }

.cf-k { margin: 0; font: 600 11.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* 1. Entry */
.cf-entry { min-height: calc(100vh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 16px 60px; }
.cf-eyebrow { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); opacity: 0; animation: cf-up .8s ease .2s both; }
.cf-title { margin: 18px 0 0; font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.02; font-weight: 650; letter-spacing: -.035em; opacity: 0; animation: cf-up 1s cubic-bezier(.16,1,.3,1) .5s both;
  background: linear-gradient(180deg, #fff 30%, #9fb4ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cf-sub { max-width: 560px; margin: 16px 0 0; color: var(--soft); font-size: 1.08rem; opacity: 0; animation: cf-up 1s ease .9s both; }
.cf-folder { position: relative; width: min(560px, 100%); margin-top: 46px; text-align: left; opacity: 0; animation: cf-folder 1.2s cubic-bezier(.16,1,.3,1) 1.2s both; transform-origin: 50% 100%; }
.cf-folder::before { content: ""; position: absolute; left: 50%; top: -120px; width: 520px; height: 420px; transform: translateX(-50%); z-index: -1; background: radial-gradient(closest-side, rgb(120 150 255 / .22), transparent); filter: blur(10px); animation: cf-light 2.4s ease 1.4s both; }
.cf-tab { display: inline-block; margin-left: 22px; padding: 7px 16px 5px; border-radius: 10px 10px 0 0; font: 600 11px/1 var(--mono); letter-spacing: .2em; color: #c8d4f5; background: linear-gradient(180deg, #1a2443, #141d38); border: 1px solid rgb(255 255 255 / .1); border-bottom: 0; }
.cf-folder-face { padding: 22px 24px 20px; border-radius: 4px 16px 16px 16px; background: linear-gradient(170deg, #182241 0%, #10182f 60%, #0d142a 100%); border: 1px solid rgb(255 255 255 / .1);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 50px 120px -40px rgb(47 91 234 / .55), 0 30px 60px -30px #000; transition: transform .6s cubic-bezier(.7,0,.3,1), opacity .5s; }
.cf-label-row { margin-top: 8px; border-bottom: 2px solid rgb(111 149 255 / .5); }
.cf-label-row input { width: 100%; border: 0; background: transparent; outline: none; color: #fff; font: 600 clamp(1.4rem, 4vw, 1.9rem)/1.4 var(--mono); letter-spacing: -.01em; padding: 4px 0 8px; }
.cf-label-row input::placeholder { color: rgb(255 255 255 / .22); }
.cf-label-row:focus-within { border-color: var(--cyan); box-shadow: 0 10px 24px -14px var(--cyan); }
.cf-folder-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.cf-open { font: 600 15px/1 Geist, system-ui, sans-serif; color: #04102e; background: linear-gradient(180deg, #e9f0ff, #b9cbff); border: 0; padding: 12px 18px; border-radius: 11px; cursor: pointer; box-shadow: 0 10px 30px -10px rgb(150 180 255 / .8); }
.cf-open:disabled { opacity: .6; cursor: progress; }
.cf-folder.opening .cf-folder-face { transform: perspective(900px) rotateX(70deg) translateY(-20px); opacity: 0; }
.cf-legend { margin: 28px 0 0; font-size: 13px; color: var(--faint); opacity: 0; animation: cf-up 1s ease 2.2s both; }
.lg { font-weight: 600; } .lg.live { color: var(--cyan); } .lg.sealed { color: #c4b5fd; } .lg.na { color: var(--warn); }
@keyframes cf-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cf-folder { from { opacity: 0; transform: translateY(40px) rotateX(12deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cf-light { from { opacity: 0; } to { opacity: 1; } }

/* 2. The case */
.cf-case { max-width: 1180px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 40px) 40px; }
.cf-case-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cf-case-title { margin: 6px 0 0; font: 600 clamp(1.7rem, 4vw, 2.6rem)/1.1 var(--mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cf-case-meta { margin: 6px 0 0; color: var(--faint); font-size: 14px; }
.cf-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; }
.cf-closed { grid-column: 1 / -1; padding: 24px; border-radius: 14px; border: 1px dashed var(--line); color: var(--soft); }

.cf-ex { position: relative; display: flex; flex-direction: column; min-height: 230px; perspective: 1200px; }
.cf-ex-inner { position: relative; flex: 1; display: grid; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,.1,.2,1); }
.cf-ex.flipped .cf-ex-inner { transform: rotateY(180deg); }
.cf-ex-front, .cf-ex-back { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 16px 16px 12px; border-radius: 14px; background: linear-gradient(170deg, var(--paper), var(--paper2)); border: 1px solid var(--line); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: auto; }
.cf-ex-back { transform: rotateY(180deg); font-size: 14px; color: var(--soft); }
.cf-ex-back p { margin: 0 0 8px; } .cf-q { margin-top: 6px !important; font: 600 11px/1.3 var(--mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan) !important; }
.cf-ex-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cf-ex-letter { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.cf-ex-state { font: 600 11.5px/1.2 var(--mono); color: var(--faint); text-align: right; }
.cf-ex-title { margin: 10px 0 8px; font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }
.cf-raw { margin: 0; max-height: 150px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .06); color: #d7e2ff; font: 500 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-raw.fix { color: #bbf7d0; border-color: rgb(74 222 128 / .25); }
.cf-ex-empty { margin: 0; color: var(--soft); font-size: 14px; }
.cf-ex-note { margin: 8px 0 0; color: var(--faint); font-size: 12.5px; }
.cf-ex-wait { margin: 0; font: 500 12.5px/1.5 var(--mono); color: var(--faint); }
.cf-ex-wait::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--cyan); animation: cf-pulse 1.1s ease-in-out infinite; vertical-align: middle; }
.cf-ex-foot { margin: auto 0 0; padding-top: 10px; font: 500 10.5px/1.3 var(--mono); color: var(--faint); }
.cf-flip { margin-top: 8px; align-self: flex-start; font: 600 13px/1 Geist, system-ui, sans-serif; color: var(--ink); background: rgb(255 255 255 / .05); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.cf-flip:disabled { opacity: .35; cursor: default; }
.cf-flip:not(:disabled):hover { border-color: rgb(94 231 255 / .5); }
@keyframes cf-pulse { 50% { opacity: .25; transform: scale(.8); } }

.cf-ex.pending .cf-ex-front { border-style: dashed; }
.cf-ex.arrived .cf-ex-front { animation: cf-land .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes cf-land { from { opacity: .4; transform: translateY(8px); box-shadow: 0 0 0 1px var(--cyan), 0 0 40px rgb(94 231 255 / .35); } to { opacity: 1; transform: none; } }
.cf-ex.ok .cf-ex-front { border-color: rgb(74 222 128 / .3); } .cf-ex.ok .cf-ex-state { color: var(--ok); }
.cf-ex.bad .cf-ex-front { border-color: rgb(251 146 60 / .35); } .cf-ex.bad .cf-ex-state { color: var(--bad); }
.cf-ex.warn .cf-ex-front { border-color: rgb(251 191 36 / .3); } .cf-ex.warn .cf-ex-state { color: var(--warn); }
.cf-ex.na .cf-ex-front { border-color: rgb(251 191 36 / .3); } .cf-ex.na .cf-ex-state { color: var(--warn); }
.cf-ex.sealed { min-height: 220px; }
.cf-ex.sealed .cf-ex-front { height: 100%; background: repeating-linear-gradient(135deg, rgb(139 92 246 / .05) 0 10px, transparent 10px 20px), linear-gradient(170deg, #141433, #0c0f24); border-color: rgb(167 139 250 / .25); }
.cf-ex.sealed .cf-ex-state { color: #c4b5fd; }
.cf-seal-cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: #c4b5fd; text-decoration: none; }

/* 3. Notes + 4. Report */
.cf-notes { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: rgb(255 255 255 / .03); border: 1px solid var(--line); }
.cf-note-list { margin: 10px 0 0; padding-left: 18px; color: var(--soft); font-size: 14.5px; display: grid; gap: 6px; }
.cf-note-list li.medium, .cf-note-list li.high { color: #fed7aa; } .cf-note-list li.ok { color: #bbf7d0; }
.cf-report { position: relative; margin-top: 18px; padding: clamp(20px, 4vw, 34px); border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #13204a, #0b1229 60%); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 60px 120px -60px rgb(47 91 234 / .7); animation: cf-up .8s cubic-bezier(.16,1,.3,1) both; }
.cf-report::after { content: "SURFACEWATCH · INTELLIGENCE REPORT"; position: absolute; right: -40px; top: 26px; transform: rotate(8deg); font: 700 12px/1 var(--mono); letter-spacing: .3em; color: rgb(255 255 255 / .05); white-space: nowrap; }
.cf-report.is-safe { border-color: rgb(74 222 128 / .35); } .cf-report.is-risk { border-color: rgb(251 146 60 / .35); }
.cf-verdict { margin: 8px 0 0; font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.08; letter-spacing: -.03em; }
.is-safe .cf-verdict { color: #bbf7d0; } .is-risk .cf-verdict { color: #fed7aa; }
.cf-scope { margin: 8px 0 0; color: var(--soft); max-width: 720px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cf-chips span { font: 700 13px/1 Geist, system-ui; padding: 7px 12px; border-radius: 999px; }
.cf-chips .ok { background: rgb(74 222 128 / .14); color: #86efac; } .cf-chips .no { background: rgb(248 113 113 / .14); color: #fca5a5; } .cf-chips .aside { background: rgb(255 255 255 / .06); color: var(--soft); font-weight: 600; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cf-btn { display: inline-flex; align-items: center; font: 600 14px/1 Geist, system-ui, sans-serif; padding: 11px 15px; border-radius: 11px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .05); color: var(--ink); cursor: pointer; text-decoration: none; }
.cf-btn.x { background: #000; border-color: #333; } .cf-btn.li { background: #0a66c2; border-color: #0a66c2; }
.cf-btn.install { margin-top: 12px; background: linear-gradient(180deg, #e9f0ff, #b9cbff); color: #04102e; border: 0; }
.cf-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--faint); }
.cf-foot { max-width: 1180px; margin: 30px auto 0; padding: 24px clamp(16px, 4vw, 40px) 50px; color: var(--faint); font-size: 13px; border-top: 1px solid var(--line); }

/* Mobile: an evidence feed, not a squeezed board */
@media (max-width: 640px) {
  .cf-orbit { top: 22%; }
  .cf-entry { min-height: auto; padding-top: 40px; }
  .cf-folder-foot { flex-direction: column; align-items: stretch; } .cf-open { width: 100%; padding: 15px; }
  .cf-board { grid-template-columns: 1fr; gap: 10px; }
  .cf-ex { min-height: 0; perspective: none; }
  .cf-ex-inner { transform: none !important; }
  .cf-ex-inner { display: block; }
  .cf-ex-back { display: none; transform: none; margin-top: 8px; }
  .cf-ex.flipped .cf-ex-back { display: flex; }
  .cf-flip { width: 100%; padding: 12px; }
  .cf-actions .cf-btn, .cf-btn.install { width: 100%; justify-content: center; }
  .cf-nav .cf-link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cf-eyebrow, .cf-title, .cf-sub, .cf-folder, .cf-legend { opacity: 1; }
  .cf-ex.flipped .cf-ex-inner { transform: none; }
  .cf-ex-inner { display: block; }
  .cf-ex-back { transform: none; display: none; margin-top: 8px; }
  .cf-ex.flipped .cf-ex-back { display: flex; }
}

/* ---------- Refinement: records, report seal, evidence breakdown ---------- */
.cf-rec { display: grid; gap: 6px; }
.cf-rec-bar { display: flex; align-items: center; gap: 6px; }
.cf-rec-label { flex: 1; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cf-rec-btn { font: 600 11.5px/1 Geist, system-ui, sans-serif; color: var(--soft); background: rgb(255 255 255 / .05); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; cursor: pointer; }
.cf-rec-btn:hover { color: var(--ink); border-color: rgb(94 231 255 / .45); }
.cf-raw { word-break: break-word; }
.cf-raw.readable { color: #e7eeff; }
.cf-ex-reads { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #c7d3f3; }
.cf-note-list { list-style: none; padding-left: 0; }
.cf-note-list li { position: relative; padding: 8px 10px 8px 12px; border-radius: 10px; background: rgb(255 255 255 / .025); border-left: 3px solid var(--faint); }
.cf-note-list li.ok { border-left-color: var(--ok); color: #d9fbe6; } .cf-note-list li.bad { border-left-color: var(--bad); color: #fed7aa; } .cf-note-list li.info { border-left-color: var(--accent); }
.cf-note-ref { margin-right: 8px; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

.cf-report-top { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); }
.cf-report-words { min-width: 0; }
.cf-scope.small { font-size: 13px; color: var(--faint); }
.cf-seal { flex: none; width: clamp(110px, 16vw, 150px); height: auto; transform: rotate(-8deg); filter: drop-shadow(0 18px 40px rgb(0 0 0 / .5)); animation: cf-stamp .7s cubic-bezier(.2,1.4,.4,1) .15s both; }
.cf-seal .s-outer { fill: none; stroke: var(--seal); stroke-width: 3; } .cf-seal .s-inner { fill: none; stroke: var(--seal); stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.cf-seal .s-core { fill: color-mix(in srgb, var(--seal) 16%, transparent); stroke: var(--seal); stroke-width: 1.5; }
.cf-seal .s-ring { font: 700 9.6px/1 var(--mono); letter-spacing: 2.2px; fill: var(--seal); }
.cf-seal .s-mark { font: 800 34px/1 system-ui, sans-serif; fill: var(--seal); text-anchor: middle; }
.cf-seal .s-word { font: 800 10.5px/1 var(--mono); letter-spacing: 1.5px; fill: var(--seal); text-anchor: middle; }
.cf-seal.safe { --seal: #4ade80; } .cf-seal.partial { --seal: #fbbf24; } .cf-seal.risk { --seal: #fb923c; } .cf-seal.inconclusive { --seal: #94a3b8; }
@keyframes cf-stamp { from { opacity: 0; transform: rotate(-24deg) scale(1.6); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.is-partial .cf-verdict { color: #fde68a; } .is-inconclusive .cf-verdict { color: #cbd5e1; }
.cf-report.is-partial { border-color: rgb(251 191 36 / .35); }
.cf-gap { margin-top: 22px !important; }
.cf-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cf-count { font-size: 13px; padding: 6px 10px; border-radius: 999px; background: rgb(255 255 255 / .05); color: var(--soft); }
.cf-count b { color: var(--ink); }
.cf-breakdown { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; margin-top: 12px; }
.cf-row { display: grid; grid-template-columns: 22px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; padding: 9px 11px; border-radius: 10px; background: rgb(0 0 0 / .22); border: 1px solid var(--line); }
.cf-row-l { grid-row: span 2; font: 700 12px/1.6 var(--mono); color: var(--faint); }
.cf-row-t { font-size: 13.5px; font-weight: 600; }
.cf-row-s { font: 600 10.5px/1.7 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cf-row-d { grid-column: 2 / 4; font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.s-verified .cf-row-s, .cf-count.s-verified b { color: var(--ok); }
.s-missing .cf-row-s, .s-weak .cf-row-s, .cf-count.s-missing b, .cf-count.s-weak b { color: var(--bad); }
.s-unavailable .cf-row-s, .s-timeout .cf-row-s, .cf-count.s-unavailable b, .cf-count.s-timeout b { color: var(--warn); }
.s-sealed .cf-row-s, .cf-count.s-sealed b { color: #c4b5fd; }
.s-info .cf-row-s, .s-optional .cf-row-s, .s-pending .cf-row-s { color: var(--soft); }
@media (max-width: 640px) {
  .cf-report-top { flex-direction: column; align-items: flex-start; }
  .cf-seal { width: 112px; }
  .cf-breakdown { grid-template-columns: 1fr; }
  .cf-raw { font-size: 11.5px; }
}
@media (max-width: 380px) {
  .cf-brand em { display: none; }
  .cf-cta { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
}
.cf-skip { margin-top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--soft); text-decoration: none; border: 1px solid var(--line); background: rgb(255 255 255 / .03); opacity: 0; animation: cf-up 1s ease 1.8s both; }
.cf-skip:hover { color: var(--ink); border-color: rgb(94 231 255 / .45); }
@media (prefers-reduced-motion: reduce) { .cf-skip { opacity: 1; } }

/* Performance (Firefox): static star dust, no backdrop blur on the sticky bar. */
.cf-dust { animation: none; inset: 0; }
.cf-top { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(var(--bg), rgb(4 6 13 / .92) 70%, rgb(4 6 13 / 0)); }
.cf-orbit { will-change: transform; }
.cf-sky { will-change: transform; transform: translateZ(0); }