[{"data":1,"prerenderedAt":89},["ShallowReactive",2],{"room:17-bento-now":3},{"path":4,"meta":5,"html":78,"css":79,"snippets":80},"17-bento-now",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":36,"thenVsNow":41,"snippets":42,"sources":59,"cta":75},"17","Bento & scroll-driven (now)","2023–2026","Today’s product page: a bento box of rounded tiles, giant kinetic type, and motion and layout that once needed JavaScript, now done in CSS with scroll timelines, container queries, :has() and view transitions.",{"screens":11,"connection":12,"browsers":13},"Everything from foldables to 6K monitors; components size themselves to their container","5G and fibre, yet performance budgets matter again (Core Web Vitals)","Evergreen engines shipping features together via the yearly Interop effort",[15,18,21,24,27,30,33],{"id":16,"label":17},"bento","Bento grid of varied tile sizes (grid-template-areas)",{"id":19,"label":20},"kinetic","Oversized kinetic type",{"id":22,"label":23},"scroll-driven","Scroll-driven reveals with animation-timeline: view()",{"id":25,"label":26},"view-transitions","Same-document View Transitions for filter and expand",{"id":28,"label":29},"container","Container queries reacting to a component’s own width",{"id":31,"label":32},"has",":has() and subgrid for state and alignment",{"id":34,"label":35},"feature-detect","Live feature detection with CSS.supports()",[37,38,39,40],"CSS Grid with grid-template-areas and dense auto-flow","animation-timeline: view() and scroll(), guarded by @supports and reduced-motion","document.startViewTransition() with view-transition-name on each tile","@container queries, :has(), subgrid, CSS nesting, oklch() and color-mix()","This is the now. Anchor positioning, scroll-state queries and cross-document transitions are what’s landing next.",[43,48,53,56],{"file":44,"lang":45,"caption":46,"region":47},"era.css","css","Scroll-driven reveal, no JavaScript","scroll",{"file":49,"lang":50,"caption":51,"region":52},"era.client.ts","typescript","A view transition with a fallback","vt",{"file":44,"lang":45,"caption":54,"region":55},"A card that queries its container","cq",{"file":49,"lang":50,"caption":57,"region":58},"Feature detection with CSS.supports()","detect",[60,63,66,69,72],{"label":61,"url":62},"CSS scroll-driven animations (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_scroll-driven_animations",{"label":64,"url":65},"View Transition API (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FView_Transition_API",{"label":67,"url":68},"CSS container queries (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_containment\u002FContainer_queries",{"label":70,"url":71},"CSS Containment Module Level 3 (W3C)","https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-contain-3\u002F",{"label":73,"url":74},"Interop 2024 (web-platform-tests)","https:\u002F\u002Fwpt.fyi\u002Finterop-2024",{"next":76,"prev":77},"Back to the lobby","Previous era","\u003Cdiv class=\"qn\">\n  \u003Cheader class=\"qn__nav\">\n    \u003Ca class=\"qn__logo\" href=\"#qn-top\" aria-label=\"Quietnote home\">\n      \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Crect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"6\"\u002F>\u003Cpath d=\"M8 9h8M8 12.5h8M8 16h5\"\u002F>\u003C\u002Fsvg>\n      Quietnote\n    \u003C\u002Fa>\n    \u003Cnav aria-label=\"Quietnote\">\n      \u003Ca href=\"#qn-features\">Features\u003C\u002Fa>\n      \u003Ca href=\"#qn-lab\">Lab\u003C\u002Fa>\n      \u003Ca href=\"#qn-pricing\">Pricing\u003C\u002Fa>\n    \u003C\u002Fnav>\n    \u003Ca class=\"qn__pill\" href=\"#qn-pricing\">Get Quietnote\u003C\u002Fa>\n  \u003C\u002Fheader>\n\n  \u003Csection class=\"qn__hero\" id=\"qn-top\" data-trait=\"kinetic\">\n\u003Cp class=\"era-stamp\">\u003Cspan class=\"era-stamp__no\">Era 17\u002F17\u003C\u002Fspan> \u003Cspan class=\"era-stamp__years\">2023–2026\u003C\u002Fspan> \u003Cspan class=\"era-stamp__title\">Bento & scroll-driven (now)\u003C\u002Fspan>\u003C\u002Fp>\n    \u003Cp class=\"qn__eyebrow\">Notes, without the noise · v4\u003C\u002Fp>\n    \u003Ch1 class=\"qn__mega\">\n      \u003Cspan class=\"qn__line\">Write it\u003C\u002Fspan>\n      \u003Cspan class=\"qn__line qn__line--out\">down.\u003C\u002Fspan>\n      \u003Cspan class=\"qn__line qn__line--small\">No AI. No feed. No streaks.\u003C\u002Fspan>\n    \u003C\u002Fh1>\n\u003Cnav class=\"era-cta\" aria-label=\"Travel through time\">\u003Ca class=\"era-cta__next\" rel=\"next\" href=\"\u002F\">\u003Cspan class=\"era-cta__label\">Back to the lobby\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">All eras\u003C\u002Fspan>\u003C\u002Fa> \u003Ca class=\"era-cta__prev\" rel=\"prev\" href=\"\u002Feras\u002F16-glass-soft-ui\u002F\">\u003Cspan class=\"era-cta__label\">Previous era\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">2018–2023 · Gradients, glass & soft UI\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fnav>\n  \u003C\u002Fsection>\n\n  \u003Cdiv class=\"qn__filters\" role=\"group\" aria-label=\"Filter features\" data-trait=\"view-transitions\">\n    \u003Cbutton type=\"button\" aria-pressed=\"true\" data-filter=\"all\">All\u003C\u002Fbutton>\n    \u003Cbutton type=\"button\" aria-pressed=\"false\" data-filter=\"write\">Writing\u003C\u002Fbutton>\n    \u003Cbutton type=\"button\" aria-pressed=\"false\" data-filter=\"sync\">Sync\u003C\u002Fbutton>\n    \u003Cbutton type=\"button\" aria-pressed=\"false\" data-filter=\"privacy\">Privacy\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003Csection class=\"qn__bento\" id=\"qn-features\" aria-label=\"Features\" data-trait=\"bento\">\n    \u003Carticle class=\"qn__tile qn__tile--hero\" data-tags=\"write\" style=\"view-transition-name: qn-t1\">\n      \u003Ch2>A blank page that opens in 80 ms\u003C\u002Fh2>\n      \u003Cp>Cold start to cursor before your thought escapes.\u003C\u002Fp>\n      \u003Cdiv class=\"qn__mock\" aria-hidden=\"true\">\n        \u003Cspan class=\"qn__mock-bar\">\u003C\u002Fspan>\n        \u003Cspan class=\"qn__mock-line\" style=\"--w:72%\">\u003C\u002Fspan>\n        \u003Cspan class=\"qn__mock-line\" style=\"--w:88%\">\u003C\u002Fspan>\n        \u003Cspan class=\"qn__mock-line\" style=\"--w:54%\">\u003C\u002Fspan>\n        \u003Cspan class=\"qn__caret\">\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" class=\"qn__expand\" aria-expanded=\"false\">Expand\u003C\u002Fbutton>\n    \u003C\u002Farticle>\n    \u003Carticle class=\"qn__tile qn__tile--stat\" data-tags=\"sync\" style=\"view-transition-name: qn-t2\">\n      \u003Cp class=\"qn__big\">0.3\u003Csmall>s\u003C\u002Fsmall>\u003C\u002Fp>\n      \u003Ch2>Sync across every device\u003C\u002Fh2>\n      \u003Cbutton type=\"button\" class=\"qn__expand\" aria-expanded=\"false\">Expand\u003C\u002Fbutton>\n    \u003C\u002Farticle>\n    \u003Carticle class=\"qn__tile qn__tile--lock\" data-tags=\"privacy\" style=\"view-transition-name: qn-t3\">\n      \u003Csvg viewBox=\"0 0 48 48\" aria-hidden=\"true\">\u003Crect x=\"10\" y=\"21\" width=\"28\" height=\"20\" rx=\"6\"\u002F>\u003Cpath d=\"M16 21v-5a8 8 0 0 1 16 0v5\"\u002F>\u003C\u002Fsvg>\n      \u003Ch2>End-to-end encrypted\u003C\u002Fh2>\n      \u003Cp>We can't read your notes. Nobody can.\u003C\u002Fp>\n      \u003Cbutton type=\"button\" class=\"qn__expand\" aria-expanded=\"false\">Expand\u003C\u002Fbutton>\n    \u003C\u002Farticle>\n    \u003Carticle class=\"qn__tile qn__tile--md\" data-tags=\"write\" style=\"view-transition-name: qn-t4\">\n      \u003Ch2>Markdown, quietly\u003C\u002Fh2>\n      \u003Cp>\u003Ccode># heading\u003C\u002Fcode> \u003Ccode>**bold**\u003C\u002Fcode> \u003Ccode>- [ ] todo\u003C\u002Fcode>\u003C\u002Fp>\n      \u003Cbutton type=\"button\" class=\"qn__expand\" aria-expanded=\"false\">Expand\u003C\u002Fbutton>\n    \u003C\u002Farticle>\n    \u003Carticle class=\"qn__tile qn__tile--offline\" data-tags=\"sync privacy\" style=\"view-transition-name: qn-t5\">\n      \u003Ch2>Offline first\u003C\u002Fh2>\n      \u003Cp>Your notes live on your device. The cloud is a backup, not a landlord.\u003C\u002Fp>\n      \u003Cbutton type=\"button\" class=\"qn__expand\" aria-expanded=\"false\">Expand\u003C\u002Fbutton>\n    \u003C\u002Farticle>\n    \u003Carticle class=\"qn__tile qn__tile--quote\" data-tags=\"write\" style=\"view-transition-name: qn-t6\">\n      \u003Cblockquote>\u003Cp>\"The first notes app that doesn't want my attention.\"\u003C\u002Fp>\u003Cfooter>— a very calm reviewer\u003C\u002Ffooter>\u003C\u002Fblockquote>\n      \u003Cbutton type=\"button\" class=\"qn__expand\" aria-expanded=\"false\">Expand\u003C\u002Fbutton>\n    \u003C\u002Farticle>\n    \u003Carticle class=\"qn__tile qn__tile--export\" data-tags=\"privacy\" style=\"view-transition-name: qn-t7\">\n      \u003Ch2>Plain-text export\u003C\u002Fh2>\n      \u003Cp>One folder of \u003Ccode>.md\u003C\u002Fcode> files. Leave whenever you like.\u003C\u002Fp>\n      \u003Cbutton type=\"button\" class=\"qn__expand\" aria-expanded=\"false\">Expand\u003C\u002Fbutton>\n    \u003C\u002Farticle>\n    \u003Carticle class=\"qn__tile qn__tile--widgets\" data-tags=\"sync\" style=\"view-transition-name: qn-t8\">\n      \u003Ch2>Widgets everywhere\u003C\u002Fh2>\n      \u003Cdiv class=\"qn__dots\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" class=\"qn__expand\" aria-expanded=\"false\">Expand\u003C\u002Fbutton>\n    \u003C\u002Farticle>\n  \u003C\u002Fsection>\n\n  \u003Csection class=\"qn__lab\" id=\"qn-lab\" aria-labelledby=\"qn-lab-h\">\n    \u003Cdiv class=\"qn__lab-head reveal\" data-trait=\"scroll-driven\">\n      \u003Ch2 id=\"qn-lab-h\">The lab\u003C\u002Fh2>\n      \u003Cp>How this page is built, live. Drag the slider: the card below doesn't look at the viewport, only at its container.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"qn__resizer reveal\" data-trait=\"container\">\n      \u003Clabel for=\"qn-width\">Container width \u003Coutput id=\"qn-width-out\" for=\"qn-width\">100%\u003C\u002Foutput>\u003C\u002Flabel>\n      \u003Cinput id=\"qn-width\" type=\"range\" min=\"30\" max=\"100\" value=\"100\" step=\"1\">\n      \u003Cdiv class=\"qn__cq\" id=\"qn-cq\" style=\"--cq: 100%\">\n        \u003Carticle class=\"qn__cq-card\">\n          \u003Cdiv class=\"qn__cq-art\" aria-hidden=\"true\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"qn__cq-body\">\n            \u003Ch3>Morning pages\u003C\u002Fh3>\n            \u003Cp>3 notes · edited 2 min ago\u003C\u002Fp>\n            \u003Clabel class=\"qn__cq-pin\">\u003Cinput type=\"checkbox\"> Pin to widget\u003C\u002Flabel>\n          \u003C\u002Fdiv>\n          \u003Cspan class=\"qn__cq-badge\" aria-hidden=\"true\">\u003C\u002Fspan>\n        \u003C\u002Farticle>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"qn__support reveal\">\n      \u003Ch3>Your browser, right now\u003C\u002Fh3>\n      \u003Cul class=\"qn__features\" data-trait=\"feature-detect\">\n        \u003Cli data-check=\"vt\">\u003Cspan>View Transitions\u003C\u002Fspan>\u003Cb>checking…\u003C\u002Fb>\u003C\u002Fli>\n        \u003Cli data-check=\"sda\">\u003Cspan>Scroll-driven animations\u003C\u002Fspan>\u003Cb>checking…\u003C\u002Fb>\u003C\u002Fli>\n        \u003Cli data-check=\"has\">\u003Cspan>:has()\u003C\u002Fspan>\u003Cb>checking…\u003C\u002Fb>\u003C\u002Fli>\n        \u003Cli data-check=\"cq\">\u003Cspan>Container queries\u003C\u002Fspan>\u003Cb>checking…\u003C\u002Fb>\u003C\u002Fli>\n        \u003Cli data-check=\"subgrid\">\u003Cspan>Subgrid\u003C\u002Fspan>\u003Cb>checking…\u003C\u002Fb>\u003C\u002Fli>\n        \u003Cli data-check=\"anchor\">\u003Cspan>Anchor positioning\u003C\u002Fspan>\u003Cb>checking…\u003C\u002Fb>\u003C\u002Fli>\n        \u003Cli data-check=\"oklch\">\u003Cspan>oklch() + color-mix()\u003C\u002Fspan>\u003Cb>checking…\u003C\u002Fb>\u003C\u002Fli>\n        \u003Cli data-check=\"nesting\">\u003Cspan>CSS nesting\u003C\u002Fspan>\u003Cb>checking…\u003C\u002Fb>\u003C\u002Fli>\n        \u003Cli data-check=\"popover\">\u003Cspan>Popover API\u003C\u002Fspan>\u003Cb>checking…\u003C\u002Fb>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Csection class=\"qn__pricing\" id=\"qn-pricing\" aria-labelledby=\"qn-pricing-h\">\n    \u003Ch2 id=\"qn-pricing-h\" class=\"reveal\">One price. Forever.\u003C\u002Fh2>\n    \u003Cdiv class=\"qn__plans\" data-trait=\"has\">\n      \u003Clabel class=\"qn__plan reveal\">\n        \u003Cinput type=\"radio\" name=\"qn-plan\" value=\"personal\" checked>\n        \u003Cspan class=\"qn__plan-name\">Personal\u003C\u002Fspan>\n        \u003Cspan class=\"qn__plan-price\">€0\u003C\u002Fspan>\n        \u003Cspan class=\"qn__plan-row\">One device\u003C\u002Fspan>\n        \u003Cspan class=\"qn__plan-row\">Markdown export\u003C\u002Fspan>\n      \u003C\u002Flabel>\n      \u003Clabel class=\"qn__plan reveal\">\n        \u003Cinput type=\"radio\" name=\"qn-plan\" value=\"lifetime\">\n        \u003Cspan class=\"qn__plan-name\">Lifetime\u003C\u002Fspan>\n        \u003Cspan class=\"qn__plan-price\">€29\u003C\u002Fspan>\n        \u003Cspan class=\"qn__plan-row\">Every device\u003C\u002Fspan>\n        \u003Cspan class=\"qn__plan-row\">Encrypted sync\u003C\u002Fspan>\n      \u003C\u002Flabel>\n    \u003C\u002Fdiv>\n    \u003Cp class=\"qn__plan-note reveal\">Pick a plan above; the selected card is styled with \u003Ccode>:has(input:checked)\u003C\u002Fcode>.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\n  \u003Cfooter class=\"qn__foot\">\n    \u003Cp>Quietnote · Made by four people in a small office · \u003Ca href=\"#qn-top\">Back to top\u003C\u002Fa>\u003C\u002Fp>\n  \u003C\u002Ffooter>\n\u003C\u002Fdiv>\n","@layer era, shell;\n@layer era {\n\u002F* Era 17: bento grids, scroll-driven motion, container queries and :has(). Today's CSS. *\u002F\n[data-era=\"17\"] {\n  --paper: oklch(97.5% 0.008 85);\n  --ink: oklch(21% 0.02 270);\n  --muted: oklch(45% 0.02 270);\n  --brand: oklch(62% 0.2 35);          \u002F* warm vermilion *\u002F\n  --brand-ink: oklch(48% 0.19 35);     \u002F* AA on paper *\u002F\n  --tile: oklch(100% 0 0);\n  --line: color-mix(in oklch, var(--ink) 12%, transparent);\n  --dark: oklch(23% 0.03 270);\n  --soft-brand: color-mix(in oklch, var(--brand) 14%, var(--paper));\n  background: var(--paper);\n  color: var(--ink);\n  font-family: ui-sans-serif, system-ui, -apple-system, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Inter, Roboto, sans-serif;\n  font-size: 16px;\n  line-height: 1.5;\n\n  .qn {\n    container: bento \u002F inline-size; \u002F* the bento reflows by the page's width, not the viewport's *\u002F\n    max-width: 1180px;\n    margin: 0 auto;\n    padding: 16px clamp(16px, 4cqw, 40px) 40px;\n    overflow-x: clip;\n  }\n  a {\n    color: inherit;\n  }\n  :focus-visible {\n    outline: 3px solid var(--brand-ink);\n    outline-offset: 3px;\n    border-radius: 6px;\n  }\n  code {\n    font: 0.9em ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;\n    padding: 1px 6px;\n    border-radius: 6px;\n    background: color-mix(in oklch, var(--ink) 7%, transparent);\n  }\n\n  \u002F* ---------- Nav ---------- *\u002F\n  .qn__nav {\n    position: sticky;\n    top: 12px;\n    z-index: 5;\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 8px 8px 8px 16px;\n    border: 1px solid var(--line);\n    border-radius: 999px;\n    background: color-mix(in oklch, var(--paper) 80%, transparent);\n    -webkit-backdrop-filter: blur(12px);\n    backdrop-filter: blur(12px);\n    nav {\n      display: flex;\n      gap: 20px;\n      margin-left: auto;\n      font-size: 15px;\n    }\n    nav a {\n      text-decoration: none;\n      color: var(--muted);\n    }\n    nav a:hover {\n      color: var(--ink);\n    }\n  }\n  .qn__logo {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 650;\n    letter-spacing: -0.02em;\n    text-decoration: none;\n    svg {\n      width: 24px;\n      height: 24px;\n      fill: var(--ink);\n      stroke: var(--paper);\n      stroke-width: 1.8;\n      stroke-linecap: round;\n    }\n  }\n  .qn__pill {\n    padding: 8px 16px;\n    border-radius: 999px;\n    background: var(--ink);\n    color: var(--paper);\n    font-size: 15px;\n    font-weight: 600;\n    text-decoration: none;\n  }\n\n  \u002F* ---------- Kinetic oversized type ---------- *\u002F\n  .qn__hero {\n    padding: clamp(48px, 10cqw, 120px) 0 clamp(32px, 6cqw, 64px);\n  }\n  .qn__eyebrow {\n    margin: 0 0 16px;\n    color: var(--brand-ink);\n    font-weight: 600;\n    letter-spacing: 0.02em;\n  }\n  .qn__mega {\n    margin: 0;\n    font-size: clamp(64px, 17cqw, 220px);\n    line-height: 0.86;\n    letter-spacing: -0.06em;\n    font-weight: 800;\n  }\n  .qn__line {\n    display: block;\n  }\n  .qn__line--out {\n    color: transparent;\n    -webkit-text-stroke: max(2px, 0.012em) var(--ink);\n    padding-left: 0.6em;\n  }\n  .qn__line--small {\n    margin-top: 0.5em;\n    font-size: clamp(18px, 2.4cqw, 28px);\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n    font-weight: 500;\n    color: var(--muted);\n  }\n\n  \u002F* ---------- Stamp: the announcement pill above the headline ---------- *\u002F\n  .era-stamp {\n    margin: 0 0 14px;\n    color: var(--muted);\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 26px;\n  }\n  .era-stamp__years::after {\n    content: ' ·';\n  }\n  .era-stamp__no {\n    margin-right: 4px;\n    padding: 3px 10px;\n    border-radius: 999px;\n    background: var(--soft-brand);\n    color: var(--brand-ink);\n    font-weight: 650;\n    font-variant-numeric: tabular-nums;\n  }\n  .era-stamp__title {\n    color: var(--ink);\n    font-weight: 600;\n  }\n\n  \u002F* ---------- Travel: a dark pill with an arrow chip, and a ghost button ---------- *\u002F\n  .era-cta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    margin-top: clamp(28px, 5cqw, 48px);\n    a {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      column-gap: 16px;\n      padding: 12px 12px 12px 22px;\n      border-radius: 999px;\n      text-decoration: none;\n      transition: background-color 200ms, scale 200ms;\n    }\n    a:active {\n      scale: 0.98;\n    }\n    a::after {\n      grid-row: 1 \u002F 3;\n      grid-column: 2;\n      display: grid;\n      place-items: center;\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      font-size: 18px;\n      transition: translate 200ms;\n    }\n    a:focus-visible {\n      outline: 3px solid var(--brand-ink);\n      outline-offset: 3px;\n      border-radius: 999px;\n    }\n  }\n  .era-cta__label {\n    font-weight: 650;\n    letter-spacing: -0.01em;\n  }\n  .era-cta__to {\n    grid-column: 1;\n    font-size: 13px;\n  }\n  .era-cta__next {\n    background: var(--ink);\n    color: var(--paper);\n    .era-cta__to {\n      color: color-mix(in oklch, var(--paper) 78%, transparent);\n    }\n    &::after {\n      content: '\\2192';\n      background: var(--brand);\n      color: var(--ink);\n    }\n    &:hover {\n      background: var(--dark);\n      &::after {\n        translate: 3px 0;\n      }\n    }\n  }\n  .era-cta__prev {\n    border: 1px solid var(--line);\n    background: var(--tile);\n    color: var(--ink);\n    .era-cta__to {\n      color: var(--muted);\n    }\n    &::after {\n      content: '\\2190';\n      grid-row: 1 \u002F 3;\n      background: color-mix(in oklch, var(--ink) 7%, transparent);\n    }\n    &:hover {\n      background: var(--soft-brand);\n    }\n  }\n\n  \u002F* ---------- Filters ---------- *\u002F\n  .qn__filters {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    margin-bottom: 16px;\n    button {\n      padding: 8px 16px;\n      border: 1px solid var(--line);\n      border-radius: 999px;\n      background: var(--tile);\n      color: var(--ink);\n      font: inherit;\n      font-size: 15px;\n      font-weight: 550;\n      cursor: pointer;\n    }\n    button[aria-pressed='true'] {\n      background: var(--ink);\n      color: var(--paper);\n      border-color: var(--ink);\n    }\n  }\n\n  \u002F* ---------- Bento ---------- *\u002F\n  .qn__bento {\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    grid-auto-rows: minmax(170px, auto);\n    grid-template-areas:\n      'hero hero stat lock'\n      'hero hero md   lock'\n      'off  quote quote export'\n      'off  widgets widgets export';\n    gap: 14px;\n  }\n  .qn__tile {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    padding: 22px;\n    border: 1px solid var(--line);\n    border-radius: 28px;\n    background: var(--tile);\n    overflow: hidden;\n    h2 {\n      margin: 0;\n      font-size: 20px;\n      line-height: 1.2;\n      letter-spacing: -0.02em;\n      font-weight: 650;\n    }\n    p {\n      margin: 0;\n      color: var(--muted);\n    }\n  }\n  .qn__tile > :first-child {\n    padding-right: 36px;\n  }\n  .qn__tile--hero { grid-area: hero; background: var(--dark); color: var(--paper); h2 { font-size: clamp(24px, 3cqw, 36px); max-width: 14ch; } p { color: color-mix(in oklch, var(--paper) 72%, transparent); } }\n  .qn__tile--stat { grid-area: stat; background: var(--brand); color: oklch(15% 0.03 35); p, h2 { color: inherit; } }\n  .qn__tile--lock { grid-area: lock; justify-content: flex-end; background: var(--soft-brand); }\n  .qn__tile--md { grid-area: md; }\n  .qn__tile--offline { grid-area: off; background: oklch(90% 0.06 160); justify-content: flex-end; }\n  .qn__tile--quote { grid-area: quote; }\n  .qn__tile--export { grid-area: export; background: oklch(91% 0.05 250); justify-content: flex-end; }\n  .qn__tile--widgets { grid-area: widgets; flex-direction: row; align-items: center; justify-content: space-between; }\n\n  .qn__big {\n    font-size: 72px;\n    line-height: 0.9;\n    font-weight: 800;\n    letter-spacing: -0.05em;\n    small {\n      font-size: 0.4em;\n    }\n  }\n  .qn__tile--lock svg {\n    width: 64px;\n    height: 64px;\n    margin-bottom: auto;\n    fill: none;\n    stroke: var(--brand-ink);\n    stroke-width: 3;\n  }\n  blockquote {\n    margin: 0;\n    p {\n      font-size: clamp(20px, 2.4cqw, 28px);\n      line-height: 1.2;\n      letter-spacing: -0.02em;\n      color: var(--ink);\n      font-weight: 600;\n    }\n    footer {\n      margin-top: 10px;\n      color: var(--muted);\n    }\n  }\n  .qn__dots {\n    display: grid;\n    grid-template-columns: repeat(2, 36px);\n    gap: 8px;\n    span {\n      height: 36px;\n      border-radius: 10px;\n      background: color-mix(in oklch, var(--brand) calc(25% + var(--n, 0) * 20%), var(--paper));\n    }\n    span:nth-child(2) { --n: 1; }\n    span:nth-child(3) { --n: 2; }\n    span:nth-child(4) { --n: 3; }\n  }\n  .qn__mock {\n    display: grid;\n    gap: 10px;\n    margin-top: auto;\n    padding: 18px;\n    border-radius: 18px;\n    background: color-mix(in oklch, var(--paper) 10%, transparent);\n    border: 1px solid color-mix(in oklch, var(--paper) 18%, transparent);\n  }\n  .qn__mock-bar {\n    width: 40%;\n    height: 12px;\n    border-radius: 6px;\n    background: var(--brand);\n  }\n  .qn__mock-line {\n    width: var(--w);\n    height: 8px;\n    border-radius: 4px;\n    background: color-mix(in oklch, var(--paper) 35%, transparent);\n  }\n  .qn__caret {\n    width: 2px;\n    height: 18px;\n    background: var(--brand);\n    animation: e17-caret 1.1s steps(2, jump-none) infinite;\n  }\n\n  .qn__expand {\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 34px;\n    height: 34px;\n    padding: 0;\n    border: 1px solid color-mix(in oklch, currentColor 25%, transparent);\n    border-radius: 50%;\n    background: color-mix(in oklch, currentColor 6%, transparent);\n    color: inherit;\n    font-size: 0;\n    cursor: pointer;\n    &::before {\n      content: '+';\n      font-size: 20px;\n      line-height: 32px;\n    }\n  }\n  .qn__expand[aria-expanded='true']::before {\n    content: '–';\n  }\n\n  \u002F* When a tile is open or a filter is on, :has() switches the bento from named areas to auto-flow. *\u002F\n  .qn__bento:has(.is-open),\n  .qn__bento.is-filtered {\n    grid-template-areas: none;\n    grid-auto-flow: row dense;\n    .qn__tile {\n      grid-area: auto;\n    }\n    .qn__tile.is-open {\n      grid-column: 1 \u002F -1;\n      min-height: 260px;\n      order: -1;\n    }\n  }\n  .qn__tile[hidden] {\n    display: none;\n  }\n\n  @container bento (max-width: 760px) {\n    .qn__bento {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      grid-template-areas:\n        'hero hero'\n        'stat lock'\n        'md lock'\n        'quote quote'\n        'off export'\n        'widgets widgets';\n    }\n  }\n  @container bento (max-width: 440px) {\n    .qn__bento {\n      grid-template-columns: minmax(0, 1fr);\n      grid-template-areas: 'hero' 'stat' 'lock' 'md' 'quote' 'off' 'export' 'widgets';\n      grid-auto-rows: auto;\n    }\n    .qn__tile {\n      min-height: 140px;\n    }\n  }\n\n  \u002F* ---------- Lab ---------- *\u002F\n  .qn__lab {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    gap: 14px 40px;\n    margin-top: 96px;\n    h2 {\n      margin: 0;\n      font-size: clamp(40px, 7cqw, 80px);\n      line-height: 0.95;\n      letter-spacing: -0.05em;\n    }\n    h3 {\n      margin: 0 0 12px;\n      font-size: 18px;\n      letter-spacing: -0.01em;\n    }\n  }\n  .qn__lab-head {\n    grid-column: 1 \u002F -1;\n    p {\n      max-width: 52ch;\n      color: var(--muted);\n      font-size: 18px;\n    }\n  }\n  .qn__resizer {\n    padding: 22px;\n    border: 1px solid var(--line);\n    border-radius: 28px;\n    background: var(--tile);\n    > label {\n      display: flex;\n      justify-content: space-between;\n      font-weight: 600;\n    }\n    input[type='range'] {\n      width: 100%;\n      margin: 12px 0 18px;\n      accent-color: var(--brand-ink);\n    }\n  }\n  .qn__cq {\n    container: card \u002F inline-size;\n    width: var(--cq);\n    padding: 10px;\n    border: 2px dashed color-mix(in oklch, var(--brand) 50%, transparent);\n    border-radius: 22px;\n    box-sizing: border-box;\n  }\n  .qn__cq-card {\n    position: relative;\n    display: grid;\n    gap: 12px;\n    padding: 12px;\n    border-radius: 16px;\n    background: var(--soft-brand);\n  }\n  @container card (min-width: 300px) {\n    .qn__cq-card {\n      grid-template-columns: 96px 1fr;\n    }\n    .qn__cq-art {\n      aspect-ratio: 1;\n      align-items: center;\n    }\n  }\n  @container card (min-width: 440px) {\n    .qn__cq-card {\n      grid-template-columns: 160px 1fr;\n      padding: 18px;\n    }\n    .qn__cq-body h3 {\n      font-size: 24px;\n    }\n  }\n  .qn__cq-art {\n    aspect-ratio: 16 \u002F 9;\n    max-height: 160px;\n    border-radius: 12px;\n    background:\n      radial-gradient(circle at 70% 30%, oklch(85% 0.12 80) 0 18%, transparent 19%),\n      linear-gradient(160deg, var(--brand), oklch(40% 0.15 300));\n  }\n  .qn__cq-body {\n    h3 {\n      margin: 0;\n    }\n    p {\n      margin: 2px 0 6px;\n      color: var(--muted);\n      font-size: 14px;\n    }\n  }\n  .qn__cq-pin {\n    display: inline-flex;\n    gap: 6px;\n    font-size: 14px;\n    accent-color: var(--brand-ink);\n  }\n  .qn__cq-card:has(.qn__cq-pin input:checked) .qn__cq-badge {\n    display: block;\n  }\n  .qn__cq-badge {\n    display: none;\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: var(--brand);\n    box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand) 30%, transparent);\n  }\n\n  .qn__support {\n    padding: 22px;\n    border-radius: 28px;\n    background: var(--dark);\n    color: var(--paper);\n  }\n  .qn__features {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    li {\n      display: flex;\n      justify-content: space-between;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid color-mix(in oklch, var(--paper) 14%, transparent);\n    }\n    b {\n      font-weight: 600;\n      color: oklch(80% 0.02 270);\n      white-space: nowrap;\n    }\n    .is-yes b {\n      color: oklch(85% 0.15 155);\n    }\n    .is-no b {\n      color: oklch(80% 0.12 50);\n    }\n  }\n\n  \u002F* ---------- Pricing: :has() + subgrid ---------- *\u002F\n  .qn__pricing {\n    margin-top: 96px;\n    h2 {\n      margin: 0 0 24px;\n      font-size: clamp(36px, 6cqw, 64px);\n      letter-spacing: -0.05em;\n      line-height: 1;\n    }\n  }\n  .qn__plans {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n    grid-template-rows: repeat(4, auto);\n    gap: 0 14px;\n  }\n  .qn__plan {\n    display: grid;\n    grid-row: span 4;\n    grid-template-rows: subgrid;\n    gap: 6px;\n    margin-bottom: 14px;\n    padding: 22px;\n    border: 2px solid var(--line);\n    border-radius: 28px;\n    background: var(--tile);\n    cursor: pointer;\n    transition: border-color 200ms, background 200ms;\n    input {\n      position: absolute;\n      opacity: 0;\n    }\n  }\n  .qn__plan:has(input:checked) {\n    border-color: var(--brand);\n    background: var(--soft-brand);\n  }\n  .qn__plan:has(input:focus-visible) {\n    outline: 3px solid var(--brand-ink);\n    outline-offset: 3px;\n  }\n  .qn__plan-name {\n    font-weight: 650;\n  }\n  .qn__plan-price {\n    font-size: 48px;\n    font-weight: 800;\n    letter-spacing: -0.04em;\n    line-height: 1;\n  }\n  .qn__plan-row {\n    color: var(--muted);\n  }\n  .qn__plan-note {\n    color: var(--muted);\n  }\n\n  .qn__foot {\n    margin-top: 64px;\n    padding-top: 20px;\n    border-top: 1px solid var(--line);\n    color: var(--muted);\n    font-size: 14px;\n  }\n\n  @container screen (max-width: 760px) {\n    .qn__nav nav {\n      display: none;\n    }\n    .qn__pill {\n      margin-left: auto;\n    }\n    .qn__lab {\n      grid-template-columns: minmax(0, 1fr);\n    }\n    .qn__hero {\n      padding-top: 36px;\n    }\n    .era-cta a {\n      flex: 1 1 100%;\n    }\n  }\n\n  \u002F* ---------- Scroll-driven motion (progressive enhancement) ---------- *\u002F\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .reveal,\n      .qn__tile {\n        animation: e17-reveal linear both;\n        animation-timeline: view();\n        animation-range: entry 0% cover 25%;\n      }\n      .qn__line--out {\n        animation: e17-slide linear both;\n        animation-timeline: scroll(nearest);\n        animation-range: 0 60cqh;\n      }\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .qn__caret {\n      animation: none;\n    }\n    .era-cta a,\n    .era-cta a::after {\n      transition: none;\n    }\n  }\n}\n\n@keyframes e17-reveal {\n  from {\n    opacity: 0;\n    transform: translateY(40px) scale(0.97);\n  }\n}\n@keyframes e17-slide {\n  to {\n    transform: translateX(-0.5em);\n    color: var(--brand);\n    -webkit-text-stroke-color: var(--brand);\n  }\n}\n@keyframes e17-caret {\n  50% {\n    opacity: 0;\n  }\n}\n\n}",[81,83,85,87],{"caption":46,"file":44,"html":82},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">@media\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (prefers-reduced-motion: no-preference) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  @supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">animation-timeline\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: view()) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    .reveal\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    .qn__tile\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">      animation\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: e17-reveal \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">linear\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> both\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">      animation-timeline\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: view();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">      animation-range\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: entry \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cover\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 25\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    .qn__line--out\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">      animation\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: e17-slide \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">linear\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> both\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">      animation-timeline\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">scroll\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(root);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">      animation-range\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 60\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">vh\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":51,"file":49,"html":84},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F** Wrap a DOM change in a view transition when the browser has one; otherwise just change it. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> transition\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">change\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> void\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> doc\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> document \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">as\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> DocVT\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> still\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">    matchMedia\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'(prefers-reduced-motion: reduce)'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">).matches \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">||\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    document.documentElement.classList.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">contains\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'readable'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">doc.startViewTransition \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">||\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> still) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">return\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> change\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  doc.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">startViewTransition\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(change)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":54,"file":44,"html":86},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.qn__cq\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  container\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: card \u002F inline-size;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--cq\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  padding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">10\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> dashed\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">in\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> oklch\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--brand\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">50\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">transparent\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">22\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">border-box\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.qn__cq-card\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">relative\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  display\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">grid\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  gap\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">12\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  padding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">12\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">16\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--soft-brand\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">@container\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> card (min-width: 300px) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  .qn__cq-card\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">96\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">fr\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  .qn__cq-art\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    aspect-ratio\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    align-items\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">center\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">@container\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> card (min-width: 440px) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  .qn__cq-card\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">160\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">fr\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    padding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">18\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  .qn__cq-body\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    font-size\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">24\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":57,"file":49,"html":88},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> checks\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> Record\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">string\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> boolean\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  vt\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'startViewTransition'\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> in\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> document,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  sda\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> CSS\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'animation-timeline: view()'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  has\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> CSS\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'selector(:has(a))'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  cq\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> CSS\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'container-type: inline-size'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  subgrid\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> CSS\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'grid-template-rows: subgrid'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  anchor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> CSS\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'anchor-name: --a'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  oklch\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> CSS\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'color: color-mix(in oklch, oklch(60% 0.2 30), white)'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  nesting\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> CSS\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'selector(&)'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  popover\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> HTMLElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">prototype\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">hasOwnProperty\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'popover'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">root.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">querySelectorAll\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'[data-check]'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">).\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">forEach\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">((\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ok \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  try\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    ok \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> checks[li.dataset.check\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]?.() \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">??\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  } \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">catch\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    ok \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  li.classList.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">add\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(ok \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">?\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'is-yes'\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'is-no'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  li.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'b'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ok \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">?\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> '✓ Supported'\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> '✕ Not supported'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">})\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1791232162971]