:root{color:#f5f5f3;--canvas:#1e1e1e;--section:#232323;--accent:#b6f36b;--muted:#aeaea8;--line:#464646;--space-gap:22px;--unit-quarter:105px;--unit-half:210px;--unit-cell:420px;--field-medium:840px;--field-max:1260px;--canvas-xl:1680px;background:#1e1e1e;font-family:Inter,Arial,sans-serif}*{box-sizing:border-box}body{background:var(--canvas);margin:0}button{font:inherit;color:inherit}button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}nav{background:var(--section);justify-content:space-between;align-items:center;height:105px;padding:0 4%;font-size:11px;font-weight:600;display:flex}.brand,.text-link{cursor:pointer;background:0 0;border:0}.brand{font-size:20px;font-weight:700}.navlinks{color:var(--muted);gap:34px;display:flex}h1,h2,h3,p{margin:0}small{color:var(--accent);font-size:11px;font-weight:700}.archive,.article-head,.saved-head{grid-template-columns:1fr 1fr;align-items:center;min-height:420px;padding:76px 4%;display:grid}.archive h1{margin:28px 0 54px;font-size:88px}.archive>p{color:var(--muted);max-width:600px;font-size:22px;line-height:1.55}.filters{background:var(--section);padding:42px 4% 70px}.filters div{flex-wrap:wrap;gap:20px;margin-top:34px;display:flex}.filters button,.save{border:1px solid var(--line);cursor:pointer;background:0 0;height:44px;padding:0 18px;font-size:10px;font-weight:700}.filters .active,.saved{background:var(--accent);color:#191919;border-color:var(--accent)}.feature{grid-template-columns:1.1fr .8fr;align-items:center;gap:7%;padding:66px 4%;display:grid}.feature img{object-fit:cover;width:100%;height:500px}.feature h2{margin:36px 0;font-size:42px}.feature p{color:var(--muted);max-width:450px;margin-bottom:46px;line-height:1.7}.stories,.related,.saved-grid{background:var(--section);padding:70px 11%}.section-head{border-bottom:1px solid var(--line);justify-content:space-between;margin-bottom:44px;padding-bottom:28px;display:flex}.section-head span{color:var(--muted);font-size:10px}.grid{grid-template-columns:repeat(3,1fr);gap:42px;display:grid}.card{text-align:left;cursor:pointer;background:0 0;border:0;padding:0}.card img{aspect-ratio:1.4;object-fit:cover;width:100%}.card small{margin:28px 0 20px;display:block}.card h3{font-size:26px;line-height:1.3}.card p{color:var(--muted);margin-top:16px;line-height:1.55}footer{background:var(--section);border-top:1px solid #292929;grid-template-columns:1fr auto auto;gap:10%;min-height:315px;padding:70px 4% 30px;display:grid;position:relative}footer strong{font-size:20px}footer p{color:var(--muted);margin-top:20px}.built{color:var(--accent);font-size:10px;position:absolute;bottom:30px;left:4%}.article-head{min-height:700px;padding-top:90px;display:block}.article-head h1{margin:36px 0;font-size:82px;line-height:1.04}.article-head p{color:var(--muted);max-width:720px;margin-bottom:42px;font-size:22px;line-height:1.5}.article-head b{font-size:10px}.utility{background:var(--section);align-items:center;gap:22px;height:88px;padding:0 5%;display:flex}.track{background:var(--line);flex:1;max-width:980px;height:4px}.track i{background:var(--accent);width:42%;height:100%;display:block}.utility span{color:var(--muted);font-size:10px}.save{margin-left:auto}.save.saved{background:var(--accent)}article{padding:100px 5%}.intro{grid-template-columns:168px 2fr 1fr;gap:84px;display:grid}.intro h2{font-size:30px}.intro p{color:var(--muted);margin-top:28px;line-height:1.6}.intro aside{font-size:11px}.intro hr{border:0;border-top:1px solid var(--line);width:84px;margin:18px 0}.note{background:var(--section);padding:28px}.note h3{margin-top:24px}.article-image{object-fit:cover;width:100%;height:720px;margin:80px 0}blockquote{max-width:990px;margin:0 auto;padding:70px 0;font-size:38px;font-weight:700}.closing{grid-template-columns:1fr 2fr;gap:84px;margin:80px 0;display:grid}.closing h2{font-size:38px}.closing h2 small{margin-bottom:18px;display:block}.closing p{color:var(--muted);margin-bottom:28px;line-height:1.6}.related{background:#111}.related h2{margin:30px 0 42px;font-size:36px}.saved-head{padding:84px 5%;display:block}.saved-head h1{margin:30px 0;font-size:72px}.saved-head p{color:var(--muted);max-width:720px;font-size:20px}.saved-grid{background:#121212;padding-top:84px;padding-bottom:96px}@media (width<=700px){nav{padding:0 18px}.brand{font-size:14px}.navlinks{display:none}.archive,.article-head,.saved-head{min-height:420px;padding:66px 33px;display:block}.archive h1,.saved-head h1{margin:24px 0;font-size:52px}.archive>p,.saved-head p{font-size:16px}.filters{padding:32px 18px}.filters div{gap:8px}.feature{padding:44px 18px;display:block}.feature img{height:300px}.feature h2{font-size:30px}.stories,.related,.saved-grid{padding:54px 18px}.grid{grid-template-columns:1fr;gap:34px}.card h3{font-size:20px}.article-head{min-height:430px}.article-head h1{font-size:48px}.article-head p{font-size:16px}.article-head b{line-height:2}.utility{padding:0 10px}.utility .track{max-width:170px}article{padding:72px 18px}.intro{display:block}.intro>aside:first-child{margin-bottom:40px}.note{margin-top:44px}.article-image{height:360px;margin:52px 0}blockquote{padding:20px 0 50px;font-size:30px}.closing{margin:20px 0;display:block}.closing h2{margin-bottom:40px;font-size:30px}.related h2{font-size:30px}footer{padding:60px 18px 80px;display:block}footer>div{margin-bottom:38px}.built{left:18px}.saved-head h1{font-size:48px}}@media (prefers-reduced-motion:no-preference){button,.card{transition:color .18s,background .18s,transform .18s}.card:hover{transform:translateY(-4px)}}.value{background:var(--accent);color:#171717}.value small{color:#171717}.value .brief-heading p{color:#26321a}.value-grid{grid-template-columns:repeat(4,1fr);gap:22px;display:grid}.value-grid article{color:#f5f5f3;background:#171717;min-height:290px;padding:28px}.value-grid article small{color:var(--accent)}.value-grid article b{margin:52px 0 24px;font-size:26px;display:block}.value-grid article p{color:var(--muted);line-height:1.6}.cell-demo{gap:22px;margin-bottom:90px;display:grid}.cell{border:1px solid var(--line);background:repeating-linear-gradient(90deg,#232323 0 calc(25% - 1px),#464646 calc(25% - 1px) 25%);justify-content:space-between;align-items:flex-end;height:150px;padding:24px;display:flex}.cell.one{width:25%}.cell.two{width:50%}.cell.three{width:75%}.cell.four{background-color:var(--accent);width:100%}.cell b{font-size:22px}.cell.four b,.cell.four small{color:#171717}@media (width<=900px){.value-grid{grid-template-columns:1fr}.cell{height:105px;width:100%!important}.cell-demo{margin-bottom:60px}}.cell-demo{flex-direction:column;align-items:flex-start;gap:22px;display:flex;overflow:hidden}.cell{background:0 0;border:0;flex-wrap:wrap;max-width:100%;padding:0;display:flex;width:auto!important;height:auto!important}.cell-unit{border:1px solid var(--line);background:#232323;flex:0 0 420px;justify-content:space-between;align-items:flex-end;width:420px;height:210px;padding:24px;display:flex}.cell-row-4 .cell-unit{color:#171717;background:#b6f36b}.cell-row-4 small{color:#171717}.cell-unit b{font-size:22px}.cell-row-1{width:420px!important}.cell-row-2{width:840px!important}.cell-row-3{width:1260px!important}.cell-row-4{width:1680px!important}@media (width<=1764px){.cell-row-4{width:1260px!important}}@media (width<=1344px){.cell-row-3,.cell-row-4{width:840px!important}}@media (width<=924px){.cell-row-2,.cell-row-3,.cell-row-4{width:420px!important}.cell-demo{overflow:visible}}@media (width<=500px){.cell-demo{width:420px;margin-left:-33px}.cell-unit{height:160px}.cell-unit small{margin-left:24px}.cell-unit b{margin-right:24px}}.system-site{background:#1e1e1e}.system-site a{color:inherit;text-decoration:none}.system-nav{z-index:10;position:sticky;top:0}.system-nav .brand{font-size:20px}.system-nav .launch,.primary,.release button,.release a{border:1px solid var(--accent);background:var(--accent);color:#171717;cursor:pointer;padding:16px 20px;font-size:10px;font-weight:800}.system-hero{grid-template-columns:1.35fr .65fr;column-gap:8%;min-height:735px;padding:88px 5% 0;display:grid;position:relative}.system-hero h1{letter-spacing:-.055em;margin:42px 0;font-size:clamp(58px,6.8vw,112px);line-height:.96}.hero-side{align-self:center}.hero-side p{color:var(--muted);margin-bottom:44px;font-size:21px;line-height:1.6}.hero-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(4,1fr);display:grid;position:absolute;bottom:0;left:5%;right:5%}.hero-stats span{color:var(--muted);padding:30px 20px 30px 0;font-size:10px}.hero-stats b{color:var(--accent);margin-bottom:10px;font-size:36px;display:block}.brief-section{border-bottom:1px solid #2b2b2b;padding:105px 5%}.brief-heading{grid-template-columns:1fr 1fr;column-gap:8%;margin-bottom:70px;display:grid}.brief-heading small{grid-column:1/-1;margin-bottom:30px}.brief-heading h2{letter-spacing:-.035em;font-size:clamp(40px,4vw,66px);line-height:1.04}.brief-heading p{color:var(--muted);align-self:end;max-width:570px;font-size:18px;line-height:1.6}.principles{background:#232323}.principle-grid,.breakpoint-grid{grid-template-columns:repeat(4,1fr);gap:22px;display:grid}.principle-grid article,.breakpoint-grid article{background:#1e1e1e;min-height:250px;padding:28px}.principle-grid span{color:var(--accent);font-size:12px}.principle-grid h3{margin:48px 0 22px;font-size:15px}.principle-grid p,.breakpoint-grid p{color:var(--muted);line-height:1.6}.dimension-grid{align-items:flex-end;gap:22px;margin-bottom:88px;display:flex}.dimension{background:#232323;flex-direction:column;justify-content:space-between;min-width:105px;padding:18px;display:flex}.dimension small{color:var(--muted)}.dimension b{font-size:30px}.d0{height:105px}.d1{height:150px}.d2{min-width:210px;height:210px}.d3{min-width:260px;height:260px}.d4{min-width:310px;height:310px}.d5{flex:1;height:360px}.token-layout{grid-template-columns:1fr 1fr 1fr;gap:42px;display:grid}.swatches{grid-template-columns:repeat(4,1fr);height:210px;margin-top:30px;display:grid}.swatches i:first-child{border:1px solid var(--line);background:#1e1e1e}.swatches i:nth-child(2){background:#232323}.swatches i:nth-child(3){background:#f5f5f3}.swatches i:nth-child(4){background:#b6f36b}.token-list{border-top:1px solid var(--line)}.token-list p,.behavior-list p{border-bottom:1px solid var(--line);justify-content:space-between;padding:18px 0;font-size:11px;display:flex}.token-list span,.behavior-list span{color:var(--muted)}.type-sample{background:#232323;padding:28px}.type-sample strong{margin:30px 0;font-size:112px;line-height:1;display:block}.type-sample p{color:var(--muted);line-height:1.5}.library{background:#111}.component-table article{border-top:1px solid var(--line);grid-template-columns:80px 1fr 190px 1.2fr;align-items:center;min-height:88px;display:grid}.component-table article:last-child{border-bottom:1px solid var(--line)}.component-table span,.component-table b{color:var(--muted);font-size:11px}.component-table h3{font-size:20px}.component-table p{color:var(--muted)}.component-stage{background:#1e1e1e;margin-top:105px;padding-bottom:70px}.sample-nav{background:#232323;justify-content:space-between;align-items:center;height:105px;padding:0 44px;display:flex}.sample-nav span{color:var(--muted);font-size:10px}.sample-controls{gap:20px;padding:54px;display:flex}.sample-controls button,.state-button{border:1px solid var(--line);background:0 0;height:44px;padding:0 20px;font-size:10px;font-weight:700}.sample-controls .active{background:var(--accent);color:#171717}.sample-cards{grid-template-columns:repeat(3,1fr);gap:42px;padding:20px 54px;display:grid}.breakpoint-grid article b{margin:42px 0 26px;font-size:48px;display:block}.state-grid{grid-template-columns:repeat(4,1fr);gap:22px;display:grid}.state-grid article{background:#232323;height:220px;padding:28px}.state-grid small{margin-bottom:52px;display:block}.state-button{width:100%}.state-button.focused{outline:2px solid var(--accent)}.state-button.complete{background:var(--accent);color:#171717}.loading-lines{padding-top:10px}.loading-lines i{background:#464646;height:10px;margin-bottom:18px;display:block}.loading-lines i:nth-child(2){width:80%}.loading-lines i:nth-child(3){width:55%}.behavior-list{max-width:760px;margin-top:70px}.proof-grid{grid-template-columns:repeat(3,1fr);gap:42px;display:grid}.proof-grid button{text-align:left;cursor:pointer;background:#232323;border:0;padding:0 0 30px}.proof-grid img{aspect-ratio:1.1;object-fit:cover;width:100%}.proof-grid small,.proof-grid h3{margin:24px 24px 0;display:block}.proof-grid h3{font-size:25px}.release{background:var(--accent);color:#171717;min-height:570px;padding:105px 5%}.release small{color:#171717}.release h2{letter-spacing:-.05em;margin:44px 0;font-size:clamp(54px,7vw,110px)}.release p{max-width:760px;font-size:20px;line-height:1.6}.release div{gap:18px;margin-top:60px;display:flex}.release button,.release a{border-color:#171717}.release a{color:#f5f5f3;background:#171717}.system-footer{min-height:240px}.system-footer small{align-self:start}.system-footer .built{display:none}@media (width<=1200px){.system-nav .navlinks{display:none}}@media (width<=1400px) and (width>=901px){.dimension-grid{grid-template-columns:repeat(3,1fr);align-items:stretch;display:grid}.dimension,.d0,.d1,.d2,.d3,.d4,.d5{min-width:0;height:210px}}@media (width<=900px){.system-nav .navlinks{display:none}.system-hero{min-height:auto;padding:66px 33px 130px;display:block}.system-hero h1{margin:34px 0 46px;font-size:58px}.hero-side p{font-size:17px}.hero-stats{grid-template-columns:1fr 1fr;margin-top:74px;position:static}.brief-section{padding:78px 33px}.brief-heading{display:block}.brief-heading h2{margin-bottom:28px;font-size:44px}.brief-heading p{font-size:16px}.principle-grid,.breakpoint-grid,.state-grid,.proof-grid,.sample-cards{grid-template-columns:1fr}.dimension-grid{grid-template-columns:1fr 1fr;display:grid}.dimension,.d0,.d1,.d2,.d3,.d4,.d5{min-width:0;height:150px}.token-layout{grid-template-columns:1fr}.component-table article{grid-template-columns:48px 1fr}.component-table b,.component-table p{grid-column:2;margin:7px 0}.sample-nav span{display:none}.sample-controls{flex-wrap:wrap;gap:8px;padding:32px 18px}.sample-cards{padding:20px 18px}.release{padding:78px 33px}.release div{flex-direction:column;align-items:flex-start}.system-nav .launch{padding:13px 10px;font-size:9px}.system-footer{padding-left:33px}}.system-site{--cell:var(--unit-cell);--half-cell:var(--unit-half);--quarter-cell:var(--unit-quarter)}.system-site .value-grid,.system-site .principle-grid,.system-site .breakpoint-grid,.system-site .proof-grid,.system-site .sample-cards{grid-template-columns:repeat(auto-fit,var(--cell));justify-content:center;gap:0;width:100vw;margin-left:calc(50% - 50vw);display:grid}.system-site .value-grid>*,.system-site .principle-grid>*,.system-site .breakpoint-grid>*,.system-site .state-grid>*,.system-site .proof-grid>*,.system-site .sample-cards>*{width:var(--cell);min-width:var(--cell);max-width:var(--cell)}.system-site .value-grid article,.system-site .principle-grid article,.system-site .breakpoint-grid article{border:1px solid var(--line);min-height:420px;padding:33px}.system-site .state-grid{grid-template-columns:repeat(auto-fit,var(--half-cell));justify-content:center;gap:0;width:100vw;margin-left:calc(50% - 50vw);display:grid}.system-site .state-grid article{width:var(--half-cell);min-width:var(--half-cell);max-width:var(--half-cell);height:var(--half-cell);min-height:var(--half-cell);border:1px solid var(--line);padding:22px}.system-site .state-grid article small{margin-bottom:34px}.system-site .state-button{padding:0 11px}.system-site .proof-grid button{border:1px solid var(--line);min-height:560px}.system-site .proof-grid img{aspect-ratio:1;object-fit:cover;width:100%;height:418px}.system-site .sample-cards{padding:0}.system-site .sample-cards .card{padding:33px}.system-site .sample-cards .card img{aspect-ratio:auto;width:354px;height:280px}.system-site .hero-stats{grid-template-columns:repeat(4,420px);width:1680px;left:50%;right:auto;transform:translate(-50%)}.system-site .hero-stats span{border-right:1px solid var(--line);width:420px;padding-left:33px}.system-site .hero-stats{height:var(--quarter-cell)}.system-site .hero-stats span{height:var(--quarter-cell);padding-top:18px;padding-bottom:14px}.system-site .hero-stats b{margin-bottom:6px;font-size:28px}.system-site .component-table article{min-height:var(--quarter-cell);height:var(--quarter-cell)}.system-site .sample-nav{height:var(--quarter-cell)}@media (width<=1679px){.system-site .hero-stats{grid-template-columns:repeat(auto-fit,420px);justify-content:center;width:100vw;margin-top:74px;margin-left:calc(50% - 50vw);position:static;left:auto;right:auto;transform:none}.system-hero{padding-bottom:0}}@media (width<=500px){.system-site .value-grid,.system-site .principle-grid,.system-site .breakpoint-grid,.system-site .state-grid,.system-site .proof-grid,.system-site .sample-cards{justify-content:start}.system-site .state-grid{grid-template-columns:repeat(2,var(--half-cell))}.system-site .hero-stats{justify-content:start}.system-site .brief-section{padding-left:33px;padding-right:33px}}.system-site .system-hero{box-sizing:border-box;grid-template-rows:630px 105px;grid-template-columns:repeat(4,420px);column-gap:0;width:1680px;max-width:100%;min-height:735px;margin:0 auto;padding:0;display:grid;overflow:hidden}.system-site .system-hero>div:first-child{flex-direction:column;grid-area:1/1/auto/span 2;justify-content:center;padding:84px 33px;display:flex}.system-site .system-hero h1{max-width:774px;margin:42px 0 0;font-size:82px;line-height:.94}.system-site .hero-side{border-left:1px solid var(--line);flex-direction:column;grid-area:1/3/auto/span 2;justify-content:center;align-self:stretch;width:840px;padding:84px 33px;display:flex}.system-site .hero-side p,.system-site .hero-side button{align-self:flex-start;width:354px}.system-site .hero-side p{font-size:20px;line-height:1.55}.system-site .hero-stats{grid-area:2/1/auto/-1;height:105px;display:grid;grid-template-columns:repeat(4,420px)!important;width:1680px!important;margin:0!important;position:static!important;bottom:auto!important;left:auto!important;right:auto!important;transform:none!important}@media (width<=1679px){.system-site .system-hero{grid-template-columns:repeat(3,420px);width:1260px}.system-site .system-hero>div:first-child{grid-column:1/span 2}.system-site .system-hero h1{font-size:78px}.system-site .hero-side{grid-column:3;width:420px}.system-site .hero-stats{grid-template-columns:repeat(3,420px)!important;width:1260px!important}.system-site .hero-stats span:nth-child(4){display:none}}@media (width<=1259px){.system-site .system-hero{grid-template-columns:repeat(2,420px);width:840px}.system-site .system-hero>div:first-child{grid-column:1}.system-site .system-hero h1{font-size:64px}.system-site .hero-side{grid-column:2;width:420px}.system-site .hero-stats{grid-template-columns:repeat(2,420px)!important;width:840px!important}.system-site .hero-stats span:nth-child(3){display:none}}@media (width<=839px){.system-site .system-hero{grid-template-rows:auto auto auto;grid-template-columns:420px;width:420px;min-height:0;overflow:visible}.system-site .system-hero>div:first-child{grid-area:1/1;min-height:420px;padding:66px 33px}.system-site .system-hero h1{font-size:58px}.system-site .hero-side{border-left:0;border-top:1px solid var(--line);grid-area:2/1;width:420px;min-height:420px;padding:66px 33px}.system-site .hero-stats{grid-area:3/1;grid-template-rows:repeat(4,105px);height:420px;grid-template-columns:420px!important;width:420px!important}.system-site .hero-stats span:nth-child(3),.system-site .hero-stats span:nth-child(4){display:block}.system-site .hero-stats span{width:420px}}.feature-field{background:var(--section);width:100%}.feature{box-sizing:border-box;grid-template-columns:840px 420px;align-items:stretch;gap:0;width:1260px;max-width:100%;min-height:630px;margin:0 auto;padding:0;display:grid}.feature img{object-fit:cover;width:840px;height:630px;display:block}.feature>div{box-sizing:border-box;flex-direction:column;justify-content:center;width:420px;height:630px;padding:66px;display:flex}.feature h2{margin:36px 0;font-size:42px;line-height:1.18}.feature p{margin-bottom:46px}@media (width<=1259px){.feature{grid-template-columns:420px 420px;width:840px;min-height:420px}.feature img{width:420px;height:420px}.feature>div{width:420px;height:420px;padding:44px}.feature h2{margin:24px 0;font-size:34px}.feature p{margin-bottom:28px;font-size:15px;line-height:1.5}}@media (width<=839px){.feature{grid-template-rows:420px 420px;grid-template-columns:420px;width:420px}.feature img{width:420px;height:420px}.feature>div{width:420px;height:420px;padding:44px 33px}}.archive{box-sizing:border-box;grid-template-columns:840px 840px;align-items:stretch;width:1680px;max-width:100%;min-height:420px;margin:0 auto;padding:0;display:grid}.archive>div,.archive>p{box-sizing:border-box;flex-direction:column;justify-content:center;margin:0;padding:66px;display:flex}.archive>p{width:840px;max-width:none}.archive h1{margin:28px 0 54px}.stories,.related,.saved-grid{padding-left:0;padding-right:0}.stories>.section-head,.related>small,.related>h2{box-sizing:border-box;width:1260px;max-width:100%;margin-left:auto;margin-right:auto}.grid{grid-template-columns:repeat(auto-fit,420px);justify-content:center;gap:0;display:grid}.grid .card{box-sizing:border-box;border:1px solid var(--line);background:#232323;width:420px;min-width:420px;max-width:420px;min-height:630px;padding:0 33px 33px}.grid .card img{aspect-ratio:auto;object-fit:cover;width:354px;height:420px}.grid .card small{margin-top:24px}.grid .card h3{font-size:22px}.grid .card p{font-size:14px}.intro{box-sizing:border-box;grid-template-columns:210px 630px 420px;gap:0;width:1260px;max-width:100%;margin:0 auto;display:grid}.intro>aside,.intro>div{box-sizing:border-box;padding:33px}.intro>div:nth-child(2){width:630px}.intro .note{width:420px;margin:0}.article-head+.utility+article,article{padding-left:0;padding-right:0}.closing{box-sizing:border-box;grid-template-columns:420px 840px;gap:0;width:1260px;max-width:100%;margin:84px auto;display:grid}.closing>h2,.closing>div{box-sizing:border-box;padding:33px}.article-image{object-fit:cover;width:1260px;max-width:100%;height:630px;margin:84px auto;display:block}blockquote{box-sizing:border-box;width:840px;max-width:100%;margin:0 auto;padding:105px}@media (width<=1679px){.archive{grid-template-columns:840px 420px;width:1260px}.archive>p{width:420px}}@media (width<=1259px){.archive{grid-template-columns:420px 420px;width:840px}.archive>div,.archive>p{width:420px;padding:44px}.archive h1{font-size:64px}.intro{grid-template-columns:210px 630px;width:840px}.intro .note{grid-column:2;width:630px;min-height:210px}.closing{grid-template-columns:420px 420px;width:840px}.article-image{width:840px;height:420px}blockquote{width:840px}}@media (width<=839px){.archive{grid-template-rows:420px 420px;grid-template-columns:420px;width:420px}.archive>div,.archive>p{width:420px;height:420px;padding:66px 33px}.intro{grid-template-columns:420px;width:420px;display:grid}.intro>aside,.intro>div,.intro>div:nth-child(2),.intro .note{grid-column:1;width:420px;padding:33px}.intro>aside:first-child{height:105px;margin:0}.intro .note{min-height:210px}.closing{grid-template-columns:420px;width:420px;margin:42px auto}.closing>h2,.closing>div{width:420px;padding:33px}.article-image{width:420px;height:420px;margin:42px auto}blockquote{width:420px;padding:66px 33px}.stories,.related,.saved-grid{padding-top:54px;padding-bottom:54px}.stories>.section-head,.related>small,.related>h2{width:354px}.grid .card{width:420px;min-width:420px;max-width:420px}}.system-site .system-hero{grid-template-columns:repeat(3,420px);width:1260px}.system-site .system-hero>div:first-child{grid-column:1/span 2}.system-site .hero-side{grid-column:3;width:420px}.system-site .hero-stats{grid-template-columns:repeat(3,420px)!important;width:1260px!important}.system-site .hero-stats span:nth-child(4){display:none}.system-site .value-grid,.system-site .principle-grid,.system-site .breakpoint-grid,.system-site .proof-grid,.system-site .sample-cards,.system-site .state-grid{justify-content:start;width:1260px;max-width:100%;margin-left:auto;margin-right:auto}.system-site .brief-heading,.system-site .cell-demo,.system-site .dimension-grid,.system-site .token-layout,.system-site .component-table,.system-site .component-stage,.system-site .behavior-list{width:1260px;max-width:100%;margin-left:auto;margin-right:auto}.archive{grid-template-columns:840px 420px;width:1260px}.archive>p{width:420px}@media (width<=1259px){.system-site .system-hero{grid-template-columns:420px 420px;width:840px}.system-site .system-hero>div:first-child{grid-column:1}.system-site .system-hero h1{font-size:64px}.system-site .hero-side{grid-column:2;width:420px}.system-site .hero-stats{grid-template-columns:repeat(2,420px)!important;width:840px!important}.system-site .hero-stats span:nth-child(3){display:none}.archive{grid-template-columns:420px 420px;width:840px}.archive>div,.archive>p{width:420px;padding:44px}.archive h1{font-size:64px}.system-site .value-grid,.system-site .principle-grid,.system-site .breakpoint-grid,.system-site .proof-grid,.system-site .sample-cards,.system-site .state-grid,.system-site .brief-heading,.system-site .cell-demo,.system-site .dimension-grid,.system-site .token-layout,.system-site .component-table,.system-site .component-stage,.system-site .behavior-list{width:840px}}@media (width<=839px){.system-site .system-hero{grid-template-rows:auto auto auto;grid-template-columns:420px;width:420px;min-height:0;overflow:visible}.system-site .system-hero>div:first-child{grid-area:1/1;min-height:420px;padding:66px 33px}.system-site .system-hero h1{font-size:58px}.system-site .hero-side{border-left:0;border-top:1px solid var(--line);grid-area:2/1;width:420px;min-height:420px;padding:66px 33px}.system-site .hero-stats{grid-area:3/1;grid-template-rows:repeat(4,105px);height:420px;grid-template-columns:420px!important;width:420px!important}.system-site .hero-stats span:nth-child(3),.system-site .hero-stats span:nth-child(4){display:block}.system-site .hero-stats span{width:420px}.archive{grid-template-rows:420px 420px;grid-template-columns:420px;width:420px}.archive>div,.archive>p{width:420px;height:420px;padding:66px 33px}.system-site .value-grid,.system-site .principle-grid,.system-site .breakpoint-grid,.system-site .proof-grid,.system-site .sample-cards,.system-site .state-grid,.system-site .brief-heading,.system-site .cell-demo,.system-site .dimension-grid,.system-site .token-layout,.system-site .component-table,.system-site .component-stage,.system-site .behavior-list{width:420px;max-width:none}}.filters,.feature-field,.stories,.saved-grid,.related,footer,.principles,.library{background:var(--canvas)}.filters{padding:0}.filters>.filters-inner{box-sizing:border-box;width:1260px;max-width:100%;margin:0 auto;padding:54px 33px 70px;display:block}.filters-inner>div{flex-wrap:wrap;gap:20px;margin-top:34px;display:flex}.section-head{box-sizing:border-box;padding:0 33px 28px}.stories{padding-top:70px}.system-footer{background:var(--canvas)}@media (width<=1259px){.filters>.filters-inner{width:840px}}@media (width<=839px){.filters>.filters-inner{width:420px;max-width:none;padding:42px 33px 54px}.filters-inner>div{gap:8px}.section-head{padding-left:33px;padding-right:33px}}.system-site .proof-grid{width:var(--field-max);justify-content:center;align-items:flex-start;gap:var(--space-gap);flex-wrap:wrap;max-width:100%;margin-left:auto;margin-right:auto;display:flex}.system-site .proof-grid button{box-sizing:border-box;border:1px solid var(--line);background:var(--section);width:420px;height:630px;min-height:630px;box-shadow:none;grid-template-rows:420px auto 1fr;margin:0;display:grid;overflow:hidden;padding:0!important}.system-site .proof-grid img{box-sizing:border-box;object-fit:cover;border:0;width:100%;height:420px;margin:0;padding:0;display:block}.system-site .proof-grid small{align-self:end;margin:0;padding:22px 22px 0}.system-site .proof-grid h3{align-self:end;margin:0;padding:12px 22px 22px;font-size:25px}@media (width<=839px){.system-site .proof-grid{width:420px;max-width:none}}.related>small,.related>h2{box-sizing:border-box;width:862px;max-width:100%;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px}.related>small{display:block}.related>.grid{width:var(--field-max);justify-content:center;align-items:flex-start;gap:var(--space-gap);flex-wrap:wrap;max-width:100%;margin-left:auto;margin-right:auto;display:flex}@media (width<=839px){.related>small,.related>h2{width:420px;max-width:none;padding-left:33px;padding-right:33px}.related>.grid{width:420px;max-width:none}}.product-nav{align-items:center;gap:28px;display:flex}.product-nav button{font-size:10px;font-weight:700}.filter-label{justify-content:space-between;align-items:center;gap:22px!important;margin:0!important;display:flex!important}.filter-label input{box-sizing:border-box;border:1px solid var(--line);width:420px;height:44px;color:var(--primary,#f5f5f3);font:inherit;background:0 0;border-radius:0;outline:none;padding:0 16px;font-size:10px;font-weight:700}.filter-label input::placeholder{color:var(--muted)}.filter-label input:focus{border-color:var(--accent);outline:1px solid var(--accent)}.load-row{box-sizing:border-box;text-align:center;width:1260px;max-width:100%;margin:0 auto;padding:54px 33px 0}.load-row button,.empty-state button{border:1px solid var(--accent);background:var(--accent);color:#171717;cursor:pointer;height:44px;padding:0 20px;font-size:10px;font-weight:800}.empty-state{box-sizing:border-box;border:1px solid var(--line);flex-direction:column;justify-content:center;align-items:flex-start;width:420px;min-height:420px;margin:0 auto;padding:66px 33px;display:flex}.empty-state h2{margin:28px 0 20px;font-size:34px;line-height:1.05}.empty-state p{color:var(--muted);margin-bottom:34px;line-height:1.6}.saved-grid>.empty-state{margin-top:30px;margin-bottom:30px}.article-head h1{max-width:1040px}@media (width<=839px){.product-nav{gap:12px}.product-nav button{font-size:9px}.filter-label{display:block!important}.filter-label input{width:354px;margin-top:22px;display:block}.load-row{width:420px;padding-left:33px;padding-right:33px}.empty-state{width:354px;min-height:354px}.article-head h1{font-size:44px}}.track i{transition:width .12s linear}.save-confirmation{z-index:20;box-sizing:border-box;background:var(--accent);color:#171717;opacity:0;pointer-events:none;align-items:center;width:420px;max-width:calc(100vw - 44px);min-height:84px;padding:0 22px;font-size:10px;font-weight:800;transition:transform .24s,opacity .24s;display:flex;position:fixed;bottom:22px;right:22px;transform:translateY(calc(100% + 44px))}.save-confirmation.visible{opacity:1;transform:translateY(0)}.stories .grid .card,.saved-grid .grid .card{animation:.28s both card-in}@keyframes card-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.filters button{transition:background-color .18s,color .18s,border-color .18s}.product-nav button:hover,.text-link:hover{color:var(--accent)}@media (width<=600px){nav{padding-left:18px;padding-right:18px}.product-nav .index-link{display:none}.save-confirmation{max-width:calc(100vw - 22px);bottom:11px;right:11px}}@media (prefers-reduced-motion:reduce){.track i,.save-confirmation,.filters button{transition:none}.stories .grid .card,.saved-grid .grid .card{animation:none}}a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.card:focus-visible{outline-offset:-4px}.not-found{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:flex-start;width:420px;min-height:100vh;margin:0 auto;padding:105px 33px;display:flex}.not-found h1{margin:42px 0 28px;font-size:58px;line-height:.95}.not-found p{color:var(--muted);margin-bottom:42px;font-size:18px;line-height:1.6}.not-found button{border:1px solid var(--accent);background:var(--accent);color:#171717;cursor:pointer;height:54px;padding:0 20px;font-size:10px;font-weight:800}.product-site{--surface-canvas:#1e1e1e;--surface-module:#232323;--surface-inverse:#f3eee1;--content-primary:#f5f5f3;--content-secondary:#aeaea8;--content-accent:#b6f36b;--content-accent-on-light:#315d13;--accent-pink:#ff4085;--accent-blue:#2bb7ff;--accent-yellow:#ffd329}.product-site .primary{justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.product-hero>div:first-child{background:var(--surface-inverse);color:#171717}.product-hero>div:first-child small{color:#315d13;letter-spacing:.015em;background:#dce8c8;align-items:center;width:max-content;min-height:28px;padding:0 10px;font-size:12px;display:inline-flex}.product-hero .hero-side{background:#202020}.product-hero .hero-side p{color:#d8d8d2}.product-hero .hero-side .primary{border-color:var(--content-accent);background:var(--content-accent);color:#171717;letter-spacing:.015em;align-self:stretch;font-size:12px;font-weight:900}.package-grid{flex-wrap:wrap;justify-content:center;gap:22px;width:1260px;max-width:100%;margin:0 auto;display:flex}.package-grid article{background:var(--surface-module);border:1px solid var(--line);flex-direction:column;width:420px;height:420px;padding:44px;display:flex}.package-grid h3{margin:auto 0 24px;font-size:34px;line-height:1.05}.package-grid p{color:var(--content-secondary);line-height:1.6}.theme-package{background:#171717}.theme-grid,.expression-grid{grid-template-columns:repeat(3,420px);width:1260px;max-width:100%;margin:0 auto;display:grid}.theme-grid article{border:1px solid var(--line);flex-direction:column;width:420px;height:420px;padding:44px;display:flex;position:relative;overflow:hidden}.theme-grid h3{margin:auto 0 18px;font-size:40px}.theme-grid p{max-width:260px;line-height:1.5}.theme-grid i{background:var(--content-accent);width:105px;height:210px;position:absolute;top:0;right:0}.theme-dark{color:#f5f5f3;background:#1e1e1e}.theme-light{color:#171717;background:#f3eee1}.theme-light small{color:#4b761f}.theme-light p{color:#4b4b47}.theme-light i{background:#4b8d1e}.theme-contrast{color:#fff;background:#000;border-color:#fff!important}.theme-contrast i{background:#b8ff38}.expression-package{background:var(--surface-inverse);color:#171717}.expression-package .brief-heading p{color:#4b4b47}.expression-package small{color:var(--content-accent-on-light)}.expression-grid article{border:1px solid #c7c0b2;width:420px;height:420px;padding:44px;position:relative;overflow:hidden}.expression-grid small{color:var(--content-accent-on-light)}.expression-grid b{margin:74px 0 32px;font-size:86px;display:block}.expression-grid p{max-width:280px;line-height:1.55}.expression-grid i{display:block;position:absolute}.expression-grid .playful i:first-of-type{background:var(--accent-pink);border-radius:50%;width:90px;height:90px;top:56px;right:38px}.expression-grid .playful i:nth-of-type(2){background:var(--accent-blue);width:38px;height:150px;top:34px;right:118px;transform:rotate(6deg)}.expression-grid .peculiar i:first-of-type{background:var(--accent-yellow);border-radius:50%;width:105px;height:105px;top:20px;right:16px}.expression-grid .peculiar i:nth-of-type(2){background:var(--accent-blue);width:52px;height:210px;top:0;right:106px;transform:rotate(12deg)}.expression-grid .peculiar i:nth-of-type(3){background:var(--accent-pink);border-radius:50%;width:126px;height:126px;top:92px;right:72px}.product-examples{background:#111}.studio-demo{grid-template-columns:420px 840px;width:1260px;max-width:100%;min-height:840px;margin:0 auto 22px;display:grid}.studio-copy{background:var(--content-accent);color:#171717;flex-direction:column;width:420px;height:840px;padding:66px 44px;display:flex}.studio-copy small{color:#171717}.studio-copy h3{margin:84px 0 34px;font-size:48px;line-height:1.02}.studio-copy p{font-size:17px;line-height:1.65}.studio-copy a{text-align:center;border:1px solid #171717;margin-top:auto;padding:18px 20px;font-size:11px;font-weight:800}.studio-images{grid-template-rows:420px 420px;grid-template-columns:420px 420px;width:840px;height:840px;display:grid;overflow:hidden}.studio-images img{object-fit:cover;width:420px;height:420px;display:block}.studio-images img:last-child{grid-column:1/-1;width:840px}.secondary-demo{box-sizing:border-box;border:1px solid var(--line);background:var(--surface-module);justify-content:space-between;align-items:center;width:1260px;max-width:100%;min-height:210px;margin:0 auto;padding:44px;display:flex}.secondary-demo h3{margin:18px 0;font-size:28px}.secondary-demo p{color:var(--content-secondary)}.secondary-demo button{border:1px solid var(--content-accent);cursor:pointer;background:0 0;height:54px;padding:0 24px;font-size:11px;font-weight:800}.product-site .release div a{justify-content:center;align-items:center;display:inline-flex}@media (width<=1347px){.package-grid{width:862px}.theme-grid,.expression-grid{grid-template-columns:repeat(2,420px);gap:22px;width:862px}.theme-grid article:last-child,.expression-grid article:last-child{grid-column:1}.studio-demo{grid-template-columns:420px 420px;gap:22px;width:862px}.studio-copy{height:840px}.studio-images{grid-template-rows:repeat(2,420px);grid-template-columns:420px;width:420px;height:840px}.studio-images img{width:420px}.studio-images img:last-child{display:none}.secondary-demo{width:862px}}@media (width<=949px){.package-grid,.theme-grid,.expression-grid,.studio-demo,.secondary-demo{width:420px;max-width:none;margin-left:0;margin-right:0;position:relative;left:50%;transform:translate(-50%)}.package-grid{gap:22px}.theme-grid,.expression-grid,.studio-demo{display:block}.theme-grid article,.expression-grid article{width:420px;margin-bottom:22px}.studio-copy{width:420px;height:630px;margin-bottom:22px}.studio-images{width:420px;height:auto;display:block}.studio-images img,.studio-images img:last-child{width:420px;height:420px;margin-bottom:22px;display:block}.secondary-demo{padding:44px 33px;display:block}.secondary-demo button{width:100%;margin-top:34px}.product-site .release div a{width:100%}}@media (width<=500px){.system-site .brief-section{padding-left:0;padding-right:0}.system-site .brief-heading{box-sizing:border-box;padding-left:33px;padding-right:33px}}.skip-link{z-index:100;background:var(--accent);color:#171717;padding:14px 18px;font-size:11px;font-weight:900;text-decoration:none;position:fixed;top:11px;left:11px;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}#main-content:focus{outline:0}.brief-section[id],.release[id]{scroll-margin-top:105px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=419px){.system-site{--cell:100vw}.system-site .system-hero{grid-template-columns:100vw;width:100vw}.system-site .system-hero>div:first-child,.system-site .hero-side{width:100vw}.system-site .hero-side p,.system-site .hero-side .primary{width:calc(100vw - 66px)}.system-site .hero-stats{grid-template-columns:100vw!important;width:100vw!important}.system-site .hero-stats span{width:100vw}.system-site .hero-stats span b{width:auto}.system-site .brief-heading,.system-site .cell-demo,.system-site .dimension-grid,.system-site .token-layout,.system-site .component-table,.system-site .component-stage,.system-site .behavior-list,.system-site .value-grid,.system-site .principle-grid,.system-site .breakpoint-grid,.system-site .proof-grid,.system-site .sample-cards,.system-site .state-grid{width:100vw;max-width:none}.system-site .value-grid>*,.system-site .principle-grid>*,.system-site .breakpoint-grid>*,.system-site .proof-grid>*,.system-site .sample-cards>*{width:100vw;min-width:100vw;max-width:100vw}.system-site .cell{width:100vw!important}.system-site .cell-unit{flex-basis:100vw;width:100vw}.package-grid,.theme-grid,.expression-grid,.studio-demo,.secondary-demo{width:100vw;left:auto;transform:none}.package-grid article,.theme-grid article,.expression-grid article,.studio-copy,.studio-images,.studio-images img,.studio-images img:last-child,.secondary-demo{width:100vw}}.responsive-proof-section{background:#151515}.responsive-proof{width:1260px;max-width:100%;margin:0 auto}.proof-controls{background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(6,1fr);gap:1px;margin-bottom:22px;display:grid}.proof-controls button{box-sizing:border-box;min-width:0;height:105px;color:var(--content-primary);text-align:left;cursor:pointer;background:#1e1e1e;border:0;padding:20px 16px}.proof-controls button b{font-size:25px;line-height:1;display:block}.proof-controls button span{color:var(--content-secondary);letter-spacing:.06em;margin-top:12px;font-size:9px;font-weight:800;display:block}.proof-controls button[aria-pressed=true]{background:var(--content-accent);color:#171717}.proof-controls button[aria-pressed=true] span{color:#315d13}.proof-viewport{box-sizing:border-box;border:1px solid var(--line);background:#1b1b1b;justify-content:center;align-items:flex-start;width:100%;height:675px;display:flex;overflow:hidden}.proof-stage{transform-origin:top;background:var(--surface-inverse);color:#171717;flex:none;transition:width .28s,transform .28s;position:relative}.proof-mast{box-sizing:border-box;border-bottom:1px solid #bdb7ab;justify-content:space-between;align-items:flex-start;height:105px;padding:22px;display:flex}.proof-mast small{color:#315d13}.proof-mast b{font-size:42px;line-height:.85}.proof-composition{justify-content:center;height:420px;display:grid}.proof-composition article{box-sizing:border-box;border-right:1px solid #bdb7ab;flex-direction:column;justify-content:space-between;width:100%;height:420px;padding:22px;display:flex;position:relative;overflow:hidden}.proof-composition article:first-child{border-left:1px solid #bdb7ab}.proof-composition span{font-size:10px;font-weight:800}.proof-composition strong{z-index:1;max-width:280px;font-size:44px;line-height:.92;position:relative}.proof-composition i{background:var(--accent-pink);width:105px;height:210px;position:absolute;top:66px;right:22px}.proof-composition article:nth-child(2) i{background:var(--accent-blue);width:210px;height:105px;top:210px}.proof-composition article:nth-child(3) i{background:var(--accent-yellow);border-radius:50%;width:105px;height:105px;top:105px}.proof-105 article,.proof-210 article{padding:11px}.proof-105 strong,.proof-210 strong{writing-mode:vertical-rl;font-size:18px}.proof-105 i,.proof-210 i{width:52px;height:105px;top:auto;bottom:0;right:0}.proof-caption{box-sizing:border-box;border-top:1px solid #bdb7ab;justify-content:space-between;height:105px;padding:22px;font-size:10px;font-weight:800;display:flex}.proof-readout{box-sizing:border-box;border:1px solid var(--line);min-height:105px;color:var(--content-secondary);text-transform:uppercase;border-top:0;margin:0;padding:28px 22px;font-size:14px}.proof-readout b{color:var(--content-accent);margin-right:18px;font-size:25px}:is(.proof-viewport:has(.proof-105) .proof-caption,.proof-viewport:has(.proof-210) .proof-caption){display:none}@media (width<=1347px){.responsive-proof{width:862px}.proof-controls{grid-template-columns:repeat(3,1fr)}.proof-viewport{height:610px}.proof-stage{transform-origin:top}}@media (width<=949px){.responsive-proof{width:420px;max-width:none;position:relative;left:50%;transform:translate(-50%)}.proof-controls{grid-template-columns:repeat(2,1fr)}.proof-controls button{height:84px}.proof-viewport{height:460px}.proof-readout{padding-left:22px;padding-right:22px}.proof-readout b{margin:0 0 8px;display:block}}@media (width<=419px){.responsive-proof{width:100vw;left:auto;transform:none}.proof-controls{margin-left:22px;margin-right:22px}.proof-viewport,.proof-readout{width:100vw}}