.page-head{padding-top:88px;padding-bottom:56px}.page-head-visual{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:40px 56px;display:grid}@media (width<=980px){.page-head-visual{grid-template-columns:minmax(0,1fr)}}.page-k{font:700 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}.page-h{max-width:20ch;font:800 clamp(40px, 4.6vw, 64px)/1.04 var(--head);letter-spacing:-.025em;color:var(--ink);text-wrap:balance;margin:0}.page-lede{max-width:52ch;color:var(--ink-2);margin:24px 0 0;font-size:21px;line-height:1.55}.draft-note{background:var(--panel);color:var(--muted);border-radius:8px;margin:0 0 32px;padding:8px 14px;font-size:15px;display:inline-block}.prose-col{max-width:var(--read,640px)}.prose-col>p{color:var(--ink-2);margin:0 0 22px;font-size:19px;line-height:1.7}.prose-col>h2{font:800 clamp(28px, 2.6vw, 34px)/1.15 var(--head);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;margin:64px 0 18px}.prose-col a{color:var(--ink);text-underline-offset:4px;font-weight:600;text-decoration-thickness:2px}.prose-col strong{color:var(--ink)}.screen{margin:40px 0 44px}.screen-panel{border-radius:var(--r-band);background:var(--panel);padding:28px;overflow-x:auto}.screen-panel .ui:not(.ui .ui){position:static;transform:none}.feature>*{min-width:0}.screen figcaption{color:var(--muted);margin-top:14px;font-size:15px;line-height:1.5}.prose-col .screen{width:min(960px,100vw - 48px);max-width:none}.toc{border-top:2px solid var(--ink);grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 24px;margin:0 0 24px;padding:20px 0 0;list-style:none;display:grid}.also-grid.two{border-top:1px solid var(--line-2);grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:8px}.toc a{color:var(--ink-2);font-size:16px;font-weight:500;text-decoration:none}.toc a:hover{color:var(--ink);text-underline-offset:3px;text-decoration:underline}.feature{border-top:1px solid var(--line-2);grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;padding:64px 0;scroll-margin-top:24px;display:grid}.feature.text-only>div{display:contents}.feature.text-only h2{grid-column:1}.feature.text-only h2~*{grid-column:2;max-width:60ch}.feature.text-only{grid-template-rows:auto;align-items:start;row-gap:0}.feature.text-only p:first-of-type{grid-row:1}.feature.wide{grid-template-columns:1fr;gap:32px}.feature.wide>div:not(.ir){max-width:640px}.feature h2{font:800 clamp(26px, 2.4vw, 32px)/1.15 var(--head);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;margin:0 0 16px}.feature>div>p{color:var(--ink-2);margin:0 0 14px;font-size:18px;line-height:1.65}.feature>div>p:last-child{margin-bottom:0}.feature>div>p a{color:var(--ink);text-underline-offset:4px;font-weight:600;text-decoration-thickness:2px}.feature .screen{margin:0}.feature .screen-panel{justify-content:safe center;display:flex}.screen-panel .board.ui{background:0 0;padding:0}.also{border-top:1px solid var(--line-2);padding:72px 0 24px}.also>h2{font:800 clamp(26px, 2.4vw, 32px)/1.15 var(--head);letter-spacing:-.02em;color:var(--ink);margin:0 0 32px}.also-grid{border-top:2px solid var(--ink);grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;display:grid}.also-grid>div{border-bottom:1px solid var(--line-2);padding:22px 0 26px;scroll-margin-top:24px}.also-grid h3{font:600 18px/1.3 var(--sans);color:var(--ink);margin:0 0 8px}.also-grid p{color:var(--ink-2);margin:0;font-size:17px;line-height:1.6}.pen-wrap{margin-bottom:40px;margin-right:190px;display:inline-block;position:relative}.pen-circle{width:calc(100% + 64px);height:56px;left:-30px;top:calc(var(--pen-top,270px) - 10px);fill:none;stroke:var(--pen);stroke-width:2.6px;stroke-linecap:round;pointer-events:none;position:absolute;overflow:visible}.pen-circle path{stroke-dasharray:1;stroke-dashoffset:1px}.pen-arrow{left:calc(100% + 22px);top:calc(var(--pen-top,270px) + 52px);width:46px;height:38px;color:var(--pen);position:absolute}.pen-note{left:calc(100% + 62px);top:calc(var(--pen-top,270px) + 78px);width:140px;font:400 20px/1.2 var(--hand);color:var(--ink);margin:0;position:absolute;transform:rotate(-3deg)}.pen-on .pen-circle path{animation:.9s cubic-bezier(.2,.7,.2,1) forwards pen-draw}.pen-note,.pen-arrow{opacity:0;transition:opacity .4s .7s}.pen-on .pen-note,.pen-on .pen-arrow{opacity:1}@keyframes pen-draw{to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.pen-circle path{stroke-dashoffset:0;animation:none!important}.pen-note,.pen-arrow{opacity:1;transition:none}}.screen-panel.composer{padding:20px;display:block}.ui .at{background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.ui .at .tbl{border-top:0}.ui .at .tbl tr:last-child td{border-bottom:0}.ui .hl{align-items:center;gap:6px;font-size:12px;font-weight:500;display:inline-flex}.ui .hl i{border-radius:999px;width:6px;height:6px}.ui .hl-ok{color:#047857}.ui .hl-ok i{background:#10b981}.ui .hl-flat{color:#6b7280}.ui .hl-flat i{background:#9ca3af}.page-end{padding-top:48px;padding-bottom:120px}.end-panel{border-radius:var(--r-band);background:var(--panel);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px 64px;padding:56px 64px;display:grid}.end-tx h2{font:800 clamp(30px, 3.2vw, 44px)/1.08 var(--head);letter-spacing:-.025em;color:var(--ink);text-wrap:balance;margin:0}.end-tx p{max-width:48ch;color:var(--ink-2);margin:14px 0 0;font-size:19px;line-height:1.55}.end-panel .signup{flex-wrap:nowrap;justify-content:flex-start;margin-top:0}@media (width<=980px){.feature.flip{grid-template-columns:1fr}.feature.flip>figure{order:0}.also-grid{grid-template-columns:1fr}.end-panel{grid-template-columns:1fr;padding:40px 32px}.end-panel .signup{flex-wrap:wrap}.pen-wrap{margin-right:0}.pen-note,.pen-arrow{display:none}.toc{grid-template-columns:repeat(2,minmax(0,1fr))}.also-grid.two{grid-template-columns:1fr}.feature,.feature.text-only{grid-template-columns:1fr;gap:28px;padding:48px 0}.feature.text-only{row-gap:0}.feature.text-only h2~*,.feature.text-only p:first-of-type{grid-area:auto/1}.page-head{padding-top:56px;padding-bottom:40px}}@media (width<=560px){.end-panel{padding:32px 22px}.screen-panel{padding:16px}.prose-col .screen{width:100%}.prose-col>p{font-size:18px}}.lib-pair{grid-template-columns:minmax(0,7fr) auto minmax(0,4fr);align-items:center;gap:20px;display:grid}.lib-pair .lib-arrow{font:800 32px/1 var(--head);color:var(--muted)}.lib-pair figcaption{grid-column:1/-1}@media (width<=760px){.lib-pair{grid-template-columns:minmax(0,1fr)}.lib-pair .lib-arrow{justify-self:center;transform:rotate(90deg)}}
