:root{--ef-color-bg:#111214;--ef-color-bg-panel:#17181b;--ef-color-bg-elevated:#1f2024;--ef-color-bg-inset:#2a2a2a;--ef-color-border:#ffffff29;--ef-color-border-subtle:#ffffff14;--ef-color-text:#f4f4f5;--ef-color-text-muted:#f4f4f599;--ef-color-primary:#6ea8fe;--ef-color-primary-subtle:#6ea8fe2e;--ef-color-surface:#0009;--ef-color-hover:#333;--ef-font-family:system-ui, sans-serif}ef-workbench,ef-configuration,ef-timegroup{box-sizing:border-box;display:block}ef-workbench[hidden],ef-configuration[hidden],ef-timegroup[hidden]{display:none!important}@keyframes reveal-in{0%{opacity:0;transform:translate(var(--reveal-x,0px), var(--reveal-y,20px)) scale(var(--reveal-scale-from,1))}to{opacity:1;transform:translate(0)scale(1)}}@keyframes reveal-out{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--reveal-exit-x,0px), var(--reveal-exit-y,0px)) scale(var(--reveal-exit-scale,1))}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-18px)}}@keyframes check-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes brighten{0%{color:#f4f1ea61}to{color:#f4f1ea}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes press-pop{0%{transform:scale(1)}40%{transform:scale(.94)}to{transform:scale(1)}}@keyframes slam{0%{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes caption-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes tile-reveal{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes bar-up{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes word-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes rule-draw-in{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes underline-draw{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes panel-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-wipe{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes wipe-y-out{to{transform:translateY(-100%)}}@keyframes color-block-wipe{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes bloom{0%{clip-path:circle(0% at 50% 40%)}to{clip-path:circle(80% at 50% 40%)}}@keyframes typewriter-reveal{0%{width:0}to{width:100%}}@keyframes slide-x-in{0%{opacity:0;transform:translateX(var(--slide-x,24px))}to{opacity:1;transform:translate(0)}}@keyframes caret-blink{50%{opacity:0}}@keyframes sheen{0%{transform:translate(-120%)skew(-18deg)}to{transform:translate(220%)skew(-18deg)}}@keyframes ring-pulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes elastic-snap{0%{opacity:0;transform:translateY(18px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pixel-twinkle{0%,to{opacity:.15}50%{opacity:1}}@keyframes converge-in{0%{transform:translate(var(--dx), var(--dy)) scale(.4);opacity:0}to{opacity:1;transform:translate(0)scale(1)}}@keyframes strike-draw{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes halo-glow{0%{opacity:0;transform:scale(.7)}40%{opacity:1;transform:scale(1.06)}to{opacity:.7;transform:scale(1)}}@keyframes title-in{0%{opacity:0}to{opacity:1}}@keyframes title-out{to{opacity:0}}@keyframes hook-mark-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes hook-mark-out{to{opacity:0;transform:translateY(-16px)}}@keyframes logo-wipe{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes code-reveal{0%{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}@keyframes bubble-rise{0%{opacity:0;transform:translateY(110%)}18%{opacity:.9}to{opacity:0;transform:translateY(-30%)}}@keyframes spin-ccw{to{transform:rotate(-360deg)}}@keyframes burst-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes hero-rings-in{0%{opacity:0;transform:scale(.7)}to{opacity:.85;transform:scale(1)}}@keyframes rings-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.055)}}@keyframes can-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-22px)}}@keyframes hide{to{opacity:0;visibility:hidden}}@keyframes camera-zoom{0%{transform:translate(var(--cam-x0,0px), var(--cam-y0,0px)) scale(var(--cam-s0,1))}to{transform:translate(var(--cam-x1,0px), var(--cam-y1,0px)) scale(var(--cam-s1,1.5))}}@keyframes ripple{0%{opacity:.55;transform:translate(-50%,-50%)scale(.2)}to{opacity:0;transform:translate(-50%,-50%)scale(2.6)}}@keyframes cursor-squeeze{0%{transform:scale(1)}40%{transform:scale(.82)}to{transform:scale(1)}}[data-aspect]{--gutter:5%;--measure:min(1480px, 86%);--stack:row;--display:clamp(40px, 5.2cqw, 96px);--title:clamp(28px, 3.4cqw, 56px)}[data-aspect=portrait]{--gutter:8%;--measure:86%;--stack:column}[data-aspect=square]{--gutter:7%;--measure:84%;--stack:column}.frame-root{position:absolute;inset:0;container:frame/size}.frame{width:100%;height:100%;padding:var(--gutter);justify-content:center;align-items:center;display:flex;position:relative}.rail{justify-content:center;align-items:center;gap:clamp(16px,2.4cqw,40px);display:flex}[data-aspect=portrait] .rail,[data-aspect=square] .rail{flex-direction:column}.measure{width:var(--measure);max-width:100%}@container frame (width<=1400px){.w-\[1480px\],.w-\[1040px\],.w-\[980px\],.w-\[920px\]{max-width:100%;width:min(100%, var(--measure))!important}}@container frame (width<=1200px){.px-24{padding-left:var(--gutter);padding-right:var(--gutter)}.text-\[44px\]{font-size:var(--title)}}:root{--ink:#202020;--paper:#f8f8f5;--panel:#efefeb;--muted:#656560;--line:#dcdcd6;--accent:#b83532;color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;font-size:15px;line-height:1.5}a{color:inherit}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}#main-content:focus{outline:none}.catalog-shell{max-width:1800px;margin:auto;padding:0 48px}.site-header{z-index:20;border-bottom:2px solid var(--ink);background:var(--paper);align-items:center;gap:36px;min-height:88px;display:flex;position:sticky;top:0}.brand{white-space:nowrap;align-items:center;gap:18px;display:flex}.editframe-wordmark{letter-spacing:-1.15px;color:inherit;font-size:23px;font-weight:900;line-height:1;text-decoration:none}.brand-section{color:var(--muted);border-left:1px solid var(--line);padding-left:18px;font-size:12px;text-decoration:none}.site-nav{align-self:stretch;align-items:center;gap:28px;margin-left:auto;display:flex}.site-nav a{text-transform:uppercase;letter-spacing:.04em;border-bottom:3px solid #0000;align-items:center;height:100%;padding-top:3px;font-size:12px;font-weight:700;text-decoration:none;display:flex}.site-nav a[aria-current=page]{border-color:var(--accent);color:var(--accent)}.global-search{border:1px solid var(--line);background:#fff;align-items:center;width:220px;display:flex}.global-search input{background:0 0;border:0;width:100%;min-width:0;padding:9px 11px;font-size:12px}.global-search button{color:var(--muted);background:0 0;border:0;padding:8px 12px;font-size:18px}.browse-layout{grid-template-columns:200px minmax(0,1fr);gap:48px;padding-top:42px;display:grid}.browse-sidebar{align-self:start;position:sticky;top:112px}.nav-label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 12px 10px;font-size:10px;font-weight:700}.nav-label:not(:first-child){margin-top:32px}.browse-sidebar nav a{border-left:2px solid #0000;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;font-size:13px;text-decoration:none;display:flex}.browse-sidebar nav a span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:10px}.browse-sidebar nav a:hover{background:var(--panel)}.browse-sidebar nav a[aria-current=page]{border-color:var(--accent);background:#ecece6;font-weight:600}.archive-link{border-top:1px solid var(--line);color:var(--muted);margin:26px 12px 0;padding-top:18px;font-size:11px;text-decoration:none;display:block}.mobile-collections{display:none}.gallery{min-width:0;padding-bottom:70px}.collection-heading{padding:0 0 30px}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-size:10px;font-weight:600}.collection-heading h1{letter-spacing:-.055em;margin:0 0 18px;font-size:clamp(36px,4.3vw,64px);font-weight:800;line-height:1.05}.collection-heading>p:last-child{color:var(--muted);max-width:660px;margin:0;font-size:14px;line-height:1.7}.gallery-toolbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;padding:12px 0;display:flex}.catalog-search{flex:1;max-width:470px}.catalog-search input{width:100%;color:var(--ink);background:0 0;border:0;padding:8px 0;font-size:13px}.catalog-search input::placeholder{color:var(--muted)}.result-count{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.subfilters{flex-wrap:wrap;gap:8px;margin:-6px 0 24px;display:flex}.subfilters a{border:1px solid var(--line);padding:7px 12px;font-size:12px;text-decoration:none}.subfilters a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}.search-context{color:var(--muted);flex-wrap:wrap;align-items:center;gap:15px;margin-bottom:22px;font-size:12px;display:flex}.search-context button{text-underline-offset:3px;background:0 0;border:0;padding:0;text-decoration:underline}.search-context a{color:var(--ink);text-underline-offset:3px}.pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 22px;display:grid}.pattern-card{min-width:0}.card-caption{margin-top:12px}.card-caption h2,.card-caption h3{letter-spacing:-.25px;margin:0;font-size:14px;font-weight:600;line-height:1.45}.card-meta{color:var(--muted);margin:5px 0 0;font-size:11px}.pattern-card:has(.pattern-card-link:focus-visible){outline:2px solid var(--accent)!important}.pattern-preview{border-radius:2px!important}.empty-state{text-align:center;padding:64px 20px}.empty-state h2{letter-spacing:-1px;font-size:28px;font-weight:600}.empty-state p{color:var(--muted)}.empty-state a,.empty-state button{border:1px solid var(--line);color:var(--ink);background:0 0;margin:8px;padding:10px 16px;font-size:13px;text-decoration:none;display:inline-block}.editor-search-links{border-top:1px solid var(--line);flex-wrap:wrap;gap:20px;margin-top:35px;padding-top:24px;font-size:12px;display:flex}.editor-search-links span{color:var(--muted)}.site-footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;gap:20px;padding:26px 0 32px;font-size:11px;display:flex}.site-footer a{text-decoration:none}.site-footer>a:first-child{color:var(--ink);letter-spacing:-.04em;font-weight:900}.site-footer span{letter-spacing:0;color:var(--muted);margin-left:15px;font-weight:400}.skip-link{background:var(--ink);color:#fff;z-index:100;padding:10px 20px;position:absolute;top:0;left:10px;transform:translateY(-120%)}.skip-link:focus{transform:translateY(10px)}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.study-pagination{gap:24px;font-size:12px;display:flex}.study-pagination a{text-decoration:none}.example-source{border-top:1px solid var(--line);margin:32px 0 0;padding-top:18px}.example-source summary{font-size:13px;font-weight:600}.example-source summary span{color:var(--muted);margin-left:12px;font-size:10px}.example-source>p{color:var(--muted);margin:16px 0;font-size:11px}.example-source pre{white-space:pre;background:#ecece6;max-height:450px;padding:20px;font:11px/1.65 IBM Plex Mono,monospace;overflow:auto}.detail-page{padding-top:28px}.detail-breadcrumb{color:#88887e;justify-content:space-between;align-items:center;font-size:11px;display:flex}.back-link{color:#68695f;font-size:12px;text-decoration:none}.back-link:hover{text-underline-offset:4px;text-decoration:underline}.detail-heading{grid-template-columns:1fr;align-items:end;gap:30px;padding:47px 0 32px;display:grid}.detail-heading .eyebrow{margin-bottom:14px}.detail-heading .eyebrow span{color:#c0c0b6;padding:0 8px}.detail-heading h1{letter-spacing:-.055em;max-width:750px;margin:0;font-size:clamp(34px,3.8vw,62px);font-weight:500;line-height:1.06}.page-player{min-width:0}.detail-facts{color:#8a8a7e;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:25px;padding:14px 0 23px;font-size:10px;display:flex}.pattern-documentation{grid-template-columns:1.6fr 1fr;gap:100px;max-width:1280px;padding:15px 0 60px;display:grid}.doc-section{margin:32px 0 0}.doc-section h2{text-transform:uppercase;letter-spacing:1.4px;color:#828276;margin:0 0 18px;font-size:10px;font-weight:500}.doc-section p{color:#68695e;margin:0;font-size:14px;line-height:1.75}.doc-section .solution{color:#44483c;letter-spacing:-.35px;font-size:20px;line-height:1.6}.recipe-steps{margin:0;padding:0;list-style:none}.recipe-steps>li{border-top:1px solid var(--line);grid-template-columns:22px 1fr;gap:17px;padding:13px 0;display:grid}.recipe-steps>li>span{color:#a09f91;padding-top:5px;font:10px monospace}.sketch{color:#717568;white-space:pre-wrap;background:#eaeae3;border-radius:4px;margin-top:20px;padding:23px;font-size:11px;line-height:1.7;overflow-x:auto}.forces{color:#717266;padding-left:14px;font-size:12px;line-height:1.65}.forces li+li{margin-top:10px}.parameter-list{margin:0;font-size:12px}.parameter-list>div{border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr;gap:14px;padding:9px 0;display:grid}.parameter-list dt{color:#63675a;overflow-wrap:anywhere}.parameter-list dd{color:#8a8b7c;text-align:right;overflow-wrap:anywhere;margin:0}.parameter-list small{margin-top:5px;font-size:10px;line-height:1.5;display:block}.pattern-sources{color:#858578;margin-top:30px;font-size:11px}.pattern-sources summary{cursor:pointer}.pattern-sources ul{padding-left:14px;line-height:1.7}.pattern-sources li+li{margin-top:10px}.related-patterns{border-top:1px solid var(--line);padding:35px 0 65px}.related-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;display:flex}.related-heading h2{letter-spacing:-1px;margin:0;font-size:29px;font-weight:400}.related-patterns .pattern-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.not-found{padding:100px 0}.not-found h1{letter-spacing:-2px;font-size:48px;font-weight:500}.detail-heading h1{font-weight:750}.detail-heading .eyebrow a{text-decoration:none}.detail-heading .eyebrow a:hover{text-decoration:underline}.doc-section h2{color:var(--muted);font-weight:600}.ae-heading h1,.te-heading h1{font-family:inherit!important;font-weight:750!important}.ae-export,.te-export{border-radius:0!important}.ae-inspector,.te-inspector{border-radius:2px!important}.ae-export,.te-export{color:var(--ink)!important}.ae-source-grid .card-caption h3{font-size:12px}@media (min-width:1700px){.browse-layout .pattern-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:1250px){.catalog-shell{padding:0 30px}.site-header{gap:22px}.brand-section{display:none}.site-nav{gap:22px}.browse-layout{grid-template-columns:180px minmax(0,1fr);gap:30px}.pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pattern-documentation{gap:50px}}@media (max-width:850px){.catalog-shell{padding:0 24px}.site-header{flex-wrap:wrap;gap:0 24px;padding:22px 0 16px}.site-nav{gap:20px;height:45px}.global-search{width:100%;margin-top:16px}.browse-layout{padding-top:24px;display:block}.browse-sidebar{display:none}.mobile-collections{color:var(--muted);justify-content:space-between;align-items:center;gap:16px;padding-bottom:24px;font-size:12px;display:flex}.mobile-collections select{border:1px solid var(--line);max-width:75%;color:var(--ink);background:#fff;padding:10px 12px;font-size:13px}.collection-heading h1{font-size:44px}.pattern-documentation{grid-template-columns:1fr;gap:0}.related-patterns .pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-heading{padding:30px 0 24px}.detail-heading h1{font-size:40px}.study-pagination{gap:15px}}@media (max-width:540px){.catalog-shell{padding:0 18px}.editframe-wordmark{font-size:21px}.site-nav{justify-content:flex-start;gap:30px;width:100%;height:36px;margin-top:15px;margin-left:0}.global-search{margin-top:12px}.collection-heading h1{font-size:38px}.collection-heading>p:last-child{font-size:13px}.pattern-grid{gap:24px 14px}.card-caption h2,.card-caption h3{font-size:12px}.card-meta{font-size:10px}.gallery-toolbar{gap:12px}.subfilters{gap:6px}.subfilters a{padding:8px 9px;font-size:11px}.site-footer{flex-direction:column;align-items:flex-start;gap:12px}.site-footer span{margin-left:10px}.detail-breadcrumb{align-items:flex-start;gap:20px}.detail-heading h1{font-size:34px}.related-heading h2{font-size:24px}.detail-facts{gap:12px}.doc-section .solution{font-size:18px}.doc-section p{font-size:13px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important}}.preset-preview{aspect-ratio:16/9;color:var(--accent);background:#eeeee8;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}.preset-preview svg{width:45%;max-height:65%}.preset-preview span{letter-spacing:.1em;text-transform:uppercase;font-size:10px}.aesthetic-gallery{padding-top:42px}.aesthetic-gallery .collection-heading{padding-bottom:36px}.aesthetic-grid{row-gap:40px}.aesthetic-card .card-caption{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.aesthetic-card .card-caption>span{color:var(--muted);white-space:nowrap;font-size:11px}.aesthetic-card-palette{gap:4px;margin:12px 0;display:flex}.aesthetic-card-palette i{width:18px;height:6px;box-shadow:inset 0 0 0 1px #00000012}.aesthetic-card-description{color:var(--muted);max-width:48em;margin:0;font-size:12px;line-height:1.65}.aesthetic-editor-navigation{justify-content:space-between;gap:20px;display:flex}.essential-sections{gap:44px;display:grid}.essential-section+.essential-section{border-top:1px solid var(--line);padding-top:28px}.essential-section-heading{align-items:baseline;gap:14px;margin-bottom:20px;display:flex}.essential-section-heading>span{color:var(--accent);font-variant-numeric:tabular-nums;font-size:11px}.essential-section-heading h2{letter-spacing:-.035em;margin:0;font-size:20px;line-height:1.25}.essential-section-heading p,.essential-lesson{color:var(--muted);margin:7px 0 0;font-size:12px;line-height:1.6}.browse-layout .essential-section .pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:1100px){.browse-layout .essential-section .pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:540px){.browse-layout .essential-section .pattern-grid{grid-template-columns:1fr}.essential-section .card-caption h3{font-size:15px}.essential-sections{gap:32px}.essential-section-heading h2{font-size:19px}.aesthetic-gallery{padding-top:28px}.aesthetic-grid{grid-template-columns:1fr;gap:32px}.aesthetic-card .card-caption h2{font-size:16px}.aesthetic-card-description{font-size:13px}}.motion-catalog-links{border-bottom:1px solid var(--rule,#dedfd5);justify-content:flex-end;gap:12px;padding:8px clamp(16px,4vw,56px);font-size:12px;display:flex}.motion-catalog-links a{color:inherit;text-underline-offset:3px}@media (max-width:560px){.motion-catalog-links{white-space:nowrap;justify-content:flex-start;overflow-x:auto}}@media (min-width:851px){.pattern-documentation{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.pattern-documentation>*{min-width:0}}