/* Own geometric composition and motion, inspired by general parallax/morph principles. */
.formwerk{--fw-a:#3662ff;--fw-b:#e7fa69;--fw-c:#cb97ec;--fw-d:#fb9172;--fw-p:.3;--fw-x:0px;--fw-y:0px;background:#202326;color:#f8f4e9;padding:26px;border-radius:2px 75px 2px 2px;min-width:0;isolation:isolate}
.formwerk[data-palette=warm]{--fw-a:#fc765e;--fw-b:#d9b0fa;--fw-c:#ffdb85;--fw-d:#6c7bf5}.formwerk[data-palette=forest]{--fw-a:#46b19b;--fw-b:#ffd094;--fw-c:#8caaff;--fw-d:#eedc5b}
.fw-meta{display:flex;justify-content:space-between;gap:20px;color:#cbd0d2;font:8px 'Courier New',monospace;letter-spacing:.09em;padding-right:15px;line-height:1.5}
.fw-art{position:relative;aspect-ratio:1;max-width:610px;margin:0 auto;isolation:isolate}.fw-svg{display:block;width:100%;height:100%;overflow:visible}.fw-guide{fill:none;stroke:#7a838854;stroke-width:1;stroke-dasharray:2 12}.fw-piece{transform-box:view-box;transform-origin:300px 300px;transition:transform .13s linear}.fw-piece path{transition:fill .4s}
.fw-piece-a{fill:var(--fw-a);transform:translate(calc(var(--fw-p)*30px + var(--fw-x)),calc(var(--fw-p)*-30px + var(--fw-y))) rotate(calc(var(--fw-p)*22deg))}.fw-piece-b{fill:var(--fw-b);transform:translate(calc(var(--fw-p)*30px - var(--fw-x)),calc(var(--fw-p)*30px - var(--fw-y))) rotate(calc(var(--fw-p)*-20deg))}.fw-piece-c{fill:var(--fw-c);transform:translate(calc(var(--fw-p)*-30px + var(--fw-x)),calc(var(--fw-p)*30px + var(--fw-y))) rotate(calc(var(--fw-p)*26deg))}.fw-piece-d{fill:var(--fw-d);transform:translate(calc(var(--fw-p)*-30px - var(--fw-x)),calc(var(--fw-p)*-30px - var(--fw-y))) rotate(calc(var(--fw-p)*-24deg))}
.fw-slash{fill:var(--fw-b);transform-origin:300px 300px;transform:rotate(calc(var(--fw-p)*-28deg));transition:transform .13s linear,fill .4s}.fw-core{fill:#202326}.fw-line{fill:none;stroke:#f7efdf;stroke-width:3;transform-origin:300px 300px;transform:rotate(calc(var(--fw-p)*-15deg));transition:transform .13s linear}.fw-dot{fill:var(--fw-a);transform:translate(calc(var(--fw-p)*17px),calc(var(--fw-p)*-12px));transition:fill .4s}
.fw-word{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;font-family:'Arial Black',Arial,sans-serif;font-weight:900;letter-spacing:-.055em;font-size:clamp(28px,3.6vw,56px);line-height:1}.fw-word em{font-style:normal;color:var(--fw-b);font-weight:900}.fw-word small{font:6px 'Courier New',monospace;color:#e0ded6;letter-spacing:.06em;margin-top:12px}
.fw-palette{display:flex;flex-wrap:wrap;gap:7px}.fw-palette button,.fw-scroll{border:1px solid #7b8184;border-radius:30px;background:transparent;color:#f5f2e9;padding:11px 12px;font-size:10px;min-height:42px;cursor:pointer}.fw-palette button[aria-pressed=true]{color:#202326;background:var(--fw-b);border-color:var(--fw-b);font-weight:700}.fw-slider-label{display:grid;grid-template-columns:auto minmax(40px,1fr) 40px;gap:14px;align-items:center;font-size:11px;margin:24px 0;color:#e6e5dc}.fw-slider-label input{width:100%;min-width:0;accent-color:var(--fw-b);height:32px;cursor:pointer}.fw-output{text-align:right;font:10px 'Courier New',monospace;color:var(--fw-b)}.fw-actions{display:flex;align-items:center;justify-content:space-between;gap:15px}.fw-scroll{font-size:10px;min-height:40px}.fw-link{font-size:11px;color:#f0eddc;padding:10px 0;border-bottom:1px solid #737b7d}.formwerk .fw-status{font-size:11px;line-height:1.6;color:#c3cbca;min-height:36px;margin-top:17px;max-width:none}.formwerk button:focus-visible,.formwerk input:focus-visible,.formwerk a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.studio:has(.formwerk){gap:7%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.studio .formwerk{width:100%;max-width:670px}.fw-section{background:#202326;color:#f4f0e8;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5%}.fw-section .formwerk{padding:25px 0;background:none;border-radius:0}.fw-section-copy{align-self:center}.fw-section-copy .eyebrow{color:#e7fa69}.fw-section-copy h2{font-size:clamp(40px,5vw,76px);line-height:1.03;letter-spacing:-.06em;margin:25px 0}.fw-section-copy h2 em{color:#c4aff0}.fw-section-copy p{font-size:16px;line-height:1.8;color:#d1d3ce;margin-top:22px;max-width:550px}.fw-uses{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;border-top:1px solid #616967;padding-top:32px;margin-top:20px}.fw-uses a{display:flex;flex-direction:column;gap:16px;position:relative;min-width:0}.fw-uses b{font:9px 'Courier New',monospace;color:#e7fa69}.fw-uses strong{font-size:24px;line-height:1.15;letter-spacing:-.035em;color:#f3eee4;font-weight:500}.fw-uses span{font-size:13px;color:#c9ceca;line-height:1.6}.fw-uses a:after{content:'';height:2px;position:absolute;left:0;right:0;bottom:-12px;background:linear-gradient(90deg,#e7fa69,#3662ff,#cb97ec);transform:scaleX(0);transform-origin:left;transition:transform .35s}.fw-uses a:hover:after,.fw-uses a:focus-visible:after{transform:scaleX(1)}
.fw-explainer{background:#e9ebdf;color:#28323a;border-top:1px solid #bdc6b8}.fw-explainer .eyebrow{color:#496655}.fw-explainer h2{font-size:clamp(32px,4vw,61px);max-width:1000px;line-height:1.12;letter-spacing:-.045em;margin:22px 0}.fw-explainer>p{font-size:17px;line-height:1.8;max-width:880px;color:#47565c}.fw-explainer ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:0;margin:35px 0}.fw-explainer li{border-top:2px solid #677b69;padding-top:20px;font-size:14px;line-height:1.8;color:#374b50}.fw-explainer>a{display:inline-block;padding:14px 0;border-bottom:1px solid #526d58;font-size:13px;color:#263e32}
.fw-paused .fw-piece,.fw-paused .fw-slash,.fw-paused .fw-line{transition:none}.motion-off .formwerk *{transition:none!important}
@media(max-width:1000px){.studio:has(.formwerk){gap:5%}.formwerk{padding:22px 18px}.fw-word{font-size:36px}.fw-meta{font-size:6px}.fw-palette button{font-size:9px;padding:10px}.fw-slider-label{gap:8px;font-size:10px}.fw-actions{flex-wrap:wrap}.fw-section-copy h2{font-size:46px}.fw-section-copy p{font-size:14px}}
@media(max-width:760px){.studio:has(.formwerk),.fw-section{grid-template-columns:1fr;gap:40px}.studio .formwerk{max-width:550px;margin:auto}.fw-section .formwerk{padding:0}.fw-art{max-width:460px;width:100%}.fw-word{font-size:clamp(27px,8vw,46px)}.fw-meta{font-size:7px}.fw-word small{font-size:5px;margin-top:8px}.fw-palette{gap:6px}.fw-palette button{font-size:9px;padding:9px;min-height:42px}.fw-slider-label{margin:19px 0}.fw-section-copy h2{font-size:40px}.fw-section-copy p{font-size:15px}.fw-uses{grid-template-columns:1fr;gap:32px;margin-top:0}.fw-uses a{gap:10px}.fw-uses strong{font-size:25px}.fw-explainer ul{grid-template-columns:1fr;gap:20px}.fw-explainer>p{font-size:15px}.fw-explainer li{font-size:14px}.fw-explainer h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){.formwerk *,.fw-uses a:after{transition:none!important}}