:root{--ink: #272727;--ink-2: #5c5c5c;--ink-3: #6f6f6f;--line: #d1d1d1;--wash: #e8e8e8;--ground: #f4f4f4;--paper: #ffffff;--focus: #2969ff;--bar-h: 3.5rem;--gutter: clamp(1rem, 3vw, 2.5rem);--ease: cubic-bezier(.2, 0, 0, 1);color-scheme:light;font-family:IBM Plex Sans,system-ui,-apple-system,Segoe UI,sans-serif;font-weight:400;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{min-height:100dvh;display:flex;flex-direction:column;background:var(--ground)}body[data-mode=view],body[data-mode=compare]{height:100dvh;overflow:hidden}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}main:focus{outline:none}a{color:inherit}.skip{position:absolute;left:var(--gutter);top:.5rem;z-index:10;padding:.5rem .75rem;background:var(--paper);border:1px solid var(--ink);transform:translateY(-200%)}.skip:focus{transform:none}.bar{position:relative;z-index:2;display:flex;align-items:center;gap:1rem 1.5rem;min-height:var(--bar-h);padding:.5rem var(--gutter);background:var(--paper);border-bottom:1px solid var(--line);flex-wrap:wrap}.brand{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;margin-right:auto}.brand img{height:1.25rem;width:auto;display:block}.brand-sub{font-size:.8125rem;color:var(--ink-2);padding-left:.75rem;border-left:1px solid var(--line);line-height:1.25rem}.bar-end{display:flex;align-items:center;gap:.75rem}.modes,.group{display:inline-flex;align-items:center;gap:2px;padding:2px;background:var(--wash);border-radius:6px}.seg{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;margin:0;font:inherit;font-size:.8125rem;color:var(--ink-2);background:transparent;min-height:2rem;padding:0 .75rem;border-radius:4px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;transition:background-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease)}.seg:hover{color:var(--ink)}.seg[aria-pressed=true]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px #0000000f,0 1px 2px #00000014}.seg-sm{padding:0 .6rem;font-size:.75rem;letter-spacing:.04em}.seg .k{font-size:.6875rem;color:var(--ink-3);font-weight:400}.seg[aria-pressed=true] .k{color:var(--focus)}.seg-icon{padding:0 .6rem}.dev-w{font-size:.6875rem}.icon-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;font-size:.8125rem}.icon-btn:hover{color:var(--ink);border-color:var(--ink-3)}.tools{display:flex;align-items:center;gap:.5rem 1rem;padding:.5rem var(--gutter);background:var(--paper);border-bottom:1px solid var(--line);flex-wrap:wrap}.tools .dirs,.tools .pages{position:relative}.tools .pages{overflow-x:auto;max-width:100%;scrollbar-width:none}.tools-end{margin-left:auto;display:flex;align-items:center;gap:1rem}.open{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;color:var(--ink-2);text-decoration:none;min-height:2rem;white-space:nowrap}.open:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}main{flex:1;display:flex;flex-direction:column;min-height:0}.overview{padding:clamp(2rem,5vw,4.5rem) var(--gutter) 4rem;max-width:96rem;width:100%;margin:0 auto}.intro{max-width:42rem;margin-bottom:clamp(2rem,4vw,3.5rem)}.intro h1{font-weight:300;font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 1rem;text-wrap:balance}.intro p{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,34rem),1fr));gap:clamp(1.5rem,3vw,2.5rem)}.card{position:relative;display:flex;flex-direction:column}.thumb{--s: .4;position:relative;display:block;aspect-ratio:1440 / 900;overflow:hidden;border-radius:6px;background:var(--wash);box-shadow:0 0 0 1px #00000014,0 1px 2px #0000000a;transition:box-shadow .24s var(--ease),transform .24s var(--ease)}.thumb iframe{position:absolute;inset:0 auto auto 0;width:1440px;height:900px;border:0;transform:scale(var(--s));transform-origin:0 0;pointer-events:none;background:var(--paper);opacity:0;transition:opacity .4s var(--ease)}.is-loaded iframe{opacity:1}.card:hover .thumb{box-shadow:0 0 0 1px #0000001f,0 12px 32px -12px #00000040}@media(prefers-reduced-motion:no-preference){.card:hover .thumb{transform:translateY(-2px)}}.thumb-empty,.device-empty{display:none}.is-empty .thumb-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:.8125rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;background:var(--ground)}.card-body{padding-top:1.25rem;display:grid;gap:.35rem}.card-meta{margin:0;display:flex;gap:.75rem;align-items:baseline;font-size:.75rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}.num{color:var(--ink);font-weight:600}.card-name{margin:0;font-weight:300;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.01em;line-height:1.15}.card-name a{text-decoration:none}.card-name a:after{content:"";position:absolute;inset:0 0 auto 0;aspect-ratio:1440 / 900;border-radius:6px}.card-name a:focus-visible{outline:none}.card-name a:focus-visible:after{outline:2px solid var(--focus);outline-offset:3px}.card-line{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.5}.card-pages{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--line);font-size:.8125rem}.card-pages a{position:relative;z-index:1;color:var(--ink-2);text-decoration:none;min-height:1.75rem;display:inline-flex;align-items:center}.card-pages a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.card-pages .cmp{margin-left:auto;color:var(--ink)}.stage{flex:1;min-height:0;display:flex;flex-direction:column}.panes{flex:1;min-height:0;display:grid;grid-template-columns:1fr;gap:var(--gutter);padding:clamp(.75rem,2vw,1.5rem) var(--gutter) .5rem}.panes.is-compare{grid-template-columns:1fr 1fr}@media(max-width:56rem){.panes.is-compare{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}.pane{min-width:0;min-height:0;display:flex;flex-direction:column;gap:.5rem}.pane-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.pane-head select{font:inherit;font-size:.875rem;font-weight:600;color:var(--ink);min-height:2rem;padding:0 2rem 0 .75rem;border:1px solid var(--line);border-radius:4px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23272727' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right .6rem center / .75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.area{flex:1;min-height:0;display:grid;place-items:start center}.device{position:relative;overflow:hidden;background:var(--paper);border-radius:6px;box-shadow:0 0 0 1px #0000001a,0 16px 40px -20px #0000004d}.device[data-kind=tablet]{border-radius:14px}.device[data-kind=mobile]{border-radius:22px}.device iframe{position:absolute;inset:0 auto auto 0;border:0;transform-origin:0 0;background:var(--paper)}.is-empty .device-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;margin:0;padding:2rem;text-align:center;font-size:.875rem;line-height:1.5;color:var(--ink-2);background:var(--ground);text-wrap:balance}.caption{margin:0;text-align:center;font-size:.75rem;color:var(--ink-3);min-height:1.25rem}.help{border:0;border-radius:8px;padding:1.5rem 1.75rem;width:min(26rem,calc(100vw - 2rem));color:var(--ink);box-shadow:0 24px 64px -24px #00000073,0 0 0 1px #0000000f}.help::backdrop{background:#27272759}.help h2{margin:0 0 1rem;font-size:1rem;font-weight:600}.help dl{margin:0 0 1.25rem;display:grid;gap:.5rem}.help dl div{display:grid;grid-template-columns:6rem 1fr;gap:1rem;align-items:baseline;font-size:.875rem}.help dd{margin:0;color:var(--ink-2)}kbd{font:inherit;font-size:.75rem;font-weight:600;white-space:pre;padding:.1rem .4rem;border-radius:3px;background:var(--wash)}.help form{display:flex;justify-content:flex-end}.help .seg{background:var(--ink);color:var(--paper)}@media(max-width:40rem){.brand-sub{display:none}.modes{order:3;width:100%}.modes .seg{flex:1;justify-content:center}.tools{gap:.5rem}.tools .dirs,.tools .pages{width:100%;overflow-x:auto}.tools .dirs .seg,.tools .pages .seg{flex:1 0 auto;justify-content:center}.tools-end{width:100%;margin-left:0;justify-content:space-between}.dev-w{display:none}}