.ws-p-webdesign{--wd-pad-x: max(var(--ws-pad), calc((100vw - var(--ws-max)) / 2 + var(--ws-pad)))}.ws-p-webdesign .wd-mono{font-family:var(--ws-mono)}.ws-p-webdesign .wd-caption{margin:18px auto 0;max-width:760px;text-align:center;font-family:var(--ws-mono);font-size:11.5px;letter-spacing:.02em;line-height:1.6;color:var(--ws-ink-3)}.ws-p-webdesign .wd-sec-head{display:grid;gap:18px;max-width:780px;margin-bottom:56px}.ws-p-webdesign .wd-sec-head--split{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:24px 64px}.ws-p-webdesign .wd-sec-head--split>div{display:grid;gap:18px}.ws-p-webdesign .wd-sec-head .ws-lead{max-width:60ch}@media (max-width: 900px){.ws-p-webdesign .wd-sec-head--split{grid-template-columns:1fr}}.wd-hero{position:relative;display:grid;min-height:max(760px,100svh);overflow:clip;background:#050505;color:var(--ws-cream);isolation:isolate}.wd-hero__media{grid-area:1 / 1;position:relative;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.wd-hero__half{position:relative;overflow:hidden;height:120%;top:-10%}.wd-hero__half img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.wd-hero__half--a img{-o-object-position:62% 40%;object-position:62% 40%;filter:saturate(1.12) hue-rotate(-6deg) brightness(.6) contrast(1.06)}.wd-hero__half--b{margin-left:-16%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}.wd-hero__half--b img{-o-object-position:30% 50%;object-position:30% 50%;filter:saturate(1.12) hue-rotate(-6deg) brightness(.52) contrast(1.06)}.wd-hero__shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 62% 48% at 46% 52%,#0000009e,#0000002e 72%),linear-gradient(180deg,#000000c7,#0000001f 28%,#0000002e,#000000e6)}.wd-hero__content{grid-area:1 / 1;position:relative;z-index:2;min-height:0;display:grid;grid-template-rows:auto 1fr auto;padding:calc(var(--ws-navbar-height, 84px) + 28px) var(--wd-pad-x) 36px}.wd-hero__top{display:flex;align-items:center;gap:16px}.wd-hero__top .ws-crumbs{color:#f5f1e899;font-family:var(--ws-mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.wd-hero__top .ws-crumbs a:hover,.wd-hero__top .ws-crumbs [aria-current]{color:var(--ws-cream)}.wd-hero__stage{position:relative;align-self:center;display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:28px;align-items:center;margin:44px 0 28px}.wd-frame{position:relative;padding:52px clamp(20px,3vw,44px) 60px 150px;border:1px solid rgba(245,241,232,.16);background:#06060652}.wd-frame__bar{position:absolute;left:-1px;right:-1px;bottom:calc(100% + 8px);display:flex;justify-content:space-between;gap:16px;font-family:var(--ws-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#f5f1e88c}.wd-frame__bar span:first-child{color:#f5f1e8cc}.wd-type{position:relative;--gc: rgba(245,241,232,.2);--gx: rgba(245,241,232,.13);--gb: rgba(243,101,23,.8);--lh: 88px;--g-base: 70px;--g-cap: 10px;--g-x: 30px}.wd-type:before{content:"";position:absolute;top:0;bottom:0;left:-150px;right:calc(-1*clamp(20px,3vw,44px));pointer-events:none;opacity:0;transition:opacity .6s var(--ws-ease);background:linear-gradient(to bottom,transparent calc(var(--g-cap) - 1px),var(--gc) calc(var(--g-cap) - 1px),var(--gc) var(--g-cap),transparent var(--g-cap)) 0 0 / 100% var(--lh) repeat-y,linear-gradient(to bottom,transparent calc(var(--g-x) - 1px),var(--gx) calc(var(--g-x) - 1px),var(--gx) var(--g-x),transparent var(--g-x)) 0 0 / 100% var(--lh) repeat-y,linear-gradient(to bottom,transparent calc(var(--g-base) - 1px),var(--gb) calc(var(--g-base) - 1px),var(--gb) var(--g-base),transparent var(--g-base)) 0 0 / 100% var(--lh) repeat-y}.has-guides .wd-type:before{opacity:1}.wd-type__labels{position:absolute;top:0;left:-138px;width:120px;height:var(--lh);pointer-events:none;opacity:0;transition:opacity .6s var(--ws-ease)}.has-guides .wd-type__labels{opacity:1}.wd-type__labels span{position:absolute;left:0;transform:translateY(calc(-100% - 3px));font-family:var(--ws-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#f5f1e899}.wd-type__labels span:last-child{color:var(--ws-orange)}.wd-hero__title{margin:0;font-family:var(--ws-display);font-weight:500;font-size:clamp(40px,6.6vw + 6px,128px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase;text-align:left;color:var(--ws-cream);text-wrap:balance}.wd-hero__title .wd-w{display:inline-block;white-space:nowrap}.wd-hero__title .wd-l{display:inline-block;position:relative;will-change:transform}.wd-acc{display:inline-block;color:var(--ws-orange)}.has-guides.is-set .wd-hero.is-set .wd-l{will-change:auto}.wd-sel{position:absolute;pointer-events:none;opacity:0;transition:opacity .5s var(--ws-ease)}.is-set .wd-sel{opacity:1}.wd-sel__box{position:absolute;top:-4px;right:-8px;bottom:-2px;left:-8px;border:1px solid var(--ws-orange)}.wd-sel__box i{position:absolute;width:7px;height:7px;background:#242420;border:1px solid var(--ws-orange)}.wd-sel__box i:nth-child(1){top:-4px;left:-4px}.wd-sel__box i:nth-child(2){top:-4px;right:-4px}.wd-sel__box i:nth-child(3){bottom:-4px;left:-4px}.wd-sel__box i:nth-child(4){bottom:-4px;right:-4px}.wd-sel__dim{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);padding:3px 6px;border-radius:2px;background:var(--ws-orange);color:#242420;font-family:var(--ws-mono);font-size:10.5px;line-height:1.2;white-space:nowrap}.wd-cursor{position:absolute;display:inline-flex;align-items:flex-start;gap:2px;pointer-events:none;z-index:3}.wd-cursor svg{flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.wd-cursor b{margin-top:14px;padding:3px 7px;border-radius:3px;font-family:var(--ws-mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;line-height:1.2;white-space:nowrap}.wd-cursor--orange{color:var(--ws-orange)}.wd-cursor--orange b{background:var(--ws-orange);color:#242420}.wd-cursor--cream{color:var(--ws-cream)}.wd-cursor--cream b{background:var(--ws-cream);color:#242420}.wd-sel .wd-cursor{right:-64px;bottom:-40px;opacity:0;transform:translate(70px,50px);transition:transform 1.1s var(--ws-ease) .15s,opacity .4s .15s}.is-set .wd-sel .wd-cursor{opacity:1;transform:none;animation:wd-nudge 5.5s var(--ws-ease) 1.6s infinite}@keyframes wd-nudge{0%,to{translate:0 0}40%{translate:-10px -4px}55%{translate:-10px -4px}75%{translate:2px 0}}.wd-inspector{position:relative;padding:14px 14px 12px;border:1px solid rgba(245,241,232,.13);border-radius:6px;background:#0e0d0cbd;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:12px;color:#f5f1e8d1;box-shadow:0 30px 60px -30px #000c}.wd-inspector__head{display:flex;justify-content:space-between;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(245,241,232,.1);font-family:var(--ws-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#f5f1e88c}.wd-inspector dl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}.wd-inspector dl>div{padding:7px 8px;border-radius:3px;background:#f5f1e80b}.wd-inspector dl>.wide{grid-column:1 / -1}.wd-inspector dt{font-family:var(--ws-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#f5f1e873}.wd-inspector dd{margin:3px 0 0;font-size:13px;color:var(--ws-cream);font-variant-numeric:tabular-nums}.wd-inspector dd b{font-weight:500}.wd-inspector .is-live{background:#f365171a;box-shadow:inset 0 0 0 1px #f3651773}.wd-inspector .is-live dd b{color:var(--ws-orange)}.wd-inspector__fill{display:flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--ws-mono);font-size:10.5px;color:#f5f1e899}.wd-inspector__fill i{width:12px;height:12px;border-radius:2px;background:var(--sw);box-shadow:0 0 0 1px #ffffff26}.wd-inspector__fill i+i,.wd-inspector__fill i:nth-of-type(2){margin-left:8px}.wd-inspector .wd-cursor{left:26%;top:66%;opacity:0;transform:translate(-40px,60px);transition:transform 1.2s var(--ws-ease) .35s,opacity .4s .35s}.is-set .wd-inspector .wd-cursor{opacity:1;transform:none;animation:wd-nudge 6.5s var(--ws-ease) 2.4s infinite reverse}.wd-hero__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.wd-hero__lead{max-width:470px;margin:0;font-size:clamp(15px,.4vw + 13px,18px);line-height:1.42;font-weight:500;letter-spacing:-.01em;color:var(--ws-cream);text-wrap:pretty}.wd-hero__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}@media (min-width: 961px){.wd-hero__actions{margin-right:56px}}@media (min-width: 901px) and (max-height: 820px){.wd-hero{min-height:max(640px,100svh)}.wd-hero__content{padding-top:calc(var(--ws-navbar-height, 84px) + 16px);padding-bottom:28px}.wd-hero__stage{margin:36px 0 20px}.wd-frame{padding-block:36px 40px}}@media (max-width: 1180px){.wd-hero__stage{grid-template-columns:1fr}.wd-inspector{display:none}}@media (max-width: 900px){.wd-hero__media{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.wd-hero__half{height:100%;top:0}.wd-hero__top{grid-template-columns:1fr auto}.wd-frame{padding:40px 16px 52px}.wd-type:before{left:-16px;right:-16px}.wd-type__labels{display:none}.wd-hero__bottom{flex-direction:column;align-items:flex-start}.wd-hero__actions{justify-content:flex-start}.wd-sel .wd-cursor{right:-20px;bottom:-44px}}@media (max-width: 560px){.wd-hero__top{grid-template-columns:1fr}.wd-hero__title{font-size:clamp(34px,11.4vw,60px)}.wd-frame{padding-block:48px 64px}.wd-hero__actions,.wd-hero__actions .ws-cta{width:100%}.wd-frame__bar span:last-child{display:none}}@media (prefers-reduced-motion: reduce){.wd-sel .wd-cursor,.wd-inspector .wd-cursor{transition:none;animation:none!important}}.wd-proc{padding-block:132px 120px}.wd-proc__head{display:grid;gap:22px;max-width:1180px;margin-bottom:64px}.wd-proc__title{font-size:clamp(36px,4.6vw,72px)}.wd-proc__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}.wd-proc__list{display:grid;gap:4px}.wd-proc__item{display:grid;gap:0;width:100%;padding:16px 18px;border-radius:14px;text-align:left;transition:background-color .3s,box-shadow .3s}.wd-proc__t{font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--ws-ink-3);transition:color .3s}.wd-proc__d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ws-ease)}.wd-proc__d>span{overflow:hidden;font-size:15.5px;line-height:1.6;color:var(--ws-ink-2)}.wd-proc__item.is-on{background:#fbf9f4;box-shadow:0 1px 2px #1714110d,0 18px 36px -24px #17141147}.wd-proc__item.is-on .wd-proc__t{color:var(--ws-ink)}.wd-proc__item.is-on .wd-proc__d{grid-template-rows:1fr}.wd-proc__item.is-on .wd-proc__d>span{padding-top:8px}@media (hover: hover){.wd-proc__item:not(.is-on):hover .wd-proc__t{color:var(--ws-ink-2)}}.wd-proc__item:focus-visible{outline:2px solid var(--ws-orange);outline-offset:2px}.wd-ed{border:1px solid rgba(245,241,232,.09);border-radius:14px;background:#161614;color:#f5f1e8;overflow:hidden;box-shadow:0 1px 2px #0000001a,0 24px 48px -18px #1f1c1b73}.wd-ed__bar{position:relative;display:flex;align-items:center;justify-content:center;height:42px;border-bottom:1px solid rgba(245,241,232,.09)}.wd-ed__tl{position:absolute;left:16px;display:flex;gap:8px}.wd-ed__tl i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.wd-ed__tl i:nth-child(2){background:#febc2e}.wd-ed__tl i:nth-child(3){background:#28c840}.wd-ed__file{font-family:var(--ws-mono);font-size:12.5px;color:#f5f1e8}.wd-ed__k{position:absolute;right:16px;font-size:12px;color:#f5f1e86b}.wd-ed__code{margin:0;min-height:260px;padding:22px 0 26px;font-family:var(--ws-mono);font-size:14px;line-height:1.75;white-space:pre;overflow-x:auto}.wd-ed__line{display:grid;grid-template-columns:52px minmax(0,1fr)}.wd-ed__line i{font-style:normal;padding-right:18px;text-align:right;color:#f5f1e838;-webkit-user-select:none;-moz-user-select:none;user-select:none}.wd-ed__line code{font:inherit;color:#f5f1e8db}.wd-ed__line .s{color:#ffb27a}.wd-ed__line .n{color:#8fd4b0}.wd-ed__line .c{color:#f5f1e861}@media (max-width: 900px){.wd-proc{padding-block:96px}}.wd-spec{padding-block:120px}.wd-spec__app{background:#fbf9f4;border:1px solid var(--ws-line);border-radius:12px;overflow:hidden;box-shadow:0 40px 90px -50px #17141159,0 2px 6px #1714110a}.wd-spec__bar{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;border-bottom:1px solid var(--ws-line);font-size:12px;color:var(--ws-ink-3)}.wd-spec__dots{display:flex;gap:6px}.wd-spec__dots i{width:10px;height:10px;border-radius:50%;background:#e4e2dc}.wd-spec__live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--ws-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.wd-spec__live i{width:6px;height:6px;border-radius:50%;background:#1f8f5f;box-shadow:0 0 0 3px #1f8f5f26}.wd-spec__body{display:grid;grid-template-columns:276px minmax(0,1fr)}.wd-spec__controls{display:flex;flex-direction:column;gap:22px;padding:24px 20px;border-right:1px solid var(--ws-line);background:#fbfbfa}.wd-spec__ctitle{margin:0;font-family:var(--ws-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-ink-3)}.wd-seg{margin:0;padding:0;border:0;min-width:0}.wd-seg legend{padding:0;margin-bottom:10px;font-size:13px;font-weight:500;color:var(--ws-ink)}.wd-seg__opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;border:1px solid var(--ws-line);border-radius:6px;background:#fbf9f4}.wd-seg__opts--sw{grid-template-columns:repeat(2,minmax(0,1fr))}.wd-seg__opts:has(>label:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}.wd-seg label{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:0 8px;border-radius:4px;font-size:12.5px;color:var(--ws-ink-2);cursor:pointer;transition:background-color .25s var(--ws-ease),color .25s;white-space:nowrap}.wd-seg label:hover{background:#f3f2ef;color:var(--ws-ink)}.wd-seg label.is-on{background:var(--ws-ink);color:#fff}.wd-seg label input{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;opacity:0;cursor:pointer}.wd-seg label:has(input:focus-visible){outline:2px solid var(--ws-orange);outline-offset:2px}.wd-seg label i{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 1px #ffffff80}.wd-spec__reset{align-self:flex-start;font-family:var(--ws-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-ink-3);text-decoration:underline;text-underline-offset:3px}.wd-spec__reset:hover{color:var(--ws-ink)}.wd-canvas{--sp-u: 8px;--sp-r: 8px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"type color" "type space" "comp tokens";gap:calc(var(--sp-u) * 2);padding:calc(var(--sp-u) * 3);background:var(--sp-bg);color:var(--sp-ink);transition:background-color .5s var(--ws-ease),color .5s var(--ws-ease),padding .5s var(--ws-ease),gap .5s var(--ws-ease)}.wd-cv{min-width:0;padding:calc(var(--sp-u) * 2.5);background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-r);transition:background-color .5s var(--ws-ease),border-color .5s,border-radius .5s var(--ws-ease),padding .5s var(--ws-ease)}.wd-cv--type{grid-area:type}.wd-cv--color{grid-area:color}.wd-cv--space{grid-area:space}.wd-cv--comp{grid-area:comp}.wd-cv--tokens{grid-area:tokens}.wd-cv__label{display:flex;justify-content:space-between;gap:12px;margin:0 0 calc(var(--sp-u) * 2);font-family:var(--ws-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sp-ink2)}.wd-cv__label span{letter-spacing:.02em;text-transform:none}.wd-tscale{list-style:none;margin:0;padding:0}.wd-tscale li{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:baseline;gap:14px;padding:calc(var(--sp-u) * 1.25) 0;border-top:1px solid var(--sp-line);transition:padding .5s var(--ws-ease),border-color .5s}.wd-tscale__tok{font-family:var(--ws-mono);font-size:11px;color:var(--sp-ink2)}.wd-tscale__tok b{display:block;font-weight:400;color:var(--sp-ink)}.wd-tscale__s{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--ws-sans);line-height:1.15;color:var(--sp-ink);transition:font-size .5s var(--ws-ease)}.wd-tscale__s:not(.is-head){white-space:normal;text-wrap:pretty}.wd-tscale__s.is-head{font-family:var(--ws-body-display);font-weight:500;letter-spacing:-.03em;line-height:1.02}.wd-swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--sp-u) * 1.5) var(--sp-u)}.wd-swatches i{display:block;aspect-ratio:16 / 10;margin-bottom:6px;border-radius:calc(var(--sp-r) * .75);box-shadow:inset 0 0 0 1px #7f7f7f38;transition:background-color .5s var(--ws-ease),border-radius .5s}.wd-swatches span,.wd-swatches b{display:block;font-family:var(--ws-mono);font-size:11px;line-height:1.4;font-weight:400}.wd-swatches span{color:var(--sp-ink)}.wd-swatches b{color:var(--sp-ink2)}.wd-contrast{margin-top:calc(var(--sp-u) * 2.5);padding-top:calc(var(--sp-u) * 2);border-top:1px solid var(--sp-line)}.wd-contrast .wd-cv__label{margin-bottom:var(--sp-u)}.wd-contrast__row{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:6px 0;font-size:12.5px}.wd-contrast__chip{display:grid;place-items:center;width:34px;height:26px;border-radius:4px;font-family:var(--ws-display);font-weight:500;font-size:13px;box-shadow:inset 0 0 0 1px #7f7f7f40;transition:background-color .5s,color .5s}.wd-contrast__l{color:var(--sp-ink2)}.wd-contrast__row b{font-weight:500;font-size:12px;color:var(--sp-ink);font-variant-numeric:tabular-nums}.wd-contrast__g{padding:3px 8px;border-radius:99px;font-size:11px;font-weight:500;white-space:nowrap}.wd-contrast__g.is-pass{background:#e1f3ea;color:#0d6640}.wd-contrast__g.is-passLarge{background:#fbefd2;color:#6e4d00}.wd-contrast__g.is-fail{background:#fbe1da;color:#962c16}.wd-spacing{list-style:none;margin:0;padding:0;display:grid;gap:8px}.wd-spacing li{display:flex;align-items:center;gap:12px}.wd-spacing i{display:block;height:10px;max-width:78%;border-radius:2px;background:var(--sp-a);transition:width .5s var(--ws-ease),background-color .5s}.wd-spacing span{font-family:var(--ws-mono);font-size:11px;color:var(--sp-ink2)}.wd-states{display:flex;flex-wrap:wrap;gap:calc(var(--sp-u) * 1.5);margin-bottom:calc(var(--sp-u) * 2.5)}.wd-states__i{display:grid;justify-items:start;gap:6px}.wd-states__i small{font-family:var(--ws-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sp-ink2)}.wd-b{display:inline-flex;align-items:center;height:calc(var(--sp-u) * 5);padding:0 calc(var(--sp-u) * 2.25);border-radius:var(--sp-r);background:var(--sp-a);color:var(--sp-on);font-size:13px;font-weight:600;white-space:nowrap;transition:background-color .5s var(--ws-ease),color .5s,border-radius .5s var(--ws-ease),height .5s var(--ws-ease),padding .5s var(--ws-ease),box-shadow .3s}.wd-b.is-hover{background:var(--sp-hover)}.wd-b.is-focus{box-shadow:0 0 0 2px var(--sp-surface),0 0 0 4px var(--sp-a)}.wd-b.is-disabled{opacity:.4}.wd-b--g{background:transparent;color:var(--sp-ink);box-shadow:inset 0 0 0 1px var(--sp-line)}.wd-comp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--sp-u) * 2);align-items:start}.wd-field{display:grid;gap:6px}.wd-field__l{font-size:12px;font-weight:500}.wd-field__i{position:relative;display:flex;align-items:center;height:calc(var(--sp-u) * 5);padding:0 calc(var(--sp-u) * 1.5);border:1px solid var(--sp-line);border-radius:var(--sp-r);font-size:12.5px;color:var(--sp-ink2);background:var(--sp-surface);transition:border-radius .5s var(--ws-ease),height .5s var(--ws-ease),border-color .5s;overflow:hidden;white-space:nowrap}.wd-field__i.is-focus{border-color:var(--sp-a);box-shadow:0 0 0 3px var(--sp-tint)}.wd-field__i.is-focus i{width:1px;height:14px;margin-left:2px;background:var(--sp-ink);animation:wd-caret 1.1s steps(1) infinite}@keyframes wd-caret{50%{opacity:0}}.wd-field__i.is-error{border-color:#c8452c;color:var(--sp-ink);margin-top:6px}.wd-field__h{font-size:11.5px;color:var(--sp-ink2)}.wd-field__h.is-error{color:#c8452c}.wd-canvas--dark .wd-field__h.is-error{color:#ff8a70}.wd-card{display:grid;gap:var(--sp-u);padding:calc(var(--sp-u) * 2);border:1px solid var(--sp-line);border-radius:var(--sp-r);background:var(--sp-bg);transition:all .5s var(--ws-ease)}.wd-card__chip{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:calc(var(--sp-r) * .6);background:var(--sp-tint);color:var(--sp-ink);font-family:var(--ws-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.wd-card__chip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sp-a)}.wd-card b{font-size:15px;font-weight:600;letter-spacing:-.01em}.wd-card p{margin:0;font-size:12.5px;line-height:1.5;color:var(--sp-ink2)}.wd-card__row{display:flex;flex-wrap:wrap;gap:var(--sp-u);margin-top:4px}.wd-card__row .wd-b{height:calc(var(--sp-u) * 4);padding:0 calc(var(--sp-u) * 1.5);font-size:12px}.wd-misc{display:grid;gap:calc(var(--sp-u) * 1.5)}.wd-tabs{display:flex;gap:2px;border-bottom:1px solid var(--sp-line)}.wd-tabs span{padding:var(--sp-u) calc(var(--sp-u) * 1.1);font-size:12px;color:var(--sp-ink2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:padding .5s var(--ws-ease)}.wd-tabs span.is-on{color:var(--sp-ink);border-bottom-color:var(--sp-a);font-weight:500}.wd-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px}.wd-switch i{position:relative;width:34px;height:20px;border-radius:99px;background:var(--sp-line);transition:background-color .5s;flex:none}.wd-switch i:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fbf9f4;box-shadow:0 1px 2px #00000040;transition:transform .4s var(--ws-ease)}.wd-switch i.is-on{background:var(--sp-a)}.wd-switch i.is-on:after{transform:translate(14px)}.wd-code{margin:0;padding:calc(var(--sp-u) * 2);border-radius:calc(var(--sp-r) * .75);background:#121110;color:#a9a59b;font-family:var(--ws-mono);font-size:12px;line-height:1.75;overflow-x:auto;overflow-y:hidden;transition:border-radius .5s var(--ws-ease)}.wd-code .ln{display:block;margin:0 -8px;padding:0 8px;border-radius:3px;animation:wd-flash 1.2s var(--ws-ease)}.wd-code .k{color:#e9e6dc}.wd-code .v{color:#f6a466}.wd-code .c{color:#77736a}@keyframes wd-flash{0%{background:#f3651747}to{background:transparent}}@media (min-width: 1241px){.wd-cv--type{display:flex;flex-direction:column}.wd-tscale{flex:1;display:grid;grid-auto-rows:1fr}.wd-tscale li{align-items:center}.wd-states{display:grid;grid-template-columns:repeat(2,max-content)}.wd-comp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wd-misc{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-u) calc(var(--sp-u) * 4)}.wd-misc .wd-tabs{grid-row:span 2}}@media (max-width: 1240px){.wd-canvas{grid-template-columns:1fr 1fr;grid-template-areas:"type type" "color space" "comp comp" "tokens tokens"}}@media (max-width: 900px){.wd-spec{padding-block:96px}.wd-spec__body{grid-template-columns:1fr}.wd-spec__controls{border-right:0;border-bottom:1px solid var(--ws-line);display:grid;grid-template-columns:1fr 1fr;gap:18px}.wd-spec__ctitle,.wd-spec__reset{grid-column:1 / -1}}@media (max-width: 640px){.wd-spec__controls{grid-template-columns:1fr;padding:18px 14px}.wd-canvas{grid-template-columns:1fr;grid-template-areas:"type" "color" "space" "comp" "tokens";padding:calc(var(--sp-u) * 1.5)}.wd-comp-grid{grid-template-columns:1fr}.wd-tscale li{grid-template-columns:64px minmax(0,1fr)}.wd-spec__bar .wd-mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.wd-scope{padding-block:120px}.wd-layers{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);overflow:hidden;background:#fbf9f4;border:1px solid var(--ws-line);border-radius:12px;box-shadow:0 30px 70px -50px #1714114d}.wd-layers__canvas{position:relative;display:grid;place-items:center;min-height:480px;background:#f3f2ee;border-right:1px solid var(--ws-line);overflow:hidden}.wd-art{position:relative;width:min(84%,520px);height:auto;fill:none;stroke:#2a2723;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;animation:wd-art-in .7s var(--ws-ease)}.wd-art rect,.wd-art circle{fill:#fff}.wd-art path{fill:none}.wd-art .o{stroke:var(--ws-orange)}.wd-art rect.f{fill:var(--ws-orange);stroke:var(--ws-orange)}.wd-art .s{fill:#e4e1d9;stroke:none}.wd-art .d{stroke:#9a958c;stroke-dasharray:4 4}.wd-art .s2{stroke:#d4d0c8;stroke-width:6}.wd-art .ring{fill:none;stroke-width:2}.wd-art .arc{stroke:var(--ws-orange);stroke-width:3.5}.wd-art text{stroke:none;fill:#2a2723}.wd-art .tx{font-family:var(--ws-display);font-weight:500;font-size:44px;letter-spacing:-1px}.wd-art .sm2{font-size:30px}.wd-art .mono{font-family:var(--ws-mono);font-size:12px}.wd-art .sm{font-size:11px}@keyframes wd-art-in{0%{opacity:0;transform:translateY(10px) scale(.98)}}.wd-layers__tag{position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);padding:6px 10px;border-radius:4px;background:#fbf9f4;border:1px solid var(--ws-line);font-size:11px;color:var(--ws-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wd-layers__panel{padding:18px}.wd-layers__ptitle{margin:0;padding:6px 16px 12px;font-size:13px;font-weight:500;color:var(--ws-ink-3)}.wd-layers__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}.wd-layers__panel button{display:grid;width:100%;padding:14px 16px;border-radius:12px;text-align:left;transition:background-color .3s,box-shadow .3s}.wd-layers__t{font-size:16.5px;font-weight:500;letter-spacing:-.015em;color:var(--ws-ink-3);transition:color .3s}.wd-layers__d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ws-ease)}.wd-layers__d>span{overflow:hidden;font-size:14.5px;line-height:1.55;color:var(--ws-ink-2)}.wd-layers__panel button.is-on{background:#fff;box-shadow:0 1px 2px #1714110d,0 14px 28px -20px #1714114d}.wd-layers__panel button.is-on .wd-layers__t{color:var(--ws-ink)}.wd-layers__panel button.is-on .wd-layers__d{grid-template-rows:1fr}.wd-layers__panel button.is-on .wd-layers__d>span{padding-top:6px}@media (hover: hover){.wd-layers__panel button:not(.is-on):hover .wd-layers__t{color:var(--ws-ink-2)}}.wd-layers__panel button:focus-visible{outline:2px solid var(--ws-orange);outline-offset:1px}@media (max-width: 900px){.wd-scope{padding-block:96px}.wd-layers{grid-template-columns:1fr}.wd-layers__canvas{min-height:260px;border-right:0;border-bottom:1px solid var(--ws-line)}.wd-layers__panel{padding:10px}}.wd-fit{padding-block:120px}.wd-fit__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.wd-fit__col{padding:28px;background:#fbf9f4;border:1px solid var(--ws-line);border-radius:12px}.wd-fit__t{margin:0 0 16px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ws-ink)}.wd-fit__col ul{list-style:none;margin:0;padding:0}.wd-fit__col li{display:grid;grid-template-columns:30px minmax(0,1fr);padding:14px 0;border-top:1px solid var(--ws-line);font-size:16px;line-height:1.5;color:var(--ws-ink)}.wd-fit__col li span{padding-top:3px}.wd-fit__col svg{width:16px;height:16px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.is-good svg{stroke:#1f8f5f}.is-bad svg{stroke:#b23a22}.is-bad li{color:var(--ws-ink-2)}.wd-gloss{margin:0}.wd-gloss div{padding:14px 0;border-top:1px solid var(--ws-line)}.wd-gloss dt{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ws-ink)}.wd-gloss dd{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--ws-ink-2)}.wd-refs .ci-refs{padding-block:clamp(28px,4vw,44px)}.wd-refs__sum{display:flex;align-items:center;gap:12px;min-height:48px;font-family:var(--ws-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-ink-2)}.wd-refs__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px;margin-top:24px;padding-top:28px;border-top:1px solid var(--ws-line)}.wd-refs__body .wd-gloss div:first-child{border-top:0;padding-top:0}@media (max-width: 900px){.wd-refs__body{grid-template-columns:1fr;gap:32px}}@media (max-width: 700px){.wd-fit__grid{grid-template-columns:1fr}.wd-fit{padding-block:96px}}@media (max-width: 640px){.ws-p-webdesign .wd-sec-head{gap:14px;margin-bottom:32px}.wd-proc{padding-block:72px 64px}.wd-proc__head{margin-bottom:36px;gap:16px}.wd-ed__code{font-size:12.5px;min-height:0;padding:16px 0 18px}.wd-ed__line{grid-template-columns:36px minmax(0,1fr)}.wd-ed__line i{padding-right:12px}.wd-ed__k{display:none}.wd-spec{padding-block:72px 64px}.wd-spec__controls{gap:14px;padding:16px 14px 18px}.wd-seg legend{margin-bottom:6px;font-size:12.5px}.wd-seg label,.wd-spec__reset{min-height:44px}.wd-canvas{display:flex;align-items:stretch;gap:10px;padding:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:14px;scrollbar-width:none}.wd-canvas::-webkit-scrollbar{display:none}.wd-canvas>.wd-cv{flex:0 0 86%;scroll-snap-align:start}.wd-canvas{align-items:flex-start;transition:height .45s var(--ws-ease),background-color .5s var(--ws-ease)}.wd-cv__label{flex-wrap:wrap;row-gap:4px}.wd-tscale li{grid-template-columns:1fr;gap:4px}.wd-tscale__tok{display:flex;gap:8px}.wd-tscale__tok b{display:inline}.wd-tscale__s{white-space:normal;overflow:visible;text-wrap:balance}.wd-comp-grid{gap:12px}.wd-scope{padding-block:72px 64px}.wd-layers__canvas{min-height:220px;padding:20px 16px 60px}.wd-fit{padding-block:72px 64px}.wd-fit__col{padding:22px 18px}.wd-fit__col li{padding:12px 0;font-size:15px}}@media (max-width: 900px){.wd-proc__body{grid-template-columns:minmax(0,1fr);gap:24px}.wd-proc__item{padding:14px}}