.ds-hero__inner {
grid-template-rows: auto 1fr auto;
}.ds-hero__type {
--ds-fit: 6.8;
position: relative;
align-self: center;
margin-block: clamp(12px, 3vw, 40px) clamp(4px, 1vw, 16px);
}.ds-hero__title,
.ds-hero__swap {
--fit: var(--ds-fit);
}.is-motion:not(.is-ready) .ds-hero__title {
opacity: 0;
}.ds-hero__line {
display: block;
white-space: nowrap;
padding-top: 0.3em;
margin-top: -0.3em;
}.ds-hero.is-intro .ds-hero__line {
overflow: clip;
}.ds-hero__line--2 {
padding-left: 0.62em;
color: transparent;
-webkit-text-stroke: max(1.5px, 0.011em) var(--fg);
}.ds-hero__line--3 {
color: var(--accent);
clip-path: inset(-0.4em 0 -0.2em calc(var(--swap, 0) * 100%));
}.ds-hero__title .c {
display: inline-block;
transform-origin: 50% 88%;
}.ds-hero__title .w {
display: inline-block;
white-space: nowrap;
}.ds-hero__text {
position: relative;
z-index: 0;
display: inline-block;
}.ds-hero__line--3 .ds-hero__text::before {
content: "";
position: absolute;
left: -0.04em;
right: -0.06em;
bottom: 0.04em;
z-index: -1;
height: 0.3em;
background: var(--dc-lime);
transform: scaleX(var(--hl, 1));
transform-origin: left;
}.ds-hero__swap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: block;
font-family: var(--font-heading);
font-size: min(var(--fs-mega), calc((100vw - var(--gutter) * 2) / var(--fit)));
line-height: 0.87;
letter-spacing: -0.016em;
text-transform: uppercase;
white-space: nowrap;
color: var(--fg);
pointer-events: none;
}.ds-hero__swap-text {
display: block;
clip-path: inset(-0.4em calc(100% - var(--swap, 0) * 100%) -0.2em 0);
}.ds-hero__swap::after {
content: "";
position: absolute;
top: -0.08em;
bottom: -0.02em;
left: calc(var(--swap, 0) * 100%);
width: 3px;
background: var(--dc-purple);
opacity: min(1, calc(var(--swap, 0) * 30), calc((1 - var(--swap, 0)) * 30));
}.ds-hero__guide {
position: absolute;
left: 0;
right: 0;
height: 0;
border-top: 1px dashed var(--line-2);
pointer-events: none;
font-size: min(var(--fs-mega), calc((100vw - var(--gutter) * 2) / var(--ds-fit)));
}.ds-hero__guide--cap {
top: 0.012em;
}.ds-hero__guide--base {
top: 0.63em;
}.ds-hero__guide i {
position: absolute;
right: 0;
bottom: 6px;
font-family: var(--font-mono);
font-size: 0.625rem;
font-style: normal;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-3);
}.ds-hero__guide--base i {
top: 7px;
bottom: auto;
}.ds-hero__spec {
position: absolute;
right: 0;
top: 1.3em;
display: grid;
gap: 4px;
justify-items: end;
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-3);
}.ds-hero__spec span:first-child {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--fg);
}.ds-hero__spec .wedge {
width: 0.9em;
transform: rotate(202.5deg);
background: var(--accent);
}.ds-hero__foot {
display: grid;
gap: 24px;
padding-top: 22px;
border-top: 1px solid var(--line);
}.ds-hero__readout {
display: none;
}.ds-hero__cue {
display: inline-flex;
align-items: center;
gap: 14px;
min-height: 48px;
justify-self: start;
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--fg);
}.ds-hero__cue-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid var(--line-2);
border-radius: 50%;
transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}.ds-hero__cue-icon .icon {
width: 16px;
height: 16px;
transition: transform 0.6s var(--ease-expo);
}.ds-hero__cue:hover .ds-hero__cue-icon {
background: var(--dc-lime);
border-color: var(--dc-lime);
color: var(--dc-purple-black);
}.ds-hero__cue:hover .icon {
transform: translateY(3px);
}@media (min-width: 768px) {
.ds-hero__type {
--ds-fit: 7.35;
}
}@media (max-width: 767px) {
.ds-hero__spec {
position: static;
justify-items: start;
grid-auto-flow: column;
justify-content: start;
gap: 14px;
margin-bottom: 18px;
font-size: 0.625rem;
}.ds-hero__spec span:last-child,
.ds-hero__guide i {
display: none;
}.ds-hero__guide--cap {
top: calc(0.012em + 2rem);
}.ds-hero__guide--base {
top: calc(0.7em + 2rem);
}.ds-hero__line--2 {
padding-left: 0;
}
.ds-hero__line--1 {
font-size: 1.7em;
}.ds-hero__line--3,
.ds-hero__swap-text {
font-size: 1.08em;
}.ds-hero__guide {
font-size: calc(1.7 * min(var(--fs-mega), calc((100vw - var(--gutter) * 2) / var(--ds-fit))));
}
}@media (min-width: 1024px) {
.ds-hero__foot {
grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
align-items: end;
column-gap: clamp(24px, 4vw, 72px);
}.ds-hero__cue {
grid-column: 3;
justify-self: end;
}.ds-hero__readout.is-on {
display: grid;
grid-template-columns: repeat(3, auto) 1fr;
align-items: end;
gap: 6px 22px;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
}.ds-hero__readout span {
display: grid;
gap: 4px;
}.ds-hero__readout b {
font-weight: 500;
}.ds-hero__readout em {
font-style: normal;
font-size: 1.1rem;
letter-spacing: 0.04em;
color: var(--fg);
font-variant-numeric: tabular-nums;
}.ds-hero__readout .ds-hero__hint {
align-self: end;
justify-self: end;
display: inline-flex;
padding-bottom: 3px;
color: var(--accent);
}
}.ds-board {
padding-bottom: clamp(72px, 8vw, 140px);
}.ds-board .chapter__head {
margin-bottom: clamp(32px, 4vw, 56px);
}.ds-board__stage {
position: relative;
}.ds-board__stage::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(123, 44, 240, 0.16), transparent 70%);
opacity: var(--glow, 0);
transition: opacity 0.6s var(--ease-out);
}.ds-board__bar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 24px;
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-3);
}.ds-board__bar b {
font-weight: 500;
color: var(--accent);
}.ds-board__status {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--fg);
}.ds-board__grid {
--g: 12px;
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--g);
}.ds-board__grid::before {
--period: calc((100% + var(--g)) / 12);
content: "";
position: absolute;
inset: -8px 0;
pointer-events: none;
background: repeating-linear-gradient(90deg,
rgba(197, 244, 61, 0.22) 0 1px,
transparent 1px calc(var(--period) - var(--g)),
rgba(197, 244, 61, 0.22) calc(var(--period) - var(--g)) calc(var(--period) - var(--g) + 1px),
transparent 0 var(--period));
opacity: calc(var(--pin, 0) * 0.9);
}.ds-mod {
--m-bg: #1c1427;
--m-fg: #fff;
--m-fg3: rgba(255, 255, 255, 0.58);
--m-line: rgba(255, 255, 255, 0.1);
--m-line2: rgba(255, 255, 255, 0.24);
--m-acc: var(--dc-lime);
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
min-height: 0;
padding: clamp(12px, 1.1vw, 18px);
border-radius: var(--radius-md);
background: var(--m-bg);
color: var(--m-fg);
box-shadow: inset 0 0 0 1px var(--m-line), 0 34px 60px -36px rgba(0, 0, 0, 0.85);
container-type: inline-size;
transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out);
}.ds-skin--paper {
--m-bg: #f7f6f9;
--m-fg: #19151f;
--m-fg3: #696370;
--m-line: rgba(103, 33, 223, 0.14);
--m-line2: rgba(103, 33, 223, 0.3);
--m-acc: #6721df;
}.ds-skin--plum {
--m-bg: #261735;
}.ds-skin--lime {
--m-bg: #c5f43d;
--m-fg: #140d1d;
--m-fg3: rgba(20, 13, 29, 0.7);
--m-line: rgba(20, 13, 29, 0.14);
--m-line2: rgba(20, 13, 29, 0.3);
--m-acc: #5313cb;
}.ds-mod__label,
.ds-mod__meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.16em;
line-height: 1.3;
text-transform: uppercase;
color: var(--m-fg3);
}.ds-mod__label {
color: var(--m-fg);
}.ds-mod__n {
color: var(--m-acc);
}.ds-mod__rule {
width: 16px;
height: 1px;
background: currentColor;
opacity: 0.5;
}.ds-mod__meta {
margin-top: auto;
}.ds-mod__tape {
position: absolute;
top: -10px;
left: 50%;
width: 58px;
height: 20px;
margin-left: -29px;
background: rgba(247, 246, 249, 0.5);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
transform: rotate(-5deg);
opacity: var(--pin, 0);
pointer-events: none;
}.ds-mod:nth-child(even) .ds-mod__tape {
transform: rotate(4deg);
left: 30%;
}.ds-type {
flex: 1;
display: grid;
grid-template-rows: minmax(0, 1fr) auto auto;
gap: 12px;
min-height: 0;
}.ds-type__aa {
position: relative;
align-self: end;
font-family: var(--font-heading);
font-size: min(44cqi, 13rem);
line-height: 0.74;
color: var(--m-fg);
}.ds-type__aa span {
display: block;
}.ds-type__g {
position: absolute;
left: 0;
right: 0;
border-top: 1px dashed var(--m-acc);
opacity: 0.55;
}.ds-type__g--cap { top: -0.056em; }
.ds-type__g--x { top: 0.15em; opacity: 0.3; }
.ds-type__g--base { bottom: 0.07em; }.ds-type__faces {
display: grid;
border-top: 1px solid var(--m-line);
}.ds-type__face {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 2px 12px;
padding-block: 7px;
border-bottom: 1px solid var(--m-line);
}.ds-type__name {
font-size: clamp(0.95rem, 5.4cqi, 1.5rem);
line-height: 1.1;
}.ds-type__face--heading .ds-type__name {
font-family: var(--font-heading);
text-transform: uppercase;
}.ds-type__face--body .ds-type__name {
font-family: var(--font-body);
font-weight: 500;
}.ds-type__face--mono .ds-type__name {
font-family: var(--font-mono);
font-size: clamp(0.8rem, 4.2cqi, 1.15rem);
text-transform: uppercase;
letter-spacing: 0.08em;
}.ds-type__role,
.ds-type__scale {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--m-fg3);
}.ds-pal {
flex: 1;
display: flex;
min-height: 120px;
border-radius: var(--radius-sm);
overflow: hidden;
}.ds-pal li {
display: flex;
flex: var(--w) 1 0;
min-width: 46px;
transition: flex-grow 0.7s var(--ease-expo);
}.ds-pal li:hover,
.ds-pal li:focus-within {
flex-grow: calc(var(--w) + 14);
}.ds-pal__sw {
position: relative;
flex: 1;
display: flex;
align-items: flex-end;
gap: 4px;
padding: 10px 6px;
background: var(--c);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: left;
}.ds-pal__sw.is-light {
color: #140d1d;
}.ds-pal__sw:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
box-shadow: inset 0 0 0 6px #140d1d;
}.ds-pal__name,
.ds-pal__hex {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}.ds-pal__hex {
opacity: 0.75;
}.ds-pal__sw.is-copied::after {
content: "Copied";
position: absolute;
top: 8px;
left: 6px;
font-size: 0.5625rem;
}.ds-obj {
position: relative;
flex: 1;
min-height: 150px;
display: grid;
place-items: center;
perspective: 800px;
}.ds-obj__floor {
position: absolute;
left: 4%;
right: 4%;
bottom: 2%;
height: 46%;
background-image:
linear-gradient(rgba(197, 244, 61, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(197, 244, 61, 0.2) 1px, transparent 1px);
background-size: 22px 22px;
background-position: center bottom;
transform: rotateX(72deg);
transform-origin: 50% 100%;
-webkit-mask: radial-gradient(closest-side, #000, transparent);
mask: radial-gradient(closest-side, #000, transparent);
}.ds-obj__rig {
position: relative;
width: min(34cqi, 150px);
aspect-ratio: 284 / 289;
transform-style: preserve-3d;
transform: rotateX(-12deg) rotateY(-32deg);
}.ds-obj__layer {
position: absolute;
inset: 0;
transform: translateZ(calc((var(--i) - 5.5) * 0.36cqi));
}.ds-obj__layer svg {
width: 100%;
height: 100%;
}.ds-obj__layer .mark-d {
fill: color-mix(in srgb, #5313cb calc(30% + var(--i) * 4%), #0b0612);
}.ds-obj__layer .mark-wedge {
fill: color-mix(in srgb, #c9ed2d calc(30% + var(--i) * 4%), #0b0612);
}.ds-obj__layer:last-child .mark-d {
fill: #7b2cf0;
}.ds-obj__layer:last-child .mark-wedge {
fill: #c9ed2d;
}.ds-ui {
flex: 1;
display: grid;
align-content: space-evenly;
gap: 12px;
}.ds-ui__row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}.ds-ui__btn {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 4px 4px 4px 16px;
border-radius: var(--radius-pill);
background: var(--dc-lime);
color: #140d1d;
font-size: 0.8125rem;
font-weight: 700;
}.ds-ui__well {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #140d1d;
color: var(--dc-lime);
}.ds-ui__well .icon {
width: 13px;
height: 13px;
}.ds-ui__btn--ghost {
padding: 4px 16px;
background: transparent;
color: var(--m-fg);
box-shadow: inset 0 0 0 1px var(--m-line2);
}.ds-ui__switch {
display: inline-flex;
align-items: center;
gap: 12px;
justify-self: start;
min-height: 44px;
font-size: 0.875rem;
font-weight: 500;
color: var(--m-fg);
}.ds-ui__track {
position: relative;
width: 46px;
height: 26px;
border-radius: var(--radius-pill);
background: var(--m-line);
box-shadow: inset 0 0 0 1px var(--m-line2);
transition: background-color 0.4s var(--ease-out);
}.ds-ui__knob {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--m-fg);
transition: transform 0.5s var(--ease-expo), background-color 0.4s var(--ease-out);
}.ds-ui__switch[aria-checked="true"] .ds-ui__track {
background: var(--dc-purple);
}.ds-ui__switch[aria-checked="true"] .ds-ui__knob {
transform: translateX(20px);
background: var(--dc-lime);
}.ds-ui__switch:focus-visible {
outline-color: var(--m-acc);
}.ds-ui__field {
display: grid;
gap: 6px;
}.ds-ui__flabel {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--m-fg3);
}.ds-ui__input {
display: flex;
align-items: center;
min-height: 40px;
padding: 0 12px;
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--m-acc), 0 0 0 3px color-mix(in srgb, var(--m-acc) 18%, transparent);
font-size: 0.875rem;
color: var(--m-fg);
}.ds-ui__caret {
width: 1px;
height: 1.1em;
margin-left: 2px;
background: var(--m-acc);
animation: dsBlink 1.1s steps(2) infinite;
}@keyframes dsBlink {
50% { opacity: 0; }
}.js .ds-board:not(.is-live) .ds-ui__caret,
.js .ds-board:not(.is-live) .pulse::after {
animation-play-state: paused;
}.ds-ui__states {
display: flex;
flex-wrap: wrap;
gap: 6px;
}.ds-ui__states li {
padding: 6px 9px;
border-radius: var(--radius-sm);
box-shadow: inset 0 0 0 1px var(--m-line2);
font-family: var(--font-mono);
font-size: 0.5625rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--m-fg);
}.ds-ui__states .is-hover {
box-shadow: inset 0 0 0 1px var(--m-acc);
color: var(--m-acc);
}.ds-ui__states .is-press {
background: var(--m-acc);
box-shadow: none;
color: var(--m-bg);
}.ds-ui__states .is-off {
opacity: 0.6;
text-decoration: line-through;
}.ds-mod--ui.is-dark {
--m-bg: #140d1d;
--m-fg: #fff;
--m-fg3: rgba(255, 255, 255, 0.58);
--m-line: rgba(255, 255, 255, 0.12);
--m-line2: rgba(255, 255, 255, 0.28);
--m-acc: var(--dc-lime);
}.ds-gfx {
flex: 1;
width: 100%;
min-height: 0;
overflow: visible;
}.ds-gfx__ring {
fill: none;
stroke: rgba(20, 13, 29, 0.3);
stroke-dasharray: 2 4;
}.ds-gfx__rose {
transform-box: view-box;
transform-origin: 50% 50%;
}.ds-gfx__w1 { fill: #140d1d; }
.ds-gfx__w2 { fill: #6721df; }.ds-pack {
flex: 1;
width: 100%;
min-height: 0;
}.ds-pack__cut {
fill: rgba(197, 244, 61, 0.05);
stroke: var(--dc-lime);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}.ds-pack__fold {
fill: none;
stroke: rgba(255, 255, 255, 0.5);
stroke-dasharray: 3 3;
vector-effect: non-scaling-stroke;
}.ds-pack__front {
fill: #f7f6f9;
}.ds-pack__txt {
fill: none;
stroke: #140d1d;
stroke-width: 1.4;
opacity: 0.55;
}.ds-img {
position: relative;
flex: 1;
min-height: 150px;
margin: 10px 10px 4px;
isolation: isolate;
background: #fff;
}.ds-img__crop,
.ds-img::before,
.ds-img::after,
.ds-img__grain {
position: absolute;
inset: 0;
}.ds-img__crop {
z-index: 0;
background: var(--img) 87.5% 1.5% / 400% auto no-repeat;
filter: grayscale(1) contrast(1.35) brightness(1.08);
}.ds-img::before {
content: "";
z-index: 1;
background: #c5f43d;
mix-blend-mode: multiply;
}.ds-img::after {
content: "";
z-index: 2;
background: #2c0c6b;
mix-blend-mode: screen;
}.ds-img__grain {
z-index: 3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: 0.6;
}.ds-img .marks {
z-index: 4;
inset: -9px;
--m: 9px;
--c: rgba(255, 255, 255, 0.55);
}.ds-mo {
flex: 1;
display: grid;
grid-template-rows: minmax(0, 1fr) auto auto;
gap: 12px;
min-height: 0;
}.ds-mo__plot {
width: 100%;
height: 100%;
min-height: 90px;
overflow: visible;
}.ds-mo__axis,
.ds-mo__lin,
.ds-mo__curve {
fill: none;
vector-effect: non-scaling-stroke;
}.ds-mo__axis {
stroke: var(--m-line2);
}.ds-mo__lin {
stroke: var(--m-line2);
stroke-dasharray: 2 3;
}.ds-mo__curve {
stroke: var(--dc-lime);
stroke-width: 2;
}.ds-mo__dot {
fill: #fff;
}.ds-mo__track {
position: relative;
height: 16px;
border-bottom: 1px solid var(--m-line2);
}.ds-mo__ball {
position: absolute;
left: 0;
bottom: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--dc-lime);
transform: translateX(var(--bx, 0));
}.ds-mo__eases {
display: flex;
flex-wrap: wrap;
gap: 4px;
}.ds-mo__ease {
min-height: 30px;
padding: 4px 9px;
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px var(--m-line2);
font-family: var(--font-mono);
font-size: 0.5625rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--m-fg);
transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}.ds-mo__ease:hover {
box-shadow: inset 0 0 0 1px var(--dc-lime);
}.ds-mo__ease[aria-pressed="true"] {
background: var(--dc-lime);
color: #140d1d;
}.ds-mod--type,
.ds-mod--colour,
.ds-mod--object,
.ds-mod--ui {
grid-column: 1 / -1;
}.ds-mod--object {
min-height: 300px;
}.ds-mod--graphics,
.ds-mod--pack {
min-height: 250px;
}.ds-mod--image,
.ds-mod--motion {
min-height: 320px;
}.ds-mo__ease {
min-height: 44px;
}.ds-board.ds-settle .ds-mod {
transition: transform 1.1s var(--ease-expo), opacity 0.8s var(--ease-out), background-color 0.5s var(--ease-out);
}.ds-board.ds-settle .ds-mod:not(.is-set) {
opacity: 0;
transform: translateY(28px) rotate(var(--tilt, -2deg));
}@media (min-width: 600px) and (max-width: 1023px) {
.ds-mod--type { grid-column: 1; }
.ds-mod--colour { grid-column: 2; }
.ds-mod--object,
.ds-mod--ui { grid-column: span 1; }
}@media (min-width: 1024px) {
.ds-board__stage {
height: 100vh;
height: 100svh;
padding-block: calc(var(--header-h) + 8px) 24px;
}.ds-board__wrap {
display: flex;
flex-direction: column;
height: 100%;
}.ds-board__grid {
--g: clamp(10px, 1vw, 16px);
flex: 1;
min-height: 0;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(8, minmax(0, 1fr));
}.ds-mod {
min-height: 0;
will-change: transform;
}.ds-mod--type { grid-area: 1 / 1 / 6 / 5; }
.ds-mod--colour { grid-area: 1 / 5 / 4 / 9; }
.ds-mod--object { grid-area: 1 / 9 / 5 / 13; min-height: 0; }
.ds-mod--ui { grid-area: 4 / 5 / 9 / 9; }
.ds-mod--graphics { grid-area: 6 / 1 / 9 / 3; min-height: 0; }
.ds-mod--pack { grid-area: 6 / 3 / 9 / 5; min-height: 0; }
.ds-mod--image { grid-area: 5 / 9 / 9 / 11; min-height: 0; }
.ds-mod--motion { grid-area: 5 / 11 / 9 / 13; min-height: 0; }.ds-mo__ease {
min-height: 28px;
}.ds-pal {
min-height: 0;
}
}@media (min-width: 1024px) and (max-height: 760px) {
.ds-type__scale,
.ds-ui__states {
display: none;
}
}.ds-tf__grid {
display: grid;
gap: 24px;
}.ds-tf__sticky {
position: sticky;
top: calc(var(--header-h) - 6px);
z-index: 2;
padding-block: 4px 14px;
background: var(--bg);
}.ds-tf__sticky::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: var(--header-h);
background: var(--bg);
}.ds-tf__steps {
display: grid;
}.ds-tf__step {
display: grid;
align-content: center;
gap: 14px;
min-height: 62vh;
min-height: 62svh;
padding-block: 36px;
border-top: 1px solid var(--line);
}.ds-tf__n {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--fg-3);
}.ds-tf__n span:first-child {
color: var(--accent);
}.ds-tf__rule {
width: 44px;
height: 1px;
background: currentColor;
transform-origin: left;
transition: transform 0.8s var(--ease-expo), background-color 0.5s var(--ease-out);
}.ds-tf__title {
max-width: 14em;
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: 1;
text-transform: uppercase;
color: var(--fg);
transition: color 0.5s var(--ease-out);
}.ds-tf__step .t-body {
max-width: 30em;
}.ds-tf__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}.ds-tf--js .ds-tf__step:not(.is-active) .ds-tf__title {
color: var(--fg-3);
}.ds-tf--js .ds-tf__step:not(.is-active) .ds-tf__rule {
transform: scaleX(0.4);
}.ds-tf--js .ds-tf__step.is-active .ds-tf__rule {
background: var(--accent);
}.ds-tf__meter {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 4px;
margin-top: 12px;
}.ds-tf__meter li {
padding-top: 8px;
border-top: 2px solid var(--line-2);
font-family: var(--font-mono);
font-size: 0;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-3);
transition: border-color 0.5s var(--ease-out), color 0.5s var(--ease-out);
}.ds-tf__meter li.is-done {
border-color: var(--accent);
}.ds-tf__meter li.is-active {
color: var(--fg);
}.ds-tf__meter span {
margin-right: 6px;
color: var(--accent);
}@media (min-width: 1024px) {
.ds-tf__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(40px, 5vw, 96px);
align-items: start;
}.ds-tf__sticky {
grid-column: 2;
grid-row: 1;
top: calc(var(--header-h) + 16px);
padding: 0;
background: none;
}.ds-tf__sticky::before {
display: none;
}.ds-tf__steps {
grid-column: 1;
grid-row: 1;
padding-bottom: 14vh;
}.ds-tf__step {
min-height: 78vh;
min-height: 78svh;
}.ds-tf__step:first-child {
border-top: 0;
}.ds-tf__meter li {
font-size: 0.625rem;
}
}.ds-art {
--char: #1d1b22;
--ember: #ff6a3d;
--bone: #efe8dc;
--moss: #2f5d50;
position: relative;
}.ds-art__board {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-sm);
background: #fff;
color: var(--char);
container-type: inline-size;
box-shadow: 0 0 0 1px var(--line), 0 50px 80px -60px rgba(38, 23, 53, 0.55);
transition: background-color 0.8s var(--ease-out);
}.ds-art.is-s5 .ds-art__board {
background: #f1efeb;
}@media (min-width: 1024px) {
.ds-art__board {
width: min(100%, calc((100svh - var(--header-h) - 120px) * 4 / 3));
margin-left: auto;
}
}.ds-art__board > div {
position: absolute;
inset: 0;
transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-expo);
}.ds-art__cap {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
}@media (min-width: 1024px) {
.ds-art__cap {
width: min(100%, calc((100svh - var(--header-h) - 120px) * 4 / 3));
margin-left: auto;
}
}.ds-art__count {
color: var(--accent);
}.ds-smark {
width: 1em;
height: 1em;
flex-shrink: 0;
}.ds-smark circle { fill: var(--ember); }
.ds-smark path { fill: var(--char); }
.ds-smark--inv path { fill: #fff; }.ds-art__plain {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2cqi;
}.ds-art__plain-name {
font-family: "Times New Roman", Times, serif;
font-size: 10cqi;
line-height: 1;
color: #000;
}.ds-art__plain-tag {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.1cqi;
color: #333;
}.ds-art.is-s2 .ds-art__plain {
opacity: 0;
transform: scale(0.94);
}.ds-art__notes {
opacity: 0;
}.ds-art.is-s1:not(.is-s2) .ds-art__notes {
opacity: 1;
}.ds-art__ring {
position: absolute;
left: 14%;
top: 25cqi;
width: 72%;
height: 20cqi;
}.ds-art__ring ellipse {
fill: none;
stroke: var(--dc-purple);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 1.2s var(--ease-in-out) 0.2s;
}.ds-art.is-s1:not(.is-s2) .ds-art__ring ellipse {
stroke-dashoffset: 0;
}.ds-art__note {
position: absolute;
display: grid;
gap: 0.4cqi;
max-width: 34cqi;
padding-left: 1.4cqi;
border-left: 2px solid var(--dc-purple);
font-family: var(--font-body);
font-size: 1.9cqi;
line-height: 1.25;
color: var(--char);
transform: translateY(2cqi);
transition: transform 0.9s var(--ease-expo);
}.ds-art__note b {
font-family: var(--font-mono);
font-size: 1.35cqi;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dc-purple);
}.ds-art.is-s1 .ds-art__note { transform: none; }
.ds-art__note--1 { left: 6cqi; top: 7cqi; }
.ds-art__note--2 { right: 6cqi; top: 10cqi; transition-delay: 0.08s; }
.ds-art__note--3 { left: 30cqi; bottom: 8cqi; transition-delay: 0.16s; }.ds-art__id {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5cqi;
opacity: 0;
transform: scale(1.04);
}.ds-art.is-s2:not(.is-s3) .ds-art__id {
opacity: 1;
transform: none;
}.ds-art__lockup {
display: inline-flex;
align-items: center;
gap: 2.4cqi;
font-family: var(--font-heading);
font-size: 7.4cqi;
line-height: 1;
text-transform: uppercase;
}.ds-art__lockup .ds-smark {
font-size: 1.35em;
}.ds-art__chips {
display: flex;
gap: 3cqi;
}.ds-art__chips i {
display: grid;
justify-items: center;
gap: 0.6cqi;
font-family: var(--font-mono);
font-size: 1.2cqi;
font-style: normal;
letter-spacing: 0.08em;
color: #555;
}.ds-art__chips i::before {
content: "";
width: 7cqi;
height: 7cqi;
border-radius: 50%;
background: var(--c);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}.ds-art__chips b {
font-weight: 500;
color: var(--char);
text-transform: uppercase;
}.ds-art__pair {
font-size: 1.7cqi;
color: #555;
}.ds-art__pair b {
font-family: var(--font-heading);
font-weight: 400;
color: var(--char);
}.ds-art__pair span {
font-weight: 700;
color: var(--char);
}.ds-art__pair em {
margin-inline: 1cqi;
font-style: normal;
color: var(--ember);
}.ds-art__site {
background: var(--bone);
opacity: 0;
transform: translateY(3cqi);
transform-origin: 0 0;
}.ds-art.is-s3 .ds-art__site {
opacity: 1;
transform: none;
}.ds-art.is-s5 .ds-art__site {
transform: translate(4cqi, 4.5cqi) scale(0.54);
border-radius: 2cqi;
box-shadow: 0 0 0 0.3cqi rgba(29, 27, 34, 0.1), 0 4cqi 8cqi -4cqi rgba(29, 27, 34, 0.35);
overflow: hidden;
}.ds-art__site > span {
position: absolute;
left: 0;
right: 0;
}.ds-art__chrome {
top: 0;
display: flex;
align-items: center;
gap: 0.8cqi;
height: 4.6cqi;
padding-inline: 2.4cqi;
background: #e1d9ca;
}.ds-art__chrome i {
width: 1.1cqi;
height: 1.1cqi;
border-radius: 50%;
background: rgba(29, 27, 34, 0.25);
}.ds-art__chrome span {
margin-left: 2cqi;
padding: 0.5cqi 2cqi;
border-radius: 2cqi;
background: rgba(255, 255, 255, 0.6);
font-family: var(--font-mono);
font-size: 1.2cqi;
color: #6a645b;
}.ds-art__nav {
top: 4.6cqi;
display: flex;
align-items: center;
justify-content: space-between;
height: 8cqi;
padding-inline: 5cqi;
border-bottom: 1px solid rgba(29, 27, 34, 0.08);
}.ds-art__logo {
display: inline-flex;
align-items: center;
gap: 1cqi;
font-family: var(--font-heading);
font-size: 2.1cqi;
text-transform: uppercase;
}.ds-art__logo .ds-smark {
font-size: 1.5em;
}.ds-art__links {
display: flex;
gap: 2.4cqi;
}.ds-art__links i {
width: 5cqi;
height: 0.7cqi;
border-radius: 1cqi;
background: rgba(29, 27, 34, 0.3);
}.ds-art__hero {
top: 17cqi;
height: 36cqi;
padding-inline: 5cqi;
}.ds-art__hl {
display: grid;
font-family: var(--font-heading);
font-size: 5.8cqi;
line-height: 0.92;
text-transform: uppercase;
}.ds-art__hl span:last-child {
color: var(--ember);
}.ds-art__cta {
display: inline-flex;
gap: 1cqi;
margin-top: 3.4cqi;
padding: 1.3cqi 2.6cqi;
border-radius: 4cqi;
background: var(--char);
color: #fff;
font-size: 1.6cqi;
font-weight: 700;
}.ds-art__cta i {
font-style: normal;
color: var(--ember);
}.ds-art__prod {
position: absolute;
right: 6cqi;
top: -2cqi;
width: 34cqi;
height: 36cqi;
}.ds-art__prod i {
position: absolute;
}.ds-art__prod i:nth-child(1) {
right: 0;
top: 0;
width: 26cqi;
height: 26cqi;
border-radius: 50%;
background: var(--ember);
}.ds-art__prod i:nth-child(2) {
left: 6cqi;
bottom: 0;
width: 13cqi;
height: 28cqi;
border-radius: 5cqi 5cqi 1.5cqi 1.5cqi;
background: var(--moss);
}.ds-art__prod i:nth-child(3) {
left: 21cqi;
bottom: 0;
width: 11cqi;
height: 15cqi;
border-radius: 1.5cqi;
background: var(--char);
}.ds-art__tiles {
top: 57cqi;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2cqi;
height: 13cqi;
padding-inline: 5cqi;
}.ds-art__tiles i {
border-radius: 1.2cqi;
background: #e4dccd;
}.ds-art__tiles i:nth-child(2) {
background: #d9e3dd;
}.ds-art__motion {
opacity: 0;
pointer-events: none;
}.ds-art.is-s4:not(.is-s5) .ds-art__motion {
opacity: 1;
}.ds-art__paths {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}.ds-art__paths path {
fill: none;
stroke: var(--dc-purple);
stroke-width: 1.5;
stroke-dasharray: 4 4;
vector-effect: non-scaling-stroke;
}.ds-art__tl {
position: absolute;
left: 5cqi;
right: 5cqi;
bottom: 3cqi;
display: grid;
gap: 1cqi;
padding: 1.6cqi 2cqi;
border-radius: 1.2cqi;
background: var(--char);
color: #fff;
}.ds-art__tl-label {
font-family: var(--font-mono);
font-size: 1.2cqi;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}.ds-art__tl-track {
position: relative;
height: 2.4cqi;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}.ds-art__tl-track i {
position: absolute;
left: calc(var(--x) * 1%);
top: 0.5cqi;
width: 1.3cqi;
height: 1.3cqi;
background: var(--ember);
transform: rotate(45deg);
}.ds-art__head {
position: absolute;
top: -1cqi;
bottom: -0.4cqi;
left: 0;
width: 2px;
background: var(--dc-lime);
}.ds-art.is-live.is-s4:not(.is-s5) .ds-art__head {
animation: dsPlay 2.4s linear infinite;
}.ds-art.is-live.is-s4:not(.is-s5) .ds-art__hl span {
animation: dsRise 2.4s var(--ease-expo) infinite;
}.ds-art.is-live.is-s4:not(.is-s5) .ds-art__hl span:last-child {
animation-delay: 0.12s;
}.ds-art.is-live.is-s4 .ds-art__logo .ds-smark,
.ds-art.is-live.is-s4 .ds-art__prod i:nth-child(1) {
animation: dsSpin 2.4s var(--ease-in-out) infinite;
}@keyframes dsPlay {
from { transform: translateX(0); }
to { transform: translateX(calc(90cqi - 2px)); }
}@keyframes dsRise {
0% { transform: translateY(60%); opacity: 0; }
30%, 100% { transform: none; opacity: 1; }
}@keyframes dsSpin {
0%, 20% { transform: rotate(0); }
60%, 100% { transform: rotate(360deg); }
}.ds-art__touch {
pointer-events: none;
}.ds-art__touch > span {
position: absolute;
opacity: 0;
transform: translateY(4cqi);
transition: opacity 0.6s var(--ease-out), transform 1s var(--ease-expo);
}.ds-art.is-s5 .ds-art__touch > span {
opacity: 1;
transform: none;
}.ds-art.is-s5 .ds-art__touch > span:nth-child(2) { transition-delay: 0.08s; }
.ds-art.is-s5 .ds-art__touch > span:nth-child(3) { transition-delay: 0.16s; }
.ds-art.is-s5 .ds-art__touch > span:nth-child(4) { transition-delay: 0.24s; }.ds-art__phone {
left: 66cqi;
top: 4.5cqi;
width: 19cqi;
height: 38cqi;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 1.4cqi;
padding: 1.6cqi;
border-radius: 2.6cqi;
background: #fff;
box-shadow: 0 0 0 0.6cqi var(--char), 0 4cqi 8cqi -4cqi rgba(29, 27, 34, 0.4);
}.ds-art__post {
display: grid;
align-content: space-between;
aspect-ratio: 1;
padding: 1.6cqi;
border-radius: 1cqi;
background: var(--ember);
color: #fff;
font-family: var(--font-heading);
font-size: 1.7cqi;
line-height: 1.05;
text-transform: uppercase;
}.ds-art__post .ds-smark {
font-size: 4.4cqi;
}.ds-art__post .ds-smark circle {
fill: var(--char);
}.ds-art__phone > i {
height: 1cqi;
border-radius: 1cqi;
background: #e7e3dc;
}.ds-art__phone > i:last-child {
width: 60%;
}.ds-art__card {
left: 60cqi;
top: 50cqi;
width: 32cqi;
height: 17cqi;
display: flex;
align-items: center;
gap: 1.6cqi;
padding: 3cqi;
border-radius: 1cqi;
background: var(--char);
color: #fff;
font-family: var(--font-heading);
font-size: 2.2cqi;
text-transform: uppercase;
box-shadow: 0 3cqi 6cqi -3cqi rgba(29, 27, 34, 0.5);
}.ds-art.is-s5 .ds-art__touch .ds-art__card {
transform: rotate(-5deg);
}.ds-art__card .ds-smark {
font-size: 5cqi;
}.ds-art__card .ds-smark path {
fill: #fff;
}.ds-art__card i {
position: absolute;
right: 3cqi;
bottom: 3cqi;
width: 8cqi;
height: 0.7cqi;
background: rgba(255, 255, 255, 0.4);
}.ds-art__box {
left: 6cqi;
top: 49cqi;
width: 24cqi;
height: 22cqi;
}.ds-art__box > span {
position: absolute;
}.ds-art__box-front {
left: 0;
bottom: 0;
width: 16cqi;
height: 15cqi;
display: grid;
place-content: center;
justify-items: center;
gap: 1cqi;
background: var(--bone);
box-shadow: inset 0 0 0 1px rgba(29, 27, 34, 0.08);
font-family: var(--font-heading);
font-size: 1.3cqi;
text-transform: uppercase;
}.ds-art__box-front .ds-smark {
font-size: 4.6cqi;
}.ds-art__box-top {
left: 0;
bottom: 15cqi;
width: 16cqi;
height: 6cqi;
background: #e0d6c5;
transform: skewX(-50deg);
transform-origin: 0 100%;
}.ds-art__box-side {
left: 16cqi;
bottom: 0;
width: 7.2cqi;
height: 15cqi;
background: var(--moss);
transform: skewY(-40deg);
transform-origin: 0 100%;
}.ds-art__sign {
left: 36cqi;
top: 48cqi;
width: 20cqi;
height: 24cqi;
}.ds-art__sign-arm {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1cqi;
background: var(--char);
}.ds-art__sign-disc {
position: absolute;
left: 3cqi;
top: 3.4cqi;
width: 16cqi;
height: 16cqi;
display: grid;
place-content: center;
justify-items: center;
gap: 0.6cqi;
border-radius: 50%;
background: var(--char);
color: #fff;
font-family: var(--font-heading);
font-size: 1.8cqi;
text-transform: uppercase;
}.ds-art__sign-disc::before,
.ds-art__sign-disc::after {
content: "";
position: absolute;
top: -2.4cqi;
width: 0.4cqi;
height: 2.4cqi;
background: var(--char);
}.ds-art__sign-disc::before { left: 5cqi; }
.ds-art__sign-disc::after { right: 5cqi; }.ds-art__sign-disc .ds-smark {
font-size: 5.4cqi;
}.ds-art__sign-disc .ds-smark path {
fill: #fff;
}.ds-words {
padding-block: var(--chapter-pad);
}.ds-words__item {
padding-block: clamp(28px, 4vw, 56px);
border-top: 1px solid var(--line-2);
}.ds-words__word {
font-family: var(--font-heading);
font-size: min(var(--fs-giant), calc((100vw - var(--gutter) * 2) / var(--fit)));
font-weight: 900;
line-height: 0.84;
letter-spacing: -0.02em;
text-transform: uppercase;
white-space: nowrap;
color: var(--fg);
}.ds-words__text {
display: inline-block;
padding-top: 0.06em;
}.ds-words__text .c {
display: inline-block;
}.ds-words__info {
display: grid;
gap: 14px;
margin-top: clamp(18px, 2vw, 28px);
}.ds-words__n {
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tracking-mono);
color: var(--fg-3);
}.ds-words__n span {
color: var(--accent);
}.ds-words__copy {
max-width: 34em;
font-size: var(--fs-lead);
line-height: 1.45;
color: var(--fg-2);
}.ds-words__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}.ds-words__tags li {
padding: 7px 11px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg);
}.ds-words__progress {
display: none;
}.ds-words--js .ds-words__word {
transition: clip-path 1.2s var(--ease-expo), transform 1.2s var(--ease-expo);
}.ds-words--js .ds-words__item:not(.is-in) .ds-words__word {
clip-path: inset(100% 0 -0.1em 0);
transform: translateY(0.25em);
}@media (min-width: 1024px) {
.ds-words__info {
grid-template-columns: 8em minmax(0, 34em) minmax(0, 1fr);
align-items: start;
column-gap: clamp(24px, 3vw, 56px);
}.ds-words__tags {
justify-content: flex-end;
}
.ds-words.is-seq {
padding-bottom: clamp(24px, 3vw, 48px);
}.ds-words.is-seq .ds-words__stage {
height: 100vh;
height: 100svh;
}.ds-words.is-seq .ds-words__wrap,
.ds-words.is-seq .ds-words__list {
position: relative;
height: 100%;
}.ds-words.is-seq .ds-words__item {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: calc(var(--header-h) + 24px) 0 150px;
border: 0;
}.ds-words.is-seq .ds-words__word {
font-size: min(calc((100vw - var(--gutter) * 2) / var(--fit)), 44svh);
transition: none;
will-change: transform, clip-path;
}.ds-words.is-seq .ds-words__info {
position: absolute;
left: 0;
right: 0;
bottom: 44px;
margin: 0;
padding-top: 20px;
border-top: 1px solid var(--line-2);
}.ds-words.is-seq .ds-words__progress {
position: absolute;
left: var(--gutter);
right: var(--gutter);
top: calc(var(--header-h) + 8px);
display: flex;
gap: 6px;
}.ds-words__progress i {
flex: 1;
height: 2px;
background: var(--line-2);
transition: background-color 0.4s var(--ease-out);
}.ds-words__progress i.is-on {
background: var(--accent);
}
}.ds-index__list {
border-top: 1px solid var(--line-2);
}.ds-index__row {
border-bottom: 1px solid var(--line-2);
}.ds-index__btn {
display: grid;
grid-template-columns: 2.6em minmax(0, 1fr) 44px;
align-items: center;
gap: 12px;
width: 100%;
min-height: 64px;
padding-block: clamp(14px, 1.6vw, 24px);
text-align: left;
border-radius: 0;
}.ds-index__btn:focus-visible {
outline-offset: -2px;
}.ds-index__n {
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: 0.14em;
color: var(--fg-3);
transition: color 0.4s var(--ease-out);
}.ds-index__name {
position: relative;
z-index: 0;
justify-self: start;
font-family: var(--font-heading);
font-size: calc(clamp(1.45rem, 0.55rem + 5.2vw, 6.2rem) * var(--k, 1));
line-height: 0.92;
letter-spacing: -0.012em;
text-transform: uppercase;
color: var(--fg);
transition: transform 0.7s var(--ease-expo), color 0.4s var(--ease-out);
}.ds-index__name::before {
content: "";
position: absolute;
left: -0.05em;
right: -0.05em;
bottom: 0.04em;
z-index: -1;
height: 0.34em;
background: var(--dc-lime);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.7s var(--ease-expo);
}.ds-index__meta {
display: none;
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: 0.14em;
color: var(--fg-3);
}.ds-index__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--fg);
transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}.ds-index__icon .icon {
width: 18px;
height: 18px;
transition: transform 0.6s var(--ease-expo);
}.ds-index__row.is-open .ds-index__icon {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}.ds-index__row.is-open .ds-index__icon .icon {
transform: rotate(45deg);
}.ds-index__row.is-open .ds-index__n {
color: var(--accent);
}@media (hover: hover) {
.ds-index__btn:hover .ds-index__name {
transform: translateX(0.18em);
}.ds-index__btn:hover .ds-index__name::before {
transform: scaleX(1);
}
}.ds-index__btn:focus-visible .ds-index__name::before,
.ds-index__row.is-open .ds-index__name::before {
transform: scaleX(1);
}.ds-index__panel {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.7s var(--ease-expo), visibility 0s linear 0s;
}.ds-index__body {
display: grid;
gap: 16px;
min-height: 0;
overflow: hidden;
}.ds-index__body > :last-child {
margin-bottom: clamp(20px, 2.4vw, 32px);
}.ds-index__items {
display: flex;
flex-wrap: wrap;
gap: 6px;
}.ds-index__link {
justify-self: start;
min-height: 44px;
}.ds-index--js .ds-index__row:not(.is-open) .ds-index__panel {
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 0.6s var(--ease-expo), visibility 0s linear 0.6s;
}.ds-index--init .ds-index__panel {
transition: none !important;
}.ds-index__foot {
display: grid;
gap: 32px;
margin-top: clamp(48px, 6vw, 96px);
}.ds-index__note {
display: grid;
gap: 18px;
align-content: start;
max-width: 30em;
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--fg-2);
}@media (min-width: 600px) {
.ds-index__btn {
grid-template-columns: 3.4em minmax(0, 1fr) auto 44px;
gap: 20px;
}.ds-index__meta {
display: block;
}
}@media (min-width: 1024px) {
.ds-index__body {
grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto;
align-items: start;
column-gap: clamp(24px, 3vw, 56px);
padding-left: calc(3.4em + 20px);
}.ds-index__body > * {
margin-bottom: clamp(20px, 2.4vw, 32px);
}.ds-index__link {
justify-self: end;
white-space: nowrap;
}.ds-index__foot {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: center;
}
}@media (prefers-reduced-motion: reduce) {
.ds-ui__caret {
animation: none;
}.ds-pal li {
transition: none;
}
}