.os-glyph { width: 18px; height: 18px; flex-shrink: 0; }.os-hero { padding-bottom: clamp(20px, 2.4vw, 32px); }
.os-hero > .os-hero__wrap { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: clamp(18px, 2.2vw, 30px); }
.os-hero__head { position: relative; display: grid; gap: 20px; }.os-hero__title { --fit: 14.6; font-size: min(var(--fs-hero), calc((100vw - var(--gutter) * 2) / var(--fit)), 7.8svh); }@media (max-width: 767px) {
.os-hero__title { --fit: 8.6; font-size: min(var(--fs-hero), calc((100vw - var(--gutter) * 2) / var(--fit))); }
}.os-hero__lead { max-width: 30em; }@media (min-width: 1360px) {
.os-hero__lead { position: absolute; top: 0.2em; right: 0; width: min(27%, 25rem); font-size: 1.0625rem; }
}.os-hero__band { position: relative; min-height: clamp(300px, 38svh, 560px); }.os-hero__cue {
position: absolute;
left: 0;
bottom: 0;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 14px;
min-height: 48px;
color: var(--fg-2);
transition: color 0.3s var(--ease-out);
}.os-hero__cue-ring {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid var(--line-2);
border-radius: 50%;
transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}.os-hero__cue .icon { width: 16px; height: 16px; animation: osNudge 2.4s var(--ease-in-out) infinite; }
.os-hero__cue:hover { color: var(--fg); }
.os-hero__cue:hover .os-hero__cue-ring { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 14%, transparent); }@keyframes osNudge {
0%, 60%, 100% { transform: none; }
30% { transform: translateY(4px); }
}.os-orbit { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.os-orbit__space { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 12%; }.os-orbit__plane {
--D: min(78cqw, (100cqh - 120px) * 3);
--tilt: 70deg;
--rz: 0deg;
position: absolute;
left: 50%;
top: 57%;
width: var(--D);
height: var(--D);
margin: calc(var(--D) / -2) 0 0 calc(var(--D) / -2);
transform-style: preserve-3d;
transform: rotateX(var(--tilt)) rotateZ(var(--rz));
}.os-orbit__ring { position: absolute; border-radius: 50%; border: 1px solid var(--line); }
.os-orbit__ring--outer { inset: 0; border-color: var(--line-2); background: radial-gradient(closest-side, transparent 70%, rgba(123, 44, 240, 0.08)); }.os-orbit__ring--dial {
inset: 2.5%;
border: 0;
background: repeating-conic-gradient(var(--line-2) 0 0.35deg, transparent 0.35deg 5deg);
-webkit-mask: radial-gradient(closest-side, transparent 94%, #000 94.5% 99.5%, transparent 100%);
mask: radial-gradient(closest-side, transparent 94%, #000 94.5% 99.5%, transparent 100%);
}.os-orbit__ring--path { inset: 10%; border: 1px dashed rgba(197, 244, 61, 0.35); animation: osSpin 90s linear infinite; }
.os-orbit__ring--inner { inset: 36%; border-color: var(--line-2); }.os-orbit__glow {
position: absolute;
inset: 22%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(123, 44, 240, 0.5), rgba(123, 44, 240, 0.12) 60%, transparent);
}@keyframes osSpin {
to { transform: rotate(360deg); }
}.os-orbit__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.os-orbit__wire {
fill: none;
stroke: var(--line-2);
stroke-width: 0.2;
stroke-dasharray: 100;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1.1s var(--ease-expo), stroke 0.4s var(--ease-out);
}.os-orbit__wire.is-off { stroke-dashoffset: 100; }
.os-orbit__wire.is-hot { stroke: var(--dc-lime); }.os-orbit__pulse {
fill: none;
stroke: var(--dc-lime);
stroke-width: 0.55;
stroke-linecap: round;
stroke-dasharray: 6 200;
stroke-dashoffset: 6;
opacity: 0;
}.os-orbit.is-live .os-orbit__pulse { opacity: 1; animation: osPulse 3.2s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * -0.46s); }@keyframes osPulse {
0% { stroke-dashoffset: 6; }
72%, 100% { stroke-dashoffset: -100; }
}.os-orbit.is-paused *,
.os-orbit.is-paused *::before,
.os-orbit.is-paused *::after { animation-play-state: paused !important; }.os-mod {
position: absolute;
left: var(--x);
top: var(--y);
width: 0;
height: 0;
transform-style: preserve-3d;
}.os-mod__base {
position: absolute;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border-radius: 50%;
border: 1px solid rgba(197, 244, 61, 0.7);
background: radial-gradient(circle, var(--dc-lime) 0 3px, transparent 3.5px);
box-shadow: 0 0 22px rgba(197, 244, 61, 0.35);
transition: opacity 0.5s var(--ease-out);
}.os-mod__stand {
position: absolute;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
transform-origin: 50% 100%;
transform: translateX(-50%) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--tilt) * -1));
}.os-mod__card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 7px 9px;
min-width: 124px;
padding: 9px 12px 10px;
border: 1px solid var(--line-2);
border-radius: 8px;
background-color: rgba(20, 13, 29, 0.86);
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
color: var(--dc-white);
pointer-events: auto;
cursor: pointer;
transition: opacity 0.5s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), transform 0.6s var(--ease-expo);
}.os-mod__top {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
}.os-mod__top b { font-weight: 500; color: var(--dc-lime); }.os-mod__top i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dc-lime);
box-shadow: 0 0 8px var(--dc-lime);
transition: background-color 0.4s, box-shadow 0.4s;
}.os-mod__card .os-glyph { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.72); }
.os-mod__name { font-family: var(--font-heading); font-size: 0.8125rem; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.os-mod__stem { width: 1px; height: clamp(16px, 7cqh, 44px); background: linear-gradient(rgba(255, 255, 255, 0.35), var(--dc-lime)); }
.os-orbit.is-booting .os-mod:not(.is-on) .os-mod__card { opacity: 0.22; border-color: var(--line); }
.os-orbit.is-booting .os-mod:not(.is-on) .os-mod__top i { background: var(--fg-3); box-shadow: none; }
.os-orbit.is-booting .os-mod:not(.is-on) .os-mod__base { opacity: 0.25; }
.os-mod.is-hot .os-mod__card { border-color: var(--dc-lime); box-shadow: 0 0 0 1px rgba(197, 244, 61, 0.3), 0 18px 50px -14px rgba(197, 244, 61, 0.45); transform: translateY(-6px); }
.os-orbit.has-hot .os-mod:not(.is-hot) .os-mod__card { opacity: 0.4; }.os-core {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
transform-style: preserve-3d;
}.os-core__base {
position: absolute;
width: calc(var(--D) * 0.2);
height: calc(var(--D) * 0.2);
margin: calc(var(--D) * -0.1) 0 0 calc(var(--D) * -0.1);
border-radius: 50%;
border: 1px solid rgba(197, 244, 61, 0.5);
box-shadow: 0 0 40px rgba(123, 44, 240, 0.6), inset 0 0 30px rgba(197, 244, 61, 0.15);
}.os-core__stand {
position: absolute;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transform-origin: 50% 100%;
transform: translateX(-50%) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--tilt) * -1));
}.os-core__disc {
display: grid;
place-items: center;
width: clamp(58px, 17cqh, 96px);
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--line-2);
background: radial-gradient(circle at 50% 30%, #2d1b45, var(--dc-purple-black) 72%);
box-shadow: 0 0 0 10px rgba(123, 44, 240, 0.12), 0 0 70px rgba(123, 44, 240, 0.6);
}.os-core__mark { width: 46%; }.os-core__label {
padding: 6px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
background: rgba(20, 13, 29, 0.9);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dc-white);
white-space: nowrap;
}.os-core__beam { width: 1px; height: clamp(10px, 4cqh, 26px); background: linear-gradient(var(--dc-lime), transparent); }.os-orbit__hud {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: grid;
justify-items: end;
gap: 8px;
max-width: 21rem;
text-align: right;
}.os-orbit__hud-kicker { color: var(--fg-3); }
.os-orbit__hud-row { display: inline-flex; align-items: center; gap: 10px; color: var(--dc-lime); }
.os-orbit__hud-row b { font-weight: 500; }
.os-orbit__hud-line { min-height: 3em; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2); }.os-dock__list { display: grid; border-top: 1px solid var(--line); }.os-dock__item {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 52px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
transition: color 0.3s var(--ease-out);
}.os-dock__item::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1px;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease-expo);
}.os-dock__top { display: contents; }
.os-dock__num { color: var(--accent); }.os-dock__state {
grid-column: 3;
grid-row: 1;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.625rem;
color: var(--fg-3);
}.os-dock__state i { width: 6px; height: 6px; border-radius: 50%; background: var(--dc-lime); }.os-dock__name {
grid-column: 2;
grid-row: 1;
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.25;
color: var(--fg);
}.os-dock__item:hover::before,
.os-dock__item:focus-visible::before,
.os-dock__item.is-hot::before { transform: scaleX(1); }@media (min-width: 600px) and (max-width: 1023px) {
.os-dock__list { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}@media (min-width: 1024px) {
.os-dock__list { grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }.os-dock__item {
grid-template-columns: 1fr auto;
align-content: start;
gap: 8px 10px;
height: 100%;
min-height: 70px;
padding: 13px 14px 12px;
border-bottom: 0;
}.os-dock__list li:first-child .os-dock__item { padding-left: 0; }.os-dock__list li + li .os-dock__item { border-left: 1px solid var(--line); }.os-dock__num { grid-column: 1; grid-row: 1; }.os-dock__state { grid-column: 2; }.os-dock__name { grid-column: 1 / -1; grid-row: 2; font-size: 0.875rem; }
}@media (max-width: 1023px) {
.os-hero__band { display: flex; flex-direction: column; min-height: 0; }.os-orbit { position: relative; inset: auto; order: 1; height: clamp(300px, 86vw, 440px); }.os-orbit__plane { --D: min(96cqw, (100cqh - 110px) * 2.6); top: 62%; }.os-orbit__hud { left: 0; right: auto; justify-items: start; max-width: none; text-align: left; }.os-orbit__hud-kicker,
.os-orbit__hud-line { display: none; }.os-hero__cue { position: relative; order: 2; align-self: flex-start; margin-top: 8px; }.os-mod__card { grid-template-columns: auto; justify-items: center; min-width: 0; padding: 7px 8px; gap: 5px; }.os-mod__top i,
.os-mod__name { display: none; }.os-core__label { font-size: 0.5625rem; padding: 5px 9px; }
}@media (prefers-reduced-motion: reduce) {
.os-hero__cue .icon,
.os-orbit__ring--path,
.os-orbit.is-live .os-orbit__pulse { animation: none; }.os-orbit__pulse { display: none; }
}
.os-boot { padding-top: var(--chapter-pad); padding-bottom: clamp(56px, 7vw, 112px); }
.os-boot__head { margin-bottom: clamp(24px, 4vw, 56px); }
.os-boot__lead { display: grid; gap: 18px; justify-items: start; }
.os-rail { display: none; }.os-cap { --sp: 1; border-top: 1px solid var(--line); padding-block: clamp(44px, 7vw, 96px); scroll-margin-top: calc(var(--header-h) + 12px); }
.os-cap__art { display: grid; gap: clamp(28px, 4vw, 48px); }@media (min-width: 1024px) {
.os-cap__art { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); column-gap: clamp(36px, 4.5vw, 80px); align-items: center; }
}.os-cap__text {
position: relative;
isolation: isolate;
display: grid;
gap: 16px;
align-content: start;
justify-items: start;
}.os-cap__ghost {
position: absolute;
top: -0.12em;
right: 0;
z-index: -1;
font-family: var(--font-heading);
font-size: clamp(5.5rem, 3rem + 8vw, 11rem);
line-height: 0.8;
opacity: 0.55;
pointer-events: none;
}.os-cap__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--fg-3); }
.os-cap__meta b { font-weight: 500; color: var(--accent); }
.os-cap__state { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }.os-cap__name {
max-width: 10em;
font-family: var(--font-heading);
font-size: clamp(2.1rem, 1rem + 2.4vw, 3.9rem);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--fg);
}.os-cap__statement { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); font-weight: 600; line-height: 1.3; color: var(--fg); }
.os-cap__body { max-width: 32em; color: var(--fg-2); line-height: 1.6; }
.os-cap__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.os-cap__sends { display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid var(--accent); color: var(--fg); }
.os-cap__sends .t-mono { font-size: 0.625rem; color: var(--fg-3); }
.os-cap__text .btn { margin-top: 6px; }
.os-cap__scene { display: grid; gap: 10px; min-width: 0; }
.os-cap__tag { display: flex; justify-content: flex-end; }.os-win {
--bg: var(--dc-purple-black);
--fg: var(--dc-white);
--fg-2: rgba(255, 255, 255, 0.78);
--fg-3: rgba(255, 255, 255, 0.52);
--line: rgba(255, 255, 255, 0.1);
--line-2: rgba(255, 255, 255, 0.24);
--accent: var(--dc-lime);
--panel: rgba(255, 255, 255, 0.03);
color: var(--fg);
background-color: #150e1f;
}.os-win .ui__status .os-glyph { width: 14px; height: 14px; }.os-sc {
position: relative;
aspect-ratio: 16 / 11;
overflow: hidden;
container-type: inline-size;
background:
radial-gradient(ellipse 60% 50% at 80% 0%, rgba(123, 44, 240, 0.22), transparent 70%),
#150e1f;
}@media (max-width: 599px) {
.os-sc { aspect-ratio: 1 / 1.08; }
}.os-boot--pinned .os-boot__stage { height: 100vh; height: 100svh; padding: calc(var(--header-h) + 18px) 0 26px; }.os-boot--pinned .os-boot__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
gap: 18px;
height: 100%;
}.os-boot--pinned .os-rail { display: flex; align-items: center; gap: 24px; }.os-boot--pinned .os-rail__kicker,
.os-boot--pinned .os-rail__map,
.os-boot--pinned .os-rail__list { display: none; }
.os-boot--pinned .os-caps { position: relative; height: 100%; }.os-boot--pinned .os-cap {
position: absolute;
inset: 0;
padding: 0;
border: 0;
visibility: hidden;
pointer-events: none;
transition: visibility 0s linear 0.7s;
}.os-boot--pinned .os-cap.is-active { visibility: visible; pointer-events: auto; transition: none; }
.os-boot--pinned .os-cap__art { height: 100%; align-items: center; }
.os-boot--pinned .os-cap__scene { width: min(100%, (100svh - var(--header-h) - 200px) * 1.46); justify-self: end; }
.os-boot--pinned .os-cap__text > * { transition: opacity 0.55s var(--ease-out), transform 1s var(--ease-expo); }
.os-boot--pinned .os-cap__text > :nth-child(3) { transition-delay: 0.04s; }
.os-boot--pinned .os-cap__text > :nth-child(4) { transition-delay: 0.08s; }
.os-boot--pinned .os-cap__text > :nth-child(5) { transition-delay: 0.12s; }
.os-boot--pinned .os-cap__text > :nth-child(6) { transition-delay: 0.16s; }
.os-boot--pinned .os-cap__text > :nth-child(n + 7) { transition-delay: 0.2s; }
.os-boot--pinned .os-cap:not(.is-active) .os-cap__text > * { opacity: 0; transform: translateY(26px); transition-delay: 0s; }
.os-boot--pinned .os-cap.is-past:not(.is-active) .os-cap__text > * { transform: translateY(-26px); }
.os-boot--pinned .os-cap__scene .os-win { clip-path: inset(0 0 0 0 round 10px); transition: clip-path 1.05s var(--ease-expo), opacity 0.5s var(--ease-out); }
.os-boot--pinned .os-cap:not(.is-active) .os-cap__scene .os-win { clip-path: inset(50% 0 50% 0 round 10px); opacity: 0; }
.os-boot--pinned .os-cap__tag { transition: opacity 0.5s var(--ease-out) 0.3s; }
.os-boot--pinned .os-cap:not(.is-active) .os-cap__tag { opacity: 0; transition-delay: 0s; }.os-rail__kicker { color: var(--fg-3); }
.os-rail__map { width: 100%; max-width: 210px; overflow: visible; }
.os-rail__ring { fill: none; stroke: var(--line-2); }
.os-rail__ring--in { stroke-dasharray: 2 4; }
.os-rail__wire { stroke: var(--line); }
.os-rail__draw { stroke-width: 1.5; }
.os-rail__core { fill: var(--dc-purple-black); stroke: var(--line-2); }
.os-rail__mark { fill: var(--dc-purple-bright); }
.os-rail__node circle { fill: var(--dc-purple-black); stroke: var(--line-2); transition: fill 0.4s var(--ease-out), stroke 0.4s var(--ease-out); }.os-rail__node text {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.04em;
fill: var(--fg-3);
transition: fill 0.4s var(--ease-out);
}.os-rail__node.is-done circle { stroke: rgba(197, 244, 61, 0.6); }
.os-rail__node.is-done text { fill: var(--dc-white); }
.os-rail__node.is-on circle { fill: var(--dc-lime); stroke: var(--dc-lime); }
.os-rail__node.is-on text { fill: var(--dc-purple-black); }.os-rail__count {
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-heading);
line-height: 0.85;
flex-shrink: 0;
}.os-rail__count b { font-size: clamp(2.6rem, 1rem + 3vw, 4.6rem); font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.os-rail__count span { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--fg-3); }
.os-rail__seg { flex: 1; min-width: 140px; }
.os-rail__seg i::after { transition: none; }
.os-rail__list { display: grid; border-top: 1px solid var(--line); }.os-rail__btn {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 34px;
padding: 4px 0 4px 14px;
font-size: 0.875rem;
font-weight: 500;
color: var(--fg-3);
text-align: left;
transition: color 0.3s var(--ease-out);
}.os-rail__btn::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 6px;
height: 1px;
background: currentColor;
transition: width 0.4s var(--ease-expo), background-color 0.3s;
}.os-rail__btn .t-mono { font-size: 0.625rem; }
.os-rail__btn:hover { color: var(--fg); }
.os-rail__btn.is-current { color: var(--fg); }
.os-rail__btn.is-current::before { width: 10px; background: var(--accent); }@media (min-width: 1280px) {
.os-boot--pinned .os-boot__grid { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: clamp(36px, 4vw, 72px); }.os-boot--pinned .os-rail { flex-direction: column; align-items: stretch; justify-content: center; gap: 18px; }.os-boot--pinned .os-rail__kicker,
.os-boot--pinned .os-rail__map,
.os-boot--pinned .os-rail__list { display: block; }.os-boot--pinned .os-rail__list { display: grid; }.os-boot--pinned .os-rail__seg { flex: none; min-width: 0; }
}@media (max-height: 760px) and (min-width: 1280px) {
.os-boot--pinned .os-rail__list { display: none; }
}@media (max-height: 820px) and (min-width: 1024px) {
.os-boot--pinned .os-cap__text { gap: 11px; }.os-boot--pinned .os-cap__name { font-size: clamp(2rem, 0.8rem + 2.2vw, 3.3rem); }.os-boot--pinned .os-cap__statement { font-size: 1.05rem; }.os-boot--pinned .os-cap__body { font-size: 0.9375rem; line-height: 1.5; }.os-boot--pinned .os-cap__text .btn { min-height: 46px; margin-top: 2px; }.os-boot--pinned .os-cap__text .btn__icon { width: 36px; height: 36px; }
}
.os-conv { --p: 1; }
.os-conv__stage { padding-block: var(--chapter-pad); }
.os-conv__wrap { display: grid; gap: clamp(28px, 4vw, 48px); }
.os-conv__head { display: grid; gap: 24px; }
.os-conv__title { font-size: min(var(--fs-h2), calc((100vw - var(--gutter) * 2) / 8.4)); }@media (min-width: 1024px) {
.os-conv__head { grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.8fr); column-gap: clamp(40px, 5vw, 96px); align-items: end; }.os-conv__head > .folio { grid-column: 1 / -1; }
.os-conv__title { font-size: min(var(--fs-h2), calc((100vw - var(--gutter) * 2) * 0.56 / 13.6)); }.os-conv__title .line { white-space: nowrap; }
}.os-conv__side { display: grid; gap: 22px; }
.os-conv__side .t-lead { font-size: 1.0625rem; }.os-ledger { --s: clamp(0, (var(--p) - 0.55) / 0.16, 1); display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.os-ledger__state { display: grid; overflow: clip; }
.os-ledger__state span { grid-area: 1 / 1; }.os-ledger__a { color: var(--fg-2); transform: translateY(calc(var(--s) * -110%)); }
.os-ledger__b { color: var(--accent); transform: translateY(calc((1 - var(--s)) * 110%)); }
.os-ledger__rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.os-ledger__rows div { display: grid; gap: 6px; }
.os-ledger__rows dt { font-size: 0.625rem; letter-spacing: 0.14em; color: var(--fg-3); }.os-ledger__rows dd {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem);
font-weight: 900;
line-height: 0.9;
font-variant-numeric: tabular-nums;
color: var(--fg);
}.os-conv__arena { position: relative; height: clamp(440px, 120vw, 540px); }@media (min-width: 768px) {
.os-conv__arena { height: clamp(460px, 52vw, 620px); }
}.os-conv__field {
--rx: 31cqw;
--ry: 35cqh;
--spread: 1;
--aw: 212px;
position: absolute;
inset: 0 0 34px;
container-type: size;
}.os-conv__tag { position: absolute; right: 0; bottom: 0; }.os-conv__wire {
--w: clamp(0, (var(--p) - 0.7) / 0.16, 1);
position: absolute;
left: 50%;
top: 50%;
width: hypot(calc(var(--cos) * var(--rx)), calc(var(--sin) * var(--ry)));
height: 1px;
background: linear-gradient(90deg, var(--dc-lime), rgba(197, 244, 61, 0.25));
transform-origin: 0 50%;
transform: rotate(atan2(calc(var(--sin) * var(--ry)), calc(var(--cos) * var(--rx)))) scaleX(var(--w));
opacity: var(--w);
}.os-art {
--t0: clamp(0, (var(--p) - 0.05 - var(--d)) / 0.44, 1);
--t: calc(var(--t0) * var(--t0) * (3 - 2 * var(--t0)));
--f: clamp(0, (var(--t0) - 0.8) / 0.14, 1);
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: var(--aw);
transform:
translate(-50%, -50%)
translate(
calc(var(--x0) * var(--spread) * (1 - var(--t)) * 1cqw + var(--cos) * var(--rx) * var(--t)),
calc(var(--y0) * var(--spread) * (1 - var(--t)) * 1cqh + var(--sin) * var(--ry) * var(--t))
)
rotate(calc(var(--r0) * (1 - var(--t)) * 1deg));
}.os-art__vendor {
position: relative;
display: grid;
gap: 5px;
padding: 12px 14px 13px;
border-radius: 8px;
background: var(--dc-off-white);
color: var(--dc-charcoal);
box-shadow: 0 26px 40px -22px rgba(20, 13, 29, 0.75);
opacity: calc(1 - var(--f));
transform: scale(calc(1 - var(--t) * 0.14 - var(--f) * 0.3));
}.os-art__from {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 0.5625rem;
letter-spacing: 0.12em;
color: var(--dc-muted);
}.os-art__title { font-size: 0.9375rem; line-height: 1.2; }
.os-art__meta { font-size: 0.8125rem; line-height: 1.3; color: var(--dc-muted); }
.os-art__deco { height: 0; }.os-art--login .os-art__deco {
width: 62%;
height: 22px;
margin-top: 4px;
border: 1px solid rgba(103, 33, 223, 0.3);
border-radius: 4px;
background: radial-gradient(circle, var(--dc-charcoal) 2.4px, transparent 3px) 4px 50% / 11px 100% repeat-x;
}.os-art--invoice .os-art__deco {
height: 16px;
margin-top: 4px;
border-top: 1px dashed rgba(25, 21, 31, 0.25);
background: linear-gradient(90deg, rgba(25, 21, 31, 0.14) 0 44%, transparent 44% 70%, var(--dc-charcoal) 70%) 0 8px / 100% 5px no-repeat;
}.os-art--file .os-art__vendor { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }.os-art--file .os-art__vendor::after {
content: "PDF";
position: absolute;
right: 10px;
bottom: 10px;
padding: 2px 5px;
border-radius: 3px;
background: var(--dc-purple);
font-family: var(--font-mono);
font-size: 0.5625rem;
color: #fff;
}.os-art--call .os-art__vendor { border-top: 5px solid var(--dc-purple-bright); }
.os-art--error .os-art__vendor { background: var(--dc-purple-black); color: #fff; box-shadow: inset 3px 0 0 #ff8a8a, 0 26px 40px -22px rgba(20, 13, 29, 0.75); }.os-art--error .os-art__from,
.os-art--error .os-art__meta { color: rgba(255, 255, 255, 0.62); }.os-art--brief .os-art__deco {
height: 14px;
margin-top: 2px;
background: repeating-linear-gradient(rgba(25, 21, 31, 0.16) 0 2px, transparent 2px 6px);
width: 80%;
}.os-art--ticket .os-art__vendor { border-left: 2px dashed rgba(103, 33, 223, 0.45); background: #ece9f1; }.os-art__unit {
position: absolute;
left: 50%;
top: 50%;
display: flex;
align-items: center;
gap: 10px;
width: 190px;
padding: 11px 14px;
border: 1px solid var(--dc-lime);
border-radius: 8px;
background: var(--dc-purple-black);
color: #fff;
box-shadow: 0 0 0 4px rgba(197, 244, 61, 0.08), 0 20px 40px -18px rgba(20, 13, 29, 0.8);
opacity: var(--f);
transform: translate(-50%, -50%) scale(calc(0.9 + var(--f) * 0.1));
}.os-art__unit b { font-weight: 500; color: var(--dc-lime); }
.os-art__unit span { font-family: var(--font-heading); font-size: 0.875rem; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.os-art__ok { width: 16px; height: 16px; margin-left: auto; color: var(--dc-lime); }.os-conv__core {
--c: clamp(0, (var(--p) - 0.55) / 0.22, 1);
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
display: grid;
justify-items: center;
gap: 10px;
opacity: var(--c);
transform: translate(-50%, -50%) scale(calc(0.6 + var(--c) * 0.4));
}.os-conv__disc {
display: grid;
place-items: center;
width: clamp(76px, 20cqmin, 132px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 50% 30%, #2d1b45, var(--dc-purple-black) 70%);
box-shadow:
0 0 0 10px rgba(20, 13, 29, 0.16),
0 0 0 calc(var(--c) * 28px) rgba(197, 244, 61, 0.07),
0 30px 60px -20px rgba(20, 13, 29, 0.85);
}.os-conv__mark { width: 46%; }.os-conv__name {
padding: 6px 12px;
border-radius: var(--radius-pill);
background: var(--dc-purple-black);
font-size: 0.625rem;
color: var(--dc-lime);
white-space: nowrap;
}.os-conv__final {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 28px;
padding-top: 18px;
border-top: 1px solid var(--line-2);
opacity: clamp(0, (var(--p) - 0.8) / 0.12, 1);
}.os-conv__final > span {
font-family: var(--font-heading);
font-size: clamp(1.15rem, 0.8rem + 1vw, 1.7rem);
font-weight: 900;
line-height: 1.05;
text-transform: uppercase;
}@media (max-width: 767px) {
.os-conv__field { --rx: 31cqw; --ry: 36cqh; --spread: 0.6; --aw: 150px; }.os-art__vendor { padding: 10px 11px 11px; }.os-art__title { font-size: 0.8125rem; }.os-art__meta { font-size: 0.6875rem; }.os-art__deco { display: none; }.os-art__unit { flex-direction: column; gap: 4px; width: 86px; padding: 8px 6px; text-align: center; }.os-art__unit span { font-size: 0.625rem; }.os-art__ok { display: none; }.os-ledger__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }.os-conv__name { padding: 4px 8px; font-size: 0.5rem; letter-spacing: 0.16em; }
}.os-conv--pinned .os-conv__stage { height: 100vh; height: 100svh; padding: calc(var(--header-h) + 22px) 0 24px; }
.os-conv--pinned .os-conv__wrap { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; }
.os-conv--pinned .os-conv__arena { height: auto; min-height: 300px; }
.os-sc > * { position: absolute; inset: 0; display: grid; padding: 1.2em 1.4em; font-size: clamp(9px, 2.05cqi, 14px); }
.os-k { --k: clamp(0, (var(--sp) - var(--a, 0)) / var(--l, 0.12), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 0.8em)); }.os-web { grid-template-columns: minmax(0, 1fr) 11em; gap: 1.1em; padding: 1.3em; }.os-web__browser {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
min-height: 0;
border: 1px solid var(--line-2);
border-radius: 8px;
overflow: hidden;
background: #f7f6f9;
}.os-web__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.55em 0.8em;
background: #1f1629;
font-family: var(--font-mono);
font-size: 0.78em;
}.os-web__url {
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.3em 0.9em;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.07);
color: var(--fg-2);
}.os-web__url i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--dc-lime); }
.os-web__st { display: grid; letter-spacing: 0.12em; text-transform: uppercase; }
.os-web__st b { grid-area: 1 / 1; font-weight: 500; text-align: right; }
.os-web__st-a { color: var(--fg-3); opacity: calc(1 - clamp(0, (var(--sp) - 0.9) / 0.06, 1)); }
.os-web__st-b { color: var(--dc-lime); opacity: clamp(0, (var(--sp) - 0.9) / 0.06, 1); }.os-web__page {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 1em;
min-height: 0;
padding: 1em 1.1em 1.1em;
color: #19151f;
overflow: hidden;
}.os-web__grid {
position: absolute;
inset: 0 1.1em;
background: repeating-linear-gradient(90deg, rgba(103, 33, 223, 0.1) 0 1px, transparent 1px calc(100% / 12));
opacity: calc(1 - clamp(0, (var(--sp) - 0.62) / 0.12, 1));
}.os-web__nav {
position: relative;
display: flex;
align-items: center;
gap: 1.3em;
font-size: 0.74em;
font-weight: 700;
}.os-web__logo { width: 1.7em; height: 1.7em; margin-right: auto; border-radius: 5px; background: var(--dc-purple); }
.os-web__cta { width: 5.5em; height: 1.9em; border-radius: var(--radius-pill); background: var(--dc-lime); }.os-web__hero {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 1.1em;
align-items: center;
min-height: 0;
}.os-web__copy { display: grid; gap: 0.5em; }
.os-web__copy i { display: block; width: var(--w); height: 1.25em; border-radius: 2px; background: #19151f; }
.os-web__copy .os-web__sub { height: 0.5em; margin-top: 0.3em; background: rgba(25, 21, 31, 0.28); }
.os-web__copy .os-web__pill { width: 6.5em; height: 2em; margin-top: 0.5em; border-radius: var(--radius-pill); background: var(--dc-purple); }.os-web__img {
position: relative;
height: 100%;
min-height: 5em;
border-radius: 6px;
overflow: hidden;
background: linear-gradient(135deg, #261735, #6721df);
}.os-web__img span {
position: absolute;
inset: 0;
background:
linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.3) 50%, transparent calc(50% + 0.5px)),
linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.3) 50%, transparent calc(50% + 0.5px));
}.os-web__tiles { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7em; }
.os-web__tiles i { aspect-ratio: 1 / 0.8; border-radius: 5px; border: 1px dashed rgba(103, 33, 223, 0.45); background: rgba(103, 33, 223, 0.06); }.os-web__real { position: absolute; inset: 0; opacity: 1; transform: none; clip-path: inset(0 0 calc((1 - var(--k)) * 100%) 0); }
.os-web__real img { width: 100%; height: 100%; object-fit: cover; object-position: top; }.os-web__checks {
display: grid;
align-content: center;
gap: 0.5em;
font-family: var(--font-mono);
font-size: 0.74em;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-2);
}.os-web__checks li {
display: flex;
align-items: center;
gap: 0.8em;
padding: 0.75em 0.9em;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--panel);
}.os-web__checks i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--dc-lime); box-shadow: 0 0 0.6em var(--dc-lime); }@container (max-width: 520px) {
.os-web { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }.os-web__checks { display: flex; flex-wrap: wrap; gap: 0.4em; }.os-web__checks li { padding: 0.45em 0.6em; }.os-web__nav span { display: none; }
}.os-mkt {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 1.2em;
padding: 1.3em;
}.os-mkt__serp { display: grid; align-content: start; gap: 1em; min-width: 0; }.os-mkt__search {
display: flex;
align-items: center;
gap: 0.7em;
padding: 0.7em 1em;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
font-size: 0.86em;
color: var(--fg);
}.os-mkt__search svg { width: 1.1em; height: 1.1em; flex-shrink: 0; color: var(--fg-3); }
.os-mkt__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-mkt__results { --rh: 3.7em; --r: clamp(0, (var(--sp) - 0.1) / 0.6, 1); position: relative; height: calc(var(--rh) * 5); }.os-mkt__row {
position: absolute;
left: 0;
right: 0;
top: calc(var(--j) * var(--rh));
display: grid;
align-content: center;
gap: 0.4em;
height: calc(var(--rh) - 0.45em);
padding: 0 1em;
border: 1px solid var(--line);
border-radius: 6px;
background: rgba(255, 255, 255, 0.025);
transform: translateY(calc(clamp(0, (var(--r) * 4 - 3.5 + var(--j)) * 2, 1) * var(--rh)));
}.os-mkt__dom {
font-family: var(--font-mono);
font-size: 0.74em;
color: var(--fg-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.os-mkt__row i { width: var(--w); height: 0.42em; border-radius: 2px; background: var(--line-2); }.os-mkt__row--you {
--j: 4;
z-index: 1;
border-color: var(--dc-lime);
background: #1f2414;
transform: translateY(calc(var(--r) * -4 * var(--rh)));
box-shadow: 0 1em 2em -1.2em rgba(197, 244, 61, 0.5);
}.os-mkt__row--you .os-mkt__dom { color: var(--dc-lime); }
.os-mkt__desc { font-size: 0.8em; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-mkt__side { display: grid; align-content: start; gap: 1em; min-width: 0; }.os-mkt__rank {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1em;
padding: 0.9em 1em;
border: 1px solid var(--line-2);
border-radius: 8px;
}.os-mkt__rank span { font-size: 0.68em; color: var(--fg-3); }.os-mkt__rank b {
font-family: var(--font-heading);
font-size: 3.4em;
font-weight: 900;
line-height: 0.8;
color: var(--dc-lime);
font-variant-numeric: tabular-nums;
}.os-mkt__rank b::before { content: "#"; font-size: 0.5em; vertical-align: top; opacity: 0.6; }.os-mkt__answer {
display: grid;
gap: 0.45em;
padding: 0.9em 1em;
border: 1px solid rgba(123, 44, 240, 0.7);
border-radius: 8px;
background: rgba(103, 33, 223, 0.22);
font-size: 0.84em;
line-height: 1.4;
}.os-mkt__answer .t-mono { font-size: 0.72em; color: #cbb3ff; }
.os-mkt__bars { display: grid; gap: 0.65em; }.os-mkt__bars li {
display: grid;
grid-template-columns: 8em minmax(0, 1fr);
align-items: center;
gap: 0.7em;
font-size: 0.74em;
color: var(--fg-2);
transform: none;
}.os-mkt__bars i { position: relative; height: 0.5em; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }.os-mkt__bars i::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--gradient-signal);
transform: scaleX(calc(var(--v) * var(--k)));
transform-origin: left;
}.os-mkt__trend { display: grid; gap: 0.5em; padding: 0.8em 1em; border: 1px solid var(--line); border-radius: 8px; }
.os-mkt__trend .t-mono { font-size: 0.62em; color: var(--fg-3); }
.os-mkt__trend svg { width: 100%; height: 4.2em; overflow: visible; }
.os-mkt__area { fill: rgba(123, 44, 240, 0.35); opacity: clamp(0, (var(--sp) - 0.3) / 0.4, 1); }.os-mkt__line {
fill: none;
stroke: var(--dc-lime);
stroke-width: 1.4;
stroke-linejoin: round;
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - clamp(0, (var(--sp) - 0.12) / 0.6, 1) * 100);
}@container (max-width: 520px) {
.os-mkt__trend { grid-column: 1 / -1; }.os-mkt__trend svg { height: 3em; }.os-mkt { grid-template-columns: minmax(0, 1fr); align-content: start; }.os-mkt__results { --rh: 3.6em; }.os-mkt__side { grid-template-columns: auto minmax(0, 1fr); }.os-mkt__bars { display: none; }
}.os-ds {
display: block;
background:
linear-gradient(rgba(103, 33, 223, 0.06) 1px, transparent 1px) 0 0 / 1.4em 1.4em,
linear-gradient(90deg, rgba(103, 33, 223, 0.06) 1px, transparent 1px) 0 0 / 1.4em 1.4em,
#efedf3;
color: #19151f;
}.os-ds__board {
--t: clamp(0, (var(--sp) - 0.06) / 0.62, 1);
--g: clamp(0, (var(--sp) - 0.78) / 0.14, 1);
position: relative;
display: grid;
grid-template-columns: 1.15fr 1fr 1fr;
grid-template-rows: 1fr 1fr 0.8fr;
grid-template-areas:
"aa sw sw"
"aa mark btn"
"scale scale grid";
gap: 0.9em;
height: 100%;
}.os-ds__board::after {
content: "";
position: absolute;
inset: -0.45em;
border: 1px solid rgba(103, 33, 223, 0.5);
border-radius: 10px;
opacity: var(--g);
pointer-events: none;
}.os-ds__tile {
position: relative;
display: grid;
min-width: 0;
min-height: 0;
padding: 0.9em 1em;
border: 1px solid rgba(103, 33, 223, 0.16);
border-radius: 8px;
background: #fff;
box-shadow: 0 1em 2em -1.4em rgba(38, 23, 53, 0.45);
overflow: hidden;
transform:
translate(calc(var(--dx) * (1 - var(--t)) * 2%), calc(var(--dy) * (1 - var(--t)) * 2%))
rotate(calc(var(--dr) * (1 - var(--t)) * 1deg));
}.os-ds__tile--aa { grid-area: aa; align-content: end; background: var(--dc-purple); color: #fff; }
.os-ds__tile--aa b { font-family: var(--font-heading); font-size: 6em; font-weight: 900; line-height: 0.8; }
.os-ds__tile--aa .t-mono { margin-top: 0.8em; font-size: 0.6em; color: rgba(255, 255, 255, 0.75); }
.os-ds__tile--sw { grid-area: sw; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; }
.os-ds__tile--sw span { display: grid; align-content: start; gap: 0.25em; min-width: 0; }
.os-ds__tile--sw i { height: 2.6em; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(25, 21, 31, 0.1); }
.os-ds__tile--sw b { font-size: 0.72em; }
.os-ds__tile--sw small { font-family: var(--font-mono); font-size: 0.56em; color: var(--dc-muted); }
.os-ds__tile--mark { grid-area: mark; place-items: center; }
.os-ds__mark { width: 3.4em; }
.os-ds__tile--btn { grid-area: btn; place-items: center; background: #19151f; }.os-ds__btn {
display: inline-flex;
align-items: center;
gap: 0.7em;
padding: 0.35em 0.35em 0.35em 1em;
border-radius: var(--radius-pill);
background: var(--dc-lime);
font-size: 0.74em;
font-weight: 700;
white-space: nowrap;
}.os-ds__btn i { width: 1.9em; height: 1.9em; border-radius: 50%; background: #19151f; }
.os-ds__tile--scale { grid-area: scale; align-content: center; gap: 0.35em; }
.os-ds__tile--scale span { display: grid; grid-template-columns: 5em minmax(0, 1fr); align-items: center; gap: 0.6em; }.os-ds__tile--scale small {
font-family: var(--font-mono);
font-size: 0.58em;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dc-muted);
}.os-ds__tile--scale i {
width: calc(100% - var(--s) * 20%);
height: calc(1.2em - var(--s) * 0.26em);
border-radius: 2px;
background: #19151f;
opacity: calc(1 - var(--s) * 0.2);
}.os-ds__tile--grid { grid-area: grid; align-content: center; justify-items: start; gap: 0.5em; background: #f7f6f9; }
.os-ds__tile--grid > * { opacity: var(--g); }.os-ds__check {
display: grid;
place-items: center;
width: 2em;
height: 2em;
border-radius: 50%;
background: var(--dc-purple);
color: #fff;
}.os-ds__check .icon { width: 1.1em; height: 1.1em; }
.os-ds__tile--grid .t-mono { font-size: 0.56em; letter-spacing: 0.1em; color: #19151f; }@container (max-width: 520px) {
.os-ds__board {
grid-template-columns: 1fr 1.3fr;
grid-template-rows: 1fr 0.8fr 0.9fr 0.8fr;
grid-template-areas:
"aa sw"
"aa mark"
"scale scale"
"btn grid";
}.os-ds__tile--sw { grid-template-columns: repeat(2, minmax(0, 1fr)); }.os-ds__tile--sw i { height: 1.4em; }.os-ds__tile--sw small { display: none; }
}.os-vid { --ph: var(--sp); grid-template-rows: minmax(0, 1fr) auto; gap: 0.9em; padding: 1.2em; }.os-vid__viewer {
position: relative;
justify-self: center;
height: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
border-radius: 6px;
overflow: hidden;
background: #000;
}.os-vid__shot {
position: absolute;
inset: 0;
display: grid;
place-content: center;
padding: 1em;
text-align: center;
opacity: clamp(0, (var(--ph) - var(--s0)) * 60, 1);
}.os-vid__shot b { position: relative; font-family: var(--font-heading); font-weight: 900; line-height: 0.9; text-transform: uppercase; }
.os-vid__shot--0 { background: radial-gradient(ellipse at 30% 30%, #7b2cf0, #261735 70%); }
.os-vid__shot--0 b { font-size: 3.4em; color: #fff; }.os-vid__shot--1 img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 6%;
transform: scale(calc(1.18 - var(--ph) * 0.2));
}.os-vid__shot--2 { background: repeating-linear-gradient(-45deg, #261735 0 1.2em, #2d1b40 1.2em 2.4em); }
.os-vid__shot--2 b { max-width: 9em; font-size: 2em; color: var(--dc-lime); }
.os-vid__shot--3 { background: var(--dc-lime); }
.os-vid__shot--3 b { font-size: 2.6em; color: var(--dc-purple-black); }.os-vid__lower {
position: absolute;
left: 0.8em;
bottom: 0.8em;
padding: 0.3em 0.6em;
border-radius: 3px;
background: rgba(20, 13, 29, 0.75);
font-size: 0.56em;
color: #fff;
}.os-vid__safe { position: absolute; inset: 8%; border: 1px dashed rgba(255, 255, 255, 0.22); pointer-events: none; }.os-vid__tc {
position: absolute;
top: 0.7em;
right: 0.8em;
padding: 0.25em 0.5em;
border-radius: 3px;
background: rgba(0, 0, 0, 0.55);
font-size: 0.62em;
letter-spacing: 0.08em;
color: #fff;
font-variant-numeric: tabular-nums;
}.os-vid__tl {
position: relative;
display: grid;
gap: 0.3em;
padding: 0.6em;
border: 1px solid var(--line);
border-radius: 6px;
background: rgba(255, 255, 255, 0.025);
}.os-vid__ruler {
display: flex;
justify-content: space-between;
margin-left: 2.6em;
font-family: var(--font-mono);
font-size: 0.54em;
color: var(--fg-3);
}.os-vid__track { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: center; height: 1.9em; }
.os-vid__track b { font-family: var(--font-mono); font-size: 0.6em; font-weight: 500; color: var(--fg-3); }
.os-vid__lane { position: relative; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, 0.03); }.os-vid__clip {
position: absolute;
top: 0.18em;
bottom: 0.18em;
left: var(--l);
width: calc(var(--w) - 2px);
display: flex;
align-items: center;
padding: 0 0.6em;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
background: rgba(123, 44, 240, 0.72);
font-family: var(--font-mono);
font-size: 0.56em;
font-style: normal;
color: #fff;
white-space: nowrap;
overflow: hidden;
}.os-vid__clip--t { border-color: rgba(197, 244, 61, 0.5); background: rgba(197, 244, 61, 0.14); color: var(--dc-lime); }.os-vid__wave {
position: absolute;
inset: 0.25em 0;
background: repeating-linear-gradient(90deg, rgba(197, 244, 61, 0.6) 0 1px, transparent 1px 3px);
-webkit-mask: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.35) 18%, #000 30%, rgba(0, 0, 0, 0.5) 46%, #000 58%, rgba(0, 0, 0, 0.3) 70%, #000 84%, rgba(0, 0, 0, 0.5));
mask: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.35) 18%, #000 30%, rgba(0, 0, 0, 0.5) 46%, #000 58%, rgba(0, 0, 0, 0.3) 70%, #000 84%, rgba(0, 0, 0, 0.5));
}.os-vid__heads {
position: absolute;
top: 0.4em;
bottom: 0.4em;
left: 3.2em;
right: 0.6em;
pointer-events: none;
}.os-vid__head { position: absolute; inset: 0; transform: translateX(calc(var(--ph) * 100%)); }.os-vid__head::before {
content: "";
position: absolute;
left: -1px;
top: 0;
bottom: 0;
width: 2px;
background: var(--dc-lime);
box-shadow: 0 0 0.6em var(--dc-lime);
}.os-vid__head::after {
content: "";
position: absolute;
left: -0.4em;
top: -0.2em;
width: 0.8em;
height: 0.6em;
background: var(--dc-lime);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}.os-auto { grid-template-rows: minmax(0, 1.3fr) auto; gap: 0.6em; }
.os-auto__flow { position: relative; min-height: 0; }.os-auto__seg {
--f: clamp(0, var(--sp) / 0.8 * 4 - var(--s), 1);
position: absolute;
left: var(--l);
top: var(--t);
width: var(--w);
height: var(--h);
min-width: 1px;
min-height: 1px;
background: var(--line-2);
}.os-auto__seg::after {
content: "";
position: absolute;
inset: 0;
background: var(--dc-lime);
box-shadow: 0 0 0.5em rgba(197, 244, 61, 0.6);
transform: scaleX(var(--f));
transform-origin: left;
}.os-auto__seg--l::after { transform-origin: right; }
.os-auto__seg--d::after { transform: scaleY(var(--f)); transform-origin: top; }.os-auto__node {
position: absolute;
left: var(--x);
top: var(--y);
z-index: 1;
min-height: 2.9em;
gap: 0.6em;
padding: 0.5em 0.9em;
font-size: 0.72em;
transform: translate(-50%, -50%);
background-color: #1a1124;
}.os-auto__node i { font-style: normal; color: var(--fg-3); }.os-auto__payload {
position: absolute;
left: 50%;
top: 76%;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.35em 0.7em;
border-radius: var(--radius-pill);
background: var(--dc-lime);
font-family: var(--font-mono);
font-size: 0.6em;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--dc-purple-black);
white-space: nowrap;
transform: translate(-50%, -190%);
box-shadow: 0 0.6em 1.6em -0.6em rgba(197, 244, 61, 0.7);
}.os-auto__payload.is-js { left: 0; top: 0; }
.os-auto__payload i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--dc-purple-black); }
.os-auto__log { gap: 0; font-size: 0.72em; }
.os-auto__log li { grid-template-columns: 5.6em 1.2em minmax(0, 1fr); padding: 0.35em 0; }
.os-auto__log li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }@container (max-width: 520px) {
.os-auto__node { padding: 0.45em 0.6em; }.os-auto__node i { display: none; }.os-auto__log li:nth-child(-n + 2) { display: none; }
}.os-rag {
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 0.7em;
}.os-rag__q {
justify-self: end;
display: flex;
align-items: center;
gap: 0.8em;
max-width: 82%;
padding: 0.6em 1em;
border-radius: 14px 14px 4px 14px;
background: var(--dc-purple);
font-size: 0.82em;
line-height: 1.35;
}.os-rag__q .t-mono { font-size: 0.7em; color: var(--dc-lime); }
.os-rag__net { position: relative; min-height: 0; container-type: size; }
.os-rag__bound { position: absolute; inset: 6% 12%; border: 1px dashed rgba(197, 244, 61, 0.45); border-radius: 50%; }.os-rag__bound span {
position: absolute;
top: 0;
left: 50%;
padding: 0.2em 0.7em;
border-radius: var(--radius-pill);
background: #150e1f;
font-size: 0.58em;
color: var(--dc-lime);
white-space: nowrap;
transform: translate(-50%, -50%);
}.os-rag__edge {
--dx: calc((var(--x) - 50) * 1cqw);
--dy: calc((var(--y) - 52) * 1cqh);
position: absolute;
left: 50%;
top: 52%;
width: hypot(var(--dx), var(--dy));
height: 1px;
background: var(--line-2);
transform-origin: 0 50%;
transform: rotate(atan2(var(--dy), var(--dx)));
}.os-rag__edge--hit::after {
content: "";
position: absolute;
inset: -0.5px 0;
background: var(--dc-lime);
box-shadow: 0 0 0.5em rgba(197, 244, 61, 0.6);
transform: scaleX(clamp(0, (var(--sp) - 0.2) / 0.3, 1));
transform-origin: left;
}.os-rag__doc {
position: absolute;
left: var(--x);
top: var(--y);
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.35em 0.6em;
border: 1px solid var(--line-2);
border-radius: 5px;
background: #1a1124;
font-family: var(--font-mono);
font-size: 0.62em;
color: var(--fg-2);
white-space: nowrap;
transform: translate(-50%, -50%);
}.os-rag__doc i { width: 0.7em; height: 0.9em; border-radius: 1px; background: var(--fg-3); }.os-rag__doc.is-hit::after {
content: "";
position: absolute;
inset: -1px;
border: 1px solid var(--dc-lime);
border-radius: inherit;
box-shadow: 0 0 1.2em -0.3em var(--dc-lime);
opacity: clamp(0, (var(--sp) - 0.42) / 0.12, 1);
}.os-rag__doc.is-hit i { background: var(--dc-lime); }.os-rag__core {
position: absolute;
left: 50%;
top: 52%;
z-index: 1;
display: grid;
justify-items: center;
gap: 0.35em;
padding: 0.7em 1em;
border: 1px solid var(--dc-lime);
border-radius: 10px;
background: #1f1530;
font-family: var(--font-mono);
font-size: 0.66em;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dc-lime);
transform: translate(-50%, -50%);
box-shadow: 0 0 2.4em -0.6em rgba(197, 244, 61, 0.5);
}.os-rag__core .os-glyph { width: 1.8em; height: 1.8em; }.os-rag__out {
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
gap: 0.4em;
font-size: 0.52em;
color: var(--fg-3);
}.os-rag__out i { width: 0.7em; height: 0.7em; border-radius: 50%; border: 1px solid var(--fg-3); opacity: 0.6; }.os-rag__ans {
justify-self: start;
display: grid;
gap: 0.35em;
max-width: 82%;
padding: 0.7em 1em;
border: 1px solid var(--line-2);
border-radius: 14px 14px 14px 4px;
background: rgba(255, 255, 255, 0.04);
}.os-rag__ans p { font-size: 0.92em; font-weight: 600; }
.os-rag__ans .t-mono { font-size: 0.6em; color: var(--dc-lime); }@container (max-width: 520px) {
.os-rag__bound { inset: 8% 4%; }.os-rag__doc { font-size: 0.56em; }.os-rag__out { display: none; }
}.os-agent {
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 1em;
}.os-agent__brief {
align-self: center;
display: grid;
gap: 0.35em;
padding: 0.8em 0.9em;
border: 1px solid rgba(123, 44, 240, 0.6);
border-radius: 6px;
background: rgba(103, 33, 223, 0.16);
font-size: 0.78em;
line-height: 1.4;
}.os-agent__brief .t-mono { font-size: 0.72em; color: #cbb3ff; }
.os-agent__brief p:first-of-type { font-weight: 600; }.os-agent__main {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
gap: 0.8em;
min-width: 0;
padding: 1em;
border: 1px solid var(--line);
border-radius: 8px;
background: rgba(0, 0, 0, 0.25);
}.os-agent__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.4em 1em;
font-family: var(--font-mono);
font-size: 0.74em;
color: var(--dc-lime);
}.os-agent__head .t-mono { font-size: 0.86em; color: var(--fg-3); }.os-agent__steps {
display: grid;
align-content: start;
gap: 0.6em;
font-size: 0.8em;
line-height: 1.35;
color: var(--fg-2);
}.os-agent__step {
--k: clamp(0, (var(--sp) - var(--a)) / var(--l), 1);
display: grid;
grid-template-columns: 1.35em minmax(0, 1fr);
align-items: center;
column-gap: 0.75em;
row-gap: 0.35em;
opacity: calc(0.32 + var(--k) * 0.68);
}.os-agent__step b { font-weight: 500; color: var(--dc-lime); font-family: var(--font-mono); }
.os-agent__mark { position: relative; width: 1.35em; height: 1.35em; border: 1px solid var(--line-2); border-radius: 50%; }.os-agent__mark::after {
content: "\2713";
position: absolute;
inset: -1px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--dc-lime);
font-size: 0.8em;
font-style: normal;
font-weight: 700;
color: var(--dc-purple-black);
opacity: var(--k);
}.os-agent__bar {
grid-column: 2;
position: relative;
height: 0.3em;
border-radius: var(--radius-pill);
background: var(--line);
overflow: hidden;
}.os-agent__bar::after {
content: "";
position: absolute;
inset: 0;
background: var(--dc-lime);
transform: scaleX(var(--k));
transform-origin: left;
}.os-agent__gate {
--wait: calc(clamp(0, (var(--sp) - 0.68) / 0.06, 1) * (1 - clamp(0, (var(--sp) - 0.9) / 0.05, 1)));
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6em;
min-height: 2.8em;
padding-top: 0.8em;
border-top: 1px dashed var(--line);
font-size: 0.76em;
}.os-agent__wait,
.os-agent__btns { display: inline-flex; align-items: center; gap: 0.55em; opacity: var(--wait); }
.os-agent__btns i { padding: 0.35em 0.9em; border: 1px solid var(--line-2); border-radius: var(--radius-pill); font-style: normal; font-weight: 600; }
.os-agent__btns .os-agent__yes { border-color: var(--dc-lime); background: var(--dc-lime); color: var(--dc-purple-black); }.os-agent__done {
position: absolute;
left: 0;
top: 0.8em;
bottom: 0;
display: flex;
align-items: center;
gap: 0.5em;
font-weight: 600;
color: var(--dc-lime);
opacity: clamp(0, (var(--sp) - 0.9) / 0.05, 1);
}.os-agent__done .icon { width: 1.3em; height: 1.3em; }
.os-agent__rules { display: grid; align-content: start; border-top: 1px solid var(--line); }
.os-agent__rules div { display: grid; gap: 0.25em; padding: 0.75em 0; border-bottom: 1px solid var(--line); }
.os-agent__rules dt { font-family: var(--font-mono); font-size: 0.58em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.os-agent__rules dd { margin: 0; font-size: 0.8em; color: var(--fg); }@container (max-width: 520px) {
.os-agent { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }.os-agent__rules { grid-template-columns: 1fr 1fr; column-gap: 1em; }.os-agent__rules div { padding: 0.45em 0; }
}
.os-stack { padding-block: var(--chapter-pad); }
.os-stack__grid { display: grid; gap: clamp(40px, 6vw, 72px); }@media (min-width: 1024px) {
.os-stack__grid { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; }.os-stack__controls { order: 0; }.os-map { position: sticky; top: calc(var(--header-h) + 32px); }
}@media (min-width: 1280px) {
.os-stack.is-tabs .os-stack__grid {
grid-template-columns: minmax(0, 3.3fr) minmax(0, 4.9fr) minmax(0, 3.8fr);
grid-template-areas: "tabs map plan";
column-gap: clamp(36px, 3.6vw, 64px);
align-items: center;
}.os-stack.is-tabs .os-stack__controls { display: contents; }.os-stack.is-tabs .os-stack__tabs { grid-area: tabs; }.os-stack.is-tabs .os-stack__panels { grid-area: plan; margin-top: 0; }.os-stack.is-tabs .os-map { grid-area: map; position: relative; top: auto; }.os-stack.is-tabs .os-goal { min-height: 88px; }.os-stack.is-tabs .os-goal__label { font-size: clamp(1.6rem, 0.7rem + 1.15vw, 2.3rem); }.os-stack.is-tabs .os-plan__steps li { grid-template-columns: 2.4em minmax(0, 1fr); padding: 4px 0 10px; }.os-stack.is-tabs .os-plan__role { grid-column: 2; font-size: 0.875rem; }.os-stack.is-tabs .os-plan__line { font-size: 1.125rem; }
}.os-stack__tabs { display: grid; border-top: 1px solid var(--line-2); }.os-stack__tabs[hidden],
.os-plan[hidden] { display: none; }.os-goal {
position: relative;
display: grid;
grid-template-columns: 3.2em minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: center;
column-gap: 14px;
row-gap: 4px;
width: 100%;
min-height: 84px;
padding: 16px 4px 16px 0;
border-bottom: 1px solid var(--line-2);
text-align: left;
color: var(--fg-2);
transition: color 0.35s var(--ease-out);
}.os-goal::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.7s var(--ease-expo);
}.os-goal__num { grid-row: 1 / span 2; color: var(--fg-3); transition: color 0.35s var(--ease-out); }.os-goal__label {
font-family: var(--font-heading);
font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.6rem);
font-weight: 900;
line-height: 0.95;
text-transform: uppercase;
color: var(--fg);
transition: transform 0.6s var(--ease-expo), color 0.35s var(--ease-out);
}.os-goal__hint { grid-column: 2; font-size: 0.9375rem; color: var(--fg-3); }.os-goal__arrow {
grid-column: 3;
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--fg-2);
transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.6s var(--ease-expo);
}.os-goal__arrow .icon { width: 16px; height: 16px; }@media (hover: hover) {
.os-goal:hover .os-goal__label { transform: translateX(6px); }.os-goal:hover .os-goal__arrow { border-color: var(--accent); color: var(--accent); }
}.os-goal[aria-selected="true"]::before { transform: scaleX(1); }
.os-goal[aria-selected="true"] .os-goal__num { color: var(--accent); }
.os-goal[aria-selected="true"] .os-goal__label { color: var(--accent); }.os-goal[aria-selected="true"] .os-goal__arrow {
border-color: var(--accent);
background-color: var(--accent);
color: var(--bg);
transform: rotate(-45deg);
}@media (max-width: 1023px) {
.os-stack.is-tabs .os-stack__grid { row-gap: 28px; }.os-stack.is-tabs .os-stack__controls { display: contents; }.os-stack.is-tabs .os-map { order: 1; max-width: 460px; }.os-stack.is-tabs .os-stack__panels { order: 2; margin-top: 0; }
}@media (max-width: 767px) {
.os-stack__tabs { grid-template-columns: 1fr 1fr; gap: 8px; border: 0; }.os-goal {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
align-content: start;
min-height: 96px;
padding: 14px;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
}.os-goal::before { left: 14px; right: 14px; }.os-goal__num,
.os-goal__hint { grid-row: auto; grid-column: 1; }.os-goal__label { font-size: 1.45rem; }.os-goal__hint { font-size: 0.8125rem; line-height: 1.35; }.os-goal__arrow { display: none; }.os-goal[aria-selected="true"] { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
}.os-stack__panels { margin-top: 0; }
.os-stack.is-tabs .os-stack__panels { margin-top: 32px; }
.os-plan { display: grid; gap: 16px; justify-items: start; }
.os-plan + .os-plan { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line-2); }
.os-stack.is-tabs .os-plan { margin: 0; padding: 0; border: 0; }
.os-plan:focus-visible { outline-offset: 8px; }.os-plan__title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 14px;
font-family: var(--font-heading);
font-size: var(--fs-h3);
font-weight: 900;
text-transform: uppercase;
color: var(--fg);
}.os-plan__title .t-mono { color: var(--accent); }
.os-plan__hint { font-family: var(--font-body); font-size: 1rem; font-weight: 400; text-transform: none; color: var(--fg-3); }.os-stack.is-tabs .os-plan__title {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}.os-plan__line { max-width: 30em; font-size: var(--fs-lead); line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.os-plan__order { margin-top: 6px; color: var(--fg-3); }
.os-plan__steps { width: 100%; border-top: 1px solid var(--line-2); }.os-plan__steps li {
display: grid;
grid-template-columns: 2.4em minmax(0, 13em) minmax(0, 1fr);
align-items: center;
gap: 0 16px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}.os-plan__n {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--dc-lime);
color: var(--dc-purple-black);
letter-spacing: 0;
align-self: center;
}.os-plan__cap {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
font-weight: 700;
color: var(--fg);
transition: color 0.3s var(--ease-out);
}.os-plan__cap .t-mono { font-size: 0.6875rem; color: var(--accent); }
.os-plan__cap:hover { color: var(--accent); }
.os-plan__role { padding-block: 4px; font-size: 0.9375rem; line-height: 1.45; color: var(--fg-2); }
.os-plan__cta,
.os-conv__final .link { min-height: 44px; }
.os-plan__cta::after,
.os-conv__final .link::after { bottom: 8px; }
.os-plan__cta { margin-top: 6px; }@media (max-width: 599px) {
.os-plan__steps li { grid-template-columns: 2.4em minmax(0, 1fr); }.os-plan__role { grid-column: 2; }
}.os-map {
position: relative;
width: 100%;
max-width: 580px;
aspect-ratio: 1;
justify-self: center;
container-type: inline-size;
}.os-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.os-map__ring { fill: none; stroke: var(--line-2); vector-effect: non-scaling-stroke; }
.os-map__ring--dash { stroke: var(--line); stroke-dasharray: 2 6; }
.os-map__spoke { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 0.5s var(--ease-out); }.os-map__spoke.is-on {
stroke: var(--accent);
stroke-width: 1.5;
stroke-dasharray: 3 5;
animation: osFlow 1.2s linear infinite;
animation-play-state: paused;
}.os-map.is-visible .os-map__spoke.is-on { animation-play-state: running; }@keyframes osFlow {
to { stroke-dashoffset: -16; }
}.os-map__route {
fill: none;
stroke: var(--accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 0;
}.os-map__node {
position: absolute;
left: var(--x);
top: var(--y);
display: grid;
justify-items: center;
gap: 8px;
transform: translate(-50%, -24%);
}.os-map__dot {
position: relative;
display: grid;
place-items: center;
width: clamp(40px, 11cqi, 60px);
aspect-ratio: 1;
border: 1px solid var(--line-2);
border-radius: 50%;
background: var(--bg);
color: var(--fg-3);
transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), color 0.5s var(--ease-out), transform 0.6s var(--ease-expo), box-shadow 0.5s var(--ease-out);
}.os-map__dot .os-glyph { width: 42%; height: 42%; }.os-map__label {
display: flex;
gap: 6px;
font-family: var(--font-mono);
font-size: clamp(9px, 2.3cqi, 11px);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-3);
white-space: nowrap;
transition: color 0.4s var(--ease-out);
}.os-map__label b { font-weight: 500; color: var(--accent); }.os-map__order {
position: absolute;
top: -4px;
right: -8px;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--dc-lime);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-style: normal;
font-weight: 500;
color: var(--dc-purple-black);
transform: scale(0);
transition: transform 0.5s var(--ease-expo);
}.os-map__node.is-on .os-map__dot {
border-color: var(--accent);
background-color: var(--accent);
color: var(--bg);
transform: scale(1.08);
box-shadow: 0 14px 34px -14px var(--accent);
}.os-map__node.is-on .os-map__label { color: var(--fg); }
.os-map__node.is-on .os-map__order { transform: scale(1); }.os-map__core {
position: absolute;
left: 50%;
top: 50%;
display: grid;
place-content: center;
justify-items: center;
gap: 8px;
width: 27%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--dc-purple-black);
box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent), 0 30px 60px -24px rgba(38, 23, 53, 0.7);
transform: translate(-50%, -50%);
}.os-map__mark { width: 3.4cqi; min-width: 26px; }
.os-map__core .t-mono { font-size: clamp(7px, 1.7cqi, 10px); letter-spacing: 0.16em; color: var(--dc-lime); white-space: nowrap; }@media (prefers-reduced-motion: reduce) {
.os-map__spoke.is-on { animation: none; }
}