/*! Unpixel — generated by tools/build.mjs from website/src/styles. Do not edit. */
/* src/styles/base.css */
:root {color-scheme: light dark;--paper: #f3f1ec;--paper-2: #ebe8e1;--paper-3: #e2ded5;--card: #fbfaf7;--surface: #ffffff;--ink: #0d0d10;--ink-2: #3f3e44;--ink-3: #67666c;--line: rgba(13, 13, 16, 0.08);--line-2: rgba(13, 13, 16, 0.14);--night: #0a0b10;--night-2: #12141c;--night-3: #1a1d28;--night-ink: #f2f1ee;--night-ink-2: rgba(242, 241, 238, 0.76);--night-ink-3: rgba(242, 241, 238, 0.6);--night-line: rgba(255, 255, 255, 0.1);--select: #3b6cff;--select-fill: rgba(59, 108, 255, 0.14);--select-ink: #2a55e0;--focus: #3b6cff;--ok: #15803d;--ok-bright: #30c46a;--new: #3465f8;--warn-bg: #fff4c2;--warn-ink: #5c4400;--grad: linear-gradient(100deg, #2b7bff 0%, #5a5cf6 48%, #a15af3 100%);--dawn-sky: #96a8da;--dawn-haze: #c5c4e7;--dawn-glow: #f2e0dd;--dawn-ridge: #413c5d;--morning-sky: #6c98df;--morning-haze: #b2d9ec;--morning-ridge: #214836;--dusk-sky: #44335a;--dusk-violet: #735195;--dusk-rose: #dc81a5;--dusk-ridge: #0d071d;--night-sky: #1d2133;--night-horizon: #253562;--night-ridge: #070b1c;--btn-bg: #0d0d10;--btn-ink: #ffffff;--btn-bg-hover: #26262c;--nav-bg: rgba(251, 250, 247, 0.72);--nav-bg-solid: rgba(251, 250, 247, 0.92);--nav-ink: var(--ink);--nav-ink-2: var(--ink-2);--nav-line: rgba(13, 13, 16, 0.08);--glass-bg: rgba(255, 255, 255, 0.56);--glass-line: rgba(255, 255, 255, 0.7);--glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -12px 24px rgba(255, 255, 255, 0.14);--glass-blur: blur(22px) saturate(170%);--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--fs-mega: clamp(4rem, 1.2rem + 12.4vw, 13.75rem);--fs-display: clamp(2.875rem, 1.917rem + 4.26vw, 5.75rem);--fs-h2: clamp(2.25rem, 1.667rem + 2.593vw, 4rem);--fs-h3: clamp(1.3125rem, 1.167rem + 0.648vw, 1.75rem);--fs-h4: 1.125rem;--fs-lead: clamp(1.125rem, 1.0625rem + 0.278vw, 1.3125rem);--fs-body: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);--fs-small: 0.8125rem;--fs-eyebrow: 0.78125rem;--track-display: -0.045em;--track-h2: -0.04em;--track-h3: -0.02em;--s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;--s5: 48px; --s6: 64px; --s7: 96px; --s8: 144px;--sec-y-lg: clamp(80px, 4.4rem + 6.3vw, 144px);--sec-y: clamp(56px, 2.9rem + 3.7vw, 96px);--sec-y-sm: clamp(40px, 2rem + 2.2vw, 64px);--shell: 1200px;--shell-wide: 1440px;--shell-narrow: 960px;--shell-text: 720px;--gutter: clamp(16px, 4vw, 40px);--nav-h: 56px;--nav-top: 14px;--r-xs: 8px;--r-btn: 12px;--r-nav: 16px;--r-card: 24px;--r-media: 28px;--r-stage: 40px;--r-pill: 999px;--sh-1: 0 1px 2px rgba(20, 22, 40, 0.05), 0 12px 32px -16px rgba(20, 22, 40, 0.18);--sh-2: 0 1px 2px rgba(20, 22, 40, 0.05), 0 24px 60px -24px rgba(20, 22, 40, 0.26);--sh-float: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 80px -24px rgba(20, 22, 40, 0.28);--sh-glow: 0 60px 120px -40px rgba(59, 108, 255, 0.25);--sh-deep: 0 2px 4px rgba(20, 22, 40, 0.05), 0 50px 120px -40px rgba(20, 22, 40, 0.45);--ease-out: cubic-bezier(0.19, 1, 0.22, 1);--ease-ui: cubic-bezier(0.3, 0.7, 0.2, 1);--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);--ease-spring: linear(0, 0.064, 0.209, 0.383, 0.554, 0.703, 0.822, 0.911, 0.971, 1.009, 1.029, 1.038, 1.038, 1.034, 1.027, 1.02, 1.014, 1.009, 1.005, 1.002, 1, 0.999, 1);--t-ui: 200ms;--t-swap: 400ms;--t-reveal: 800ms;--t-focus: 900ms;--rise: 20px;}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) {--paper: #121317;--paper-2: #17181d;--paper-3: #1e1f25;--card: #1a1b21;--surface: #202128;--ink: #f2f1ee;--ink-2: #c9c7c1;--ink-3: #9d9b95;--line: rgba(255, 255, 255, 0.08);--line-2: rgba(255, 255, 255, 0.14);--night: #07080c;--night-2: #0e1016;--night-3: #161821;--select-ink: #8aa6ff;--ok: #3ccf7f;--warn-bg: #3a3000;--warn-ink: #ffe27a;--btn-bg: #f2f1ee;--btn-ink: #0d0d10;--btn-bg-hover: #ffffff;--nav-bg: rgba(30, 31, 37, 0.66);--nav-bg-solid: rgba(30, 31, 37, 0.9);--nav-line: rgba(255, 255, 255, 0.1);--glass-bg: rgba(40, 42, 52, 0.5);--glass-line: rgba(255, 255, 255, 0.12);--glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -12px 24px rgba(255, 255, 255, 0.03);--sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.6);--sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px -24px rgba(0, 0, 0, 0.7);--sh-float: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 80px -24px rgba(0, 0, 0, 0.7);--sh-deep: 0 2px 4px rgba(0, 0, 0, 0.4), 0 50px 120px -40px rgba(0, 0, 0, 0.85);}}
:root[data-theme="dark"] { color-scheme: dark; }
[data-stage="night"], .on-night {color-scheme: dark;--ink: var(--night-ink);--ink-2: var(--night-ink-2);--ink-3: var(--night-ink-3);--line: var(--night-line);--line-2: rgba(255, 255, 255, 0.16);--card: var(--night-2);--surface: var(--night-3);--paper-2: var(--night-2);--select-ink: #8aa6ff;--btn-bg: #f2f1ee;--btn-ink: #0d0d10;--btn-bg-hover: #ffffff;--glass-bg: rgba(255, 255, 255, 0.07);--glass-line: rgba(255, 255, 255, 0.14);--glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -12px 24px rgba(255, 255, 255, 0.03);--sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.7);--sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px -24px rgba(0, 0, 0, 0.8);--sh-float: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 80px -24px rgba(0, 0, 0, 0.8);background-color: var(--night);color: var(--ink);}
[data-stage="light"], .on-light {color-scheme: light;--paper: #f3f1ec;--paper-2: #ebe8e1;--card: #fbfaf7;--surface: #ffffff;--ink: #0d0d10;--ink-2: #3f3e44;--ink-3: #5f5e64;--line: rgba(13, 13, 16, 0.08);--line-2: rgba(13, 13, 16, 0.14);--select-ink: #2a55e0;--btn-bg: #0d0d10;--btn-ink: #ffffff;--btn-bg-hover: #26262c;--glass-bg: rgba(255, 255, 255, 0.56);--glass-line: rgba(255, 255, 255, 0.7);--glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -12px 24px rgba(255, 255, 255, 0.14);color: var(--ink);}
*, *::before, *::after { box-sizing: border-box; }
html {-webkit-text-size-adjust: 100%;text-size-adjust: 100%;scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + 16px);}
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
body {margin: 0;background: var(--paper);color: var(--ink);font-family: var(--font);font-size: var(--fs-body);line-height: 1.53;letter-spacing: -0.011em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;overflow-x: clip;}
main { display: block; overflow-x: clip; }
[hidden] { display: none !important; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
picture > img { width: 100%; }
a { color: inherit; text-decoration: none; }
:where(p, li, dd, td, .callout) a:where(:not([class])), .link {color: var(--select-ink);text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 3px;text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);}
:where(p, li, dd, td, .callout) a:where(:not([class])):hover, .link:hover { text-decoration-color: currentColor; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--ink); font-weight: 700; }
p, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd, samp, pre { font-family: var(--mono); }
::selection { background: var(--select-fill); background: color-mix(in srgb, var(--select) 26%, transparent); }
:focus-visible {outline: 2.5px solid var(--focus);outline-offset: 3px;border-radius: 6px;}
[data-stage="night"] :focus-visible, .on-night :focus-visible { outline-color: #8aa6ff; }
.skip-link {position: absolute;left: 16px;top: -64px;z-index: 300;padding: 10px 16px;border-radius: var(--r-btn);background: var(--btn-bg);color: var(--btn-ink);font-weight: 600;transition: top var(--t-ui) var(--ease-ui);}
.skip-link:focus { top: 16px; }
.sr-only {position: absolute !important;width: 1px; height: 1px;padding: 0; margin: -1px;overflow: hidden; clip: rect(0 0 0 0);white-space: nowrap; border: 0;}
.wrap {width: 100%;max-width: calc(var(--shell) + var(--gutter) * 2);margin-inline: auto;padding-inline: var(--gutter);}
.wrap-wide { max-width: calc(var(--shell-wide) + var(--gutter) * 2); }
.wrap-narrow { max-width: calc(var(--shell-narrow) + var(--gutter) * 2); }
.wrap-text { max-width: calc(var(--shell-text) + var(--gutter) * 2); }
.bleed { width: 100%; position: relative; }
.section { position: relative; padding-block: var(--sec-y); }
.section-lg { padding-block: var(--sec-y-lg); }
.section-flush { padding-top: 0; }
.grid { display: grid; gap: var(--s3); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.stack > * + * { margin-top: var(--stack, var(--s2)); }
@media (max-width: 960px) { .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); } }
.mega {font-family: var(--font-display);font-size: var(--fs-mega);font-weight: 800;line-height: 0.86;letter-spacing: -0.055em;}
.display, .h1 {font-size: var(--fs-display);font-weight: 700;line-height: 0.98;letter-spacing: var(--track-display);text-wrap: balance;}
.h2 {font-size: var(--fs-h2);font-weight: 700;line-height: 1;letter-spacing: var(--track-h2);text-wrap: balance;}
.h3 {font-size: var(--fs-h3);font-weight: 650;line-height: 1.14;letter-spacing: var(--track-h3);text-wrap: balance;}
.h4 { font-size: var(--fs-h4); font-weight: 650; line-height: 1.3; letter-spacing: -0.018em; }
.lede, .lead {font-size: var(--fs-lead);line-height: 1.43;color: var(--ink-2);letter-spacing: -0.014em;text-wrap: pretty;}
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.small { font-size: 0.875rem; line-height: 1.45; }
.tiny { font-size: var(--fs-small); line-height: 1.38; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.balance { text-wrap: balance; }
.grad {background: var(--grad);-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-box-decoration-break: clone;box-decoration-break: clone;padding-bottom: 0.06em;}
.eyebrow {display: inline-flex;align-items: center;gap: 10px;margin: 0 0 var(--s2);font-size: var(--fs-eyebrow);font-weight: 650;line-height: 1.2;letter-spacing: 0.08em;text-transform: uppercase;color: var(--ink-3);}
.eyebrow::before {content: "";flex: none;width: 10px;height: 10px;border-top: 1.5px solid var(--select);border-left: 1.5px solid var(--select);border-radius: 2px 0 0 0;}
.eyebrow svg { width: 16px; height: 16px; color: var(--select); flex: none; }
.eyebrow:has(svg)::before { display: none; }
.section-head { max-width: 780px; margin: 0 0 clamp(36px, 5vw, 64px); }
.section-head.center, .section-head:where(.is-center) { margin-inline: auto; text-align: center; }
.section-head .lede { margin-top: var(--s2); max-width: 620px; }
.section-head.center .lede { margin-inline: auto; }
kbd, .kbd {display: inline-flex;align-items: center;justify-content: center;min-width: 1.7em;height: 1.7em;padding: 0 0.42em;border-radius: 0.42em;font-family: var(--font);font-size: 0.86em;font-weight: 600;line-height: 1;color: var(--ink);background: linear-gradient(180deg, var(--surface) 0%, var(--paper-2) 100%);border: 1px solid var(--line-2);box-shadow: 0 1px 0 var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.5);vertical-align: 0.06em;white-space: nowrap;}
.keys { display: inline-flex; gap: 0.28em; vertical-align: middle; }
.keycap {--size: 64px;display: inline-grid;place-items: center;width: var(--size);height: var(--size);border-radius: calc(var(--size) * 0.22);font-family: var(--font-display);font-size: calc(var(--size) * 0.38);font-weight: 600;color: var(--ink);background: linear-gradient(180deg, var(--surface) 0%, var(--paper-2) 100%);border: 1px solid var(--line-2);box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 0 -1px color-mix(in srgb, var(--ink) 12%, transparent), 0 10px 22px -10px rgba(20, 16, 8, 0.35);transition: transform 120ms var(--ease-ui), box-shadow 120ms var(--ease-ui);}
.keycap.is-down, .keycap[data-down] { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 0 -1px color-mix(in srgb, var(--ink) 12%, transparent), 0 4px 10px -6px rgba(20, 16, 8, 0.3); }
.keycap.wide { width: calc(var(--size) * 1.35); }
.btn {--h: 52px;position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 10px;height: var(--h);padding: 0 calc(var(--h) * 0.44);border-radius: var(--r-btn);border: 0;font-size: 1rem;font-weight: 600;letter-spacing: -0.012em;line-height: 1;white-space: nowrap;cursor: pointer;transition: transform var(--t-ui) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui), background-color var(--t-ui), color var(--t-ui), border-radius 260ms var(--ease-ui);-webkit-tap-highlight-color: transparent;}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-sm { --h: 38px; font-size: 0.9375rem; padding-inline: 14px; border-radius: 10px; }
.btn-lg { --h: 58px; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn-primary, .btn-dark {background: var(--btn-bg);color: var(--btn-ink);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.18), 0 12px 28px -12px rgba(0, 0, 0, 0.5);}
.btn-primary:hover, .btn-dark:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn-primary:active, .btn-dark:active { transform: scale(0.97); }
.btn-glass {background: var(--glass-bg);color: var(--ink);border: 1px solid var(--glass-line);box-shadow: var(--glass-hi), var(--sh-1);-webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);}
.btn-glass:hover { transform: translateY(-1px); }
.btn-ghost {background: transparent;color: var(--ink);box-shadow: inset 0 0 0 1px var(--line-2);}
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn-select { background: var(--select); color: #fff; box-shadow: 0 12px 28px -12px rgba(59, 108, 255, 0.7); }
.btn-select:hover { background: #2f5ff0; transform: translateY(-1px); }
.btn-play {display: inline-grid;place-items: center;width: 26px;height: 26px;border-radius: 50%;background: var(--btn-bg);color: var(--btn-ink);margin-left: -6px;}
.btn-play svg { width: 10px; height: 10px; margin-left: 2px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row.center { justify-content: center; }
.card {position: relative;padding: clamp(24px, 3vw, 36px);border-radius: var(--r-card);background: var(--card);border: 1px solid var(--line);box-shadow: var(--sh-1);}
.card-flat { box-shadow: none; }
.media-card {position: relative;border-radius: var(--r-media);overflow: hidden;background: var(--night-2);box-shadow: var(--sh-2);isolation: isolate;}
.media-card > img, .media-card > picture, .media-card > video, .media-card > picture > img {width: 100%;height: 100%;object-fit: cover;}
.stage-card { border-radius: var(--r-stage); overflow: hidden; isolation: isolate; }
.glass {background: var(--glass-bg);border: 1px solid var(--glass-line);box-shadow: var(--glass-hi), var(--sh-1);-webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);}
.glass-strong { --glass-bg: rgba(255, 255, 255, 0.78); }
[data-stage="night"] .glass-strong, .on-night .glass-strong { --glass-bg: rgba(255, 255, 255, 0.12); }
.chip {display: inline-flex;align-items: center;gap: 6px;height: 28px;padding: 0 11px;border-radius: var(--r-pill);background: color-mix(in srgb, var(--ink) 6%, transparent);color: var(--ink-2);font-size: var(--fs-small);font-weight: 600;letter-spacing: -0.005em;white-space: nowrap;}
.chip svg { width: 14px; height: 14px; }
.chip-new {height: 22px;padding: 0 8px;background: var(--new);color: #fff;font-size: 0.6875rem;letter-spacing: 0.06em;text-transform: uppercase;}
.float-ui { filter: drop-shadow(0 30px 40px rgba(20, 22, 40, 0.22)); }
.sel {--ant: 8px;--ant-w: 1.5px;position: absolute;background:
linear-gradient(90deg, var(--select) 50%, transparent 0) repeat-x 0 0 / var(--ant) var(--ant-w),
linear-gradient(90deg, var(--select) 50%, transparent 0) repeat-x 0 100% / var(--ant) var(--ant-w),
linear-gradient(0deg, var(--select) 50%, transparent 0) repeat-y 0 0 / var(--ant-w) var(--ant),
linear-gradient(0deg, var(--select) 50%, transparent 0) repeat-y 100% 0 / var(--ant-w) var(--ant),
var(--select-fill);border-radius: 2px;pointer-events: none;}
@media (prefers-reduced-motion: no-preference) {.sel { animation: ants 0.6s linear infinite; }}
@keyframes ants {to { background-position: var(--ant) 0, calc(var(--ant) * -1) 100%, 0 calc(var(--ant) * -1), 100% var(--ant), 0 0; }}
.sel.is-done { animation: none; background: var(--select-fill); box-shadow: inset 0 0 0 1.5px var(--select); }
.sel-label {position: absolute;padding: 3px 7px;border-radius: 6px;background: rgba(13, 13, 16, 0.78);color: #fff;font: 600 11px/1.2 var(--font);font-variant-numeric: tabular-nums;white-space: nowrap;pointer-events: none;}
.scenery { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.scenery > picture, .scenery > img, .scenery > video, .scenery > picture > img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
.fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 240px)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 240px)), transparent); }
.fade-t { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--fade, 240px)), transparent); mask-image: linear-gradient(to top, #000 calc(100% - var(--fade, 240px)), transparent); }
.fade-y { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade, 200px), #000 calc(100% - var(--fade, 200px)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade, 200px), #000 calc(100% - var(--fade, 200px)), transparent); }
.fade-x { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade, 64px), #000 calc(100% - var(--fade, 64px)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade, 64px), #000 calc(100% - var(--fade, 64px)), transparent); }
.seam {position: absolute;left: 0; right: 0;height: var(--seam, 240px);pointer-events: none;z-index: 1;}
.seam-top { top: 0; background: linear-gradient(to bottom, var(--seam-from, var(--paper)), transparent); }
.seam-bottom { bottom: 0; background: linear-gradient(to top, var(--seam-to, var(--paper)), transparent); }
.overlap-up { margin-top: calc(var(--overlap, 120px) * -1); position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {.js [data-reveal] {transition:
opacity var(--t-reveal) var(--ease-out),
transform var(--t-reveal) var(--ease-out),
filter var(--t-focus) var(--ease-out);transition-delay: var(--d, 0s);}
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, var(--rise), 0); }
.js [data-reveal="fade"]:not(.is-in) { transform: none; }
.js [data-reveal="left"]:not(.is-in) { transform: translate3d(-32px, 0, 0); }
.js [data-reveal="right"]:not(.is-in) { transform: translate3d(32px, 0, 0); }
.js [data-reveal="scale"]:not(.is-in) { transform: scale(0.94); }
.js [data-reveal="focus"]:not(.is-in) { filter: blur(12px); transform: scale(1.03); }
.js [data-reveal="none"]:not(.is-in) { opacity: 1; transform: none; }
.js:not(.motion-ready) [data-reveal] { animation: reveal-failsafe 1ms linear 3.5s forwards; }}
@keyframes reveal-failsafe { to { opacity: 1; transform: none; filter: none; } }
[data-pin] { position: relative; }
.motion-pin [data-pin] { height: calc(var(--pin, 300) * 1svh); }
.motion-pin [data-pin] > .pin-stage {position: sticky;top: 0;height: 100svh;overflow: clip;}
@media (max-width: 760px) {.motion-pin [data-pin] { height: calc(var(--pin-m, var(--pin, 240)) * 1svh); }}
[data-scene][data-active] .will-move { will-change: transform, opacity; }
[data-marquee] { overflow: hidden; }
.marquee-track { display: flex; width: max-content; gap: var(--marquee-gap, var(--s3)); }
@media (prefers-reduced-motion: no-preference) {.js [data-marquee].is-looping .marquee-track { animation: marquee var(--marquee-dur, 45s) linear infinite; }
.js [data-marquee][data-direction="right"].is-looping .marquee-track { animation-direction: reverse; }
.js [data-marquee].is-paused .marquee-track,
[data-marquee]:hover .marquee-track,
[data-marquee]:focus-within .marquee-track { animation-play-state: paused; }}
@keyframes marquee { to { transform: translate3d(calc(-50% - var(--marquee-gap, var(--s3)) / 2), 0, 0); } }
@media (prefers-reduced-motion: reduce) {[data-marquee] { overflow-x: auto; scroll-snap-type: x mandatory; }
[data-marquee] .marquee-track > * { scroll-snap-align: start; }
[data-marquee] [data-marquee-clone] { display: none; }}
.vid { position: relative; overflow: hidden; background: var(--night-2); }
.vid video, .vid noscript img { display: block; width: 100%; height: 100%; object-fit: cover; }
video[data-lazy-video] { background: var(--night-2); }
.vid-toggle {position: absolute;right: 14px;bottom: 14px;z-index: 2;display: grid;place-items: center;width: 36px;height: 36px;padding: 0;border: 0;border-radius: 50%;color: #fff;background: rgba(13, 13, 16, 0.5);-webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);cursor: pointer;opacity: 0.8;transition: opacity var(--t-ui), transform var(--t-ui) var(--ease-ui);}
.vid-toggle:hover, .vid-toggle:focus-visible { opacity: 1; transform: scale(1.06); }
.vid-toggle svg { width: 14px; height: 14px; }
.vid-toggle .i-play, .vid-toggle[data-state="playing"] .i-pause { display: block; }
.vid-toggle .i-pause, .vid-toggle[data-state="playing"] .i-play { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.nav {position: fixed;top: var(--nav-top);left: 50%;z-index: 100;transform: translateX(-50%);width: min(760px, calc(100% - 24px));}
.nav-bar {display: flex;align-items: center;gap: 6px;height: var(--nav-h);padding: 0 8px 0 8px;border-radius: var(--r-nav);background: var(--nav-bg);color: var(--nav-ink);border: 1px solid var(--nav-line);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(20, 16, 8, 0.03), 0 12px 32px -14px rgba(20, 16, 8, 0.22);-webkit-backdrop-filter: saturate(180%) blur(22px);backdrop-filter: saturate(180%) blur(22px);transition: background-color 0.35s var(--ease-ui), color 0.35s var(--ease-ui), border-color 0.35s, box-shadow 0.35s;}
.nav.scrolled .nav-bar { background: var(--nav-bg-solid); }
.nav[data-tone="night"] {--nav-bg: rgba(22, 24, 32, 0.6);--nav-bg-solid: rgba(22, 24, 32, 0.78);--nav-ink: #f2f1ee;--nav-ink-2: rgba(242, 241, 238, 0.74);--nav-line: rgba(255, 255, 255, 0.12);--btn-bg: #f2f1ee;--btn-ink: #0d0d10;--btn-bg-hover: #fff;--ink: #f2f1ee;}
.nav[data-tone="night"] .nav-bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 32px -14px rgba(0, 0, 0, 0.6); }
.brand {display: inline-flex;align-items: center;gap: 9px;padding: 6px 10px 6px 4px;border-radius: 10px;font-family: var(--font-display);font-weight: 700;font-size: 1.0625rem;letter-spacing: -0.03em;color: inherit;}
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.nav-links a, .nav-dl {display: block;padding: 8px 12px;border-radius: 10px;font-size: 0.9375rem;font-weight: 500;color: var(--nav-ink-2);transition: color var(--t-ui), background-color var(--t-ui);}
.nav-links a:hover, .nav-dl:hover { color: var(--nav-ink); background: color-mix(in srgb, var(--nav-ink) 7%, transparent); }
.nav-links a[aria-current="true"] { color: var(--nav-ink); }
.nav-cta { margin-left: auto; }
.nav-links + .nav-cta, .nav-links + .nav-dl { margin-left: 0; }
.nav-cta:active { border-radius: 18px; }
.nav-toggle {display: none;width: 40px; height: 40px;border-radius: 10px;border: 0;background: transparent;cursor: pointer;align-items: center;justify-content: center;color: var(--nav-ink);}
.nav-toggle-lines { display: grid; gap: 5px; width: 16px; }
.nav-toggle-lines > span { display: block; width: 16px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease-ui); }
.nav[data-open="true"] .nav-toggle-lines > span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav[data-open="true"] .nav-toggle-lines > span:last-child { transform: translateY(-3.3px) rotate(-45deg); }
.nav-menu {display: none;margin-top: 8px;padding: 8px;border-radius: 20px;background: var(--nav-bg-solid);color: var(--nav-ink);border: 1px solid var(--nav-line);box-shadow: var(--sh-2);-webkit-backdrop-filter: saturate(180%) blur(22px);backdrop-filter: saturate(180%) blur(22px);}
.nav-menu a { display: block; padding: 13px 16px; border-radius: 12px; font-weight: 550; font-size: 1.0625rem; }
.nav-menu a:hover { background: color-mix(in srgb, var(--nav-ink) 7%, transparent); }
@media (max-width: 720px) {.nav-links, .nav-dl { display: none; }
.nav-toggle { display: inline-flex; }
.nav-bar .brand { margin-right: auto; }
.nav-cta, .nav-links + .nav-cta { margin-left: 0; }
.nav[data-open="true"] .nav-menu { display: block; animation: menuIn 0.28s var(--ease-out); }
.mode-badge .mb-detail { display: none; }}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.mode-badge {position: fixed;left: 14px;bottom: 14px;z-index: 90;display: inline-flex;align-items: center;gap: 8px;max-width: calc(100% - 28px);padding: 8px 12px;border-radius: var(--r-pill);background: var(--warn-bg);color: var(--warn-ink);font-size: var(--fs-small);font-weight: 600;box-shadow: var(--sh-1);}
.mode-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mode-badge button { border: 0; background: transparent; cursor: pointer; padding: 0 2px; font-size: 1rem; line-height: 1; color: inherit; }
.owner-note { margin: 0 0 28px; padding: 14px 18px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-ink); font-size: 0.9375rem; }
[data-todo] { background: var(--warn-bg); color: var(--warn-ink); border-radius: 4px; padding: 0 4px; }
.film {width: min(1100px, calc(100% - 24px));max-height: calc(100% - 140px);padding: 0;border: 0;border-radius: clamp(14px, 2vw, 24px);background: #0b0b0d;color: #fff;box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);overflow: visible;}
.film::backdrop { background: rgba(8, 8, 12, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.film[open] { animation: filmIn 0.4s var(--ease-out); }
@keyframes filmIn { from { opacity: 0; transform: scale(0.96); } }
.film-body { position: relative; border-radius: inherit; overflow: hidden; }
.film-body video, .film-body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.film-close {position: absolute;top: -54px; right: 0;z-index: 3;display: grid;place-items: center;width: 40px; height: 40px;border-radius: 50%;border: 0;background: #fff;color: #111;cursor: pointer;box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);}
.film-close svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }
*, *::before, *::after {animation-duration: 0.001ms !important;animation-iteration-count: 1 !important;transition-duration: 0.001ms !important;}}
html:not(.js) [data-film], html:not(.js) [data-needs-js] { display: none !important; }
@media print {[data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
.nav, .mode-badge { display: none !important; }
.motion-pin [data-pin] { height: auto !important; }
.motion-pin [data-pin] > .pin-stage { position: static !important; height: auto !important; }}
/* src/styles/chrome/footer.css */
.nav-links a, .footer ul a, .crumbs a { text-decoration: none; }
.footer { position: relative; padding: clamp(56px, 6vw, 80px) 0 0; font-size: 0.9375rem; overflow: hidden; }
.footer-brand .brand { padding-left: 0; }
.footer-brand .brand img { width: 32px; height: 32px; border-radius: 8px; }
.footer-buy { margin-top: 20px; }
.footer-tm { margin-top: 14px; }
.wordmark {position: relative;height: clamp(84px, 19vw, 270px);margin-top: clamp(36px, 5vw, 64px);overflow: hidden;user-select: none;-webkit-user-select: none;}
.wordmark span, .wordmark canvas {position: absolute;left: 0; right: 0; top: 0;width: 100%;}
.wordmark span {display: block;text-align: center;font-family: var(--font-display);font-size: clamp(110px, 25vw, 360px);font-weight: 800;letter-spacing: -0.055em;line-height: 0.82;background: var(--grad);-webkit-background-clip: text;background-clip: text;color: transparent;opacity: 0.9;}
.wordmark canvas { height: 100%; }
.wordmark.wm-ready span { visibility: hidden; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-brand p { margin-top: 14px; max-width: 300px; color: var(--ink-3); font-size: 0.9375rem; }
.footer h2 { font-size: 0.875rem; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 14px; }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer ul a { color: var(--ink-3); transition: color 0.2s; }
.footer ul a:hover { color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-3); }
@media (max-width: 960px) {.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: span 2; }}
@media (max-width: 420px) {.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 16px; }}
/* src/styles/chrome/nav.css */
.nav {width: min(680px, calc(100% - 24px));transition: width 0.55s var(--ease-out), top 0.55s var(--ease-out);}
.nav.scrolled { width: min(620px, calc(100% - 24px)); }
.nav-links a { padding: 8px 10px; }
.nav-bar {position: relative;padding: 0 8px;background: var(--nav-bg);border-color: color-mix(in srgb, var(--nav-line) 100%, transparent);box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(255, 255, 255, 0.12),
0 1px 1px rgba(20, 16, 8, 0.03),
0 14px 36px -16px rgba(30, 26, 70, 0.28);transition: background-color 0.45s var(--ease-ui), color 0.35s var(--ease-ui), border-color 0.35s, box-shadow 0.45s, padding 0.55s var(--ease-out);}
.nav-bar::before {content: "";position: absolute;inset: 0;border-radius: inherit;pointer-events: none;background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 46%);opacity: 0.55;transition: opacity 0.45s;}
.nav.scrolled .nav-bar { padding: 0 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(20, 16, 8, 0.04), 0 18px 40px -18px rgba(30, 26, 70, 0.34); }
.nav.scrolled .nav-bar::before { opacity: 0.3; }
.nav[data-tone="night"] .nav-bar::before { opacity: 0.08; }
.nav-links a, .nav-dl { text-decoration: none; letter-spacing: -0.01em; }
.nav-links a[aria-current="true"] { background: color-mix(in srgb, var(--nav-ink) 7%, transparent); }
.nav .brand img { box-shadow: 0 1px 2px rgba(20, 16, 40, 0.18); }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .nav-bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 36px -16px rgba(0, 0, 0, 0.6); }
:root:not([data-theme="light"]) .nav-bar::before { opacity: 0.08; }}
@media (max-width: 720px) {.nav, .nav.scrolled { width: calc(100% - 20px); }
.nav-toggle { width: 44px; height: 44px; }}
@media (prefers-reduced-motion: reduce) {.nav, .nav-bar { transition: none; }}
/* src/styles/pages.css */
:root { --grad-soft: linear-gradient(135deg, #e8f1ff 0%, #ece9ff 55%, #f6ecff 100%); }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) { --grad-soft: linear-gradient(135deg, #131a2b 0%, #18162b 55%, #21162b 100%); }}
.page-hero .h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); }
.page-hero .lede { margin-top: 16px; }
.page-hero.center { text-align: center; }
.page-hero.center .lede { margin-inline: auto; max-width: 640px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; font-size: 0.875rem; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; color: var(--ink); }
.prose h3 { margin-top: 1.8em; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--ink-3); }
.prose code { font-size: 0.88em; padding: 0.12em 0.4em; border-radius: 6px; background: var(--paper-2); color: var(--ink); }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 650; }
.prose .table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.prose .table-wrap table th, .prose .table-wrap table td { padding: 12px 14px; }
.prose .table-wrap tr:last-child td { border-bottom: 0; }
.callout {padding: 18px 20px;border-radius: 20px;background: var(--surface);border: 1px solid var(--line);box-shadow: var(--sh-1);color: var(--ink-2);}
.callout b, .callout strong { color: var(--ink); }
.callout-title { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.015em; }
.callout.tldr { background: var(--grad-soft); border-color: transparent; }
.gk-note summary { cursor: pointer; }
.gk-note[open] summary { margin-bottom: 8px; }
.doc-meta { margin-top: 14px; font-size: 0.9375rem; color: var(--ink-3); }
.cta-card {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 20px;padding: 26px 28px;border-radius: var(--r-card);background: var(--surface);border: 1px solid var(--line);box-shadow: var(--sh-2);margin-top: 2.4em;}
.cta-card .cta-left { display: flex; align-items: center; gap: 16px; }
.cta-card img { width: 56px; height: 56px; }
.cta-card b { display: block; font-size: 1.125rem; color: var(--ink); letter-spacing: -0.02em; }
.cta-card span { font-size: 0.9375rem; color: var(--ink-3); }
.numbered { list-style: none; padding: 0 !important; counter-reset: n; display: grid; gap: 14px; }
.numbered > li {counter-increment: n;position: relative;padding: 20px 22px 20px 70px;border-radius: 20px;background: var(--surface);border: 1px solid var(--line);margin: 0 !important;}
.numbered > li::before {content: counter(n);position: absolute;left: 20px; top: 18px;display: grid;place-items: center;width: 32px; height: 32px;border-radius: 50%;background: var(--btn-bg);color: var(--btn-ink);font-weight: 700;font-size: 0.9375rem;}
.numbered > li b:first-child { display: block; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.015em; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.guide-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.use-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--c, #5a5cf6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.use-ico svg { width: 20px; height: 20px; }
.guide-card .use-ico { margin-bottom: 8px; }
.guide-card p { color: var(--ink-2); font-size: 0.975rem; }
.guide-card .more { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 0.9375rem; color: var(--select-ink); }
.dl-hero { text-align: center; }
.dl-hero img.icon { width: 128px; height: 128px; margin: 0 auto 22px; filter: drop-shadow(0 18px 30px rgba(60, 70, 200, 0.3)); }
.dl-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 18px; font-size: 0.875rem; color: var(--ink-3); }
.dl-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dl-step { padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.dl-step .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; font-size: 0.875rem; margin-bottom: 14px; }
.dl-step b { display: block; letter-spacing: -0.015em; margin-bottom: 6px; }
.dl-step p { font-size: 0.9rem; color: var(--ink-2); }
.thanks-card {max-width: 680px;margin: 0 auto;padding: clamp(28px, 5vw, 52px);border-radius: 32px;background: var(--surface);border: 1px solid var(--line);box-shadow: var(--sh-deep);text-align: center;}
.thanks-icon { position: relative; width: 96px; height: 96px; margin: 0 auto 22px; }
.thanks-icon img { width: 96px; height: 96px; }
.thanks-icon .badge { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ok); color: #fff; box-shadow: 0 0 0 4px var(--surface); }
.thanks-icon .badge.pending { background: #e5a400; }
.thanks-icon .badge.fail { background: #e5484d; }
.thanks-icon .badge.neutral { background: var(--btn-bg); color: var(--btn-ink); }
.thanks-icon .badge svg { width: 18px; height: 18px; }
.key-box { margin-top: 28px; text-align: left; }
.key-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; font-weight: 650; color: var(--ink-3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.key-row { display: flex; gap: 8px; align-items: stretch; }
.key-row + .key-row { margin-top: 10px; }
.key-field {flex: 1;min-width: 0;display: flex;align-items: center;padding: 16px 18px;border-radius: 14px;background: var(--paper-2);border: 1px solid var(--line-2);font-family: var(--mono);font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem);font-weight: 600;letter-spacing: 0.02em;color: var(--ink);word-break: break-all;user-select: all;-webkit-user-select: all;}
.key-copy { flex: none; min-width: 104px; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.thanks-actions:not(:has(> :not([hidden]))) { display: none; }
.thanks-actions .btn { flex: 1 1 220px; }
.next-steps { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; text-align: left; }
.next-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.ns-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; font-size: 0.875rem; }
.ns-copy { flex: 1; min-width: 0; }
.ns-copy b { display: block; letter-spacing: -0.015em; }
.ns-copy span { display: block; font-size: 0.9rem; color: var(--ink-3); }
.next-steps .btn { --h: 44px; flex: none; font-size: 0.9375rem; }
@media (max-width: 560px) {.next-steps li { flex-wrap: wrap; }
.ns-copy { flex-basis: calc(100% - 44px); }
.next-steps .btn { width: 100%; }}
.thanks-steps { margin-top: 30px; text-align: left; }
.thanks-steps ol { margin: 12px 0 0; padding-left: 1.3em; color: var(--ink-2); display: grid; gap: 8px; }
.thanks-help { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-3); }
.thanks-help p + p { margin-top: 6px; }
.order-ref { font-family: var(--mono); font-size: 0.85em; color: var(--ink-2); }
.phone-note { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 0.9375rem; text-align: left; }
.phone-note b { color: var(--ink); }
@media (hover: none) and (pointer: coarse) {.mac-only { display: none !important; }
.phone-note { display: flex; gap: 12px; align-items: flex-start; }
.phone-note svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--select); }}
.release { position: relative; padding-left: 28px; border-left: 1px solid var(--line-2); }
.release::before { content: ""; position: absolute; left: -6px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--select); box-shadow: 0 0 0 4px var(--paper); }
.release-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.release-head .v { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.release-head .tag { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--select) 12%, transparent); color: var(--select-ink); font-size: 0.8125rem; font-weight: 650; }
.nf { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 80px; }
.nf .code { font-family: var(--font-display); font-size: clamp(6rem, 20vw, 12rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.9; }
@media (max-width: 1080px) { .dl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {.guide-grid { grid-template-columns: 1fr; }
.dl-steps { grid-template-columns: 1fr; }}
@media (max-width: 420px) {.key-row { flex-wrap: wrap; }
.key-field { flex: 1 1 100%; }
.key-copy { flex: 1 1 0; }}
.page-hero { position: relative; isolation: isolate; }
.page-hero::before {content: "";position: absolute;inset: 0 0 -40%;z-index: -1;background:
radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--dawn-haze) 55%, transparent), transparent 70%),
radial-gradient(40% 50% at 85% 10%, color-mix(in srgb, var(--dawn-glow) 70%, transparent), transparent 70%);pointer-events: none;}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .page-hero::before {background: radial-gradient(60% 70% at 50% 0%, rgba(80, 96, 180, 0.22), transparent 70%);}}
/* src/styles/sections/01-hero.css */
.hero {--hero-navb: calc(var(--nav-top) + var(--nav-h));--hero-ar: 1.7597;position: relative;isolation: isolate;background: var(--paper);}
.hero-stage { position: relative; }
.hero-world {position: absolute;inset: 0;overflow: hidden;pointer-events: none;z-index: 0;background: linear-gradient(180deg, #98abdc 0%, #cbc4e6 46%, #f2e0dd 66%, var(--paper) 100%);}
.hero-plane {position: absolute;left: 0;right: 0;top: var(--hero-plane-top, -6%);height: var(--hero-plane-h, 118%);transform-origin: 50% 64%;}
.hero-plane-pic, .hero-plane-pic img {display: block;width: 100%;height: 100%;}
.hero-plane-pic img { object-fit: cover; object-position: 50% 0%; }
.hero-p-sky { --hero-plane-top: -10%; --hero-plane-h: 126%; }
@media (max-width: 760px) {.motion-pin .hero-world { --hero-plane-top: -19%; }
.motion-pin .hero-world .hero-p-sky { --hero-plane-top: -24%; }
.motion-pin .hero-world .hero-mist-far { --hero-mist-y: 42%; }
.motion-pin .hero-world .hero-mist-near { --hero-mist-y: 56%; }}
@media (min-width: 761px) {.hero-world { --hero-plane-top: 0%; }
.hero-world .hero-p-sky { --hero-plane-top: -8%; }
.hero-world .hero-mist-far { --hero-mist-y: 60.5%; }
.hero-world .hero-mist-near { --hero-mist-y: 75%; }}
.hero-mist {position: absolute;left: 0;right: 0;height: 14%;top: var(--hero-mist-y, 60%);overflow: hidden;opacity: var(--hero-mist-o, .7);}
.hero-mist > i {position: absolute;inset: 0 auto 0 0;width: 200%;background: var(--hero-mist-img) repeat-x 0 50% / 50% 100%;}
.hero-mist-far { --hero-mist-y: 54.5%; --hero-mist-o: .55; height: 12%; }
.hero-mist-near { --hero-mist-y: 69%; --hero-mist-o: .5; height: 16%; }
.hero-world { --hero-mist-img: url("../img/sections/01/mist-dawn-1600.webp"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {.hero-world { --hero-mist-img: image-set(url("../img/sections/01/mist-dawn-1600.avif") type("image/avif"), url("../img/sections/01/mist-dawn-1600.webp") type("image/webp")); }}
@media (prefers-reduced-motion: no-preference) {.js .hero-mist > i { animation: hero-drift 120s linear infinite; }
.js .hero-mist-near > i { animation-duration: 80s; animation-direction: reverse; }
.js .hero.is-off .hero-mist > i { animation-play-state: paused; }}
@keyframes hero-drift { to { transform: translate3d(-50%, 0, 0); } }
.hero-haze {position: absolute;left: 0;right: 0;bottom: 0;height: 18%;background: linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 86%, transparent) 26%, color-mix(in srgb, var(--paper) 0%, transparent) 100%);}
.hero-copy {position: relative;z-index: 3;text-align: center;}
.hero-new {display: inline-flex;align-items: center;gap: 10px;max-width: 100%;min-height: 36px;margin-bottom: clamp(14px, 2vh, 22px);padding: 5px 14px 5px 6px;border-radius: var(--r-pill);font-size: 0.875rem;font-weight: 560;letter-spacing: -0.01em;color: var(--ink);background: var(--glass-bg);border: 1px solid var(--glass-line);box-shadow: var(--glass-hi), 0 8px 24px -14px rgba(40, 36, 90, 0.45);-webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);transition: transform var(--t-ui) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui);}
.hero-new:hover { transform: translateY(-1px); }
.hero-new .chip-new { flex: none; }
.hero-new-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-new-s { display: none; }
.hero-new-a { width: 15px; height: 15px; flex: none; color: var(--ink-2); transition: transform var(--t-ui) var(--ease-ui); }
.hero-new:hover .hero-new-a { transform: translateX(2px); }
.hero-title {position: relative;max-width: 15ch;margin-inline: auto;font-size: max(var(--fs-display), min(5.9vw, 120px));}
.hero-title .grad { padding-right: 0.04em; }
.hero-lede {max-width: max(640px, 36vw);font-size: max(var(--fs-lead), min(1.12vw, 24px));margin: clamp(14px, 1.9vh, 22px) auto 0;color: var(--ink-2);}
.hero-lede .keys kbd { font-size: 0.8em; }
.hero-ctas { margin-top: clamp(20px, 2.8vh, 28px); }
.hero-trust {display: flex;flex-wrap: wrap;justify-content: center;gap: 6px 20px;margin-top: 20px;font-size: var(--fs-small);font-weight: 500;color: var(--ink-2);}
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust li::before {content: "";width: 14px;height: 14px;flex: none;border-radius: 50%;background: var(--select) no-repeat 50% 55% / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.hero-mosaic {position: absolute;z-index: 4;pointer-events: none;}
.hero-device {position: relative;z-index: 2;width: var(--hero-dev-w, min(1180px, 92vw));margin-inline: auto;}
.hero-device-in { position: relative; z-index: 1; transform-origin: 50% 0%; }
.hero-device-rise { position: relative; }
.hero-laptop, .hero-device-rise picture { display: block; width: 100%; height: auto; }
.hero-screen {position: absolute;left: 9.900%;top: 3.969%;width: 80.201%;height: 88.203%;overflow: hidden;border-radius: 1% / 1.6%;container: hero-hd / size;}
.hero-hd {--hero-u: calc(100cqw / 1280);--hero-mb: calc(24 * var(--hero-u));position: absolute;inset: 0;overflow: hidden;font-family: var(--font);letter-spacing: -0.01em;color: #111;-webkit-font-smoothing: antialiased;user-select: none;}
.hero-hd p { margin: 0; }
.hero-hd-win {position: absolute;opacity: 0;visibility: hidden;transform: scale(0.965);transition: opacity 0.22s ease-in, transform 0.22s ease-in, visibility 0s linear 0.22s;}
.hero-hd-win.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s var(--ease-out) 0.16s, transform 0.6s var(--ease-out) 0.16s, visibility 0s; }
.hero-hd-w0 { left: calc(96 * var(--hero-u)); top: calc(70 * var(--hero-u)); width: calc(860 * var(--hero-u)); height: calc(560 * var(--hero-u)); }
.hero-hd-w1 { left: calc(250 * var(--hero-u)); top: calc(52 * var(--hero-u)); width: calc(720 * var(--hero-u)); height: calc(700 * var(--hero-u)); }
.hero-hd-w2 { left: calc(150 * var(--hero-u)); top: calc(70 * var(--hero-u)); width: calc(900 * var(--hero-u)); height: calc(580 * var(--hero-u)); }
.hero-hd-video, .hero-hd-pdf {position: absolute;inset: 0;overflow: hidden;border-radius: calc(22 * var(--hero-u));box-shadow: 0 0 0 calc(0.5 * var(--hero-u)) rgba(0, 0, 0, 0.35), 0 calc(24 * var(--hero-u)) calc(60 * var(--hero-u)) rgba(20, 18, 60, 0.35), 0 calc(4 * var(--hero-u)) calc(12 * var(--hero-u)) rgba(20, 18, 60, 0.2);}
.hero-hd-video { background: #0e0f12; color: #f2f2f2; display: flex; flex-direction: column; }
.hero-hd-bar {position: relative;flex: none;display: flex;align-items: center;height: calc(40 * var(--hero-u));padding: 0 calc(16 * var(--hero-u));font-size: calc(13 * var(--hero-u));font-weight: 600;color: rgba(255, 255, 255, 0.82);background: #1b1c20;}
.hero-hd-bar > span { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.hero-hd-bar > em { margin-left: auto; font-style: normal; font-weight: 500; opacity: 0.6; }
.hero-hd-tl { display: flex; gap: calc(8 * var(--hero-u)); }
.hero-hd-tl b { width: calc(12 * var(--hero-u)); height: calc(12 * var(--hero-u)); border-radius: 50%; background: #ff5f57; }
.hero-hd-tl b:nth-child(2) { background: #febc2e; }
.hero-hd-tl b:nth-child(3) { background: #28c840; }
.hero-hd-bar-light { background: linear-gradient(#f4f2f3, #e9e7ea); color: #3a3a3e; border-bottom: calc(1 * var(--hero-u)) solid rgba(0, 0, 0, 0.1); }
.hero-hd-slide {position: relative;flex: 1;margin: calc(12 * var(--hero-u)) calc(12 * var(--hero-u)) 0;padding: calc(46 * var(--hero-u)) calc(52 * var(--hero-u));border-radius: calc(8 * var(--hero-u));background: linear-gradient(160deg, #fbfaf6 0%, #f1efe8 100%);color: #17171b;overflow: hidden;}
.hero-hd-kicker { font-size: calc(15 * var(--hero-u)); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: #6d6a63; }
.hero-hd-h { margin-top: calc(10 * var(--hero-u)) !important; font-family: var(--font-display); font-size: calc(46 * var(--hero-u)); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.hero-hd-body {max-width: calc(470 * var(--hero-u));margin-top: calc(22 * var(--hero-u)) !important;font-size: calc(25 * var(--hero-u));line-height: 1.36;letter-spacing: -0.015em;color: #26262c;}
.hero-hd-chart { position: absolute; right: calc(40 * var(--hero-u)); bottom: calc(40 * var(--hero-u)); width: calc(250 * var(--hero-u)); height: auto; overflow: visible; }
.hero-hd-chart path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-hd-axis { stroke: #b9b5ab; stroke-width: 2; }
.hero-hd-c1 { stroke: #d36a4f; stroke-width: 3; stroke-dasharray: 6 6; }
.hero-hd-c2 { stroke: #3b6cff; stroke-width: 3.5; }
.hero-hd-chart text { font: 600 12px var(--font); fill: #8a867c; }
.hero-hd-ctl {flex: none;display: flex;align-items: center;gap: calc(14 * var(--hero-u));height: calc(52 * var(--hero-u));padding: 0 calc(22 * var(--hero-u));font-size: calc(13 * var(--hero-u));font-weight: 600;font-variant-numeric: tabular-nums;color: rgba(255, 255, 255, 0.8);}
.hero-hd-play { width: calc(18 * var(--hero-u)); height: calc(18 * var(--hero-u)); fill: #fff; }
.hero-hd-scrub { position: relative; flex: 1; height: calc(5 * var(--hero-u)); border-radius: 9px; background: rgba(255, 255, 255, 0.18); }
.hero-hd-scrub b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: #fff; }
.hero-hd-scrub b::after { content: ""; position: absolute; right: calc(-7 * var(--hero-u)); top: 50%; width: calc(14 * var(--hero-u)); height: calc(14 * var(--hero-u)); margin-top: calc(-7 * var(--hero-u)); border-radius: 50%; background: #fff; }
.hero-hd-rate { padding: calc(2 * var(--hero-u)) calc(7 * var(--hero-u)); border-radius: calc(6 * var(--hero-u)); background: rgba(255, 255, 255, 0.14); }
.hero-hd-slide-dark {background: radial-gradient(120% 90% at 20% 0%, #24305e 0%, #121528 60%, #0c0d18 100%);color: #f4f3ff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.hero-hd-slide-dark .hero-hd-h { font-size: calc(54 * var(--hero-u)); margin: 0 0 calc(30 * var(--hero-u)) !important; }
.hero-hd-slide-dark .hero-hd-kicker { color: #a9b0d6; }
.hero-hd-url {margin-top: calc(12 * var(--hero-u)) !important;padding: calc(6 * var(--hero-u)) calc(14 * var(--hero-u));font-family: var(--mono);font-size: calc(30 * var(--hero-u));font-weight: 600;letter-spacing: -0.02em;color: #9fc0ff;}
.hero-hd-who { margin-top: calc(40 * var(--hero-u)) !important; font-size: calc(15 * var(--hero-u)); color: #8b90b3; }
.hero-hd-pdf { background: #e7e5e8; display: flex; flex-direction: column; color: #25231f; }
.hero-hd-paper { flex: 1; overflow: hidden; padding: calc(26 * var(--hero-u)) calc(40 * var(--hero-u)) 0; }
.hero-hd-page {height: 100%;padding: calc(46 * var(--hero-u)) calc(54 * var(--hero-u));background:
radial-gradient(140% 90% at 30% 20%, rgba(255, 255, 255, 0.5), transparent 60%),
linear-gradient(180deg, #f6f2e8 0%, #efe9db 100%);box-shadow: 0 calc(2 * var(--hero-u)) calc(10 * var(--hero-u)) rgba(0, 0, 0, 0.18);transform: rotate(-0.7deg);font-family: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;font-size: calc(19 * var(--hero-u));line-height: 1.5;letter-spacing: 0;color: #2b2925;filter: contrast(1.02);}
.hero-hd-page p + p { margin-top: calc(16 * var(--hero-u)); }
.hero-hd-sec { font-weight: 700; font-size: calc(21 * var(--hero-u)); margin-top: calc(26 * var(--hero-u)) !important; }
.hero-hd-sec:first-child { margin-top: 0 !important; }
.hero-hd-mbi {position: absolute;left: calc(910 * var(--hero-u));top: calc(2 * var(--hero-u));width: calc(32 * var(--hero-u));height: calc(20 * var(--hero-u));border-radius: calc(6 * var(--hero-u));background: rgba(255, 255, 255, 0.32);opacity: 0;}
.hero-hd-dim { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero-hd-sel {position: absolute;left: 0;top: 0;width: 0;height: 0;box-shadow: 0 0 0 calc(3000 * var(--hero-u)) rgba(8, 10, 20, 0.32);}
.hero-hd-sel::after {content: "";position: absolute;inset: calc(-1 * var(--hero-u));border: max(1px, calc(1.2 * var(--hero-u))) solid rgba(255, 255, 255, 0.96);box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 calc(2 * var(--hero-u)) calc(10 * var(--hero-u)) rgba(0, 0, 0, 0.25);}
.hero-hd-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.hero-hd-size {position: absolute;left: 0;top: 0;display: flex;align-items: center;height: calc(22 * var(--hero-u));padding: 0 calc(9 * var(--hero-u));border-radius: calc(11 * var(--hero-u));font-size: calc(12 * var(--hero-u));font-weight: 600;font-variant-numeric: tabular-nums;white-space: pre;color: #fff;background: rgba(22, 22, 26, 0.72);box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.28), 0 calc(2 * var(--hero-u)) calc(8 * var(--hero-u)) rgba(0, 0, 0, 0.22);opacity: 0;}
.hero-hd-size .hero-x { color: rgba(255, 255, 255, 0.6); }
.hero-hd-hud {position: absolute;left: 50%;bottom: calc(46 * var(--hero-u));display: flex;gap: calc(10 * var(--hero-u));padding: calc(10 * var(--hero-u));border-radius: calc(22 * var(--hero-u));background: rgba(20, 22, 32, 0.42);box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.3), 0 calc(12 * var(--hero-u)) calc(30 * var(--hero-u)) rgba(10, 10, 30, 0.3);-webkit-backdrop-filter: blur(18px) saturate(160%);backdrop-filter: blur(18px) saturate(160%);transform: translateX(-50%);opacity: 0;}
.hero-hd-hud span {display: grid;place-items: center;width: calc(58 * var(--hero-u));height: calc(58 * var(--hero-u));border-radius: calc(14 * var(--hero-u));font-family: var(--font-display);font-size: calc(26 * var(--hero-u));font-weight: 600;color: #16161a;background: linear-gradient(180deg, #ffffff, #e9e8ee);box-shadow: inset 0 calc(-3 * var(--hero-u)) 0 rgba(0, 0, 0, 0.12), 0 calc(2 * var(--hero-u)) calc(4 * var(--hero-u)) rgba(0, 0, 0, 0.25);transition: transform 90ms var(--ease-ui), box-shadow 90ms var(--ease-ui);}
.hero-hd-hud span.is-down { transform: translateY(calc(3 * var(--hero-u))); box-shadow: inset 0 calc(-1 * var(--hero-u)) 0 rgba(0, 0, 0, 0.12), 0 calc(1 * var(--hero-u)) calc(2 * var(--hero-u)) rgba(0, 0, 0, 0.25); }
.hero-hd-toast {position: absolute;left: 50%;top: calc(44 * var(--hero-u));display: flex;align-items: center;gap: calc(12 * var(--hero-u));height: calc(52 * var(--hero-u));max-width: calc(560 * var(--hero-u));padding: 0 calc(20 * var(--hero-u)) 0 calc(12 * var(--hero-u));border-radius: calc(26 * var(--hero-u));white-space: nowrap;color: #f3f3f3;background: #131313;box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.3), 0 calc(10 * var(--hero-u)) calc(28 * var(--hero-u)) rgba(8, 10, 24, 0.3), 0 calc(2 * var(--hero-u)) calc(6 * var(--hero-u)) rgba(8, 10, 24, 0.16);transform: translateX(-50%);transform-origin: 50% 0;opacity: 0;}
.hero-hd-ti {display: grid;place-items: center;width: calc(28 * var(--hero-u));height: calc(28 * var(--hero-u));flex: none;border-radius: 50%;background: linear-gradient(180deg, #8ae891, #6dd870);}
.hero-hd-ti svg { width: calc(20 * var(--hero-u)); height: calc(20 * var(--hero-u)); fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.hero-hd-ti .hero-hd-ti-link, .hero-hd-toast[data-kind="link"] .hero-hd-ti-copied { display: none; }
.hero-hd-toast[data-kind="link"] .hero-hd-ti { background: linear-gradient(180deg, #5aa8ff, #2f7cf6); }
.hero-hd-toast[data-kind="link"] .hero-hd-ti-link { display: block; }
.hero-hd-tt { display: flex; flex-direction: column; gap: calc(1 * var(--hero-u)); min-width: 0; }
.hero-hd-tt b { font-size: calc(13 * var(--hero-u)); font-weight: 600; line-height: calc(16 * var(--hero-u)); }
.hero-hd-tt span { max-width: calc(440 * var(--hero-u)); overflow: hidden; text-overflow: ellipsis; font-size: calc(12 * var(--hero-u)); line-height: calc(15 * var(--hero-u)); color: #a1a1a1; }
.hero-hd-cur { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; filter: drop-shadow(0 1.5px 2.5px rgba(0, 0, 0, 0.35)); }
.hero-hd-cur svg { position: absolute; overflow: visible; max-width: none; width: calc(26 * var(--hero-u)); height: calc(34 * var(--hero-u)); }
.hero-hd-arrow { left: calc(-2 * var(--hero-u)); top: calc(-2 * var(--hero-u)); }
.hero-hd-arrow path { fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.hero-hd-cross { display: none; left: calc(-17 * var(--hero-u)); top: calc(-17 * var(--hero-u)); width: calc(34 * var(--hero-u)) !important; height: calc(34 * var(--hero-u)) !important; }
.hero-hd-cross path { fill: none; stroke-linecap: round; }
.hero-hd-cross .hero-co { stroke: #fff; stroke-width: 3.8; }
.hero-hd-cross .hero-ci { stroke: #111; stroke-width: 1.5; }
.hero-hd-cross circle { fill: #111; stroke: #fff; stroke-width: 0.8; }
.hero-hd-cur.is-cross .hero-hd-arrow { display: none; }
.hero-hd-cur.is-cross .hero-hd-cross { display: block; }
@container hero-hd (max-width: 520px) {.hero-hd { --hero-u: calc(100cqw / 800); --hero-mb: calc(15 * var(--hero-u)); }
.hero-hd-w0, .hero-hd-w2 { left: calc(28 * var(--hero-u)); top: calc(30 * var(--hero-u)); width: calc(744 * var(--hero-u)); height: calc(456 * var(--hero-u)); }
.hero-hd-w1 { left: calc(110 * var(--hero-u)); top: calc(22 * var(--hero-u)); width: calc(580 * var(--hero-u)); height: calc(520 * var(--hero-u)); }
.hero-hd-slide { padding: calc(30 * var(--hero-u)) calc(36 * var(--hero-u)); }
.hero-hd-h { font-size: calc(44 * var(--hero-u)); }
.hero-hd-body { max-width: none; font-size: calc(29 * var(--hero-u)); }
.hero-hd-chart, .hero-hd-hud, .hero-hd-who { display: none; }
.hero-hd-slide-dark .hero-hd-h { font-size: calc(48 * var(--hero-u)); margin-bottom: calc(18 * var(--hero-u)) !important; }
.hero-hd-url { font-size: calc(31 * var(--hero-u)); }
.hero-hd-page { font-size: calc(22 * var(--hero-u)); padding: calc(34 * var(--hero-u)) calc(36 * var(--hero-u)); }
.hero-hd-mbi { left: calc(568 * var(--hero-u)); top: calc(1 * var(--hero-u)); width: calc(22 * var(--hero-u)); height: calc(13 * var(--hero-u)); }
.hero-hd-toast { top: calc(26 * var(--hero-u)); height: calc(60 * var(--hero-u)); border-radius: calc(30 * var(--hero-u)); max-width: calc(600 * var(--hero-u)); }
.hero-hd-tt b { font-size: calc(17 * var(--hero-u)); line-height: calc(20 * var(--hero-u)); }
.hero-hd-tt span { font-size: calc(15 * var(--hero-u)); line-height: calc(19 * var(--hero-u)); max-width: calc(470 * var(--hero-u)); }
.hero-hd-ti { width: calc(34 * var(--hero-u)); height: calc(34 * var(--hero-u)); }
.hero-hd-size { height: calc(28 * var(--hero-u)); font-size: calc(15 * var(--hero-u)); border-radius: calc(14 * var(--hero-u)); }
.hero-hd-cur svg { width: calc(36 * var(--hero-u)); height: calc(46 * var(--hero-u)); }
.hero-hd-cross { left: calc(-22 * var(--hero-u)); top: calc(-22 * var(--hero-u)); width: calc(44 * var(--hero-u)) !important; height: calc(44 * var(--hero-u)) !important; }}
html:not(.js) .hero-hd-target {position: relative;border-radius: 1px;box-shadow: 0 0 0 calc(10 * var(--hero-u)) transparent, 0 0 0 calc(3000 * var(--hero-u)) rgba(8, 10, 20, 0.28);outline: max(1px, calc(1.2 * var(--hero-u))) solid rgba(255, 255, 255, 0.96);outline-offset: calc(10 * var(--hero-u));}
html:not(.js) .hero-hd-toast { opacity: 1; }
.hero-ctl {position: relative;z-index: 3;display: flex;align-items: center;justify-content: center;gap: 2px;width: max-content;max-width: 100%;margin: 10px auto 0;padding: 4px;border-radius: var(--r-pill);background: var(--glass-bg);border: 1px solid var(--glass-line);box-shadow: var(--glass-hi), 0 10px 30px -16px rgba(30, 28, 80, 0.45);-webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);}
.hero-ctl button {display: inline-flex;align-items: center;gap: 7px;min-height: 36px;padding: 0 13px;border: 0;border-radius: var(--r-pill);background: transparent;color: var(--ink-2);font-size: 0.875rem;font-weight: 560;white-space: nowrap;cursor: pointer;transition: background-color var(--t-ui), color var(--t-ui);}
.hero-ctl button svg { width: 15px; height: 15px; flex: none; }
.hero-ctl button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.hero-ctl button[aria-pressed="true"] { color: var(--btn-ink); background: var(--btn-bg); }
.hero-ctl .hero-ctl-pause { width: 36px; padding: 0; justify-content: center; }
.hero-ctl-pause svg { width: 13px; height: 13px; }
.hero-ctl-pause .hero-i-play, .hero-ctl-pause[data-state="paused"] .hero-i-pause { display: none; }
.hero-ctl-pause[data-state="paused"] .hero-i-play { display: block; }
.hero-ctl-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line-2); }
.hero-orbit { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 3192 / 1814; pointer-events: none; }
.hero-orbit-back { z-index: 0; }
.hero-orbit-front { z-index: 2; }
.hero-g { position: absolute; width: var(--hero-gw); left: var(--hero-gx); top: var(--hero-gy); }
.hero-g picture, .hero-g img { display: block; width: 100%; height: auto; }
.hero-g-cmd { --hero-gx: -6.5%; --hero-gy: 50%; --hero-gw: 21%; }
.hero-g-cmd picture { filter: blur(1.1px) saturate(0.95); }
.hero-g-two { --hero-gx: 81%; --hero-gy: 58%; --hero-gw: 24%; }
.hero-g::after {content: "";position: absolute;z-index: -1;left: 16%;right: 12%;bottom: 2%;height: 16%;border-radius: 50%;background: radial-gradient(closest-side, rgba(38, 30, 84, 0.34), rgba(38, 30, 84, 0.12) 55%, rgba(38, 30, 84, 0));filter: blur(7px);transform: translate3d(0, 38%, 0) scaleY(0.6);}
.hero-g-cmd::after { opacity: 0.7; filter: blur(10px); }
.motion-pin .hero {--hero-ctl-h: 58px;--hero-avail: calc(100svh - var(--hero-navb) - var(--hero-ctl-h) - 40px);--hero-dev-w: min(1520px, 84vw, calc(var(--hero-avail) * var(--hero-ar)));--hero-dev-top: calc(var(--hero-navb) + 14px + (var(--hero-avail) - var(--hero-dev-w) / var(--hero-ar)) / 2);}
.motion-pin .hero-stage { overflow: clip; }
.motion-pin .hero-copy {position: absolute;left: 0;right: 0;z-index: 1;top: calc(var(--hero-navb) + clamp(20px, 4vh, 56px));}
.motion-pin .hero-device {position: absolute;left: 50%;top: var(--hero-dev-top);margin-left: calc(var(--hero-dev-w) / -2);}
.motion-pin .hero-ctl { position: absolute; left: 50%; top: 100%; margin: 12px 0 0; transform: translateX(-50%); }
.motion-pin .hero-ctl:focus-within { opacity: 1 !important; }
.hero.is-live .hero-plane, .hero.is-live .hero-device-in, .hero.is-live .hero-g, .hero.is-live .hero-copy { will-change: transform; }
.motion-pin .hero-copy:focus-within { z-index: 6; opacity: 1 !important; transform: none !important; filter: none !important; visibility: visible !important; }
html:not(.motion-pin) .hero-stage { padding: calc(var(--hero-navb) + clamp(40px, 7vw, 88px)) 0 clamp(56px, 7vw, 96px); }
html:not(.motion-pin) .hero-world { bottom: auto; height: min(100%, max(760px, 64vw)); }
html:not(.motion-pin) .hero-device { margin-top: clamp(40px, 6vw, 72px); }
@media (prefers-reduced-motion: no-preference) {.js .hero-in { opacity: 0; transform: translate3d(0, 18px, 0); }
.js.is-ready .hero-in { animation: hero-rise 0.9s var(--ease-out) both; animation-delay: calc(0.12s + var(--hero-i, 0) * 0.1s); }
.js .hero-title { opacity: 0; animation: hero-show 1ms linear 2.4s forwards; }
.js.is-ready .hero-title:not(.is-mosaic) { animation: hero-rise 1s var(--ease-out) 0.18s both; }
.js .hero-title.is-mosaic { animation: none; opacity: 0; }
.js .hero-title.is-crisp { animation: none; opacity: 1; }
.js .hero-plane-pic { opacity: 0; }
.js.is-ready .hero-plane-pic { animation: hero-land 1.6s var(--ease-out) both; }
.js.is-ready .hero-p-sky .hero-plane-pic { animation-name: hero-sky; animation-duration: 1.8s; }
.js.is-ready .hero-p-far .hero-plane-pic { --hero-land: 2.5%; animation-delay: 0.04s; }
.js.is-ready .hero-p-mid .hero-plane-pic { --hero-land: 4%; animation-delay: 0.1s; }
.js.is-ready .hero-p-near .hero-plane-pic { --hero-land: 6%; animation-delay: 0.16s; }
.js.is-ready .hero-p-front .hero-plane-pic { --hero-land: 9%; animation-delay: 0.22s; }
.js .hero-device-rise { opacity: 0; transform: translate3d(0, 90px, 0); }
.js.is-ready .hero-device-rise { animation: hero-rise 1.3s var(--ease-out) 0.55s both; }
.js .hero-g-img { opacity: 0; }
.js.is-ready .hero-g-img { animation: hero-focus 1.1s var(--ease-out) both; animation-delay: calc(0.85s + var(--hero-k, 0) * 0.09s); }
.js .hero-ctl { opacity: 0; }
.js.is-ready .hero-ctl { animation: hero-fade 0.8s var(--ease-out) 1.2s both; }
.motion-pin.js.is-ready .hero-ctl { animation-fill-mode: backwards; }
.js.intro-skip .hero-in, .js.intro-skip .hero-title, .js.intro-skip .hero-plane-pic,
.js.intro-skip .hero-device-rise, .js.intro-skip .hero-g-img, .js.intro-skip .hero-ctl { animation: none; opacity: 1; transform: none; filter: none; }}
@media (prefers-reduced-motion: no-preference) {.js:not(.is-ready) .hero-in, .js:not(.is-ready) .hero-plane-pic, .js:not(.is-ready) .hero-device-rise,
.js:not(.is-ready) .hero-g-img, .js:not(.is-ready) .hero-ctl { animation: hero-rise 1ms linear 2.5s forwards; }}
.hero-g-cmd .hero-g-img { --hero-k: 0; }
.hero-g-two .hero-g-img { --hero-k: 2; }
@keyframes hero-rise { to { opacity: 1; transform: none; } }
@keyframes hero-show { to { opacity: 1; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-land { from { opacity: 0; transform: translate3d(0, var(--hero-land, 3%), 0); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes hero-sky { from { opacity: 0.4; transform: scale(1.07); } to { opacity: 1; transform: none; } }
@keyframes hero-focus { from { opacity: 0; filter: blur(12px); transform: scale(1.08); } to { opacity: 1; filter: blur(0); transform: none; } }
@media (max-width: 760px) {.hero-new { font-size: 0.8125rem; }
.hero-new-l { display: none; }
.hero-new-s { display: inline; }
.hero-title { max-width: 11ch; }
.hero-lede { font-size: 1.0625rem; max-width: 30em; }
.hero-lede-more { display: none; }
.hero-ctas { flex-direction: column; align-items: stretch; gap: 4px; max-width: 420px; margin-inline: auto; }
.hero-ctas .btn { width: 100%; }
.hero-ctas .btn-glass { min-height: 44px; padding: 0 12px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 0.9375rem; color: var(--ink); }
.hero-ctas .btn-glass .btn-play { width: 22px; height: 22px; }
.hero-trust { flex-wrap: nowrap; gap: 4px 14px; margin-top: 12px; font-size: 0.78rem; white-space: nowrap; }
.hero-trust li:nth-child(2) { display: none; }
.hero-ctl button { min-height: 44px; padding: 0 11px; font-size: 0.8125rem; }
.hero-ctl .hero-ctl-pause { width: 44px; }
.hero-ctl button:not(.hero-ctl-pause) svg { display: none; }
.hero-g-cmd { --hero-gx: 10%; --hero-gy: -30%; --hero-gw: 17%; }
.hero-g-two { --hero-gx: 72%; --hero-gy: -36%; --hero-gw: 19%; }
html:not(.motion-pin) .hero-orbit { display: none; }
html:not(.motion-pin) .hero-device { width: min(120vw, 680px); margin-left: 50%; transform: translateX(-50%); }
html:not(.motion-pin) .hero-world { height: min(100%, 900px); }}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {.motion-pin .hero {--hero-below: 196px;--hero-dev-w: min(124vw, calc((100svh - var(--hero-navb) - var(--hero-below) - 28px) * var(--hero-ar)));--hero-dev-top: calc(var(--hero-navb) + (100svh - var(--hero-navb) - var(--hero-dev-w) / var(--hero-ar) - var(--hero-below)) / 2);}
.motion-pin .hero-copy { top: calc(var(--hero-navb) + 18px); }
.motion-pin .hero-g-cmd { --hero-gx: 13%; --hero-gy: -31%; --hero-gw: 16%; }
.motion-pin .hero-g-two { --hero-gx: 70%; --hero-gy: -35%; --hero-gw: 17%; }
.motion-pin .hero-orbit-front { z-index: 2; }
.motion-pin .hero-clip { display: block; }}
@media (min-width: 761px) and (max-aspect-ratio: 4/5) {.motion-pin .hero { --hero-dev-w: min(100vw, calc((100svh - var(--hero-navb) - var(--hero-below) - 28px) * var(--hero-ar))); }
.motion-pin .hero-g-cmd { --hero-gx: 6%; --hero-gy: -30%; --hero-gw: 13%; }
.motion-pin .hero-g-two { --hero-gx: 80%; --hero-gy: -34%; --hero-gw: 14%; }}
.hero-clip {display: none;position: absolute;left: 0;right: 0;top: 100%;z-index: 3;width: min(calc(100vw - 32px), 420px);margin: 78px auto 0;padding: 11px 16px 14px;border-radius: 20px;text-align: left;background: var(--glass-bg);border: 1px solid var(--glass-line);box-shadow: var(--glass-hi), 0 18px 40px -22px rgba(30, 28, 80, 0.5);-webkit-backdrop-filter: var(--glass-blur);backdrop-filter: var(--glass-blur);}
.hero-clip-h {display: flex;align-items: center;gap: 6px;margin: 0 0 6px;font-size: 0.78rem;font-weight: 600;letter-spacing: -0.005em;color: var(--ink-2);}
.hero-clip-h svg { width: 15px; height: 15px; flex: none; color: var(--select-ink); }
.hero-clip-v { margin-left: auto; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.hero-clip-v kbd { min-width: 1.6em; height: 1.6em; margin-left: 2px; font-size: 0.92em; }
.hero-clip-t {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin: 0;font-size: 0.97rem;line-height: 1.38;font-weight: 500;letter-spacing: -0.012em;color: var(--ink);}
.hero-clip[data-kind="link"] .hero-clip-t { font-family: var(--mono); font-size: 0.9rem; color: var(--select-ink); word-break: break-all; }
.hero-clip-t.is-new { animation: hero-clip-in 0.7s var(--ease-out) both; }
@keyframes hero-clip-in { from { opacity: 0; transform: translate3d(0, 6px, 0); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.hero-ctl-short { display: none; }
@media (max-width: 420px) {.hero-trust li:nth-child(2) { display: none; }
.hero-ctl button { padding: 0 13px; }
.hero-ctl button:not(.hero-ctl-pause) svg { display: block; }
.hero-ctl-long { display: none; }
.hero-ctl-short { display: inline; }}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .hero-world {background: linear-gradient(180deg, #050b1f 0%, #132550 50%, #253562 70%, var(--paper) 100%);--hero-mist-img: url("../img/sections/01/mist-night-1600.webp");}
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {:root:not([data-theme="light"]) .hero-world { --hero-mist-img: image-set(url("../img/sections/01/mist-night-1600.avif") type("image/avif"), url("../img/sections/01/mist-night-1600.webp") type("image/webp")); }}
:root:not([data-theme="light"]) .hero-mist-far { --hero-mist-o: .4; }
:root:not([data-theme="light"]) .hero-lede, :root:not([data-theme="light"]) .hero-trust { text-shadow: 0 0 14px rgba(8, 12, 34, 0.75), 0 1px 2px rgba(8, 12, 34, 0.55); }}
.hero-g picture { transition: transform 0.16s var(--ease-ui); }
.hero-g.is-down picture { transform: translate3d(0, 4%, 0) scale(0.96); }
.hero-glow {position: absolute;left: -22%;top: -30%;width: 144%;height: 160%;background: radial-gradient(closest-side, rgba(255, 238, 230, 0.78), rgba(255, 232, 226, 0.34) 46%, rgba(255, 232, 226, 0) 100%);}
.hero-fog { display: none; }
.motion-pin .hero-fog {display: block;position: absolute;left: -2%;right: -2%;bottom: -2%;height: 30%;z-index: 4;pointer-events: none;background:
var(--hero-mist-img) repeat-x 0 30% / 1600px 70%,
linear-gradient(to top, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, #f6eef0 46%, transparent) 42%, transparent 100%);}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .hero-glow { background: radial-gradient(closest-side, rgba(110, 140, 255, 0.3), rgba(90, 110, 220, 0.12) 50%, rgba(90, 110, 220, 0) 100%); }
:root:not([data-theme="light"]) .motion-pin .hero-fog { background: var(--hero-mist-img) repeat-x 0 30% / 1600px 70%, linear-gradient(to top, color-mix(in srgb, var(--paper) 88%, transparent) 0%, transparent 100%); }}
.hero-world, .hero-orbit { --hero-mx: 0; --hero-my: 0; }
.hero-plane-pic, .hero-mist > i, .hero-g picture { translate: calc(var(--hero-mx) * var(--hero-pd, 0) * -1px) calc(var(--hero-my) * var(--hero-pd, 0) * -0.5px); }
.hero-p-sky { --hero-pd: 3; }
.hero-p-far { --hero-pd: 6; }
.hero-mist-far { --hero-pd: 8; }
.hero-p-mid { --hero-pd: 10; }
.hero-p-near { --hero-pd: 15; }
.hero-mist-near { --hero-pd: 19; }
.hero-p-front { --hero-pd: 26; }
.hero-orbit-back .hero-g { --hero-pd: 12; }
.hero-orbit-front .hero-g { --hero-pd: 34; }
.hero-hc {position: absolute;inset: 0;z-index: 5;overflow: hidden;pointer-events: none;transition: opacity 0.22s linear;}
.hero-hc.is-out { opacity: 0; }
.hero-hc-sel {position: absolute;left: 0;top: 0;width: 0;height: 0;border-radius: 2px;box-shadow: 0 0 0 300vmax rgba(10, 12, 30, 0.3);opacity: 0;}
.hero-hc-sel::after {content: "";position: absolute;inset: -1px;border-radius: inherit;border: 1.5px solid rgba(255, 255, 255, 0.98);box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22), 0 2px 12px rgba(0, 0, 0, 0.18);opacity: var(--hero-edge, 1);}
.hero-hc-flash { position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; }
.hero-hc-size {position: absolute;left: 0;top: 0;display: flex;align-items: center;height: 26px;padding: 0 11px;border-radius: 13px;font-size: 13px;font-weight: 600;letter-spacing: -0.01em;font-variant-numeric: tabular-nums;white-space: pre;color: #fff;background: rgba(22, 22, 26, 0.74);box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.28), 0 4px 14px rgba(0, 0, 0, 0.22);-webkit-backdrop-filter: blur(12px) saturate(160%);backdrop-filter: blur(12px) saturate(160%);opacity: 0;}
.hero-hc-size .hero-x { color: rgba(255, 255, 255, 0.6); }
.hero-hc-cur { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; filter: drop-shadow(0 1.5px 2.5px rgba(0, 0, 0, 0.35)); }
.hero-hc-cur svg { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; max-width: none; overflow: visible; }
.hero-hc-cur path { fill: none; stroke-linecap: round; }
.hero-hc-cur .hero-co { stroke: #fff; stroke-width: 3.8; }
.hero-hc-cur .hero-ci { stroke: #111; stroke-width: 1.5; }
.hero-hc-cur circle { fill: #111; stroke: #fff; stroke-width: 0.8; }
.hero-hc-toast {position: absolute;left: 0;top: 0;display: flex;align-items: center;gap: 12px;height: 52px;max-width: min(440px, calc(100vw - 32px));padding: 0 22px 0 12px;border-radius: 26px;white-space: nowrap;color: #f3f3f3;background: #131313;box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.3), 0 16px 36px -10px rgba(16, 14, 50, 0.5), 0 2px 6px rgba(16, 14, 50, 0.18);transform-origin: 50% 0;opacity: 0;}
.hero-hc-ti { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: linear-gradient(180deg, #8ae891, #6dd870); }
.hero-hc-ti svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.hero-hc-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.hero-hc-tt b { font-size: 13px; font-weight: 600; line-height: 16px; }
.hero-hc-tt span { overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 15px; color: #a1a1a1; }
.hero-new { transition: transform var(--t-ui) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui), filter 0.2s linear; }
.hero-new.is-hc { filter: opacity(0); }
.hero-lede kbd { transition: transform 90ms var(--ease-ui), box-shadow 90ms var(--ease-ui), color 90ms; }
.hero-lede kbd.is-down { transform: translateY(1.5px); color: var(--select-ink); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); }
@media (prefers-reduced-motion: reduce) { .hero-hc { display: none; } }
.hero-sheen { display: none; }
.motion-pin .hero-sheen {display: block;position: absolute;left: 9.900%;top: 3.969%;width: 80.201%;height: 88.203%;overflow: hidden;border-radius: 1% / 1.6%;pointer-events: none;}
.hero-sheen > i {position: absolute;top: -20%;bottom: -20%;left: -46%;width: 46%;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.05) 72%, rgba(255, 255, 255, 0) 100%);}
/* src/styles/sections/02-how.css */
.how {--how-seam: clamp(96px, 12vh, 160px);--how-pull: 160px;--how-pt: calc(100cqw / 1440);position: relative;background: var(--night);color: var(--night-ink);isolation: isolate;}
.how-seam { position: relative; height: var(--how-seam); pointer-events: none; }
.how-seam-top {background: linear-gradient(to bottom,
var(--paper) 0%,
color-mix(in oklab, var(--paper) 86%, var(--dawn-haze)) 14%,
color-mix(in oklab, var(--dawn-haze) 70%, var(--night-horizon)) 38%,
color-mix(in oklab, var(--night-horizon) 75%, var(--night)) 62%,
color-mix(in oklab, var(--night-sky) 40%, var(--night)) 82%,
var(--night) 100%);}
.how-seam-bottom {background: linear-gradient(to top,
var(--paper) 0%,
color-mix(in oklab, var(--paper) 84%, var(--morning-haze)) 16%,
color-mix(in oklab, var(--morning-haze) 55%, var(--night-horizon)) 42%,
color-mix(in oklab, var(--night-horizon) 70%, var(--night)) 66%,
color-mix(in oklab, var(--night-sky) 35%, var(--night)) 84%,
var(--night) 100%);}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .how-seam-top {background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in oklab, var(--paper) 70%, var(--night-horizon)) 40%, color-mix(in oklab, var(--night-horizon) 22%, var(--night)) 72%, var(--night) 100%);}
:root:not([data-theme="light"]) .how-seam-bottom {background: linear-gradient(to top, var(--paper) 0%, color-mix(in oklab, var(--paper) 70%, var(--night-horizon)) 40%, color-mix(in oklab, var(--night-horizon) 22%, var(--night)) 72%, var(--night) 100%);}}
.how-track { position: relative; --p: 0; --b0: 0; --b1: 0; --b2: 0; --b3: 0; background: var(--night); }
.motion-pin .how-track {margin-top: calc(var(--how-pull) * -1);background: linear-gradient(to bottom, transparent 0, color-mix(in oklab, var(--night) 70%, transparent) calc(var(--how-pull) * 0.55), var(--night) var(--how-pull));}
.how-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.how-bg > i { position: absolute; display: block; }
.how-bg-glow {inset: -10% -10% -20%;background:
radial-gradient(42% 38% at 50% 58%, rgba(59, 108, 255, 0.24), rgba(59, 108, 255, 0) 70%),
radial-gradient(30% 30% at 64% 66%, rgba(140, 92, 246, 0.16), rgba(140, 92, 246, 0) 70%),
radial-gradient(60% 40% at 50% 100%, rgba(37, 53, 98, 0.55), rgba(37, 53, 98, 0) 70%);}
.how-bg-dots {inset: -48px 0 -120px;background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.6px);background-size: 24px 24px;background-position: 12px 12px;-webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);mask-image: radial-gradient(70% 60% at 50% 55%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);}
.how-head { position: relative; z-index: 3; }
.how-head-l .eyebrow { display: flex; width: max-content; }
.how-title { position: relative; display: inline-block; color: var(--night-ink); }
.how-w { position: relative; z-index: 1; display: inline-block; }
.how-wsel { display: none; }
.how-lede { color: var(--night-ink-2); max-width: 36ch; text-wrap: balance; }
.how-step-t {display: flex;align-items: baseline;gap: 12px;font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);font-weight: 650;line-height: 1.25;letter-spacing: -0.018em;color: var(--night-ink);}
.how-step-n {flex: none;display: inline-grid;place-items: center;width: 24px;height: 24px;border-radius: 7px;font-size: 0.75rem;font-weight: 700;letter-spacing: 0;color: #fff;background: rgba(255, 255, 255, 0.1);box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);transform: translateY(-1px);}
.how-step-t .keys { gap: 3px; margin-left: 4px; vertical-align: 0.1em; }
.how-step-t kbd { font-size: 0.8em; color: var(--night-ink); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.how-step-p { margin-top: 6px; color: var(--night-ink-2); font-size: 0.9375rem; line-height: 1.45; text-wrap: pretty; }
.how-frame { display: none; }
.js:not(.motion-ready) .how-frame { display: none !important; }
.motion-pin .how-stage {display: grid;grid-template-rows: auto minmax(0, 1fr) auto;gap: clamp(10px, 2.2vh, 24px);padding: calc(var(--nav-top) + var(--nav-h) + clamp(8px, 2.4vh, 26px)) var(--gutter) clamp(16px, 3.2vh, 32px);}
.motion-pin .how-head {display: flex;align-items: flex-end;justify-content: space-between;gap: var(--s4);width: 100%;max-width: var(--shell-wide);margin-inline: auto;}
.motion-pin .how-head .eyebrow { margin-bottom: 10px; }
.motion-pin .how-title { font-size: clamp(2.25rem, 1.6rem + 2.7vw, 4rem); white-space: nowrap; }
.motion-pin .how-lede { font-size: clamp(1rem, 0.94rem + 0.25vw, 1.1875rem); text-align: right; padding-bottom: 6px; }
.motion-pin .how-wsel {display: block;position: absolute;left: 0;top: 0;z-index: 0;transform-origin: 0 0;--select-fill: rgba(59, 108, 255, 0.2);opacity: 0;}
.how-track:not([data-active]) .how-wsel { animation-play-state: paused; }
.motion-pin .how-w { opacity: 0.42; }
.motion-pin .how-w[data-w="0"] { opacity: 1; }
.motion-pin .how-scene {position: relative;z-index: 2;margin: 0;min-height: 0;container-type: size;display: grid;place-items: center;perspective: 1600px;perspective-origin: 50% 35%;}
.how-scene { margin: 0; }
.how-display {position: relative;width: min(74cqw, 97cqh * 1.6, 1440px);aspect-ratio: 16 / 10;border-radius: clamp(10px, 1.3cqw, 18px);overflow: hidden;background: #0c0d12;box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.09),
0 1px 0 1px rgba(255, 255, 255, 0.05) inset,
0 50px 140px -40px rgba(59, 108, 255, 0.45),
0 40px 80px -30px rgba(0, 0, 0, 0.85);transform-origin: 50% 50%;isolation: isolate;}
.how-world {position: absolute;left: 0;top: 0;width: 200%;aspect-ratio: 16 / 10;transform-origin: 0 0;transform: scale(0.5);container-type: inline-size;}
.how-world picture { position: absolute; inset: 0; pointer-events: none; }
.how-desk img { width: 100%; height: 100%; object-fit: cover; }
.how-dim { position: absolute; inset: 0; opacity: 0; }
.how-dim > i { position: absolute; display: block; background: #080a15; }
.how-dim-t { left: 0; top: 0; width: 100%; height: 25.889%; }
.how-dim-l { left: 0; top: calc(25.889% - var(--how-pt) * 4); width: 13.889%; height: 100%; }
.how-dim-r { left: 13.889%; top: calc(25.889% - var(--how-pt) * 4); width: 100%; height: 100%; }
.how-dim-b { left: calc(13.889% - var(--how-pt) * 4); top: 25.889%; width: 100%; height: 100%; }
.how-edges { position: absolute; inset: 0; opacity: 0; }
.how-edges > i {position: absolute;display: block;left: 13.889%;top: 25.889%;background: #fff;box-shadow: 0 0 calc(var(--how-pt) * 4) rgba(0, 0, 0, 0.35);transform-origin: 0 0;}
.how-e-t, .how-e-b { width: 36.25%; height: calc(var(--how-pt) * 1.5); margin-top: calc(var(--how-pt) * -0.75); }
.how-e-l, .how-e-r { width: calc(var(--how-pt) * 1.5); height: 11.333%; margin-left: calc(var(--how-pt) * -0.75); }
.how-flash { position: absolute; left: 13.889%; top: 25.889%; width: 36.25%; height: 11.333%; background: #fff; opacity: 0; }
.how-size {position: absolute;left: 0;top: 0;display: flex;align-items: center;height: calc(var(--how-pt) * 22);padding: 0 calc(var(--how-pt) * 9);border-radius: calc(var(--how-pt) * 11);font: 600 calc(var(--how-pt) * 12) / 1 var(--font);font-variant-numeric: tabular-nums;white-space: pre;color: #fff;background: rgba(22, 22, 26, 0.7);box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.28), 0 2px 8px rgba(0, 0, 0, 0.22);opacity: 0;}
.how-size-x { color: rgba(255, 255, 255, 0.6); }
.how-xhair {position: absolute;left: 0;top: 0;width: calc(var(--how-pt) * 22);height: calc(var(--how-pt) * 22);margin: calc(var(--how-pt) * -11) 0 0 calc(var(--how-pt) * -11);opacity: 0;overflow: visible;}
.how-toast { position: absolute; left: 31.632%; top: -0.667%; width: 36.736%; height: auto; opacity: 0; }
.how-shade { position: absolute; inset: 0; background: #05060a; opacity: 0; pointer-events: none; }
.how-pulse {position: absolute;left: 50%;top: 100%;width: 160%;aspect-ratio: 1;margin: -80% 0 0 -80%;border-radius: 50%;background: radial-gradient(closest-side,
rgba(96, 132, 255, 0) 50%,
rgba(96, 132, 255, 0.1) 70%,
rgba(160, 184, 255, 0.34) 84%,
rgba(214, 224, 255, 0.5) 88%,
rgba(96, 132, 255, 0.08) 93%,
rgba(96, 132, 255, 0) 97%);opacity: 0;transform: scale(0.1);pointer-events: none;}
.how-keys {position: absolute;left: 50%;top: 50%;z-index: 4;display: flex;gap: 1.2cqw;width: max-content;transform: translate(-50%, calc(min(74cqw, 97cqh * 1.6, 1440px) / 1.6 * 0.5 - 94%));pointer-events: none;}
.how-key { position: relative; display: block; width: min(14.5cqw, 26cqh, 204px); }
.how-key img { width: 100%; height: auto; }
.how-key-glow {position: absolute;left: 8%;right: 8%;bottom: -8%;height: 46%;border-radius: 50%;background: radial-gradient(closest-side, rgba(96, 140, 255, 0.85), rgba(96, 140, 255, 0));filter: blur(10px);opacity: 0;}
.how-note-pos {position: absolute;z-index: 5;left: calc(50% + min(74cqw, 97cqh * 1.6, 1440px) * 0.02);top: 50%;width: min(620px, 46cqw);transform: translateY(-46%);pointer-events: none;}
.how-note {position: relative;border-radius: 22px;color: #1d1d22;background: rgba(250, 250, 252, 0.94);box-shadow:
0 0 0 0.5px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 40px 90px -20px rgba(0, 0, 0, 0.7),
0 18px 36px -18px rgba(20, 30, 80, 0.5);opacity: 0;transform-origin: 0% 50%;}
.how-note-bar { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.how-note-tl, .how-note-tools { display: flex; gap: 8px; }
.how-note-tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.how-note-tl i:nth-child(2) { background: #febc2e; }
.how-note-tl i:nth-child(3) { background: #28c840; }
.how-note-tools { gap: 4px; color: #6e6e76; }
.how-note-tools svg { width: 30px; height: 26px; padding: 5px 7px; border-radius: 8px; }
.how-note-tools svg:first-child { background: rgba(0, 0, 0, 0.05); }
.how-note-body { position: relative; padding: 14px 26px 24px; }
.how-note-meta { font-size: 0.6875rem; color: #8a8a90; text-align: center; letter-spacing: 0.01em; }
.how-note-h { margin: 10px 0 10px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: #111114; }
.how-line { font-size: 15.5px; line-height: 1.55; color: #2a2a31; letter-spacing: normal; }
.how-caret { position: absolute; left: 0; top: 0; width: 2px; height: 1.2em; font-size: 15.5px; opacity: 0; }
.how-caret::before { content: ""; position: absolute; inset: 0; border-radius: 1px; background: var(--select); }
@media (prefers-reduced-motion: no-preference) {.how-caret::before { animation: how-blink 1.05s steps(1, end) infinite; }}
@keyframes how-blink { 50% { opacity: 0; } }
.how-paste {position: absolute;right: 18px;bottom: -18px;display: flex;gap: 5px;opacity: 0;}
.how-paste kbd {min-width: 34px;height: 34px;border-radius: 9px;font-size: 0.9375rem;color: #fff;background: linear-gradient(180deg, rgba(110, 130, 255, 0.95), rgba(59, 108, 255, 0.95));border: 1px solid rgba(255, 255, 255, 0.35);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px -8px rgba(59, 108, 255, 0.8);transition: none;}
.how-ghosts { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.how-ghost {position: absolute;left: 0;top: 0;display: block;white-space: nowrap;font-size: 15.5px;line-height: 1.16;letter-spacing: normal;color: #23252e;transform-origin: 0 0;opacity: 0;}
.how-ghost-hl {position: absolute;inset: -0.2em -0.34em -0.16em;border-radius: 0.22em;background: rgba(130, 160, 255, 0.92);box-shadow: 0 0.5em 1.4em -0.4em rgba(20, 40, 140, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.5);z-index: -1;}
.how-ghost > span { position: relative; }
.how-track[data-active] .how-display,
.how-track[data-active] .how-note,
.how-track[data-active] .how-key,
.how-track[data-active] .how-ghost,
.how-track[data-active] .how-bg > i { will-change: transform, opacity; }
.motion-pin .how-foot { position: relative; z-index: 3; width: 100%; max-width: var(--shell-wide); margin-inline: auto; }
.how-rail { display: none; }
.motion-pin .how-rail {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: clamp(16px, 2.4vw, 32px);margin-bottom: clamp(10px, 1.8vh, 16px);}
.how-rail i { position: relative; display: block; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.14); }
.how-rail i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #6f93ff, #b9c9ff); transform-origin: 0 50%; transform: scaleX(0); }
.how-rail i[data-i="0"]::after { transform: scaleX(var(--b0)); }
.how-rail i[data-i="1"]::after { transform: scaleX(var(--b1)); }
.how-rail i[data-i="2"]::after { transform: scaleX(var(--b2)); }
.how-rail i[data-i="3"]::after { transform: scaleX(var(--b3)); }
.motion-pin .how-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.motion-pin .how-step { opacity: 0.72; transition: opacity var(--t-swap) var(--ease-in-out); }
.motion-pin .how-track:not([data-beat]) .how-step[data-i="0"],
.motion-pin .how-track[data-beat="0"] .how-step[data-i="0"],
.motion-pin .how-track[data-beat="1"] .how-step[data-i="1"],
.motion-pin .how-track[data-beat="2"] .how-step[data-i="2"],
.motion-pin .how-track[data-beat="3"] .how-step[data-i="3"] { opacity: 1; }
.motion-pin .how-track[data-beat] .how-step .how-step-n { transition: background-color var(--t-swap), color var(--t-swap); }
.motion-pin .how-track:not([data-beat]) .how-step[data-i="0"] .how-step-n,
.motion-pin .how-track[data-beat="0"] .how-step[data-i="0"] .how-step-n,
.motion-pin .how-track[data-beat="1"] .how-step[data-i="1"] .how-step-n,
.motion-pin .how-track[data-beat="2"] .how-step[data-i="2"] .how-step-n,
.motion-pin .how-track[data-beat="3"] .how-step[data-i="3"] .how-step-n { background: var(--select); box-shadow: none; }
@media (max-height: 760px) {.motion-pin .how-lede { display: none; }
.motion-pin .how-step-p { font-size: 0.875rem; }}
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {.motion-pin .how-head { display: block; }
.motion-pin .how-head .eyebrow { margin-bottom: 8px; }
.motion-pin .how-scene { place-items: start center; }
.how-display { width: 100cqw; aspect-ratio: auto; height: min(76cqh, 100cqw * 1.16); margin-top: 0; border-radius: 18px; }
.how-keys { top: 0; gap: 3cqw; transform: translate(-50%, calc(min(76cqh, 100cqw * 1.16) - 60%)); }
.how-key { width: min(25cqw, 20cqh, 150px); }
.how-note-pos { left: 0; top: auto; bottom: 0; width: 100cqw; transform: none; }
.how-note { border-radius: 18px; transform-origin: 50% 100%; }
.motion-pin .how-steps { display: grid; grid-template-columns: minmax(0, 1fr); }
.motion-pin .how-step { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity var(--t-swap) var(--ease-in-out), transform var(--t-swap) var(--ease-out); }
.motion-pin .how-track:not([data-beat]) .how-step[data-i="0"],
.motion-pin .how-track[data-beat="0"] .how-step[data-i="0"],
.motion-pin .how-track[data-beat="1"] .how-step[data-i="1"],
.motion-pin .how-track[data-beat="2"] .how-step[data-i="2"],
.motion-pin .how-track[data-beat="3"] .how-step[data-i="3"] { opacity: 1; transform: none; }
.motion-pin .how-rail { gap: 6px; }
.motion-pin .how-step-p { min-height: 2.9em; }}
@media (max-width: 760px) {.motion-pin .how-lede { display: none; }
.motion-pin .how-title { font-size: clamp(2.125rem, 1.4rem + 3.6vw, 2.75rem); }
.how-note-bar { height: 38px; padding: 0 12px; }
.how-note-tl i { width: 10px; height: 10px; }
.how-note-body { padding: 10px 18px 18px; }
.how-note-h { font-size: 1.125rem; margin: 6px 0 6px; }
.how-line, .how-caret { font-size: 0.8125rem; }
.how-line { line-height: 1.5; }
.how-paste { right: 12px; bottom: -14px; }
.how-paste kbd { min-width: 28px; height: 28px; font-size: 0.8125rem; border-radius: 8px; }}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {.motion-pin .how-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.motion-pin .how-lede { text-align: left; padding: 0; }
.how-note-pos { left: 6cqw; width: 88cqw; }}
html:not(.motion-pin) .how-stage { position: relative; padding: var(--sec-y-sm) 0 var(--sec-y); }
html:not(.motion-pin) .how-scene,
html:not(.motion-pin) .how-rail { display: none; }
html:not(.motion-pin) .how-head {max-width: calc(var(--shell) + var(--gutter) * 2);margin: 0 auto clamp(32px, 5vw, 56px);padding-inline: var(--gutter);display: flex;align-items: flex-end;justify-content: space-between;gap: var(--s4);flex-wrap: wrap;}
html:not(.motion-pin) .how-lede { font-size: var(--fs-lead); }
html:not(.motion-pin) .how-foot { position: relative; z-index: 1; max-width: calc(var(--shell) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
html:not(.motion-pin) .how-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 36px); counter-reset: none; }
html:not(.motion-pin) .how-frame {display: block;margin-bottom: var(--s3);border-radius: var(--r-media);overflow: hidden;background: var(--night-2);box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 30px 90px -50px rgba(59, 108, 255, 0.5);}
html:not(.motion-pin) .how-frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
html:not(.motion-pin) .how-step-p { max-width: 46ch; }
@media (max-width: 760px) {html:not(.motion-pin) .how-steps { grid-template-columns: minmax(0, 1fr); }
html:not(.motion-pin) .how-head { display: block; }
html:not(.motion-pin) .how-lede { margin-top: var(--s2); }}
.how-film { position: relative; padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 3.6vw, 52px); background: var(--night); color: var(--night-ink); }
.how-film-wrap { position: relative; }
.how-film-card {--film-pad: clamp(16px, 2.2vw, 28px);--film-play: clamp(48px, 4.4vw, 60px);position: relative;width: min(100%, 1160px);margin-inline: auto;aspect-ratio: 16 / 9;border-radius: clamp(18px, 2.2vw, 30px);overflow: hidden;isolation: isolate;background: #07080c;box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.1),
0 1px 0 1px rgba(255, 255, 255, 0.05) inset,
0 70px 160px -60px rgba(59, 108, 255, 0.5),
0 40px 90px -40px rgba(0, 0, 0, 0.9);}
.how-film-loop { position: absolute; inset: 0; background: #07080c; }
.how-film-loop .vid-toggle { z-index: 3; right: var(--film-pad); bottom: calc(var(--film-pad) + (var(--film-play) - 36px) / 2); }
.how-film-card::after {content: "";position: absolute;inset: 0;z-index: 1;pointer-events: none;background: linear-gradient(to top, rgba(5, 6, 14, 0.72) 0%, rgba(5, 6, 14, 0.28) 20%, rgba(5, 6, 14, 0) 40%);}
.how-film-btn { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end start; width: 100%; padding: var(--film-pad); border: 0; border-radius: inherit; background: transparent; color: #fff; cursor: pointer; }
.how-film-btn:focus-visible { outline-offset: -6px; }
.how-film-play {display: grid;place-items: center;width: var(--film-play);height: var(--film-play);border-radius: 50%;color: #fff;background: rgba(16, 18, 28, 0.5);border: 1px solid rgba(255, 255, 255, 0.28);-webkit-backdrop-filter: blur(18px) saturate(170%);backdrop-filter: blur(18px) saturate(170%);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 24px 60px -16px rgba(0, 0, 0, 0.6);transition: transform 0.35s var(--ease-out), background-color 0.35s;}
.how-film-play svg { width: 36%; height: 36%; margin: 0; }
.how-film-btn:hover .how-film-play, .how-film-btn:focus-visible .how-film-play { transform: scale(1.07); background: var(--select); }
.how-film-meta {position: absolute;z-index: 2;left: calc(var(--film-pad) + var(--film-play) + 14px);bottom: var(--film-pad);min-height: var(--film-play);display: grid;align-content: center;gap: 2px;margin: 0;pointer-events: none;color: #fff;text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);}
.how-film-meta b { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); font-weight: 650; letter-spacing: -0.015em; }
.how-film-meta span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); }
.how-film-cap {max-width: 40ch;margin: clamp(18px, 2.2vw, 28px) auto 0;text-align: center;font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);font-weight: 600;line-height: 1.35;letter-spacing: -0.014em;color: var(--night-ink-2);}
@media (max-width: 760px) {.how-film-wrap { padding-inline: 12px; }
.how-film-meta span { display: none; }}
#how { scroll-margin-top: calc(var(--how-seam) * -1 + 8px); }
.motion-pin #how { scroll-margin-top: calc(var(--how-pull) - var(--how-seam) - var(--nav-top) - var(--nav-h) - 16px); }
/* src/styles/sections/03-features.css */
.feat { position: relative; }
.feat.section-lg { padding-block: var(--sec-y) var(--sec-y-sm); }
.feat-head { display: grid; gap: var(--s2) clamp(32px, 6vw, 96px); margin: 0 0 clamp(32px, 5vw, 72px); }
.feat-title { max-width: 12ch; font-size: clamp(2.25rem, 1.6rem + 2.7vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
.feat-lede { max-width: 520px; }
@media (min-width: 961px) {.feat-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.feat-lede { padding-bottom: 0.4em; }}
.feat-steps { display: grid; gap: clamp(56px, 7vw, 112px); }
.feat-step { position: relative; }
.feat-copy { max-width: 470px; }
.feat-kicker {display: flex;align-items: center;gap: 10px;margin: 0 0 14px;font-size: 0.8125rem;font-weight: 650;letter-spacing: 0.01em;color: var(--ink-3);}
.feat-n {display: inline-grid;place-items: center;min-width: 30px;height: 22px;padding: 0 6px;border-radius: 5px;border: 1.5px dashed color-mix(in srgb, var(--select) 70%, transparent);color: var(--select-ink);font-variant-numeric: tabular-nums;font-size: 0.75rem;letter-spacing: 0.02em;}
.feat-kicker .chip-new { margin-left: 2px; }
.feat-h {font-size: clamp(1.5rem, 1.04rem + 1.45vw, 2.375rem);line-height: 1.06;letter-spacing: -0.032em;font-weight: 700;text-wrap: balance;}
.feat-p {margin-top: 14px;font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);line-height: 1.5;color: var(--ink-2);text-wrap: pretty;}
.feat-p kbd { font-size: 0.82em; }
.feat-vis { margin-top: 24px; }
@media (min-width: 961px) {.feat-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.feat-step .feat-vis { margin-top: 0; }}
.feat-scene {--feat-u: 0.1cqw;position: relative;aspect-ratio: 16 / 10;container-type: size;border-radius: var(--r-media);overflow: hidden;isolation: isolate;background: #16171d;box-shadow: var(--sh-deep);color: #fff;font-family: var(--font);letter-spacing: -0.01em;line-height: 1.25;-webkit-user-select: none;user-select: none;}
.feat-cam { position: absolute; inset: 0; transform-origin: 50% 58%; }
.feat-sc-hx .feat-cam { transform-origin: 50% 0; }
.feat-layer { position: absolute; inset: 0; }
.feat-wall-p, .feat-wall-p > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.feat-wall-p > img { object-fit: cover; }
.feat-loop { position: absolute; inset: 0; background: #1b1c24; }
.feat-loop video { width: 100%; height: 100%; object-fit: cover; }
.feat-win {position: absolute;overflow: hidden;border-radius: calc(var(--feat-u) * 14);background: rgba(28, 28, 31, 0.97);box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset, 0 calc(var(--feat-u) * 2) calc(var(--feat-u) * 4) rgba(0, 0, 0, 0.18), 0 calc(var(--feat-u) * 26) calc(var(--feat-u) * 60) calc(var(--feat-u) * -10) rgba(10, 8, 30, 0.55);}
.feat-win-bar {position: relative;display: flex;align-items: center;gap: calc(var(--feat-u) * 7);height: calc(var(--feat-u) * 30);padding: 0 calc(var(--feat-u) * 12);background: rgba(255, 255, 255, 0.04);border-bottom: 1px solid rgba(255, 255, 255, 0.07);}
.feat-win-bar > i { width: calc(var(--feat-u) * 11); height: calc(var(--feat-u) * 11); border-radius: 50%; background: #ff5f57; flex: none; }
.feat-win-bar > i + i { background: #febc2e; }
.feat-win-bar > i + i + i { background: #28c840; }
.feat-win-bar > span {position: absolute;left: 0; right: 0;text-align: center;font-size: calc(var(--feat-u) * 12);font-weight: 600;color: rgba(255, 255, 255, 0.6);pointer-events: none;}
.feat-toast {position: absolute;left: 0; right: 0;margin-inline: auto;width: max-content;max-width: 86%;display: flex;align-items: center;gap: calc(var(--feat-u) * 11);padding: calc(var(--feat-u) * 9) calc(var(--feat-u) * 24) calc(var(--feat-u) * 9) calc(var(--feat-u) * 10);border-radius: var(--r-pill);background: rgba(18, 18, 20, 0.94);box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 calc(var(--feat-u) * 18) calc(var(--feat-u) * 40) calc(var(--feat-u) * -10) rgba(0, 0, 0, 0.6);}
.feat-toast-b { display: grid; place-items: center; flex: none; width: calc(var(--feat-u) * 30); height: calc(var(--feat-u) * 30); border-radius: 50%; background: #34c759; }
.feat-toast-b.is-blue { background: #0a84ff; }
.feat-toast-b svg { width: 58%; height: 58%; color: #fff; }
.feat-toast-t { display: grid; min-width: 0; }
.feat-toast-t b { font-size: calc(var(--feat-u) * 15); font-weight: 700; color: #fff; }
.feat-toast-t span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(var(--feat-u) * 13); color: rgba(255, 255, 255, 0.62); }
.feat-keys { position: absolute; display: flex; gap: calc(var(--feat-u) * 8); }
.feat-key {display: inline-grid;place-items: center;width: calc(var(--feat-u) * 46);height: calc(var(--feat-u) * 46);border-radius: calc(var(--feat-u) * 11);background: linear-gradient(180deg, rgba(60, 64, 82, 0.62), rgba(24, 26, 36, 0.72));border: 1px solid rgba(255, 255, 255, 0.28);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 calc(var(--feat-u) * 5) 0 calc(var(--feat-u) * -1) rgba(10, 12, 30, 0.4), 0 calc(var(--feat-u) * 14) calc(var(--feat-u) * 26) calc(var(--feat-u) * -8) rgba(10, 14, 40, 0.55);-webkit-backdrop-filter: blur(10px) saturate(160%);backdrop-filter: blur(10px) saturate(160%);color: #fff;font-size: calc(var(--feat-u) * 20);font-weight: 600;text-shadow: 0 1px 2px rgba(20, 30, 70, 0.35);}
.feat-chip-glass {position: absolute;display: inline-flex;align-items: center;gap: calc(var(--feat-u) * 7);padding: calc(var(--feat-u) * 8) calc(var(--feat-u) * 14);border-radius: var(--r-pill);background: rgba(255, 255, 255, 0.16);border: 1px solid rgba(255, 255, 255, 0.3);-webkit-backdrop-filter: blur(14px) saturate(160%);backdrop-filter: blur(14px) saturate(160%);font-size: calc(var(--feat-u) * 13);font-weight: 600;color: #fff;white-space: nowrap;}
.feat-chip-glass svg { width: calc(var(--feat-u) * 15); height: calc(var(--feat-u) * 15); }
.feat-mb {position: absolute;top: 0; left: 0; right: 0;z-index: 2;display: flex;align-items: center;gap: calc(var(--feat-u) * 15);height: calc(var(--feat-u) * 30);padding: 0 calc(var(--feat-u) * 16) 0 calc(50cqw - var(--feat-u) * 15);background: rgba(255, 255, 255, 0.16);-webkit-backdrop-filter: blur(16px) saturate(150%);backdrop-filter: blur(16px) saturate(150%);color: #fff;font-size: calc(var(--feat-u) * 13);font-weight: 600;}
.feat-mb-app { display: grid; place-items: center; width: calc(var(--feat-u) * 30); height: calc(var(--feat-u) * 22); border-radius: calc(var(--feat-u) * 6); background: rgba(255, 255, 255, 0.3); }
.feat-mb-app svg { width: calc(var(--feat-u) * 17); height: calc(var(--feat-u) * 17); }
.feat-mb-i { width: calc(var(--feat-u) * 16); height: calc(var(--feat-u) * 16); flex: none; }
.feat-mb-bat { width: calc(var(--feat-u) * 21); }
.feat-mb-t { margin-left: auto; white-space: nowrap; }
.feat-hx {position: absolute;z-index: 1;left: 50%;top: calc(var(--feat-u) * 15);width: calc(var(--feat-u) * 410);margin-left: calc(var(--feat-u) * -205);container-type: inline-size;}
.feat-hx-p, .feat-hx-p > img { width: 100%; height: auto; }
.feat-hx-ui { position: absolute; inset: 0; display: none; }
.feat-anim .feat-hx-ui { display: block; opacity: 0; transition: opacity 260ms var(--ease-ui); }
.feat-anim .feat-hx.is-live .feat-hx-ui { opacity: 1; }
.feat-hx-chips { position: absolute; left: 10.65cqw; top: 53.47cqw; width: 62.96cqw; height: 6.94cqw; background: #0f0f0f; isolation: isolate; }
.feat-hx-chip, .feat-hx-ind { position: absolute; top: 0.69cqw; height: 5.56cqw; border-radius: 3cqw; }
.feat-hx-chip {display: flex;align-items: center;justify-content: center;gap: 0.72cqw;color: #f2f2f2;font-size: 2.6cqw;font-weight: 600;letter-spacing: -0.01em;white-space: nowrap;}
.feat-hx-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #181818; box-shadow: inset 0 0 0 0.14cqw rgba(255, 255, 255, 0.09); }
.feat-hx-chip b { font-weight: 500; color: #8f8f94; transition: color 280ms var(--ease-ui); }
.feat-hx-chip[data-f="all"] { left: 0.93cqw; width: 10.53cqw; }
.feat-hx-chip[data-f="text"] { left: 12.85cqw; width: 12.5cqw; }
.feat-hx-chip[data-f="links"] { left: 26.74cqw; width: 13.77cqw; }
.feat-hx-chip[data-f="qr"] { left: 41.9cqw; width: 19.56cqw; }
.feat-hx-ind {left: 0.93cqw;width: 10.53cqw;background: linear-gradient(180deg, #2a8cff, #0a74ff);box-shadow: inset 0 0.12cqw 0 rgba(255, 255, 255, 0.35), 0 0 1.2cqw rgba(10, 116, 255, 0.45);transition: left 520ms var(--ease-spring), width 520ms var(--ease-spring);}
.feat-hx[data-f="all"] .feat-hx-chip[data-f="all"] b,
.feat-hx[data-f="text"] .feat-hx-chip[data-f="text"] b,
.feat-hx[data-f="links"] .feat-hx-chip[data-f="links"] b,
.feat-hx[data-f="qr"] .feat-hx-chip[data-f="qr"] b { color: rgba(255, 255, 255, 0.82); }
.feat-hx[data-f="text"] .feat-hx-ind { left: 12.85cqw; width: 12.5cqw; }
.feat-hx[data-f="links"] .feat-hx-ind { left: 26.74cqw; width: 13.77cqw; }
.feat-hx[data-f="qr"] .feat-hx-ind { left: 41.9cqw; width: 19.56cqw; }
.feat-hx-search {position: absolute;left: 17.9cqw;top: 46.2cqw;width: 30cqw;height: 4.9cqw;display: flex;align-items: center;background: #232323;font-size: 3.05cqw;font-weight: 400;color: #f2f2f2;white-space: nowrap;}
.feat-hx-ph { color: #8b8b8b; padding-left: 0.42cqw; }
.feat-hx-q:not(:empty) + .feat-hx-caret { margin-left: 0.15cqw; }
.feat-hx-q:not(:empty) ~ .feat-hx-ph, .feat-hx[data-q] .feat-hx-ph { display: none; }
.feat-hx-caret { order: -1; width: 0.3cqw; height: 3.4cqw; border-radius: 0.2cqw; background: #2f7cf6; animation: feat-blink 1s steps(1) infinite; }
.feat-hx[data-q] .feat-hx-caret { order: 1; }
.feat-hx[data-q] .feat-hx-q { padding-left: 0.3cqw; }
@keyframes feat-blink { 50% { opacity: 0; } }
.feat-hx-dim {position: absolute;left: 9.72cqw;width: 80.56cqw;border-radius: 1.3cqw;background: rgba(15, 15, 15, 0.8);opacity: 0;transition: opacity 360ms var(--ease-ui);}
.feat-hx-dim[data-r="a"] { top: 62.27cqw; height: 11.34cqw; }
.feat-hx-dim[data-r="b"] { top: 73.84cqw; height: 11.34cqw; }
.feat-hx-dim[data-r="c"] { top: 85.65cqw; height: 11.34cqw; }
.feat-hx-dim[data-r="d"] { top: 97.45cqw; height: 11.34cqw; }
.feat-hx-dim[data-r="e"] { top: 109.14cqw; height: 14.47cqw; }
.feat-hx-dim[data-r="f"] { top: 123.84cqw; height: 3.7cqw; border-radius: 0; }
.feat-hx[data-f="text"] .feat-hx-dim:not([data-k="text"]),
.feat-hx[data-f="links"] .feat-hx-dim:not([data-k="links"]),
.feat-hx[data-f="qr"] .feat-hx-dim:not([data-k="qr"]),
.feat-hx[data-q] .feat-hx-dim:not([data-r="a"]) { opacity: 1; }
.feat-sc-fp { --fp-cx0: calc(var(--feat-u) * 470); --fp-cy0: calc(var(--feat-u) * 380); --fp-cx1: calc(var(--feat-u) * 868); --fp-cy1: calc(var(--feat-u) * 172); --fp-cx2: calc(var(--feat-u) * 790); --fp-cy2: calc(var(--feat-u) * 400); }
.feat-fp-win { left: calc(var(--feat-u) * 26); top: calc(var(--feat-u) * 56); width: calc(var(--feat-u) * 562); height: calc(var(--feat-u) * 546); }
.feat-fp-win .feat-win-bar > em { position: relative; margin-left: auto; font-style: normal; font-size: calc(var(--feat-u) * 11.5); font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.feat-fp-body { position: absolute; top: calc(var(--feat-u) * 30); left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: calc(var(--feat-u) * 84) minmax(0, 1fr); background: #262629; }
.feat-fp-side { display: grid; align-content: start; justify-items: center; gap: calc(var(--feat-u) * 8); padding: calc(var(--feat-u) * 14) 0; background: rgba(255, 255, 255, 0.03); border-right: 1px solid rgba(255, 255, 255, 0.07); }
.feat-fp-th { position: relative; display: grid; justify-items: center; gap: calc(var(--feat-u) * 4); }
.feat-fp-thp {display: grid;align-content: start;gap: calc(var(--feat-u) * 3.6);width: calc(var(--feat-u) * 46);height: calc(var(--feat-u) * 60);padding: calc(var(--feat-u) * 8) calc(var(--feat-u) * 6);border-radius: 2px;background: linear-gradient(180deg, #f4efe3, #e7dfcd);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);outline: calc(var(--feat-u) * 2.5) solid transparent;outline-offset: calc(var(--feat-u) * 2.5);transform: rotate(calc((var(--k) - 2.5) * 0.4deg));transition: outline-color 200ms var(--ease-ui);}
.feat-fp-thp b { display: block; height: calc(var(--feat-u) * 2.3); border-radius: 1px; background: rgba(60, 48, 36, 0.42); }
.feat-fp-thp b:first-child { width: 66%; height: calc(var(--feat-u) * 3.4); margin: 0 auto calc(var(--feat-u) * 2); background: rgba(40, 30, 20, 0.62); }
.feat-fp-thp b:nth-child(3) { width: 88%; }
.feat-fp-thp b:nth-child(5) { width: 56%; }
.feat-fp-th em { font-style: normal; font-size: calc(var(--feat-u) * 9.5); font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.feat-fp-th.is-cur .feat-fp-thp { outline-color: #3b82f6; }
.feat-fp-th::after {content: "";position: absolute;right: calc(var(--feat-u) * -6);top: calc(var(--feat-u) * -5);width: calc(var(--feat-u) * 16);height: calc(var(--feat-u) * 16);border-radius: 50%;background: #34c759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 55% / 64% no-repeat;box-shadow: 0 0 0 calc(var(--feat-u) * 1.5) #262629;}
.feat-fp-main { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, #303035, #222225); }
.feat-fp-page {position: relative;width: calc(var(--feat-u) * 352);height: calc(var(--feat-u) * 458);padding: calc(var(--feat-u) * 30) calc(var(--feat-u) * 34) 0;overflow: hidden;background:
radial-gradient(120% 80% at 26% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
radial-gradient(90% 60% at 90% 100%, rgba(120, 96, 60, 0.12), transparent 70%),
linear-gradient(180deg, #f6f1e5, #ebe3d1);box-shadow: 0 calc(var(--feat-u) * 12) calc(var(--feat-u) * 34) rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);transform: rotate(-0.7deg);color: #2b2620;font-family: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;letter-spacing: 0;}
.feat-fp-page::before {content: "";position: absolute;inset: 0;pointer-events: none;background:
linear-gradient(90deg, rgba(60, 46, 30, 0.14), rgba(60, 46, 30, 0) 7%),
radial-gradient(rgba(70, 56, 40, 0.1) 0.6px, transparent 1.1px) 0 0 / calc(var(--feat-u) * 5) calc(var(--feat-u) * 5);mix-blend-mode: multiply;}
.feat-fp-run { margin: 0 0 calc(var(--feat-u) * 14); text-align: center; font-size: calc(var(--feat-u) * 8.5); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(43, 38, 32, 0.58); }
.feat-fp-h { margin: 0 0 calc(var(--feat-u) * 14); text-align: center; font-size: calc(var(--feat-u) * 25); font-weight: 600; line-height: 1.1; }
.feat-fp-page p:not(.feat-fp-run):not(.feat-fp-h) { margin: calc(var(--feat-u) * 8) 0 0; font-size: calc(var(--feat-u) * 12.6); line-height: 1.56; text-align: justify; text-indent: calc(var(--feat-u) * 14); hyphens: auto; color: rgba(43, 38, 32, 0.92); }
.feat-fp-beam {position: absolute;left: 0;right: 0;top: 0;height: calc(var(--feat-u) * 46);pointer-events: none;background: linear-gradient(to bottom, rgba(59, 108, 255, 0), rgba(59, 108, 255, 0.14) 70%, rgba(130, 168, 255, 0.95) 96%, rgba(59, 108, 255, 0));opacity: 0;}
.feat-fp-read {position: absolute;left: 50%;bottom: calc(var(--feat-u) * 16);display: flex;align-items: center;gap: calc(var(--feat-u) * 8);padding: calc(var(--feat-u) * 7) calc(var(--feat-u) * 14);border-radius: var(--r-pill);background: rgba(18, 18, 22, 0.9);box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 calc(var(--feat-u) * 10) calc(var(--feat-u) * 24) rgba(0, 0, 0, 0.45);font-size: calc(var(--feat-u) * 11.5);font-weight: 600;color: #fff;white-space: nowrap;transform: translateX(-50%);opacity: 0;}
.feat-fp-read b { font-weight: 700; font-variant-numeric: tabular-nums; }
.feat-fp-spin { width: calc(var(--feat-u) * 11); height: calc(var(--feat-u) * 11); border-radius: 50%; border: calc(var(--feat-u) * 1.8) solid rgba(255, 255, 255, 0.25); border-top-color: #fff; }
@media (prefers-reduced-motion: no-preference) { .feat-fp-spin { animation: feat-spin 0.8s linear infinite; } }
@keyframes feat-spin { to { transform: rotate(1turn); } }
.feat-fp-panel { position: absolute; left: calc(var(--feat-u) * 612); top: calc(var(--feat-u) * 32); width: calc(var(--feat-u) * 364); container-type: inline-size; filter: drop-shadow(0 calc(var(--feat-u) * 24) calc(var(--feat-u) * 40) rgba(4, 6, 20, 0.45)); }
.feat-fp-p, .feat-fp-p > img { display: block; width: 100%; height: auto; }
.feat-fp-ui { position: absolute; inset: 0; }
.feat-fp-btn { position: absolute; left: 51.04cqw; top: 33.45cqw; width: 37.27cqw; height: 8.1cqw; border-radius: 2.4cqw; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 0.2cqw rgba(110, 150, 255, 0.7); opacity: 0; }
.feat-fp-chips { position: absolute; left: 10.65cqw; top: 53.47cqw; width: 62.96cqw; height: 6.94cqw; background: #0f0f0f; }
.feat-fp-chips span { position: absolute; top: 0.69cqw; height: 5.56cqw; display: flex; align-items: center; justify-content: center; gap: 0.72cqw; border-radius: 3cqw; font-size: 2.6cqw; font-weight: 600; letter-spacing: -0.01em; color: #f2f2f2; white-space: nowrap; background: #181818; box-shadow: inset 0 0 0 0.14cqw rgba(255, 255, 255, 0.09); }
.feat-fp-chips b { font-weight: 500; color: #8f8f94; }
.feat-fp-chips span:nth-child(1) { left: 0.93cqw; width: 10.53cqw; background: linear-gradient(180deg, #2a8cff, #0a74ff); box-shadow: inset 0 0.12cqw 0 rgba(255, 255, 255, 0.35); }
.feat-fp-chips span:nth-child(1) b { color: rgba(255, 255, 255, 0.82); }
.feat-fp-chips span:nth-child(2) { left: 12.85cqw; width: 12.5cqw; }
.feat-fp-chips span:nth-child(3) { left: 26.74cqw; width: 13.77cqw; }
.feat-fp-chips span:nth-child(4) { left: 41.9cqw; width: 19.56cqw; }
.feat-fp-list { position: absolute; left: 9.72cqw; top: 62.27cqw; width: 80.56cqw; height: 65cqw; overflow: hidden; background: #0f0f0f; }
.feat-fp-rows { position: absolute; left: -9.72cqw; top: -62.27cqw; width: 100cqw; transform: translate3d(0, 11.57cqw, 0); clip-path: inset(62.27cqw 0 0 0); }
.feat-fp-new { position: absolute; left: 0; right: 0; top: 0; height: 11.57cqw; display: flex; align-items: center; gap: 2.3cqw; padding: 0 1.9cqw; border-radius: 1.3cqw; background-color: #1b1b1c; box-shadow: 0 0 0 0.6cqw #0f0f0f; }
.feat-fp-ic { flex: none; display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 1.5cqw; background: #2b2b2e; box-shadow: inset 0 0 0 0.12cqw rgba(255, 255, 255, 0.1); color: #e9e9ec; }
.feat-fp-ic svg { width: 3.6cqw; height: 3.6cqw; }
.feat-fp-tx { display: grid; gap: 0.6cqw; min-width: 0; line-height: 1.15; }
.feat-fp-tx b { overflow: hidden; font-size: 3cqw; font-weight: 500; color: #f2f2f2; white-space: nowrap; text-overflow: ellipsis; }
.feat-fp-tx span { font-size: 2.55cqw; color: #8b8b8b; }
.feat-fp-cur { position: absolute; left: 0; top: 0; width: calc(var(--feat-u) * 22); height: auto; overflow: visible; opacity: 0; transform: translate3d(var(--fp-cx1), var(--fp-cy1), 0); filter: drop-shadow(0 1.5px 2.5px rgba(0, 0, 0, 0.4)); }
.feat-fp-cur path { fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.feat-fp-toast { top: calc(var(--feat-u) * 44); right: calc(var(--feat-u) * 388); }
.feat-fp-toast .feat-toast-t span { max-width: calc(var(--feat-u) * 330); }
.feat-anim .feat-sc-fp .feat-fp-page { transition: filter 400ms var(--ease-ui); }
.feat-anim .feat-sc-fp.fp-read:not(.fp-done) .feat-fp-page { filter: saturate(0.9) brightness(0.98); }
.feat-anim .feat-sc-fp .feat-fp-th::after { opacity: 0; transform: scale(0.4); transition: opacity 200ms var(--ease-ui), transform 420ms var(--ease-spring); }
.feat-anim .feat-sc-fp .feat-fp-th.is-read::after { opacity: 1; transform: none; }
.feat-anim .feat-sc-fp.fp-read:not(.fp-done) .feat-fp-read { opacity: 1; transition: opacity 240ms var(--ease-ui); }
.feat-anim .feat-sc-fp.fp-read:not(.fp-done) .feat-fp-beam { opacity: 1; animation: feat-fp-beam 380ms linear infinite; }
@keyframes feat-fp-beam { from { transform: translate3d(0, calc(var(--feat-u) * -46), 0); } to { transform: translate3d(0, calc(var(--feat-u) * 458), 0); } }
.feat-anim .feat-sc-fp .feat-fp-btn { transition: opacity 160ms var(--ease-ui); }
.feat-anim .feat-sc-fp.fp-press .feat-fp-btn { opacity: 1; }
.feat-anim .feat-sc-fp .feat-fp-cur { transform: translate3d(var(--fp-cx0), var(--fp-cy0), 0); transition: transform 620ms var(--ease-in-out) 120ms, opacity 260ms var(--ease-ui) 60ms; }
.feat-anim .feat-sc-fp.is-on .feat-fp-cur { opacity: 1; transform: translate3d(var(--fp-cx1), var(--fp-cy1), 0); }
.feat-anim .feat-sc-fp.is-on.fp-open .feat-fp-cur { opacity: 0; transform: translate3d(var(--fp-cx2), var(--fp-cy2), 0); transition-duration: 900ms, 500ms; transition-delay: 150ms, 520ms; }
.feat-anim .feat-sc-fp .feat-fp-chips { opacity: 0; transition: opacity 260ms var(--ease-ui) 260ms; }
.feat-anim .feat-sc-fp .feat-fp-rows { transform: none; transition: transform 620ms var(--ease-spring) 120ms; }
.feat-anim .feat-sc-fp .feat-fp-new { opacity: 0; transform: translate3d(0, -60%, 0); background-color: #1a2442; transition: opacity 360ms var(--ease-ui) 260ms, transform 620ms var(--ease-spring) 200ms, background-color 1200ms var(--ease-ui) 1400ms; }
.feat-anim .feat-sc-fp .feat-fp-toast { opacity: 0; transform: translate3d(0, calc(var(--feat-u) * -22), 0) scale(0.92); transition: opacity 320ms var(--ease-ui), transform 640ms var(--ease-spring); }
.feat-anim .feat-sc-fp.fp-done .feat-fp-chips { opacity: 1; }
.feat-anim .feat-sc-fp.fp-done .feat-fp-rows { transform: translate3d(0, 11.57cqw, 0); }
.feat-anim .feat-sc-fp.fp-done .feat-fp-new { opacity: 1; transform: none; background-color: #1b1b1c; }
.feat-anim .feat-sc-fp.fp-done .feat-fp-toast { opacity: 1; transform: none; }
.feat-tb-scan { left: calc(var(--feat-u) * 40); top: calc(var(--feat-u) * 104); width: calc(var(--feat-u) * 470); height: calc(var(--feat-u) * 410); }
.feat-tb-scan .feat-win-bar { background: rgba(255, 255, 255, 0.05); }
.feat-tb-paper {position: absolute;inset: calc(var(--feat-u) * 50) calc(var(--feat-u) * 22) calc(var(--feat-u) * -30);padding: calc(var(--feat-u) * 26) calc(var(--feat-u) * 26) 0;background:
radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
linear-gradient(180deg, #f6f1e6, #ece5d6);box-shadow: 0 calc(var(--feat-u) * 8) calc(var(--feat-u) * 24) rgba(0, 0, 0, 0.45);transform: rotate(-1.1deg);color: #2c2721;font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif;}
.feat-tb-cap { font-size: calc(var(--feat-u) * 17); font-weight: 600; letter-spacing: -0.005em; margin-bottom: calc(var(--feat-u) * 14); }
.feat-tb-tw { position: relative; }
.feat-tb-t { border-collapse: collapse; width: 100%; font-size: calc(var(--feat-u) * 14); font-variant-numeric: tabular-nums; }
.feat-tb-t th, .feat-tb-t td { padding: calc(var(--feat-u) * 7.5) calc(var(--feat-u) * 8); border-bottom: 1px solid rgba(60, 45, 30, 0.28); text-align: right; white-space: nowrap; }
.feat-tb-t th { font-weight: 700; border-bottom: 1.5px solid rgba(60, 45, 30, 0.6); }
.feat-tb-t th:first-child, .feat-tb-t td:first-child { text-align: left; }
.feat-tb-foot { margin-top: calc(var(--feat-u) * 14); font-size: calc(var(--feat-u) * 11); font-style: italic; color: rgba(44, 39, 33, 0.62); }
.feat-tb-sel { inset: calc(var(--feat-u) * -9) calc(var(--feat-u) * -10); transform-origin: 0 0; }
.feat-tb-size, .feat-tr-size { right: 0; bottom: calc(var(--feat-u) * -26); font-size: calc(var(--feat-u) * 11); font-family: var(--font); }
.feat-tb-sheet { left: calc(var(--feat-u) * 492); top: calc(var(--feat-u) * 262); width: calc(var(--feat-u) * 468); height: calc(var(--feat-u) * 330); }
.feat-tb-grid {position: relative;display: grid;grid-template-columns: calc(var(--feat-u) * 30) calc(var(--feat-u) * 90) repeat(3, calc(var(--feat-u) * 80)) 1fr;grid-auto-rows: calc(var(--feat-u) * 32);grid-template-rows: calc(var(--feat-u) * 26);font-size: calc(var(--feat-u) * 13.5);font-variant-numeric: tabular-nums;}
.feat-tb-grid > span { display: flex; align-items: center; min-width: 0; padding: 0 calc(var(--feat-u) * 9); border-right: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.07); white-space: nowrap; overflow: hidden; }
.feat-tb-ch, .feat-tb-rh, .feat-tb-corner { justify-content: center; background: rgba(255, 255, 255, 0.045); color: rgba(255, 255, 255, 0.46); font-size: calc(var(--feat-u) * 11); font-weight: 600; }
.feat-tb-c { color: #f2f2f2; }
.feat-tb-c.is-n { justify-content: flex-end; }
.feat-tb-c.is-h { font-weight: 700; }
.feat-tb-range {position: absolute;left: calc(var(--feat-u) * 30);top: calc(var(--feat-u) * 26);width: calc(var(--feat-u) * 330);height: calc(var(--feat-u) * 160);border: 2px solid #3b82f6;border-radius: 2px;background: rgba(59, 130, 246, 0.1);pointer-events: none;}
.feat-tb-range::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 6px; height: 6px; border-radius: 1px; background: #3b82f6; box-shadow: 0 0 0 1.5px #1c1c1f; }
.feat-tb-keys { left: calc(var(--feat-u) * 860); top: calc(var(--feat-u) * 198); }
.feat-tb-toast { top: calc(var(--feat-u) * 36); }
.feat-tr-win { left: calc(var(--feat-u) * 64); top: calc(var(--feat-u) * 92); width: calc(var(--feat-u) * 640); height: calc(var(--feat-u) * 470); }
.feat-tr-video { position: absolute; top: calc(var(--feat-u) * 30); left: 0; right: 0; bottom: 0; background: #0b0b0d; }
.feat-tr-slide {position: absolute;inset: 0 0 calc(var(--feat-u) * 44);background: radial-gradient(90% 120% at 100% 0%, #e9eefc 0%, transparent 55%), #fbfaf7;color: #1d1d1f;}
.feat-tr-slide::before { content: ""; position: absolute; left: calc(var(--feat-u) * 54); top: calc(var(--feat-u) * 44); width: calc(var(--feat-u) * 44); height: calc(var(--feat-u) * 5); border-radius: 3px; background: #3b6cff; }
.feat-tr-txt { position: absolute; left: calc(var(--feat-u) * 54); top: calc(var(--feat-u) * 66); right: calc(var(--feat-u) * 40); }
.feat-tr-txt p { position: relative; margin-top: calc(var(--feat-u) * 12); padding-left: calc(var(--feat-u) * 22); font-size: calc(var(--feat-u) * 23); font-weight: 500; line-height: 1.3; color: #3a3a3c; white-space: nowrap; }
.feat-tr-txt p:not(.feat-tr-h)::before { content: ""; position: absolute; left: 0; top: 0.5em; width: calc(var(--feat-u) * 8); height: calc(var(--feat-u) * 8); border-radius: 2px; background: #3b6cff; }
.feat-tr-txt .feat-tr-h { margin: 0 0 calc(var(--feat-u) * 22); padding: 0; font-size: calc(var(--feat-u) * 44); font-weight: 700; letter-spacing: -0.02em; color: #111; }
.feat-tr-ja { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", var(--font); }
.feat-tr-ja .feat-tr-h { font-weight: 700; letter-spacing: 0; }
.feat-tr-en { opacity: 0; }
.feat-tr-sel { left: calc(var(--feat-u) * 38); top: calc(var(--feat-u) * 54); width: calc(var(--feat-u) * 520); height: calc(var(--feat-u) * 236); transform-origin: 0 0; }
.feat-tr-flash { position: absolute; left: calc(var(--feat-u) * 38); top: calc(var(--feat-u) * 54); width: calc(var(--feat-u) * 520); height: calc(var(--feat-u) * 236); background: #fff; opacity: 0; pointer-events: none; }
.feat-tr-ctrl {position: absolute;left: 0; right: 0; bottom: 0;height: calc(var(--feat-u) * 44);display: flex;align-items: center;gap: calc(var(--feat-u) * 12);padding: 0 calc(var(--feat-u) * 16);color: rgba(255, 255, 255, 0.86);font-size: calc(var(--feat-u) * 11.5);font-variant-numeric: tabular-nums;}
.feat-tr-ctrl svg { width: calc(var(--feat-u) * 16); height: calc(var(--feat-u) * 16); flex: none; }
.feat-tr-bar { position: relative; flex: 1; height: calc(var(--feat-u) * 4); border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.feat-tr-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 41%; border-radius: inherit; background: #fff; }
.feat-tr-bar i::after { content: ""; position: absolute; right: calc(var(--feat-u) * -6); top: 50%; width: calc(var(--feat-u) * 12); height: calc(var(--feat-u) * 12); margin-top: calc(var(--feat-u) * -6); border-radius: 50%; background: #fff; }
.feat-tr-opt { position: absolute; left: calc(var(--feat-u) * 760); top: calc(var(--feat-u) * 262); }
.feat-key-xl {background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));border-color: rgba(255, 255, 255, 0.6);width: calc(var(--feat-u) * 150);height: calc(var(--feat-u) * 150);border-radius: calc(var(--feat-u) * 32);align-content: center;gap: calc(var(--feat-u) * 4);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 calc(var(--feat-u) * -10) calc(var(--feat-u) * 20) rgba(255, 255, 255, 0.12), 0 calc(var(--feat-u) * 10) 0 calc(var(--feat-u) * -2) rgba(40, 20, 70, 0.28), 0 calc(var(--feat-u) * 30) calc(var(--feat-u) * 50) calc(var(--feat-u) * -16) rgba(30, 10, 60, 0.6);}
.feat-key-g { font-size: calc(var(--feat-u) * 58); font-weight: 500; line-height: 1; }
.feat-key-l { font-size: calc(var(--feat-u) * 15); font-weight: 600; letter-spacing: 0.02em; opacity: 0.92; }
.feat-tr-chip { left: calc(var(--feat-u) * 736); top: calc(var(--feat-u) * 440); background: rgba(24, 14, 44, 0.5); border-color: rgba(255, 255, 255, 0.22); }
.feat-tr-toast { top: calc(var(--feat-u) * 26); }
.feat-tr-toast .feat-toast-t span { max-width: calc(var(--feat-u) * 380); }
.feat-stage { display: none; }
.feat-wipe { display: none; }
@media (min-width: 1200px) {.feat-wrap { max-width: calc(1600px + var(--gutter) * 2); }}
.feat-story.is-staged {--feat-wipe-t: 860ms;display: grid;grid-template-columns: clamp(260px, 23vw, 340px) minmax(0, 1fr);column-gap: clamp(32px, 3.4vw, 60px);}
.feat-story.is-staged .feat-steps { gap: 0; padding: 12svh 0 16svh; }
.feat-story.is-staged .feat-step { display: flex; align-items: center; min-height: 52svh; }
.feat-story.is-staged .feat-copy { transform: translate3d(0, 6px, 0); transition: transform 700ms var(--ease-out); }
.feat-story.is-staged .feat-copy :is(.feat-h, .feat-p) { transition: opacity 520ms var(--ease-in-out); }
.feat-story.is-staged .feat-step:not(.is-active):not(:focus-within) .feat-h { opacity: 0.62; }
.feat-story.is-staged .feat-step:not(.is-active):not(:focus-within) .feat-p { opacity: 0.8; }
.feat-story.is-staged .feat-step.is-active .feat-copy,
.feat-story.is-staged .feat-step:focus-within .feat-copy { transform: none; }
.feat-story.is-staged .feat-stage {display: grid;align-content: center;position: sticky;top: 0;height: 100svh;padding: calc(var(--nav-top) + var(--nav-h) + 8px) 0 12px;}
.feat-stage-in { position: relative; width: min(100%, calc((100svh - 190px) * 1.6)); margin-inline: auto; transform-origin: 50% 40%; }
.feat-frame {position: relative;z-index: 1;aspect-ratio: 16 / 10;container-type: size;border-radius: clamp(20px, 2.2vw, 34px);overflow: hidden;background: radial-gradient(110% 85% at 50% 0%, #2a2f48 0%, #15161d 72%);box-shadow: var(--sh-deep), 0 0 0 1px rgba(13, 13, 16, 0.05);isolation: isolate;}
.feat-frame::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); pointer-events: none; }
.feat-frame > .feat-vis { position: absolute; inset: 0; margin: 0; }
.feat-frame .feat-scene { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.feat-frame > .feat-vis {visibility: hidden;clip-path: inset(calc(var(--wt, 40) * 1%) calc(var(--wr, 40) * 1%) calc(var(--wb, 40) * 1%) calc(var(--wl, 40) * 1%));}
.feat-frame > .feat-vis[data-d="far"] { display: none; }
.feat-frame > .feat-vis > .feat-scene { transform: scale(1.07); }
.feat-frame > .feat-vis[data-d="0"] {z-index: 2;visibility: visible;clip-path: inset(0);transition: clip-path var(--feat-wipe-t) var(--ease-in-out), filter 520ms var(--ease-in-out);}
.feat-frame > .feat-vis[data-d="0"] > .feat-scene { transform: none; transition: transform 1300ms var(--ease-out); }
.feat-frame > .feat-vis[data-d="out"] {z-index: 1;visibility: visible;clip-path: none;transform: scale(0.97);filter: brightness(0.46) saturate(0.8);transition: transform 1000ms var(--ease-out), filter 460ms var(--ease-in-out);}
.feat-frame > .feat-vis[data-d="out"] > .feat-scene { transform: none; }
.feat-frame .feat-wipe { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.feat-wipe > b { position: absolute; display: block; box-shadow: 0 0 0 1px rgba(12, 20, 60, 0.3), 0 0 14px 1px rgba(59, 108, 255, 0.55); }
.feat-wipe > b:nth-child(-n+2) { left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, #fff 0 6px, var(--select) 6px 12px); }
.feat-wipe > b:nth-child(n+3) { top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, #fff 0 6px, var(--select) 6px 12px); }
.feat-wipe > b:nth-child(1) { top: 0; transform: translate3d(0, calc(var(--wt, 40) * 1cqh), 0); }
.feat-wipe > b:nth-child(2) { bottom: 0; transform: translate3d(0, calc(var(--wb, 40) * -1cqh), 0); }
.feat-wipe > b:nth-child(3) { left: 0; transform: translate3d(calc(var(--wl, 40) * 1cqw), 0, 0); }
.feat-wipe > b:nth-child(4) { right: 0; transform: translate3d(calc(var(--wr, 40) * -1cqw), 0, 0); }
.feat-vis[data-d="0"] > .feat-wipe { animation: feat-wipe-edges var(--feat-wipe-t) linear both; }
@keyframes feat-wipe-edges { 0%, 48% { opacity: 1; } 82%, 100% { opacity: 0; } }
.feat-vis[data-d="0"] > .feat-wipe > b { transform: none; transition: transform var(--feat-wipe-t) var(--ease-in-out); }
.feat-aura { position: absolute; inset: -16% -10% -6%; z-index: 0; pointer-events: none; }
.feat-aura > span { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-in-out); }
.feat-aura > span.is-active { opacity: 0.62; }
.feat-aura > [data-i="0"] { background: radial-gradient(45% 50% at 28% 42%, #c4bdf0, transparent 72%), radial-gradient(42% 48% at 74% 62%, #f5d2c8, transparent 72%); }
.feat-aura > [data-i="1"] { background: radial-gradient(45% 50% at 30% 45%, #a8b2e6, transparent 72%), radial-gradient(42% 48% at 72% 60%, #d9b48f, transparent 72%); }
.feat-aura > [data-i="2"] { background: radial-gradient(45% 50% at 28% 40%, #7e90da, transparent 72%), radial-gradient(42% 48% at 74% 64%, #c9b7ea, transparent 72%); }
.feat-aura > [data-i="3"] { background: radial-gradient(45% 50% at 30% 38%, #86b6f0, transparent 72%), radial-gradient(42% 48% at 72% 66%, #9fd6ad, transparent 72%); }
.feat-aura > [data-i="4"] { background: radial-gradient(45% 50% at 30% 42%, #b48ae0, transparent 72%), radial-gradient(42% 48% at 72% 62%, #f0a2c0, transparent 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feat-aura > span.is-active { opacity: 0.34; } }
:root[data-theme="dark"] .feat-aura > span.is-active { opacity: 0.34; }
.feat-chapters { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: min(100%, 540px); margin: 14px auto 0; }
.feat-ch {display: grid;gap: 7px;min-height: 44px;padding: 8px 2px 4px;border: 0;border-radius: 8px;background: transparent;color: var(--ink-3);font-size: 0.75rem;font-weight: 600;letter-spacing: 0;text-align: left;cursor: pointer;transition: color var(--t-ui) var(--ease-ui);}
.feat-ch > i { position: relative; display: block; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.feat-ch > i > b { position: absolute; inset: 0; border-radius: inherit; background: var(--select); transform: scaleX(0); transform-origin: 0 50%; }
.feat-ch:hover, .feat-ch[aria-current="step"] { color: var(--ink); }
.feat-ch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-anim .feat-story:not(.is-staged) .feat-scene { transition: opacity 700ms var(--ease-out), transform 1000ms var(--ease-out), filter 900ms var(--ease-out); }
.feat-anim .feat-story:not(.is-staged) .feat-scene:not(.feat-seen) { opacity: 0; transform: scale(0.96); filter: blur(12px); }
.feat-anim .feat-scene:not(.is-on) * { transition-delay: 0s !important; transition-duration: 0s !important; }
.feat-anim .feat-scene.is-on .feat-layer { transition: opacity 320ms var(--ease-ui); }
.feat-anim .feat-scene.is-blink .feat-layer { opacity: 0; }
.feat-anim :is(.feat-hx, .feat-tb-scan, .feat-tb-sheet, .feat-tr-win, .feat-tr-opt) { transition: opacity 520ms var(--ease-out), transform 900ms var(--ease-out); }
.feat-anim :is(.feat-tb-sheet, .feat-tr-opt) { transition-delay: 110ms; }
.feat-anim .feat-step .feat-scene:not(.is-on) .feat-hx { opacity: 0; transform: translate3d(0, -3%, 0) scale(0.97); }
.feat-anim .feat-step .feat-scene:not(.is-on) :is(.feat-tb-scan, .feat-tb-sheet, .feat-tr-win) { opacity: 0; transform: translate3d(0, calc(var(--feat-u) * 26), 0) scale(0.985); }
.feat-anim .feat-scene:not(.is-on) .feat-tr-opt { opacity: 0; transform: scale(0.86); }
.feat-anim .feat-tb-sel { transform: scale(0); transition: transform 760ms var(--ease-out) 330ms; }
.feat-anim .feat-tb-size { opacity: 0; transition: opacity 300ms var(--ease-ui) 760ms; }
.feat-anim .feat-tb-toast, .feat-anim .feat-tr-toast { opacity: 0; transform: translate3d(0, calc(var(--feat-u) * -22), 0) scale(0.92); transition: opacity 320ms var(--ease-ui) 1100ms, transform 640ms var(--ease-spring) 1100ms; }
.feat-anim .feat-tr-toast { transition-delay: 1650ms, 1650ms; }
.feat-anim .feat-tb-c { opacity: 0; transform: translate3d(0, calc(var(--feat-u) * -7), 0); transition: opacity 260ms var(--ease-ui), transform 420ms var(--ease-spring); transition-delay: calc(1800ms + var(--c) * 36ms); }
.feat-anim .feat-tb-range { opacity: 0; transition: opacity 300ms var(--ease-ui) 2600ms; }
.feat-anim .feat-tb-keys { opacity: 0; transform: translate3d(0, calc(var(--feat-u) * 10), 0); transition: opacity 300ms var(--ease-ui) 1300ms, transform 500ms var(--ease-out) 1300ms; }
.feat-anim .feat-scene.is-on .feat-tb-sel { transform: none; }
.feat-anim .feat-scene.is-on :is(.feat-tb-size, .feat-tb-range, .feat-tb-c) { opacity: 1; }
.feat-anim .feat-scene.is-on :is(.feat-tb-toast, .feat-tr-toast, .feat-tb-c, .feat-tb-keys) { opacity: 1; transform: none; }
.feat-anim .feat-scene.is-on .feat-tb-keys .feat-key { animation: feat-press 420ms var(--ease-ui) 1650ms both; }
.feat-anim .feat-scene.is-on .feat-tb-keys .feat-key + .feat-key { animation-delay: 1690ms; }
@keyframes feat-press {0%, 100% { transform: none; }
35%, 70% { transform: translate3d(0, calc(var(--feat-u) * 4), 0) scale(0.96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 calc(var(--feat-u) * 1) 0 calc(var(--feat-u) * -1) rgba(30, 40, 80, 0.2), 0 calc(var(--feat-u) * 6) calc(var(--feat-u) * 12) calc(var(--feat-u) * -6) rgba(20, 30, 70, 0.4); }}
.feat-anim .feat-tr-sel { transform: scale(0); transition: transform 820ms var(--ease-out) 300ms; }
.feat-anim .feat-tr-size { opacity: 0; transition: opacity 300ms var(--ease-ui) 750ms; }
.feat-anim .feat-tr-en { opacity: 0; filter: blur(calc(var(--feat-u) * 6)); transition: opacity 520ms var(--ease-in-out) 1330ms, filter 700ms var(--ease-out) 1330ms; }
.feat-anim .feat-tr-ja { opacity: 1; transition: opacity 360ms var(--ease-in-out) 1250ms, filter 400ms var(--ease-in-out) 1250ms; }
.feat-anim .feat-tr-chip { opacity: 0; transform: translate3d(0, calc(var(--feat-u) * 8), 0); transition: opacity 320ms var(--ease-ui) 1900ms, transform 500ms var(--ease-out) 1900ms; }
.feat-anim .feat-scene.is-on .feat-tr-sel { transform: none; }
.feat-anim .feat-scene.is-on :is(.feat-tr-size, .feat-tr-chip) { opacity: 1; transform: none; }
.feat-anim .feat-scene.is-on .feat-tr-en { opacity: 1; filter: none; }
.feat-anim .feat-scene.is-on .feat-tr-ja { opacity: 0; filter: blur(calc(var(--feat-u) * 5)); }
.feat-anim .feat-scene.is-on .feat-tr-flash { animation: feat-flash 520ms var(--ease-out) 1150ms both; }
.feat-anim .feat-scene.is-on .feat-tr-opt .feat-key { animation: feat-hold 1400ms var(--ease-ui) 420ms both; }
@keyframes feat-flash { 0% { opacity: 0; } 25% { opacity: 0.7; } 100% { opacity: 0; } }
@keyframes feat-hold {0%, 100% { transform: none; }
12%, 80% { transform: translate3d(0, calc(var(--feat-u) * 7), 0) scale(0.97); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 calc(var(--feat-u) * -10) calc(var(--feat-u) * 20) rgba(255, 255, 255, 0.1), 0 calc(var(--feat-u) * 2) 0 calc(var(--feat-u) * -2) rgba(40, 20, 70, 0.24), 0 calc(var(--feat-u) * 12) calc(var(--feat-u) * 24) calc(var(--feat-u) * -12) rgba(30, 10, 60, 0.5); }}
html:not(.js) .feat-tr-ja, .feat:not(.feat-anim) .feat-tr-ja { opacity: 0; }
html:not(.js) .feat-tr-en, .feat:not(.feat-anim) .feat-tr-en { opacity: 1; }
@media (max-width: 960px) {.feat-copy { max-width: 620px; }}
@media (max-width: 760px) {.feat-steps { gap: 30px; }
.feat-kicker { margin-bottom: 10px; }
.feat-p { margin-top: 10px; }
.feat-vis { margin-top: 16px; margin-inline: calc(var(--gutter) * -0.5); }
.feat-scene { border-radius: 22px; }
.feat-sc-hx, .feat-sc-tb, .feat-sc-tr, .feat-sc-fp { aspect-ratio: 1 / 1; --feat-u: 0.16cqw; }
.feat-sc-hx .feat-hx { width: 92cqw; margin-left: -46cqw; top: calc(var(--feat-u) * 30 - 3.2cqw); }
.feat-sc-hx .feat-hx-p { -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 68%); mask-image: linear-gradient(to bottom, #000 60%, transparent 68%); }
.feat-sc-hx .feat-mb-t, .feat-sc-hx .feat-mb-i:last-of-type { display: none; }
.feat-sc-tb .feat-tb-scan { left: calc(var(--feat-u) * 16); top: calc(var(--feat-u) * 78); width: calc(var(--feat-u) * 400); height: calc(var(--feat-u) * 300); }
.feat-sc-tb .feat-tb-paper { inset: calc(var(--feat-u) * 40) calc(var(--feat-u) * 14) calc(var(--feat-u) * -30); padding: calc(var(--feat-u) * 16) calc(var(--feat-u) * 16) 0; }
.feat-sc-tb .feat-tb-foot { display: none; }
.feat-sc-tb .feat-tb-sheet { left: auto; right: calc(var(--feat-u) * 14); top: calc(var(--feat-u) * 330); width: calc(var(--feat-u) * 440); height: calc(var(--feat-u) * 280); }
.feat-sc-tb .feat-tb-grid { grid-template-columns: calc(var(--feat-u) * 26) calc(var(--feat-u) * 84) repeat(3, calc(var(--feat-u) * 76)) 1fr; }
.feat-sc-tb .feat-tb-range { left: calc(var(--feat-u) * 26); width: calc(var(--feat-u) * 312); }
.feat-sc-tb .feat-tb-keys { left: calc(var(--feat-u) * 470); top: calc(var(--feat-u) * 272); }
.feat-sc-tb .feat-tb-toast { top: calc(var(--feat-u) * 14); }
.feat-sc-tr .feat-tr-win { left: calc(var(--feat-u) * 18); top: calc(var(--feat-u) * 80); width: calc(var(--feat-u) * 590); height: calc(var(--feat-u) * 380); }
.feat-sc-tr .feat-tr-txt { left: calc(var(--feat-u) * 34); top: calc(var(--feat-u) * 46); }
.feat-sc-tr .feat-tr-slide::before { left: calc(var(--feat-u) * 34); top: calc(var(--feat-u) * 26); }
.feat-sc-tr .feat-tr-txt p { font-size: calc(var(--feat-u) * 19); margin-top: calc(var(--feat-u) * 8); }
.feat-sc-tr .feat-tr-txt .feat-tr-h { font-size: calc(var(--feat-u) * 34); margin-bottom: calc(var(--feat-u) * 14); }
.feat-sc-tr :is(.feat-tr-sel, .feat-tr-flash) { left: calc(var(--feat-u) * 20); top: calc(var(--feat-u) * 34); width: calc(var(--feat-u) * 440); height: calc(var(--feat-u) * 210); }
.feat-sc-tr .feat-tr-opt { left: calc(var(--feat-u) * 380); top: calc(var(--feat-u) * 470); }
.feat-sc-tr .feat-key-xl { width: calc(var(--feat-u) * 120); height: calc(var(--feat-u) * 120); }
.feat-sc-tr .feat-key-g { font-size: calc(var(--feat-u) * 46); }
.feat-sc-tr .feat-tr-chip { left: calc(var(--feat-u) * 40); top: calc(var(--feat-u) * 520); }
.feat-sc-tr .feat-tr-toast { top: calc(var(--feat-u) * 14); }
.feat-sc-tr .feat-tr-toast .feat-toast-t span { max-width: calc(var(--feat-u) * 420); }
.feat-sc-fp { --fp-cx0: calc(var(--feat-u) * 250); --fp-cy0: calc(var(--feat-u) * 300); --fp-cx1: calc(var(--feat-u) * 536); --fp-cy1: calc(var(--feat-u) * 338); --fp-cx2: calc(var(--feat-u) * 470); --fp-cy2: calc(var(--feat-u) * 520); }
.feat-sc-fp .feat-fp-win { left: calc(var(--feat-u) * 14); top: calc(var(--feat-u) * 44); width: calc(var(--feat-u) * 420); height: calc(var(--feat-u) * 452); }
.feat-sc-fp .feat-fp-body { grid-template-columns: calc(var(--feat-u) * 64) minmax(0, 1fr); }
.feat-sc-fp .feat-fp-thp { width: calc(var(--feat-u) * 36); height: calc(var(--feat-u) * 47); padding: calc(var(--feat-u) * 6) calc(var(--feat-u) * 5); gap: calc(var(--feat-u) * 3); }
.feat-sc-fp .feat-fp-side { gap: calc(var(--feat-u) * 5); padding-top: calc(var(--feat-u) * 10); }
.feat-sc-fp .feat-fp-page { width: calc(var(--feat-u) * 300); height: calc(var(--feat-u) * 400); padding: calc(var(--feat-u) * 22) calc(var(--feat-u) * 24) 0; }
.feat-sc-fp .feat-fp-h { font-size: calc(var(--feat-u) * 22); }
.feat-sc-fp .feat-fp-page p:not(.feat-fp-run):not(.feat-fp-h) { font-size: calc(var(--feat-u) * 12); }
.feat-sc-fp .feat-fp-panel { left: calc(var(--feat-u) * 336); top: calc(var(--feat-u) * 214); width: calc(var(--feat-u) * 276); }
.feat-sc-fp .feat-fp-toast { top: calc(var(--feat-u) * 10); right: 0; }
.feat-sc-fp .feat-fp-toast .feat-toast-t span { max-width: calc(var(--feat-u) * 360); }
.feat-sc-fp .feat-mb-t, .feat-sc-fp .feat-mb-i:last-of-type { display: none; }}
html:not(.js) .feat-loop video { display: none; }
html:not(.js) .feat-loop noscript img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media print {.feat-story.is-staged .feat-copy { opacity: 1 !important; transform: none !important; }
.feat-story.is-staged .feat-stage { position: static; height: auto; padding: 0; }
.feat-chapters, .feat-aura, .feat-wipe { display: none !important; }
.feat-scene, .feat-frame > .feat-vis { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; }}
/* src/styles/sections/04-showcase.css */
.show {--show-ww: min(1220px, 100%);--show-gap: clamp(16px, 2vw, 30px);--show-line: 64;--show-r: 16px;position: relative;isolation: isolate;overflow: clip;padding: clamp(96px, 9vw, 132px) 0 clamp(100px, 8vw, 124px);background:
radial-gradient(56% 34% at 16% 56%, rgba(59, 108, 255, 0.11), transparent 70%),
radial-gradient(46% 30% at 86% 74%, rgba(132, 92, 255, 0.09), transparent 70%),
var(--night);}
.show-sky {position: absolute;left: 0; right: 0; top: 0;height: clamp(900px, 118vh, 1400px);z-index: -1;pointer-events: none;-webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 96%);mask-image: linear-gradient(to bottom, #000 52%, transparent 96%);}
.show-sky picture, .show-sky img { width: 100%; height: 100%; }
.show-sky img { object-fit: cover; object-position: 50% 30%; opacity: 0.92; }
.show-seam-t { --seam: clamp(110px, 11vw, 170px); }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .show-sky img { filter: brightness(0.7) saturate(1.1); }}
:root[data-theme="dark"] .show-sky img { filter: brightness(0.7) saturate(1.1); }
.show-seam-b {--seam: clamp(100px, 10vw, 150px);background: linear-gradient(to top,
var(--paper) 0%,
color-mix(in oklab, var(--paper) 84%, var(--dawn-haze)) 20%,
color-mix(in oklab, color-mix(in oklab, var(--dawn-haze) 55%, var(--night-horizon)) 80%, transparent) 50%,
color-mix(in oklab, var(--night-horizon) 45%, transparent) 76%,
transparent 100%);}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .show-seam-b {background: linear-gradient(to top, var(--paper) 0%, color-mix(in oklab, var(--paper) 70%, var(--night-horizon)) 38%, color-mix(in oklab, var(--night-horizon) 30%, transparent) 72%, transparent 100%);}}
:root[data-theme="dark"] .show-seam-b {background: linear-gradient(to top, var(--paper) 0%, color-mix(in oklab, var(--paper) 70%, var(--night-horizon)) 38%, color-mix(in oklab, var(--night-horizon) 30%, transparent) 72%, transparent 100%);}
.show-head { position: relative; z-index: 2; text-align: center; }
.show-eyebrow { justify-content: center; }
.show-h {max-width: 11.5em;margin: 0 auto;font-size: clamp(2.875rem, 1.25rem + 5.3vw, 6.5rem);line-height: 0.95;letter-spacing: -0.05em;}
.show-hw { display: block; }
.show-w { display: inline-block; }
.show-w-k { position: relative; z-index: 0; }
.show-w-k::before {content: "";position: absolute;z-index: -1;inset: 0.04em -0.1em -0.02em;border-radius: 0.1em;background: rgba(59, 108, 255, 0.22);box-shadow: inset 0 0 0 0.03em #5a84ff;transform-origin: 0 50%;transform: scaleX(var(--k, 1));opacity: var(--k, 1);}
.motion-full .show-live .show-w {opacity: calc(0.14 + 0.86 * var(--w, 1));filter: blur(calc((1 - var(--w, 1)) * 10px));transform: translate3d(0, calc((1 - var(--w, 1)) * 0.24em), 0);}
.show-lede { max-width: 640px; margin: var(--s3) auto 0; text-wrap: balance; }
.show-wall {position: relative;z-index: 1;margin-top: clamp(32px, 3.4vw, 48px);--show-fy: linear-gradient(to bottom, transparent, #000 70px, #000 calc(100% - var(--show-fade-b, 140px)), transparent);-webkit-mask-image: var(--show-fy);mask-image: var(--show-fy);}
.show-live .show-wall { -webkit-mask-image: none; mask-image: none; }
.show-live .show-cols { -webkit-mask-image: var(--show-fy); mask-image: var(--show-fy); }
.show-cols {position: relative;display: flex;align-items: flex-start;gap: var(--show-gap);width: var(--show-ww);margin-left: calc((100% - var(--show-ww)) / 2);padding: 30px var(--gutter) 0;box-sizing: border-box;}
.show-col {flex: 1 1 0;min-width: 0;display: flex;flex-direction: column;gap: calc(var(--show-gap) + 14px);padding-top: var(--off, 0px);}
.show-wall[data-active] .show-col { will-change: transform; }
.show-tile { position: relative; margin: 0; }
.show-shot {position: relative;aspect-ratio: var(--ar, 4 / 5);border-radius: var(--show-r);overflow: hidden;background: var(--night-3);box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 34px 60px -30px rgba(0, 0, 0, 0.95);}
.show-px, .show-pxi { position: absolute; inset: 0; }
.show-px { z-index: 3; overflow: hidden; }
.show-pxi picture { display: block; width: 100%; height: 100%; }
.show-pxi img { display: block; width: 100%; height: 100%; object-fit: cover; }
.show-sel { left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); z-index: 4; }
.show-sel.is-done { background: rgba(59, 108, 255, 0.2); box-shadow: inset 0 0 0 1.5px #4a78ff, 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 24px rgba(59, 108, 255, 0.35); }
.show-cap { display: block; }
.show-toast {position: absolute;z-index: 4;left: 50%;top: -15px;width: max-content;max-width: calc(100% - 18px);display: flex;align-items: center;gap: 8px;padding: 6px 14px 6px 6px;border-radius: var(--r-pill);background: rgba(22, 22, 25, 0.95);color: #fff;text-align: left;transform: translateX(-50%);box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.7), 0 16px 32px -10px rgba(0, 0, 0, 0.85);}
.show-ti {flex: none;display: grid;place-items: center;width: 26px;height: 26px;border-radius: 50%;color: #fff;background: linear-gradient(180deg, #62e18c, #2ebd5a);box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.45);}
.show-ti svg { width: 14px; height: 14px; }
.show-ti[data-k="link"] { background: linear-gradient(180deg, #4ea6ff, #0a7cff); }
.show-ti[data-k="qr"] { background: linear-gradient(180deg, #8e8bff, #5e5ce6); }
.show-ti[data-k="table"] { background: linear-gradient(180deg, #4dd6c6, #17a394); }
.show-ti[data-k="translate"] { background: linear-gradient(180deg, #ffb547, #ff8a00); }
.show-tt { min-width: 0; display: grid; gap: 1px; line-height: 1.2; }
.show-tt b { font-size: 12.5px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.show-td { font-size: 11.5px; color: rgba(235, 235, 245, 0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-src {display: flex;align-items: center;gap: 8px;margin-top: 13px;font-size: 0.8125rem;font-weight: 550;color: var(--ink-3);letter-spacing: -0.005em;}
.show-src > svg { width: 15px; height: 15px; flex: none; }
.show-src > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-src .chip-new { flex: none; height: 18px; padding: 0 6px; font-size: 0.625rem; }
.show-opt {position: absolute;z-index: 5;left: calc(var(--sx) + var(--sw) - 22px);top: calc(var(--sy) + var(--sh) - 16px);display: grid;place-items: center;width: 36px;height: 34px;border-radius: 9px;font: 600 17px/1 var(--font);color: #fff;background: linear-gradient(180deg, rgba(70, 72, 82, 0.96), rgba(36, 37, 44, 0.96));box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35), 0 3px 0 -0.5px rgba(0, 0, 0, 0.6), 0 10px 20px -6px rgba(0, 0, 0, 0.8);}
.show-px::after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 1px;pointer-events: none;background: linear-gradient(90deg, transparent, rgba(186, 204, 255, 0.85) 18%, rgba(186, 204, 255, 0.85) 82%, transparent);box-shadow: 0 0 6px rgba(74, 120, 255, 0.45);opacity: 0;transition: opacity 0.2s linear;}
.show-live .show-tile.is-scan .show-px::after { opacity: 0.7; }
.show-live .show-tile.is-scan .show-px,
.show-live .show-tile.is-scan .show-pxi,
.show-live .show-tile.is-scan .show-mf,
.show-live .show-tile.is-scan .show-mfi { will-change: transform; }
.show-mc, .show-mf, .show-mfi { position: absolute; inset: 0; }
.show-mc { z-index: 1; }
.show-mf { z-index: 2; overflow: hidden; }
.show-mc canvas, .show-mfi canvas {display: block;width: 100%;height: 100%;image-rendering: pixelated;image-rendering: crisp-edges;}
.show-live .show-sel { transform-origin: 0 0; transition: transform 0.42s var(--ease-out), opacity 0.12s linear; }
.show-live .show-toast { transition: opacity 0.3s var(--ease-ui) 0.26s, transform 0.62s var(--ease-spring) 0.26s; }
.show-live .show-opt { transition: transform 0.16s var(--ease-ui) 0.2s, box-shadow 0.16s var(--ease-ui) 0.2s, opacity 0.25s var(--ease-ui); }
.show-live .show-tile:not(.is-cap) .show-sel { transform: scale(0.04); opacity: 0; transition-duration: 0.18s; }
.show-live .show-tile:not(.is-cap) .show-toast { opacity: 0; transform: translate(-50%, 12px) scale(0.9); transition-delay: 0s; transition-duration: 0.2s; }
.show-live .show-tile:not(.is-cap) .show-opt { opacity: 0; transform: translateY(6px); transition-delay: 0s; }
.show-live .show-tile.is-cap .show-opt { transform: translateY(2px); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.3), 0 1px 0 -0.5px rgba(0, 0, 0, 0.6), 0 6px 12px -6px rgba(0, 0, 0, 0.8); }
.show-uses { position: relative; z-index: 2; margin-top: clamp(16px, 2vw, 32px); }
.show-live { --show-fade-b: 300px; }
.show-live .show-uses { margin-top: calc(-1 * clamp(0px, 5vw, 72px)); }
.show-live .show-uses::before {content: "";position: absolute;z-index: -1;left: calc(50% - 50vw); right: calc(50% - 50vw); top: -90px; bottom: -20px;background: linear-gradient(to bottom, transparent, var(--night) 90px);pointer-events: none;}
.show-uses-list {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: clamp(20px, 3vw, 44px);padding-top: clamp(24px, 3vw, 36px);border-top: 1px solid var(--line);}
.show-uses-list svg { display: block; width: 24px; height: 24px; margin-bottom: 14px; color: #8aa6ff; }
.show-uses-list .h4 { font-size: 1.25rem; letter-spacing: -0.02em; }
.show-uses-list p { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.show-langs { position: relative; z-index: 2; margin-top: clamp(52px, 6vw, 84px); }
.show-langs-cap { text-align: center; margin-bottom: clamp(18px, 2.4vw, 32px); font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -0.014em; color: var(--ink-2); text-wrap: balance; }
.show-mq { --marquee-gap: clamp(26px, 3.2vw, 52px); --fade: 12vw; }
.show-mq-2 { margin-top: clamp(4px, 0.8vw, 12px); }
.show-mq-track li {display: flex;align-items: center;gap: var(--marquee-gap);font-family: var(--font-display);font-size: clamp(2.125rem, 1.1rem + 3.9vw, 4.5rem);font-weight: 650;line-height: 1.18;letter-spacing: -0.035em;white-space: nowrap;color: var(--ink);}
.show-mq-track li::after {content: "";flex: none;width: 0.13em;height: 0.13em;border-radius: 0.02em;background: #4a78ff;opacity: 0.85;}
.show-mq-2 .show-mq-track li { color: var(--ink-3); }
.show-mq-track li[dir="rtl"] { flex-direction: row-reverse; }
@media (max-width: 960px) {.show-uses-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 760px) {.show { --show-line: 70; --show-r: 12px; padding-top: 120px; padding-bottom: 136px; }
.show-sky { height: clamp(760px, 110svh, 1000px); }
.show-h { font-size: clamp(2.5rem, 1.35rem + 5.6vw, 3.25rem); }
.show-wall { --show-fy: linear-gradient(to bottom, transparent, #000 60px, #000 calc(100% - var(--show-fade-b, 110px)), transparent); }
.show-wall, .show-live .show-cols { -webkit-mask-image: var(--show-fy); mask-image: var(--show-fy); }
.show-live .show-wall { -webkit-mask-image: none; mask-image: none; }
.show-cols {display: block;width: auto;margin: 0;padding: 16px var(--gutter) 90px;columns: 2;column-gap: 12px;}
.show-col { display: contents; }
.show-tile { break-inside: avoid; margin-bottom: 18px; padding-top: 12px; }
.show-tile:not([data-m]) { display: none; }
.show-toast { top: 0; gap: 6px; padding: 4px 10px 4px 4px; max-width: calc(100% - 10px); }
.show-ti { width: 20px; height: 20px; }
.show-ti svg { width: 11px; height: 11px; }
.show-tt b { font-size: 11px; }
.show-td { font-size: 10px; }
.show-src { margin-top: 10px; gap: 6px; font-size: 0.75rem; }
.show-src > svg { width: 13px; height: 13px; }
.show-src .chip-new { display: none; }
.show-opt { width: 28px; height: 27px; font-size: 13px; border-radius: 7px; left: calc(var(--sx) + var(--sw) - 18px); }
.show-live { --show-fade-b: 150px; }
.show-live .show-uses { margin-top: -40px; }
.show-uses-list { gap: 22px 16px; }
.show-uses-list svg { width: 20px; height: 20px; margin-bottom: 10px; }
.show-uses-list .h4 { font-size: 1rem; }
.show-uses-list p { margin-top: 4px; font-size: 0.875rem; line-height: 1.45; }
.show-langs { margin-top: 44px; }}
@media print {.show-live .show-sel, .show-live .show-opt, .show-px, .show-pxi { opacity: 1 !important; transform: none !important; }
.show-live .show-toast { opacity: 1 !important; transform: translateX(-50%) !important; }
.show-mc, .show-mf { display: none !important; }}
/* src/styles/sections/05-trust.css */
.trust {position: relative;isolation: isolate;overflow-x: clip;padding-block: var(--sec-y) var(--sec-y-sm);--trust-r: 26px;--trust-gap: 20px;}
.trust-ambient {position: absolute;inset: 0 0 auto;height: 1400px;z-index: -1;pointer-events: none;background:
radial-gradient(42% 36% at 88% 12%, color-mix(in srgb, var(--dawn-haze) 42%, transparent), transparent 72%),
radial-gradient(40% 30% at 6% 58%, color-mix(in srgb, var(--morning-haze) 30%, transparent), transparent 70%),
radial-gradient(38% 30% at 70% 88%, color-mix(in srgb, var(--dawn-glow) 50%, transparent), transparent 70%);-webkit-mask-image: linear-gradient(to bottom, transparent, #000 260px);mask-image: linear-gradient(to bottom, transparent, #000 260px);}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .trust-ambient { opacity: 0.22; }}
.trust-head {position: relative;margin-bottom: clamp(32px, 4vw, 48px);}
.trust-head-copy { position: relative; z-index: 2; max-width: 760px; }
.trust-title-2 { display: block; color: var(--ink-3); }
.trust-lede { margin-top: var(--s2); max-width: 600px; }
.trust-bento {display: grid;grid-template-columns: repeat(12, minmax(0, 1fr));gap: var(--trust-gap);perspective: 1800px;perspective-origin: 50% 0%;}
.trust-row { display: contents; }
.trust-cell { position: relative; z-index: 1; min-width: 0; }
.trust-cell-private { grid-column: span 7; }
.trust-cell-native { grid-column: span 5; }
.trust-cell-keys { grid-column: span 4; }
.trust-cell-auto { grid-column: span 5; }
.trust-cell-quiet { grid-column: span 3; }
.trust-cell-private, .trust-cell-native { min-height: 444px; }
.trust-cell-keys, .trust-cell-auto, .trust-cell-quiet { min-height: 384px; }
[data-trust-cell].is-scrubbing { will-change: transform, opacity; }
.trust-card {position: relative;display: flex;flex-direction: column;height: 100%;padding: clamp(22px, 2.3vw, 30px);border-radius: var(--trust-r);background: var(--card);border: 1px solid var(--line);box-shadow: var(--sh-1);overflow: hidden;isolation: isolate;transform: perspective(1200px) rotateX(var(--trust-rx, 0deg)) rotateY(var(--trust-ry, 0deg));transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);}
.trust-card.is-tilting { transition: transform 0.12s linear, box-shadow 0.6s var(--ease-out); box-shadow: var(--sh-2); }
.trust-glare {position: absolute;left: 0; top: 0;z-index: 6;width: 520px; height: 520px;margin: -260px 0 0 -260px;border-radius: 50%;pointer-events: none;background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));opacity: 0;transform: translate3d(var(--trust-gx, 50%), var(--trust-gy, 50%), 0);transition: opacity 0.4s var(--ease-ui);mix-blend-mode: soft-light;}
.trust-card.is-tilting .trust-glare { opacity: 1; }
.trust-card-copy { position: relative; z-index: 2; }
.trust-label {display: inline-flex;align-items: center;gap: 7px;margin: 0 0 12px;font-size: var(--fs-eyebrow);font-weight: 650;letter-spacing: 0.07em;text-transform: uppercase;color: var(--ink-3);}
.trust-label svg { width: 15px; height: 15px; color: var(--select-ink); }
.trust-h3 {font-size: clamp(1.3125rem, 1.1rem + 0.62vw, 1.625rem);font-weight: 680;line-height: 1.12;letter-spacing: -0.026em;text-wrap: balance;}
.trust-h3-lg { font-size: clamp(1.625rem, 1.2rem + 1.25vw, 2.375rem); line-height: 1.04; letter-spacing: -0.035em; }
.trust-p { margin-top: 10px; color: var(--ink-2); font-size: 0.96875rem; line-height: 1.5; text-wrap: pretty; }
.trust-p .keys kbd { font-size: 0.8em; }
.trust-link { color: var(--select-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); white-space: nowrap; }
.trust-link:hover { text-decoration-color: currentColor; }
.trust-private {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 290px);gap: clamp(20px, 2.6vw, 36px);padding: clamp(24px, 2.8vw, 36px);background: var(--night);border-color: rgba(255, 255, 255, 0.07);box-shadow: var(--sh-2);}
.trust-private-sky { position: absolute; inset: -5% 0; z-index: 0; }
.trust-private-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.trust-private::before {content: "";position: absolute;inset: 0;z-index: 1;background:
linear-gradient(100deg, rgba(6, 8, 18, 0.88) 0%, rgba(6, 8, 18, 0.62) 42%, rgba(6, 8, 18, 0.12) 78%),
linear-gradient(to top, rgba(4, 6, 14, 0.78), rgba(4, 6, 14, 0) 46%);}
.trust-private-copy { position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0; }
.trust-private .trust-label svg { color: var(--ok-bright); }
.trust-private .trust-p { max-width: 380px; }
.trust-private-foot { margin-top: auto; padding-top: var(--s3); max-width: 360px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.trust-private .trust-link { color: #a9bcff; }
.trust-readout {position: relative;z-index: 2;align-self: center;padding: 16px 18px 12px;border-radius: 20px;--glass-bg: rgba(12, 14, 28, 0.42);--glass-line: rgba(255, 255, 255, 0.14);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 60px -30px rgba(0, 0, 0, 0.8);}
.trust-readout-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.78125rem; font-weight: 600; color: var(--ink-2); }
.trust-live {display: inline-flex;align-items: center;gap: 6px;height: 22px;padding: 0 9px;border-radius: var(--r-pill);background: rgba(48, 196, 106, 0.14);color: #7ee2a6;font-size: 0.71875rem;letter-spacing: 0.01em;}
.trust-live-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--ok-bright); }
.trust-live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--ok-bright); opacity: 0; }
.trust-zero {position: relative;display: flex;align-items: baseline;gap: 10px;margin: 10px 0 2px;font-family: var(--font-display);color: var(--ink);line-height: 0.92;}
.trust-zero-num { font-size: clamp(5rem, 3.4rem + 4vw, 7.25rem); font-weight: 700; letter-spacing: -0.05em; }
.trust-zero-unit { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink-2); }
.trust-zero canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.trust-zero.is-mosaic > span { opacity: 0; }
.trust-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.trust-scope { position: relative; height: 30px; margin: 6px 0 8px; overflow: hidden; border-radius: 6px;background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 22px); }
.trust-scope-line { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px;background: linear-gradient(90deg, rgba(48, 196, 106, 0), rgba(48, 196, 106, 0.75) 18%, rgba(48, 196, 106, 0.75) 82%, rgba(48, 196, 106, 0)); }
.trust-scope-scan { position: absolute; inset: 0; transform: translate3d(-4%, 0, 0); }
.trust-scope-dot { position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #9af0bd; box-shadow: 0 0 10px 3px rgba(48, 196, 106, 0.55); }
.trust-facts { margin: 0; font-size: 0.8125rem; }
.trust-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.trust-facts dt { color: var(--ink-3); }
.trust-facts dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.trust-facts .trust-ok { color: #7ee2a6; }
@media (prefers-reduced-motion: no-preference) {.trust-readout.is-live .trust-scope-scan { animation: trust-scan 2.4s cubic-bezier(.45, 0, .55, 1) 2 forwards; }
.trust-readout.is-live .trust-live-dot::after { animation: trust-ping 1.6s var(--ease-out) 3; }}
@keyframes trust-scan { from { transform: translate3d(-4%, 0, 0); } to { transform: translate3d(104%, 0, 0); } }
@keyframes trust-ping { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.1); } }
.trust-native { padding-bottom: 0; }
.trust-screen {position: relative;flex: 1 1 auto;min-height: 250px;margin-top: 22px;border-radius: 16px 16px 0 0;overflow: hidden;background: var(--morning-sky);box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);isolation: isolate;}
.trust-screen-wallpic { position: absolute; inset: -9% 0; }
.trust-screen-wall { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.trust-menubar {position: absolute;left: 0; right: 0; top: 0;z-index: 2;display: flex;align-items: center;gap: 14px;height: 24px;padding: 0 12px;font-size: 0.71875rem;font-weight: 500;color: #0f1424;background: rgba(255, 255, 255, 0.34);-webkit-backdrop-filter: blur(14px) saturate(160%);backdrop-filter: blur(14px) saturate(160%);white-space: nowrap;}
.trust-mb-app { font-weight: 700; }
.trust-mb-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.trust-mb-icon { display: inline-grid; place-items: center; width: 22px; height: 18px; border-radius: 5px; }
.trust-mb-icon svg { width: 13px; height: 13px; }
.trust-mb-icon.is-on { background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
.trust-mb-time { font-variant-numeric: tabular-nums; }
.trust-screen-win {position: absolute;z-index: 1;left: 50%;top: 34px;width: min(92%, 410px);max-width: none;margin-left: calc(min(92%, 410px) / -2);}
.trust-keyrow { display: flex; gap: 2px; margin: -6px 0 14px -8px; }
.trust-key { width: clamp(64px, 5.8vw, 84px); flex: none; }
.trust-key img { width: 100%; transform-origin: 50% 70%; }
.trust-key:nth-child(1) img { transform: rotate(-5deg); }
.trust-key:nth-child(2) img { transform: translateY(-5px) rotate(2deg); }
.trust-key:nth-child(3) img { transform: rotate(6deg); }
@media (prefers-reduced-motion: no-preference) {.trust-key img { transition: transform 0.55s var(--ease-spring); }
.trust-keys.is-pressed .trust-key img { transition: transform 0.12s var(--ease-ui); }
.trust-keys.is-pressed .trust-key:nth-child(1) img { transform: translateY(7px) scale(0.94) rotate(-5deg); }
.trust-keys.is-pressed .trust-key:nth-child(2) img { transform: translateY(3px) scale(0.94) rotate(2deg); transition-delay: 0.09s; }
.trust-keys.is-pressed .trust-key:nth-child(3) img { transform: translateY(7px) scale(0.94) rotate(6deg); transition-delay: 0.18s; }}
.trust .trust-shortcuts { margin-top: auto; padding-top: 16px; font-size: 0.875rem; }
.trust-shortcuts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.trust-shortcuts kbd { font-size: 0.78rem; }
.trust-term {position: relative;z-index: 2;flex: 1 1 auto;display: flex;flex-direction: column;margin-top: 18px;padding: 6px;border-radius: 16px;background: #0f1117;color: #ecebe7;border: 1px solid rgba(255, 255, 255, 0.06);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -24px rgba(10, 12, 30, 0.6);--focus: #8aa6ff;}
.trust-term-prompt { display: flex; align-items: center; min-height: 32px; padding: 4px 12px 6px; font: 500 0.78125rem/1.3 var(--mono); color: rgba(236, 235, 231, 0.84); border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 4px; }
.trust-term-ps { color: #7ee2a6; margin-right: 6px; }
.trust-term-caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; background: #8aa6ff; border-radius: 1px; }
@media (prefers-reduced-motion: no-preference) {.trust-term.is-typed .trust-term-caret { animation: trust-blink 1.05s steps(1) 4 forwards; }}
@keyframes trust-blink { 50% { opacity: 0; } }
.trust-urls { display: grid; gap: 2px; }
.trust-urls li {display: grid;grid-template-columns: auto minmax(0, 1fr) auto;align-items: center;gap: 4px 12px;min-height: 35px;padding: 1px 4px 1px 10px;border-radius: 10px;transition: background-color 0.25s var(--ease-ui);}
.trust-urls li:hover { background: rgba(255, 255, 255, 0.05); }
.trust-urls li:has(.trust-copy.done) { background: rgba(59, 108, 255, 0.2); }
.trust-urls code { font-size: 0.8125rem; font-weight: 500; color: #f2f1ee; white-space: nowrap; }
.trust-urls li > span { font-size: 0.75rem; color: rgba(236, 235, 231, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trust-copy {position: relative;display: grid;place-items: center;width: 34px; height: 34px;padding: 0;border: 0;border-radius: 9px;background: transparent;color: rgba(236, 235, 231, 0.62);cursor: pointer;transition: background-color 0.2s var(--ease-ui), color 0.2s var(--ease-ui);}
.trust-copy:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.trust-copy svg { grid-area: 1 / 1; width: 15px; height: 15px; transition: opacity 0.2s, transform 0.3s var(--ease-spring); }
.trust-copy .trust-copy-ok { opacity: 0; transform: scale(0.5); color: #7ee2a6; }
.trust-copy.done svg:first-child { opacity: 0; transform: scale(0.5); }
.trust-copy.done .trust-copy-ok { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {.js .trust-term[data-armed] .trust-urls li { opacity: 0; transform: translate3d(14px, 0, 0); }
.js .trust-term.is-typing .trust-urls li { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), background-color 0.25s var(--ease-ui); }
.js .trust-term.is-typing .trust-urls li:nth-child(1) { transition-delay: 0.12s, 0.12s, 0s; }
.js .trust-term.is-typing .trust-urls li:nth-child(2) { transition-delay: 0.2s, 0.2s, 0s; }
.js .trust-term.is-typing .trust-urls li:nth-child(3) { transition-delay: 0.28s, 0.28s, 0s; }
.js .trust-term.is-typing .trust-urls li:nth-child(4) { transition-delay: 0.36s, 0.36s, 0s; }
.js .trust-term.is-typing .trust-urls li:nth-child(5) { transition-delay: 0.44s, 0.44s, 0s; }}
.trust .trust-prefs {margin-top: 20px;padding: 2px 14px;border-radius: 14px;background: color-mix(in srgb, var(--ink) 4%, transparent);border: 1px solid var(--line);}
.trust-prefs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; }
.trust-prefs li + li { border-top: 1px solid var(--line); }
.trust-pref-text b { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.trust-pref-text span { display: block; margin-top: 3px; font-size: 0.75rem; line-height: 1.4; color: var(--ink-3); }
.trust-switch {position: relative;width: 38px; height: 22px;margin-top: 1px;border-radius: 11px;background: color-mix(in srgb, var(--ink) 16%, transparent);overflow: hidden;}
.trust-switch-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--select); }
.trust-switch-knob {position: absolute;left: 2px; top: 2px;width: 18px; height: 18px;border-radius: 50%;background: #fff;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.12);transform: translate3d(16px, 0, 0);}
@media (prefers-reduced-motion: no-preference) {.js .trust-quiet[data-armed] .trust-switch-fill { opacity: 0; }
.js .trust-quiet[data-armed] .trust-switch-knob { transform: none; }
.js .trust-quiet[data-armed].is-on .trust-switch-fill { opacity: 1; transition: opacity 0.3s var(--ease-ui) 0.45s; }
.js .trust-quiet[data-armed].is-on .trust-switch-knob { transform: translate3d(16px, 0, 0); transition: transform 0.5s var(--ease-spring) 0.45s; }
.js .trust-quiet[data-armed].is-on li + li .trust-switch-fill { transition-delay: 0.75s; }
.js .trust-quiet[data-armed].is-on li + li .trust-switch-knob { transition-delay: 0.75s; }
.js .trust-quiet[data-armed].is-on li + li + li .trust-switch-fill { transition-delay: 1.1s; }
.js .trust-quiet[data-armed].is-on li + li + li .trust-switch-knob { transition-delay: 1.1s; }}
.trust-pref-mode { grid-template-columns: minmax(0, 1fr) !important; }
.trust-seg {position: relative;display: grid;grid-template-columns: 1fr 1fr;width: 100%;max-width: 230px;margin-top: 8px;padding: 2px;border-radius: 9px;background: color-mix(in srgb, var(--ink) 9%, transparent);font-size: 0.78125rem;font-weight: 600;letter-spacing: -0.01em;isolation: isolate;}
.trust-seg > span:not(.trust-seg-thumb) { position: relative; z-index: 1; display: grid; place-items: center; height: 26px; color: var(--ink-2); }
.trust-seg-a { color: #fff !important; }
.trust-seg-thumb { position: absolute; z-index: 0; left: 2px; top: 2px; bottom: 2px; width: calc(50% - 2px); border-radius: 7px; background: var(--select); box-shadow: 0 1px 2px rgba(20, 40, 120, 0.3); }
@media (prefers-reduced-motion: no-preference) {.js .trust-quiet[data-armed] .trust-seg-thumb { transform: translate3d(100%, 0, 0); }
.js .trust-quiet[data-armed] .trust-seg-a { color: var(--ink-2) !important; }
.js .trust-quiet[data-armed].is-on .trust-seg-thumb { transform: none; transition: transform 0.55s var(--ease-spring) 0.2s; }
.js .trust-quiet[data-armed].is-on .trust-seg-a { color: #fff !important; transition: color 0.3s var(--ease-ui) 0.35s; }}
.trust-quiet-foot { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); }
.trust-quiet-foot svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--select-ink); }
.trust-strip { position: relative; margin-top: clamp(48px, 5.4vw, 76px); --trust-h: 312px; }
@media (min-width: 1200px) { .trust-strip { --trust-h: clamp(336px, 24vw, 420px); } }
.trust-strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: 4px; }
.trust-strip-copy { display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 64px); }
.trust-strip-copy .trust-strip-lede { margin: 0 0 4px; max-width: 420px; }
.trust-strip-title { flex: none; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.04; }
.trust-strip-lede { max-width: 520px; }
.trust-strip-nav { display: none; gap: 8px; flex: none; }
.trust-strip.is-swipe .trust-strip-nav { display: flex; }
@media (hover: none), (pointer: coarse) { .trust-strip.is-swipe .trust-strip-nav { display: none; } }
.trust-strip-btn {display: grid;place-items: center;width: 44px; height: 44px;padding: 0;border-radius: 50%;border: 1px solid var(--line-2);background: var(--card);color: var(--ink);cursor: pointer;box-shadow: var(--sh-1);transition: transform var(--t-ui) var(--ease-ui), opacity var(--t-ui);}
.trust-strip-btn:hover { transform: translateY(-1px); }
.trust-strip-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.trust-strip-btn svg { width: 16px; height: 16px; }
.trust-strip-btn[data-trust-prev] svg { transform: scaleX(-1); }
.trust-strip-glow { position: absolute; left: 0; right: 0; top: 18%; bottom: -14%; z-index: -1; pointer-events: none;background: linear-gradient(90deg, color-mix(in srgb, var(--dawn-haze) 34%, transparent), color-mix(in srgb, var(--morning-haze) 30%, transparent) 35%, color-mix(in srgb, var(--dusk-rose) 22%, transparent) 68%, color-mix(in srgb, var(--night-horizon) 18%, transparent));-webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 75%);mask-image: radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 75%); }
.trust-strip-glow i { position: absolute; inset: 0; opacity: 0; }
.trust-glow-dawn { background: radial-gradient(60% 70% at 50% 55%, color-mix(in srgb, var(--dawn-haze) 70%, transparent), transparent 72%); }
.trust-glow-morning { background: radial-gradient(60% 70% at 50% 55%, color-mix(in srgb, var(--morning-haze) 66%, transparent), transparent 72%); }
.trust-glow-dusk { background: radial-gradient(60% 70% at 50% 55%, color-mix(in srgb, var(--dusk-rose) 42%, transparent), transparent 72%); }
.trust-glow-night { background: radial-gradient(60% 70% at 50% 55%, color-mix(in srgb, var(--night-horizon) 44%, transparent), transparent 72%); }
.trust-strip-glow.is-live { background: none; }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .trust-strip-glow { opacity: 0.45; }}
.trust-reel {position: relative;overflow-x: auto;overflow-y: hidden;overscroll-behavior-x: contain;scroll-snap-type: x mandatory;scrollbar-width: none;padding: 28px 0 64px;margin-bottom: -54px;-webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);--trust-pad: max(var(--gutter), calc((100% - var(--shell)) / 2));scroll-padding-inline: var(--trust-pad);}
.trust-reel::-webkit-scrollbar { display: none; }
.trust-reel:focus-visible { outline-offset: -4px; border-radius: 12px; }
.trust .trust-track { display: flex; gap: 22px; width: max-content; padding-inline: var(--trust-pad); }
.trust-shot { flex: none; scroll-snap-align: start; }
.trust-shot figure { margin: 0; }
.trust-shot-wide { width: calc(var(--trust-h) * 1.6); }
.trust-shot-tall { width: calc(var(--trust-h) * 0.72); }
.trust-shot-frame {position: relative;height: var(--trust-h);border-radius: 20px;overflow: hidden;background: var(--paper-3);box-shadow: 0 1px 2px rgba(20, 22, 40, 0.06), 0 30px 60px -30px rgba(20, 22, 40, 0.45);isolation: isolate;}
.trust-shot-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); pointer-events: none; z-index: 3; }
.trust-shot-img { position: absolute; top: 0; left: -5%; width: 110%; max-width: none; height: 100%; object-fit: cover; }
.trust-shot-wide .trust-shot-img { object-position: 50% 0; }
.trust-shot-ui { position: absolute; z-index: 2; left: 50%; max-width: none; }
.trust-shot-mb {position: absolute;left: 0; right: 0; top: 0;z-index: 2;display: flex;justify-content: space-between;height: 18px;padding: 0 10px;font-size: 0.59375rem;line-height: 18px;font-weight: 600;color: #0f1424;background: rgba(255, 255, 255, 0.3);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}
.trust-shot:nth-child(n+4) .trust-shot-mb { color: #f2f1ee; background: rgba(20, 16, 40, 0.28); }
.trust-shot-mb span { font-weight: 500; font-variant-numeric: tabular-nums; }
.trust-shot-toast { top: 7.5%; width: 96%; margin-left: -48%; }
.trust-shot-panel { top: 9%; width: 80%; margin-left: -40%; }
.trust-shot-about { top: 9%; width: 72%; margin-left: -36%; }
.trust-shot figcaption { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-left: 2px; font-size: 0.84375rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.trust-shot-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trust-shot-time { flex: none; font-weight: 650; color: var(--ink); }
.trust-shot-time::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--trust-dot, var(--select)); vertical-align: 1px; }
.trust-shot:nth-child(1) { --trust-dot: #b9a7e8; }
.trust-shot:nth-child(2) { --trust-dot: #8fb7f0; }
.trust-shot:nth-child(3) { --trust-dot: #5f97e6; }
.trust-shot:nth-child(4) { --trust-dot: #e08bb0; }
.trust-shot:nth-child(5) { --trust-dot: #8a62b8; }
.trust-shot:nth-child(6) { --trust-dot: #3f5596; }
.trust-shot:nth-child(7) { --trust-dot: #1f2a52; }
.trust-reel.is-scrub { overflow: visible; scroll-snap-type: none; padding-top: 30px; }
.trust-reel.is-scrub .trust-track { will-change: transform; }
.trust-reel.is-scrub .trust-shot { transform-origin: 50% 46%; }
@media (max-width: 1199px) {.trust-cell-private { grid-column: span 12; min-height: 420px; }
.trust-cell-native { grid-column: span 6; }
.trust-cell-keys { grid-column: span 6; }
.trust-cell-auto { grid-column: span 7; }
.trust-cell-quiet { grid-column: span 5; }
.trust-private { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }}
@media (max-width: 960px) {.trust-strip-copy { display: block; }
.trust-strip-copy .trust-strip-lede { margin-top: 8px; }
.trust-cell-auto { grid-column: span 12; min-height: 0; }
.trust-cell-quiet { grid-column: span 12; min-height: 0; }
.trust-quiet { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--s4); align-items: start; }
.trust-quiet .trust-prefs { grid-row: span 2; margin-top: 0; }
.trust-quiet .trust-quiet-foot { margin-top: 12px; }}
@media (max-width: 760px) {.trust { --trust-gap: 14px; --trust-r: 22px; }
.trust-cell-private, .trust-cell-native, .trust-cell-keys, .trust-cell-auto, .trust-cell-quiet { grid-column: span 12; min-height: 0; }
.trust-row-small {grid-column: 1 / -1;display: flex;gap: 12px;margin-inline: calc(var(--gutter) * -1);padding: 2px var(--gutter) 16px;overflow-x: auto;overscroll-behavior-x: contain;scroll-snap-type: x mandatory;scroll-padding-inline: var(--gutter);scrollbar-width: none;}
.trust-row-small::-webkit-scrollbar { display: none; }
.trust-row-small:focus-visible { outline-offset: -2px; border-radius: 16px; }
.trust-row-small > .trust-cell { flex: 0 0 min(84vw, 340px); scroll-snap-align: start; }
.trust-row-small .trust-card { padding: 20px; }
.trust-private { display: flex; flex-direction: column; gap: 0; }
.trust-private::before { background: linear-gradient(to bottom, rgba(6, 8, 18, 0.86) 0%, rgba(6, 8, 18, 0.5) 46%, rgba(4, 6, 14, 0.7) 100%); }
.trust-private-copy { display: contents; }
.trust-private-copy > * { position: relative; z-index: 2; }
.trust-readout { order: 2; align-self: stretch; margin-top: 18px; padding-bottom: 8px; }
.trust-scope { display: none; }
.trust-private-foot { order: 3; padding-top: 14px; }
.trust-private-sky img { object-position: 50% 100%; }
.trust-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.trust-facts > div { display: block; padding: 7px 0 6px; }
.trust-facts dd { text-align: left; margin-top: 1px; }
.trust-zero-num { font-size: 4.5rem; }
.trust-zero { margin: 6px 0 10px; }
.trust-screen { min-height: 188px; }
.trust-screen-win { width: min(88%, 340px); margin-left: calc(min(88%, 340px) / -2); }
.trust-mb-menu:nth-of-type(n+3) { display: none; }
.trust-keyrow { margin-bottom: 4px; }
.trust-key { width: 58px; }
.trust-shortcuts li { padding: 7px 0; }
.trust-urls { grid-template-columns: 1fr 1fr; gap: 4px; padding: 2px; }
.trust-urls li { position: relative; grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; padding: 0 0 0 12px; background: rgba(255, 255, 255, 0.04); }
.trust-urls li:last-child { grid-column: span 2; }
.trust-url-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trust-urls li > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trust-copy { width: 44px; height: 44px; }
.trust-quiet { display: flex; }
.trust-quiet .trust-prefs { display: block; margin-top: 14px; }
.trust-prefs li { padding: 10px 0; }
.trust-strip { --trust-h: 196px; margin-top: 52px; }
.trust-strip-head { display: block; }
.trust-strip-copy { display: block; }
.trust-strip-copy .trust-strip-lede { margin-top: 8px; }
.trust .trust-track { gap: 14px; }
.trust-shot-frame { border-radius: 16px; }
.trust-shot figcaption { font-size: 0.8125rem; margin-top: 10px; }}
@media (max-width: 420px) {.trust-strip { --trust-h: 184px; }
.trust-term-prompt { font-size: 0.71875rem; }}
/* src/styles/sections/06-close.css */
.price-sec {position: relative;padding-block: var(--sec-y) var(--sec-y);isolation: isolate;overflow-x: clip;}
.price-glow-wrap { position: absolute; inset: 14% 0 6%; z-index: -1; pointer-events: none; }
.price-glow {--g: min(1, calc(var(--p, 1) * 2));position: absolute;left: 50%;top: 0;width: min(1560px, 150vw);height: 100%;background:
radial-gradient(34% 40% at 24% 60%, color-mix(in srgb, var(--dusk-rose) 42%, transparent), transparent 70%),
radial-gradient(36% 44% at 76% 42%, color-mix(in srgb, var(--dusk-violet) 34%, transparent), transparent 72%),
radial-gradient(60% 56% at 50% 54%, color-mix(in srgb, var(--dawn-haze) 78%, transparent), transparent 78%);transform: translate3d(-50%, calc((1 - var(--g)) * 80px), 0) scale(calc(0.8 + var(--g) * 0.2));opacity: calc(0.2 + var(--g) * 0.8);}
.price-glow-wrap[data-active] .price-glow { will-change: transform, opacity; }
.price-head { margin-bottom: clamp(40px, 5vw, 72px); }
.price-stage {position: relative;max-width: 1060px;margin: 0 auto;}
.price-tilt {--t: min(1, calc(var(--p, 1) * 2.4));position: relative;z-index: 2;transform-origin: 50% 0%;}
.price-stage[data-active] .price-tilt {transform: perspective(1800px) rotateX(calc((1 - var(--t)) * 14deg)) translate3d(0, calc((1 - var(--t)) * 56px), 0) scale(calc(0.94 + var(--t) * 0.06));will-change: transform;}
.price-card {--price-r: 34px;position: relative;z-index: 2;display: grid;grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);border-radius: var(--price-r);background: color-mix(in srgb, var(--surface) 64%, transparent);border: 1px solid color-mix(in srgb, var(--surface) 85%, transparent);box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 2px 6px rgba(20, 22, 40, 0.04),
0 44px 110px -44px rgba(70, 36, 100, 0.42);-webkit-backdrop-filter: blur(26px) saturate(165%);backdrop-filter: blur(26px) saturate(165%);}
.price-main { padding: clamp(26px, 4vw, 48px); display: flex; flex-direction: column; min-width: 0; }
.price-name { display: flex; align-items: center; gap: 14px; }
.price-name img { width: 52px; height: 52px; filter: drop-shadow(0 10px 16px rgba(50, 60, 190, 0.28)); }
.price-name b { display: block; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.price-name span { display: block; font-size: 0.875rem; color: var(--ink-3); }
.price-seg { margin: 30px 0 0; padding: 0; border: 0; min-width: 0; }
.price-seg-legend {float: left;width: 100%;margin: 0 0 10px;padding: 0;font-size: var(--fs-small);font-weight: 650;color: var(--ink-3);}
.price-seg-track {clear: both;position: relative;display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));padding: 5px;border-radius: 18px;background: color-mix(in srgb, var(--ink) 6%, transparent);box-shadow: inset 0 0 0 1px var(--line);}
.price-seg input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.price-seg label {position: relative;z-index: 1;display: grid;place-content: center;justify-items: center;gap: 2px;min-height: 60px;padding: 8px 6px;border-radius: 13px;text-align: center;cursor: pointer;-webkit-tap-highlight-color: transparent;}
.price-seg-name { font-weight: 650; font-size: 1rem; letter-spacing: -0.015em; color: var(--ink-2); transition: color var(--t-ui); }
.price-seg-sub { font-size: 0.75rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.price-seg label:hover .price-seg-name { color: var(--ink); }
.price-seg input:checked + label .price-seg-name { color: var(--ink); }
.price-seg input:focus-visible + label { outline: 2.5px solid var(--focus); outline-offset: 1px; }
.price-seg-thumb {position: absolute;top: 5px;bottom: 5px;left: 5px;width: calc((100% - 10px) / 3);border-radius: 13px;background: var(--surface);box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(20, 22, 40, 0.08), 0 8px 18px -8px rgba(20, 22, 40, 0.3);transform: translate3d(calc(100% * var(--i, 0)), 0, 0);transition: transform 560ms var(--ease-spring);}
.price-readout { margin-top: 38px; }
.price-amount { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 14px; }
.price-figure { position: relative; display: inline-block; padding: 8px 14px 6px; margin-left: -14px; }
.price-sel { inset: 0; }
.price-sel-label { left: -1px; top: -24px; }
.price-amt {display: block;font-family: var(--font-display);font-size: clamp(4rem, 2.9rem + 3.6vw, 6rem);font-weight: 700;line-height: 1;letter-spacing: -0.05em;font-variant-numeric: tabular-nums;white-space: nowrap;}
.price-per { padding-bottom: 12px; font-size: 0.9375rem; color: var(--ink-3); }
.price-note { min-height: 1.5em; margin-top: 12px; font-size: 0.9375rem; color: var(--ink-3); }
.price-note b { color: var(--ok); font-weight: 650; }
.price-amt.is-odo .price-amt-text {position: absolute;width: 1px; height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;}
.price-odo { display: inline-flex; align-items: flex-start; }
.price-odo-int, .price-odo-frac { display: inline-flex; }
.price-odo-col {display: inline-block;height: 1.08em;max-width: 0.75em;overflow: hidden;vertical-align: top;-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);transition: max-width 520ms var(--ease-out), opacity 360ms var(--ease-out);}
.price-odo-strip { display: block; transition: transform 900ms var(--ease-spring); }
.price-odo-strip > span { display: block; height: 1.08em; line-height: 1.08em; }
.price-odo-fix { display: inline-block; line-height: 1.08em; }
.price-odo-col.is-entering, .price-odo-col.is-leaving { max-width: 0; opacity: 0; }
.price-odo.is-instant .price-odo-strip, .price-odo.is-instant .price-odo-col { transition: none; }
@media (prefers-reduced-motion: no-preference) {.price-sel.is-redraw { animation: price-sel-in 560ms var(--ease-out), ants 0.6s linear infinite; }}
@keyframes price-sel-in { from { opacity: 0; transform: scale(0.9); } }
.price-cta { margin-top: 28px; }
.price-cta svg { transition: transform var(--t-ui) var(--ease-ui); }
.price-cta:hover svg { transform: translateX(3px); }
.price-main .price-meta { display: grid; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--ink-3); text-align: center; }
.price-meta li { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.price-meta svg { width: 14px; height: 14px; flex: none; }
.price-side {min-width: 0;padding: clamp(26px, 4vw, 48px);border-left: 1px solid var(--line);border-radius: 0 calc(var(--price-r) - 1px) calc(var(--price-r) - 1px) 0;background: color-mix(in srgb, var(--card) 46%, transparent);}
.price-side-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.015em; }
.price-side .price-list { display: grid; gap: 13px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 0.96875rem; line-height: 1.4; }
.price-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); }
.price-list svg { flex: none; width: 20px; height: 20px; margin-top: 0; color: var(--select-ink); }
.price-list .chip-new { margin-left: 6px; vertical-align: 2px; }
.price-guarantee {display: flex;align-items: flex-start;gap: 14px;margin-top: 28px;padding: 16px 18px;border-radius: 20px;background: color-mix(in srgb, var(--surface) 72%, transparent);border: 1px solid var(--line);}
.price-guarantee svg { flex: none; width: 28px; height: 28px; color: var(--ok); }
.price-guarantee b { display: block; font-size: 0.9375rem; font-weight: 650; }
.price-guarantee div > span { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--ink-3); }
.price-foot { margin: clamp(36px, 4vw, 48px) auto 0; max-width: 640px; text-align: center; font-size: 0.875rem; color: var(--ink-3); text-wrap: balance; }
.faq-sec { position: relative; padding-block: var(--sec-y) var(--sec-y-sm); }
.faq-head {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);gap: 20px clamp(32px, 6vw, 96px);align-items: end;margin-bottom: clamp(40px, 5vw, 64px);}
.faq-lede { max-width: 460px; justify-self: end; font-size: 1.0625rem; }
.faq-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 48px clamp(32px, 5vw, 80px);align-items: start;}
.faq-col { min-width: 0; }
.faq-group {margin: 0 0 14px;font-family: var(--font);font-size: var(--fs-eyebrow);font-weight: 650;letter-spacing: 0.08em;text-transform: uppercase;color: var(--ink-3);}
.faq-item { border-top: 1px solid var(--line-2); }
.faq-item:last-child { border-bottom: 1px solid var(--line-2); }
.faq-item summary {display: flex;align-items: center;justify-content: space-between;gap: 20px;padding: 19px 2px;list-style: none;cursor: pointer;font-family: var(--font-display);font-size: 1.0625rem;font-weight: 600;line-height: 1.35;letter-spacing: -0.016em;color: var(--ink);-webkit-tap-highlight-color: transparent;}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {content: "";flex: none;width: 30px;height: 30px;border-radius: 50%;color: var(--ink-2);background:
linear-gradient(currentColor, currentColor) center / 11px 1.75px no-repeat,
linear-gradient(currentColor, currentColor) center / 1.75px 11px no-repeat,
color-mix(in srgb, var(--ink) 7%, transparent);transition: transform 520ms var(--ease-spring), background-color var(--t-ui), color var(--t-ui);}
.faq-item summary:hover::after { background-color: color-mix(in srgb, var(--ink) 12%, transparent); }
.faq-item[open]:not(.is-closing) summary::after {transform: rotate(135deg);color: var(--paper);background-color: var(--ink);}
.faq-item .ans { padding: 0 52px 24px 2px; font-size: 0.96875rem; line-height: 1.58; color: var(--ink-2); }
.faq-item .ans p + p { margin-top: 10px; }
.faq-item .ans code { font-size: 0.86em; padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (prefers-reduced-motion: no-preference) {.faq-item[open]:not(.is-closing) .ans { animation: faq-ans-in 520ms var(--ease-out) both; }}
@keyframes faq-ans-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
.close-get { --close-ext: 48px; --close-ant: 2px; position: relative; padding: var(--sec-y-sm) var(--gutter) var(--sec-y); }
.close-stage {position: relative;display: grid;place-items: center;max-width: var(--shell-wide);min-height: clamp(600px, 88svh, 880px);margin: 0 auto;border-radius: var(--r-stage);overflow: hidden;isolation: isolate;background: var(--dusk-sky);}
.close-window { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--dusk-sky); }
.close-zoom { position: absolute; inset: 0; transform-origin: 50% 46%; }
.close-pic, .close-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.close-mosaic { display: none; }
.close-mosaic img { image-rendering: pixelated; }
.close-reveal, .close-reveal-in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.close-reveal { overflow: hidden; }
.close-scrim {position: absolute;inset: 0;background:
radial-gradient(40% 17% at 50% 56%, rgba(22, 10, 44, 0.5), transparent),
radial-gradient(56% 50% at 50% 44%, rgba(24, 12, 46, 0.5), transparent 74%),
linear-gradient(to bottom, rgba(18, 10, 38, 0.32), transparent 36%);}
.close-sel { display: none; position: absolute; inset: 0; pointer-events: none; }
.close-sel-fill {position: absolute; left: 0; top: 0; width: 100%; height: 100%;transform-origin: 0 0;background: color-mix(in srgb, var(--select) 16%, transparent);}
.close-edge { position: absolute; left: 0; top: 0; overflow: hidden; }
.close-edge-x { width: 100%; height: var(--close-ant); }
.close-edge-y { width: var(--close-ant); height: 100%; }
.close-edge i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.close-edge i::before {content: "";position: absolute;left: 0; top: 0;filter: drop-shadow(0 0 1px rgba(10, 6, 30, 0.35));}
.close-edge-x i::before { width: calc(100% + 12px); height: 100%; background: repeating-linear-gradient(90deg, #fff 0 6px, var(--select) 6px 12px); }
.close-edge-y i::before { width: 100%; height: calc(100% + 12px); background: repeating-linear-gradient(180deg, #fff 0 6px, var(--select) 6px 12px); }
@media (prefers-reduced-motion: no-preference) {.close-sel.is-live .close-edge-x i::before { animation: close-ants-x 0.7s linear infinite; }
.close-sel.is-live .close-edge-y i::before { animation: close-ants-y 0.7s linear infinite; }}
@keyframes close-ants-x { to { transform: translate3d(-12px, 0, 0); } }
@keyframes close-ants-y { to { transform: translate3d(0, -12px, 0); } }
.close-sel-tag { position: absolute; left: 0; top: 0; }
.close-sel-label.sel-label { left: -1px; bottom: 8px; padding: 4px 8px; font-size: 12px; background: rgba(14, 10, 30, 0.82); box-shadow: 0 4px 14px rgba(10, 6, 30, 0.3); }
.close-cross {position: absolute;left: -13px; top: -13px;width: 26px; height: 26px;background:
linear-gradient(#fff, #fff) center / 1.5px 100% no-repeat,
linear-gradient(#fff, #fff) center / 100% 1.5px no-repeat;filter: drop-shadow(0 0 1px rgba(10, 6, 30, 0.8)) drop-shadow(0 1px 3px rgba(10, 6, 30, 0.4));}
.close-objs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.close-obj { position: absolute; display: block; }
.close-obj picture, .close-obj img { display: block; width: 100%; height: auto; }
.close-obj img { filter: drop-shadow(0 26px 34px rgba(18, 8, 40, 0.38)); }
.close-obj-aa { width: 250px; left: 6%; top: 52%; }
.close-content.on-night { background-color: transparent; }
.close-content {position: relative;z-index: 5;display: flex;flex-direction: column;align-items: center;width: 100%;padding: clamp(72px, 9vw, 112px) var(--gutter) clamp(88px, 11vw, 140px);text-align: center;color: var(--ink);}
.close-title {max-width: 14ch;font-size: clamp(2.75rem, 1.55rem + 5.2vw, 6.25rem);font-weight: 700;line-height: 0.96;letter-spacing: -0.048em;color: #fff;text-wrap: balance;text-shadow: 0 2px 40px rgba(30, 10, 60, 0.35);}
.close-lede {position: relative;z-index: 0;isolation: isolate;max-width: 560px;margin-top: 22px;font-size: var(--fs-lead);line-height: 1.45;letter-spacing: -0.014em;color: #fff;text-wrap: pretty;text-shadow: 0 1px 2px rgba(30, 10, 60, 0.35), 0 1px 18px rgba(30, 10, 60, 0.55);}
.close-lede::before {content: "";position: absolute;inset: -14px -24px;z-index: -1;border-radius: 40px;background: rgba(22, 10, 44, var(--close-halo, 0.28));filter: blur(22px);pointer-events: none;}
.close-btns { margin-top: 34px; }
.close-btn-alt {background: rgba(16, 8, 34, 0.56);color: #fff;box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);-webkit-backdrop-filter: blur(16px) saturate(140%);backdrop-filter: blur(16px) saturate(140%);}
.close-btn-alt:hover { background: rgba(16, 8, 34, 0.6); transform: translateY(-1px); }
.close-content .close-trust {display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;margin: 24px 0 0;padding: 0;list-style: none;font-size: var(--fs-small);font-weight: 500;color: #fff;}
.close-trust li {padding: 6px 12px;border-radius: var(--r-pill);background: rgba(20, 10, 40, 0.52);box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);-webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);}
.close-mist { display: none; }
.motion-pin .close-get { padding: 0; }
.motion-pin .close-stage {display: block;max-width: none;min-height: 0;border-radius: 0;background: none;}
.motion-pin .close-window {inset: calc(var(--close-ext) * -1);border-radius: 72px;transform: scale(0.74);box-shadow: 0 50px 120px -50px rgba(40, 20, 70, 0.55);}
.motion-pin .close-mosaic, .motion-pin .close-sel { display: block; }
.motion-pin .close-reveal, .motion-pin .close-sel { visibility: hidden; }
.motion-pin .close-content {position: absolute;inset: 0;justify-content: center;padding: calc(var(--nav-top) + var(--nav-h) + 24px) var(--gutter) 22svh;}
.motion-pin .close-mist {display: block;position: absolute;left: 0; right: 0; bottom: 0;z-index: 4;height: 40svh;pointer-events: none;}
.close-mist span {position: absolute;inset: 0;opacity: 0;-webkit-mask: none center bottom / cover no-repeat;mask: none center bottom / cover no-repeat;}
.close-mist .close-mist-back { background: color-mix(in srgb, var(--paper) 84%, var(--dusk-rose)); }
.close-mist .close-mist-front { background: var(--paper); }
.close-get[data-near] .close-mist span { -webkit-mask-image: url("../img/sections/06/mist-back-1600.webp"); mask-image: url("../img/sections/06/mist-back-1600.webp"); }
.close-get[data-near] .close-mist .close-mist-front { -webkit-mask-image: url("../img/sections/06/mist-front-1600.webp"); mask-image: url("../img/sections/06/mist-front-1600.webp"); }
@media (min-width: 1800px) {.close-get[data-near] .close-mist span { -webkit-mask-image: url("../img/sections/06/mist-back-2560.webp"); mask-image: url("../img/sections/06/mist-back-2560.webp"); }
.close-get[data-near] .close-mist .close-mist-front { -webkit-mask-image: url("../img/sections/06/mist-front-2560.webp"); mask-image: url("../img/sections/06/mist-front-2560.webp"); }}
.motion-pin .close-get[data-live] .close-window,
.motion-pin .close-get[data-live] .close-zoom,
.motion-pin .close-get[data-live] .close-obj { will-change: transform; }
.close-get.close-forced .close-content > * { opacity: 1 !important; transform: none !important; filter: none !important; }
.close-get.close-forced .close-sel, .close-get.close-forced .close-mosaic { visibility: hidden !important; }
.close-get.close-forced .close-reveal, .close-get.close-forced .close-reveal-in { visibility: visible !important; transform: none !important; }
.close-get.close-forced .close-scrim { opacity: 1 !important; }
@media (max-width: 1200px) {.close-obj-aa { width: 190px; left: 3%; }}
@media (max-width: 960px) {.price-card { grid-template-columns: minmax(0, 1fr); }
.price-side { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--price-r) - 1px) calc(var(--price-r) - 1px); }
.price-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.faq-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
.faq-lede { justify-self: start; }
.close-obj-aa { width: 140px; left: 2%; top: 66%; }}
@media (max-width: 760px) {.price-card { --price-r: 28px; }
.price-list { grid-template-columns: minmax(0, 1fr); }
.price-readout { margin-top: 34px; }
.faq-grid { grid-template-columns: minmax(0, 1fr); }
.faq-item summary { font-size: 1rem; padding-block: 14px; gap: 14px; }
.faq-item summary::after { width: 28px; height: 28px; }
.faq-grid { row-gap: 36px; }
.price-side .price-list { gap: 10px; font-size: 0.9375rem; }
.faq-item .ans { padding-right: 8px; }
.close-get { --close-halo: 0.5; --close-ant: 1.5px; }
html:not(.motion-pin) .close-content { padding: 132px 20px 150px; }
.close-stage { min-height: 640px; border-radius: 28px; }
.motion-pin .close-content { justify-content: flex-start; padding-top: calc(var(--nav-top) + var(--nav-h) + 8svh); }
.close-btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
.close-obj-aa { width: 112px; left: 4%; top: auto; bottom: 3%; }
.motion-pin .close-obj-aa { bottom: 7svh; }
.motion-pin .close-mist { height: 40svh; }}
@media (max-width: 420px) {.price-seg label { min-height: 56px; padding-inline: 2px; }
.price-seg-sub { font-size: 0.6875rem; }}