/* Corvus store styles: an app's details (in a sheet on the home page), its own page, and the install guide.
   Shared by the Corvus home page and every app. Everything is prefixed x- / st- to stay out of the apps' way. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("../shared/fonts/BricolageGrotesque24pt-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../shared/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../shared/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700 800; font-display: swap; src: url("../shared/fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("../shared/fonts/BricolageGrotesque24pt-ExtraBold.ttf") format("truetype"); }

:root {
  --x-bg: #EEF1F6;
  --x-paper: #FFFFFF;
  --x-fill: #E3E7EF;
  --x-ink: #14161C;
  --x-ink-2: #5F6573;
  --x-line: rgba(20, 22, 28, 0.1);
  --x-dim: rgba(14, 16, 24, 0.42);
  --x-glass: rgba(255, 255, 255, 0.72);
  --x-note: #FFE873;
  --x-note-ink: #4A3A00;
  --x-go: #14161C;
  --x-go-ink: #FFFFFF;
  --x-display: "Bricolage Grotesque", ui-rounded, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --x-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --x-spring: cubic-bezier(.2, .9, .25, 1.15);
  --x-ease: cubic-bezier(.3, .7, .2, 1);
  --x-top: env(safe-area-inset-top, 0px);
  --x-bottom: env(safe-area-inset-bottom, 0px);
  --x-gutter: max(20px, env(safe-area-inset-left, 0px));
}
@media (prefers-color-scheme: dark) {
  :root {
    --x-bg: #0D0F14; --x-paper: #171A21; --x-fill: #242833; --x-ink: #F3F4F7; --x-ink-2: #9AA0AD;
    --x-line: rgba(255, 255, 255, 0.1); --x-dim: rgba(0, 0, 0, 0.6); --x-glass: rgba(23, 26, 33, 0.72);
    --x-note: #F2D64B; --x-go: #F3F4F7; --x-go-ink: #14161C;
  }
}

:where(.x-root, .x-sheet, .st-guide-wrap) * { box-sizing: border-box; }
:where(.x-root, .x-sheet, .st-guide-wrap) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:where(.x-root, .x-sheet, .st-guide-wrap) a { color: inherit; text-decoration: none; }
.x-root :focus-visible, .x-sheet :focus-visible, .st-guide-wrap :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 12px; }
.x-root { font-family: var(--x-text); color: var(--x-ink); background: var(--x-bg); -webkit-font-smoothing: antialiased; }
.x-press { transition: transform .25s var(--x-spring); }
.x-press:active { transform: scale(.96); }

/* ---------- App poster (the top of an app's own page) ---------- */
.x-poster { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: flex; flex-direction: column; padding: calc(var(--x-top) + 18px) var(--x-gutter) calc(var(--x-bottom) + 92px); isolation: isolate; }

/* App poster */
.x-app { background: linear-gradient(165deg, var(--a1), var(--a2)); color: var(--a-ink); }
.x-app::before, .x-app::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); opacity: .55; }
.x-app::before { width: 70vw; height: 70vw; left: -20vw; top: 18%; background: var(--a2); }
.x-app::after { width: 60vw; height: 60vw; right: -18vw; bottom: 12%; background: var(--a1); }
.x-app .top { display: flex; align-items: center; justify-content: space-between; }
.x-tag { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 99px; background: color-mix(in srgb, var(--a-ink) 10%, transparent); }
.x-count { font-weight: 700; font-size: 13px; opacity: .7; font-variant-numeric: tabular-nums; }
.x-stage { flex: 1; display: grid; place-items: center; perspective: 800px; min-height: 0; }
.x-icon { width: min(56vw, 250px, 34vh); aspect-ratio: 1; border-radius: 23%; box-shadow: 0 30px 60px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.45); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--float, 0px)); transition: transform .2s ease-out; animation: x-float 5s ease-in-out infinite; }
@keyframes x-float { 50% { --float: -10px; translate: 0 -10px; } }
.x-card { background: var(--x-glass); color: var(--x-ink); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px); border-radius: 30px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.12); }
.x-card h2 { margin: 0; font-family: var(--x-display); font-weight: 800; font-size: clamp(36px, 11vw, 56px); line-height: .95; letter-spacing: -0.04em; }
.x-card p { margin: 0; color: var(--x-ink-2); font-size: 16px; line-height: 1.35; }
.x-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.x-chips span { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 99px; background: var(--x-fill); white-space: nowrap; }
.x-buttons { display: flex; gap: 10px; }
.x-peek { flex: 1; height: 56px; border-radius: 99px; font-weight: 700; font-size: 16px; background: var(--x-fill); display: flex; align-items: center; justify-content: center; gap: 6px; }
.x-peek svg { width: 18px; height: 18px; }

/* Hold-to-get button */
.x-get { position: relative; flex: 1.3; height: 56px; border-radius: 99px; background: var(--x-go); color: var(--x-go-ink); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .25s var(--x-spring); }
.x-get .fill { position: absolute; inset: 0; background: linear-gradient(90deg, #FF4D6D, #FF9F1C, #FFE14D, #4CD964, #3FA7FF, #A66BFF); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: .95; }
.x-get .lbl { position: relative; display: flex; align-items: center; gap: 8px; }
.x-get .lbl svg { width: 20px; height: 20px; }
.x-get.holding { transform: scale(.97); }
.x-get.holding .lbl, .x-get.got .lbl { color: #14161C; }
.x-get.got .fill { transform: scaleX(1); }
.x-get.soon { background: var(--x-fill); color: var(--x-ink-2); cursor: default; }
.x-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); background: var(--x-ink); color: var(--x-bg); font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 10px; white-space: nowrap; pointer-events: none; animation: x-tip 1.6s ease forwards; }
@keyframes x-tip { 0% { opacity: 0; transform: translate(-50%, 6px); } 15%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.x-get-wrap { position: relative; flex: 1.3; display: flex; }

/* ---------- Details sheet / page ---------- */
.x-sheet-wrap { position: fixed; inset: 0; z-index: 60; background: var(--x-dim); animation: x-fade .25s ease; }
.x-sheet-wrap.closing { animation: x-fade .25s ease reverse forwards; }
@keyframes x-fade { from { opacity: 0; } }
.x-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 680px; margin: 0 auto; height: calc(100% - var(--x-top) - 14px); background: var(--x-bg); color: var(--x-ink); font-family: var(--x-text); border-radius: 32px 32px 0 0; overflow-y: auto; overscroll-behavior: contain; animation: x-up .5s var(--x-ease); -webkit-font-smoothing: antialiased; }
.x-sheet-wrap.closing .x-sheet { animation: x-up .3s var(--x-ease) reverse forwards; }
@keyframes x-up { from { transform: translateY(100%); } }
.x-page { background: var(--x-bg); color: var(--x-ink); font-family: var(--x-text); min-height: 100vh; -webkit-font-smoothing: antialiased; }
.x-handle { position: sticky; top: 0; z-index: 5; display: flex; justify-content: center; padding: 10px 0 4px; background: linear-gradient(var(--x-bg) 60%, transparent); touch-action: none; cursor: grab; }
.x-handle i { width: 42px; height: 5px; border-radius: 99px; background: var(--x-ink-2); opacity: .35; }
.x-close { position: absolute; right: 14px; top: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--x-fill); display: grid; place-items: center; }
.x-close svg { width: 16px; height: 16px; }
.x-body { padding: 8px var(--x-gutter) calc(var(--x-bottom) + 48px); display: flex; flex-direction: column; gap: 28px; }

.x-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.x-head img { width: 84px; height: 84px; border-radius: 22%; box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.x-head h2 { margin: 0; font-family: var(--x-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.035em; }
.x-head p { margin: 4px 0 0; color: var(--x-ink-2); }
.x-head .x-buttons { grid-column: 1 / -1; }

.x-facts { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--x-gutter)); padding: 2px var(--x-gutter); }
.x-facts::-webkit-scrollbar { display: none; }
.x-fact { flex: none; min-width: 120px; padding: 14px 16px; border-radius: 22px; background: var(--f-bg); color: var(--f-ink); display: flex; flex-direction: column; gap: 2px; }
.x-fact small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.x-fact b { font-family: var(--x-display); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; line-height: 1.05; }
.x-fact span { font-size: 13px; opacity: .8; }

.x-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--x-ink-2); margin: 0 0 10px; }

.x-note { position: relative; background: var(--x-note); color: var(--x-note-ink); padding: 26px 20px 20px; border-radius: 6px 6px 22px 6px; transform: rotate(-1.4deg); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.x-note::before { content: ""; position: absolute; top: -10px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(2deg); background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.x-note h3 { margin: 0 0 8px; font-family: var(--x-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: baseline; }
.x-note h3 small { font-family: var(--x-text); font-size: 13px; font-weight: 700; opacity: .7; }
.x-note ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; line-height: 1.4; }

/* Screenshot deck */
.x-shots { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.x-shots .cap { font-family: var(--x-display); font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -0.03em; text-align: center; text-wrap: balance; min-height: 2.1em; display: grid; place-items: center; transition: color .3s; }
.x-stack { position: relative; width: min(64vw, 270px); aspect-ratio: 9 / 19.5; touch-action: pan-y; }
.x-stack figure { position: absolute; inset: 0; margin: 0; border-radius: 30px; overflow: hidden; background: var(--c-bg); box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 0 0 5px var(--c-bg); transition: transform .45s var(--x-spring), opacity .35s ease; cursor: pointer; }
.x-stack figure img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.x-stack figure.fly-l { transform: translateX(-130%) rotate(-16deg) !important; opacity: 0; }
.x-stack figure.fly-r { transform: translateX(130%) rotate(16deg) !important; opacity: 0; }
.x-pips { display: flex; gap: 6px; }
.x-pips i { width: 7px; height: 7px; border-radius: 99px; background: var(--x-ink-2); opacity: .3; transition: width .3s var(--x-spring), opacity .3s; }
.x-pips i.on { width: 22px; opacity: 1; background: var(--x-ink); }
.x-shots .help { font-size: 13px; color: var(--x-ink-2); }

.x-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.x-feat { border-radius: 22px; padding: 16px; background: color-mix(in srgb, var(--fc) 14%, var(--x-paper)); color: var(--x-ink); display: flex; flex-direction: column; gap: 6px; min-height: 130px; }
.x-feat:nth-child(5n + 1) { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; gap: 14px; }
.x-feat .e { font-size: 30px; line-height: 1; }
.x-feat b { font-family: var(--x-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: color-mix(in srgb, var(--fc) 70%, var(--x-ink)); }
.x-feat small { font-size: 14px; color: var(--x-ink-2); line-height: 1.35; }

.x-story p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; }
.x-story p:first-of-type { font-family: var(--x-display); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.x-story.clamped p:not(:first-of-type) { display: none; }
.x-more { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.x-info { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.x-info div { background: var(--x-paper); border-radius: 16px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.x-info dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--x-ink-2); }
.x-info dd { margin: 0; font-weight: 600; font-size: 15px; }
.x-try { text-align: center; }
.x-try a, .x-try button { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 8px; display: inline-block; }

.x-back { position: fixed; top: calc(var(--x-top) + 12px); left: var(--x-gutter); z-index: 40; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px 8px 10px; border-radius: 99px; background: var(--x-glass); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); font-weight: 700; font-size: 14px; color: var(--x-ink); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.x-back svg { width: 18px; height: 18px; }
.x-page .x-app { height: auto; min-height: 88vh; min-height: 88dvh; padding-bottom: 28px; }

/* Confetti */
.x-confetti { position: fixed; inset: 0; z-index: 6000; pointer-events: none; }

/* ---------- Install guide ---------- */
.st-guide-wrap { position: fixed; inset: 0; z-index: 5000; background: var(--x-dim); animation: x-fade .25s ease; font-family: var(--x-text); color: var(--x-ink); }
.st-guide { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--x-top) + 14px); width: min(420px, calc(100% - 28px)); background: var(--x-bg); border-radius: 32px; padding: 22px 20px 16px; box-shadow: 0 30px 70px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 14px; animation: st-drop .5s var(--x-spring); max-height: calc(100% - 170px); overflow-y: auto; }
.st-guide h3 { margin: 0 0 2px; font-family: var(--x-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.035em; display: flex; align-items: center; gap: 12px; }
.st-guide h3 img { width: 48px; height: 48px; border-radius: 12px; transform: rotate(-6deg); box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.st-step { display: flex; gap: 14px; align-items: flex-start; background: var(--x-paper); border-radius: 22px; padding: 14px; }
.st-num { width: 34px; height: 34px; border-radius: 12px; background: var(--n, #3FA7FF); color: #fff; font-family: var(--x-display); font-weight: 800; font-size: 18px; display: grid; place-items: center; flex: none; transform: rotate(-6deg); }
.st-step:nth-of-type(2) .st-num { --n: #FF4D6D; transform: rotate(5deg); }
.st-step:nth-of-type(3) .st-num { --n: #4CD964; }
.st-step > div > b { display: block; font-size: 16px; }
.st-step p { margin: 3px 0 0; color: var(--x-ink-2); font-size: 14px; line-height: 1.4; }
.st-glyph { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--x-fill); color: #0A84FF; vertical-align: middle; }
.st-glyph svg { width: 16px; height: 16px; }
.st-mock { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; background: var(--x-fill); border-radius: 12px; padding: 11px 14px; font-size: 15px; }
.st-mock svg { width: 20px; height: 20px; }
.st-guide .close { align-self: stretch; height: 52px; border-radius: 99px; background: var(--x-go); color: var(--x-go-ink); font-weight: 800; text-align: center; margin-top: 4px; }
.st-url { display: flex; gap: 8px; align-items: center; background: var(--x-paper); border-radius: 16px; padding: 12px 14px; font-size: 14px; word-break: break-all; }
.st-url button { font-weight: 700; flex: none; text-decoration: underline; }
.st-arrow { position: absolute; left: 50%; bottom: calc(var(--x-bottom) + 18px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 6px rgba(0,0,0,.5); animation: st-nudge 1.2s ease-in-out infinite; white-space: nowrap; }
.st-arrow svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
@keyframes st-nudge { 50% { transform: translate(-50%, 10px); } }
@keyframes st-drop { from { transform: translate(-50%, -30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

@media (min-width: 760px) {
  .x-poster { padding-inline: max(48px, calc((100vw - 640px) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
  .x-root *, .x-sheet *, .x-sheet-wrap, .st-guide-wrap, .st-guide-wrap * { animation: none !important; transition-duration: .001s !important; }
}

/* ======================================================================================================
   Theme: out at the end of the universe, in Corvus colours. Always night: a starfield, the universe ending
   in a blaze on the horizon, a flickering neon sign, apps that float like planets, and details in starlight
   on midnight. Ember is the one main button and the warm light; iris is the cool one.
   ====================================================================================================== */
:root {
  --x-bg: #0B0E1A; --x-paper: #1A1F33; --x-fill: #2A3150; --x-ink: #F4F1E8; --x-ink-2: #9AA3BD;
  --x-line: rgba(244, 241, 232, .14); --x-dim: rgba(4, 5, 12, .7); --x-glass: rgba(26, 31, 51, .72);
  --x-note: #F4F1E8; --x-note-ink: #0B0E1A; --x-go: #F2B544; --x-go-ink: #0B0E1A;
  --x-neon: #F2B544; --x-neon-2: #8FA8FF; --x-gold: #F2B544;
  --x-text: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --x-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  color-scheme: dark;
}
.x-root, .x-page, .x-sheet { background: var(--x-bg); color: var(--x-ink); }
/* Stars, in two layers that twinkle out of step. */
.x-root::before, .x-page::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #F4F1E8 50%, transparent 51%), radial-gradient(1px 1px at 72% 12%, #F4F1E8 50%, transparent 51%), radial-gradient(1.6px 1.6px at 33% 72%, #F2B544 50%, transparent 51%), radial-gradient(1px 1px at 88% 64%, #F4F1E8 50%, transparent 51%), radial-gradient(1.3px 1.3px at 52% 38%, #8FA8FF 50%, transparent 51%), radial-gradient(1px 1px at 8% 88%, #F4F1E8 50%, transparent 51%), radial-gradient(1.4px 1.4px at 64% 92%, #F4F1E8 50%, transparent 51%), radial-gradient(1px 1px at 92% 30%, #8FA8FF 50%, transparent 51%);
  background-size: 260px 260px; animation: x-twinkle 4s ease-in-out infinite alternate; }
.x-root::after, .x-page::after { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1px 1px at 22% 42%, #F4F1E8 50%, transparent 51%), radial-gradient(1.2px 1.2px at 80% 82%, #F4F1E8 50%, transparent 51%), radial-gradient(1px 1px at 46% 8%, #F4F1E8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 58%, #F2B544 50%, transparent 51%), radial-gradient(1px 1px at 6% 52%, #F4F1E8 50%, transparent 51%);
  background-size: 190px 190px; opacity: .7; animation: x-twinkle 3s ease-in-out infinite alternate-reverse, x-drift 120s linear infinite; }
@keyframes x-twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes x-drift { to { transform: translate(-190px, -190px); } }
/* The stars sit behind everything in their own layer, without changing how anything else is positioned. */
.x-root, .x-page { position: relative; isolation: isolate; }

/* Each app: its colours as a nebula, its icon floating in it like a planet. */
.x-app { --a-ink: var(--x-ink); color: var(--x-ink); background: radial-gradient(70% 45% at 25% 30%, color-mix(in srgb, var(--a1) 55%, transparent), transparent 70%), radial-gradient(60% 45% at 80% 75%, color-mix(in srgb, var(--a2) 50%, transparent), transparent 70%), transparent; }
.x-app::before, .x-app::after { opacity: .28; }
.x-tag { font-family: var(--x-serif); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 15px; background: rgba(242, 181, 68, .14); color: var(--x-gold); border: 1px solid rgba(242, 181, 68, .3); }
.x-count { color: var(--x-ink-2); opacity: 1; }
.x-stage { position: relative; }
.x-icon { box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 0 50px color-mix(in srgb, var(--a1) 55%, transparent), 0 30px 60px rgba(0,0,0,.5); }
.x-card { background: rgba(26, 31, 51, .72); color: var(--x-ink); border: 1px solid var(--x-line); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.x-card h2 { color: var(--x-ink); }
.x-dish { font-family: var(--x-serif); font-style: italic; font-size: 17px !important; color: var(--x-ink) !important; opacity: .9; }
.x-chips span { background: rgba(255,255,255,.08); border: 1px solid var(--x-line); }
.x-peek { background: rgba(255,255,255,.1); border: 1px solid var(--x-line); }
.x-get { background: var(--x-go); }
.x-get .fill { background: #F4F1E8; }
.x-get.holding .lbl, .x-get.got .lbl { color: #0B0E1A; }
.x-get.soon { background: rgba(255,255,255,.08); color: var(--x-ink-2); box-shadow: none; border: 1px dashed var(--x-line); }
.x-tip { background: var(--x-ink); color: var(--x-bg); }

/* Details */
.x-sheet { border: 1px solid var(--x-line); border-bottom: 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .45); }
.x-handle { background: linear-gradient(var(--x-bg) 60%, transparent); }
.x-handle i { background: var(--x-ink); }
.x-close { background: rgba(255,255,255,.1); }
.x-head h2, .x-label { color: var(--x-ink); }
.x-label { font-family: var(--x-serif); font-style: italic; text-transform: none; letter-spacing: .01em; font-size: 20px; font-weight: 600; color: var(--x-gold); display: flex; align-items: center; gap: 10px; }
.x-label::before, .x-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 181, 68, .45), transparent); }
.x-fact { box-shadow: 0 0 20px rgba(0,0,0,.4); }
.x-note { font-family: var(--x-serif); }
.x-note h3 { font-family: var(--x-serif); font-style: italic; }
.x-feat { background: color-mix(in srgb, var(--fc) 18%, var(--x-paper)); border: 1px solid var(--x-line); }
.x-feat b { color: color-mix(in srgb, var(--fc) 45%, #F4F1E8); }
.x-story p:first-of-type { font-family: var(--x-serif); font-style: italic; font-weight: 600; }
.x-info div { background: var(--x-paper); border: 1px solid var(--x-line); }
.x-back { background: rgba(26, 31, 51, .75); color: var(--x-ink); border: 1px solid var(--x-line); }
.x-pips i.on { background: var(--x-gold); }

/* Install guide */
.st-guide { background: var(--x-paper); border: 1px solid var(--x-line); box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.st-guide h3 span { display: flex; flex-direction: column; gap: 4px; }
.st-guide h3 { font-size: 34px; color: #F4F1E8; text-shadow: 0 0 14px var(--x-neon); }
.st-guide h3 small { font-family: var(--x-text); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--x-ink-2); text-shadow: none; }
.st-step, .st-url { background: rgba(255,255,255,.06); border: 1px solid var(--x-line); }
.st-mock, .st-glyph { background: rgba(255,255,255,.1); }
.st-guide .close { background: var(--x-go); color: var(--x-go-ink); }
.st-guide .st-step:nth-of-type(n) .st-num { --n: var(--x-fill); color: var(--x-gold); }
.st-num svg { width: 20px; height: 20px; }

/* Part of Corvus: on each app's own page, where people get it. */
.x-corvus { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #1A1F33; border: 1px solid var(--x-line); color: #F4F1E8; font-family: var(--x-text); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.x-corvus i { width: 8px; height: 8px; border-radius: 50%; background: #F2B544; }