:root {
color-scheme: light dark;
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--page: #f5f7ff;
--page-deep: #edf1fb;
--surface: #ffffff;
--surface-soft: #f8f9ff;
--surface-strong: #eef2ff;
--text: #151a33;
--text-soft: #333a59;
--muted: #68708b;
--muted-strong: #515a78;
--line: #dfe4f1;
--line-strong: #cbd3e8;
--accent: #5562ff;
--accent-strong: #3e49e8;
--cyan: #38d4f4;
--cyan-dark: #0b94bd;
--violet: #8a63ff;
--pink: #e460ec;
--success: #13845d;
--danger: #c43e55;
--warning: #946416;
--hero: #080d24;
--hero-soft: #11183d;
--hero-text: #f8f9ff;
--hero-muted: #b7bfdf;
--shadow-sm: 0 10px 30px rgba(18, 27, 61, 0.08);
--shadow-md: 0 20px 60px rgba(19, 28, 70, 0.12);
--shadow-lg: 0 34px 90px rgba(7, 12, 38, 0.24);
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 30px;
--radius-xl: 42px;
--header-height: 78px;
--shell: 1220px;
}

html[data-theme="dark"] {
--page: #090e20;
--page-deep: #070b1a;
--surface: #11172c;
--surface-soft: #0d1326;
--surface-strong: #171f3a;
--text: #f2f4ff;
--text-soft: #d6daf0;
--muted: #a2a9c3;
--muted-strong: #bec4dc;
--line: #27304c;
--line-strong: #37415f;
--accent: #7b85ff;
--accent-strong: #929aff;
--cyan-dark: #55dafa;
--success: #57d4a1;
--danger: #ff8093;
--warning: #efc56c;
--shadow-sm: 0 10px 32px rgba(0, 0, 0, 0.2);
--shadow-md: 0 22px 64px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
html[data-theme="auto"] {
--page: #090e20;
--page-deep: #070b1a;
--surface: #11172c;
--surface-soft: #0d1326;
--surface-strong: #171f3a;
--text: #f2f4ff;
--text-soft: #d6daf0;
--muted: #a2a9c3;
--muted-strong: #bec4dc;
--line: #27304c;
--line-strong: #37415f;
--accent: #7b85ff;
--accent-strong: #929aff;
--cyan-dark: #55dafa;
--success: #57d4a1;
--danger: #ff8093;
--warning: #efc56c;
--shadow-sm: 0 10px 32px rgba(0, 0, 0, 0.2);
--shadow-md: 0 22px 64px rgba(0, 0, 0, 0.28);
}
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 20px);
-webkit-text-size-adjust: 100%;
}

body {
min-width: 280px;
margin: 0;
background: var(--page);
color: var(--text);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
transition: background-color 180ms ease, color 180ms ease;
}

img,
svg {
display: block;
max-width: 100%;
}

button,
input,
select,
textarea {
color: inherit;
font: inherit;
}

button,
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--accent);
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

a {
color: var(--accent-strong);
text-underline-offset: 0.18em;
}

a:hover {
color: var(--accent);
}

button {
border: 0;
}

button:not(:disabled),
summary,
a {
cursor: pointer;
}

button:disabled,
input:disabled {
cursor: not-allowed;
}

::selection {
background: rgba(85, 98, 255, 0.24);
color: inherit;
}

:focus-visible {
outline: 3px solid var(--cyan);
outline-offset: 4px;
}

.shell {
width: min(calc(100% - 44px), var(--shell));
margin-inline: auto;
}

.skip-link {
position: fixed;
z-index: 1000;
top: 12px;
left: 12px;
padding: 11px 16px;
border-radius: 10px;
background: #ffffff;
color: #11172c;
font-weight: 800;
transform: translateY(-160%);
transition: transform 150ms ease;
}

.skip-link:focus-visible {
transform: translateY(0);
}

.site-header {
position: sticky;
z-index: 100;
top: 0;
height: var(--header-height);
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(7, 11, 31, 0.94);
color: #f8f9ff;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}

.header-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
height: 100%;
gap: 28px;
}

.brand {
--brand-copy-offset: 73px;
display: inline-grid;
justify-self: start;
align-items: start;
min-width: 0;
color: #f8f9ff;
text-decoration: none;
gap: 5px;
}

.brand:hover {
color: #f8f9ff;
}

.brand-art {
display: block;
min-width: 0;
}

.brand-logo-full {
display: block;
width: min(286px, 100%);
height: auto;
}

.brand-logo-symbol {
display: none;
width: 52px;
height: 52px;
}

.brand-copy {
display: block;
min-width: 0;
padding-left: var(--brand-copy-offset);
line-height: 1.05;
}

.site-header .brand-copy {
margin-top: -12px;
}

.brand-copy em {
display: block;
color: #9fa9cf;
font-size: 0.71rem;
font-style: normal;
font-weight: 650;
letter-spacing: 0.02em;
}

.main-nav {
display: flex;
align-items: center;
gap: 32px;
}

.main-nav a {
position: relative;
color: #bec6e8;
font-size: 0.9rem;
font-weight: 720;
text-decoration: none;
}

.main-nav a::after {
position: absolute;
right: 0;
bottom: -9px;
left: 0;
height: 2px;
border-radius: 999px;
background: var(--cyan);
content: "";
transform: scaleX(0);
transition: transform 160ms ease;
}

.main-nav a:hover {
color: #ffffff;
}

.main-nav a:hover::after {
transform: scaleX(1);
}

.main-nav a[aria-current="page"] {
color: #ffffff;
}

.main-nav a[aria-current="page"]::after {
transform: scaleX(1);
}

.theme-toggle {
display: inline-flex;
align-items: center;
justify-self: end;
min-height: 42px;
padding: 8px 13px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
color: #e8ebfa;
font-size: 0.79rem;
font-weight: 750;
transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.theme-toggle:hover {
border-color: rgba(104, 224, 255, 0.5);
background: rgba(104, 224, 255, 0.11);
transform: translateY(-1px);
}

.theme-toggle svg {
width: 18px;
height: 18px;
margin-right: 8px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}

.theme-icon-dark {
display: none;
}

html[data-theme="dark"] .theme-icon-light {
display: none;
}

html[data-theme="dark"] .theme-icon-dark {
display: block;
}

@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .theme-icon-light {
display: none;
}

html[data-theme="auto"] .theme-icon-dark {
display: block;
}
}

.eyebrow {
margin: 0 0 12px;
color: var(--accent-strong);
font-size: 0.76rem;
font-weight: 850;
letter-spacing: 0.12em;
line-height: 1.4;
text-transform: uppercase;
}

.hero {
position: relative;
isolation: isolate;
min-height: 720px;
overflow: hidden;
background:
radial-gradient(circle at 76% 16%, rgba(41, 190, 229, 0.15), transparent 31%),
radial-gradient(circle at 18% 86%, rgba(117, 72, 255, 0.22), transparent 37%),
linear-gradient(135deg, #070b1e 0%, #0b1232 48%, #101845 100%);
color: var(--hero-text);
}

.hero::before {
position: absolute;
z-index: -2;
top: -210px;
right: -120px;
width: 620px;
height: 620px;
border: 1px solid rgba(91, 221, 252, 0.12);
border-radius: 50%;
box-shadow: 0 0 0 90px rgba(75, 207, 245, 0.025), 0 0 0 180px rgba(75, 207, 245, 0.018);
content: "";
}

.hero::after {
position: absolute;
z-index: -2;
bottom: -320px;
left: 18%;
width: 680px;
height: 680px;
border-radius: 50%;
background: rgba(123, 76, 255, 0.08);
filter: blur(2px);
content: "";
}

.hero-pixel-field {
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
}

.hero-pixel-field::before {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(110, 123, 181, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(110, 123, 181, 0.05) 1px, transparent 1px);
background-size: 48px 48px;
content: "";
mask-image: linear-gradient(to bottom, transparent, black 17%, black 72%, transparent);
}

.hero-pixel-field span {
position: absolute;
width: 8px;
height: 8px;
border-radius: 1px;
background: currentColor;
color: #4f7cff;
box-shadow: 0 0 15px currentColor;
opacity: 0.24;
animation: pixelFloat 4.4s ease-in-out infinite;
}

.hero-pixel-field span:nth-child(3n + 1) { color: #ff4d5a; }
.hero-pixel-field span:nth-child(3n + 2) { color: #45d483; }
.hero-pixel-field span:nth-child(3n) { color: #4f7cff; }

.hero-pixel-field span:nth-child(1) { top: 15%; left: 7%; animation-delay: -0.8s; animation-duration: 4.2s; }
.hero-pixel-field span:nth-child(2) { top: 72%; left: 4%; width: 6px; height: 6px; animation-delay: -3.1s; animation-duration: 4.8s; }
.hero-pixel-field span:nth-child(3) { top: 21%; right: 8%; width: 6px; height: 6px; animation-delay: -1.7s; animation-duration: 4.1s; }
.hero-pixel-field span:nth-child(4) { right: 18%; bottom: 12%; width: 9px; height: 9px; animation-delay: -3.8s; animation-duration: 4.9s; }
.hero-pixel-field span:nth-child(5) { top: 45%; left: 49%; width: 5px; height: 5px; animation-delay: -2.4s; animation-duration: 3.9s; }
.hero-pixel-field span:nth-child(6) { right: 43%; bottom: 7%; width: 7px; height: 7px; animation-delay: -4.2s; animation-duration: 4.6s; }
.hero-pixel-field span:nth-child(7) { top: 34%; left: 22%; width: 6px; height: 6px; animation-delay: -2.1s; animation-duration: 4.3s; }
.hero-pixel-field span:nth-child(8) { top: 61%; right: 28%; width: 10px; height: 10px; animation-delay: -3.6s; animation-duration: 4.7s; }
.hero-pixel-field span:nth-child(9) { top: 10%; left: 58%; width: 6px; height: 6px; animation-delay: -1.4s; animation-duration: 4s; }
.hero-pixel-field span:nth-child(10) { bottom: 24%; left: 14%; width: 5px; height: 5px; animation-delay: -2.9s; animation-duration: 4.4s; }
.hero-pixel-field span:nth-child(11) { top: 28%; left: 39%; width: 7px; height: 7px; animation-delay: -3.3s; animation-duration: 4.1s; }
.hero-pixel-field span:nth-child(12) { top: 78%; right: 10%; width: 5px; height: 5px; animation-delay: -1.9s; animation-duration: 4.5s; }
.hero-pixel-field span:nth-child(13) { top: 54%; left: 8%; width: 9px; height: 9px; animation-delay: -4s; animation-duration: 4.8s; }
.hero-pixel-field span:nth-child(14) { top: 13%; right: 31%; width: 5px; height: 5px; animation-delay: -2.6s; animation-duration: 3.9s; }
.hero-pixel-field span:nth-child(15) { bottom: 15%; left: 62%; width: 7px; height: 7px; animation-delay: -1.2s; animation-duration: 4.3s; }

@keyframes pixelFloat {
0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.18; }
42% { transform: translate3d(9px, -18px, 0); opacity: 0.58; }
68% { transform: translate3d(-5px, -29px, 0); opacity: 0.36; }
}

.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(430px, 0.96fr);
align-items: center;
min-height: 720px;
padding-block: 66px 74px;
gap: clamp(48px, 7vw, 94px);
}

.hero-copy {
min-width: 0;
}

.hero-eyebrow {
display: flex;
align-items: center;
color: #7fe8ff;
}

.live-dot {
position: relative;
width: 8px;
height: 8px;
margin-right: 10px;
border-radius: 50%;
background: #58e9b7;
box-shadow: 0 0 0 6px rgba(88, 233, 183, 0.11);
}

.live-dot::after {
position: absolute;
inset: -6px;
border: 1px solid rgba(88, 233, 183, 0.5);
border-radius: inherit;
content: "";
animation: livePulse 2.2s ease-out infinite;
}

@keyframes livePulse {
0% { opacity: 0.9; transform: scale(0.6); }
70%, 100% { opacity: 0; transform: scale(1.65); }
}

.hero h1 {
max-width: 620px;
margin: 0;
color: #f8f9ff;
font-size: clamp(2.35rem, 4vw, 4.2rem);
font-weight: 850;
letter-spacing: -0.055em;
line-height: 1.02;
}

.hero-resolution {
display: grid;
justify-items: start;
margin: 24px 0 20px;
line-height: 1;
}

.hero-resolution strong {
display: grid;
grid-template-columns: auto min-content auto;
align-items: baseline;
max-width: 100%;
color: #ffffff;
font-size: clamp(3.1rem, 5.6vw, 5.85rem);
font-variant-numeric: tabular-nums;
font-weight: 900;
letter-spacing: -0.075em;
white-space: nowrap;
}

.resolution-times {
margin-inline: 0.15em 0.2em;
color: var(--cyan);
font-size: 0.68em;
font-weight: 650;
letter-spacing: 0;
}

.hero-resolution > span {
margin-top: 11px;
color: #909bc8;
font-size: 0.78rem;
font-weight: 850;
letter-spacing: 0.15em;
text-transform: uppercase;
}

.hero-lead {
max-width: 590px;
min-height: 3.2em;
margin: 0;
color: var(--hero-muted);
font-size: 1.08rem;
}

.hero-actions,
.support-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}

.hero-actions {
margin-top: 28px;
}

.primary-button,
.secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 49px;
padding: 12px 19px;
border-radius: 14px;
font-size: 0.91rem;
font-weight: 820;
line-height: 1.2;
text-decoration: none;
transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.primary-button {
background: linear-gradient(135deg, #5965ff, #794ff4);
color: #ffffff;
box-shadow: 0 12px 28px rgba(83, 83, 239, 0.26);
}

.primary-button:hover {
color: #ffffff;
box-shadow: 0 16px 34px rgba(83, 83, 239, 0.36);
transform: translateY(-2px);
}

.primary-button:active,
.secondary-button:active {
transform: translateY(0);
}

.primary-button svg,
.secondary-button svg {
width: 19px;
height: 19px;
margin-right: 9px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}

.secondary-button {
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--text);
box-shadow: 0 8px 24px rgba(15, 23, 53, 0.05);
}

.secondary-button:hover {
border-color: var(--accent);
color: var(--accent-strong);
transform: translateY(-2px);
}

.hero-secondary {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.07);
color: #f0f2ff;
box-shadow: none;
}

.hero-secondary:hover {
border-color: rgba(92, 225, 255, 0.55);
background: rgba(92, 225, 255, 0.11);
color: #ffffff;
}

.primary-button:disabled,
.secondary-button:disabled {
opacity: 0.55;
box-shadow: none;
transform: none;
}

.primary-button.is-loading {
pointer-events: none;
opacity: 0.78;
}

.action-status {
min-height: 1.45em;
margin: 10px 0 0;
color: var(--muted);
font-size: 0.83rem;
font-weight: 650;
}

.action-status.is-success {
color: var(--success);
}

.action-status.is-error {
color: var(--danger);
}

.hero-action-status {
color: #9ec4cf;
}

.hero-action-status.is-success {
color: #69e7b8;
}

.hero-trust {
display: flex;
flex-wrap: wrap;
margin: 25px 0 0;
padding: 0;
color: #9da7ce;
font-size: 0.78rem;
font-weight: 650;
list-style: none;
gap: 7px 18px;
}

.hero-trust li {
position: relative;
padding-left: 17px;
}

.hero-trust li::before {
position: absolute;
top: 0.53em;
left: 0;
width: 7px;
height: 4px;
border-bottom: 2px solid #5fe2b2;
border-left: 2px solid #5fe2b2;
content: "";
transform: rotate(-45deg);
}

.hero-share {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 18px;
}

.hero-share-icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

.hero-share-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 13px;
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 10px 28px rgba(4, 8, 27, 0.18);
transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.hero-share-link:hover {
border-color: rgba(92, 225, 255, 0.45);
background: rgba(255, 255, 255, 0.11);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(4, 8, 27, 0.24);
}

.hero-share-link img {
display: block;
width: 20px;
height: 20px;
}

.hero-dashboard {
position: relative;
padding: 28px 28px 24px;
overflow: hidden;
border: 1px solid rgba(122, 224, 255, 0.22);
border-radius: var(--radius-xl);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
rgba(12, 18, 51, 0.64);
box-shadow: 0 35px 85px rgba(1, 6, 28, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

.hero-dashboard::before {
position: absolute;
top: -80px;
right: -60px;
width: 210px;
height: 210px;
border-radius: 50%;
background: rgba(57, 210, 244, 0.11);
filter: blur(10px);
content: "";
}

.dashboard-head {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}

.dashboard-head > div {
display: grid;
}

.dashboard-kicker {
color: #8e9ac7;
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.dashboard-head strong {
margin-top: 5px;
color: #f5f7ff;
font-size: 1.28rem;
letter-spacing: -0.03em;
}

.live-badge {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
padding: 6px 10px;
border: 1px solid rgba(88, 233, 183, 0.24);
border-radius: 999px;
background: rgba(88, 233, 183, 0.08);
color: #78eabe;
font-size: 0.66rem;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.live-badge span {
width: 6px;
height: 6px;
margin-right: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 10px currentColor;
}

.screen-visual {
position: relative;
width: min(100%, 380px);
margin: 33px auto 27px;
padding-bottom: 36px;
}

.screen-frame {
position: relative;
aspect-ratio: 16 / 9;
padding: 13px;
border: 2px solid rgba(100, 226, 255, 0.86);
border-radius: 18px;
background: #070c21;
box-shadow: 0 0 0 6px rgba(92, 218, 249, 0.035), 0 20px 55px rgba(0, 4, 24, 0.44);
transition: aspect-ratio 240ms ease;
}

.screen-visual.is-portrait {
width: min(68%, 260px);
}

.screen-visual.is-portrait .screen-frame {
aspect-ratio: 9 / 16;
}

.screen-glow {
position: absolute;
inset: 14%;
border-radius: 50%;
background: rgba(88, 104, 255, 0.25);
filter: blur(35px);
}

.available-frame {
position: relative;
width: 100%;
height: 100%;
border: 1px solid rgba(143, 111, 255, 0.62);
border-radius: 10px;
background:
linear-gradient(rgba(106, 104, 255, 0.13), rgba(82, 48, 145, 0.16)),
linear-gradient(135deg, rgba(89, 212, 244, 0.06), transparent);
}

.viewport-frame {
position: absolute;
top: 17%;
left: 12%;
display: grid;
place-items: center;
width: 76%;
height: 67%;
border: 1px solid rgba(95, 226, 255, 0.95);
border-radius: 7px;
background: rgba(16, 26, 64, 0.66);
transition: width 220ms ease, height 220ms ease, top 220ms ease, left 220ms ease;
}

.viewport-frame span {
color: #9beaff;
font-size: 0.59rem;
font-weight: 780;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.screen-stand {
position: absolute;
bottom: 8px;
left: 50%;
width: 82px;
height: 27px;
border-bottom: 4px solid #a6b0d5;
transform: translateX(-50%);
}

.screen-stand::before {
position: absolute;
top: 0;
left: 50%;
width: 5px;
height: 24px;
background: #a6b0d5;
content: "";
transform: translateX(-50%);
}

.dashboard-values {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
padding: 17px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
gap: 13px;
}

.dashboard-values div {
min-width: 0;
}

.dashboard-values dt {
color: #8490ba;
font-size: 0.61rem;
font-weight: 750;
letter-spacing: 0.04em;
line-height: 1.25;
}

.dashboard-values dd {
margin: 5px 0 0;
overflow: hidden;
color: #f1f3ff;
font-size: 0.86rem;
font-variant-numeric: tabular-nums;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}

.dashboard-note {
margin: 17px 0 0;
color: #8e98bd;
font-size: 0.7rem;
line-height: 1.5;
}

.noscript-note {
margin-bottom: 30px;
padding: 14px 17px;
border: 1px solid rgba(255, 203, 97, 0.32);
border-radius: 12px;
background: rgba(255, 203, 97, 0.08);
color: #ffe3a9;
}

.section {
padding-block: 104px;
}

.section-heading {
margin-bottom: 44px;
}

.section-heading h2,
.interpreter-copy h2,
.knowledge-main h2,
.sister-card h2 {
margin: 0;
font-size: clamp(2rem, 3.4vw, 3.35rem);
font-weight: 850;
letter-spacing: -0.055em;
line-height: 1.08;
}

.section-heading > p,
.split-heading > p,
.centered-heading > p {
color: var(--muted);
}

.split-heading {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.62fr);
align-items: end;
gap: clamp(36px, 7vw, 100px);
}

.split-heading > p {
margin: 0 0 4px;
}

.centered-heading {
max-width: 790px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

.centered-heading > p:last-child {
max-width: 680px;
margin: 18px auto 0;
}

.metric-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px;
}

.metric-card {
position: relative;
min-width: 0;
min-height: 194px;
padding: 24px 22px 21px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover {
border-color: rgba(85, 98, 255, 0.35);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}

.metric-card::after {
position: absolute;
right: -34px;
bottom: -44px;
width: 110px;
height: 110px;
border-radius: 50%;
background: radial-gradient(circle, rgba(82, 98, 255, 0.09), transparent 68%);
content: "";
}

.metric-featured {
border-color: rgba(76, 194, 239, 0.35);
background:
linear-gradient(145deg, rgba(67, 217, 246, 0.09), transparent 55%),
var(--surface);
}

.metric-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
margin-bottom: 22px;
border: 1px solid rgba(85, 98, 255, 0.17);
border-radius: 12px;
background: rgba(85, 98, 255, 0.08);
color: var(--accent);
}

.metric-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.6;
}

.metric-label {
display: block;
min-height: 2.5em;
color: var(--muted);
font-size: 0.74rem;
font-weight: 790;
letter-spacing: 0.035em;
line-height: 1.3;
text-transform: uppercase;
}

.metric-card strong {
display: block;
margin-top: 6px;
overflow-wrap: anywhere;
color: var(--text);
font-size: clamp(1.22rem, 2vw, 1.65rem);
font-variant-numeric: tabular-nums;
font-weight: 850;
letter-spacing: -0.045em;
line-height: 1.16;
}

.metric-card p {
margin: 8px 0 0;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.45;
}

.metric-grid[aria-busy="true"] .metric-card strong {
opacity: 0.42;
}

.interpreter-section {
position: relative;
overflow: hidden;
padding-block: 108px;
background:
radial-gradient(circle at 12% 100%, rgba(112, 72, 255, 0.28), transparent 38%),
radial-gradient(circle at 88% 0%, rgba(40, 201, 236, 0.16), transparent 34%),
linear-gradient(135deg, #090e28, #121a48);
color: #f6f7ff;
}

.interpreter-section::before {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(143, 151, 202, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 151, 202, 0.05) 1px, transparent 1px);
background-size: 52px 52px;
content: "";
mask-image: linear-gradient(90deg, transparent, black 24%, black 80%, transparent);
}

.interpreter-grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
align-items: center;
gap: clamp(50px, 9vw, 124px);
}

.interpreter-copy .eyebrow {
color: #73e4fb;
}

.interpreter-copy h2 {
color: #f8f9ff;
}

.interpreter-copy > p:last-child {
max-width: 640px;
margin: 23px 0 0;
color: #aeb7da;
}

.interpreter-answer {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
margin-top: 28px;
padding: 20px;
border: 1px solid rgba(111, 224, 250, 0.22);
border-radius: 18px;
background: rgba(255, 255, 255, 0.065);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
gap: 16px;
}

.answer-marker {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 13px;
background: linear-gradient(145deg, rgba(80, 218, 247, 0.18), rgba(128, 81, 255, 0.17));
color: #6de5ff;
}

.answer-marker svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.7;
}

.interpreter-answer p {
margin: 0;
color: #dfe3f6;
font-size: 0.96rem;
}

.pixel-stack {
position: relative;
display: grid;
margin: 0;
padding: 0;
list-style: none;
gap: 10px;
}

.pixel-stack::before {
position: absolute;
z-index: 0;
top: 25px;
bottom: 25px;
left: 25px;
width: 1px;
background: linear-gradient(#54dff7, #8a63ff);
content: "";
opacity: 0.55;
}

.pixel-stack li {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 50px 1fr;
align-items: center;
min-height: 76px;
padding: 12px 17px 12px 0;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 17px;
background: rgba(9, 15, 44, 0.76);
box-shadow: 0 14px 35px rgba(1, 5, 25, 0.22);
}

.pixel-stack li > span {
display: grid;
place-items: center;
width: 33px;
height: 33px;
margin-left: 9px;
border: 1px solid rgba(94, 225, 251, 0.4);
border-radius: 11px;
background: #111a48;
color: #6fe5fc;
font-size: 0.73rem;
font-weight: 850;
}

.pixel-stack li div {
display: grid;
min-width: 0;
padding-left: 8px;
}

.pixel-stack strong {
color: #f5f7ff;
font-size: 0.92rem;
}

.pixel-stack small {
margin-top: 2px;
color: #909abd;
font-size: 0.72rem;
}

.extras-section {
background:
radial-gradient(circle at 94% 15%, rgba(57, 204, 240, 0.07), transparent 24%),
var(--page-deep);
}

.tool-panel {
position: relative;
display: grid;
margin-top: 26px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-md);
}

.tool-panel + .tool-panel {
margin-top: 30px;
}

.tool-number {
margin: 0 0 26px;
color: rgba(85, 98, 255, 0.23);
font-size: 4.4rem;
font-weight: 900;
letter-spacing: -0.09em;
line-height: 0.8;
}

.tool-panel h3 {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.75rem);
font-weight: 850;
letter-spacing: -0.05em;
line-height: 1.08;
}

.tool-panel p {
color: var(--muted);
}

.tool-copy,
.monitor-copy,
.support-options {
padding: clamp(30px, 5vw, 58px);
}

.tool-copy > p:not(.tool-number, .eyebrow, .privacy-note),
.monitor-copy > p:not(.tool-number, .eyebrow, .monitor-permission-note, .action-status),
.support-options > p:not(.tool-number, .eyebrow, .privacy-note) {
margin: 19px 0 0;
}

.calibration-panel {
grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.32fr);
}

.calibration-panel::before {
position: absolute;
top: -140px;
left: -100px;
width: 340px;
height: 340px;
border-radius: 50%;
background: rgba(94, 107, 255, 0.07);
content: "";
}

.tool-copy {
position: relative;
z-index: 1;
align-self: center;
}

.privacy-note {
display: flex;
align-items: flex-start;
margin: 25px 0 0;
padding: 14px 15px;
border: 1px solid rgba(19, 132, 93, 0.18);
border-radius: 13px;
background: rgba(38, 187, 132, 0.07);
color: var(--muted-strong) !important;
font-size: 0.79rem;
font-weight: 650;
line-height: 1.5;
}

.privacy-note svg {
flex: 0 0 auto;
width: 19px;
height: 19px;
margin: 1px 10px 0 0;
fill: none;
stroke: var(--success);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}

.privacy-note.compact {
margin-top: 18px;
padding: 11px 12px;
}

.calibration-workspace {
min-width: 0;
padding: clamp(26px, 4vw, 44px);
border-left: 1px solid var(--line);
background:
linear-gradient(rgba(85, 98, 255, 0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(85, 98, 255, 0.028) 1px, transparent 1px),
var(--surface-soft);
background-size: 28px 28px;
}

.calibration-stage {
display: grid;
place-items: center;
min-height: 325px;
padding: 26px 12px;
overflow: hidden;
border: 1px dashed var(--line-strong);
border-radius: 20px;
background: var(--surface);
}

.reference-card {
--card-width: 324px;
position: relative;
width: min(var(--card-width), 100%);
aspect-ratio: 85.6 / 53.98;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: calc(var(--card-width) * 0.055);
background:
radial-gradient(circle at 87% 18%, rgba(77, 226, 247, 0.45), transparent 21%),
radial-gradient(circle at 12% 90%, rgba(234, 93, 239, 0.35), transparent 28%),
linear-gradient(135deg, #2732a6, #5747d9 46%, #172054);
color: #ffffff;
box-shadow: 0 26px 55px rgba(25, 30, 91, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: width 70ms linear, aspect-ratio 160ms ease;
}

.reference-card.is-short {
aspect-ratio: 53.98 / 85.6;
}

.reference-card::before {
position: absolute;
inset: 0;
background-image: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.09) 47%, transparent 69%);
content: "";
}

.reference-card strong {
position: absolute;
bottom: 15%;
left: 8%;
font-size: clamp(0.65rem, calc(var(--card-width) * 0.045), 1rem);
letter-spacing: 0.02em;
}

.reference-card small {
position: absolute;
right: 7%;
bottom: 9%;
color: rgba(255, 255, 255, 0.73);
font-size: clamp(0.55rem, calc(var(--card-width) * 0.035), 0.78rem);
font-weight: 700;
}

.reference-card.is-short strong {
bottom: 12%;
}

.card-chip {
position: absolute;
top: 27%;
left: 9%;
width: 18%;
aspect-ratio: 1.22;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 15%;
background: linear-gradient(135deg, #e9d59a, #a8863c);
}

.card-line {
position: absolute;
right: 9%;
height: 3%;
border-radius: 999px;
background: rgba(255, 255, 255, 0.52);
}

.card-line-one {
top: 29%;
width: 43%;
}

.card-line-two {
top: 39%;
width: 34%;
}

.reference-card.is-short .card-chip {
top: 10%;
width: 28%;
}

.reference-card.is-short .card-line-one {
top: 31%;
right: 10%;
width: 80%;
}

.reference-card.is-short .card-line-two {
top: 37%;
right: 10%;
width: 63%;
}

.calibration-controls {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
align-items: start;
margin-top: 25px;
gap: 17px 24px;
}

.calibration-controls fieldset,
.support-options fieldset {
margin: 0;
padding: 0;
border: 0;
}

.calibration-controls fieldset {
grid-row: span 2;
}

.calibration-controls legend,
.support-options legend {
margin-bottom: 10px;
color: var(--text-soft);
font-size: 0.8rem;
font-weight: 800;
}

.calibration-controls fieldset label,
.support-options fieldset label {
display: flex;
align-items: center;
color: var(--text-soft);
font-size: 0.82rem;
font-weight: 650;
}

.calibration-controls fieldset label + label,
.support-options fieldset label + label {
margin-top: 9px;
}

.calibration-controls fieldset label span {
margin-left: auto;
color: var(--muted);
font-size: 0.72rem;
}

.calibration-controls input[type="radio"],
.support-options input[type="checkbox"] {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin: 0 9px 0 0;
}

.range-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 8px 12px;
}

.range-row label,
.number-row > label {
color: var(--text-soft);
font-size: 0.8rem;
font-weight: 800;
}

.range-row output {
color: var(--accent-strong);
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
font-weight: 850;
}

.range-row input {
grid-column: 1 / -1;
width: 100%;
}

.number-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
}

.number-row > div {
display: flex;
align-items: center;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: 11px;
background: var(--surface);
}

.number-row input {
width: 86px;
min-height: 39px;
padding: 7px 8px 7px 12px;
border: 0;
outline: 0;
background: transparent;
font-variant-numeric: tabular-nums;
font-weight: 750;
}

.number-row div span {
padding-right: 10px;
color: var(--muted);
font-size: 0.73rem;
font-weight: 700;
}

.text-button {
justify-self: start;
padding: 2px 0;
border-bottom: 1px solid currentColor;
background: transparent;
color: var(--accent-strong);
font-size: 0.76rem;
font-weight: 760;
}

.calibration-controls .text-button,
.calibration-controls .action-status {
grid-column: 1 / -1;
}

.calibration-results {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 24px 0 0;
padding: 17px;
border: 1px solid var(--line);
border-radius: 17px;
background: var(--surface);
gap: 13px;
}

.calibration-results div {
min-width: 0;
padding-right: 12px;
border-right: 1px solid var(--line);
}

.calibration-results div:last-child {
padding-right: 0;
border-right: 0;
}

.calibration-results dt {
color: var(--muted);
font-size: 0.65rem;
font-weight: 760;
line-height: 1.3;
}

.calibration-results dd {
margin: 6px 0 0;
overflow-wrap: anywhere;
color: var(--text);
font-size: 0.98rem;
font-variant-numeric: tabular-nums;
font-weight: 850;
line-height: 1.25;
}

.estimate-note {
margin: 13px 0 0;
color: var(--muted) !important;
font-size: 0.7rem;
line-height: 1.5;
}

.monitor-panel {
grid-template-columns: minmax(330px, 0.74fr) minmax(0, 1.26fr);
border-color: rgba(102, 220, 248, 0.18);
background:
radial-gradient(circle at 8% 10%, rgba(121, 74, 255, 0.2), transparent 29%),
linear-gradient(135deg, #090f2b, #101a4a);
color: #f7f8ff;
}

.monitor-panel .tool-number {
color: rgba(110, 226, 250, 0.2);
}

.monitor-panel .eyebrow {
color: #6ce2f8;
}

.monitor-panel h3 {
color: #f8f9ff;
}

.monitor-copy > p:not(.tool-number, .eyebrow, .monitor-permission-note, .action-status) {
color: #aeb7d7;
}

.monitor-copy .primary-button {
margin-top: 24px;
}

.monitor-permission-note {
display: flex;
align-items: flex-start;
margin: 16px 0 0;
color: #939ec4 !important;
font-size: 0.74rem;
line-height: 1.5;
}

.monitor-permission-note svg {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin: 2px 8px 0 0;
fill: none;
stroke: #6bdff8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.7;
}

.monitor-status {
color: #9ca6c8;
}

.monitor-status.is-success {
color: #66e2b4;
}

.monitor-status.is-error {
color: #ff91a2;
}

.monitor-output {
display: grid;
align-content: center;
min-width: 0;
padding: clamp(28px, 5vw, 56px);
border-left: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(3, 7, 24, 0.28);
}

.monitor-map {
position: relative;
min-height: 330px;
overflow: hidden;
border: 1px solid rgba(130, 146, 204, 0.2);
border-radius: 20px;
background:
linear-gradient(rgba(115, 133, 194, 0.075) 1px, transparent 1px),
linear-gradient(90deg, rgba(115, 133, 194, 0.075) 1px, transparent 1px),
rgba(4, 8, 27, 0.7);
background-size: 25px 25px;
}

.monitor-empty-state {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
padding: 30px;
color: #a7b0ce;
text-align: center;
}

.monitor-empty-state svg {
width: 80px;
height: 60px;
margin-bottom: 15px;
fill: none;
stroke: #63719e;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
}

.monitor-empty-state strong {
color: #e8ebf9;
font-size: 0.9rem;
}

.monitor-empty-state span {
margin-top: 4px;
color: #7985ad;
font-size: 0.73rem;
}

.monitor-screen {
position: absolute;
display: grid;
place-items: center;
min-width: 74px;
min-height: 55px;
padding: 8px;
overflow: hidden;
border: 1px solid rgba(107, 221, 248, 0.5);
border-radius: 9px;
background: linear-gradient(145deg, rgba(63, 83, 169, 0.72), rgba(38, 33, 108, 0.78));
box-shadow: 0 12px 30px rgba(0, 3, 20, 0.34);
color: #edf1ff;
text-align: center;
}

.monitor-screen.is-current {
border-color: #65e5ff;
box-shadow: 0 0 0 3px rgba(101, 229, 255, 0.12), 0 14px 32px rgba(0, 3, 20, 0.42);
}

.monitor-screen.is-primary::after {
position: absolute;
top: 5px;
right: 5px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #63e8b6;
box-shadow: 0 0 8px #63e8b6;
content: "";
}

.monitor-screen-label {
display: grid;
max-width: 100%;
}

.monitor-screen-label strong {
overflow: hidden;
font-size: clamp(0.58rem, 1.2vw, 0.72rem);
text-overflow: ellipsis;
white-space: nowrap;
}

.monitor-screen-label span {
margin-top: 2px;
color: #b2bcdd;
font-size: clamp(0.48rem, 1vw, 0.61rem);
font-variant-numeric: tabular-nums;
}

.monitor-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 14px;
gap: 10px;
}

.monitor-item {
min-width: 0;
padding: 12px 13px;
border: 1px solid rgba(121, 138, 195, 0.16);
border-radius: 12px;
background: rgba(255, 255, 255, 0.045);
}

.monitor-item strong {
display: block;
overflow: hidden;
color: #f1f3ff;
font-size: 0.75rem;
text-overflow: ellipsis;
white-space: nowrap;
}

.monitor-item span {
display: block;
margin-top: 3px;
color: #8f9abd;
font-size: 0.66rem;
line-height: 1.4;
}

.support-panel {
grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
}

.support-options fieldset {
margin-top: 22px;
padding: 17px;
border: 1px solid var(--line);
border-radius: 15px;
background: var(--surface-soft);
}

.support-options fieldset label {
align-items: flex-start;
}

.support-options fieldset label.disabled-option {
color: var(--muted);
opacity: 0.68;
}

.support-preview-wrap {
min-width: 0;
padding: clamp(27px, 4vw, 48px);
border-left: 1px solid var(--line);
background: #0b112b;
color: #f3f5ff;
}

.preview-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}

.preview-head span {
color: #dce1f7;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.preview-head small {
color: #7e89b1;
font-size: 0.68rem;
}

.support-preview-wrap pre {
min-height: 330px;
max-height: 430px;
margin: 0;
padding: 21px;
overflow: auto;
border: 1px solid rgba(130, 149, 211, 0.17);
border-radius: 16px;
background: #070c21;
color: #cbd4f0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.76rem;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-word;
scrollbar-color: #435078 #0b1129;
}

.support-actions {
margin-top: 16px;
}

.support-preview-wrap .secondary-button {
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: #eef1ff;
}

.support-preview-wrap .secondary-button:hover {
border-color: rgba(96, 224, 252, 0.5);
color: #ffffff;
}

.support-preview-wrap .action-status {
color: #929dc1;
}

.support-preview-wrap .action-status.is-success {
color: #63e0b1;
}

.support-preview-wrap .action-status.is-error {
color: #ff93a3;
}

.help-section {
background: var(--page);
}

.faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 14px;
}

.faq-item {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(16, 26, 63, 0.045);
}

.faq-item[open] {
border-color: rgba(85, 98, 255, 0.32);
box-shadow: var(--shadow-sm);
}

.faq-item summary {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 68px;
padding: 17px 54px 17px 20px;
color: var(--text);
font-size: 0.9rem;
font-weight: 790;
line-height: 1.4;
list-style: none;
}

.faq-item summary::-webkit-details-marker {
display: none;
}

.faq-item summary span {
position: absolute;
top: 50%;
right: 20px;
width: 22px;
height: 22px;
border-radius: 7px;
background: var(--surface-strong);
transform: translateY(-50%);
}

.faq-item summary span::before,
.faq-item summary span::after {
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 1.5px;
border-radius: 99px;
background: var(--accent-strong);
content: "";
transform: translate(-50%, -50%);
transition: transform 150ms ease;
}

.faq-item summary span::after {
transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] summary span::after {
transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item > div {
padding: 0 20px 19px;
}

.faq-item p {
margin: 0;
padding-top: 16px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.83rem;
}

.knowledge-section {
padding-top: 30px;
background: var(--page);
}

.knowledge-grid {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(330px, 0.62fr);
align-items: start;
gap: clamp(38px, 7vw, 86px);
}

.knowledge-main {
padding-block: 20px;
}

.knowledge-main > p:not(.eyebrow) {
color: var(--muted);
}

.knowledge-main h3 {
margin: 31px 0 15px;
font-size: 1.35rem;
letter-spacing: -0.03em;
}

.check-list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
gap: 11px;
}

.check-list li {
position: relative;
padding: 14px 16px 14px 44px;
border: 1px solid var(--line);
border-radius: 13px;
background: var(--surface);
color: var(--muted);
font-size: 0.84rem;
}

.check-list li::before {
position: absolute;
top: 18px;
left: 18px;
width: 10px;
height: 6px;
border-bottom: 2px solid var(--success);
border-left: 2px solid var(--success);
content: "";
transform: rotate(-45deg);
}

.check-list strong {
color: var(--text-soft);
}

.sister-card {
position: sticky;
top: calc(var(--header-height) + 24px);
overflow: hidden;
padding: 31px;
border: 1px solid rgba(88, 218, 245, 0.22);
border-radius: var(--radius-lg);
background:
radial-gradient(circle at 90% 8%, rgba(77, 218, 245, 0.16), transparent 34%),
linear-gradient(145deg, #0c1232, #151c50);
color: #f7f8ff;
box-shadow: var(--shadow-lg);
}

.sister-card .eyebrow {
color: #6fe3fa;
}

.sister-card h2 {
color: #f8f9ff;
font-size: clamp(1.75rem, 2.8vw, 2.6rem);
}

.sister-card p:not(.eyebrow) {
margin: 18px 0 0;
color: #aab4d5;
}

.sister-card .secondary-button {
margin-top: 22px;
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.07);
color: #ffffff;
}

.sister-card .secondary-button span {
margin-left: 9px;
}

.sister-visual {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 102px;
margin-bottom: 28px;
padding: 8px;
border: 1px solid rgba(98, 225, 252, 0.35);
border-radius: 16px;
background: rgba(5, 9, 30, 0.52);
gap: 5px;
}

.sister-visual span {
aspect-ratio: 1;
border-radius: 5px;
background: #2f3d90;
}

.sister-visual span:nth-child(2) { background: #704edd; }
.sister-visual span:nth-child(3) { background: #29b9d7; }
.sister-visual span:nth-child(4) { background: #dd5bdd; }

.site-footer {
padding-top: 58px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
background: #070b1c;
color: #a0a9c9;
}

.footer-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
padding-bottom: 42px;
gap: 48px;
}

.brand-footer {
--brand-copy-offset: 55px;
}

.brand-footer .brand-logo-full {
width: min(238px, 100%);
}

.brand-footer .brand-logo-symbol {
width: 46px;
height: 46px;
}

.brand-footer .brand-copy em {
font-size: 0.67rem;
}

.footer-branding p {
max-width: 470px;
margin: 18px 0 0;
color: #7f89aa;
font-size: 0.78rem;
}

.footer-grid nav {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 12px 28px;
}

.footer-grid nav a {
color: #adb5d2;
font-size: 0.79rem;
font-weight: 680;
text-decoration: none;
}

.footer-grid nav a:hover,
.footer-grid nav a[aria-current="page"] {
color: #68ddf7;
}

.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 59px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
color: #6f7999;
font-size: 0.68rem;
gap: 20px;
}

.legal-page {
min-height: 65vh;
padding-block: 68px 100px;
background:
radial-gradient(circle at 87% 6%, rgba(74, 204, 239, 0.07), transparent 25%),
var(--page);
}

.legal-shell {
max-width: 920px;
}

.legal-article {
padding: clamp(28px, 5.5vw, 62px);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-md);
}

.legal-article h1 {
margin: 0;
font-size: clamp(2.35rem, 5vw, 4.2rem);
font-weight: 880;
letter-spacing: -0.06em;
line-height: 1;
}

.legal-intro {
margin: 16px 0 0;
color: var(--muted);
font-size: 1.02rem;
}

.legal-article h2 {
margin: 40px 0 13px;
padding-top: 28px;
border-top: 1px solid var(--line);
font-size: clamp(1.15rem, 2.2vw, 1.48rem);
letter-spacing: -0.025em;
line-height: 1.25;
}

.legal-article h1 + h2,
.legal-intro + h2 {
margin-top: 34px;
}

.legal-article p,
.legal-article address {
color: var(--muted-strong);
font-size: 0.91rem;
}

.legal-article address {
font-style: normal;
}

.legal-article code {
padding: 2px 5px;
border-radius: 5px;
background: var(--surface-strong);
color: var(--text-soft);
font-size: 0.86em;
}

.error-page {
display: grid;
place-items: center;
min-height: calc(100vh - var(--header-height));
padding-block: 60px;
background:
radial-gradient(circle at 50% 10%, rgba(77, 208, 240, 0.09), transparent 34%),
var(--page);
}

.error-card {
max-width: 760px;
padding: clamp(34px, 7vw, 76px);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow-md);
text-align: center;
}

.error-code {
display: block;
margin-bottom: 12px;
color: rgba(85, 98, 255, 0.2);
font-size: clamp(5rem, 14vw, 9rem);
font-weight: 900;
letter-spacing: -0.1em;
line-height: 0.8;
}

.error-card h1 {
margin: 0;
font-size: clamp(2rem, 5vw, 3.5rem);
letter-spacing: -0.055em;
}

.error-card > p:not(.eyebrow) {
max-width: 590px;
margin: 18px auto 26px;
color: var(--muted);
}

@media (max-width: 1120px) {
.main-nav {
gap: 20px;
}

.main-nav a {
font-size: 0.82rem;
}

.hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.88fr);
gap: 45px;
}

.metric-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calibration-results {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calibration-results div:nth-child(2) {
border-right: 0;
}

.calibration-results div:nth-child(n+3) {
padding-top: 12px;
border-top: 1px solid var(--line);
}
}

@media (max-width: 1050px) {
.main-nav {
display: none;
}

.header-inner {
grid-template-columns: minmax(0, 1fr) auto;
}
}

@media (max-width: 960px) {
:root {
--header-height: 72px;
}

.hero-grid {
grid-template-columns: 1fr;
min-height: auto;
padding-block: 66px 78px;
gap: 48px;
}

.hero-copy {
max-width: 730px;
}

.hero-dashboard {
width: min(100%, 660px);
}

.screen-visual {
width: min(74%, 420px);
}

.split-heading,
.interpreter-grid,
.knowledge-grid {
grid-template-columns: 1fr;
}

.split-heading {
gap: 18px;
}

.split-heading > p {
max-width: 720px;
}

.interpreter-grid {
gap: 48px;
}

.pixel-stack {
max-width: 650px;
}

.calibration-panel,
.monitor-panel,
.support-panel {
grid-template-columns: 1fr;
}

.calibration-workspace,
.monitor-output,
.support-preview-wrap {
border-top: 1px solid var(--line);
border-left: 0;
}

.monitor-output {
border-top-color: rgba(255, 255, 255, 0.09);
}

.sister-card {
position: relative;
top: auto;
}
}

@media (max-width: 760px) {
.shell {
width: min(calc(100% - 30px), var(--shell));
}

.brand {
--brand-copy-offset: 56px;
}

.brand-logo-full {
width: min(230px, 100%);
}

.brand-copy em {
display: none;
}

.theme-toggle {
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border-radius: 12px;
}

.theme-toggle svg {
margin: 0;
}

.theme-toggle span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}

.hero {
min-height: 0;
}

.hero-grid {
padding-block: 49px 60px;
}

.hero h1 {
font-size: clamp(2.15rem, 10.5vw, 3.5rem);
}

.hero-resolution strong {
font-size: clamp(2.85rem, 13.6vw, 4.6rem);
}

.hero-lead {
min-height: 0;
font-size: 0.98rem;
}

.hero-actions {
align-items: stretch;
}

.hero-actions > * {
flex: 1 1 210px;
}

.hero-trust {
display: grid;
gap: 8px;
}


.hero-dashboard {
padding: 22px 18px 20px;
border-radius: 28px;
}

.dashboard-values {
grid-template-columns: 1fr;
gap: 10px;
}

.dashboard-values div {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
padding-bottom: 9px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
gap: 10px;
}

.dashboard-values div:last-child {
padding-bottom: 0;
border-bottom: 0;
}

.dashboard-values dd {
margin-top: 0;
text-align: right;
}

.screen-visual {
width: min(100%, 360px);
margin-top: 28px;
}

.section,
.interpreter-section {
padding-block: 78px;
}

.section-heading {
margin-bottom: 32px;
}

.metric-grid,
.faq-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card {
min-height: 178px;
padding: 20px 18px;
}

.tool-copy,
.monitor-copy,
.support-options,
.calibration-workspace,
.monitor-output,
.support-preview-wrap {
padding: 27px 20px;
}

.calibration-stage {
min-height: 285px;
padding: 20px 5px;
}

.calibration-controls {
grid-template-columns: 1fr;
}

.calibration-controls fieldset {
grid-row: auto;
}

.calibration-controls .text-button,
.calibration-controls .action-status {
grid-column: auto;
}

.number-row {
grid-template-columns: 1fr;
gap: 7px;
}

.number-row > div {
width: 122px;
}

.monitor-map {
min-height: 275px;
}

.support-preview-wrap pre {
min-height: 290px;
}

.knowledge-section {
padding-top: 5px;
}

.footer-grid {
grid-template-columns: 1fr;
gap: 34px;
}

.footer-grid nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-bottom {
align-items: flex-start;
flex-direction: column;
justify-content: center;
padding-block: 16px;
gap: 5px;
}
}

@media (max-width: 520px) {
.shell {
width: min(calc(100% - 24px), var(--shell));
}

.brand-logo-full {
width: min(198px, 100%);
}

.hero-grid {
padding-top: 40px;
}

.hero-resolution {
margin-top: 20px;
}

.hero-resolution strong {
font-size: clamp(2.55rem, 13.7vw, 3.75rem);
}

.hero-actions,
.support-actions {
display: grid;
grid-template-columns: 1fr;
}

.dashboard-head strong {
font-size: 1.08rem;
}

.screen-visual {
margin-bottom: 21px;
}

.metric-grid,
.faq-grid {
grid-template-columns: 1fr;
}

.metric-card {
display: grid;
grid-template-columns: auto 1fr;
min-height: 0;
gap: 0 14px;
}

.metric-icon {
grid-row: span 3;
margin: 0;
}

.metric-label {
min-height: 0;
}

.metric-card strong,
.metric-card p {
grid-column: 2;
}

.pixel-stack li {
min-height: 72px;
}

.tool-panel {
border-radius: 23px;
}

.tool-number {
margin-bottom: 22px;
font-size: 3.8rem;
}

.calibration-results {
grid-template-columns: 1fr;
}

.calibration-results div,
.calibration-results div:nth-child(2) {
padding: 0 0 10px;
border-right: 0;
border-bottom: 1px solid var(--line);
}

.calibration-results div:nth-child(n+2) {
padding-top: 10px;
border-top: 0;
}

.calibration-results div:last-child {
padding-bottom: 0;
border-bottom: 0;
}

.monitor-list {
grid-template-columns: 1fr;
}

.support-preview-wrap pre {
padding: 16px;
font-size: 0.7rem;
}

.faq-item summary {
padding-left: 17px;
font-size: 0.84rem;
}

.sister-card {
padding: 25px 22px;
}

.legal-page {
padding-block: 35px 70px;
}

.legal-article {
padding: 26px 20px;
border-radius: 22px;
}

.footer-grid nav {
grid-template-columns: 1fr;
}
}

@media (max-width: 365px) {
.brand-logo-full {
display: none;
}

.brand-logo-symbol {
display: block;
}

.hero-resolution strong {
font-size: 2.48rem;
}

.resolution-times {
margin-inline: 0.12em 0.15em;
}
}

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}

@media print {
:root {
--page: #ffffff;
--surface: #ffffff;
--text: #000000;
--muted: #333333;
--line: #bbbbbb;
}

.site-header,
.site-footer,
.hero-pixel-field,
.hero-actions,
.theme-toggle,
.monitor-copy button,
.support-actions,
.text-button {
display: none !important;
}

body,
.hero,
.interpreter-section,
.monitor-panel,
.support-preview-wrap {
background: #ffffff !important;
color: #000000 !important;
}

.hero,
.section,
.interpreter-section {
min-height: 0;
padding-block: 24px;
}

.hero-grid,
.interpreter-grid,
.calibration-panel,
.monitor-panel,
.support-panel,
.knowledge-grid {
grid-template-columns: 1fr;
}

.hero-dashboard,
.metric-card,
.tool-panel,
.legal-article {
break-inside: avoid;
border: 1px solid #bbbbbb;
box-shadow: none;
}

a {
color: #000000;
text-decoration: underline;
}
}