.wd-hero__body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.wd-hero__intro { display: contents; }
.wd-hero__intro .kicker { order: 1; }
.wd-hb { order: 2; }
.wd-hero__title { order: 3; --fit: 7.3; position: relative; z-index: 2; }
.wd-hero__lead { order: 4; position: relative; z-index: 2; max-width: 30em; }
.wd-hero__actions { order: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.wd-hero__stack { order: 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; border-top: 1px solid var(--line); }
.wd-hero__stack li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.3; color: var(--fg-2); }
.wd-hero__stack .t-mono { flex-shrink: 0; color: var(--accent); font-size: 0.75rem; }
.wd-hero__down { min-height: 44px; }
@media (hover: hover) {
.wd-hero__down:hover .icon { transform: translateY(3px); }
}
@media (min-width: 768px) {
.wd-hero__title { --fit: 12.2; }
}
@media (min-width: 1024px) {
.wd-hero__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 0; }
.wd-hero__intro { display: grid; grid-column: 1 / 6; grid-row: 1; align-content: center; gap: clamp(14px, 2vh, 20px); position: relative; z-index: 2; }
.wd-hb { grid-column: 6 / 13; grid-row: 1; }
.wd-hero__title { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(14px, 2.2vh, 30px); font-size: min(var(--fs-mega), calc(var(--content-w) / var(--fit)), 13svh); }
.wd-hero__stack li { padding: 6px 0; font-size: 0.875rem; }
.wd-hero__lead { grid-column: 8 / 13; grid-row: 2; align-self: end; justify-self: end; max-width: 25em; font-size: clamp(1rem, 0.8rem + 0.35vw, 1.15rem); }
}
.wd-hb { --hw: min(70vw, 440px); position: relative; height: calc(var(--hw) * 0.8); perspective: 1500px; perspective-origin: 50% 35%; pointer-events: none; }
@media (min-width: 1024px) {
.wd-hb { --hw: clamp(330px, min(36vw, (100svh - 380px) * 1.08), 560px); height: calc(var(--hw) * 0.66); margin-bottom: calc(var(--hw) * -0.1); }
}
.wd-hb__rig {
--d: 1;
--rx: 26deg;
--ry: -24deg;
--rz: 8deg;
position: absolute;
left: 50%;
top: 50%;
width: var(--hw);
height: calc(var(--hw) * 0.64);
margin: calc(var(--hw) * -0.32) 0 0 calc(var(--hw) / -2);
font-size: calc(var(--hw) / 40);
transform-style: preserve-3d;
transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
}
.wd-hb__layer,
.wd-hb__sat { --in: 1; position: absolute; inset: 0; opacity: var(--in); transform: translateZ(calc((var(--z) * var(--d) + (1 - var(--in)) * 160) * 0.075em)); }
.wd-hb__win { border: 1px solid #ffffff29; border-radius: 0.9em; background: linear-gradient(160deg, #2c1b40, #140d1d 72%); box-shadow: 0 3em 6em -2em #000000bf, inset 0 1px 0 #ffffff14; overflow: hidden; }
.wd-hb__bar { display: flex; align-items: center; gap: 1em; height: 2.5em; padding: 0 1em; border-bottom: 1px solid #ffffff14; }
.wd-hb__dots { display: flex; gap: 0.4em; }
.wd-hb__dots i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #ffffff40; }
.wd-hb__url { flex: 1; max-width: 16em; padding: 0.35em 0.8em; border-radius: 99px; background: #ffffff0f; font: 500 0.72em/1 var(--font-body); color: #ffffff99; }
.is-motion .wd-hb__layer,
.is-motion .wd-hb__sat { --in: 0; }
.wd-hb__grid {
inset: 2.5em 1.4em 0;
background: repeating-linear-gradient(90deg, #c5f43d33 0 1px, transparent 1px calc(100% / 12)), repeating-linear-gradient(180deg, #ffffff0d 0 1px, transparent 1px 1.6em);
border-right: 1px solid #c5f43d33;
}
.wd-hb__nav { position: absolute; left: 1.4em; right: 1.4em; top: 3.3em; display: flex; align-items: center; gap: 1.1em; }
.wd-hb__logo { width: 1.4em; height: 1.4em; border-radius: 0.3em; background: var(--dc-lime); }
.wd-hb__nav b { width: 2.4em; height: 0.36em; border-radius: 1em; background: #ffffff66; }
.wd-hb__nav b:first-of-type { margin-left: auto; }
.wd-hb__nav em { width: 4.6em; height: 1.6em; border: 1px solid var(--dc-lime); border-radius: 99px; }
.wd-hb__h,
.wd-hb__p,
.wd-hb__btn,
.wd-hb__img,
.wd-hb__ring,
.wd-hb__cursor { position: absolute; left: 1.4em; }
.wd-hb__h { top: 7em; width: 15.5em; height: 1.55em; border-radius: 0.2em; background: #fff; }
.wd-hb__h--b { top: 9.1em; width: 11em; background: var(--dc-lime); }
.wd-hb__p { top: 11.7em; width: 13.5em; height: 0.4em; border-radius: 1em; background: #ffffff59; }
.wd-hb__p--b { top: 12.7em; width: 10em; }
.wd-hb__btn { top: 14.4em; width: 6.6em; height: 2em; border-radius: 99px; background: var(--dc-lime); }
.wd-hb__img { left: auto; right: 1.4em; top: 6.6em; width: 15em; height: 10em; border-radius: 0.5em; background: linear-gradient(140deg, #7b2cf0, #261735 80%); overflow: hidden; }
.wd-hb__img i { position: absolute; left: 30%; top: 16%; width: 6.5em; height: 6.5em; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #e8ff9a, #c5f43d 30%, #6721df 78%); }
.wd-hb__cards { position: absolute; left: 1.4em; right: 1.4em; bottom: 1.1em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8em; }
.wd-hb__cards i { height: 4.4em; border: 1px solid #ffffff33; border-radius: 0.4em; background: #ffffff0d; }
.wd-hb__ring { left: 1em; top: 14em; width: 7.4em; height: 2.8em; border: 2px solid var(--dc-lime); border-radius: 99px; }
.wd-hb__cursor { left: 6.3em; top: 15.4em; width: 2em; fill: #fff; stroke: #140d1d; stroke-width: 1.4; stroke-linejoin: round; }
.wd-hb__sat { inset: auto; display: grid; gap: 0.55em; padding: 0.9em 1em; border: 1px solid #ffffff2e; border-radius: 0.6em; background: #140d1df0; box-shadow: 0 2em 4em -1.5em #000000cc; color: #fff; }
.wd-hb__tag { font: 600 0.7em/1 var(--font-body); color: var(--dc-lime); }
.wd-hb__cms { left: -8%; bottom: -12%; width: 12.5em; }
.wd-hb__cms b { font-size: 0.9em; }
.wd-hb__field { height: 1.2em; border: 1px solid #ffffff2e; border-radius: 0.25em; }
.wd-hb__field--b { width: 70%; }
.wd-hb__pub { justify-self: start; padding: 0.35em 0.8em; border-radius: 99px; background: var(--dc-purple); font-size: 0.7em; font-weight: 700; }
.wd-hb__api { right: -9%; top: 44%; grid-template-columns: auto auto; align-items: center; column-gap: 0.8em; }
.wd-hb__api .wd-hb__tag { grid-column: 1 / -1; }
.wd-hb__api code { font: 500 0.8em/1 var(--font-mono); }
.wd-hb__ok { padding: 0.25em 0.5em; border-radius: 0.25em; background: var(--dc-lime); color: #140d1d; font: 500 0.7em/1 var(--font-mono); }
.wd-hb__stats { right: 4%; top: -12%; width: 11em; }
.wd-hb__stats svg { width: 100%; height: 2.6em; overflow: visible; }
.wd-hb__stats path,
.wd-p-chart path { fill: none; stroke: var(--dc-lime); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wd-hb__floor { position: absolute; left: 12%; right: 12%; bottom: 0; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, #7b2cf066, transparent); }
.wd-head__text { display: grid; gap: 20px; align-content: end; }
.wd-head__text .t-lead { max-width: 32em; }
.wd-photo { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--dc-purple-dark); box-shadow: 0 0 0 1px var(--line-2); }
.wd-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.wd-bp .wd-photo { --op: 38% 62%; }
@media (min-width: 1024px) {
.wd-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.wd-head > .wd-head__text { grid-column: 1; }
.wd-head > .wd-photo { grid-column: 2; aspect-ratio: 3 / 2; }
}
.wd-build__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.wd-build__visual { order: -1; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1024px) {
.wd-build__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; }
.wd-build__visual { order: 0; }
}
.wd-step { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--fg-3); transition: color 0.4s var(--ease-out); }
.wd-step:last-child { border-bottom: 1px solid var(--line); }
.wd-step__n { font-size: 0.75rem; }
.wd-step__name { font-family: var(--font-heading); font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem); line-height: 1; text-transform: uppercase; color: var(--fg-2); transition: color 0.4s var(--ease-out); }
.wd-step__tick { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-2); border-radius: 50%; color: transparent; transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), color 0.4s var(--ease-out); }
.wd-step__tick .icon { width: 14px; height: 14px; }
.wd-step.is-done .wd-step__tick { border-color: var(--accent); background-color: var(--accent); color: var(--bg); }
.wd-step.is-done .wd-step__n,
.wd-step.is-active .wd-step__n { color: var(--accent); }
.wd-step.is-active .wd-step__name { color: var(--fg); }
.wd-step.is-active .wd-step__tick { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.wd-step__copy { grid-column: 2 / -1; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.55s var(--ease-expo); }
.wd-step__copy > span { overflow: hidden; padding-top: 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2); }
.wd-build__status { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.8125rem; color: var(--fg-3); }
.wd-build__status b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.wd-build__state { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 99px; color: var(--fg-2); }
.wd-build__state.is-live { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.wd-build__state:not(.is-live) .pulse { background: var(--fg-3); }
.wd-build__seg { display: flex; gap: 4px; }
.wd-build__seg i { position: relative; flex: 1; height: 2px; background: var(--line-2); overflow: hidden; }
.wd-build__seg i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.wd-build.is-pin { padding-bottom: 0; }
.wd-build.is-pin .chapter__head,
.wd-bp.is-pin .chapter__head { margin-bottom: clamp(20px, 2.4vw, 36px); }
.wd-build.is-pin .wd-build__stage { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); padding: 10px 0 18px; }
.wd-build.is-pin .wd-build__grid { height: 100%; align-items: stretch; }
.wd-build.is-pin .wd-build__log { align-self: center; }
.wd-build.is-pin .wd-build__visual { height: 100%; min-height: 0; }
.wd-build.is-pin .wd-step:not(.is-active) .wd-step__copy { grid-template-rows: 0fr; }
.wd-build.is-pin .wd-step { padding: clamp(6px, 1.1vh, 11px) 0; }
.wd-iso { position: relative; height: min(88vw, 400px); perspective: 2600px; perspective-origin: 50% 30%; }
.wd-build.is-pin .wd-iso { flex: 1; height: auto; min-height: 0; }
@media (min-width: 1024px) {
.wd-iso { height: 600px; }
}
.wd-iso__rig {
--pw: min(62vw, 320px);
--gap: 3.2em;
--rx: 56deg;
--rz: -38deg;
--s: 1;
--ty: calc(var(--gap) * 2.9);
position: absolute;
left: 50%;
top: 50%;
width: var(--pw);
height: calc(var(--pw) * 0.62 * var(--hk, 1));
margin: calc(var(--pw) * -0.31 * var(--hk, 1)) 0 0 calc(var(--pw) / -2);
font-size: calc(var(--pw) / 40);
transform-style: preserve-3d;
transform: translateY(var(--ty)) scale(var(--s)) rotateX(var(--rx)) rotateZ(var(--rz));
}
@media (min-width: 1024px) {
.wd-iso__rig { --pw: clamp(340px, 34vw, 540px); }
}
@media (min-width: 1024px) and (max-height: 820px) {
.wd-build.is-pin .wd-iso__rig { --pw: clamp(320px, 30vw, 440px); }
}
.wd-plane { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--gap))); }
.wd-plane::before { content: ""; position: absolute; inset: 0; border: 1px dashed #ffffff33; border-radius: 0.5em; transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.wd-plane.is-active::before { border: 1px solid var(--dc-lime); box-shadow: 0 0 2em #c5f43d3d; }
.wd-plane__tag { position: absolute; right: 100%; top: 0; margin-right: 1.6em; opacity: var(--tag, 1); font: 500 1.2em/1 var(--font-body); white-space: nowrap; color: #ffffff8c; transition: color 0.4s var(--ease-out); }
.wd-plane__tag b { margin-right: 0.3em; font-weight: 600; color: var(--dc-lime); }
.wd-plane.is-active .wd-plane__tag { color: #fff; }
.wd-plane__body { --lift: 0; --o: 1; position: absolute; inset: 0; border-radius: 0.5em; opacity: var(--o); transform: translateZ(calc(var(--lift) * 1em)); }
.wd-plane--grid .wd-plane__body { background: #7b2cf024; border: 1px solid #ffffff24; }
.wd-plane__body > * { position: absolute; }
.wd-p-cols { inset: 0 2em; background: repeating-linear-gradient(90deg, #c5f43d66 0 1px, #c5f43d0a 1px calc(100% / 12 - 0.6em), transparent calc(100% / 12 - 0.6em) calc(100% / 12)); }
.wd-p-rows { inset: 0; background: repeating-linear-gradient(180deg, #ffffff14 0 1px, transparent 1px 2em); }
.wd-p-nav { left: 2em; right: 2em; top: 1.4em; height: 2.8em; display: flex; align-items: center; gap: 1.4em; border-bottom: 1px solid #ffffff40; }
.wd-p-logo { width: 2em; height: 2em; border-radius: 0.35em; background: var(--dc-lime); }
.wd-p-nav b { width: 3.4em; height: 0.55em; border-radius: 1em; background: #ffffff8c; }
.wd-p-nav b:first-of-type { margin-left: auto; }
.wd-p-nav em { width: 6em; height: 2em; border: 1px solid var(--dc-lime); border-radius: 99px; }
.wd-p-h { left: 2em; top: 6.2em; width: 18em; height: 2em; border-radius: 0.2em; background: #fff; }
.wd-p-h--b { top: 8.8em; width: 12em; opacity: 0.8; }
.wd-p-t { left: 2em; top: 12.2em; width: 16em; height: 0.55em; border-radius: 1em; background: #ffffff73; }
.wd-p-t--b { top: 13.6em; width: 11em; }
.wd-p-img { right: 2em; top: 5.8em; width: 14em; height: 10.5em; border-radius: 0.5em; background: radial-gradient(circle at 50% 46%, #c5f43de6 0 2.6em, transparent 2.7em), linear-gradient(140deg, #7b2cf0, #261735); }
.wd-p-cards { left: 2em; right: 2em; bottom: 1.4em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.wd-p-cards i { height: 5em; border: 1px solid #ffffff4c; border-radius: 0.4em; background: #ffffff14; }
.wd-p-btn { left: 2em; top: 15.8em; width: 8em; height: 2.2em; border-radius: 99px; background: var(--dc-lime); }
.wd-p-ring { left: 1.4em; top: 15.2em; width: 9.2em; height: 3.4em; border: 2px solid var(--dc-lime); border-radius: 99px; }
.wd-p-cursor { left: 8.4em; top: 16.8em; width: 2.4em; fill: #fff; stroke: #140d1d; stroke-width: 1.4; }
.wd-p-focus { left: 1.4em; bottom: 0.8em; width: calc((100% - 7em) / 4 + 1.2em); height: 6.2em; border: 2px dashed var(--dc-lime); border-radius: 0.6em; }
.wd-p-toggle { right: 2em; top: 17em; width: 3.4em; height: 1.8em; border-radius: 99px; background: var(--dc-lime); }
.wd-p-toggle i { position: absolute; right: 0.25em; top: 0.25em; width: 1.3em; height: 1.3em; border-radius: 50%; background: #140d1d; }
.wd-p-cms { right: 1.2em; top: 4.8em; bottom: 1.2em; width: 13em; display: flex; flex-direction: column; gap: 0.8em; padding: 1.1em; border: 1px solid #7b2cf0; border-radius: 0.5em; background: #261735f5; color: #fff; }
.wd-p-cms b { font-size: 1em; }
.wd-p-cms i { height: 1.8em; border: 1px solid #ffffff38; border-radius: 0.3em; }
.wd-p-cms em { margin-top: auto; padding: 0.5em 0; border-radius: 99px; background: var(--dc-purple); font-size: 0.9em; font-style: normal; font-weight: 700; text-align: center; }
.wd-p-wires { inset: 0; width: 100%; height: 100%; overflow: visible; opacity: var(--tag, 1); }
.wd-p-wires path { fill: none; stroke: var(--dc-lime); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.wd-p-api { left: 2em; top: calc(var(--y) / 62 * 100%); transform: translateY(-50%); padding: 0.5em 0.8em; border: 1px solid var(--dc-lime); border-radius: 0.3em; background: #140d1d; font: 500 0.95em/1 var(--font-mono); color: var(--dc-lime); white-space: nowrap; }
.wd-p-chart { left: 2em; right: 2em; bottom: 2em; width: calc(100% - 4em); height: 8em; overflow: visible; }
.wd-plane--live .wd-plane__body { background: #fff; overflow: hidden; box-shadow: 0 2em 5em -1em #00000099; }
.wd-p-bar { left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 0.5em; height: 2.4em; padding: 0 1em; background: #1d1428; font: 500 0.9em/1 var(--font-body); color: #ffffff99; }
.wd-p-bar i { width: 0.6em; height: 0.6em; border-radius: 50%; background: #ffffff40; }
.wd-p-bar span { margin-left: 0.8em; }
.wd-p-shot { inset: 2.4em 0 0; overflow: hidden; }
.wd-p-shot img { width: 100%; transform: translateY(var(--scroll, 0%)); }
@media (max-width: 767px) {
.wd-plane__tag { display: none; }
}
.wd-build.is-pin + .wd-bp { padding-top: clamp(40px, 3.4vw, 56px); }
.wd-bp__grid { display: grid; gap: 24px; }
@media (min-width: 1024px) {
.wd-bp__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; }
}
@media (min-width: 1280px) and (min-height: 860px) {
.wd-bp__grid { grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 380px); }
}
.wd-bp__board { position: relative; }
.wd-bp__sheet { --paper: #fdfcff; position: relative; border: 1px solid #6721df47; border-radius: var(--radius-md); overflow: hidden; container-type: inline-size; background-color: var(--paper); color: #19151f; }
.wd-bp__ratio { display: block; aspect-ratio: 16 / 9; }
.wd-bp__state > .wd-bp__ratio { display: none; }
@media (min-width: 1280px) and (min-height: 860px) {
.wd-bp__sheet > .wd-bp__ratio { aspect-ratio: 16 / 10; }
}
.wd-bp__state {
--pp: 1;
position: absolute;
inset: 0;
margin: 0;
background-color: var(--paper);
background-image: linear-gradient(#6721df21 1px, transparent 1px), linear-gradient(90deg, #6721df21 1px, transparent 1px), linear-gradient(#6721df0d 1px, transparent 1px), linear-gradient(90deg, #6721df0d 1px, transparent 1px);
background-size: 12.5cqw 12.5cqw, 12.5cqw 12.5cqw, 2.5cqw 2.5cqw, 2.5cqw 2.5cqw;
background-position: -1px -1px;
clip-path: inset(0 calc(100% - var(--pp) * 100%) 0 0);
}
.wd-bp__cap { position: absolute; left: 2cqw; bottom: 1.6cqw; z-index: 2; padding: 0.45em 0.8em; border-radius: var(--radius-sm); background: var(--paper); font: 500 max(12px, 1.3cqw) / 1.2 var(--font-body); color: var(--dc-purple); box-shadow: 0 0 0 1px #6721df33; }
.wd-bp__state.is-covered .wd-bp__cap { visibility: hidden; }
.wd-bp__scan { --scan: 0; position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 2px; background: var(--dc-purple); box-shadow: 0 0 20px 2px #6721df73; opacity: 0; transform: translateX(calc(var(--scan) * 100cqw - 1px)); pointer-events: none; }
.wd-bp__scan span { position: absolute; top: 1.6cqw; left: 8px; padding: 5px 8px; border-radius: 4px; background: var(--dc-purple); color: #fff; font: 600 max(12px, 1.2cqw) / 1 var(--font-body); white-space: nowrap; }
.wd-bp__scan.is-flip span { left: auto; right: 8px; }
.wd-bp__board .marks { --c: #6721df73; }
.wd-sk { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #2f2540; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wd-sk__soft { stroke-width: 1.4; opacity: 0.55; }
.wd-sk__thick { stroke-width: 9; opacity: 0.8; }
.wd-sk__note { stroke: var(--dc-purple); stroke-dasharray: 4 5; }
.wd-sk__label { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); padding: 0.35em 0.7em; border: 1px dashed #6721df8c; border-radius: 4px; background: var(--paper); font: 500 max(12px, 1.35cqw) / 1.2 var(--font-body); color: var(--dc-purple); transform: rotate(-2deg); white-space: nowrap; }
.wd-ui { position: absolute; inset: 6% 6% 13%; display: grid; grid-template-rows: auto 1fr auto; border-radius: 1cqw; background: #fff; box-shadow: 0 2cqw 5cqw -2cqw #26173566, 0 0 0 1px #6721df24; overflow: hidden; font-size: 1.35cqw; line-height: 1.35; color: #19151f; }
.wd-ui__nav { display: flex; align-items: center; gap: 2.2em; padding: 1em 2em; border-bottom: 1px solid #ece9f1; font-size: 0.9em; font-weight: 600; }
.wd-ui__logo { margin-right: auto; font-family: var(--font-heading); font-size: 1.15em; text-transform: uppercase; }
.wd-ui__cart { padding: 0.35em 0.9em; border-radius: 99px; background: #19151f; color: #fff; font-size: 0.85em; }
.wd-ui__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2em; align-items: center; padding: 1.6em 2em; }
.wd-ui__eyebrow { font-size: 0.75em; font-weight: 700; color: var(--dc-purple); }
.wd-ui__h { margin: 0.3em 0 0.4em; font-family: var(--font-heading); font-size: 2.7em; line-height: 0.92; text-transform: uppercase; }
.wd-ui__p { color: #696370; }
.wd-ui__btn { display: inline-block; margin-top: 1.2em; padding: 0.75em 1.4em; border-radius: 99px; background: var(--dc-purple); color: #fff; font-size: 0.85em; font-weight: 700; }
.wd-ui__art { position: relative; height: 100%; min-height: 11em; border-radius: 0.8em; background: linear-gradient(145deg, #261735, #6721df); overflow: hidden; }
.wd-ui__art i { position: absolute; left: 50%; top: 50%; width: 7em; height: 7em; margin: -3.5em; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #f0ffc2, #c5f43d 32%, #7b2cf0 80%); }
.wd-ui__art b { position: absolute; left: 18%; right: 18%; bottom: 12%; height: 0.4em; border-radius: 1em; background: #ffffff4c; }
.wd-ui__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; padding: 0 2em 1.4em; }
.wd-ui__row span { display: grid; gap: 0.4em; font-size: 0.8em; font-weight: 700; }
.wd-ui__row i { height: 3.2em; border-radius: 0.5em; background: #f1eef6; }
.wd-inf__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.wd-inf__wires path { fill: none; stroke: var(--dc-purple); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 5 6; animation: wdFlow 1.4s linear infinite; }
.wd-inf__wires .wd-inf__dash { stroke-dasharray: 2 5; opacity: 0.6; }
@keyframes wdFlow {
to { stroke-dashoffset: -22; }
}
.wd-inf__wires--v { display: none; }
.wd-inf { position: absolute; inset: 0; }
.wd-inf li { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: grid; gap: 0.3em; padding: 0.75em 1.05em; border: 1px solid #6721df80; border-radius: 0.5em; background: #fff; font: 600 max(12px, 1.4cqw) / 1.15 var(--font-body); text-align: center; white-space: nowrap; color: #19151f; transform: translate(-50%, -50%); }
.wd-inf small { font-size: max(12px, 0.86em); font-weight: 400; color: #696370; }
.wd-inf .wd-inf__n--core { border-color: var(--dc-purple); background: var(--dc-purple); color: #fff; box-shadow: 0 1.4cqw 3cqw -1cqw #6721df99; }
.wd-inf .wd-inf__n--core small { color: #ffffffd9; }
.wd-inf .wd-inf__ext { border-style: dashed; background: var(--paper); }
.wd-inf .wd-inf__band { width: 66%; border-style: dashed; background: #f3eefc; color: var(--dc-purple); }
@container (max-width: 900px) {
.wd-inf li { left: clamp(8%, calc(var(--x) * 1%), 91%); max-width: 16cqw; padding: 0.5em 0.6em; white-space: normal; }
.wd-inf .wd-inf__band { max-width: none; }
}
@container (max-width: 560px) {
.wd-bp__ratio { aspect-ratio: 4 / 5; }
.wd-bp__cap { left: 3cqw; bottom: 3cqw; padding: 0.35em 0.7em; }
.wd-sk { inset: 4cqw 0 auto; height: 68cqw; }
.wd-sk__note { display: none; }
.wd-sk__label { top: 78cqw; left: 5cqw; }
.wd-sk__label:nth-of-type(2) { top: 90cqw; left: 16cqw; transform: rotate(1.5deg); }
.wd-sk__label:nth-of-type(3) { top: 102cqw; left: 27cqw; transform: rotate(-1deg); }
.wd-ui { inset: 4cqw 4cqw 14cqw; font-size: max(12px, 3.3cqw); }
.wd-ui__nav { gap: 1.2em; padding: 0.9em 1.2em; font-size: 1em; }
.wd-ui__nav > span:nth-child(3),
.wd-ui__nav > span:nth-child(4) { display: none; }
.wd-ui__cart,
.wd-ui__eyebrow,
.wd-ui__btn,
.wd-ui__row span { font-size: 1em; }
.wd-ui__hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 1em; align-items: stretch; padding: 1.2em; }
.wd-ui__h { font-size: 2em; }
.wd-ui__art { min-height: 3em; }
.wd-ui__art i { width: 4em; height: 4em; margin: -2em; }
.wd-ui__row { gap: 0.6em; padding: 0 1.2em 1.2em; }
.wd-ui__row i { height: 2.4em; }
.wd-inf__wires--h { display: none; }
.wd-inf__wires--v { display: block; }
.wd-inf li { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); max-width: 30cqw; padding: 0.45em 0.6em; font-size: 12px; line-height: 1.2; }
.wd-inf .wd-inf__n--core { max-width: 46cqw; }
.wd-inf .wd-inf__band { width: 88%; }
}
.wd-bp__notes { display: grid; border-top: 1px solid var(--line); }
.wd-bp__note { display: grid; gap: 8px; padding: 12px 0 16px; border-bottom: 1px solid var(--line); color: var(--fg-3); transition: color 0.45s var(--ease-out); }
.wd-bp__note .t-body { color: var(--fg-2); font-size: 0.95rem; }
.wd-bp__note.is-active { color: var(--fg); }
.wd-bp__btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; font-family: var(--font-heading); font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; text-align: left; color: inherit; transition: color 0.3s var(--ease-out); }
.wd-bp__tn { font-size: 0.75rem; color: var(--accent); }
.wd-bp__go { display: grid; margin-left: auto; opacity: 0; transform: translateX(-8px); transition: opacity 0.35s var(--ease-out), transform 0.55s var(--ease-expo); }
.wd-bp__go .icon { width: 20px; height: 20px; }
.wd-bp__btn[aria-pressed="true"] .wd-bp__go { opacity: 1; transform: none; color: var(--accent); }
.wd-bp__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-bp__chips .chip,
.wd-spec__items .chip { font-size: 0.75rem; }
@media (hover: hover) {
.wd-bp__btn:hover { color: var(--fg); }
.wd-bp__btn:hover .wd-bp__go { opacity: 1; transform: none; }
}
.wd-bp.is-pin { padding-bottom: clamp(24px, 3vw, 48px); }
.wd-bp.is-pin .wd-bp__stage { padding-block: 8px; }
.wd-bp.is-pin .wd-bp__board { width: min(100%, calc((100svh - var(--header-h) - 48px) * 16 / 9)); }
.wd-bp.is-pin .wd-bp__note { gap: 6px; padding: clamp(4px, 1vh, 12px) 0 clamp(10px, 1.6vh, 16px); }
@media (min-width: 1280px) and (min-height: 860px) {
.wd-bp.is-pin .wd-bp__board { width: min(100%, calc((100svh - var(--header-h) - 48px) * 16 / 10)); }
}
.no-js .wd-bp__go,
.no-js .wd-bp__scan { display: none; }
.no-js .wd-bp__sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; border: 0; background: none; overflow: visible; container-type: normal; }
.no-js .wd-bp__sheet > .wd-bp__ratio { display: none; }
.no-js .wd-bp__state > .wd-bp__ratio { display: block; }
.no-js .wd-bp__state { position: relative; border: 1px solid #6721df47; border-radius: var(--radius-md); clip-path: none; container-type: inline-size; }
.no-js .wd-bp__grid { grid-template-columns: minmax(0, 1fr); }
.no-js .wd-bp__notes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: clamp(20px, 3vw, 44px); border-top: 0; }
.no-js .wd-bp__note { color: var(--fg); border-top: 1px solid var(--line); }
.wd-spec__grid { display: grid; gap: 24px; }
@media (min-width: 1024px) {
.wd-spec__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; }
}
.wd-spec__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wd-spec__tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--fg-2); text-align: left; transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out), padding 0.55s var(--ease-expo); }
.wd-spec__n { font-size: 0.75rem; color: var(--fg-3); }
.wd-spec__name { font-family: var(--font-heading); font-size: max(min(0.78rem, 3.1vw), var(--fs-floor)); line-height: 1.05; text-transform: uppercase; overflow-wrap: normal; }
@media (max-width: 1023px) {
.wd-spec__tab { grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding-inline: 10px; }
}
.wd-spec__go { display: none; }
.wd-spec__go .icon { width: 18px; height: 18px; }
.wd-spec__tab[aria-selected="true"] { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--fg); }
.wd-spec__tab[aria-selected="true"] .wd-spec__n { color: var(--accent); }
@media (min-width: 1024px) {
.wd-spec__tabs { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.wd-spec__tab { grid-template-columns: 3em minmax(0, 1fr) auto; min-height: 54px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.wd-spec__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-expo); }
.wd-spec__name { font-size: clamp(1.05rem, 0.7rem + 0.8vw, 1.55rem); }
.wd-spec__go { display: block; opacity: 0; transform: translateX(-10px); transition: opacity 0.35s var(--ease-out), transform 0.55s var(--ease-expo); }
.wd-spec__tab[aria-selected="true"] { padding-left: 14px; background: none; }
.wd-spec__tab[aria-selected="true"]::after { transform: scaleX(1); }
.wd-spec__tab[aria-selected="true"] .wd-spec__go { opacity: 1; transform: none; color: var(--accent); }
}
@media (hover: hover) {
.wd-spec__tab:hover { color: var(--fg); border-color: var(--fg-3); }
}
@media (hover: hover) and (min-width: 1024px) {
.wd-spec__tab:hover { padding-left: 10px; }
.wd-spec__tab:hover .wd-spec__go { opacity: 1; transform: none; }
}
.wd-spec__console { box-shadow: 0 50px 100px -50px #000000e6; }
.wd-spec__bt,
.wd-perf__bt { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 0.8125rem var(--font-body); letter-spacing: 0; text-transform: none; color: var(--fg-2); }
.wd-spec__panel { display: grid; }
.wd-spec__panel + .wd-spec__panel { border-top: 1px solid var(--line); }
.wd-spec__panel[hidden] { display: none; }
.wd-spec__panel:focus-visible { outline-offset: -4px; }
.wd-demo { position: relative; display: grid; place-items: center; min-height: 250px; padding: 26px 18px 44px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 60% 70% at 70% 20%, #7b2cf02e, transparent 70%), radial-gradient(#ffffff12 1px, transparent 1.3px) 0 0 / 18px 18px; overflow: hidden; }
@media (min-width: 1024px) {
.wd-demo { height: 290px; padding: 28px 32px 44px; }
}
.wd-demo > .illus { position: absolute; right: 14px; bottom: 12px; }
.wd-demo__note { position: absolute; left: 18px; right: 18px; bottom: 12px; font-size: 0.8125rem; color: var(--fg-3); }
.wd-spec__text { display: grid; gap: 12px; padding: clamp(20px, 2.2vw, 28px); }
.wd-spec__text .t-h3 { display: flex; align-items: baseline; gap: 12px; }
.wd-spec__pn { font-size: 0.75rem; color: var(--accent); }
.wd-spec__items { display: flex; flex-wrap: wrap; gap: 6px; }
.js .wd-spec:not(.is-live) .wd-demo *,
.js .wd-spec:not(.is-live) .wd-demo *::before,
.js .wd-spec:not(.is-live) .wd-demo *::after { animation-play-state: paused; }
.no-js .wd-spec__tabs { display: none; }
.no-js .wd-spec__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
.no-js .wd-spec__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.no-js .wd-demo { border-bottom: 0; border-right: 1px solid var(--line); }
.no-js .wd-spec__text { align-content: center; }
}
.wd-jny-wrap { position: relative; width: 100%; max-width: 560px; margin-top: 26px; }
.wd-jny { position: relative; display: flex; justify-content: space-between; }
.wd-jny::before { content: ""; position: absolute; left: 11px; right: 11px; top: 11px; height: 1px; background: var(--line-2); }
.wd-jny li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 0; font-size: 0.75rem; font-weight: 500; white-space: nowrap; color: var(--fg-2); }
.wd-jny li:first-child { align-items: flex-start; }
.wd-jny li:last-child { align-items: flex-end; }
.wd-jny s { width: 6em; white-space: normal; text-align: center; line-height: 1.3; }
@media (max-width: 599px) {
.wd-jny { margin-inline: 28px; }
.wd-jny::before { left: 0; right: 0; }
.wd-jny li:first-child,
.wd-jny li:last-child { align-items: center; }
.wd-jny-wrap .wd-jny__run { left: 28px; right: 28px; }
}
.wd-jny__dot { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--dc-purple-black); }
.wd-jny__dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dc-lime); }
.wd-jny .wd-jny__cut { color: var(--fg-3); transform: translateY(-46px); }
.wd-jny__cut .wd-jny__dot { border-style: dashed; }
.wd-jny__cut .wd-jny__dot::after { background: var(--fg-3); }
.wd-jny__run { position: absolute; left: 11px; right: 11px; top: 6px; height: 11px; pointer-events: none; }
.wd-jny__run i { position: relative; display: block; height: 100%; animation: wdRun 5s var(--ease-in-out) infinite; }
.wd-jny__run i::before { content: ""; position: absolute; left: -6px; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--dc-lime); box-shadow: 0 0 10px 2px #c5f43d80; }
@keyframes wdRun {
0%, 6% { transform: translateX(0); opacity: 0; }
12% { opacity: 1; }
82% { transform: translateX(100%); opacity: 1; }
92%, 100% { transform: translateX(100%); opacity: 0; }
}
.wd-uis { display: grid; gap: 22px; justify-items: center; }
.wd-uis__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; }
.wd-uis__btn { padding: 11px 18px; border-radius: 99px; background: var(--dc-lime); color: var(--dc-purple-black); font-size: 0.85rem; font-weight: 700; }
.wd-uis__btn.is-hover { background: var(--dc-lime-dark); box-shadow: var(--shadow-lime); animation: wdLift 2.6s var(--ease-in-out) infinite; }
.wd-uis__btn.is-focus { outline: 2px solid #fff; outline-offset: 3px; }
.wd-uis__btn.is-off { background: #ffffff1f; color: #ffffff99; }
@keyframes wdLift {
50% { transform: translateY(-3px); }
}
.wd-uis__type { display: grid; line-height: 1; }
.wd-uis__type b { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 400; }
.wd-uis__type i { font: normal 500 0.75rem var(--font-body); color: var(--fg-3); }
.wd-uis__sw { width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--c); }
.wd-uis__space { display: flex; align-items: flex-end; gap: 4px; }
.wd-uis__space i { width: var(--s); height: var(--s); background: var(--dc-purple-bright); }
.wd-fe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; align-items: center; }
@media (min-width: 600px) {
.wd-fe { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.wd-code { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #00000059; font: 0.75rem/1.6 var(--font-mono); color: #ffffffbf; white-space: pre; overflow: hidden; animation: wdType 8s steps(9, end) infinite; }
@keyframes wdType {
0% { clip-path: inset(0 0 88% 0); }
60%, 100% { clip-path: inset(0 0 0 0); }
}
.wd-code .c-k { color: #b99bff; }
.wd-code .c-f { color: #fff; }
.wd-code .c-s { color: var(--dc-lime); }
.wd-code .c-t { color: #dccdff; }
.wd-code .c-a { color: #ffffff99; }
.wd-fe__out { display: grid; gap: 8px; width: 100%; max-width: 220px; justify-self: center; padding: 12px; border-radius: 10px; background: var(--dc-off-white); color: var(--dc-charcoal); font-size: 0.85rem; }
.wd-fe__img { aspect-ratio: 16 / 10; border-radius: 6px; background: radial-gradient(circle at 50% 55%, #e6dccb 0 26%, transparent 27%), linear-gradient(150deg, #ece9f1, #d9d0e8); }
.wd-fe__btn { padding: 8px 12px; border-radius: 99px; background: var(--dc-purple); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; }
@media (max-width: 599px) {
.wd-fe__out { display: none; }
}
.wd-q { display: grid; gap: 6px; width: 100%; max-width: 480px; }
.wd-q li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.wd-q li::before { content: ""; position: absolute; inset: 0; background: #c5f43d1a; transform-origin: left; animation: wdJob 6s calc(var(--k) * 0.55s) var(--ease-in-out) infinite both; }
.wd-q code { position: relative; font: 500 0.8rem var(--font-mono); color: var(--fg); }
.wd-q span { position: relative; font-size: 0.8125rem; color: var(--accent); }
@keyframes wdJob {
0% { transform: scaleX(0); }
25%, 100% { transform: scaleX(1); }
}
.wd-cart { display: grid; gap: 16px; width: 100%; max-width: 440px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel); }
.wd-cart__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.wd-cart__thumb { width: 44px; height: 44px; border-radius: 8px; background: radial-gradient(circle at 50% 60%, #e7dccb 0 38%, transparent 40%), linear-gradient(150deg, #3a2a4d, #261735); }
.wd-cart__name { display: grid; font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.wd-cart__name small { font-weight: 400; font-size: 0.8rem; color: var(--fg-3); }
.wd-cart__qty { display: flex; align-items: center; gap: 4px; }
.wd-cart__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 1.15rem; line-height: 1; transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.wd-cart__btn:hover { border-color: var(--accent); color: var(--accent); }
.wd-cart__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wd-cart__n { min-width: 1.8em; font-family: var(--font-heading); font-size: 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
.wd-cart__ship { display: grid; gap: 8px; font-size: 0.85rem; color: var(--fg-2); }
.wd-cart__bar { display: block; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.wd-cart__bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(min(var(--p), 1)); transform-origin: left; transition: transform 0.6s var(--ease-expo); }
.wd-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); color: var(--fg-2); }
.wd-cart__total b { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--fg); }
.wd-cms { display: grid; gap: 18px; width: 100%; align-items: center; }
@media (min-width: 600px) {
.wd-cms { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.wd-cms__edit { display: grid; gap: 10px; }
.wd-cms__label { font-size: 0.8125rem; font-weight: 500; color: var(--fg-2); }
.wd-cms__input { min-height: 48px; padding: 10px 14px; font-size: 0.95rem; }
.wd-cms__row { display: flex; align-items: center; gap: 14px; }
.wd-cms__pub { min-height: 44px; padding: 0 20px; border-radius: 99px; background: var(--dc-lime); color: var(--dc-purple-black); font-size: 0.85rem; font-weight: 700; }
.wd-cms__pub:disabled { background: #ffffff1f; color: var(--fg-2); cursor: default; }
.wd-cms__status { font-size: 0.8125rem; color: var(--accent); }
.wd-cms__status.is-draft { color: var(--fg-3); }
.wd-cms__prev { display: grid; align-content: start; gap: 8px; min-height: 180px; padding: 14px; border-radius: 10px; background: var(--dc-off-white); color: var(--dc-charcoal); }
.wd-cms__nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wd-cms__nav i { width: 14px; height: 14px; border-radius: 3px; background: var(--dc-purple); }
.wd-cms__nav b { width: 24px; height: 4px; border-radius: 4px; background: #d8d1e3; }
.wd-cms__nav b:first-of-type { margin-left: auto; }
.wd-cms__h { font-family: var(--font-heading); font-size: 1.3rem; line-height: 0.95; text-transform: uppercase; overflow-wrap: anywhere; }
.wd-cms__t { width: 84%; height: 6px; border-radius: 4px; background: #e2dcea; }
.wd-cms__t--b { width: 58%; }
.wd-cms__cta { width: 42%; height: 24px; margin-top: 6px; border-radius: 99px; background: var(--dc-purple); }
.wd-cms__h.is-flash { animation: wdFlash 0.8s var(--ease-out); }
@keyframes wdFlash {
from { background: #c5f43db2; }
}
.wd-api { display: grid; gap: 12px; width: 100%; max-width: 560px; }
.wd-api__req { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border: 1px solid var(--line-2); border-radius: 99px; }
.wd-api__m { padding: 4px 8px; border-radius: 4px; background: var(--dc-lime); color: var(--dc-purple-black); font-size: 0.75rem; letter-spacing: 0.08em; }
.wd-api__path { flex: 1; min-width: 0; overflow: hidden; font: 0.8rem var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.wd-api__send { min-height: 44px; padding: 0 18px; border-radius: 99px; background: var(--fg); color: var(--dc-purple-black); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.wd-api__send[aria-busy="true"] { opacity: 0.6; }
.wd-api__res { min-height: 172px; margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #00000059; font: 0.75rem/1.6 var(--font-mono); color: #ffffffc7; white-space: pre-wrap; }
.wd-api__ok { color: var(--dc-lime); }
.wd-bud { display: grid; gap: 14px; width: 100%; max-width: 540px; }
.wd-bud li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.wd-bud__k { font-size: 0.8125rem; color: var(--fg-2); }
.wd-bud__bar { position: relative; height: 8px; border-radius: 4px; background: var(--line); }
.wd-bud__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--u) * 100%); border-radius: 4px; background: var(--dc-lime); transform-origin: left; animation: wdGrow 1.4s var(--ease-expo) both; }
.wd-bud li:nth-child(2) .wd-bud__bar i { animation-delay: 0.08s; }
.wd-bud li:nth-child(3) .wd-bud__bar i { animation-delay: 0.16s; }
.wd-bud li:nth-child(4) .wd-bud__bar i { animation-delay: 0.24s; }
.wd-bud li:nth-child(5) .wd-bud__bar i { animation-delay: 0.32s; }
.wd-bud__bar b { position: absolute; top: -5px; bottom: -5px; left: calc(var(--m) * 100% - 1px); width: 2px; background: var(--fg-2); }
@keyframes wdGrow {
from { transform: scaleX(0); }
}
.wd-bud__v { min-width: 6.4em; font: 500 0.75rem var(--font-mono); text-align: right; color: var(--fg); }
.wd-bud__v span { color: var(--fg-3); }
.wd-rsp { display: grid; gap: 16px; justify-items: center; width: 100%; }
.wd-rsp__ctl { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 99px; }
.wd-rsp__ctl button { min-height: 44px; padding: 0 16px; border-radius: 99px; font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out); }
.wd-rsp__ctl button[aria-pressed="true"] { background: var(--dc-lime); color: var(--dc-purple-black); }
.wd-rsp__stage { display: flex; justify-content: center; width: 100%; height: 150px; }
.wd-rsp__frame { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; width: 100%; height: 100%; padding: 22px 10px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #ffffff08; overflow: hidden; transition: width 0.8s var(--ease-expo); }
.wd-rsp__frame[data-size="tablet"] { width: 58%; }
.wd-rsp__frame[data-size="phone"] { width: 30%; }
.wd-rsp__w { position: absolute; left: 10px; top: 4px; font-size: 0.75rem; color: var(--accent); }
.wd-rsp__nav { display: flex; justify-content: space-between; align-items: center; }
.wd-rsp__nav i { width: 10px; height: 10px; border-radius: 2px; background: var(--dc-lime); }
.wd-rsp__nav b { width: 40%; height: 4px; border-radius: 4px; background: var(--line-2); transition: width 0.6s var(--ease-expo); }
.wd-rsp__frame[data-size="phone"] .wd-rsp__nav b { width: 14px; height: 8px; background: repeating-linear-gradient(180deg, var(--fg-3) 0 2px, transparent 2px 3px); }
.wd-rsp__hero { height: 34px; border-radius: 4px; background: linear-gradient(90deg, var(--dc-purple), var(--dc-purple-bright)); }
.wd-rsp__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wd-rsp__cards i { border-radius: 4px; background: #ffffff1f; }
.wd-rsp__frame[data-size="tablet"] .wd-rsp__cards { grid-template-columns: repeat(2, 1fr); }
.wd-rsp__frame[data-size="phone"] .wd-rsp__cards { grid-template-columns: 1fr; }
.wd-mlog { width: 100%; max-width: 540px; font-size: 0.75rem; }
.wd-mlog li { animation: wdRow 0.7s var(--ease-expo) both; }
.wd-mlog li:nth-child(2) { animation-delay: 0.12s; }
.wd-mlog li:nth-child(3) { animation-delay: 0.24s; }
.wd-mlog li:nth-child(4) { animation-delay: 0.36s; }
.wd-mlog li:nth-child(5) { animation-delay: 0.48s; }
@keyframes wdRow {
from { opacity: 0; transform: translateY(8px); }
}
.wd-perf__panel { --bg: #140d1d; --fg: #fff; --fg-2: #ffffffcc; --fg-3: #ffffff99; --line: #ffffff1a; --line-2: #ffffff40; --accent: #c5f43d; --panel: #ffffff08; background-color: #140d1d; color: var(--fg); box-shadow: 0 60px 120px -50px #140d1dd9; }
.wd-perf__panel .ui__bar { flex-wrap: wrap; row-gap: 6px; padding-block: 8px; white-space: normal; }
.wd-perf__panel .ui__bar .illus { margin-left: auto; }
@media (max-width: 599px) {
.wd-perf__bt { display: none; }
.wd-perf__panel .ui__bar .illus { white-space: normal; }
}
.wd-perf__body { display: grid; gap: clamp(24px, 2.6vw, 40px); padding: clamp(18px, 2.4vw, 34px); }
@media (min-width: 1024px) {
.wd-perf__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); }
}
.wd-perf__scores { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-bottom: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
.wd-perf__scores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wd-ring { --size: clamp(88px, 7.6vw, 116px); position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.wd-ring svg { width: var(--size); height: var(--size); transform: rotate(-90deg); }
.wd-ring__bg,
.wd-ring__fg { fill: none; stroke-width: 6; }
.wd-ring__bg { stroke: var(--line); }
.wd-ring__fg { stroke: var(--dc-lime); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); }
.wd-ring__v { position: absolute; left: 50%; top: calc(var(--size) / 2); font-family: var(--font-heading); font-size: calc(var(--size) * 0.3); font-weight: 400; line-height: 1; transform: translate(-50%, -50%); font-variant-numeric: tabular-nums; }
.wd-ring__k { font-size: 0.8125rem; color: var(--fg-2); }
.wd-perf__h { margin-bottom: 12px; font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); }
.wd-vital { padding: 12px 0; border-top: 1px solid var(--line); }
.wd-vital__head { display: flex; align-items: baseline; gap: 12px; }
.wd-vital__abbr { font-family: var(--font-heading); font-size: 1.3rem; line-height: 1; }
.wd-vital__name { min-width: 0; overflow: hidden; font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); }
.wd-vital__val { margin-left: auto; font-size: 0.8125rem; white-space: nowrap; color: var(--fg-2); }
.wd-vital__val b { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--dc-lime); font-variant-numeric: tabular-nums; }
.wd-vital__bar { position: relative; display: flex; height: 8px; margin: 12px 0 10px; }
.wd-vital__good { width: calc(var(--g) * 100%); border-radius: 4px 0 0 4px; background: #c5f43dd9; }
.wd-vital__ni { width: calc((var(--pr) - var(--g)) * 100%); margin-inline: 2px; background: #ffffff4c; }
.wd-vital__poor { flex: 1; border-radius: 0 4px 4px 0; background: #ffffff1f; }
.wd-vital__mark { position: absolute; inset: -7px 0; transform: translateX(calc(var(--xm, var(--x)) * 100%)); pointer-events: none; }
.wd-vital__mark::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 2px #140d1d; }
.wd-vital__mark::after { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #140d1d; }
.wd-vital__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 0.8125rem; color: var(--fg-2); }
.wd-vital__th { font-size: 0.75rem; font-weight: 600; color: var(--accent); }
.wd-fall { --nw: 7.4rem; position: relative; }
.wd-fall__axis { display: flex; justify-content: space-between; margin-left: var(--nw); padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 500 0.75rem var(--font-mono); color: var(--fg-3); }
.wd-fall__rows { display: grid; gap: 2px; padding-top: 8px; }
.wd-fall__row { display: grid; grid-template-columns: var(--nw) minmax(0, 1fr); align-items: center; min-height: 30px; background: linear-gradient(90deg, transparent var(--nw), #ffffff05 var(--nw)); }
.wd-fall__name { overflow: hidden; padding-right: 10px; font: 0.75rem var(--font-mono); text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.wd-fall__track { position: relative; height: 10px; }
.wd-fall__track i { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 100%); width: calc(var(--d) * 100%); border-radius: 3px; background: #fff; transform-origin: left; }
.wd-fall__row--css i { background: #9d6bff; }
.wd-fall__row--font i { background: #dccdff; }
.wd-fall__row--img i { background: var(--dc-lime); }
.wd-fall__row--js i { background: #b99bff; }
.wd-fall__row--api i { background: #c5f43d8c; }
.wd-fall__lcp { position: absolute; top: 0; bottom: 0; left: calc(var(--nw) + (100% - var(--nw)) * var(--lcp)); border-left: 1px dashed var(--dc-lime); font-size: 0.75rem; font-weight: 700; }
.wd-fall__lcp span { position: absolute; bottom: -26px; left: -1px; padding: 3px 6px; border-radius: 3px; background: var(--dc-lime); color: var(--dc-purple-black); white-space: nowrap; transform: translateX(-50%); }
.wd-perf__fall { padding-bottom: 26px; }
@media (max-width: 599px) {
.wd-fall { --nw: 6.6rem; }
.wd-vital__name { display: none; }
}
.wd-perf__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 14px clamp(18px, 2.4vw, 34px); border-top: 1px solid var(--line); }
.wd-perf__run { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px 0 14px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 0.875rem; font-weight: 700; transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.wd-perf__run .icon { width: 16px; height: 16px; transition: transform 0.5s var(--ease-expo); }
@media (hover: hover) {
.wd-perf__run:hover { border-color: var(--accent); color: var(--accent); }
.wd-perf__run:hover .icon { transform: translateX(3px); }
}
.wd-perf__note { flex: 1 1 320px; font-size: 0.8125rem; color: var(--fg-3); }
.wd-net .container > .folio { margin-bottom: 18px; }
.wd-net__title { --fit: 5.6; }
.wd-net__grid { display: grid; gap: 24px; }
.wd-net__side { display: contents; }
.wd-net__title { order: 1; }
.wd-net__lead { order: 2; max-width: 30em; }
.wd-net__map { order: 3; }
.wd-net__hint { order: 4; }
.wd-net__flows { order: 5; }
@media (min-width: 1024px) {
.wd-net__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px); row-gap: clamp(8px, 1.5vw, 24px); }
.wd-net__title { grid-column: 1; grid-row: 1; font-size: min(var(--fs-mega), calc(var(--content-w) * 0.55 / 3.5)); }
.wd-net__map { grid-column: 1; grid-row: 2; }
.wd-net__side { display: grid; grid-column: 2; grid-row: 1 / 3; align-content: start; gap: 0; padding-top: 0.6em; }
.wd-net__lead { margin-bottom: clamp(24px, 3vw, 44px); }
}
.wd-net__map { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.wd-net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wd-net__orbit { fill: none; stroke: var(--line-2); stroke-dasharray: 2 7; }
.wd-net__orbit--in { stroke: var(--line); }
.wd-net__wire { fill: none; stroke: var(--line-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke 0.4s var(--ease-out), stroke-width 0.4s var(--ease-out); }
.wd-net__wire.is-on { stroke: var(--dc-lime); stroke-width: 2; }
.wd-net__pk { fill: var(--dc-lime); transition: opacity 0.4s var(--ease-out); }
.wd-net__pk--in { fill: #b99bff; }
.wd-net__pk.is-dim { opacity: 0.3; }
.wd-net__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; gap: 2cqw; width: 31cqw; aspect-ratio: 1; border: 1px solid var(--line-2); border-radius: 50%; background: radial-gradient(circle at 50% 32%, #3b2355, #140d1d 72%); box-shadow: 0 0 0 2.2cqw #7b2cf014, 0 0 10cqw #7b2cf04d; transform: translate(-50%, -50%); }
.wd-net__win { display: flex; gap: 0.9cqw; width: 12cqw; aspect-ratio: 4 / 3; padding: 1cqw 1.1cqw; border: 2px solid var(--dc-lime); border-radius: 1.4cqw; }
.wd-net__win i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--dc-lime); }
.wd-net__cname { font: 600 max(11px, 2.3cqw) / 1 var(--font-body); color: #fff; }
.wd-net__node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 16px; border: 1px solid var(--line-2); border-radius: 99px; background-color: var(--dc-purple-black); font-family: var(--font-heading); font-size: clamp(0.75rem, 2.5cqw, 1.05rem); line-height: 1; text-transform: uppercase; white-space: nowrap; color: #fff; transform: translate(-50%, -50%); transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), color 0.35s var(--ease-out); }
@media (max-width: 599px) {
.wd-net__node { padding: 6px 12px; font-size: 0.75rem; }
}
.wd-net__node.is-on,
.wd-net__node:hover { border-color: var(--dc-lime); box-shadow: 0 0 0 4px #c5f43d24; }
.wd-net__node.is-on { color: var(--dc-lime); }
.wd-net__hint { margin-bottom: 14px; font-size: 0.875rem; color: var(--fg-3); }
.wd-net__flows { display: grid; border-top: 1px solid var(--line); }
.wd-net__flow { position: relative; display: grid; gap: 6px; padding: 13px 8px 13px 14px; border-bottom: 1px solid var(--line); color: var(--fg-2); transition: color 0.35s var(--ease-out), background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
@media (min-width: 600px) {
.wd-net__flow { grid-template-columns: 7.6em minmax(0, 1fr); gap: 16px; align-items: baseline; }
}
.wd-net__flow::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-expo); }
.wd-net__flow.is-on { background-color: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 2px 0 0 var(--accent); color: var(--fg); }
.wd-net__flow.is-on::before { transform: scaleX(1); }
.wd-net__fk { font-size: 0.75rem; color: var(--accent); }
.wd-net__to { margin: 0 0.3em; color: var(--accent); }
.wd-work__intro { display: grid; gap: 14px; justify-items: start; }
.wd-work__all { min-height: 44px; }
@media (min-width: 1024px) {
.chapter__head > .wd-work__intro { grid-column: 2; }
}
.wd-work__cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.wd-work__builds { margin-top: clamp(40px, 5vw, 72px); }
.wd-work__bhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.wd-work__bt { font-family: var(--font-heading); font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); line-height: 1; text-transform: uppercase; }
.wd-work__hint { display: none; font-size: 0.875rem; color: var(--fg-3); }
@media (hover: hover) {
.wd-work__hint { display: block; }
}
.wd-work__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 44%); gap: 14px; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: thin; }
.wd-work__track > li { scroll-snap-align: start; }
.wd-work__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 768px) {
.wd-work__track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 1024px) {
.wd-work__track { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.wd-shot { display: grid; gap: 10px; margin: 0; }
.wd-shot__frame { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -36px #2617358c, 0 0 0 1px var(--line-2); transition: transform 0.7s var(--ease-expo), box-shadow 0.7s var(--ease-expo); }
.wd-shot__bar { display: flex; gap: 4px; padding: 7px 9px; background: #1d1428; }
.wd-shot__bar i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff40; }
.wd-shot__view { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.wd-shot__view img { width: 100%; transition: transform 5.5s var(--ease-in-out); }
.wd-shot__cap { display: flex; align-items: baseline; gap: 8px; font-size: 0.875rem; font-weight: 700; }
.wd-shot__cap .t-mono { font-size: 0.75rem; color: var(--accent); }
@media (hover: hover) {
.wd-shot:hover .wd-shot__view img { transform: translateY(calc((1.25 / var(--ih) - 1) * 100%)); }
.wd-shot:hover .wd-shot__frame { transform: translateY(-4px); box-shadow: 0 40px 70px -36px #261735b2, 0 0 0 1px var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
.wd-inf__wires path,
.wd-jny__run i,
.wd-uis__btn.is-hover,
.wd-code,
.wd-q li::before,
.wd-bud__bar i,
.wd-mlog li { animation: none; }
.wd-jny__run { display: none; }
.wd-shot__view img { transition: none; }
}