.ix-hero {
grid-template-columns: minmax(0, 1fr);
padding-bottom: 0;
}.ix-hero__grid {
display: grid;
gap: 40px;
}.ix-hero__main {
display: grid;
align-content: start;
gap: clamp(20px, 2.2vw, 32px);
}.ix-hero__title {
--fit: 9;
}.ix-hero__lead {
max-width: 32em;
}.ix-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
}.ix-hero__count {
font-size: 0.9375rem;
color: var(--fg-3);
}.ix-hero__count b {
font-weight: 700;
color: var(--fg);
}@media (min-width: 1024px) {
.ix-hero__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: clamp(40px, 5vw, 96px);
align-items: end;
}.ix-hero__title {
--fit: 16.5;
}
}.ix-console {
display: grid;
width: 100%;
max-width: 640px;
justify-self: end;
}.ix-console__illus {
margin-left: auto;
}.ix-console__stage {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
height: clamp(220px, 19vw, 290px);
border-bottom: 1px solid var(--line);
}.ix-console__photo {
position: relative;
overflow: hidden;
background: var(--dc-purple-dark);
}.ix-console__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.06);
transition: opacity 0.7s var(--ease-out), transform 1.6s var(--ease-expo);
}.ix-console__photo img.is-on {
opacity: 1;
transform: none;
}.ix-console__photo::after {
content: "";
position: absolute;
inset: 0;
box-shadow: inset -1px 0 0 var(--line);
background: linear-gradient(90deg, transparent 70%, rgba(20, 13, 29, 0.35));
pointer-events: none;
}.ix-console__scene {
position: relative;
container-type: size;
overflow: hidden;
background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(123, 44, 240, 0.24), transparent 70%);
}.ix-console__scene .ix-scene {
position: absolute;
inset: 0;
}.ix-console__cap {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"num name name"
"note note btns";
align-items: center;
gap: 2px 16px;
padding: 10px 12px 14px 18px;
}.ix-console__num { grid-area: num; }
.ix-console__name { grid-area: name; }
.ix-console__note { grid-area: note; }
.ix-console__btns { grid-area: btns; }.ix-console .ix-tag--core {
display: none;
}.ix-console__num {
color: var(--fg-3);
}.ix-console__num b {
font-weight: 500;
color: var(--accent);
}.ix-console__name {
display: inline-flex;
align-items: center;
gap: 10px;
justify-self: start;
min-width: 0;
min-height: 44px;
font-family: var(--font-heading);
font-size: clamp(1.2rem, 0.8rem + 0.9vw, 1.75rem);
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.ix-console__arrow {
flex: none;
width: 16px;
height: 16px;
color: var(--accent);
transition: transform 0.5s var(--ease-expo);
}.ix-console__name:hover .ix-console__arrow {
transform: translateY(3px);
}.ix-console__note {
min-height: 3em;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--fg-2);
}.ix-console__btns {
display: inline-flex;
gap: 4px;
}.no-js .ix-console__btns {
display: none;
}.ix-ibtn {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line-2);
color: var(--fg-2);
transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}.ix-ibtn .icon {
width: 16px;
height: 16px;
}.ix-ibtn:hover {
border-color: var(--accent);
color: var(--accent);
}.ix-ibtn__pause {
width: 10px;
height: 12px;
border-inline: 3px solid currentColor;
}.ix-ibtn[aria-pressed="true"] .ix-ibtn__pause {
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent currentColor;
margin-left: 3px;
}@media (max-width: 599px) {
.ix-console__stage {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 170px 190px;
height: auto;
}.ix-console__photo::after {
box-shadow: inset 0 -1px 0 var(--line);
background: none;
}.ix-console__cap {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"num name"
"note note"
"btns btns";
}
}.ix-ticker {
--speed: 90s;
margin-top: clamp(40px, 5vw, 72px);
padding-block: clamp(14px, 1.6vw, 22px);
border-top: 1px solid var(--line);
}.ix-ticker .marquee__track {
align-items: center;
}.ix-ticker__item {
font-family: var(--font-heading);
font-size: clamp(2rem, 0.9rem + 3vw, 4.4rem);
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--line-2);
transition: color 0.6s var(--ease-out), -webkit-text-stroke-color 0.6s var(--ease-out);
}.ix-ticker__item.is-on {
color: var(--fg);
-webkit-text-stroke-color: transparent;
}.ix-ticker .wedge {
width: clamp(14px, 1.4vw, 24px);
transform: rotate(22.5deg);
}.ix-ticker.is-paused .marquee__track,
.ix-ticker.is-off .marquee__track {
animation-play-state: paused;
}.ix-scene {
--tilt: 56deg;
--a: var(--rz, -34deg);
--ps: min(calc((100cqh - 44px) * 1.25), 80cqw, 420px);
display: grid;
place-items: center;
perspective: 1500px;
perspective-origin: 50% 35%;
pointer-events: none;
color: #fff;
}.ix-scene__plane {
position: relative;
width: var(--ps);
height: var(--ps);
transform-style: preserve-3d;
transform: translateY(9%) rotateX(var(--tilt)) rotateZ(var(--a));
transition: transform 1.2s var(--ease-expo);
}.ix-scene__floor {
position: absolute;
inset: -16%;
border-radius: 14px;
background:
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / calc(100% / 12) calc(100% / 12),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / calc(100% / 12) calc(100% / 12);
-webkit-mask: radial-gradient(closest-side, #000 55%, transparent);
mask: radial-gradient(closest-side, #000 55%, transparent);
transition: opacity 0.6s var(--ease-out);
}.ix-scene__wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
transform: translateZ(1px);
}.ix-wire {
fill: none;
stroke: rgba(255, 255, 255, 0.34);
stroke-width: 1.2;
stroke-dasharray: 100;
stroke-dashoffset: 0;
vector-effect: non-scaling-stroke;
transition: stroke-dashoffset 1s var(--ease-expo) calc(0.3s + var(--i) * 0.1s);
}.ix-wire--sig {
stroke: var(--dc-lime);
stroke-width: 2;
stroke-dasharray: 7 93;
stroke-dashoffset: 100;
animation: ixSignal 3s linear infinite;
animation-delay: calc(var(--i) * -1s);
transition: opacity 0.5s var(--ease-out);
}@keyframes ixSignal {
to { stroke-dashoffset: 0; }
}.ix-core {
--z: 18;
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
width: 0;
height: 0;
transform-style: preserve-3d;
transition: opacity 0.6s var(--ease-out) 0.1s;
}.ix-core::before {
content: "";
position: absolute;
left: calc(var(--ps) * -0.19);
top: calc(var(--ps) * -0.19);
width: calc(var(--ps) * 0.38);
height: calc(var(--ps) * 0.38);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
background: radial-gradient(closest-side, rgba(123, 44, 240, 0.35), transparent);
}.ix-core__block {
position: absolute;
left: calc(var(--ps) * -0.075);
top: calc(var(--ps) * -0.075);
width: calc(var(--ps) * 0.15);
height: calc(var(--ps) * 0.15);
display: grid;
place-items: center;
border-radius: 8px;
background: var(--dc-purple);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 26px rgba(123, 44, 240, 0.55);
transform: translateZ(calc(var(--ps) * 0.06));
}.ix-core__block .wedge {
width: 46%;
transform: rotate(22.5deg);
}.ix-mod {
position: absolute;
left: calc((var(--x) - var(--w) / 2) * 1%);
top: calc((var(--y) - var(--h) / 2) * 1%);
width: calc(var(--w) * 1%);
height: calc(var(--h) * 1%);
transform-style: preserve-3d;
}.ix-mod__shadow {
position: absolute;
inset: 4%;
border-radius: 8px;
background: rgba(8, 4, 14, 0.55);
border: 1px solid rgba(197, 244, 61, 0.12);
transition: opacity 0.8s var(--ease-out) calc(0.1s + var(--i) * 0.08s);
}.ix-mod__face {
position: absolute;
inset: 0;
container-type: size;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.26);
background: linear-gradient(155deg, #2d1f40, #1a1225 70%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(20, 13, 29, 0.4);
transform: translateZ(calc(var(--ps) * var(--z) / 300));
transition:
transform 1s var(--ease-expo) calc(0.12s + var(--i) * 0.09s),
opacity 0.5s var(--ease-out) calc(0.12s + var(--i) * 0.09s);
}.ix-mod:first-of-type .ix-mod__face {
border-color: rgba(197, 244, 61, 0.6);
}.ix-tag {
position: absolute;
left: 50%;
top: 50%;
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(20, 13, 29, 0.9);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
white-space: nowrap;
color: #fff;
transform-origin: 0 0;
transform:
translateZ(calc(var(--z) * 1px + 2px))
rotateZ(calc(var(--a) * -1))
rotateX(calc(var(--tilt) * -1))
translate(-50%, calc(-100% - var(--lift, 18px)));
transition:
transform 1s var(--ease-expo) calc(0.2s + var(--i, 0) * 0.09s),
opacity 0.5s var(--ease-out) calc(0.25s + var(--i, 0) * 0.09s);
}.ix-scene__tags {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
}.ix-scene__tags .ix-tag {
left: var(--l);
top: var(--t);
height: 25px;
transform: none;
transform-origin: 50% 100%;
transition:
transform 0.8s var(--ease-expo) calc(0.45s + var(--i, 0) * 0.09s),
opacity 0.5s var(--ease-out) calc(0.45s + var(--i, 0) * 0.09s);
}.ix-tag--core {
--i: 0;
background: var(--dc-lime);
border-color: var(--dc-lime);
color: var(--dc-purple-black);
}.ix-f {
position: absolute;
inset: 12% 10%;
display: grid;
align-content: start;
gap: 7cqh;
}.ix-f i,
.ix-f b {
display: block;
border-radius: 2px;
background: rgba(255, 255, 255, 0.16);
}.ix-f .on {
background: var(--dc-lime);
}.ix-f__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4cqh 4cqw;
}.ix-mod--calendar .ix-f > b {
width: 46%;
height: 9cqh;
background: rgba(255, 255, 255, 0.34);
}.ix-mod--calendar .ix-f__grid i {
height: 11cqh;
}.ix-mod--list .ix-f,
.ix-mod--doc .ix-f {
gap: 9cqh;
}.ix-mod--list .ix-f i {
height: 12cqh;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 12cqh, transparent 12cqh 18cqw, rgba(255, 255, 255, 0.16) 18cqw);
}.ix-mod--list .ix-f i.on {
background: linear-gradient(90deg, var(--dc-lime) 0 12cqh, transparent 12cqh 18cqw, rgba(197, 244, 61, 0.45) 18cqw);
}.ix-mod--form .ix-f i {
height: 15cqh;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
}.ix-mod--form .ix-f b {
width: 48%;
height: 16cqh;
border-radius: 20cqh;
background: var(--dc-lime);
}.ix-mod--cards .ix-f__grid {
grid-template-columns: repeat(2, 1fr);
gap: 7cqh 6cqw;
}.ix-mod--cards .ix-f__grid i {
height: 32cqh;
background: linear-gradient(180deg, rgba(123, 44, 240, 0.75) 0 58%, rgba(255, 255, 255, 0.18) 58% 72%, transparent 72%);
}.ix-mod--cards .ix-f__grid i.on {
background: linear-gradient(180deg, var(--dc-lime) 0 58%, rgba(255, 255, 255, 0.3) 58% 72%, transparent 72%);
}.ix-f__bars {
display: flex;
align-items: flex-end;
gap: 6cqw;
height: 72cqh;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}.ix-f__bars i {
flex: 1;
height: calc(var(--v) * 100%);
border-radius: 2px 2px 0 0;
background: rgba(123, 44, 240, 0.85);
}.ix-mod--chat .ix-f {
gap: 8cqh;
}.ix-mod--chat .ix-f i {
width: 64%;
height: 20cqh;
border-radius: 10cqh;
}.ix-mod--chat .ix-f i.on {
justify-self: end;
background: var(--dc-purple-bright);
}.ix-f__nodes {
display: flex;
align-items: center;
justify-content: space-between;
height: 70cqh;
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) center / 100% 1px no-repeat;
}.ix-f__nodes i {
width: 22cqw;
height: 34cqh;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: #231833;
}.ix-f__nodes i.on {
background: var(--dc-lime);
border-color: var(--dc-lime);
}.ix-mod--doc .ix-f > b {
width: 62%;
height: 10cqh;
background: rgba(255, 255, 255, 0.4);
}.ix-mod--doc .ix-f i {
height: 5cqh;
}.ix-mod--doc .ix-f i:nth-child(3n) {
width: 70%;
}.ix-mod--doc .ix-f i:last-child {
width: 40%;
background: var(--dc-lime);
}.ix-f__tracks {
display: grid;
gap: 8cqh;
}.ix-f__tracks i {
height: 16cqh;
background:
linear-gradient(90deg, rgba(123, 44, 240, 0.9) 0 34%, transparent 34% 38%, rgba(123, 44, 240, 0.9) 38% 70%, transparent 70% 74%, rgba(123, 44, 240, 0.9) 74%);
}.ix-f__tracks i:nth-child(2) {
background: linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.3) 12% 52%, transparent 52% 58%, rgba(255, 255, 255, 0.3) 58% 88%, transparent 88%);
}.ix-f__tracks i:nth-child(3) {
background: repeating-linear-gradient(90deg, rgba(197, 244, 61, 0.7) 0 1px, transparent 1px 3px);
}.ix-mod--timeline .ix-f > b {
position: absolute;
left: 58%;
top: -8%;
width: 2px;
height: 116%;
background: var(--dc-lime);
}.ix-mod--cart .ix-f i {
height: 22cqh;
background:
linear-gradient(90deg, rgba(123, 44, 240, 0.8) 0 22cqh, transparent 22cqh calc(22cqh + 6cqw), rgba(255, 255, 255, 0.16) calc(22cqh + 6cqw));
}.ix-mod--cart .ix-f b {
height: 18cqh;
border-radius: 20cqh;
background: var(--dc-lime);
}.ix-mod--map .ix-f {
inset: 0;
}.ix-mod--map .ix-f i {
position: absolute;
inset: 0;
border-radius: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1.5px) 0 0 / 9cqw 9cqw;
}.ix-mod--map .ix-f b {
position: absolute;
left: 50%;
top: 50%;
width: 18cqh;
height: 18cqh;
margin: -9cqh 0 0 -9cqh;
border-radius: 50%;
background: var(--dc-lime);
box-shadow: 0 0 0 7cqh rgba(197, 244, 61, 0.22);
}.ix-mod--stars .ix-f > b {
background: none;
font-size: 20cqh;
line-height: 1;
letter-spacing: 0.1em;
color: var(--dc-lime);
}.ix-mod--stars .ix-f i {
height: 8cqh;
}.ix-mod--stars .ix-f i:last-child {
width: 60%;
}.ix-x.is-live .ix-env:not(.is-active) .ix-mod__face,
.ix-console .ix-scene:not(.is-active) .ix-mod__face {
transform: translateZ(0);
opacity: 0;
transition-duration: 0.45s, 0.3s;
transition-delay: calc(var(--i) * 0.03s);
}.ix-x.is-live .ix-env:not(.is-active) .ix-mod__shadow,
.ix-console .ix-scene:not(.is-active) .ix-mod__shadow,
.ix-x.is-live .ix-env:not(.is-active) .ix-core,
.ix-console .ix-scene:not(.is-active) .ix-core,
.ix-x.is-live .ix-env:not(.is-active) .ix-scene__floor,
.ix-console .ix-scene:not(.is-active) .ix-scene__floor {
opacity: 0;
transition: opacity 0.3s var(--ease-out);
}.ix-x.is-live .ix-env:not(.is-active) .ix-tag,
.ix-console .ix-scene:not(.is-active) .ix-tag {
opacity: 0;
transform: translateY(6px);
transition-duration: 0.3s, 0.2s;
transition-delay: 0s;
}.ix-x.is-live .ix-env:not(.is-active) .ix-wire,
.ix-console .ix-scene:not(.is-active) .ix-wire {
stroke-dashoffset: 100;
transition-duration: 0.35s;
transition-delay: 0s;
}.ix-x.is-live .ix-env:not(.is-active) .ix-wire--sig,
.ix-console .ix-scene:not(.is-active) .ix-wire--sig,
.ix-x.is-off .ix-wire--sig,
.ix-hero.is-off .ix-wire--sig,
.ix-hero.is-paused .ix-wire--sig {
animation-play-state: paused;
}.ix-x.is-live .ix-env:not(.is-active) .ix-wire--sig,
.ix-console .ix-scene:not(.is-active) .ix-wire--sig {
opacity: 0;
}.ix-console .ix-scene {
--a: var(--ix-rz, var(--rz, -36deg));
}.ix-x {
padding-block: var(--chapter-pad);
}.ix-x__intro {
display: grid;
gap: 20px;
margin-bottom: clamp(28px, 4vw, 48px);
}.ix-x__title .accent {
color: var(--accent);
}.ix-x__lead {
max-width: 30em;
}.ix-x__hint,
.ix-x__rig {
display: none;
}.ix-x__list {
border-top: 1px solid var(--line-2);
}.ix-ind {
border-bottom: 1px solid var(--line);
}.ix-ind__head {
scroll-margin-top: calc(var(--header-h) + 16px);
font: inherit;
}.ix-ind__row {
position: relative;
display: grid;
grid-template-columns: 2.6em minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
min-height: 64px;
padding: 18px 0;
text-align: left;
-webkit-tap-highlight-color: transparent;
}.ix-ind__num {
align-self: start;
padding-top: 0.45em;
color: var(--accent);
}.ix-ind__name {
grid-column: 2;
font-family: var(--font-heading);
font-size: min(clamp(1.55rem, 0.9rem + 2.6vw, 2.6rem), 6.3vw);
line-height: 0.95;
letter-spacing: var(--tracking-heading);
text-transform: uppercase;
color: var(--fg);
transition: color 0.5s var(--ease-out);
}@media (max-width: 399px) {
.ix-ind__row {
grid-template-columns: 2em minmax(0, 1fr) auto;
column-gap: 10px;
}
}.ix-ind__note {
grid-column: 2;
margin-top: 6px;
max-width: 34em;
font-size: 0.9375rem;
line-height: 1.45;
color: var(--fg-2);
}.ix-ind__mark {
display: none;
}.ix-env__in {
display: grid;
gap: 22px;
}.ix-env__top {
display: none;
}.ix-env__stage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 200px 230px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background:
radial-gradient(ellipse 70% 55% at 50% 75%, rgba(123, 44, 240, 0.22), transparent 70%),
var(--panel);
}.ix-env__photo {
position: relative;
margin: 0;
overflow: hidden;
background: var(--dc-purple-dark);
}.ix-env__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}.ix-env__scene {
position: relative;
container-type: size;
min-width: 0;
min-height: 0;
overflow: clip;
}.ix-env__scene .ix-scene {
position: absolute;
inset: 0;
}@media (min-width: 600px) {
.ix-env__stage {
grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
grid-template-rows: clamp(240px, 34vw, 320px);
}
}.ix-env__info {
display: grid;
gap: 22px;
margin-bottom: 36px;
}.ix-env__block {
display: grid;
align-content: start;
gap: 10px;
}.ix-env__label {
font-size: max(0.6875rem, var(--fs-floor));
color: var(--fg-3);
}.ix-env__text {
max-width: 40em;
color: var(--fg-2);
line-height: 1.55;
text-wrap: pretty;
}.ix-env__text--solution {
color: var(--fg);
font-weight: 500;
}.ix-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}.ix-chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px 14px 8px 16px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
font-size: 0.875rem;
font-weight: 700;
line-height: 1.1;
color: var(--fg);
transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}.ix-chip__arrow {
width: 14px;
height: 14px;
color: var(--fg-3);
transition: transform 0.5s var(--ease-expo), color 0.35s var(--ease-out);
}.ix-chip:hover {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 10%, transparent);
}.ix-chip:hover .ix-chip__arrow {
color: var(--accent);
transform: translate(2px, -2px);
}.ix-flow {
display: grid;
gap: 8px;
}.ix-flow .wstep {
min-height: 52px;
padding: 10px 14px;
}.ix-flow .wstep__label {
font-size: 0.9375rem;
line-height: 1.3;
}.ix-flow .wstep__meta {
font-size: max(0.625rem, var(--fs-floor));
}.ix-flow .wstep.is-done {
border-color: var(--line-2);
}@media (min-width: 1024px) {
.ix-x__intro {
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: end;
}.ix-x__intro .folio {
grid-column: 1 / -1;
}.ix-x:not(.is-live) .ix-ind {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(40px, 5vw, 96px);
padding-block: 32px;
}.ix-x:not(.is-live) .ix-ind__head {
position: sticky;
top: calc(var(--header-h) + 24px);
align-self: start;
}.ix-x:not(.is-live) .ix-env__info {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
margin-bottom: 0;
}.ix-x:not(.is-live) .ix-env__block--flow,
.ix-x:not(.is-live) .ix-env__block--solution {
grid-column: 1 / -1;
}.ix-x:not(.is-live) .ix-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}@media (min-width: 1024px) {
.ix-x.is-live {
--ix-top: calc(var(--header-h) + 12px);
--ix-h: calc(100vh - var(--header-h) - 24px);
padding-bottom: 0;
}.ix-x.is-live .ix-x__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(36px, 4vw, 72px);
}.ix-x.is-live .ix-x__list,
.ix-x.is-live .ix-ind {
display: contents;
}.ix-x.is-live .ix-x__intro {
grid-column: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
min-height: calc(50vh - var(--ix-top) - 40px);
margin: 0;
padding-bottom: 40px;
}.ix-x.is-live .ix-x__title {
font-size: min(var(--fs-h2), 3.9vw);
}.ix-x.is-live .ix-x__title .line {
white-space: nowrap;
}.ix-x.is-live .ix-x__hint {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: auto;
color: var(--fg-3);
}.ix-x__hint-line {
position: relative;
width: 1px;
height: 32px;
background: var(--line-2);
overflow: hidden;
}.ix-x__hint-line::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 40%;
background: var(--accent);
animation: ixHint 2.2s var(--ease-in-out) infinite;
}@keyframes ixHint {
from { transform: translateY(-100%); }
to { transform: translateY(260%); }
}.ix-x.is-live .ix-ind__head {
grid-column: 1;
border-top: 1px solid var(--line);
}
.ix-x.is-live .ix-x__outro {
grid-column: 1;
display: grid;
align-content: start;
gap: 10px;
min-height: max(200px, calc(50vh - 120px));
padding-top: 32px;
border-top: 1px solid var(--line);
}.ix-x.is-live .ix-ind__row {
grid-template-columns: 3em minmax(0, 1fr) auto;
min-height: max(116px, 14vh);
padding: 18px 0;
will-change: transform;
}.ix-x.is-live .ix-ind__num {
align-self: center;
padding-top: 0;
color: var(--fg-3);
transition: color 0.4s var(--ease-out);
}.ix-x.is-live .ix-ind__name {
font-size: min(3.1vw, 4.2rem);
line-height: 0.92;
color: color-mix(in srgb, var(--fg) 38%, transparent);
}.ix-x.is-live .ix-ind__note {
display: none;
}.ix-x.is-live .ix-ind.is-active .ix-ind__name,
.ix-x.is-live .ix-ind__row:hover .ix-ind__name,
.ix-x.is-live .ix-ind__row:focus-visible .ix-ind__name {
color: var(--fg);
}.ix-x.is-live .ix-ind.is-active .ix-ind__num {
color: var(--accent);
}
.ix-x.is-live .ix-ind__mark {
display: block;
position: relative;
grid-column: 3;
grid-row: 1;
width: clamp(24px, 2.6vw, 52px);
height: 1px;
margin-right: calc(clamp(36px, 4vw, 72px) * -1);
background: var(--accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.7s var(--ease-expo);
}.ix-x.is-live .ix-ind__mark::before {
content: "";
position: absolute;
left: -14px;
top: -6px;
width: 13px;
aspect-ratio: var(--wedge-ratio);
background: var(--dc-lime);
-webkit-mask: var(--wedge);
mask: var(--wedge);
transform: rotate(22.5deg);
opacity: 0;
transition: opacity 0.4s var(--ease-out);
}.ix-x.is-live .ix-ind.is-active .ix-ind__mark {
transform: scaleX(1);
transform-origin: left;
}.ix-x.is-live .ix-ind.is-active .ix-ind__mark::before {
opacity: 1;
}
.ix-x.is-live .ix-x__rig {
display: block;
position: sticky;
top: var(--ix-top);
grid-column: 2;
grid-row: 1 / span 20;
align-self: start;
height: var(--ix-h);
border: 1px solid var(--line);
border-radius: 14px;
background:
radial-gradient(ellipse 45% 32% at 72% 30%, rgba(123, 44, 240, 0.24), transparent 70%),
var(--panel);
}
.ix-x.is-live .ix-env {
position: sticky;
top: var(--ix-top);
z-index: 1;
grid-column: 2;
grid-row: 1 / span 20;
align-self: start;
height: var(--ix-h);
visibility: hidden;
transition: visibility 0s linear 0.7s;
}.ix-x.is-live .ix-env.is-active {
z-index: 2;
visibility: visible;
transition-delay: 0s;
}
.ix-x.is-live .ix-env:not(.is-active):not(.is-near) {
content-visibility: hidden;
}.ix-x.is-live .ix-env__in {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 clamp(18px, 1.8vw, 28px) clamp(16px, 1.6vw, 22px);
gap: 0;
}.ix-x.is-live .ix-env__top {
display: flex;
align-items: center;
gap: 16px;
flex: none;
height: 50px;
border-bottom: 1px solid var(--line);
}.ix-env__id {
display: inline-flex;
gap: 8px;
color: var(--fg-3);
}.ix-env__num {
color: var(--accent);
}.ix-env__name {
min-width: 0;
font-family: var(--font-heading);
font-size: 1.05rem;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}.ix-env__cap {
margin-left: auto;
}
.ix-x.is-live .ix-env__stage {
flex: 1 1 0;
min-height: 0;
grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
grid-template-rows: minmax(0, 1fr);
gap: 12px;
padding-block: 16px;
border: 0;
border-radius: 0;
background: none;
overflow: hidden;
}.ix-x.is-live .ix-env__photo {
border-radius: 10px;
box-shadow: inset 0 0 0 1px var(--line);
}.ix-x.is-live .ix-env__info {
flex: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"challenge solution"
"flow flow"
"services services";
gap: 16px 28px;
margin: 0;
padding-top: 16px;
border-top: 1px solid var(--line);
}.ix-x.is-live .ix-env__block--challenge { grid-area: challenge; }
.ix-x.is-live .ix-env__block--solution { grid-area: solution; }
.ix-x.is-live .ix-env__block--flow { grid-area: flow; }.ix-x.is-live .ix-env__block--services {
grid-area: services;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
}.ix-x.is-live .ix-env__block {
gap: 8px;
}.ix-x.is-live .ix-env__text {
font-size: 0.9375rem;
line-height: 1.5;
}.ix-x.is-live .ix-chip {
font-size: 0.8125rem;
padding-inline: 14px 12px;
}.ix-x.is-live .ix-flow {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}.ix-x.is-live .ix-flow .wstep {
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: start;
gap: 6px 10px;
min-height: 0;
padding: 10px 12px 12px;
}.ix-x.is-live .ix-flow .wstep__n {
width: 24px;
height: 24px;
font-size: max(0.625rem, var(--fs-floor));
}.ix-x.is-live .ix-flow .wstep__meta {
align-self: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.ix-x.is-live .ix-flow .wstep__label {
grid-column: 1 / -1;
font-size: 0.8125rem;
}
.ix-x.is-live .ix-env:not(.is-active):not(.is-near) .ix-env__photo img {
display: none;
}
.ix-x.is-live .ix-env__photo img {
clip-path: inset(0 0 0 100%);
transform: scale(1.08);
transition: clip-path 0.3s var(--ease-out) 0.5s, transform 0.3s var(--ease-out) 0.5s;
}.ix-x.is-live .ix-env.is-active .ix-env__photo img {
clip-path: inset(0);
transform: none;
transition: clip-path 0.9s var(--ease-expo), transform 1.6s var(--ease-expo);
}
.ix-x.is-live .ix-env__top > *,
.ix-x.is-live .ix-env__block {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}.ix-x.is-live .ix-env.is-active .ix-env__top > *,
.ix-x.is-live .ix-env.is-active .ix-env__block {
opacity: 1;
transform: none;
transition: opacity 0.6s var(--ease-out) var(--d, 0.2s), transform 0.9s var(--ease-expo) var(--d, 0.2s);
}.ix-env__block--challenge { --d: 0.22s; }
.ix-env__block--solution { --d: 0.28s; }
.ix-env__block--flow { --d: 0.34s; }
.ix-env__block--services { --d: 0.4s; }
}@media (min-width: 1024px) and (max-height: 820px) {
.ix-x.is-live .ix-env__top {
height: 44px;
}
.ix-x.is-live .ix-env__stage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding-block: 12px;
}.ix-x.is-live .ix-env__info {
gap: 12px 24px;
padding-top: 12px;
}.ix-x.is-live .ix-env__block {
gap: 6px;
}.ix-x.is-live .ix-env__text,
.ix-x.is-live .ix-env__text--solution {
font-size: 0.875rem;
line-height: 1.45;
}.ix-x.is-live .ix-flow .wstep {
padding: 8px 10px 10px;
gap: 4px 8px;
}.ix-x.is-live .ix-chip {
min-height: 40px;
}
}@media (min-width: 1024px) and (max-width: 1199px) {
.ix-x.is-live .ix-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.ix-x.is-live .ix-flow .wstep {
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto;
align-items: center;
padding: 8px 10px;
}.ix-x.is-live .ix-flow .wstep__meta {
display: none;
}.ix-x.is-live .ix-flow .wstep__label {
grid-column: 2;
}
}@media (max-width: 1023px) {
.ix-x.is-acc .ix-ind__mark {
display: block;
position: relative;
grid-column: 3;
grid-row: 1;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line-2);
}.ix-x.is-acc .ix-ind__mark::before,
.ix-x.is-acc .ix-ind__mark::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 1.5px;
background: var(--fg);
translate: -50% -50%;
transition: transform 0.5s var(--ease-expo);
}.ix-x.is-acc .ix-ind__mark::after {
transform: rotate(90deg);
}.ix-x.is-acc .ix-ind.is-open .ix-ind__mark {
border-color: var(--accent);
}.ix-x.is-acc .ix-ind.is-open .ix-ind__mark::after {
transform: rotate(0deg);
}.ix-x.is-acc .ix-env {
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 0.6s var(--ease-expo), visibility 0s linear 0.6s;
}.ix-x.is-acc .ix-env__in {
min-height: 0;
overflow: hidden;
}.ix-x.is-acc .ix-ind.is-open .ix-env {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows 0.6s var(--ease-expo), visibility 0s;
}.ix-x.is-acc .ix-no-anim .ix-env,
.ix-x.is-acc .ix-no-anim .ix-ind__mark::after {
transition: none;
}
}.ix-an.chapter,
.ix-pt.chapter {
padding-block: clamp(56px, 6vw, 100px);
}.ix-an.chapter {
padding-bottom: clamp(40px, 4vw, 64px);
}.ix-an__grid {
display: grid;
gap: clamp(28px, 4vw, 48px);
}.ix-an__head {
display: grid;
gap: 20px;
}.ix-an__visual {
position: relative;
height: clamp(340px, 88vw, 440px);
}.ix-stack {
--tilt: 56deg;
--a: -38deg;
--ps: clamp(180px, 48vw, 240px);
--gap: clamp(38px, 10vw, 56px);
position: absolute;
inset: 0;
display: grid;
place-items: center;
perspective: 1500px;
perspective-origin: 50% 30%;
color: #fff;
}.ix-stack__plane {
position: relative;
width: var(--ps);
height: var(--ps);
transform-style: preserve-3d;
transform: translateY(calc(var(--gap) * var(--s, 1) * 1.1)) rotateX(var(--tilt)) rotateZ(var(--a));
}.ix-layer {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: translateZ(calc(var(--k) * var(--gap) * var(--s, 1)));
}.ix-layer__sheet {
position: absolute;
inset: 0;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(38, 23, 53, 0.35);
}.ix-layer--core .ix-layer__sheet {
background:
linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px) 0 0 / 12.5% 12.5%,
linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px) 0 0 / 12.5% 12.5%,
rgba(20, 13, 29, 0.75);
}.ix-layer__block {
position: absolute;
left: 41%;
top: 43%;
width: 18%;
height: 18%;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--dc-lime);
transform: translateZ(8px);
}.ix-layer__block .wedge {
width: 46%;
background: var(--dc-purple-black);
transform: rotate(22.5deg);
}.ix-layer--mods i {
position: absolute;
left: calc((var(--x) - 13) * 1%);
top: calc((var(--y) - 10) * 1%);
width: 26%;
height: 20%;
border-radius: 6px;
background:
linear-gradient(rgba(103, 33, 223, 0.5), rgba(103, 33, 223, 0.5)) 14% 30% / 60% 10% no-repeat,
linear-gradient(rgba(103, 33, 223, 0.3), rgba(103, 33, 223, 0.3)) 14% 58% / 44% 10% no-repeat,
#fff;
}.ix-layer--wires svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}.ix-layer--wires path {
fill: none;
stroke: var(--dc-lime);
stroke-width: 2;
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--draw, 1) * 100);
vector-effect: non-scaling-stroke;
}.ix-layer--ai .ix-layer__sheet {
background: rgba(197, 244, 61, 0.06);
border-color: rgba(197, 244, 61, 0.7);
border-style: dashed;
}.ix-layer__ring {
position: absolute;
inset: 22%;
border-radius: 50%;
border: 1px solid rgba(197, 244, 61, 0.6);
}.ix-layer--ai i {
position: absolute;
left: calc(var(--x) * 1% - 5px);
top: calc(var(--y) * 1% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--dc-lime);
box-shadow: 0 0 0 5px rgba(197, 244, 61, 0.2);
}.ix-tag--layer {
--z: 0;
--lift: 6px;
left: 100%;
top: 0;
opacity: clamp(0, (var(--s, 1) - 0.55) * 3, 1);
transition: none;
}.ix-an__layers {
display: grid;
border-top: 1px solid var(--line-2);
}.ix-an__layer {
position: relative;
display: grid;
align-content: start;
gap: 8px;
padding: 20px 0 22px;
border-bottom: 1px solid var(--line);
}.ix-an__layer::before {
content: "";
position: absolute;
left: 0;
top: -1px;
width: 100%;
height: 1px;
background: var(--dc-lime);
transform: scaleX(var(--lit, 1));
transform-origin: left;
transition: transform 0.9s var(--ease-expo);
}.ix-an__role {
display: flex;
gap: 10px;
font-size: max(0.6875rem, var(--fs-floor));
color: var(--fg-3);
}.ix-an__n {
color: var(--dc-lime);
transition: color 0.4s var(--ease-out);
}.ix-an__name {
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: 1;
text-transform: uppercase;
}.ix-an__copy {
color: var(--fg-2);
line-height: 1.55;
}.ix-an__link {
display: inline-flex;
align-items: center;
gap: 8px;
justify-self: start;
min-height: 44px;
font-weight: 700;
color: var(--fg);
}.ix-an__link .icon {
width: 15px;
height: 15px;
color: var(--dc-lime);
transition: transform 0.5s var(--ease-expo);
}.ix-an__link:hover .icon {
transform: translate(3px, -3px);
}.ix-an.is-live .ix-an__layer:not(.is-lit) {
--lit: 0;
}.ix-an.is-live .ix-an__layer:not(.is-lit) .ix-an__n {
color: var(--fg-3);
}@media (min-width: 1024px) {
.ix-an__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "visual head" "visual layers";
grid-template-rows: auto 1fr;
column-gap: clamp(40px, 5vw, 96px);
row-gap: 32px;
align-items: start;
}.ix-an__head { grid-area: head; }
.ix-an__layers { grid-area: layers; }.ix-an__visual {
grid-area: visual;
align-self: stretch;
height: auto;
min-height: 500px;
}
.ix-stack {
--ps: clamp(250px, 23vw, 370px);
--gap: clamp(58px, 5.4vw, 88px);
}.ix-an__title {
font-size: min(var(--fs-h2), 4.4vw);
}.ix-an__title .line {
white-space: nowrap;
}.ix-an__layers {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
}.ix-an__copy {
font-size: 0.9375rem;
}
}.ix-pt__title .accent {
color: var(--accent);
}.ix-pt__grid {
display: grid;
gap: 48px;
}.ix-pt__side {
display: grid;
align-content: start;
gap: 28px;
}.no-js .ix-pt__tabs {
display: none;
}.ix-pt__tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}.ix-pt__tab {
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 10px 16px;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
text-align: left;
color: var(--fg-2);
transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}.ix-pt__tab-n {
color: var(--accent);
transition: color 0.35s var(--ease-out);
}.ix-pt__tab-name {
font-weight: 700;
}.ix-pt__tab:hover {
border-color: var(--accent);
color: var(--fg);
}.ix-pt__tab[aria-selected="true"] {
border-color: var(--dc-purple);
background-color: var(--dc-purple);
color: #fff;
}.ix-pt__tab[aria-selected="true"] .ix-pt__tab-n {
color: var(--dc-lime);
}.ix-pt__panel {
display: grid;
align-content: start;
gap: 14px;
}.ix-pt__panel[hidden] {
display: none;
}.ix-pt__panel + .ix-pt__panel {
padding-top: 32px;
border-top: 1px solid var(--line);
}.js .ix-pt__panel + .ix-pt__panel {
padding-top: 0;
border-top: 0;
}.ix-pt__panel:focus-visible {
outline-offset: 8px;
}.ix-pt__name {
display: flex;
align-items: baseline;
gap: 14px;
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: 1;
text-transform: uppercase;
}.ix-pt__name-n {
color: var(--accent);
}.ix-pt__line {
font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--fg);
}.ix-pt__copy {
max-width: 36em;
color: var(--fg-2);
line-height: 1.6;
}.ix-pt__label {
margin-top: 8px;
font-size: max(0.6875rem, var(--fs-floor));
color: var(--fg-3);
}.ix-pt__label b {
font-weight: 500;
color: var(--accent);
}.ix-pt__in {
line-height: 1.9;
color: var(--fg-3);
}.ix-pt__in a {
font-weight: 600;
color: var(--fg);
background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
transition: background-size 0.5s var(--ease-expo), color 0.3s var(--ease-out);
}.ix-pt__in a:hover {
color: var(--accent);
background-size: 100% 1px;
}@media (min-width: 1024px) {
.ix-pt__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: start;
}.ix-pt__side {
position: sticky;
top: calc(var(--header-h) + 32px);
}
}@media (min-width: 1280px) {
.ix-pt__tabs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}.ix-pt__tab {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 12px 14px;
}
}.ix-mx {
margin: 0;
padding: clamp(16px, 2vw, 28px);
border: 1px solid var(--line-2);
border-radius: 14px;
background: color-mix(in srgb, #fff 70%, transparent);
}.ix-mx__cap {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 16px;
margin-bottom: 16px;
}.ix-mx__title {
font-weight: 700;
color: var(--fg);
}.ix-mx__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}.ix-mx__table th,
.ix-mx__table td {
padding: 0;
border-bottom: 1px solid var(--line);
font-weight: inherit;
}.ix-mx__table thead th {
padding-bottom: 10px;
border-bottom-color: var(--line-2);
font-size: 0.8125rem;
font-weight: 600;
text-align: center;
color: var(--fg-3);
transition: color 0.35s var(--ease-out);
}.ix-mx__table thead th:first-child {
width: 44%;
}.ix-mx__table tbody th {
text-align: left;
}.ix-mx__table tbody th a {
display: flex;
align-items: center;
min-height: 36px;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
color: var(--fg-2);
transition: color 0.3s var(--ease-out);
}.ix-mx__table tbody th a:hover {
color: var(--accent);
}.ix-mx__table td {
text-align: center;
transition: background-color 0.4s var(--ease-out);
}.ix-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
border: 1px solid var(--line-2);
vertical-align: middle;
transition: transform 0.5s var(--ease-expo), background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}.ix-dot.is-on {
border-color: transparent;
background: var(--fg-3);
}.ix-mx__table[data-col="0"] thead th:nth-child(2),
.ix-mx__table[data-col="1"] thead th:nth-child(3),
.ix-mx__table[data-col="2"] thead th:nth-child(4),
.ix-mx__table[data-col="3"] thead th:nth-child(5) {
color: var(--accent);
}.ix-mx__table[data-col="0"] td:nth-of-type(1),
.ix-mx__table[data-col="1"] td:nth-of-type(2),
.ix-mx__table[data-col="2"] td:nth-of-type(3),
.ix-mx__table[data-col="3"] td:nth-of-type(4) {
background-color: color-mix(in srgb, var(--accent) 7%, transparent);
}.ix-mx__table[data-col="0"] td:nth-of-type(1) .is-on,
.ix-mx__table[data-col="1"] td:nth-of-type(2) .is-on,
.ix-mx__table[data-col="2"] td:nth-of-type(3) .is-on,
.ix-mx__table[data-col="3"] td:nth-of-type(4) .is-on {
background: var(--accent);
transform: scale(1.35);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}.ix-mx__table[data-col="0"] tr:has(td:nth-of-type(1) .is-on) th a,
.ix-mx__table[data-col="1"] tr:has(td:nth-of-type(2) .is-on) th a,
.ix-mx__table[data-col="2"] tr:has(td:nth-of-type(3) .is-on) th a,
.ix-mx__table[data-col="3"] tr:has(td:nth-of-type(4) .is-on) th a {
color: var(--fg);
}.ix-mx.is-pre .ix-dot {
transform: scale(0);
}.ix-mx.is-reveal .ix-dot {
transition-delay: calc(var(--r, 0) * 0.035s);
}.js .ix-pt__panel:not([hidden]) {
animation: ixPanelIn 0.7s var(--ease-expo);
}@keyframes ixPanelIn {
from { opacity: 0; transform: translateY(14px); }
}@media (pointer: coarse) {
.ix-mx__table tbody th a {
min-height: 44px;
}
}@media (max-width: 599px) {
.ix-mx {
padding: 14px 12px;
}.ix-mx__table thead th {
font-size: max(0.625rem, var(--fs-floor));
letter-spacing: 0;
}.ix-mx__table thead th:first-child {
width: 34%;
}.ix-mx__table tbody th a {
font-size: 0.875rem;
}
}@media (max-width: 399px) {
.ix-mx__table thead th:not(:first-child) {
vertical-align: bottom;
}.ix-mx__h-name {
display: inline-block;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
}.ix-pt.chapter {
padding-bottom: clamp(40px, 4vw, 64px);
}.ix-work.chapter {
padding-top: 0;
padding-bottom: clamp(56px, 6vw, 96px);
}.ix-work__head {
display: grid;
gap: 20px;
margin-bottom: clamp(28px, 3.6vw, 48px);
padding-top: clamp(36px, 4vw, 60px);
border-top: 1px solid var(--line-2);
}.ix-work__side {
display: grid;
justify-items: start;
gap: 14px;
}.ix-work__title .accent {
color: var(--accent);
}.ix-work__grid {
display: grid;
gap: clamp(16px, 2vw, 28px);
}@media (min-width: 700px) and (max-width: 1023px) {
.ix-work__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.ix-work__grid > :first-child {
grid-column: 1 / -1;
}
}@media (min-width: 1024px) {
.ix-work__head {
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: end;
}.ix-work__head .folio {
grid-column: 1 / -1;
}.ix-work__title .line {
white-space: nowrap;
}.ix-work__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}@media (prefers-reduced-motion: reduce) {
.ix-wire--sig,
.ix-x__hint-line::after {
display: none;
}.ix-scene *,
.ix-scene__plane,
.ix-x.is-live .ix-env *,
.ix-console__photo img {
transition-duration: 0.01s !important;
transition-delay: 0s !important;
}
}