.ab-hero {
--fx: 48;
--fy: 44;
padding-bottom: clamp(28px, 3.4vw, 52px);
}.ab-hero__inner {
row-gap: clamp(24px, 3vw, 40px);
}.ab-hero__title {
--fit: 10.9;
position: relative;
z-index: 2;
}@media (max-width: 767px) {
.ab-hero__title {
--fit: 7.9;
}
}.ab-hero__intro {
position: relative;
z-index: 2;
display: grid;
gap: 18px;
max-width: 30em;
}.ab-hero__lead {
max-width: 24em;
}.ab-hero__meta {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 8px 0;
padding-top: 18px;
border-top: 1px solid var(--line);
color: var(--fg-3);
font-size: 0.6875rem;
}.ab-hero__meta li {
display: inline-flex;
align-items: center;
}.ab-hero__meta li + li::before {
content: "";
width: 28px;
height: 1px;
margin-inline: 14px;
background: currentColor;
opacity: 0.5;
}.ab-hero__meta li:first-child {
color: var(--fg-2);
}@media (min-width: 1024px) {
.ab-hero__inner {
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: auto 1fr auto auto;
column-gap: clamp(16px, 2vw, 32px);
}.ab-hero__inner > .hmeta {
grid-column: 1 / -1;
grid-row: 1;
}.ab-hero__intro {
grid-column: 1 / span 4;
grid-row: 2;
align-self: start;
padding-top: clamp(8px, 2vh, 32px);
}.ab-hero__title {
grid-column: 1 / -1;
grid-row: 3;
align-self: end;
}.ab-hero__meta {
grid-column: 1 / -1;
grid-row: 4;
}
}.ab-field {
--px: 0;
--py: 0;
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 1 / 1.02;
margin-block: 8px 12px;
pointer-events: none;
}@media (min-width: 1024px) {
.ab-field {
position: absolute;
top: calc(var(--header-h) + clamp(56px, 8vh, 96px));
right: 0;
bottom: 24%;
left: 30%;
width: auto;
aspect-ratio: auto;
margin: 0;
}
}@media (max-width: 1023px) {
.ab-hero__inner {
display: flex;
flex-direction: column;
}.ab-field {
order: 0;
max-width: 560px;
margin-inline: auto;
}
}.ab-field__beams {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}.ab-beam {
fill: none;
stroke: var(--line-2);
stroke-width: 1;
vector-effect: non-scaling-stroke;
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--draw, 1) * 100);
}.ab-beam--lit {
stroke: var(--dc-lime);
stroke-width: 1.5;
stroke-dashoffset: calc(100 - var(--k, 0) * 100);
opacity: calc(0.25 + var(--k, 0) * 0.75);
}.ab-beam--flow {
stroke: var(--dc-lime);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 5 100;
stroke-dashoffset: 105;
opacity: 0;
animation: abFlow 3.6s var(--ease-in-out) infinite;
animation-delay: calc(var(--i) * -0.6s);
}@keyframes abFlow {
0% { stroke-dashoffset: 105; opacity: 0; }
12% { opacity: 1; }
85% { opacity: 1; }
100% { stroke-dashoffset: 5; opacity: 0; }
}.ab-field__streams {
position: absolute;
inset: 0;
transform: translate3d(calc(var(--px) * -10px), calc(var(--py) * -8px), 0);
transition: transform 1.2s var(--ease-expo);
}.ab-stream {
--t: 0.3;
position: absolute;
left: calc((var(--x) + (var(--fx) - var(--x)) * var(--t)) * 1%);
top: calc((var(--y) + (var(--fy) - var(--y)) * var(--t)) * 1%);
width: 0;
height: 0;
will-change: transform, opacity;
}@media (max-width: 1023px) {
.ab-stream {
--t: var(--tm);
}
}.ab-stream__dot {
position: absolute;
left: -4px;
top: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--fg);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 14%, transparent);
}.ab-stream__tag {
position: absolute;
top: 0;
left: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 13px 7px 11px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--bg) 88%, transparent);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
color: var(--fg);
transform: translateY(-50%);
}.ab-stream--l .ab-stream__tag {
left: auto;
right: 14px;
}.ab-stream__n {
color: var(--accent);
}.ab-stream__verb {
padding-left: 10px;
border-left: 1px solid var(--line-2);
color: var(--fg-3);
letter-spacing: 0.1em;
}@media (max-width: 767px) {
.ab-stream__verb {
display: none;
}.ab-stream__tag {
gap: 7px;
padding: 5px 9px 5px 8px;
font-size: 0.625rem;
letter-spacing: 0.1em;
}.ab-stream__dot {
left: -3px;
top: -3px;
width: 6px;
height: 6px;
}.ab-stream__tag {
left: 10px;
}.ab-stream--l .ab-stream__tag {
right: 10px;
}
}.ab-core {
--p: 0;
position: absolute;
left: calc(var(--fx) * 1%);
top: calc(var(--fy) * 1%);
width: clamp(92px, 9vw, 138px);
aspect-ratio: 1;
transform:
translate(-50%, -50%)
translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 0)
scale(calc(1 + var(--p) * 0.22));
transition: transform 1.2s var(--ease-expo);
}.ab-core__disc {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border: 1px solid var(--line-2);
border-radius: 50%;
background:
radial-gradient(circle at 50% 40%, rgba(123, 44, 240, 0.35), transparent 70%),
var(--dc-purple-black);
box-shadow: 0 0 calc(20px + var(--p) * 60px) calc(var(--p) * 10px) rgba(197, 244, 61, calc(0.08 + var(--p) * 0.2));
}.ab-core__mark {
width: 40%;
height: auto;
}.ab-core__ring {
position: absolute;
inset: -14%;
border: 1px solid color-mix(in srgb, var(--dc-lime) 45%, transparent);
border-radius: 50%;
opacity: 0;
animation: abRing 3.2s var(--ease-out) infinite;
}.ab-core__ring--2 {
animation-delay: -1.6s;
}@keyframes abRing {
0% { transform: scale(0.75); opacity: 0.8; }
100% { transform: scale(1.7); opacity: 0; }
}.ab-core__cap {
position: absolute;
top: calc(100% + 16px);
left: 50%;
display: grid;
justify-items: center;
font-size: 0.6875rem;
white-space: nowrap;
color: var(--fg-2);
transform: translateX(-50%);
}.ab-core__cap > span {
grid-area: 1 / 1;
transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-expo);
}.ab-core__b {
color: var(--accent);
opacity: 0;
transform: translateY(6px);
}.ab-core.is-one .ab-core__a {
opacity: 0;
transform: translateY(-6px);
}.ab-core.is-one .ab-core__b {
opacity: 1;
transform: none;
}.ab-field.is-paused .ab-beam--flow,
.ab-field.is-paused .ab-core__ring {
animation-play-state: paused;
}.ab-who__grid {
display: grid;
gap: clamp(32px, 4vw, 56px);
}.ab-who__head {
display: grid;
align-content: start;
gap: 24px;
}.ab-who__statement {
font-size: clamp(1.55rem, 0.85rem + 2.35vw, 3.5rem);
font-weight: 500;
line-height: 1.16;
letter-spacing: -0.025em;
color: var(--fg);
text-wrap: pretty;
}.ab-who__statement .w {
transition: color 0.45s var(--ease-out);
}.ab-who__statement.is-reading .w {
color: var(--fg-3);
}.ab-who__statement.is-reading .w.is-lit {
color: inherit;
}.ab-who__d {
font-style: normal;
color: var(--accent);
white-space: nowrap;
}.ab-who__d::before {
content: attr(data-n);
margin-right: 0.3em;
font-family: var(--font-mono);
font-size: 0.26em;
font-weight: 500;
letter-spacing: 0.12em;
vertical-align: 1.9em;
color: var(--fg-3);
}.ab-who__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--line-2);
}.ab-who__fact {
display: grid;
gap: 10px;
align-content: start;
padding: 18px 16px 18px 0;
border-bottom: 1px solid var(--line);
}.ab-who__fact dt {
font-size: 0.6875rem;
color: var(--fg-3);
}.ab-who__fact dd {
font-family: var(--font-heading);
font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.7rem);
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.ab-who__fact:first-child {
grid-column: 1 / -1;
}@media (min-width: 768px) {
.ab-who__facts {
grid-template-columns: repeat(5, minmax(0, 1fr));
}.ab-who__fact:first-child {
grid-column: auto;
}.ab-who__fact + .ab-who__fact {
padding-left: 18px;
border-left: 1px solid var(--line);
}
}@media (min-width: 1024px) {
.ab-who__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(16px, 2vw, 32px);
row-gap: clamp(48px, 6vw, 96px);
}.ab-who__head {
grid-column: 1 / span 4;
position: sticky;
top: calc(var(--header-h) + 32px);
}.ab-who__title .line {
white-space: nowrap;
}.ab-who__title {
font-size: clamp(2rem, 0.8rem + 2.6vw, 4rem);
}.ab-who__statement {
grid-column: 5 / -1;
}.ab-who__facts {
grid-column: 1 / -1;
}
}.ab-week__inner {
display: grid;
gap: 20px;
}.ab-week__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 36px;
}.ab-week__count {
display: inline-flex;
align-items: baseline;
gap: 14px;
color: var(--fg-3);
}.ab-week__count .t-mono {
font-size: 0.6875rem;
}.ab-week__count b {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.8rem);
font-weight: 900;
line-height: 1;
color: var(--fg);
font-variant-numeric: tabular-nums;
}.ab-week__count--us b {
color: var(--accent);
}.ab-week__bar .illus {
margin-left: auto;
}.ab-week__free {
font-family: var(--font-heading);
font-size: clamp(1.7rem, 1rem + 2.2vw, 3.4rem);
line-height: 0.95;
text-transform: uppercase;
color: var(--fg);
opacity: var(--f, 1);
}.ab-task {
position: relative;
display: grid;
align-content: space-between;
gap: 6px;
min-width: 0;
padding: 11px 13px;
border: 1px solid color-mix(in srgb, var(--dc-lime) 50%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--dc-lime) 6%, transparent);
transition: border-color 0.45s var(--ease-out), background-color 0.45s var(--ease-out);
}.ab-task__when {
font-size: 0.625rem;
letter-spacing: 0.12em;
color: var(--fg-3);
}.ab-task__label {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3;
color: var(--fg);
}.ab-task__tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.625rem;
letter-spacing: 0.12em;
color: var(--dc-lime);
transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-expo);
}.ab-task__tag .icon {
width: 13px;
height: 13px;
}.ab-task.is-open {
border-style: dashed;
border-color: var(--line-2);
background: var(--panel);
}.ab-task.is-open .ab-task__tag {
opacity: 0;
transform: translateX(-6px);
}@media (min-width: 1024px) {
.ab-week.is-pinned {
display: grid;
align-content: center;
height: 100vh;
height: 100svh;
padding-top: calc(var(--header-h) - 20px);
}.ab-week__board {
--slot: clamp(62px, 7.4vh, 76px);
--mid: 40px;
--gap: 8px;
--cgap: 10px;
--drop: calc(2 * var(--slot) + var(--mid) + 3 * var(--gap));
position: relative;
display: grid;
grid-template-columns: 136px repeat(5, minmax(0, 1fr));
grid-template-rows: 30px var(--slot) var(--slot) var(--mid) var(--slot) var(--slot);
gap: var(--gap) var(--cgap);
}.ab-week__day {
grid-row: 1;
grid-column: calc(var(--d) + 2);
align-self: end;
padding-left: 13px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ab-week__lane {
grid-column: 1 / -1;
margin: calc(var(--gap) * -1) calc(var(--cgap) * -1);
padding: 14px 16px;
border-radius: 14px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ab-week__lane .t-mono {
display: block;
max-width: 100px;
font-size: 0.6875rem;
line-height: 1.5;
}.ab-week__lane--you {
grid-row: 2 / 4;
border: 1px dashed var(--line-2);
}.ab-week__lane--us {
grid-row: 5 / 7;
border: 1px solid color-mix(in srgb, var(--dc-lime) 35%, transparent);
background: color-mix(in srgb, var(--dc-lime) 3%, transparent);
color: var(--dc-lime);
}.ab-week__lane--us .t-mono {
color: var(--dc-lime);
}.ab-week__rule {
grid-row: 4;
grid-column: 2 / -1;
position: relative;
align-self: center;
height: 1px;
background: var(--line);
}.ab-week__rule .wedge {
position: absolute;
left: 50%;
top: 50%;
width: 14px;
transform: translate(-50%, -50%) rotate(112.5deg);
}.ab-week__free {
grid-row: 2 / 4;
grid-column: 2 / -1;
align-self: center;
justify-self: center;
text-align: center;
}.ab-week__tasks {
grid-row: 5 / 7;
grid-column: 2 / -1;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: var(--slot) var(--slot);
gap: var(--gap) var(--cgap);
}.ab-task {
grid-column: calc(var(--d) + 1);
grid-row: calc(var(--s) + 1);
transform: translate3d(0, calc((var(--k, 1) - 1) * var(--drop)), 0);
will-change: transform;
}.ab-task__day {
display: none;
}.ab-task__label {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}.ab-task__tag {
position: absolute;
top: 11px;
right: 12px;
}.ab-task__tag .icon + * {
display: none;
}
}@media (max-width: 1023px) {
.ab-week__board {
display: grid;
gap: 14px;
}.ab-week__day,
.ab-week__lane,
.ab-week__rule {
display: none;
}.ab-week__tasks {
display: grid;
gap: 8px;
}.ab-task {
grid-template-columns: 88px minmax(0, 1fr);
align-items: center;
gap: 4px 12px;
min-height: 60px;
}.ab-task__tag {
grid-column: 2;
}.ab-task__when {
grid-row: 1 / span 2;
}.ab-week__free {
order: 2;
padding-top: 18px;
border-top: 1px solid var(--line);
}
}.ab-diff__rows {
border-top: 1px solid var(--line-2);
}.ab-diff__row {
display: grid;
gap: 14px 24px;
padding-block: clamp(26px, 3.2vw, 48px);
border-bottom: 1px solid var(--line-2);
}.ab-diff__n {
color: var(--accent);
font-size: 0.75rem;
}.ab-diff__name {
font-family: var(--font-heading);
font-size: var(--fs-h3);
font-weight: 900;
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.ab-diff__usual,
.ab-diff__ours {
display: grid;
gap: 10px;
align-content: start;
}.ab-diff__k {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ab-diff__k .wedge {
width: 0.9em;
background: var(--accent);
transform: rotate(22.5deg);
}.ab-diff__strike {
--s: 1;
justify-self: start;
font-size: clamp(1.1rem, 0.95rem + 0.55vw, 1.5rem);
line-height: 1.35;
text-decoration: none;
color: var(--fg-3);
background: linear-gradient(var(--accent), var(--accent)) 0 58% / calc(var(--s) * 100%) 2px no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}.ab-diff__row.is-js .ab-diff__strike {
--s: var(--sv, 0);
}.ab-diff__copy {
font-size: var(--fs-lead);
line-height: 1.45;
color: var(--fg);
text-wrap: pretty;
}@media (min-width: 1024px) {
.ab-diff__row {
grid-template-columns: 56px minmax(0, 3.2fr) minmax(0, 4fr) minmax(0, 4fr);
column-gap: clamp(24px, 3vw, 56px);
align-items: start;
}.ab-diff__n {
padding-top: 0.4em;
}
}.ab-disc__grid {
display: grid;
gap: clamp(36px, 5vw, 64px);
}@media (min-width: 1024px) {
.ab-disc__grid {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
column-gap: clamp(40px, 5vw, 96px);
align-items: center;
}
}.ab-ring {
position: relative;
width: 100%;
max-width: 620px;
margin-inline: auto;
}.ab-ring__plate {
position: relative;
width: 100%;
aspect-ratio: 1;
}.ab-ring__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}.ab-ring__orbit {
fill: none;
stroke: var(--line-2);
stroke-width: 1;
stroke-dasharray: 2 6;
vector-effect: non-scaling-stroke;
}.ab-ring__orbit--in {
stroke: var(--line);
stroke-dasharray: none;
}.ab-ring__chord {
fill: none;
stroke: var(--fg);
stroke-opacity: 0.2;
stroke-width: 1;
vector-effect: non-scaling-stroke;
transition: stroke 0.4s var(--ease-out), stroke-opacity 0.4s var(--ease-out);
}.ab-ring.has-sel .ab-ring__chord {
stroke-opacity: 0.1;
}.ab-ring.has-sel .ab-ring__chord.is-on {
stroke: var(--dc-lime);
stroke-opacity: 0.85;
}.ab-ring__flow {
fill: none;
stroke: var(--dc-lime);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 4 100;
stroke-dashoffset: 104;
vector-effect: non-scaling-stroke;
animation: abFlow 2.4s var(--ease-in-out) infinite;
}.ab-ring__flow:nth-child(2) { animation-delay: -0.8s; }
.ab-ring__flow:nth-child(3) { animation-delay: -1.6s; }.ab-ring.is-paused .ab-ring__flow {
animation-play-state: paused;
}.ab-ring__node {
fill: var(--fg);
stroke: var(--bg);
stroke-width: 3;
transition: fill 0.4s var(--ease-out), r 0.4s var(--ease-expo);
}.ab-ring__node.is-on {
fill: var(--dc-lime);
}.ab-ring__node.is-sel {
fill: var(--dc-lime);
r: 8;
}.ab-ring__core {
position: absolute;
left: 50%;
top: 50%;
display: grid;
place-items: center;
align-content: center;
gap: 8px;
width: 30%;
aspect-ratio: 1;
border: 1px solid var(--line-2);
border-radius: 50%;
background:
radial-gradient(circle at 50% 35%, rgba(123, 44, 240, 0.45), transparent 70%),
var(--dc-purple-black);
box-shadow: 0 30px 80px -30px rgba(20, 13, 29, 0.8);
transform: translate(-50%, -50%);
}.ab-ring__mark {
width: 32%;
height: auto;
}.ab-ring__core .t-mono {
font-size: 0.625rem;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.78);
}.ab-ring__label,
.ab-ring__tab {
position: absolute;
left: calc(50% + var(--c) * 37.5%);
top: calc(50% + var(--s) * 37.5%);
transform: translate(-50%, -50%);
}.ab-ring__label {
padding: 6px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
background: var(--dc-purple-black);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
}.ab-ring__label b {
font-weight: 500;
color: var(--dc-lime);
}.ab-ring.is-tabs .ab-ring__labels {
display: none;
}.ab-ring__tab {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 6px 18px 6px 8px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: var(--radius-pill);
background: var(--dc-purple-black);
color: #fff;
white-space: nowrap;
transition:
background-color 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
color 0.4s var(--ease-out),
box-shadow 0.4s var(--ease-out);
}.ab-ring__tn {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.24);
font-size: 0.625rem;
letter-spacing: 0.04em;
color: var(--dc-lime);
transition: inherit;
}.ab-ring__tname {
font-family: var(--font-heading);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.01em;
}.ab-ring__tab:hover {
border-color: var(--dc-lime);
}.ab-ring__tab[aria-selected="true"] {
border-color: var(--dc-lime);
background: var(--dc-lime);
color: var(--dc-purple-black);
box-shadow: var(--shadow-lime);
}.ab-ring__tab[aria-selected="true"] .ab-ring__tn {
border-color: var(--dc-purple-black);
background: var(--dc-purple-black);
color: var(--dc-lime);
}.ab-ring__tab:focus-visible {
outline-color: var(--dc-lime);
outline-offset: 4px;
}@media (max-width: 1023px) {
.ab-ring {
display: flex;
flex-direction: column;
gap: 28px;
}.ab-ring__plate {
max-width: 340px;
margin-inline: auto;
}.ab-ring__labels {
display: none;
}.ab-ring__tabs {
order: -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}.ab-ring__tabs[hidden] {
display: none;
}.ab-ring__tab {
position: static;
transform: none;
min-width: 0;
}.ab-ring__tname {
font-size: 0.85rem;
overflow: hidden;
text-overflow: ellipsis;
}
}@media (min-width: 1024px) {
.ab-ring__tabs {
position: absolute;
inset: 0;
}
}.ab-disc__panels {
display: grid;
gap: 56px;
}.ab-disc__panels.is-tabs > .ab-panel {
grid-area: 1 / 1;
}.ab-disc__panels.is-tabs > .ab-panel[hidden] {
display: grid;
visibility: hidden;
}.ab-panel {
display: grid;
gap: 18px;
align-content: start;
}.ab-disc__panels:not(.is-tabs) .ab-panel + .ab-panel {
padding-top: 40px;
border-top: 1px solid var(--line-2);
}.ab-panel__n {
font-size: 0.6875rem;
color: var(--fg-3);
}.ab-panel__n b {
font-weight: 500;
color: var(--accent);
}.ab-panel__name {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5rem);
font-weight: 900;
line-height: 0.9;
text-transform: uppercase;
color: var(--fg);
}.ab-panel__line {
font-size: var(--fs-h3);
font-weight: 500;
line-height: 1.2;
color: var(--fg);
}.ab-panel__cols {
display: grid;
gap: 24px;
margin-top: 8px;
padding-top: 22px;
border-top: 1px solid var(--line-2);
}@media (min-width: 600px) {
.ab-panel__cols {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
}.ab-panel__k {
display: block;
margin-bottom: 12px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ab-panel__covers {
display: flex;
flex-wrap: wrap;
gap: 8px;
}.ab-panel__covers .chip {
color: var(--fg);
}.ab-panel__hands {
display: grid;
}.ab-panel__hands li {
display: grid;
gap: 2px;
padding-block: 9px;
border-bottom: 1px dashed var(--line-2);
}.ab-panel__hands li:first-child {
padding-top: 0;
}.ab-panel__to {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--fg);
}.ab-panel__to .icon {
width: 15px;
height: 15px;
color: var(--accent);
}.ab-panel__what {
padding-left: 23px;
font-size: var(--fs-small);
color: var(--fg-2);
}.ab-panel__seen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 24px;
margin-top: 6px;
}.ab-panel__seen .ab-panel__k {
width: 100%;
margin: 0;
}.ab-panel__seen .link {
min-height: 44px;
}.ab-geo__grid {
display: grid;
gap: clamp(40px, 5vw, 72px);
align-items: center;
}@media (min-width: 1024px) {
.ab-geo__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(40px, 4.5vw, 88px);
}.ab-geo__title {
font-size: clamp(2rem, 0.9rem + 3vw, 4.4rem);
}.ab-geo__title .line {
white-space: nowrap;
}
}.ab-geo__side {
display: grid;
gap: 24px;
}.ab-geo__side .folio__label {
white-space: nowrap;
}.ab-geo__lead {
max-width: 28em;
}.ab-geo__list {
margin-top: 12px;
border-top: 1px solid var(--line-2);
}.ab-geo__btn {
position: relative;
display: grid;
grid-template-columns: 2.6em minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
width: 100%;
min-height: 66px;
padding: 12px 10px 12px 14px;
border-bottom: 1px solid var(--line);
text-align: left;
transition: background-color 0.35s var(--ease-out);
}.ab-geo__btn[disabled] {
cursor: default;
color: inherit;
}.ab-geo__btn::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 2px;
border-radius: 2px;
background: var(--dc-lime);
transform: scaleY(0);
transition: transform 0.5s var(--ease-expo);
}.ab-geo__btn:not([disabled]):hover,
.ab-geo__btn[aria-pressed="true"] {
background: var(--panel);
}.ab-geo__btn:not([disabled]):hover::before,
.ab-geo__btn[aria-pressed="true"]::before {
transform: none;
}.ab-geo__btn:focus-visible {
outline-offset: -2px;
}.ab-geo__iso {
font-family: var(--font-heading);
font-size: 1.35rem;
line-height: 1;
color: var(--fg-3);
transition: color 0.35s var(--ease-out);
}.ab-geo__btn.is-hq .ab-geo__iso,
.ab-geo__btn[aria-pressed="true"] .ab-geo__iso {
color: var(--dc-lime);
}.ab-geo__where {
display: grid;
gap: 4px;
min-width: 0;
}.ab-geo__name {
font-weight: 700;
line-height: 1.25;
color: var(--fg);
}.ab-geo__hq {
margin-left: 6px;
padding: 3px 7px;
border: 1px solid rgba(197, 244, 61, 0.55);
border-radius: var(--radius-sm);
font-size: 0.5625rem;
font-style: normal;
vertical-align: 2px;
color: var(--dc-lime);
}.ab-geo__meta {
font-size: 0.625rem;
letter-spacing: 0.12em;
color: var(--fg-3);
}.ab-geo__hours::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 6px;
border-radius: 50%;
background: currentColor;
vertical-align: 1px;
opacity: 0.7;
}.ab-geo__hours.is-open {
color: var(--dc-lime);
}.ab-geo__time {
font-family: var(--font-heading);
font-size: clamp(1.35rem, 1rem + 0.9vw, 1.9rem);
line-height: 1;
color: var(--fg);
font-variant-numeric: tabular-nums;
}.ab-globe {
position: relative;
margin: 0;
padding: clamp(14px, 2vw, 28px) clamp(12px, 1.8vw, 26px) 0;
border: 1px solid var(--line);
border-radius: 14px;
background:
radial-gradient(ellipse 60% 55% at 50% 45%, rgba(103, 33, 223, 0.24), transparent 72%),
rgba(20, 13, 29, 0.6);
}.ab-globe__stage {
position: relative;
}.ab-globe__flat {
position: relative;
}.ab-globe__flat img {
width: 100%;
opacity: 0.78;
}.ab-globe__fpin {
position: absolute;
width: 0;
height: 0;
}.ab-globe__fpin::before {
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}.ab-globe__fpin.is-hq::before {
background: var(--dc-lime);
box-shadow: 0 0 0 5px rgba(197, 244, 61, 0.22);
}.ab-globe__fpin b,
.ab-globe__pin b {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.12em;
}.ab-globe__fpin b {
position: absolute;
left: 9px;
top: -20px;
padding: 2px 7px;
border-radius: var(--radius-pill);
background: rgba(20, 13, 29, 0.92);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
}.ab-globe.is-globe .ab-globe__stage {
aspect-ratio: 1;
touch-action: pan-y;
cursor: grab;
}.ab-globe.is-drag .ab-globe__stage {
cursor: grabbing;
}.ab-globe.is-globe .ab-globe__flat {
display: none;
}.ab-globe__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}.ab-globe__pin {
position: absolute;
left: 0;
top: 0;
display: inline-flex;
align-items: center;
gap: 7px;
margin: -34px 0 0 10px;
padding: 5px 10px 5px 9px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-pill);
background: rgba(20, 13, 29, 0.9);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
color: #fff;
pointer-events: none;
will-change: transform, opacity;
transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}.ab-globe__pin b {
color: rgba(255, 255, 255, 0.55);
}.ab-globe__pin.is-hq {
border-color: rgba(197, 244, 61, 0.6);
color: var(--dc-lime);
}.ab-globe__pin.is-hq b {
color: var(--dc-lime);
}.ab-globe__pin.is-sel {
border-color: var(--dc-lime);
background: var(--dc-lime);
color: var(--dc-purple-black);
}.ab-globe__pin.is-sel b {
color: var(--dc-purple-black);
}.ab-globe__pin time {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.06em;
opacity: 0.8;
}.ab-globe__cap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 6px 16px;
margin-top: clamp(10px, 1.4vw, 18px);
padding: 14px 0 16px;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-3);
}@media (max-width: 599px) {
.ab-globe__pin {
gap: 5px;
padding: 4px 8px;
font-size: 0.66rem;
}.ab-globe__pin span {
display: none;
}.ab-globe__pin.is-sel span,
.ab-globe__pin.is-hq span {
display: inline;
}
}.ab-prin__list {
border-top: 1px solid var(--line-2);
}.ab-prin__item {
position: relative;
display: grid;
gap: 10px 32px;
padding-block: clamp(22px, 2.8vw, 40px);
border-bottom: 1px solid var(--line-2);
}.ab-prin__n {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.6875rem;
color: var(--accent);
}.ab-prin__title {
font-family: var(--font-heading);
font-size: clamp(1.85rem, 0.8rem + 3.7vw, 5.2rem);
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.012em;
text-transform: uppercase;
color: var(--fg);
transition: color 0.7s var(--ease-out), transform 0.8s var(--ease-expo);
}.ab-prin__list.is-reading .ab-prin__item:not(.is-read) .ab-prin__title {
color: transparent;
-webkit-text-stroke: 1px var(--fg-3);
}.ab-prin__gloss {
max-width: 26em;
color: var(--fg-2);
text-wrap: pretty;
}@media (min-width: 1024px) {
.ab-prin__item {
grid-template-columns: 80px minmax(0, 8fr) minmax(0, 3fr);
align-items: center;
}
}@media (hover: hover) and (min-width: 1024px) {
.ab-prin__item:hover .ab-prin__title {
transform: translateX(14px);
}
}.ab-prin__final {
display: grid;
gap: 28px;
margin-top: clamp(72px, 9vw, 160px);
}.ab-prin__philo {
--fit: 17.4;
}.ab-prin__sign {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ab-prin__sign .wedge {
background: var(--accent);
transform: rotate(22.5deg);
}@media (min-width: 768px) {
.ab-prin__philo .line:last-child {
text-align: right;
}.ab-prin__sign {
justify-self: end;
}
}@media (max-width: 767px) {
.ab-prin__philo {
--fit: 10.6;
}
}.is-motion .ab-field:not(.is-in) .ab-stream__tag,
.is-motion .ab-field:not(.is-in) .ab-stream__dot,
.is-motion .ab-field:not(.is-in) .ab-core__disc,
.is-motion .ab-field:not(.is-in) .ab-core__cap {
opacity: 0;
}.is-motion .ab-field:not(.is-in) .ab-beam {
--draw: 0;
}