@charset "UTF-8";

:root {
  color-scheme: dark;
  --bg: #080a0d;
  --surface: #11151b;
  --surface-2: #191e26;
  --text: #f1f4f9;
  --muted: #8a94a5;
  --line: rgba(255, 255, 255, .1);
  --accent: #a3ddff;
  --accent-soft: rgba(163, 221, 255, .08);
  --radius: 20px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
body::selection, ::selection { background: #a3ddff; color: #080a0d; }
body:has(.dialog-backdrop) { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea, a { outline-offset: 5px; }
:focus-visible { outline: 2px solid var(--accent); }
input, textarea, select { min-width: 0; }
button { color: inherit; }
img { max-width: 100%; display: block; }
svg { flex-shrink: 0; vertical-align: middle; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-weight: 500; }
ul, ol { padding-left: 1.3em; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
.icon { width: 20px; height: 20px; }
.muted { color: var(--muted); }
.eyebrow { font: 10px/1.6 var(--mono); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.price { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-160%); padding: 10px 16px; border-radius: 8px; color: #080a0d; background: var(--accent); }
.skip-link:focus { transform: translateY(0); }
.page-container { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 11px 21px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 9px; background: rgba(255, 255, 255, .03); color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; transition: background .25s, border-color .25s, transform .3s var(--ease), box-shadow .3s; }
.button .icon { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.button-primary { border-color: transparent; background: linear-gradient(135deg, #fff 0%, #e8f4fc 65%, #b9ddf1 100%); color: #111821; box-shadow: 0 1px 0 #ffffff55 inset, 0 8px 22px #00000020; }
.button-ghost { border-color: transparent; background: none; color: #c5ccd7; box-shadow: none; }
.button:disabled { opacity: .38; transform: none; }
.button-full { width: 100%; }
.button-small { min-height: 36px; padding: 7px 13px; font-size: 12px; }
.status, .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px; font-size: 10px; line-height: 1.5; color: #bec7d5; background: #ffffff03; white-space: nowrap; }
.status .icon, .chip .icon { width: 13px; height: 13px; }
.status-good { color: #a8e8ce; border-color: #a8e8ce26; background: #a8e8ce08; }
.input, input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select { display: block; width: 100%; min-height: 47px; padding: 12px 14px; color: var(--text); background: #090d12; border: 1px solid #ffffff16; border-radius: 9px; font-size: 13px; line-height: 1.5; transition: border-color .2s, box-shadow .2s; }
input::placeholder, textarea::placeholder { color: #657083; }
input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus { outline: none; border-color: #a3ddff77; box-shadow: 0 0 0 3px #a3ddff0b; }
textarea { min-height: 126px; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #b2bccb; }
.field small { color: var(--muted); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.checkbox { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--muted); }
.checkbox input { margin-top: 4px; }
.checkbox a, .form-row a, .form-note a { color: #c9e9fc; }
.form-note { font-size: 11px; line-height: 1.9; color: var(--muted); }
.form-error { padding: 11px 13px; border-radius: 8px; background: #ff7c760c; border: 1px solid #ff7c7633; color: #ffb0aa; font-size: 12px; }

/* Restrained preview chrome, kept separate from the product. */
.preview-strip { min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 5px 22px; background: #10151d; color: #8a96a9; font-size: 10px; letter-spacing: .02em; border-bottom: 1px solid #ffffff05; }
.preview-strip a, .preview-strip button { color: #cceaff; background: none; border: 0; padding: 0; font: inherit; }
.preview-strip .icon { width: 12px; height: 12px; }
.site-header { position: sticky; top: 0; z-index: 40; width: 100%; border-bottom: 1px solid #ffffff0a; background: #080a0ddc; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.header-inner { width: min(1280px, calc(100% - 96px)); min-height: 82px; display: flex; align-items: center; gap: 40px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: .1em; white-space: nowrap; }
.brand img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
.brand-mark { width: 29px; height: 30px; display: inline-grid; place-items: center; position: relative; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; height: 24px; width: 7px; transform: skew(-24deg); background: linear-gradient(180deg, #f8fcff, #90abc2); }
.brand-mark::before { left: 6px; top: 3px; }
.brand-mark::after { left: 17px; top: 3px; height: 15px; opacity: .45; }
.public-nav { display: flex; align-items: center; justify-content: center; gap: 29px; margin-inline: auto; }
.public-nav a, .public-nav button { font-size: 12px; color: #9ca6b5; transition: color .2s; background: none; border: 0; padding: 6px 0; }
.public-nav .chip { font-size: 8px; padding: 1px 5px; margin-left: 4px; color: #8894a7; }
.header-actions { display: flex; align-items: center; gap: 7px; }
.header-actions .button { min-height: 37px; padding: 8px 15px; font-size: 11px; border-radius: 7px; }
.mobile-menu { display: none; background: transparent; border: 1px solid var(--line); padding: 9px; border-radius: 8px; }
.mobile-menu-panel { background: #10151bf5; border-top: 1px solid var(--line); padding: 20px; display: grid; gap: 14px; }
.mobile-menu-panel a { padding: 7px 0; }

/* Home: editorial type, an optical metal object, and generous negative space. */
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 695px; position: relative; padding: 71px 0 85px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 8px; }
.hero-copy > .eyebrow { color: #94b2c7; font-size: 9px; letter-spacing: .2em; display: flex; align-items: center; gap: 10px; }
.hero-copy > .eyebrow::before { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px #a3ddff77; }
.hero-title { font-size: clamp(45px, 5.8vw, 76px); line-height: 1.22; letter-spacing: -.075em; font-weight: 500; margin: 28px 0 28px; color: #f0f2f5; }
.hero-title span { color: #8e98a5; }
.hero-lead { font-size: clamp(13px, 1.25vw, 16px); line-height: 1.95; color: #8e98a8; max-width: 450px; letter-spacing: .01em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 36px; }
.hero-actions .button { min-height: 49px; padding-inline: 23px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 21px; align-items: center; color: #657084; font: 9px/1.5 var(--mono); letter-spacing: .06em; margin-top: 28px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .icon { width: 12px; height: 12px; color: #839caf; }
.hero-visual { position: relative; width: 100%; min-width: 0; height: 510px; perspective: 1200px; }
.hero-visual::before { content: ""; position: absolute; inset: -10% -7%; background: radial-gradient(ellipse at 54% 52%, #7eadd716 0%, #387da008 35%, transparent 64%); pointer-events: none; }
.core-scene { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.core-object { position: absolute; z-index: 4; width: 235px; height: 310px; left: calc(50% - 117px); top: calc(50% - 169px); border-radius: 40px; background: linear-gradient(128deg, #5a6a7b 0%, #e5f1fb 2%, #9aa9b9 4%, #323d49 9%, #0e151d 23%, #576e84 49%, #c6e0f4 53%, #8da5ba 55%, #2e3c49 62%, #10171f 93%, #7e94a8 100%); padding: 3px; box-shadow: -8px 12px 0 #05070b, -10px 13px 0 #5f71813b, -17px 28px 25px #00000070, 0 0 60px #92bbdc10; transform: rotateX(12deg) rotateY(-22deg) rotateZ(17deg); animation: core-float 10s ease-in-out infinite; }
.core-object::after { content: ""; position: absolute; inset: -1px; border-radius: 40px; border: 1px solid #d9efff44; background: linear-gradient(125deg, #ffffff18, transparent 30%, transparent 65%, #b6dcff0b); pointer-events: none; }
.core-face { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; border: 1px solid #ffffff18; background: radial-gradient(ellipse at 5% -5%, #63798c3b, transparent 60%), linear-gradient(135deg, #131c27, #0a0f16 55%, #0b121b); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.core-face::before { content: ""; position: absolute; inset: 12px; border: 1px solid #a3cced0e; border-radius: 28px; }
.core-face::after { content: ""; position: absolute; inset: 0; opacity: .25; background-image: repeating-linear-gradient(0deg, transparent 0, transparent 2px, #ffffff05 3px); pointer-events: none; }
.core-emblem { width: 77px; height: 77px; display: grid; place-items: center; border-radius: 24px; position: relative; color: #c6eaff; background: linear-gradient(135deg, #26394e, #0a1019); border: 1px solid #bedfff3b; box-shadow: 0 1px 0 #d4efff33 inset, 0 15px 30px #00000070, 0 0 50px #8ecbff16; }
.core-emblem::before, .core-emblem::after { content: ""; position: absolute; transform: skew(-24deg); height: 36px; width: 10px; background: linear-gradient(180deg, #f6fdff, #95bbd8); box-shadow: 0 0 18px #91ccff20; }
.core-emblem::before { left: 26px; top: 20px; }
.core-emblem::after { left: 43px; top: 20px; height: 23px; opacity: .42; }
.core-emblem .icon { width: 37px; height: 37px; position: relative; z-index: 2; }
.core-emblem:has(.icon)::before, .core-emblem:has(.icon)::after { display: none; }
.core-face > span, .core-face > small { position: absolute; bottom: 43px; font: 8px/1.7 var(--mono); letter-spacing: .2em; color: #8babc4; }
.core-lines { position: absolute; inset: 26px; opacity: .5; background-image: linear-gradient(90deg, transparent calc(50% - .5px), #7999b322 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), #7999b322 50%, transparent calc(50% + .5px)); }
.core-lines::before, .core-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #a6c7e130, transparent); }
.core-lines::before { top: 20%; }
.core-lines::after { bottom: 20%; }
.core-orbit { position: absolute; z-index: 1; left: 50%; top: 47%; width: 470px; height: 470px; margin: -235px 0 0 -235px; border: 1px solid #a3ddff20; border-radius: 50%; transform: rotateX(67deg) rotateY(-20deg) rotateZ(-18deg); pointer-events: none; }
.core-orbit::after { content: ""; position: absolute; width: 5px; height: 5px; background: #b6e7ff; border-radius: 50%; top: 32%; left: 1%; box-shadow: 0 0 16px #a3ddff99; }
.orbit-a { border-left-color: #b8e7ff60; animation: orbit-breathe 9s ease-in-out infinite; }
.orbit-b { width: 385px; height: 385px; margin: -192px 0 0 -192px; transform: rotateX(60deg) rotateY(30deg) rotateZ(42deg); border-color: #a3ddff10; }
.orbit-b::after { top: auto; bottom: 20%; left: auto; right: 7%; width: 3px; height: 3px; opacity: .6; }
.orbit-c { width: 530px; height: 530px; margin: -265px 0 0 -265px; transform: rotateX(71deg) rotateY(16deg) rotateZ(22deg); border-style: dashed; border-color: #a3ddff0c; }
.orbit-c::after { display: none; }
.core-floor { position: absolute; z-index: 0; width: 310px; height: 95px; border-radius: 50%; background: radial-gradient(ellipse, #9bcaf923 0%, #6dbdff07 40%, transparent 70%); filter: blur(13px); left: calc(50% - 155px); bottom: 21px; transform: rotate(-8deg); }
.core-caption { position: absolute; left: 50%; bottom: 9px; display: flex; align-items: center; gap: 14px; transform: translateX(-50%); font: 9px/1.6 var(--mono); letter-spacing: .18em; color: #586a7d; white-space: nowrap; }
.core-caption::before, .core-caption::after { content: ""; width: 24px; height: 1px; background: #6e8ea43b; }
.section { position: relative; padding: 92px 0; border-top: 1px solid #ffffff0c; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 37px; }
.section-heading .eyebrow, .section-kicker { margin-bottom: 16px; }
.section-number { font: 10px/1.5 var(--mono); color: #576579; letter-spacing: .1em; }
.section-title { font-size: clamp(27px, 3.6vw, 43px); line-height: 1.4; letter-spacing: -.055em; }
.section-heading p:not(.eyebrow) { font-size: 13px; color: var(--muted); max-width: 430px; margin-top: 14px; }
.section-heading > a { flex-shrink: 0; margin-bottom: 3px; }
.intro-grid { display: grid; grid-template-columns: 1.06fr 1fr; gap: 95px; align-items: center; }
.intro-copy > p { color: var(--muted); line-height: 1.95; max-width: 380px; margin-top: 22px; font-size: 14px; }
.intro-copy .section-number { margin-bottom: 25px; display: block; }
.feature-rows { display: flex; flex-direction: column; }
.feature-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 17px; align-items: start; padding: 27px 0; border-bottom: 1px solid var(--line); }
.feature-row:first-child { padding-top: 0; }
.feature-row:last-child { border-bottom: 0; padding-bottom: 0; }
.feature-row > .icon { width: 21px; height: 21px; color: #accbe0; margin-top: 3px; }
.feature-row h3 { font-size: 15px; color: #dce2ea; margin-bottom: 8px; }
.feature-row p { font-size: 12px; color: var(--muted); line-height: 1.9; }
.feature-row .section-number { margin-top: 3px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.product-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #ffffff0e; border-radius: 17px; overflow: hidden; background: linear-gradient(160deg, #11171f, #0d1117); transition: border-color .4s, transform .45s var(--ease), box-shadow .4s; }
.product-visual { position: relative; width: 100%; aspect-ratio: 1.45; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 100%, #344b5f22 0%, transparent 70%), #10161d; }
.product-visual::after { content: ""; position: absolute; inset: 0; border-bottom: 1px solid #ffffff08; pointer-events: none; background: linear-gradient(145deg, #ffffff03, transparent 35%); }
.product-cover { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.product-visual > .chip { position: absolute; left: 18px; top: 16px; z-index: 2; background: #0d131cc4; backdrop-filter: blur(10px); color: #a5b4c5; font-family: var(--mono); font-size: 9px; border-color: #ffffff12; }
.product-art { position: relative; width: 100%; height: 100%; min-height: 160px; display: grid; place-items: center; perspective: 700px; }
.product-art::before { content: ""; position: absolute; width: 180px; height: 70px; left: calc(50% - 90px); bottom: 0; background: #578bb91c; border-radius: 50%; filter: blur(28px); }
.file-sculpture { position: relative; width: 91px; height: 118px; border-radius: 12px; transform: rotateY(-22deg) rotateX(13deg) rotateZ(14deg); background: linear-gradient(125deg, #a9becf 0%, #344e66 3%, #142535 13%, #172330 65%, #839aae 98%, #d4e4ee 100%); border: 1px solid #c9e7fb60; box-shadow: -5px 5px 0 #17202b, -6px 6px 0 #6f839a77, -10px 10px 0 #0b111a, -11px 11px 0 #66788860, -19px 25px 24px #0008; display: grid; place-items: center; transition: transform .6s var(--ease); }
.file-sculpture::before { content: ""; position: absolute; inset: 7px; border: 1px solid #a8cced18; border-radius: 6px; }
.file-sculpture > .icon { width: 31px; height: 31px; color: #c5e8ff; stroke-width: 1; }
.file-spine { position: absolute; left: 13px; bottom: 12px; height: 2px; width: 23px; background: #b6d1e35c; box-shadow: 0 -5px #b6d1e31c; }
.file-label { position: absolute; right: 12px; bottom: 12px; font: 7px/1 var(--mono); color: #96bdd6; letter-spacing: .1em; }
.product-card:nth-child(3n+2) .file-sculpture { transform: rotateY(-24deg) rotateX(9deg) rotateZ(-12deg); background: linear-gradient(125deg, #d9e1e5 0%, #697784 3%, #303e49 13%, #18232b 70%, #9babb6 98%, #d4e4ee 100%); }
.product-card:nth-child(3n+2) .product-art::before { background: #c9e3ed12; }
.product-card:nth-child(3n+3) .file-sculpture { transform: rotateY(17deg) rotateX(13deg) rotateZ(12deg); background: linear-gradient(125deg, #aeaccf 0%, #414760 3%, #222b3d 13%, #182030 65%, #8391ae 98%, #d7dfed 100%); }
.product-info { padding: 24px; display: flex; flex-direction: column; flex: 1; gap: 11px; }
.product-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #6f8094; font: 9px/1.6 var(--mono); letter-spacing: .04em; }
.product-info h3 { font-size: 17px; letter-spacing: -.02em; color: #e4eaf1; }
.product-info > p { font-size: 12px; color: var(--muted); line-height: 1.9; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #ffffff0a; margin-top: auto; padding-top: 18px; padding-bottom: 1px; }
.product-info > .product-bottom { margin-top: 13px; }
.product-bottom .price { font-size: 14px; font-weight: 500; color: #c9d5df; }
.product-bottom .price small, .product-bottom .price span { font-size: 9px; color: var(--muted); margin-left: 4px; font-weight: 400; }
.product-bottom > .icon { width: 16px; height: 16px; color: #93b3ca; transition: transform .3s; }
.product-bottom a { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #b0c5d5; }
.membership-section { padding-block: 98px; }
.membership-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 88px; align-items: center; }
.membership-copy .section-title { font-size: clamp(35px, 4.3vw, 55px); }
.membership-copy > .eyebrow { margin-bottom: 22px; }
.membership-copy > p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.95; max-width: 370px; margin-top: 24px; }
.membership-copy .membership-note { color: #5e6f81; font-size: 11px; margin-top: 40px; }
.membership-card { position: relative; padding: 36px; border: 1px solid #93b7cf28; border-radius: 20px; background: radial-gradient(ellipse at 100% 0%, #7bafd11a, transparent 60%), linear-gradient(145deg, #141c26, #0e141c); box-shadow: 0 16px 60px #0003, 0 1px 0 #c2e9ff14 inset; overflow: hidden; }
.membership-card::before { content: ""; position: absolute; width: 120px; height: 1px; top: 0; left: 28px; background: linear-gradient(90deg, transparent, #d0ecffb3, transparent); }
.membership-card > .eyebrow { color: #9db6ca; font-size: 9px; letter-spacing: .17em; }
.membership-card h3 { font-size: 16px; margin: 14px 0 0; color: #d9e5ee; }
.membership-price { margin-top: 17px; color: #f2f6fa; font-size: clamp(46px, 4.8vw, 64px); line-height: 1.15; letter-spacing: -.065em; font-weight: 400; font-variant-numeric: tabular-nums; }
.membership-price span, .membership-price small { font-size: 12px; letter-spacing: .04em; color: #8ba0b3; margin-left: 8px; font-weight: 400; }
.membership-card > p { font-size: 11px; color: #8092a4; margin-top: 10px; }
.benefit-list { list-style: none; padding: 23px 0 26px; margin: 23px 0 0; border-top: 1px solid #b5d6ec1c; display: flex; flex-direction: column; gap: 14px; }
.benefit-list li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #a8b9c8; }
.benefit-list .icon { width: 14px; height: 14px; color: #a2cce6; }
.membership-card > .button { width: 100%; }
.membership-card .form-note { text-align: center; margin-top: 15px; color: #6c7d8f; }
.api-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-bottom: 100px; }
.api-teaser-copy .eyebrow { margin-bottom: 20px; }
.api-teaser-copy h2 { font-size: clamp(29px, 3.5vw, 43px); letter-spacing: -.05em; line-height: 1.4; }
.api-teaser-copy > p { color: var(--muted); margin-top: 20px; max-width: 370px; font-size: 13px; line-height: 1.9; }
.api-teaser-copy .button { margin-top: 25px; padding-left: 0; }
.api-code { padding: 25px 30px; border: 1px solid #ffffff0e; border-radius: 15px; background: linear-gradient(135deg, #11171e, #0c1016); box-shadow: 0 20px 40px #0002; transform: perspective(1000px) rotateY(-4deg) rotateX(2deg); }
.api-code-header { display: flex; gap: 6px; align-items: center; padding-bottom: 19px; border-bottom: 1px solid var(--line); color: #69798b; font: 10px/1.5 var(--mono); }
.api-code-header > span { margin-left: auto; }
.api-code-header i { width: 6px; height: 6px; background: #37414f; border-radius: 50%; }
.api-code pre { font: 11px/2 var(--mono); color: #8b9cad; margin: 23px 0 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.api-code code { font: inherit; }
.api-code .code-key, .api-code .key { color: #accce2; }
.api-code .code-value, .api-code .value { color: #a7bca5; }
.api-code .code-comment, .api-code .comment { color: #4e6073; }
.faq-list { max-width: 800px; margin-left: auto; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-size: 14px; color: #d2dce8; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: #7d93a8; font: 20px/1 var(--font); font-weight: 300; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin-top: 17px; max-width: 670px; color: var(--muted); font-size: 12px; line-height: 1.95; }
.site-footer { padding-top: 49px; border-top: 1px solid #ffffff0c; background: #06080a; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; align-items: start; padding-bottom: 43px; }
.footer-top > div > p { color: #5b6a7a; font-size: 11px; margin-top: 15px; max-width: 290px; }
.footer-links { display: flex; gap: 50px; }
.footer-links > div { display: flex; flex-direction: column; gap: 10px; }
.footer-links h4 { font-size: 10px; font-weight: 500; color: #a0adbc; margin-bottom: 3px; }
.footer-links a, .footer-top nav a { color: #607082; font-size: 11px; }
.footer-top nav { display: flex; gap: 26px; align-items: center; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid #ffffff08; padding: 20px 0; color: #455263; font-size: 10px; }
.footer-bottom span:last-child { font: 9px/1.7 var(--mono); letter-spacing: .05em; }

/* Sign-in and membership enrollment. */
.auth-layout { min-height: min(760px, 90vh); display: grid; grid-template-columns: 1.05fr 1fr; width: min(1140px, calc(100% - 96px)); margin: 65px auto 85px; border: 1px solid #ffffff10; border-radius: 24px; overflow: hidden; background: #0c1015; }
.auth-art { position: relative; padding: 49px; overflow: hidden; background: radial-gradient(ellipse at 30% 70%, #28435a33, transparent 65%), linear-gradient(145deg, #131e2a, #0a1018 70%); border-right: 1px solid #ffffff0e; display: flex; flex-direction: column; }
.auth-art > .eyebrow { font-size: 9px; color: #809db6; }
.auth-art h1, .auth-art h2 { margin-top: 34px; font-size: clamp(30px, 3vw, 40px); line-height: 1.5; letter-spacing: -.05em; }
.auth-art > p:not(.eyebrow) { color: #758aa0; font-size: 13px; line-height: 1.9; margin-top: 22px; max-width: 310px; }
.auth-art .hero-visual { height: 310px; margin-top: 10px; }
.auth-art .core-scene { transform: scale(.72); transform-origin: 50% 40%; }
.auth-art .core-caption { display: none; }
.auth-art .core-orbit { opacity: .4; }
.auth-points { margin-top: auto; padding-top: 25px; display: flex; gap: 20px; font: 9px/1.6 var(--mono); color: #58718a; letter-spacing: .04em; }
.auth-content { padding: 55px 52px; display: flex; flex-direction: column; justify-content: center; }
.auth-form { display: flex; flex-direction: column; gap: 22px; }
.form-heading { margin-bottom: 8px; }
.form-heading .eyebrow { font-size: 9px; color: #6f8b9f; margin-bottom: 17px; }
.form-heading h1, .form-heading h2 { font-size: 29px; letter-spacing: -.045em; line-height: 1.4; }
.form-heading > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 13px; }
.auth-form .form-row { font-size: 11px; }
.auth-form > .form-note { text-align: center; }
.auth-form > .button { width: 100%; margin-top: 3px; }
.auth-form .divider { display: flex; align-items: center; gap: 15px; color: #4f5e6f; font-size: 10px; margin-block: 5px; }
.auth-form .divider::before, .auth-form .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-form .continue-link { color: #819bb0; font-size: 11px; text-align: center; }
.onboard-layout { display: grid; grid-template-columns: 1.4fr .85fr; gap: 100px; max-width: 1050px; margin: 61px auto 90px; align-items: start; }
.onboard-form { padding: 0; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.stepper { display: flex; align-items: center; gap: 19px; margin-bottom: 17px; }
.step-item { display: inline-flex; align-items: center; gap: 8px; color: #536174; font-size: 10px; white-space: nowrap; }
.step-item > span:first-child { width: 21px; height: 21px; border: 1px solid #ffffff16; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 9px/1 var(--mono); }
.step-item.active, .step-item.is-active { color: #c0dcec; }
.step-item.active > span:first-child, .step-item.is-active > span:first-child { background: #a3ddff12; border-color: #a3ddff44; }
.step-item.complete { color: #8aafa5; }
.stepper > .icon { width: 12px; height: 12px; color: #354253; }
.onboard-form .form-heading { margin-bottom: 3px; }
.onboard-form .form-heading h1 { font-size: 35px; }
.onboard-form > .button { width: 100%; }
.onboard-summary { padding: 30px; border: 1px solid #adcce322; border-radius: 18px; background: radial-gradient(ellipse at 100% 0%, #6babc514, transparent 60%), #101720; }
.onboard-summary h2 { font-size: 17px; margin: 13px 0 17px; }
.onboard-summary .membership-price { font-size: 47px; }
.onboard-summary .benefit-list { padding-bottom: 5px; }
.onboard-summary > p { color: #778a9c; font-size: 11px; line-height: 1.95; margin-top: 17px; }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; padding: 11px 0; color: #9badbe; border-bottom: 1px solid #ffffff0a; }
.summary-row span:first-child { color: #63768a; }
.payment-layout { max-width: 1040px; margin: 53px auto 85px; display: grid; grid-template-columns: 1.35fr .8fr; gap: 62px; align-items: start; }
.payment-layout > .form-heading, .payment-layout > .stepper { grid-column: 1 / -1; }
.payment-card { background: linear-gradient(140deg, #151d28, #0e141c 60%); border: 1px solid #a8c8df23; border-radius: 20px; padding: 33px; box-shadow: 0 20px 80px #0002; }
.payment-card > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.payment-card h2 { font-size: 16px; }
.payment-amount { text-align: center; padding: 30px 0 25px; }
.payment-amount > p, .payment-amount > span:first-child { color: #8295a8; font-size: 11px; }
.payment-amount .price, .payment-amount strong { display: block; font-size: 57px; font-weight: 400; line-height: 1.2; margin-top: 8px; letter-spacing: -.065em; }
.payment-amount small { font-size: 12px; color: #9bb1c5; letter-spacing: .02em; margin-left: 7px; }
.payment-network { display: inline-flex; gap: 7px; align-items: center; justify-content: center; border: 1px solid #b8e7ff20; background: #a3ddff08; color: #a2c9e1; font: 10px/1.6 var(--mono); padding: 4px 9px; border-radius: 5px; margin-top: 14px; }
.payment-address { display: flex; gap: 23px; align-items: center; padding: 22px 0; border-top: 1px solid #ffffff0a; border-bottom: 1px solid #ffffff0a; margin-bottom: 24px; }
.payment-address > div:last-child { min-width: 0; display: flex; flex-direction: column; align-items: start; gap: 9px; }
.payment-address label, .payment-address p { font-size: 11px; color: #7890a4; }
.payment-address code { font: 11px/1.6 var(--mono); color: #6d8194; overflow-wrap: anywhere; }
.payment-address .button { min-height: 34px; padding: 7px 11px; font-size: 10px; }
.qr-placeholder { width: 110px; height: 110px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: #070c12; border: 1px dashed #abcde229; border-radius: 8px; flex-shrink: 0; color: #647c92; font-size: 9px; }
.qr-placeholder .icon { width: 29px; height: 29px; opacity: .7; }
.payment-card > .button { width: 100%; }
.payment-card > .form-note { text-align: center; margin-top: 15px; }
.payment-status { font-size: 11px; color: #8197ac; padding: 13px; border: 1px solid #a4d0ee13; border-radius: 7px; background: #a3ddff04; margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.payment-status .icon { width: 14px; height: 14px; color: #a3c8e1; }
.payment-status.confirming .icon { animation: pulse 2s ease-in-out infinite; }
.order-summary { padding: 25px 0; }
.order-summary > .eyebrow { margin-bottom: 18px; }
.order-summary h2 { font-size: 20px; margin-bottom: 21px; }
.order-summary dl { font-size: 12px; margin: 0; }
.order-summary dl > div { display: flex; justify-content: space-between; gap: 17px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.order-summary dt { color: #6e8296; }
.order-summary dd { text-align: right; margin: 0; color: #bdcbd7; }
.order-summary > p { margin-top: 24px; font-size: 11px; color: #6e8296; line-height: 1.95; }
.order-summary .button { margin-top: 16px; padding-left: 0; }
.preview-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 20px 0 0; font-size: 10px; color: #596f83; }
.preview-controls > span { margin-right: 5px; }
.preview-controls button { border: 1px solid #ffffff13; background: #ffffff03; color: #8da6bb; border-radius: 6px; padding: 7px 9px; font-size: 10px; }
.preview-controls button.active { border-color: #a3ddff44; color: #c1e2f6; }
.success-page { min-height: 640px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 19px; padding: 75px 24px 85px; position: relative; overflow: hidden; }
.success-page::before { content: ""; position: absolute; top: 40px; left: calc(50% - 190px); width: 380px; height: 380px; background: radial-gradient(circle, #8bcff513, transparent 65%); pointer-events: none; }
.success-orb { position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(135deg, #182b3a, #0b141c); border: 1px solid #b6e3ff42; box-shadow: 0 1px 0 #edfbff33 inset, 0 0 60px #a3ddff15; margin-bottom: 12px; color: #c5eaff; }
.success-orb::before, .success-orb::after { content: ""; position: absolute; inset: -15px; border: 1px solid #a3ddff10; border-radius: 50%; }
.success-orb::after { inset: -30px; border-color: #a3ddff06; }
.success-orb .icon { width: 30px; height: 30px; stroke-width: 1.6; }
.success-page h1 { font-size: clamp(30px, 4vw, 45px); line-height: 1.4; letter-spacing: -.055em; }
.success-page > p:not(.eyebrow) { color: var(--muted); font-size: 13px; max-width: 390px; line-height: 1.9; }
.success-receipt { width: min(360px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 23px; margin: 8px 0; background: #101720; border: 1px solid #b9d8ec17; border-radius: 11px; font-size: 12px; text-align: left; }
.success-receipt span { color: #6d8498; }
.success-receipt strong { text-align: right; font-weight: 400; color: #c9dce9; }
.success-page > .button { min-width: 230px; }

/* Catalog and the product story. */
.catalog-hero { padding: 70px 0 38px; }
.catalog-hero h1 { font-size: clamp(36px, 5vw, 60px); letter-spacing: -.065em; line-height: 1.35; margin: 22px 0 23px; }
.catalog-hero > p:not(.eyebrow) { color: var(--muted); max-width: 560px; font-size: 14px; line-height: 1.9; }
.catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 20px 0 35px; padding: 21px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.search-field { position: relative; width: 250px; flex-shrink: 0; }
.search-field > .icon { position: absolute; width: 16px; height: 16px; left: 13px; top: 50%; transform: translateY(-50%); color: #6e8093; }
.search-field input { min-height: 40px !important; padding: 10px 13px 10px 37px !important; font-size: 12px !important; background: #0d131a !important; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chips button { border: 1px solid transparent; background: none; color: #75899d; padding: 7px 13px; border-radius: 6px; font-size: 11px; }
.filter-chips button[aria-pressed=true], .filter-chips button.active { border-color: #a3ddff26; background: #a3ddff09; color: #bcdcf0; }
.catalog-page { padding-bottom: 90px; }
.catalog-empty { padding: 75px 20px; text-align: center; color: #718498; border: 1px dashed var(--line); border-radius: 15px; }
.catalog-empty h3 { color: #bdccd9; margin-top: 16px; }
.catalog-empty p { font-size: 12px; margin-top: 9px; }
.catalog-empty .icon { width: 30px; height: 30px; }
.product-detail { padding-top: 34px; }
.detail-breadcrumb { display: flex; align-items: center; gap: 8px; color: #5f7488; font-size: 11px; margin-bottom: 33px; flex-wrap: wrap; }
.detail-breadcrumb .icon { width: 11px; height: 11px; }
.detail-breadcrumb span:last-child { color: #a2b5c5; }
.detail-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 65px; align-items: start; padding-bottom: 66px; }
.detail-visual { position: relative; border: 1px solid #a2c4e01c; border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, #38546e32, transparent 70%), linear-gradient(140deg, #131d28, #0c121b); aspect-ratio: 1.1; display: grid; place-items: center; }
.detail-visual .product-visual { height: 100%; aspect-ratio: auto; background: none; }
.detail-visual .product-visual::after { border: 0; }
.detail-visual .product-art { min-height: 100%; }
.detail-visual .file-sculpture { width: 164px; height: 215px; border-radius: 20px; }
.detail-visual .file-sculpture .icon { width: 58px; height: 58px; }
.detail-visual .file-label { font-size: 10px; bottom: 24px; right: 24px; }
.detail-visual .file-spine { left: 24px; bottom: 24px; width: 35px; }
.detail-visual .file-sculpture::before { inset: 13px; border-radius: 11px; }
.detail-visual > .product-cover { height: 100%; object-fit: cover; }
.detail-visual .chip { position: absolute; top: 20px; left: 20px; font-family: var(--mono); font-size: 10px; }
.detail-info { padding-top: 11px; }
.detail-info h1 { font-size: clamp(27px, 3.4vw, 43px); line-height: 1.45; letter-spacing: -.045em; margin: 18px 0; }
.detail-info > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.95; }
.detail-price { font-size: 29px; letter-spacing: -.04em; margin: 26px 0 19px; color: #d9e8f4; }
.detail-price span, .detail-price small { font-size: 11px; letter-spacing: 0; color: #748b9e; margin-left: 6px; }
.detail-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 25px; padding: 21px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.detail-specs > div { display: flex; justify-content: space-between; gap: 14px; font-size: 11px; }
.detail-specs dt, .detail-specs span:first-child { color: #647c90; }
.detail-specs dd { margin: 0; color: #bacbd9; }
.detail-info > .button { width: 100%; margin-bottom: 13px; }
.detail-info .form-note { font-size: 10px; text-align: center; color: #5e778d; }
.detail-info .detail-actions { display: flex; gap: 10px; }
.detail-info .detail-actions .button { flex: 1; }
.detail-body { display: grid; grid-template-columns: 1.65fr 1fr; gap: 80px; border-top: 1px solid var(--line); padding: 46px 0 80px; }
.detail-section { margin-bottom: 40px; }
.detail-section h2 { font-size: 20px; letter-spacing: -.025em; margin-bottom: 20px; }
.detail-section p { color: #889bae; font-size: 13px; line-height: 2.1; white-space: pre-line; overflow-wrap: anywhere; }
.detail-section > .eyebrow { margin-bottom: 16px; font-size: 9px; color: #556f85; }
.detail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.detail-list li { display: flex; align-items: start; gap: 11px; font-size: 12px; color: #8fa4b8; }
.detail-list .icon { width: 15px; height: 15px; color: #b6d9ee; margin-top: 3px; }
.detail-sidebar { border: 1px solid #ffffff0d; border-radius: 12px; padding: 24px; background: #0e141b; align-self: start; }
.detail-sidebar h3 { font-size: 14px; margin-bottom: 17px; }
.detail-sidebar p { font-size: 11px; color: #728a9f; line-height: 1.95; margin-bottom: 14px; }
.detail-sidebar > .button { width: 100%; margin-top: 8px; font-size: 11px; }
.sticky-purchase { display: none; }
.empty-state { padding: 65px 24px; text-align: center; color: #7891a6; }
.empty-state .icon { width: 35px; height: 35px; margin-bottom: 19px; }
.empty-state h2 { color: #c3d5e3; font-size: 24px; margin-bottom: 13px; }
.empty-state p { font-size: 13px; margin-bottom: 25px; }

/* Supporting interactions. */
.toast { position: fixed; z-index: 110; left: 50%; bottom: 30px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 36px); padding: 14px 19px; border: 1px solid #b7d8ec33; border-radius: 10px; color: #d5e9f7; background: #17222eed; backdrop-filter: blur(20px); box-shadow: 0 8px 40px #0008; font-size: 12px; line-height: 1.7; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: #03070bd6; backdrop-filter: blur(16px); }
.dialog-panel { position: relative; width: min(480px, 100%); max-height: 85dvh; overflow-y: auto; padding: 34px; border: 1px solid #a6cee336; border-radius: 18px; background: linear-gradient(145deg, #182330, #0e161f); box-shadow: 0 40px 140px #0008; }
.dialog-panel h2 { font-size: 23px; margin-bottom: 18px; }
.dialog-panel p { color: #96aabc; font-size: 13px; line-height: 1.95; }
.dialog-panel form { display: flex; flex-direction: column; gap: 20px; }
.dialog-panel > button:first-child, .dialog-close { position: absolute; right: 13px; top: 13px; padding: 7px; background: none; border: 0; color: #8fa5b9; }
.dialog-actions { display: flex; gap: 10px; margin-top: 24px; }
.dialog-actions .button { flex: 1; }
.reveal { opacity: 1; transform: none; }
.js-motion .reveal { opacity: 0; transform: translateY(23px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js-motion .reveal.is-visible { opacity: 1; transform: translateY(0); }
.page-enter { animation: page-in .5s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes core-float { 0%, 100% { transform: translateY(0) rotateX(12deg) rotateY(-22deg) rotateZ(17deg); } 50% { transform: translateY(-13px) rotateX(16deg) rotateY(-16deg) rotateZ(14deg); } }
@keyframes orbit-breathe { 0%, 100% { opacity: .6; transform: rotateX(67deg) rotateY(-20deg) rotateZ(-18deg); } 50% { opacity: 1; transform: rotateX(64deg) rotateY(-13deg) rotateZ(-10deg); } }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover { border-color: #a3ddff5c; background-color: #a3ddff0a; transform: translateY(-2px); }
  .button-primary:not(:disabled):hover { box-shadow: 0 0 26px #b8e6ff1a, 0 1px 0 #fff9 inset; border-color: #e3f5ff; }
  .button:not(:disabled):hover > .icon { transform: translateX(2px); }
  .button-ghost:not(:disabled):hover { background: none; color: #e2f1fb; border-color: transparent; }
  .public-nav a:hover, .public-nav button:hover, .footer-links a:hover, .footer-top nav a:hover { color: #e3f3ff; }
  .product-card:hover { transform: translateY(-6px); border-color: #adcfe63b; box-shadow: 0 18px 45px #0003; }
  .product-card:hover .file-sculpture { transform: translateY(-6px) rotateY(-12deg) rotateX(9deg) rotateZ(9deg); }
  .product-card:hover .product-cover { transform: scale(1.045); }
  .product-card:hover .product-bottom > .icon { transform: translate(2px, -2px); }
  .filter-chips button:hover { color: #d0e6f4; }
}

@media (min-width: 1550px) {
  .hero { min-height: 760px; }
  .hero-title { font-size: 82px; }
  .hero-visual { transform: scale(1.08); }
}
@media (max-width: 1120px) {
  .page-container, .header-inner { width: calc(100% - 64px); }
  .header-inner { gap: 25px; }
  .public-nav { gap: 20px; }
  .hero { min-height: 620px; padding-block: 60px; }
  .hero-visual { height: 460px; }
  .core-scene { transform: scale(.91); }
  .hero-title { font-size: clamp(42px, 5.8vw, 64px); }
  .section { padding-block: 75px; }
  .intro-grid { gap: 60px; }
  .membership-layout { gap: 65px; }
  .api-teaser { gap: 45px; }
  .product-info { padding: 20px; }
  .product-grid { gap: 18px; }
  .auth-layout { width: calc(100% - 64px); }
  .auth-art, .auth-content { padding: 37px; }
  .onboard-layout { gap: 60px; }
  .payment-layout { gap: 45px; }
  .detail-grid { gap: 40px; }
  .detail-body { gap: 55px; }
}
@media (max-width: 900px) {
  .header-inner { gap: 20px; min-height: 75px; }
  .brand { font-size: 12px; gap: 7px; }
  .public-nav { gap: 17px; }
  .public-nav a, .public-nav button { font-size: 11px; }
  .public-nav .chip { display: none; }
  .header-actions .button { padding: 8px 12px; font-size: 10px; }
  .hero { min-height: 575px; }
  .hero-title { font-size: 47px; }
  .hero-visual { height: 410px; }
  .core-scene { transform: scale(.78); }
  .hero-lead { font-size: 13px; }
  .hero-actions { gap: 5px; }
  .hero-actions .button { padding-inline: 17px; font-size: 12px; }
  .hero-meta { gap: 11px; font-size: 8px; }
  .intro-grid { gap: 40px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .product-grid > .product-card:last-child:nth-child(3) { display: none; }
  .catalog-page .product-grid > .product-card:last-child:nth-child(3), .dash-catalog .product-grid > .product-card:last-child:nth-child(3) { display: flex; }
  .membership-layout { gap: 45px; }
  .membership-card { padding: 28px; }
  .api-teaser { gap: 35px; }
  .api-code { padding: 20px; }
  .api-code pre { font-size: 10px; }
  .auth-layout { grid-template-columns: .9fr 1fr; margin-top: 40px; min-height: 620px; }
  .auth-art, .auth-content { padding: 32px; }
  .auth-art h1, .auth-art h2 { font-size: 29px; }
  .auth-art .hero-visual { height: 280px; }
  .auth-art .core-scene { transform: scale(.62); }
  .onboard-layout { gap: 40px; grid-template-columns: 1.25fr .9fr; }
  .onboard-summary { padding: 24px; }
  .onboard-summary .membership-price { font-size: 40px; }
  .onboard-form .form-heading h1 { font-size: 30px; }
  .form-grid { grid-template-columns: 1fr; gap: 20px; }
  .payment-layout { gap: 35px; grid-template-columns: 1.3fr .8fr; }
  .payment-card { padding: 24px; }
  .payment-address { gap: 16px; }
  .qr-placeholder { width: 93px; height: 100px; }
  .detail-grid { gap: 32px; }
  .detail-visual .file-sculpture { width: 130px; height: 175px; }
  .detail-specs { grid-template-columns: 1fr; }
  .detail-body { gap: 35px; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 88px; }
  .page-container, .header-inner { width: calc(100% - 40px); }
  .preview-strip { justify-content: space-between; padding: 5px 20px; font-size: 9px; gap: 10px; }
  .preview-strip span:nth-child(2) { display: none; }
  .header-inner { min-height: 68px; gap: 13px; }
  .brand { margin-right: auto; }
  .public-nav { display: none; }
  .header-actions { margin-left: auto; gap: 0; }
  .header-actions .button-ghost { display: none; }
  .mobile-menu { display: inline-flex; align-items: center; justify-content: center; }
  .mobile-menu .icon { width: 17px; height: 17px; }
  .hero { grid-template-columns: 1fr; padding: 48px 0 35px; min-height: auto; }
  .hero-copy { padding-bottom: 0; }
  .hero-copy > .eyebrow { font-size: 8px; letter-spacing: .15em; }
  .hero-title { font-size: clamp(43px, 8vw, 60px); line-height: 1.24; margin: 25px 0 22px; letter-spacing: -.065em; }
  .hero-lead { font-size: 13px; line-height: 1.95; max-width: 370px; }
  .hero-actions { margin-top: 27px; gap: 7px; }
  .hero-actions .button { min-height: 46px; }
  .hero-meta { margin-top: 23px; gap: 18px; font-size: 8px; }
  .hero-visual { height: 385px; max-width: 490px; margin: 0 auto; }
  .core-scene { transform: scale(.79); transform-origin: 50% 45%; }
  .core-caption { bottom: -15px; }
  .core-floor { bottom: 0; }
  .section { padding-block: 57px; }
  .section-heading { align-items: start; gap: 20px; margin-bottom: 28px; }
  .section-heading .button { min-height: 36px; font-size: 10px; padding: 7px 0 7px 8px; margin-top: 20px; }
  .section-title { font-size: 29px; line-height: 1.45; letter-spacing: -.045em; }
  .section-heading .eyebrow, .section-kicker { font-size: 8px; margin-bottom: 13px; }
  .section-heading p:not(.eyebrow) { font-size: 12px; }
  .intro-grid { grid-template-columns: 1fr; gap: 37px; }
  .intro-copy > p { font-size: 13px; margin-top: 18px; max-width: 440px; }
  .intro-copy .section-number { margin-bottom: 18px; }
  .feature-row { padding: 22px 0; grid-template-columns: 28px 1fr auto; gap: 13px; }
  .feature-row h3 { font-size: 14px; }
  .feature-row p { font-size: 12px; }
  .product-grid { gap: 15px; }
  .product-info { padding: 17px; }
  .product-info h3 { font-size: 15px; }
  .product-info > p { font-size: 11px; }
  .product-info > .product-bottom { margin-top: 7px; }
  .product-meta { font-size: 8px; }
  .product-bottom .price { font-size: 12px; }
  .product-visual { aspect-ratio: 1.25; }
  .product-art { min-height: 140px; }
  .file-sculpture { transform: rotateY(-22deg) rotateX(13deg) rotateZ(14deg) scale(.85); }
  .product-card:nth-child(3n+2) .file-sculpture { transform: rotateY(-24deg) rotateX(9deg) rotateZ(-12deg) scale(.85); }
  .product-card:nth-child(3n+3) .file-sculpture { transform: rotateY(17deg) rotateX(13deg) rotateZ(12deg) scale(.85); }
  .product-visual > .chip { top: 12px; left: 12px; font-size: 8px; padding: 3px 6px; }
  .membership-layout { grid-template-columns: 1fr; gap: 33px; }
  .membership-copy .section-title { font-size: 38px; }
  .membership-copy > .eyebrow { margin-bottom: 16px; font-size: 8px; }
  .membership-copy > p:not(.eyebrow) { margin-top: 18px; font-size: 13px; max-width: 430px; }
  .membership-copy .membership-note { margin-top: 20px; }
  .membership-card { padding: 29px; max-width: 480px; width: 100%; }
  .membership-price { font-size: 56px; }
  .api-teaser { grid-template-columns: 1fr; gap: 30px; }
  .api-teaser-copy h2 { font-size: 31px; }
  .api-teaser-copy > p { font-size: 12px; }
  .api-code { transform: none; padding: 24px; }
  .api-code pre { font-size: 11px; }
  .faq-list details { padding-block: 19px; }
  .faq-list summary { font-size: 13px; }
  .faq-list details p { font-size: 12px; }
  .site-footer { padding-top: 35px; }
  .footer-top { gap: 25px; flex-direction: column; padding-bottom: 30px; }
  .footer-top nav { gap: 20px; flex-wrap: wrap; }
  .footer-links { gap: 60px; }
  .footer-bottom { font-size: 9px; }
  .footer-bottom span:last-child { font-size: 8px; }
  .auth-layout { width: calc(100% - 40px); margin: 29px auto 50px; grid-template-columns: 1fr; min-height: 0; border-radius: 16px; }
  .auth-art { padding: 29px; border-right: 0; border-bottom: 1px solid var(--line); min-height: 195px; }
  .auth-art h1, .auth-art h2 { margin-top: 17px; font-size: 27px; max-width: 290px; }
  .auth-art > p:not(.eyebrow) { font-size: 11px; margin-top: 13px; max-width: 270px; }
  .auth-art .hero-visual { position: absolute; width: 180px; height: 180px; right: -40px; top: 5px; opacity: .4; pointer-events: none; }
  .auth-art .core-scene { transform: scale(.39); transform-origin: 50% 40%; }
  .auth-points { display: none; }
  .auth-content { padding: 29px; }
  .auth-form { gap: 21px; }
  .form-heading h1, .form-heading h2 { font-size: 26px; }
  .form-heading .eyebrow { font-size: 8px; margin-bottom: 12px; }
  .auth-form > .form-note { font-size: 11px; }
  .onboard-layout { grid-template-columns: 1fr; gap: 32px; margin: 35px auto 55px; }
  .stepper { gap: 12px; margin-bottom: 6px; }
  .step-item { font-size: 9px; gap: 6px; }
  .step-item > span:first-child { width: 19px; height: 19px; font-size: 8px; }
  .stepper > .icon { width: 9px; height: 9px; }
  .onboard-form .form-heading h1 { font-size: 30px; }
  .onboard-summary { padding: 27px; }
  .onboard-summary .membership-price { font-size: 46px; }
  .onboard-summary .benefit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 10px; }
  .onboard-summary .benefit-list li { font-size: 11px; gap: 6px; }
  .payment-layout { grid-template-columns: 1fr; gap: 28px; margin: 33px auto 55px; }
  .payment-layout > .form-heading, .payment-layout > .stepper { grid-column: auto; }
  .payment-card { padding: 25px; }
  .payment-amount strong, .payment-amount .price { font-size: 54px; }
  .payment-address { gap: 21px; }
  .qr-placeholder { width: 103px; height: 107px; }
  .order-summary { padding: 2px 5px; }
  .order-summary h2 { font-size: 18px; }
  .preview-controls { gap: 7px; }
  .preview-controls > span { width: 100%; margin-bottom: 3px; }
  .success-page { min-height: 580px; padding: 65px 22px; }
  .success-page h1 { font-size: 31px; }
  .success-page > p:not(.eyebrow) { font-size: 12px; }
  .catalog-hero { padding: 44px 0 23px; }
  .catalog-hero h1 { font-size: 39px; margin: 18px 0; }
  .catalog-hero > p:not(.eyebrow) { font-size: 13px; }
  .catalog-controls { align-items: stretch; flex-direction: column; gap: 17px; margin: 12px 0 27px; padding-block: 17px; }
  .search-field { width: 100%; }
  .filter-chips { gap: 4px; }
  .filter-chips button { font-size: 10px; padding: 6px 10px; }
  .catalog-page { padding-bottom: 55px; }
  .product-detail { padding-top: 25px; }
  .detail-breadcrumb { font-size: 10px; margin-bottom: 24px; }
  .detail-grid { grid-template-columns: 1fr; gap: 27px; padding-bottom: 37px; }
  .detail-visual { aspect-ratio: 1.3; border-radius: 15px; }
  .detail-visual .file-sculpture { width: 133px; height: 177px; transform: rotateY(-22deg) rotateX(13deg) rotateZ(14deg); }
  .detail-visual .file-sculpture .icon { width: 46px; height: 46px; }
  .detail-info { padding-top: 0; }
  .detail-info h1 { font-size: 31px; margin: 14px 0; }
  .detail-price { font-size: 27px; margin: 21px 0 15px; }
  .detail-specs { grid-template-columns: 1fr 1fr; margin-bottom: 23px; gap: 13px 22px; }
  .detail-specs > div { font-size: 10px; }
  .detail-body { grid-template-columns: 1fr; gap: 20px; padding: 34px 0 50px; }
  .detail-section { margin-bottom: 32px; }
  .detail-section h2 { font-size: 19px; margin-bottom: 16px; }
  .detail-section p { font-size: 12px; }
  .detail-list li { font-size: 12px; }
  .detail-sidebar { padding: 23px; }
  .sticky-purchase { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: sticky; bottom: 0; z-index: 30; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: #0b121be8; backdrop-filter: blur(20px); border-top: 1px solid #a3ddff20; }
  .sticky-purchase .price { color: #ccdfed; font-size: 17px; }
  .sticky-purchase .price small { font-size: 9px; color: #6e879a; }
  .sticky-purchase .button { min-height: 42px; padding-inline: 24px; font-size: 12px; }
  .dialog-panel { padding: 30px 24px; border-radius: 15px; }
  .dialog-panel h2 { font-size: 22px; }
  .toast { bottom: calc(22px + env(safe-area-inset-bottom)); font-size: 11px; padding: 13px 16px; }
}
@media (max-width: 420px) {
  .page-container, .header-inner { width: calc(100% - 36px); }
  .header-inner { gap: 9px; }
  .brand { font-size: 11px; letter-spacing: .07em; }
  .brand-mark { width: 24px; transform: scale(.9); transform-origin: left center; }
  .header-actions .button { padding: 8px 10px; font-size: 10px; }
  .header-actions .button .icon { width: 13px; height: 13px; }
  .hero-title { font-size: 43px; }
  .hero-visual { height: 335px; margin-top: 0; }
  .core-scene { transform: scale(.68); }
  .core-caption { bottom: -34px; }
  .hero-meta { gap: 12px; }
  .section-title { font-size: 27px; }
  .section-heading { gap: 10px; }
  .product-grid { grid-template-columns: 1fr; gap: 20px; }
  .product-grid > .product-card:last-child:nth-child(3) { display: flex; }
  .product-visual { aspect-ratio: 1.6; }
  .product-info { padding: 22px; }
  .product-info h3 { font-size: 17px; }
  .product-info > p { font-size: 12px; }
  .product-meta { font-size: 9px; }
  .product-bottom .price { font-size: 14px; }
  .file-sculpture { transform: rotateY(-22deg) rotateX(13deg) rotateZ(14deg); }
  .membership-card { padding: 26px; }
  .membership-copy .section-title { font-size: 35px; }
  .membership-price { font-size: 53px; }
  .auth-layout { width: calc(100% - 36px); }
  .auth-art, .auth-content { padding: 25px; }
  .auth-art h1, .auth-art h2 { font-size: 25px; }
  .auth-art .hero-visual { right: -60px; opacity: .23; }
  .onboard-form .form-heading h1 { font-size: 28px; }
  .onboard-summary { padding: 24px; }
  .onboard-summary .benefit-list { grid-template-columns: 1fr; }
  .payment-card { padding: 22px; }
  .payment-address { gap: 15px; }
  .qr-placeholder { width: 88px; height: 99px; }
  .payment-amount strong, .payment-amount .price { font-size: 48px; }
  .payment-address code { font-size: 10px; }
  .catalog-hero h1 { font-size: 35px; }
  .detail-info h1 { font-size: 28px; }
  .detail-specs { column-gap: 15px; }
  .detail-specs > div { gap: 8px; }
  .detail-visual { aspect-ratio: 1.2; }
}
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select { font-size: 16px; }
  .button, .filter-chips button, .mobile-menu, .preview-controls button { min-height: 44px; }
  .public-nav a, .public-nav button, .mobile-menu-panel a { min-height: 44px; display: flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .js-motion .reveal { opacity: 1 !important; transform: none !important; }
}

/* Exact application composition. */
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 9px; color: #b7c9d8; border: 1px solid #ffffff17; border-radius: 8px; background: #ffffff03; }
.mobile-menu-toggle { display: none; }
.mobile-menu { display: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 24px; }
.login-link { white-space: nowrap; font-size: 11px; color: #a5b3c1; padding: 9px 14px; }
.nav-status, .subtle-tag { display: inline-block; vertical-align: middle; margin-left: 5px; padding: 1px 5px; border: 1px solid #8eadc122; border-radius: 4px; color: #6b8194; font-size: 8px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }
.status-dot { width: 4px; height: 4px; border-radius: 50%; display: inline-block; background: #bce8ff; box-shadow: 0 0 9px #a3ddff66; margin-right: 7px; vertical-align: middle; }
.muted-dot { background: #63798a; box-shadow: none; }
.preview-strip > span, .preview-strip > a { display: inline-flex; align-items: center; gap: 5px; }
.preview-strip .status-dot { margin-right: 3px; }
.hero-copy > .eyebrow::before { display: none; }
.hero-copy > .eyebrow .status-dot { margin-right: 0; }
.hero-meta { gap: 22px; margin-top: 35px; }
.hero-meta > div { display: flex; flex-direction: column; gap: 7px; }
.hero-meta strong { font-size: 13px; line-height: 1.3; color: #a6b5c3; font-weight: 400; letter-spacing: .04em; }
.hero-meta strong small { font-size: 8px; margin-left: 3px; color: #607386; }
.hero-meta > div > span { font: 9px/1.5 var(--font); color: #596c80; letter-spacing: .04em; }
.hero-meta > i { width: 1px; height: 25px; background: #ffffff13; display: block; }
.hero-bottom { position: absolute; left: 0; right: 0; bottom: 25px; display: flex; align-items: center; gap: 14px; color: #3d5064; font: 8px/1.6 var(--mono); letter-spacing: .13em; }
.hero-bottom > span:last-child { margin-left: auto; }
.scroll-indicator { position: relative; width: 40px; height: 1px; background: #4d6a8044; overflow: hidden; }
.scroll-indicator::after { content: ""; position: absolute; width: 12px; height: 1px; background: #a3ddff; left: 0; animation: scroll-cue 3s ease-in-out infinite; }
.core-topline, .core-bottomline { position: absolute; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; color: #617e98; font: 7px/1.4 var(--mono); letter-spacing: .13em; }
.core-topline { top: 28px; }
.core-bottomline { bottom: 28px; color: #83a5c0; }
.core-bottomline span:last-child { font-size: 15px; }
.core-caption { gap: 30px; font-size: 7px; }
.core-caption::before, .core-caption::after { display: none; }
.core-caption b { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: #8bbedc; margin-right: 6px; }
.core-caption span:last-child { color: #3d566d; }
.core-halo { position: absolute; inset: 10% 0 15%; background: radial-gradient(ellipse, #85b7df0f, transparent 68%); filter: blur(20px); }
.hero-visual { overflow: clip; --scene-scale: 1; }
.hero-visual .core-scene { transform: scale(var(--scene-scale)) rotateX(var(--pointer-y, 0deg)) rotateY(var(--pointer-x, 0deg)); transition: transform .7s var(--ease); }
.auth-art { overflow: hidden; }
.section-kicker { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 36px; }
.section-kicker > span:last-child { font-size: 10px; color: #5c6f82; }
.feature-symbol { display: inline-grid; place-items: center; width: 29px; height: 29px; border: 1px solid #a3ddff18; border-radius: 8px; background: #a3ddff04; color: #a4c2d9; }
.feature-symbol .icon { width: 15px; height: 15px; }
.feature-index { font: 9px/1.5 var(--mono); color: #374c60; padding-top: 4px; }
.text-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0; font: inherit; font-size: 12px; font-weight: 400; color: #abc6d9; border: 0; background: none; cursor: pointer; transition: color .2s; }
.text-link .icon { width: 15px; height: 15px; }
.text-link:hover { color: #eef8ff; }
.section-heading > .text-link { margin-bottom: 5px; font-size: 11px; }
.section-footnote { font-size: 10px; color: #465a6d; margin-top: 23px; }
.product-format { position: absolute; top: 17px; right: 17px; z-index: 2; border: 1px solid #a3ddff1b; border-radius: 5px; background: #0b131bc2; padding: 3px 6px; font: 8px/1.5 var(--mono); color: #9cb5c8; }
.art-index { position: absolute; left: 18px; bottom: 14px; color: #3a5269; font: 7px/1.5 var(--mono); letter-spacing: .12em; }
.art-orbit { position: absolute; width: 210px; height: 58px; border: 1px solid #aacde417; border-radius: 50%; bottom: 17px; transform: rotate(-10deg); }
.file-groove { position: absolute; top: 10px; left: 12px; width: 12px; height: 2px; background: #d9edff44; }
.card-price { font-size: 13px; font-weight: 400; color: #bacbd9; letter-spacing: -.02em; }
.card-price small { font: 8px/1 var(--mono); color: #637b8f; margin-left: 3px; }
.price-placeholder { font-size: 12px; font-weight: 400; letter-spacing: 0; color: #778c9e; }
.product-arrow { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #accde21c; display: grid; place-items: center; color: #7f9db4; }
.product-arrow .icon { width: 13px; height: 13px; }
.membership-detail { display: inline-block; margin-top: 37px; color: #566f83; font-size: 10px; }
.membership-card-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13px; color: #b1cadc; }
.membership-card-top .icon { width: 19px; height: 19px; color: #82abc8; }
.membership-disclaimer { display: block; font-size: 9px; text-align: center; color: #5b7388; line-height: 1.8; margin-top: 15px; }
.api-teaser-copy > .text-link { margin-top: 27px; font-size: 11px; }
.code-topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid #ffffff0b; font: 9px/1.5 var(--mono); color: #4e657a; }
.code-topbar > span:first-child { display: flex; gap: 6px; }
.code-topbar i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #334556; }
.code-topbar i:nth-child(2) { background: #293b4a; }
.code-topbar i:nth-child(3) { background: #223444; }
.code-dim { color: #425b70; }
.code-bool { color: #b4b0d4; }
.code-bottom { display: flex; align-items: center; gap: 7px; font-size: 9px; color: #476277; border-top: 1px solid #ffffff08; padding-top: 14px; margin-top: 21px; }
.code-bottom .icon { width: 12px; height: 12px; }
.api-teaser { padding-bottom: 0; }
.faq-list summary::after { display: none; }
.faq-list summary > .icon { width: 15px; height: 15px; color: #6c879b; transition: transform .2s; }
.faq-list details[open] summary > .icon { transform: rotate(45deg); }
.footer-links { display: flex; gap: 27px; flex-wrap: wrap; }
.footer-links button, .footer-legal button { border: 0; background: none; padding: 0; font: inherit; font-size: 11px; color: #607082; }
.footer-legal { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.footer-legal button { font-size: 10px; color: #455b6e; }
.auth-art > .core-scene { height: 320px; min-height: 320px; margin: 0 -25px; width: calc(100% + 50px); transform: scale(.76); transform-origin: 50% 50%; }
.auth-art > .core-scene .core-caption { display: none; }
.auth-art > .core-scene .core-orbit { opacity: .45; }
.auth-content > .form-heading { margin-bottom: 28px; }
.auth-content > .button { margin-top: 14px; font-size: 11px; }
.auth-divider { height: 1px; background: var(--line); margin: 24px 0; }
.auth-bottom { text-align: center; color: #70879b; font-size: 11px; }
.auth-bottom .text-link { font-size: 11px; margin-left: 3px; }
.pending-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #506a80; font-size: 10px; margin-top: 16px; }
.pending-link .icon { width: 11px; height: 11px; }
.auth-points span { display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
.auth-points .icon { width: 12px; height: 12px; }
.onboarding-page { padding-top: 55px; }
.onboarding-title { margin-bottom: 32px; }
.onboarding-title .eyebrow { font-size: 9px; color: #6f92ac; margin-bottom: 18px; }
.onboarding-title h1 { font-size: 38px; letter-spacing: -.055em; line-height: 1.4; }
.onboarding-title > p { font-size: 13px; color: #7a91a5; margin-top: 15px; }
.onboarding-page > .stepper { border-bottom: 1px solid var(--line); padding: 0 0 26px; margin-bottom: 0; gap: 40px; }
.step-item > b { width: 22px; height: 22px; display: inline-grid; place-items: center; font: 8px/1 var(--mono); border: 1px solid #ffffff14; border-radius: 50%; color: #536b7d; }
.step-item.active > b { border-color: #afdfff50; background: #a3ddff0d; color: #c3e8ff; }
.step-item.complete > b { border-color: #b3eed326; color: #a4ceb9; }
.step-item > b .icon { width: 11px; height: 11px; }
.onboarding-page .onboard-layout { margin-top: 38px; gap: 64px; max-width: none; grid-template-columns: 1.6fr 1fr; }
.onboarding-page .onboard-form { padding: 30px; display: block; background: #0f151d; border-color: #abcce21b; border-radius: 16px; }
.onboard-form .form-heading { margin-bottom: 26px; }
.onboard-form .form-heading h2 { font-size: 20px; }
.onboard-form .form-heading p { font-size: 11px; }
.onboard-form form { display: flex; flex-direction: column; gap: 21px; }
.terms-check { margin-top: 4px; line-height: 1.9; }
.terms-check .text-link { font-size: inherit; }
.onboard-form .form-note { text-align: center; font-size: 10px; margin-top: -8px; }
.preview-skip { display: flex; margin-top: 22px; font-size: 10px; color: #59768d; }
.summary-price { margin: 25px 0 14px; font-size: 47px; font-weight: 400; letter-spacing: -.06em; color: #e5f1fa; line-height: 1.15; }
.summary-price > span { font: 10px/1.5 var(--mono); color: #8babc2; letter-spacing: .05em; }
.summary-note { border-top: 1px solid #ffffff0d; padding-top: 19px; margin-top: 22px; display: flex; align-items: start; gap: 9px; }
.summary-note .icon { width: 13px; height: 13px; color: #617e95; margin-top: 2px; }
.summary-note p { color: #617e95; font-size: 10px; line-height: 1.85; }
.onboarding-page .payment-layout { margin-top: 38px; max-width: none; grid-template-columns: 1.5fr 1fr; gap: 65px; }
.payment-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.payment-warning { display: flex; align-items: start; gap: 9px; color: #708da3; font-size: 10px; line-height: 1.8; margin: -4px 0 21px; }
.payment-warning .icon { width: 14px; height: 14px; margin-top: 2px; }
.payment-address .muted { font-size: 10px; color: #596f82; }
.payment-address .address-placeholder { color: #92a9bd; font-size: 12px; }
.order-support { margin-top: 29px; }
.order-support h3 { font-size: 12px; color: #a0b5c7; }
.order-support p { color: #668196; font-size: 11px; margin: 9px 0 14px; }
.order-support .text-link { font-size: 11px; }
.preview-controls { margin-top: 28px; border-top: 1px solid #ffffff0d; }
.preview-controls label { width: 100%; font-size: 9px; color: #506e84; }
.preview-controls select { min-height: 37px; font-size: 11px; padding: 9px 12px; }
.preview-controls .button { border: 0; margin-top: 2px; width: 100%; justify-content: flex-start; padding-left: 0; color: #a0bfd5; }
.success-receipt { display: flex; flex-direction: column; }
.success-receipt > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.success-receipt strong { display: inline-flex; align-items: center; gap: 6px; }
.success-receipt strong .icon { width: 13px; height: 13px; color: #a9d9c6; }
.success-next { font-size: 11px; color: #567086; margin-top: 3px; }
.detail-visual { position: relative; }
.detail-visual-caption { position: absolute; bottom: 18px; left: 22px; right: 22px; display: flex; justify-content: space-between; gap: 10px; font: 8px/1.5 var(--mono); letter-spacing: .08em; color: #567187; }
.detail-visual .art-index { display: none; }
.detail-visual .product-format { left: 22px; right: auto; top: 20px; }
.detail-specs { margin: 25px 0; }
.detail-specs strong { font-size: 11px; font-weight: 400; color: #afc4d4; }
.detail-price .price-placeholder { font-size: 23px; color: #c3d6e5; }
.purchase-note { margin-top: -8px; color: #607f97 !important; font-size: 10px !important; }
.detail-actions { flex-direction: column; margin-top: 22px; }
.detail-actions > .text-link { justify-content: center; margin-top: 5px; padding: 6px; font-size: 10px; color: #7193ab; }
.detail-benefits { display: flex; gap: 25px; flex-wrap: wrap; color: #56738b; font-size: 9px; margin-top: 20px; }
.detail-benefits span { display: inline-flex; gap: 6px; align-items: center; }
.detail-benefits .icon { width: 12px; height: 12px; }
.prose { font-size: 13px; color: #889bae; line-height: 2.1; overflow-wrap: anywhere; }
.file-content-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.file-content-list li { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); color: #8da5b9; font-size: 12px; }
.file-content-list .icon { width: 15px; height: 15px; color: #7896af; }
.file-content-list small { font: 8px/1.5 var(--mono); margin-left: auto; color: #395268; }
.detail-sidebar { border: 0; background: none; border-radius: 0; padding: 0; }
.detail-sidebar > .surface { padding: 25px; border: 1px solid #adcde017; border-radius: 12px; background: #0e151d; }
.detail-sidebar .eyebrow { display: block; font-size: 8px; color: #526e85; margin-bottom: 18px; }
.detail-sidebar .text-link { margin-top: 5px; font-size: 11px; }
.detail-api-link { display: flex; align-items: center; gap: 14px; padding: 24px 4px; color: #8aa8be; }
.detail-api-link > .icon { width: 20px; height: 20px; }
.detail-api-link > .icon:last-child { width: 14px; height: 14px; margin-left: auto; color: #425d73; }
.detail-api-link > div { display: flex; flex-direction: column; gap: 5px; }
.detail-api-link strong { font-size: 12px; font-weight: 400; color: #abc0d0; }
.detail-api-link span { font-size: 10px; color: #516f86; }
.sticky-purchase > div { font-size: 17px; color: #d2e8f8; }
.sticky-purchase .price-placeholder { font-size: 14px; color: #bed6e8; }
.sticky-purchase small { font: 9px/1.4 var(--mono); color: #68869d; margin-left: 5px; }
.public-api-page { min-height: 660px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; padding-block: 74px 95px; overflow: hidden; }
.public-api-hero > .eyebrow { margin-bottom: 23px; font-size: 9px; }
.public-api-hero h1 { font-size: clamp(42px, 5vw, 65px); letter-spacing: -.065em; line-height: 1.3; margin: 23px 0; }
.public-api-hero h1 span { color: #667c90; }
.public-api-hero > p { max-width: 420px; color: #7d98ae; font-size: 14px; line-height: 1.95; }
.api-availability { display: flex; align-items: center; gap: 8px; color: #4f6b82; font-size: 10px; margin-top: 27px; }
.api-availability .icon { width: 13px; height: 13px; }
.api-orb { display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; height: 400px; }
.api-orb > span { font: 150px/1 var(--font); font-weight: 200; color: #7298b344; text-shadow: 0 0 25px #a3ddff13; transform: scaleX(.7); }
.api-orb > div { position: relative; width: 150px; height: 150px; flex-shrink: 0; border-radius: 50%; border: 1px solid #bde4ff44; background: radial-gradient(circle at 32% 20%, #c9e3f969, #25425d 23%, #07111d 64%, #1a3955 89%, #b6ddff); box-shadow: inset -10px -7px 20px #b9dfff12, 0 0 60px #8ccaff17, 0 40px 70px #0009; animation: api-orb-float 9s ease-in-out infinite; }
.api-orb::before { content: ""; width: 330px; height: 105px; border: 1px solid #a3ddff29; border-radius: 50%; position: absolute; transform: rotate(-25deg); box-shadow: 0 1px 10px #a3ddff03; }
.api-orb::after { content: ""; width: 310px; height: 310px; border: 1px dashed #a3ddff0d; border-radius: 50%; position: absolute; }
.dialog-panel > .eyebrow { font-size: 8px; margin-bottom: 16px; color: #6389a3; }
.dialog-panel > .dialog-done { margin-top: 25px; width: 100%; }
.reveal { opacity: 0; transform: translateY(23px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.product-grid > .product-card:last-child:nth-child(3) { display: flex; }
@keyframes scroll-cue { 0%, 100% { left: -12px; opacity: 0; } 35% { opacity: 1; } 70% { left: 40px; opacity: 0; } }
@keyframes api-orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@media(max-width: 1120px) {
  .hero-visual { --scene-scale: .91; }
  .onboarding-page .onboard-layout { gap: 45px; }
  .onboarding-page .payment-layout { gap: 48px; }
}
@media(max-width: 900px) {
  .hero-visual { --scene-scale: .78; }
  .core-caption { gap: 17px; font-size: 6px; }
  .auth-art > .core-scene { transform: scale(.62); height: 280px; min-height: 280px; }
  .onboarding-page .onboard-layout { gap: 30px; grid-template-columns: 1.2fr .85fr; }
  .onboarding-page .onboard-form { padding: 25px; }
  .onboarding-page .payment-layout { gap: 35px; }
  .summary-price { font-size: 41px; }
  .public-api-page { gap: 25px; }
  .api-orb { transform: scale(.8); transform-origin: center; }
}
@media(max-width: 720px) {
  .hero-visual { --scene-scale: .79; }
  .mobile-menu-toggle { display: inline-flex; width: 35px; height: 35px; padding: 8px; }
  .mobile-menu { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 22px 17px; background: #0b121af5; }
  .mobile-menu a, .mobile-menu button { display: flex; align-items: center; justify-content: flex-start; min-height: 43px; padding: 8px 0; font: inherit; font-size: 12px; color: #a4bdcf; background: none; border: 0; }
  .header-actions { gap: 8px; }
  .login-link { display: none; }
  .preview-note { display: none; }
  .hero { padding-bottom: 65px; }
  .hero-meta { margin-top: 29px; gap: 24px; }
  .hero-meta strong { font-size: 12px; }
  .hero-meta > div > span { font-size: 9px; }
  .hero-bottom { font-size: 6px; gap: 10px; bottom: 20px; letter-spacing: .08em; }
  .hero-bottom > span:last-child { font-size: 6px; }
  .scroll-indicator { width: 27px; }
  .core-caption { font-size: 7px; gap: 22px; }
  .section-kicker { margin-bottom: 27px; }
  .section-kicker > span:last-child { font-size: 9px; }
  .section-heading > .text-link { font-size: 10px; padding-top: 26px; white-space: nowrap; }
  .section-footnote { font-size: 9px; line-height: 1.9; }
  .membership-detail { margin-top: 23px; }
  .membership-disclaimer { font-size: 9px; }
  .footer-links { gap: 22px; }
  .footer-links a, .footer-links button { font-size: 10px; }
  .footer-legal { gap: 13px; }
  .footer-legal button { font-size: 9px; }
  .auth-art > .core-scene { position: absolute; width: 180px; height: 180px; min-height: 180px; right: -20px; top: 10px; margin: 0; opacity: .3; pointer-events: none; transform: scale(.44); }
  .auth-content > .form-heading { margin-bottom: 24px; }
  .onboarding-page { padding-top: 34px; }
  .onboarding-title { margin-bottom: 28px; }
  .onboarding-title h1 { font-size: 31px; }
  .onboarding-title .eyebrow { font-size: 8px; margin-bottom: 15px; }
  .onboarding-title > p { font-size: 12px; }
  .onboarding-page > .stepper { gap: 25px; padding-bottom: 24px; }
  .step-item { gap: 6px; font-size: 9px; }
  .step-item > b { width: 19px; height: 19px; font-size: 7px; }
  .onboarding-page .onboard-layout { grid-template-columns: 1fr; gap: 25px; margin-top: 27px; }
  .onboarding-page .onboard-form { padding: 25px; }
  .onboard-form .form-note { font-size: 10px; }
  .onboard-form .checkbox { font-size: 11px; }
  .summary-price { font-size: 46px; }
  .onboarding-page .payment-layout { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .payment-card h2 { font-size: 15px; }
  .order-support { margin-top: 25px; }
  .preview-controls label { font-size: 10px; }
  .success-next { font-size: 10px; }
  .detail-visual-caption { font-size: 7px; }
  .detail-specs strong { font-size: 10px; }
  .detail-info .detail-actions .button { flex: auto; }
  .detail-actions > .text-link { font-size: 10px; }
  .prose { font-size: 12px; }
  .detail-sidebar { padding: 0; }
  .file-content-list li { font-size: 11px; }
  .public-api-page { grid-template-columns: 1fr; gap: 10px; padding-block: 49px 35px; }
  .public-api-hero h1 { font-size: 47px; }
  .public-api-hero > p { font-size: 13px; }
  .api-orb { height: 310px; transform: scale(.83); }
}
@media(max-width: 420px) {
  .hero-visual { --scene-scale: .68; }
  .header-actions { gap: 7px; }
  .mobile-menu-toggle { width: 33px; height: 33px; padding: 8px; }
  .hero-bottom > span:last-child { display: none; }
  .section-kicker .section-number { font-size: 8px; }
  .section-heading > .text-link { font-size: 9px; }
  .auth-art > .core-scene { right: -50px; opacity: .2; }
  .onboarding-title h1 { font-size: 28px; }
  .onboarding-page > .stepper { gap: 16px; }
  .step-item { font-size: 8px; }
  .onboarding-page .onboard-form { padding: 22px; }
  .payment-card-heading .status { font-size: 9px; padding: 4px 8px; }
  .summary-price { font-size: 43px; }
  .public-api-hero h1 { font-size: 42px; }
}
@media(prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Separate customer navigation and prototype-only controls. */
.merchant-header .header-inner { min-height:74px; }
.merchant-header .brand { margin-right:0; }
.merchant-context { display:flex; align-items:center; gap:16px; border-left:1px solid var(--line); padding-left:24px; color:var(--text); font-size:13px; white-space:nowrap; }
.merchant-context small { color:var(--muted); font:9px/1.5 var(--mono); letter-spacing:1.6px; }
.merchant-header .header-actions { margin-left:auto; }
.public-nav [aria-current=page] { color:var(--text); }
.footer-preview-label { display:block; margin-top:8px; font-size:10px; color:var(--muted); }
.login-help { justify-content:flex-end; }
.design-preview-panel { border-top:1px solid var(--line); margin-top:22px; padding-top:17px; text-align:left; }
.design-preview-panel>summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); cursor:pointer; font-size:12px; }
.design-preview-panel>summary::-webkit-details-marker { display:none; }
.design-preview-panel>summary>.icon { width:14px; height:14px; transition:transform .2s; }
.design-preview-panel[open]>summary>.icon { transform:rotate(90deg); }
.design-preview-panel>p { font-size:12px; line-height:1.8; color:var(--muted); margin:14px 0; }
.design-preview-panel .button { margin-top:14px; }
.design-preview-panel .preview-controls { margin-top:15px; padding:0; border:0; }
.design-preview-panel .preview-controls label { font-size:11px; }
.payment-back { margin-top:22px; font-size:12px; }
.detail-section-nav { display:flex; align-items:center; gap:32px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:45px 0 0; }
.detail-section-nav button { border:0; background:none; color:var(--muted); padding:8px 0; font:inherit; font-size:13px; cursor:pointer; }
.detail-section-nav button:hover { color:var(--accent); }
.detail-section { scroll-margin-top:110px; }
@media(max-width:700px) {
 .merchant-context { border:0; padding:0; font-size:11px; margin-left:auto; }
 .merchant-context small { display:none; }
 .merchant-header .header-inner { gap:12px; min-height:64px; }
 .merchant-header .brand { min-width:0; max-width:160px; }
 .merchant-header .brand>span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .merchant-header .header-actions { margin-left:0; }
 .merchant-header .header-actions>.button { display:none; }
 .merchant-header .icon-button { display:inline-flex; width:34px; height:34px; }
 .detail-section-nav { justify-content:space-between; gap:16px; padding:12px 0; margin-top:28px; }
 .detail-section-nav button { font-size:12px; min-height:40px; }
}
@media(prefers-reduced-motion:reduce) { .design-preview-panel>summary>.icon { transition:none; } }
.telegram-support { display:flex; align-items:center; gap:12px; padding:16px; width:max-content; max-width:100%; border:1px solid #b9d8f51c; border-radius:12px; color:#d9e8f4; background:#b9d8f505; text-align:left; text-decoration:none; transition:background .2s,border-color .2s; }
.telegram-support:hover { background:#b9d8f50b; border-color:#b9d8f540; }
.telegram-support > .icon:first-child { color:#a7c9ed; flex-shrink:0; }
.telegram-support > .icon:last-child { width:15px; margin-left:auto; color:#74899c; flex-shrink:0; }
.telegram-support strong { display:block; font-size:12px; font-weight:500; }
.telegram-support small { display:block; margin-top:5px; color:#7c93a7; font-size:10px; font-weight:400; }
.footer-links .telegram-support { padding:11px 14px; }
.checkout-back { display:inline-flex; margin-bottom:34px; font-size:12px; }
.checkout-page .onboarding-title { text-align:left; }
.checkout-page .onboarding-title h1 { max-width:750px; font-size:clamp(34px,4.6vw,62px); letter-spacing:-.04em; line-height:1.2; }
.checkout-page .onboarding-title p { max-width:620px; }
.checkout-preview-note { padding:13px 17px; border:1px solid #a9cde120; background:#adcce905; border-radius:9px; font-size:11px; line-height:1.6; color:#8da6bc; }
.checkout-page .payment-layout { margin-top:30px; }
.member-address-placeholder { display:flex; gap:16px; align-items:center; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.checkout-address-icon { display:grid; place-items:center; width:62px; height:62px; flex-shrink:0; border:1px solid #a9cde11b; border-radius:12px; background:#9fc8ef06; }
.checkout-address-icon .icon { width:24px; height:24px; color:#8caac4; }
.member-address-placeholder strong { font-size:13px; color:#c9dce9; font-weight:500; }
.member-address-placeholder p { color:#849bae; font-size:11px; line-height:1.8; margin:7px 0; }
.member-address-placeholder div>span { color:#8399ad; font-size:10px; }
.checkout-observation { display:flex; align-items:flex-start; gap:9px; font-size:11px; line-height:1.8; color:#8ca6bb; margin:25px 0; }
.checkout-observation .status-dot { flex-shrink:0; margin-top:6px; }
.checkout-demo-controls { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.checkout-demo-controls .button { font-size:11px; }
.delivery-steps { padding:0; margin:30px 0 0; list-style:none; }
.delivery-steps li { display:flex; align-items:flex-start; gap:14px; padding:17px 0; color:#668095; }
.delivery-steps li>span { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border:1px solid #adcce922; border-radius:9px; }
.delivery-steps li.is-active>span { border-color:#b0d8f450; color:#c1e1f9; background:#a0c8ef09; }
.delivery-steps strong { font-size:12px; color:#acc1d2; font-weight:500; }
.delivery-steps p { font-size:11px; line-height:1.7; margin:5px 0 0; color:#718ba1; }
.delivery-steps li>small { margin-left:auto; font:10px var(--mono); padding-top:9px; color:#566c7d; }
.checkout-support { margin-top:30px; width:100%; }
.delivery-page { padding-top:48px; padding-bottom:110px; }
.delivery-layout { display:grid; grid-template-columns:1.35fr .85fr; gap:90px; padding-top:65px; }
.delivery-primary { max-width:650px; }
.delivery-emblem { position:relative; display:grid; place-items:center; width:88px; height:88px; border:1px solid #b1d9f54a; border-radius:25px; background:linear-gradient(135deg,#afdbff16,#afdbff03); box-shadow:0 0 85px #6aa8dd0b; margin-bottom:35px; }
.delivery-emblem>.icon { width:38px; height:38px; color:#bfdcf4; }
.delivery-emblem>span { position:absolute; bottom:-7px; right:-7px; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#bbd8e9; color:#193249; border:4px solid #0b1118; }
.delivery-emblem>span .icon { width:16px; height:16px; }
.delivery-primary h1 { font-size:clamp(32px,3.8vw,52px); line-height:1.23; letter-spacing:-.045em; margin:19px 0; overflow-wrap:anywhere; text-wrap:balance; }
.delivery-lead { color:#8fa7ba; font-size:14px; line-height:2; max-width:490px; white-space:pre-line; }
.delivery-resource { display:flex; gap:14px; align-items:center; padding:21px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:30px 0; min-width:0; }
.delivery-resource>span:first-child { display:grid; place-items:center; width:44px; height:48px; flex-shrink:0; border:1px solid #adcce922; border-radius:8px; color:#a5c7df; }
.delivery-resource>div { min-width:0; }
.delivery-resource strong { display:block; font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.delivery-resource small { display:block; color:#738da4; font-size:10px; margin-top:6px; }
.delivery-resource .status { margin-left:auto; flex-shrink:0; font-size:10px; }
.delivery-bot-note { color:#738ba0; font-size:11px; line-height:1.9; margin:14px 0; }
.delivery-primary>.text-link { font-size:12px; }
.delivery-return { display:flex; margin-top:25px; }
.delivery-guide { border-left:1px solid var(--line); padding:20px 0 0 43px; }
.delivery-guide h2 { font-size:28px; line-height:1.45; letter-spacing:-.03em; margin:20px 0; }
.delivery-start-note { display:flex; gap:10px; margin-top:20px; padding:16px; border-radius:10px; background:#a3c7e407; font-size:11px; color:#86a0b7; line-height:1.9; }
.delivery-start-note>.icon { flex-shrink:0; width:16px; margin-top:3px; }
.delivery-start-note p { margin:0; }
.delivery-start-note strong { color:#c0d6e7; font-weight:500; }
.dash-sidebar .dash-support { width:100%; margin-top:28px; padding:12px; }
.dash-support strong { font-size:11px; }
.dash-support small { font-size:9px; }
.dash-mobile-support { display:none; }
.dash-order-row>div { min-width:0; }
.dash-order-row p { overflow-wrap:anywhere; }
.dash-order-row .dash-text-link { margin-top:9px; font-size:11px; }
.dash-shell .dash-orders-body:has(.dash-order-row) { min-height:0; }
.dash-shell .dash-library-shelf:has(.dash-order-list) { display:block; min-height:0; padding:12px 24px; }
@media(max-width:900px) { .delivery-layout { gap:40px; } .delivery-guide { padding-left:28px; } }
@media(max-width:720px) {
  .delivery-page { padding-top:30px; padding-bottom:60px; }
  .delivery-layout { grid-template-columns:1fr; gap:35px; padding-top:35px; }
  .delivery-primary { max-width:none; }
  .delivery-guide { border-left:0; border-top:1px solid var(--line); padding:32px 0 0; }
  .delivery-guide h2 { font-size:25px; }
  .delivery-emblem { width:72px; height:72px; margin-bottom:30px; border-radius:21px; }
  .delivery-resource { flex-wrap:wrap; }
  .delivery-resource .status { margin-left:0; }
  .checkout-page .onboarding-title h1 { font-size:36px; }
  .checkout-back { margin-bottom:28px; }
  .checkout-preview-note { font-size:10px; padding:12px; }
  .member-address-placeholder { gap:12px; }
  .checkout-address-icon { width:48px; height:55px; }
  .member-address-placeholder strong { font-size:12px; }
  .footer-links .telegram-support { width:100%; }
  .dash-mobile-support { display:block; margin-top:30px; }
  .dash-mobile-support .telegram-support { width:100%; }
}

/* Server-backed account and order states. */
.server-start-page { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px; padding:35px; text-align:center; }
.server-start-page h1 { font-size:clamp(25px,4vw,42px); letter-spacing:-.04em; }
.server-start-page p { font-size:13px; line-height:1.8; color:var(--muted); max-width:540px; }
.server-loading { display:flex; align-items:center; justify-content:center; gap:12px; padding:70px 22px; min-height:220px; font-size:13px; color:#8da6bc; }
.checkout-error { padding:40px; margin:32px 0 60px; border:1px solid var(--line); border-radius:16px; }
.checkout-error h1,.checkout-error h2 { font-size:25px; font-weight:500; letter-spacing:-.03em; }
.checkout-error p { font-size:13px; color:#8199af; line-height:1.9; margin:18px 0 25px; }
.checkout-error>.text-link { margin-left:22px; font-size:12px; }
.checkout-address { display:block; max-width:100%; overflow-wrap:anywhere; white-space:normal; margin:10px 0 7px; font:12px/1.6 var(--mono); color:#abcbe1; }
.order-summary dd { overflow-wrap:anywhere; }
.order-amount-detail { display:flex; justify-content:space-between; gap:20px; font-size:11px; color:#869fb5; margin:22px 0; }
.order-amount-detail strong { color:#c5ddeb; font-weight:500; }
.auth-or { position:relative; margin:28px 0; text-align:center; }
.auth-or>span { position:absolute; padding:0 14px; top:-10px; left:50%; transform:translateX(-50%); color:#5e748a; background:var(--bg); font-size:11px; }
.telegram-login-button { gap:10px; }
.telegram-login-button:disabled { opacity:.55; cursor:not-allowed; }
.telegram-access { display:flex; flex-direction:column; gap:18px; }
.telegram-identity { display:flex; align-items:center; gap:14px; padding:20px 0 25px; }
.telegram-identity>span { display:grid; place-items:center; flex-shrink:0; width:48px; height:48px; border:1px solid #badcff26; border-radius:15px; background:linear-gradient(145deg,#b2d8f118,#a2d3f305); box-shadow:inset 0 1px 0 #d3ebff0b; }
.telegram-identity>span>.icon { width:24px; height:24px; color:#c1dff6; }
.telegram-identity strong { display:block; color:#d0dbe5; font-size:12px; font-weight:500; line-height:1.7; }
.telegram-identity p { margin:6px 0 0; color:#718799; font-size:11px; line-height:1.8; }
.telegram-identity>.icon { flex-shrink:0; margin-left:auto; color:#58768a; width:16px; height:16px; }
.telegram-access>.button { min-height:52px; gap:11px; font-size:12px; }
.telegram-access>.button>.icon:last-child { margin-left:auto; }
.telegram-access>.button>.icon:first-child { margin-right:auto; }
.telegram-access-note { color:#7c91a3; font-size:11px; line-height:1.9; text-align:center; margin:0; }
.telegram-access-policy { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; font-size:10px; color:#607487; }
.telegram-access-policy .text-link { font-size:10px; }
.telegram-membership-note { display:flex; align-items:flex-start; gap:10px; padding:22px 0; border-top:1px solid var(--line); margin-top:26px; }
.telegram-membership-note .icon { width:14px; color:#6b8499; margin-top:4px; }
.telegram-membership-note p { color:#70889c; font-size:11px; line-height:1.9; margin:0; }
.telegram-onboard .telegram-identity { padding-top:0; }
.telegram-onboard-steps { list-style:none; padding:22px 0 0; margin:28px 0; border-top:1px solid var(--line); display:grid; gap:20px; }
.telegram-onboard-steps li { display:flex; gap:14px; }
.telegram-onboard-steps li>span { font:10px/1.9 var(--mono); color:#7191a9; }
.telegram-onboard-steps strong { font-size:12px; color:#b5c8d8; font-weight:500; }
.telegram-onboard-steps p { margin:6px 0 0; color:#6f8598; font-size:11px; line-height:1.9; }
.dash-telegram-id { font-family:var(--mono); overflow-wrap:anywhere; }
@media(max-width:720px) { .telegram-auth-layout .auth-content { padding-top:30px; padding-bottom:30px; }.telegram-identity { gap:11px; padding:8px 0 12px; }.telegram-identity>span { width:40px; height:40px; border-radius:12px; }.telegram-identity>.icon { display:none; }.telegram-identity strong { font-size:11px; }.telegram-identity p { font-size:10px; }.telegram-access>.button { min-height:50px; }.telegram-membership-note { margin-top:23px; padding:18px 0; }.telegram-onboard-steps { margin-top:24px; } }
.auth-content>.checkout-preview-note { margin-top:25px; }
.auth-content>.form-note { line-height:1.8; }
.onboarding-page>.checkout-preview-note { margin-top:24px; }
.dash-content>.checkout-preview-note { margin-bottom:28px; }
.success-page>.checkout-preview-note { max-width:650px; margin:0 auto 40px; }
@media(max-width:720px) { .checkout-error{padding:25px}.checkout-error h1,.checkout-error h2{font-size:22px}.checkout-error>.text-link{display:flex;margin:22px 0 0}.auth-content>.checkout-preview-note{font-size:10px}.order-summary dd{max-width:65%}.checkout-address{font-size:10px} }