@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-family:Manrope,sans-serif;color:#20211e;background:#f4f3ee;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;font-weight:400;--ink:#20211e;--muted:#777970;--line:#deded6;--lime:#ddf36a;--green:#32745d;--paper:#fbfaf6;--mono:"DM Mono",monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;min-width:320px}.shell{width:min(1160px,calc(100% - 72px));margin:0 auto}a{color:inherit;text-decoration:none}button,input{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #6271dc;outline-offset:3px}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.8px}.wordmark-dot{color:#60825a;margin-left:-9px}.mark{width:27px;height:27px;background:var(--lime);border-radius:9px;display:grid;place-items:center}.mark svg{width:17px;fill:none;stroke:#303b1a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.top-links{display:flex;align-items:center;gap:34px;font-size:12px;font-weight:700}.top-links>a:not(.github-link){color:#62645f}.top-links>a>span{font:10px var(--mono);color:#888;margin-left:3px}.github-link{display:flex;align-items:center;gap:7px;background:var(--ink);color:#fff;border-radius:5px;padding:11px 15px}.github-link svg,.button svg,.text-link svg,.pattern-foot svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.hero{height:520px;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center}.hero-copy{padding:0 0 8px 6px;z-index:2}.eyebrow{font:10px var(--mono);letter-spacing:1.35px;text-transform:uppercase;color:#777970}.hero-eyebrow{display:flex;gap:9px;align-items:center;margin-bottom:23px}.live-dot,.mini-dot{width:7px;height:7px;border-radius:50%;background:#6aa87a}.hero h1{font-size:clamp(56px,7vw,88px);line-height:.98;letter-spacing:-7px;margin:0;font-weight:700}.hero h1 span{font-weight:400;color:#84915f}.hero-text{max-width:370px;font-size:15px;line-height:1.8;color:#73766d;margin:23px 0}.hero-actions{display:flex;align-items:center;gap:17px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:5px;padding:13px 16px;font-size:11px;font-weight:700;cursor:pointer;transition:transform .18s,background .18s}.button:hover{transform:translateY(-2px)}.button--dark{background:var(--ink);color:#fff}.button--lime{background:var(--lime);color:#25291d}.button--quiet{background:#ecebe5;color:#333}.no-framework{font:9px var(--mono);color:#888980}.hero-art{height:410px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #d9d9ce;border-radius:50%;transform:rotate(-20deg)}.orbit--one{width:435px;height:255px}.orbit--two{width:365px;height:335px;transform:rotate(37deg)}.hero-card{position:relative;z-index:1;width:326px;background:#fffefa;border:1px solid #e8e6db;box-shadow:0 20px 70px #3e422010;border-radius:8px;padding:20px 21px 14px;transform:rotate(3deg)}.card-kicker,.hero-card-foot{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);color:#909188;letter-spacing:.4px}.three-dots{letter-spacing:2px}.hero-card-title{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:24px;letter-spacing:-1.1px;padding:26px 0 17px}.hero-card-title span{font-size:19px;color:#879461}.task-line{height:42px;border-top:1px solid #efeee7;display:flex;align-items:center;gap:11px;font-size:10px;color:#55574f}.task-check{width:14px;height:14px;border-radius:50%;background:#dff0b5;color:#3b6a4a;display:grid;place-items:center;font-size:9px}.task-check--empty{background:transparent;border:1px solid #d7d8cf}.task-time{margin-left:auto;font:9px var(--mono);color:#9b9c92}.hero-card-foot{border-top:1px solid #efeee7;padding-top:13px;font-size:8px}.progress{height:4px;width:74px;background:#eeeee7;border-radius:4px}.progress i{display:block;width:33%;height:4px;background:#99b36a;border-radius:4px}.hero-card-foot b{font-weight:400;color:#43463e}.float-note{position:absolute;background:#fffefa;border:1px solid #ecebe4;border-radius:4px;padding:10px 12px;box-shadow:0 8px 24px #20211e0b;font:9px var(--mono);letter-spacing:.1px;z-index:2}.float-note--top{top:34px;right:4px;transform:rotate(4deg);display:flex;gap:8px;align-items:center}.float-note--bottom{bottom:41px;left:7px;transform:rotate(-4deg);display:flex;gap:8px;align-items:center}.mini-dot--lime{background:#c1dc62}.mini-swatch{width:10px;height:10px;background:#bbb0ea;border-radius:3px}.art-sticker{position:absolute;right:22px;bottom:57px;width:64px;height:64px;border-radius:50%;background:var(--lime);display:grid;place-content:center;text-align:center;font-size:21px;line-height:1;transform:rotate(11deg);z-index:2}.art-sticker span{font:7px var(--mono);line-height:1.4;text-transform:uppercase;letter-spacing:.4px}.hero-side-note{position:absolute;right:0;bottom:25px;color:#94958c;font:8px/1.8 var(--mono);letter-spacing:.7px;text-align:right}.hero-side-note span{color:#627155;font-size:15px}.ticker{height:47px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.ticker-inner{height:100%;width:min(1160px,calc(100% - 72px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;white-space:nowrap}.ticker-inner span{font:9px var(--mono);letter-spacing:1.15px;color:#74766e}.ticker-inner i{width:4px;height:4px;background:#a6af88;border-radius:50%}.library{padding-top:86px;padding-bottom:94px}.section-heading{display:flex;align-items:end;justify-content:space-between}.section-heading .eyebrow{display:block;margin-bottom:12px}.section-heading h2,.components-copy h2{font-size:41px;line-height:1.08;letter-spacing:-2px;font-weight:600;margin:0}.result-count{font:9px var(--mono);color:#898a81;margin-bottom:6px}.library-controls{margin:27px 0 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.filter-tabs{display:flex;gap:24px}.filter-tab{height:43px;border:0;border-bottom:2px solid transparent;padding:0 0 1px;background:none;color:#7c7e75;font-size:11px;cursor:pointer}.filter-tab span{font:8px var(--mono);margin-left:5px;color:#9b9c93}.filter-tab.is-active{border-color:#516247;color:#20211e;font-weight:700}.search-input{height:34px;display:flex;align-items:center;gap:8px;border:1px solid #deded6;border-radius:4px;background:#fbfaf6;padding:0 9px;margin-bottom:5px;color:#797b72}.search-input>span{font-size:19px;line-height:1;transform:rotate(-20deg)}.search-input input{border:0;outline:none!important;background:transparent;width:130px;font-size:10px;color:var(--ink)}.search-input input::placeholder{color:#96978e}.search-input kbd{font:8px var(--mono);color:#aaa}.pattern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.pattern-card{min-height:276px;border:1px solid #e4e3db;border-radius:6px;background:#fbfaf6;padding:14px 15px 0;display:flex;flex-direction:column;animation:arrive .4s both;animation-delay:var(--delay)}@keyframes arrive{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.pattern-card--blue{--tint:#e8edfa;--accent:#7183c3}.pattern-card--lime{--tint:#f0f1db;--accent:#929d52}.pattern-card--peach{--tint:#f4e8dc;--accent:#bb7a59}.pattern-card--lilac{--tint:#ede9f5;--accent:#8e7cb2}.pattern-card--mint{--tint:#e5eee5;--accent:#5b8a6c}.pattern-card--pink{--tint:#f2e7e5;--accent:#af7774}.pattern-top{display:flex;justify-content:space-between;align-items:center}.tag{display:inline-flex;align-items:center;border-radius:3px;padding:5px 7px;font:8px var(--mono);letter-spacing:.2px}.tag--ink{background:#eeede7;color:#5e6058}.tag--green{background:#e3eddf;color:#437052}.tag--lilac{background:#ece7f6;color:#70618e}.copy-button{border:0;background:transparent;padding:5px;color:#8a8c83;font:9px var(--mono);cursor:pointer}.copy-button:hover{color:#344c3b}.pattern-info{padding:16px 0 11px}.pattern-info h3{font-size:15px;letter-spacing:-.4px;margin:0 0 5px;font-weight:700}.pattern-info p{font-size:10px;color:#84867d;margin:0}.code-window{background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);border-radius:4px;margin-top:auto;min-height:106px;padding:9px 10px}.code-top{display:flex;justify-content:space-between;align-items:center;color:#6e7068}.code-language{font:8px var(--mono)}.code-language i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:4px}.code-dots{letter-spacing:3px;font:11px var(--mono)}.code-window pre{white-space:pre-wrap;overflow:hidden;margin:10px 0 0;font:9px/1.7 var(--mono);color:#43453f}.pattern-foot{height:35px;display:flex;align-items:center;gap:8px;color:#82847b;font:8px var(--mono)}.pattern-index{color:#b5b6ad}.pattern-foot svg{width:14px;margin-left:auto;color:#81867a}.empty-state{padding:45px;text-align:center;border:1px dashed #d5d6cd;border-radius:6px;color:#6d7067}.empty-state>span{font-size:24px}.empty-state h3{font-size:16px;color:#30312d}.empty-state p{font-size:12px}.components-section{background:#eae9e2;border-top:1px solid #e1e0d8;border-bottom:1px solid #e1e0d8;padding:79px 0 83px}.components-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}.components-copy .eyebrow{display:block;margin-bottom:15px}.components-copy h2{font-size:46px;line-height:1.02}.components-copy p{max-width:270px;color:#777971;font-size:12px;line-height:1.8;margin:17px 0 20px}.text-link{display:inline-flex;gap:7px;align-items:center;font-size:10px;font-weight:700;border-bottom:1px solid #c1c2b8;padding-bottom:4px}.text-link svg{width:14px}.component-board{background:#fbfaf6;border:1px solid #deded6;border-radius:6px;padding:14px 18px 5px;box-shadow:0 12px 32px #20211e08}.board-top{height:29px;display:flex;justify-content:space-between;align-items:flex-start;font:8px var(--mono);letter-spacing:.8px;color:#96978e}.board-star{color:#92a161;font-size:13px}.component-row{display:grid;grid-template-columns:105px 1fr;gap:15px;align-items:center;min-height:81px;border-top:1px solid #eeede7}.component-label{font:8px var(--mono);color:#92938a;letter-spacing:.5px}.demo-items{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.demo-items .button{font-size:8px;padding:9px 10px;gap:6px}.demo-items .button svg{width:12px}.demo-items .tag{font-size:8px}.component-row--last{min-height:86px}.empty-demo{display:flex;align-items:center;gap:11px;background:#f4f3ee;border-radius:4px;padding:10px}.empty-demo>span{width:26px;height:26px;display:grid;place-items:center;background:#e7edcf;border-radius:50%;color:#75884c}.empty-demo div{display:grid;gap:3px}.empty-demo b{font-size:9px}.empty-demo small{font-size:8px;color:#85877e}.empty-demo button{margin-left:auto;border:1px solid #ddded5;border-radius:4px;background:#fbfaf6;width:25px;height:25px;font-size:16px;color:#526047}.footer{height:86px;display:flex;align-items:center;justify-content:space-between}.footer .wordmark{font-size:13px}.footer .mark{width:22px;height:22px;border-radius:7px}.footer .mark svg{width:14px}.footer>span,.footer>a:last-child{font-size:9px;color:#85877e}.footer>a:last-child{display:flex;align-items:center;gap:6px}.footer>a:last-child svg{width:13px}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%,14px);opacity:0;pointer-events:none;background:#20211e;color:#fff;padding:10px 14px;border-radius:4px;font:10px var(--mono);transition:opacity .2s,transform .2s}.toast:not(:empty){opacity:1;transform:translate(-50%)}@media(max-width:850px){.shell,.ticker-inner{width:calc(100% - 44px)}.hero{height:auto;min-height:485px;grid-template-columns:1.05fr .95fr}.hero h1{font-size:70px}.hero-art{transform:scale(.87);margin:0 -30px}.hero-side-note{right:3px}.pattern-grid{grid-template-columns:repeat(2,1fr)}.components-layout{gap:38px;grid-template-columns:.75fr 1.25fr}.component-row{grid-template-columns:85px 1fr}.top-links{gap:20px}}@media(max-width:600px){.shell,.ticker-inner{width:calc(100% - 36px)}.topbar{height:66px}.top-links{gap:14px}.top-links>a:not(.github-link){display:none}.github-link{font-size:10px;padding:10px 11px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:52px;min-height:0}.hero-copy{padding:0}.hero h1{font-size:68px;letter-spacing:-5px}.hero-text{font-size:13px;max-width:310px}.hero-actions{gap:12px}.no-framework{font-size:8px}.hero-art{height:335px;transform:scale(.86);margin:-4px -22px 0}.orbit--one{width:390px}.float-note--top{right:3px}.float-note--bottom{left:0}.art-sticker{right:24px}.hero-side-note{display:none}.ticker-inner{width:max-content;min-width:100%;padding:0 18px;justify-content:flex-start;gap:22px}.library{padding-top:58px;padding-bottom:60px}.section-heading h2{font-size:32px}.result-count{font-size:8px}.library-controls{align-items:flex-start;flex-direction:column-reverse;gap:8px;margin-top:20px;padding-bottom:0}.search-input{align-self:stretch;margin:0;height:38px}.search-input input{width:100%}.filter-tabs{gap:19px}.filter-tab{height:38px}.pattern-grid{grid-template-columns:1fr;gap:10px}.pattern-card{min-height:262px}.components-section{padding:56px 0}.components-layout{grid-template-columns:1fr;gap:27px}.components-copy h2{font-size:40px}.components-copy p{max-width:350px}.component-row{grid-template-columns:78px 1fr;gap:8px}.demo-items{gap:6px}.demo-items .button{font-size:7px;padding:9px 8px}.footer{height:auto;min-height:108px;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:22px 0}.footer>span{text-align:right}.footer>a:last-child{grid-column:1/-1}.empty-demo{gap:7px;padding:8px}.empty-demo small{font-size:7px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.pattern-card.is-selected{border-color:#89996a;box-shadow:0 0 0 2px #89996a24}.open-example{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:#68764e;padding:9px 0 0;font:9px var(--mono);cursor:pointer}.open-example svg{width:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.open-example:hover{color:#313d25}.workbench{padding:0 0 86px;scroll-margin-top:24px}.workbench-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.workbench-heading .eyebrow{display:block;margin-bottom:11px}.workbench-heading h2{margin:0;font-size:36px;letter-spacing:-1.7px;font-weight:600}.workbench-number{font:9px var(--mono);color:#85877e;padding-bottom:4px;letter-spacing:.4px}.workbench-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}.workbench-preview,.source-panel{min-width:0;min-height:365px;border:1px solid #e1e0d8;border-radius:6px;background:#fbfaf6;overflow:hidden}.workbench-bar{height:48px;border-bottom:1px solid #e8e7df;padding:0 15px;display:flex;align-items:center;justify-content:space-between}.workbench-bar>span:first-child{display:flex;align-items:center;gap:8px;font:8px var(--mono);letter-spacing:.8px;color:#777970}.workbench-bar .live-dot{display:inline-block}.live-app{margin:18px auto;width:min(350px,calc(100% - 32px));min-height:276px;padding:15px 17px 12px;background:#fffefa;border:1px solid #eeede6;border-radius:5px;box-shadow:0 10px 30px #20211e08;display:flex;flex-direction:column}.live-app-top,.live-app-foot{display:flex;align-items:center;justify-content:space-between}.live-brand{font-size:15px;font-weight:800;letter-spacing:-.5px}.live-brand b{color:#89995e;margin-left:5px}.live-date,.live-app-foot{font:7px var(--mono);color:#96978e;letter-spacing:.4px}.live-intro{font-size:11px;color:#85877d;margin:14px 0 10px}.live-meter{height:4px;border-radius:5px;background:#edede6;margin:3px 0 10px}.live-meter span{display:block;height:100%;border-radius:5px;background:#8da36c;transition:width .2s}.live-list{display:grid}.live-task{height:37px;display:flex;align-items:center;gap:9px;border-top:1px solid #efeee8;font-size:9px;color:#55574f;cursor:pointer}.live-task input{width:13px;height:13px;accent-color:#748859;cursor:pointer}.live-task small{margin-left:auto;font:7px var(--mono);color:#9a9b91}.live-add,.live-search{display:flex;align-items:center;gap:7px;margin-top:10px}.live-add input,.live-search input{min-width:0;flex:1;border:1px solid #e5e4dc;border-radius:3px;background:#fbfaf6;padding:8px 9px;font-size:9px;color:var(--ink)}.live-add button{width:28px;height:28px;border:0;border-radius:3px;background:#292a24;color:#fff;font-size:16px;cursor:pointer}.live-app-foot{margin-top:auto;padding-top:16px}.live-search{position:relative}.live-search>span{position:absolute;left:9px;color:#7f8178}.live-search input{padding-left:26px}.live-note{display:grid;gap:4px;padding:11px 0;border-top:1px solid #efeee8}.live-note>span{font:7px var(--mono);color:#8c9a66;letter-spacing:.5px}.live-note b{font-size:10px}.live-note small{font-size:8px;line-height:1.5;color:#85877e}.api-console{padding:20px 17px}.api-label,.api-caption{display:flex;align-items:center;justify-content:space-between;font:8px var(--mono);letter-spacing:.7px;color:#7d7f76}.api-label span{color:#a0a197;font-size:7px}.request-line{display:flex;align-items:center;gap:8px;margin:16px 0 24px;padding:8px;background:#f1f0e9;border:1px solid #e5e4dc;border-radius:4px}.request-line select{border:0;background:#e2edcf;border-radius:3px;padding:8px 5px;color:#49613e;font:8px var(--mono)}.request-line code{font:9px var(--mono);flex:1}.request-line .button{font-size:8px;padding:8px 9px;gap:5px}.request-line .button svg{width:13px}.api-caption{padding-bottom:8px;border-bottom:1px solid #e8e7df}.status-pill{color:#507755;background:#e6efdf;border-radius:3px;padding:4px 6px;font-size:7px}.response-code{min-height:95px;margin:0;padding:11px;background:#f3f2ec;border-radius:0 0 3px 3px;overflow:auto;color:#44473e;font:9px/1.6 var(--mono)}.api-hint{font-size:8px;line-height:1.6;color:#85877e;margin:11px 0 0}.api-hint b{color:#596c4b}.source-panel{padding:19px 18px 0;display:flex;flex-direction:column}.source-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.source-top .eyebrow{font-size:8px}.source-top h3{font-size:16px;letter-spacing:-.5px;margin:7px 0 0}.source-top .button{font-size:8px;padding:9px 10px;white-space:nowrap}.source-meta{margin-top:17px;padding:10px 0;border-top:1px solid #edede6;border-bottom:1px solid #edede6;display:flex;justify-content:space-between;align-items:center;color:#888a80;font:7px var(--mono);letter-spacing:.4px}.source-meta span:first-child{display:flex;align-items:center;gap:5px;color:#50534a}.source-meta i{width:6px;height:6px;border-radius:50%;background:#91a56b}.source-code{white-space:pre-wrap;overflow:auto;max-height:210px;min-height:145px;margin:0;padding:15px 3px;color:#45473f;font:9px/1.8 var(--mono)}.source-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:13px 0;border-top:1px solid #edede6;color:#898b82;font-size:8px}.source-foot a{color:#58684a;font-weight:700;white-space:nowrap}.workbench-legend{display:flex;justify-content:space-between;margin-top:12px;color:#92948b;font:8px var(--mono)}.workbench-legend span:first-child{display:flex;align-items:center;gap:6px}.workbench-legend .live-dot{width:6px;height:6px}@media(max-width:850px){.workbench-grid{grid-template-columns:1fr 1fr}.workbench-preview,.source-panel{min-height:385px}.api-console{padding:18px 12px}.request-line{gap:5px;padding:6px}.request-line .button{font-size:7px;padding:8px 7px}.live-date{font-size:6px}}@media(max-width:600px){.workbench{padding-bottom:59px}.workbench-heading{align-items:start;gap:10px}.workbench-heading h2{font-size:29px}.workbench-number{font-size:7px;padding-top:5px}.workbench-grid{grid-template-columns:1fr}.workbench-preview,.source-panel{min-height:0}.live-app{min-height:272px}.source-panel{min-height:295px}.source-code{max-height:180px}.workbench-legend{font-size:7px}.pattern-info{padding-bottom:8px}}.eyebrow,.hero-text,.no-framework,.card-kicker,.task-time,.hero-card-foot,.ticker-inner span,.result-count,.filter-tab,.filter-tab span,.search-input,.search-input input::placeholder,.pattern-info p,.copy-button,.code-top,.pattern-foot,.pattern-index,.components-copy p,.component-label,.empty-demo small,.footer>span,.footer>a:last-child,.workbench-number,.live-date,.live-app-foot,.live-intro,.live-task small,.live-note small,.api-label,.api-caption,.api-label span,.api-hint,.source-meta,.source-foot,.workbench-legend{color:#5f6258}.hero h1 span{color:#667647}