@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;650;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--ink:#20251e;--muted:#656b61;--paper:#fcfdf9;--line:#dce1d4;--lime:#d5fc64;--dark:#20271f;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #64852a;outline-offset:5px}a:hover{text-decoration:underline;text-underline-offset:5px}.wrap{width:min(1240px,calc(100% - 96px));margin:auto}.skip{position:absolute;top:-100px;left:20px;padding:16px;background:var(--lime);z-index:10}.skip:focus{top:10px}header{height:106px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:700;letter-spacing:-1px}.mark{font:500 20px 'IBM Plex Mono',monospace;background:var(--lime);padding:7px;letter-spacing:-3px;padding-right:10px}.brand-period{margin-left:-10px}nav{display:flex;gap:34px;align-items:center;font-size:14px}.github{border:1px solid var(--line);padding:11px 17px}.github span{margin-left:15px}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:65px;padding-top:81px;padding-bottom:79px;align-items:center}.eyebrow,.meta,.index,.specimen-top,.tag,.specimen-bottom,.code-comment,.line,.annotation,.setup label,.setup-foot,.dependency{font-family:'IBM Plex Mono',monospace}.eyebrow{font-size:12px;font-weight:500;letter-spacing:1.1px}.tiny-bracket{margin-right:10px;color:#778364}h1{font-size:clamp(52px,5.3vw,77px);line-height:1.04;letter-spacing:-4px;font-weight:500;margin:29px 0 23px}em{font-style:normal;color:#648238}h1 em{white-space:nowrap}p{font-size:16px;line-height:1.7;color:var(--muted)}.hero-description{font-size:18px;max-width:480px;line-height:1.65}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:31px}.button{display:inline-flex;align-items:center;gap:24px;background:var(--lime);border:1px solid #bbdf55;padding:16px 20px;font-size:14px;font-weight:650}.button:hover{background:#c4ee50;text-decoration:none}.text-link{font-size:14px;font-weight:600;display:inline-block}.text-link span{margin-left:7px}.meta{font-size:10px;letter-spacing:.45px;margin-top:25px;white-space:nowrap}.meta span{margin:0 10px;color:#a0a792}.specimen{position:relative;border:1px solid #394231;background:var(--dark);color:#e9eee0;box-shadow:12px 12px 0 #edf0e5;transform:rotate(1deg)}.specimen-top{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #414a39;color:#aab79d;font-size:10px;letter-spacing:.8px}.file-label{padding:20px;display:flex;align-items:center;gap:9px;font:12px 'IBM Plex Mono',monospace;border-bottom:1px solid #3b4434}.file-label>span:first-child{font-size:20px;color:var(--lime)}.tag{margin-left:auto;border:1px solid #566444;color:#d5fc64;font-size:9px;letter-spacing:.6px;padding:5px 7px}.specimen-body{padding:13px 24px 20px}.code-comment{font-size:11px;color:#93a283;margin:7px 0 17px}.spec-row{display:flex;gap:16px;align-items:center;margin:15px 0}.line{font-size:10px;color:#738367}.spec-row b{border:1px solid #566447;color:var(--lime);font:500 21px 'IBM Plex Mono',monospace;width:35px;height:38px;display:grid;place-items:center}.spec-row>div{font-size:15px;font-weight:500}.spec-row small{display:block;font-size:11px;font-weight:400;color:#aab79d;margin-top:4px}.specimen-bottom{display:flex;justify-content:space-between;padding:16px 20px;border-top:1px solid #414a39;font-size:9px;color:#b5c5a4}.lock{color:#d5fc64}.annotation{position:absolute;bottom:-36px;width:100%;text-align:right;color:#77816b;font-size:10px;transform:rotate(-1deg)}.compatibility{border-block:1px solid var(--line);display:flex;align-items:center;gap:46px;padding-block:25px}.compatibility p{font:10px/1.7 'IBM Plex Mono',monospace;min-width:144px;letter-spacing:.7px}.compatibility strong{font-weight:500;color:var(--ink)}.compatibility>div{display:flex;justify-content:space-between;flex:1;gap:20px;flex-wrap:wrap}.compatibility span{font-size:18px;font-weight:600;letter-spacing:-.7px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:53px;padding-block:76px 86px}.index{font-size:11px;color:#737e67;letter-spacing:1px}.principles h2{font-size:27px;letter-spacing:-1px;font-weight:500;line-height:1.17;margin:22px 0 13px}.principles p{margin:0;font-size:15px}.framework{background:#f0f3e9;border-block:1px solid var(--line);padding:88px 0}.framework-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:110px}.section-intro h2,.section-heading h2,.bundled h2,.start h2{font-size:51px;line-height:1.09;font-weight:500;letter-spacing:-2px;margin:23px 0}.section-intro p{max-width:345px;margin-bottom:27px}.dependency{font-size:15px;color:#72825e;margin-top:58px;letter-spacing:2px}.framework-list article{display:flex;gap:24px;padding:23px 0;border-top:1px solid #cdd5c0}.framework-list article:last-child{border-bottom:1px solid #cdd5c0}.framework-list article>span{font:500 31px 'IBM Plex Mono',monospace;color:#678347;min-width:29px}.framework-list h3{font-size:18px;letter-spacing:-.4px;font-weight:600;margin:0 0 8px}.framework-list p{font-size:14px;line-height:1.6;margin:0}.framework-list small{font:10px 'IBM Plex Mono',monospace;color:#829074;margin-left:auto;padding-top:8px}.workflow{padding-block:95px}.section-heading{display:flex;justify-content:space-between;align-items:flex-start}.section-heading h2{margin:0;width:60%}.section-heading>.eyebrow{padding-top:12px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:55px}.step-num{display:block;font:14px 'IBM Plex Mono',monospace;color:#7a8968;border-top:1px solid var(--line);padding-top:20px}.steps h3{font-size:23px;font-weight:500;letter-spacing:-.7px;margin:25px 0 12px}.steps p{font-size:15px}.bundled{border:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr;margin-bottom:90px}.bundled-copy{padding:45px 50px}.bundled h2{font-size:37px}.bundled p{font-size:15px}.bundled code{font-family:'IBM Plex Mono',monospace;font-size:.83em;background:#edf0e5;padding:2px 4px}.verdict{padding:45px 40px;background:#edf1e5;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}.verdict>div{font:28px/1.8 'IBM Plex Mono',monospace;color:#89957a;margin-top:23px}.verdict>div span{color:#4b692b}.verdict p{font:12px/1.9 'IBM Plex Mono',monospace}.start{background:var(--dark);color:#f0f4e9;padding:75px 0 80px}.start-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.start .eyebrow{color:#bbd19a}.start h2{font-size:46px}.start h2 em{color:var(--lime)}.start p{color:#b2bfa5}.start .text-link{color:#e5efd9;margin-top:13px}.setup{padding:28px;border:1px solid #4b583f;background:#252f22}.setup label{display:block;font-size:11px;color:#a5b793;letter-spacing:1px;margin-bottom:14px}.setup select{width:100%;background:#2e3929;color:#edf6e3;padding:13px 12px;border:1px solid #627051;border-radius:0}.setup p{font-size:14px;line-height:1.6;margin:20px 0}.command{background:#192015;border:1px solid #46543a;display:flex;align-items:flex-start;padding:16px;gap:15px}.command code{font:12px/1.9 'IBM Plex Mono',monospace;color:#d5fc64;overflow-wrap:anywhere;white-space:pre-wrap;flex:1}.command button{border:1px solid #5d704a;background:transparent;color:#d5fc64;font-size:12px;padding:7px 10px;cursor:pointer}.command button:hover{background:#37462c}.setup .setup-foot{font-size:11px;color:#a5b793;margin-bottom:0}.setup #copy-status{display:block;font-size:12px;margin-top:8px;min-height:16px;color:var(--lime)}footer{padding-block:35px;display:flex;justify-content:space-between;align-items:center;gap:25px}footer .brand{font-size:19px}footer .mark{font-size:16px}footer p,footer>a:last-child{font-size:12px}
@media(min-width:1600px){.hero{padding-block:105px}}@media(max-width:1100px){.wrap{width:calc(100% - 60px)}.hero{gap:35px}h1{font-size:57px;letter-spacing:-3px}.hero-actions{gap:15px;flex-wrap:wrap}.framework-grid{gap:60px}.start-grid{gap:40px}.compatibility{gap:25px}.compatibility span{font-size:16px}.meta{font-size:9px}.meta span{margin:0 5px}}@media(max-width:800px){.wrap{width:calc(100% - 40px)}header{height:83px}.brand{font-size:22px}nav{gap:18px}nav>a:not(.github){display:none}.hero{grid-template-columns:1fr;padding-block:48px 67px;gap:47px}h1{font-size:clamp(45px,8.5vw,69px);letter-spacing:-2.6px}.hero-description{max-width:550px}.hero-copy .eyebrow{font-size:10px}.specimen{max-width:540px;width:100%;justify-self:center;transform:none}.specimen-body{padding-inline:27px}.spec-row{margin:15px 0}.spec-row small{font-size:12px}.specimen-top,.specimen-bottom{font-size:10px}.file-label{font-size:13px}.tag{font-size:10px}.annotation{transform:none}.compatibility{display:block}.compatibility p br{display:none}.compatibility p strong{margin-left:5px}.compatibility>div{justify-content:flex-start;gap:18px 28px}.principles{gap:28px;grid-template-columns:1fr;padding-block:45px}.principles article{border-bottom:1px solid var(--line);padding-bottom:25px}.principles h2 br{display:none}.principles h2{margin-top:14px}.framework{padding:55px 0}.framework-grid{grid-template-columns:1fr;gap:35px}.section-intro h2{font-size:45px}.section-intro h2 br{display:none}.section-intro p{max-width:100%}.dependency{margin-top:30px}.framework-list article{gap:18px}.workflow{padding-block:55px}.section-heading{display:block}.section-heading h2{width:100%;font-size:41px;margin-top:23px}.steps{grid-template-columns:1fr;gap:20px;margin-top:35px}.steps h3{margin-top:15px}.steps p{margin-bottom:0}.bundled{grid-template-columns:1fr;margin-bottom:55px}.bundled-copy,.verdict{padding:30px}.verdict{border-left:0;border-top:1px solid var(--line)}.verdict>div{font-size:26px}.start{padding-block:50px}.start-grid{grid-template-columns:1fr;gap:35px}.start h2{font-size:41px}.setup{padding:22px}footer{flex-wrap:wrap}footer p{order:3;width:100%;margin:0}footer .brand{font-size:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media(min-width:801px){.specimen:hover{transform:rotate(0);transition:transform .3s ease}}

/* Readable type across viewport sizes. */
.meta,.index,.specimen-top,.tag,.specimen-bottom,.code-comment,.line,.annotation,.compatibility p,.framework-list small,.setup label,.setup .setup-foot,footer p,footer>a:last-child{font-size:12px}.principles p,.steps p,.bundled p,.framework-list p{font-size:16px}.spec-row small,.file-label,.command code,.command button,.setup p{font-size:14px}.specimen-top,.specimen-bottom{gap:14px;flex-wrap:wrap}.file-label{flex-wrap:wrap}.meta{white-space:normal;line-height:1.8}.meta span{margin:0 5px}.hero-copy .eyebrow{font-size:12px}.spec-row{margin:17px 0}.hero>*,.framework-grid>*,.start-grid>*{min-width:0}@media(max-width:1100px) and (min-width:801px){h1{font-size:clamp(42px,5.2vw,57px);letter-spacing:-2px}}@media(max-width:400px){h1{font-size:41px;letter-spacing:-2px}.hero-copy .eyebrow{letter-spacing:0}.tiny-bracket{margin-right:3px}.specimen-body{padding-inline:16px}.spec-row{gap:10px}.spec-row small{font-size:13px}.file-label{font-size:12px}.specimen-bottom{font-size:12px}.start h2{font-size:36px}}