/* MIT: see downloads/web-design-atlas/LICENSE.txt */
:root{font-family:system-ui,-apple-system,"Noto Sans",sans-serif;color:#192e2b;background:#f6f6ef;line-height:1.65;--ink:#192e2b;--accent:#245d4f;--mint:#b5d9cb;--line:#c9d1c5}*{box-sizing:border-box}body{margin:0}a{color:var(--accent);text-underline-offset:4px}button,input,select{font:inherit}button,select{cursor:pointer}button{background:#fff;border:1px solid #85958b;border-radius:6px;padding:8px 14px;color:var(--ink);min-height:44px}button:hover{background:#edf4ec}button[disabled]{cursor:default;opacity:.65}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #b75a27;outline-offset:4px}.skip{position:absolute;left:16px;top:-100px;background:#fff;padding:12px;z-index:10}.skip:focus{top:10px}.shell{width:min(1260px,100%);padding:0 32px;margin:auto}.site-header{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding:18px 0}.brand{font-weight:750;font-size:20px;text-decoration:none;white-space:nowrap}.languages{display:flex;gap:4px;flex-wrap:wrap}.languages a{font-size:13px;padding:8px 7px;min-height:38px;text-decoration:none}.languages [aria-current]{text-decoration:underline}.hero{padding:52px 0 34px;max-width:840px}.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--accent);font-weight:700}.hero h1{font-size:clamp(18px,2vw,24px);font-weight:500;margin:0}.headline{font-size:clamp(32px,5vw,58px);line-height:1.25;letter-spacing:-.035em;font-weight:750;margin:16px 0}.lead{max-width:730px;font-size:17px}.finder{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:26px}.search-row{display:flex;align-items:end;gap:12px}.search-row label{width:min(540px,100%)}label{font-size:14px;display:block}input[type=search]{width:100%;display:block;margin-top:5px;padding:10px 12px;border:1px solid #85958b;border-radius:6px;background:#fff;color:var(--ink);min-width:0}.filter-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:14px}select{margin-left:8px;background:#fff;color:var(--ink);border:1px solid #85958b;padding:8px;max-width:100%}.reduce{display:flex;gap:8px;align-items:center}.reduce input{width:20px;height:20px;accent-color:var(--accent)}.muted,#results-count{font-size:13px;color:#4d6057;margin-bottom:0}.atlas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}.pattern{border:1px solid var(--line);border-radius:12px;background:#fffef9;padding:18px;min-width:0;scroll-margin-top:24px}.pattern-heading{display:flex;gap:12px;align-items:start;min-height:67px}.number{font-size:13px;color:var(--accent);padding-top:5px;font-variant-numeric:tabular-nums}.pattern h2{font-size:17px;line-height:1.4;margin:0;font-weight:650;overflow-wrap:anywhere}.pattern h2 a{color:var(--ink);text-decoration:none}.stage{height:168px;border-radius:7px;border:1px solid #d3d9d0;background:#f1f4ec;position:relative;display:flex;align-items:center;justify-content:center;padding:15px;min-width:0;overflow:hidden}.stage i{display:block;background:#82ab9a;height:5px;width:85%;border-radius:2px;margin:6px 0}.stage i:nth-child(2){width:62%;opacity:.6}.stage i:nth-child(3){width:72%;opacity:.35}.demo-controls{min-height:48px;display:flex;align-items:center;justify-content:flex-end;margin-top:6px}.demo-controls button{padding:5px 12px;font-size:13px}.scroll-hint{font-size:13px;color:var(--accent);margin:5px 0}.description{font-size:15px;margin:12px 0 8px}.fit{font-size:13px;color:#4d6057;margin:0 0 14px}.fit strong{display:block;font-size:11px;letter-spacing:.04em;color:var(--accent);font-weight:600}details{border-top:1px solid var(--line);padding-top:10px}summary{font-size:13px;cursor:pointer;padding:5px 0;min-height:36px}.prompt{font-size:13px;background:#eef2e9;padding:12px;border-radius:6px;overflow-wrap:anywhere;user-select:text}.copy-status{font-size:13px}.composition{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.tile{display:block;padding:8px;background:#d9e9df;border:1px solid #aac7b5;border-radius:4px;min-width:0}.composition.bento{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}.bento .tile:first-child{grid-column:span 2;grid-row:span 2}.bento .tile:nth-child(2){grid-column:span 2}.composition.split{grid-template-columns:1fr 1fr;gap:12px}.split .tile:first-child{grid-row:span 3;background:#aac7b5}.split .tile:nth-child(n+5){display:none}.composition.asymmetric{grid-template-columns:2fr 1fr;transform:rotate(-3deg);gap:10px}.asymmetric .tile:first-child{grid-row:span 3}.asymmetric .tile:nth-child(n+5){display:none}.composition.whitespace{padding:24px 35px;gap:22px;grid-template-columns:1fr 1fr}.whitespace .tile:nth-child(n+3){display:none}.composition.editorial{grid-template-columns:1fr 1fr;gap:6px}.editorial .tile:first-child{grid-column:span 2;background:#245d4f;height:35px}.editorial .tile:nth-child(n+4){display:none}.landscape{position:relative;overflow:hidden;background:#d5e7dc;width:100%;height:100%;min-height:60px}.landscape span{position:absolute;bottom:-10%;width:80%;height:70%;background:#74a28c;clip-path:polygon(0 100%,45% 10%,100% 100%)}.landscape span:nth-child(2){left:30%;bottom:-30%;background:#245d4f;height:100%}.landscape span:nth-child(3){width:28px;height:28px;border-radius:50%;background:#dbaa55;right:22%;top:14%;clip-path:none}.glass-back{width:100%;height:100%;position:relative}.glass-panel{position:absolute;inset:25% 15%;background:#fff9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #fff9;border-radius:8px;padding:8px;box-shadow:0 8px 20px #192e2b22}.relief{display:flex;gap:28px}.relief span{width:64px;height:64px;border-radius:18px;background:#edf0e8;box-shadow:9px 9px 15px #b8beb3,-9px -9px 15px #fff}.relief span:nth-child(2){box-shadow:inset 7px 7px 12px #b8beb3,inset -7px -7px 12px #fff}.bold-block{background:#dbec73;border:3px solid #192e2b;box-shadow:7px 7px 0 #192e2b;padding:10px 28px;font-weight:900;line-height:1.3;font-size:28px}.gradient-swatch{width:100%;height:100%;background:linear-gradient(125deg,#193c4b,#83b79b,#e8dc85);border-radius:8px}.duotone-picture{width:100%;height:100%}.duotone-picture .landscape{background:#ebe0b3}.duotone-picture .landscape span{background:#29435d}.duotone-picture .landscape span:nth-child(2){opacity:.65}.duotone-picture .landscape span:nth-child(3){background:#29435d}.outline-type{font-size:90px;font-weight:900;color:transparent;-webkit-text-stroke:2px #245d4f;line-height:1}.demo-tile{width:85%;padding:10px;background:#fff;border:1px solid #aac7b5;border-radius:5px}.demo-tile .landscape{height:60px}.demo-tile i{height:4px}.stagger-items{display:flex;gap:8px;width:100%}.stagger-items>div{flex:1;min-width:0}.text-window{overflow:hidden;max-width:100%;padding:6px}.word{display:block;font-weight:700;font-size:21px;line-height:1.3;max-width:240px}.count-value{font-size:44px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}.stage svg{width:100%;height:100%;fill:#245d4f}.draw-line{stroke:#245d4f;stroke-width:3;fill:none;stroke-linecap:round}.marquee-window{width:100%;overflow:hidden}.marquee-text{white-space:nowrap;font-size:30px;font-weight:700;width:max-content}.scene{width:100%;height:100%;position:relative;overflow:hidden;background:#d5e7dc}.scene .landscape{height:100%}.foreground{position:absolute;bottom:-12px;left:15%;width:75%;height:55px;background:#192e2b;clip-path:polygon(0 100%,60% 0,100% 100%)}.progress-fill,.frame-number{display:none}.progress-scene{height:12px;background:#edf0e8;--progress:1}.progress-scene .landscape,.progress-scene .foreground{display:none}.progress-fill{display:block;height:100%;width:calc(var(--progress,1)*100%);background:#245d4f}.zoom-scene .foreground,.sequence-scene .foreground,.sticky-scene .foreground{display:none}.sequence-scene .frame-number{display:block;position:absolute;top:6px;right:6px;background:#fff;padding:2px 6px;font-size:12px;color:var(--ink);z-index:3}.sticky-range{height:430px;position:relative}.sticky-range .stage{position:sticky;top:20vh}.snap-track{display:flex;overflow:hidden;width:100%;height:100%;position:relative;scroll-snap-type:x mandatory;gap:10px}.snap-card{flex:0 0 90%;scroll-snap-align:start;background:#d9e9df;padding:8px;color:var(--accent);font-weight:700;border-radius:4px}.snap-card .landscape{height:76px}.guide{max-width:800px;margin:70px auto 40px;border-top:1px solid var(--line);padding-top:30px}.guide h2{font-size:23px;margin:32px 0 12px}.guide p{font-size:16px}.guide ul{padding-left:20px;overflow-wrap:anywhere}.guide li{margin:8px 0}.source-link{display:inline-block;padding:10px 0}footer{border-top:1px solid var(--line);font-size:13px;color:#4d6057;padding:22px 0 34px}.pattern[hidden],#empty[hidden]{display:none}.motion-reduced .parallax-scene .landscape,.motion-reduced .parallax-scene .foreground,.motion-reduced .zoom-scene .landscape{transform:none!important}.motion-reduced .sequence-scene .landscape{transform:none!important}.motion-reduced .sticky-range .stage{position:relative;top:0}.motion-reduced .sticky-range{height:auto}.motion-reduced .snap-track{scroll-snap-type:none}@media(max-width:1000px){.atlas{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.shell{padding:0 18px}.site-header{display:block;padding:14px 0}.languages{margin-top:6px;gap:0}.languages a{padding:7px 8px}.hero{padding:32px 0 24px}.atlas{grid-template-columns:1fr;gap:18px}.pattern-heading{min-height:50px}.headline{font-size:34px}.search-row{align-items:end}.search-row button{padding:8px}.filter-row{gap:12px}.filter-row label{max-width:100%}.guide{margin-top:40px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.sequence-frame{width:100%;height:100%}.sequence-frame[hidden]{display:none}
.composition .tile{padding:6px;min-height:0}.composition .tile i{height:3px;margin:4px 0}.composition.bento{grid-template-rows:repeat(3,minmax(0,1fr))}.composition.split,.composition.asymmetric{grid-template-rows:repeat(3,minmax(0,1fr))}.pattern:not([data-group=motion]) .demo-controls{display:none}
.search-row label{flex:1;min-width:0}.search-row #reset{flex:none;white-space:nowrap}
.composition.masonry{display:block;column-count:3;column-gap:8px}.masonry .tile{break-inside:avoid;margin-bottom:8px;height:40px}.masonry .tile:nth-child(2n){height:62px}.masonry .tile:nth-child(3n){height:28px}.composition.layered{position:relative;display:block}.layered .tile{position:absolute;width:66%;height:75%;left:3%;top:3%;box-shadow:0 6px 15px #192e2b22}.layered .tile:nth-child(2){left:31%;top:23%;background:#fff}.layered .tile:nth-child(n+3){display:none}.composition.fullbleed{display:block;background:linear-gradient(135deg,#74a28c 40%,#245d4f 40%,#245d4f 65%,#dbaa55 65%);margin:-15px;width:calc(100% + 30px);height:calc(100% + 30px);flex-shrink:0}.fullbleed .tile{display:none}.composition.card-layout{grid-template-columns:1fr 1fr;gap:12px}.card-layout .tile{background:#fff;box-shadow:0 4px 9px #192e2b15;padding:12px}.card-layout .tile:nth-child(n+3){display:none}.shadow-sample{background:#fff;width:72%;padding:20px;border-radius:10px;box-shadow:0 12px 24px #192e2b30}.mesh-swatch,.halftone-swatch,.color-swatch{width:100%;height:100%;border-radius:7px}.mesh-swatch{background:radial-gradient(at 15% 25%,#dbaa55 0,transparent 60%),radial-gradient(at 85% 75%,#245d4f 0,transparent 65%),#b5d9cb}.halftone-swatch{background:radial-gradient(circle,#245d4f 1.7px,transparent 2px);background-size:8px 8px;mask-image:linear-gradient(90deg,#000,transparent)}.color-swatch{background:rgb(36,93,79)}.fill-text{font-size:44px;font-weight:900;color:transparent;background:linear-gradient(90deg,#245d4f 100%,#85958b 100%);background-clip:text;-webkit-background-clip:text}.path-demo .route-line{fill:none;stroke:#aac7b5;stroke-width:3}.path-dot,.morph-shape{fill:#245d4f}.effect-flip{perspective:600px}.effect-flip .motion-object{backface-visibility:hidden}.interaction-button{background:#d9e9df;border-color:#245d4f;padding:15px 30px;font-weight:650}.hover-lift-button:hover,.hover-lift-button:focus{transform:translateY(-8px);box-shadow:0 12px 16px #192e2b25}.focus-ring-button:focus{outline:3px solid #b75a27;outline-offset:5px}.accordion-demo,.tabs-demo{width:100%;font-size:14px}.accordion-demo button{width:100%;font-size:14px}.accordion-demo p,.tabs-demo p{margin:10px 0;font-size:14px}.tabs-demo [role=tablist]{display:flex;gap:6px}.tabs-demo [role=tab]{flex:1;padding:6px;font-size:13px;min-width:0}.tabs-demo [aria-selected=true]{background:#245d4f;color:#fff}.stage [hidden]{display:none}.pattern[data-group=interaction] .demo-controls{display:flex}.motion-reduced .hover-lift-button:hover,.motion-reduced .hover-lift-button:focus{transform:none}
@media(max-width:600px){.hero{padding:18px 0}.hero .headline{font-size:28px;margin:10px 0}.hero .lead{font-size:15px;margin:10px 0}.finder{padding:15px 0;margin-bottom:18px}.filter-row{margin-top:10px}.pattern{padding:15px}.demo-controls{min-height:38px}.scroll-hint{font-size:12px}}

.hero{padding:24px 0}.hero .headline{font-size:clamp(28px,3.2vw,42px);margin:12px 0}.hero .lead{font-size:15px;margin:10px 0;max-width:760px}.finder{padding:15px 0;margin-bottom:18px}@media(max-width:600px){.hero{padding:16px 0}.hero .headline{font-size:28px;margin:8px 0}}