body.grid,.site.grid{background-image:var(--grid);background-size:var(--grid-size);background-position:0 -1px}[layout]{display:flex;flex-direction:row;flex-wrap:nowrap;&[layout~=row]{flex-direction:row}&[layout~=col]{flex-direction:column}&[layout~=row-reverse]{flex-direction:row-reverse}&[layout~=col-reverse]{flex-direction:column-reverse}&[layout~=wrap]{flex-wrap:wrap}&[layout~=nowrap]{flex-wrap:nowrap}&[layout~=start]{justify-content:flex-start}&[layout~=center]{justify-content:center}&[layout~=end]{justify-content:flex-end}&[layout~=between]{justify-content:space-between}&[layout~=around]{justify-content:space-around}&[layout~=evenly]{justify-content:space-evenly}&[layout~=top]{align-items:flex-start}&[layout~=middle]{align-items:center}&[layout~=bottom]{align-items:flex-end}&[layout~=stretch]{align-items:stretch}&[layout~=baseline]{align-items:baseline}&[layout~=divide] > * + *{border-left:1px solid var(--l1);padding-left:16px}&[layout~=divide][layout~=col] > * + *, &[layout~=divide][layout~=col-reverse] > * + *{border-left:0;padding-left:0;border-top:1px solid var(--l1);padding-top:16px}}[grid]{display:grid;&[cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}&[cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}&[cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}&[cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}&[cols="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}&[cols="12"]{grid-template-columns:repeat(12,minmax(0,1fr))}&[cols=auto]{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}&[cols=aside]{grid-template-columns:minmax(0,1fr)minmax(0,2fr)}&[fit]{align-items:start}}@media(max-width:1100px){[grid][cols="4"],[grid][cols="5"],[grid][cols="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){[grid][cols]{grid-template-columns:minmax(0,1fr)}}[gap]{gap:8px}[gap="1"]{gap:4px}[gap="2"]{gap:12px}[gap="3"]{gap:16px}[gap="4"]{gap:24px}[gap="5"]{gap:32px}[gap="6"]{gap:48px}[gap="7"]{gap:64px}[gap="8"]{gap:96px}[fx~=grid]{background-image:var(--grid);background-size:var(--grid-size);background-position:0 -1px;background-attachment:fixed}[fx~=fade]{-webkit-mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 35%,transparent 78%);mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 35%,transparent 78%)}[fx~=glass]{background:var(--sf1);border:1px solid var(--l1);box-shadow:var(--hl)}[ui~=display]{margin:0;color:var(--fg1);font-size:var(--th);font-weight:600;line-height:1.02;letter-spacing:-.04em}[ui~=eyebrow]{margin:0 0 12px;color:var(--a1);font-family:var(--mono);font-size:var(--t1);font-weight:600;line-height:16px;letter-spacing:.18em;text-transform:uppercase;&[tone=neutral]{color:var(--fg3)}}[ui~=lede]{max-width:720px;margin:0;color:var(--fg2);font-size:var(--t4);line-height:28px}an-alert>[part=body]>[part=desc]>:where(p,ul,ol,blockquote,table,pre,div,code-block,code-compare,code-tabs)+:where(p,ul,ol,blockquote,table,pre,div,code-block,code-compare,code-tabs){margin-top:12px}stat-card{display:flex;flex-direction:column;gap:4px;min-width:0;padding:20px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);color:var(--fg1);transition:border-color var(--dur3)var(--ease1),box-shadow var(--dur3)var(--ease1);& > an-icon{color:var(--a1);margin-bottom:12px} [part="eyebrow"] { margin-bottom: 4px; color: var(--a1); font-family: var(--mono); font-size: var(--t1); letter-spacing: .1em; text-transform: uppercase; } [part="value"] { font-size: var(--t6); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--fg1); font-variant-numeric: tabular-nums; } [part="unit"] { margin-left: 4px; font-size: .6em; font-weight: 600; letter-spacing: 0; } [part="label"] { font-size: var(--t3); color: var(--fg2); } [part="sub"] { font-size: var(--t2); color: var(--fg3); line-height: 1.4; } [part="note"] { margin-top: 16px; font-size: var(--t2); color: var(--fg3); line-height: 1.5; } &:has([part="eyebrow"]) [part="value"] { color: var(--a1); } &[tone="amber"] [part="value"] { color: var(--a1); } &[tone="success"] [part="value"] { color: var(--s1); } &[tone="warning"] [part="value"] { color: var(--w1); } &[tone="error"] [part="value"] { color: var(--e1); } &[variant="inline"] { flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; & > an-icon { margin: 0; } [part="text"] { display: flex; flex-direction: column; min-width: 0; } [part="value"] { font-size: var(--t3); font-weight: 600; color: var(--a1); letter-spacing: 0; } [part="label"] { font-size: var(--t2); color: var(--fg3); } } &[hot] { border-color: var(--p2); [part="value"] { color: var(--a1); } }}stat-strip{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl); [part="item"] { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; color: var(--fg2); font-size: var(--t2); white-space: nowrap; & + [part="item"] { border-left: 1px solid var(--l2); } & an-icon { color: var(--a1); } } [part="value"] { color: var(--fg1); font-weight: 600; }}@media(max-width:640px){stat-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); [part="item"] { white-space: normal; } [part="item"] + [part="item"] { border-left: 0; } [part="item"]:nth-child(even) { border-left: 1px solid var(--l2); } [part="item"]:nth-child(n + 3) { border-top: 1px solid var(--l2); } [part="item"]:last-child:nth-child(odd) { grid-column: 1 / -1; }}}feature-list{display:flex;flex-direction:column;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);& > feature-row + feature-row{border-top:1px solid var(--l2)}& > feature-row:first-child > [part=row]{border-top-left-radius:calc(var(--r3) - 1px);border-top-right-radius:calc(var(--r3) - 1px)}& > feature-row:last-child > [part=row]{border-bottom-left-radius:calc(var(--r3) - 1px);border-bottom-right-radius:calc(var(--r3) - 1px)}&[variant=cards]{gap:12px;border:0;background:0 0;box-shadow:none;& > feature-row + feature-row{border-top:0}& > feature-row > [part=row]{border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl)}& > feature-row > a[part=row]:hover, & > feature-row > button[part=row]:hover{background:var(--sf1);border-color:var(--l3)}& > feature-row > [part=row]:focus-visible{border-color:var(--p2)}}&[variant=plain]{gap:8px;border:0;border-radius:0;background:0 0;box-shadow:none;& > feature-row + feature-row{border-top:0}& > feature-row > [part=row]{align-items:flex-start;padding:8px 0;border-radius:var(--r2)}& > feature-row > [part=row] > [part=icon]{margin-top:2px}& > feature-row > [part=row] > [part=chevron]{display:none}& > feature-row > a[part=row]:hover, & > feature-row > button[part=row]:hover{background:0 0}& > feature-row > a[part=row]:hover > [part=body] > [part=title], & > feature-row > button[part=row]:hover > [part=body] > [part=title]{color:var(--a1)}}}feature-row{display:block;& > [part=row]{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;background:0 0;color:var(--fg1);font:inherit;text-align:left;text-decoration:none;transition:background var(--dur2)var(--ease1),border-color var(--dur2)var(--ease1)}& > a[part=row], & > button[part=row]{cursor:pointer;&:hover{background:var(--sf3)}&:hover > [part=chevron]{color:var(--a1);transform:translateX(2px)}&:focus-visible{position:relative;z-index:1;outline:none;box-shadow:var(--gl1)}}& > [part=row] > [part=icon]{display:inline-flex;flex-shrink:0;color:var(--a1)}& > [part=row] > [part=body]{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}& > [part=row] > [part=body] > [part=title]{font-weight:700;font-size:var(--t3);color:var(--fg1)}& > [part=row] > [part=body] > [part=desc]{font-size:var(--t2);color:var(--fg3)}& > [part=row] > [part=body] > [part=tags]{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}& > [part=row] > [part=chevron]{display:inline-flex;flex-shrink:0;color:var(--fg4);transition:transform var(--dur3)var(--ease1),color var(--dur3)var(--ease1)}}[ui~=table]{width:100%;border-collapse:collapse;font-size:var(--t3);& th{padding:12px 16px;border-bottom:1px solid var(--l1);color:var(--fg4);font-size:var(--t1);font-weight:600;letter-spacing:.1em;text-align:left;text-transform:uppercase}& td{padding:12px 16px;border-bottom:1px solid var(--l2);color:var(--fg2)}& tbody tr{transition:background var(--dur2)var(--ease1);&:hover td{background:var(--table-hover)}}& tbody tr:last-child td{border-bottom:0}& [ui~=num], & th[ui~=num]{text-align:right;font-variant-numeric:tabular-nums}& td[tone=success]{color:var(--s1)}& td[tone=warning]{color:var(--w1)}& td[tone=error]{color:var(--e1)}& tr[hot] td{background:var(--table-highlight);color:var(--a1);font-weight:600}& tr[selected] td{background:var(--a3);color:var(--fg1)}& tr[selected] td:first-child{box-shadow:inset 2px 0 0 var(--p2)}& tbody tr[hot]:hover td{background:linear-gradient(var(--table-highlight),var(--table-highlight))var(--table-hover)}& tbody tr[selected]:hover td{background:linear-gradient(var(--a3),var(--a3))var(--table-hover)}}comparison-table{display:block;position:relative;max-width:100%;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);overflow-x:auto;& > [part=table]{width:100%;min-width:max-content;border-collapse:collapse;font-size:var(--t2)}& > [part=table] > * > tr > :is(th, td){height:34px;padding:0 12px;border-bottom:1px solid var(--l2);white-space:nowrap}& > [part=table] > thead > tr > th{border-bottom-color:var(--l1);color:var(--fg4);font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-align:center;text-transform:uppercase;&:first-child{text-align:left}}& > [part=table] > tbody > tr > th{color:var(--fg2);font-weight:500;text-align:left}& > [part=table] > * > tr > th:first-child{position:sticky;left:0;z-index:1;background:var(--sf1);box-shadow:inset -1px 0 0 var(--l2)}& > [part=table] > tbody > tr > td{color:var(--fg2);text-align:center;font-variant-numeric:tabular-nums}& > [part=table] > tbody > tr:last-child > *{border-bottom:0}& > [part=table] > tbody > tr{transition:background var(--dur2)var(--ease1);&:hover{background:var(--table-hover)}&:hover > th:first-child{background:linear-gradient(var(--table-hover),var(--table-hover))var(--sf1)}}& > [part=table] > * > tr > [hot]{background:var(--table-highlight);color:var(--a1);font-weight:600}& > [part=table] > thead > tr > th[hot]{color:var(--a1)}& > [part=table] > * > tr > :is(th, td) a{color:var(--a1);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;&:hover{color:var(--p1)}&:focus-visible{border-radius:var(--r1);box-shadow:var(--gl1);outline:none}}&[wrap]{& > [part=table]{min-width:0}& > [part=table] > * > tr > :is(th, td){height:auto;padding:8px 12px;line-height:20px;white-space:normal;overflow-wrap:break-word;vertical-align:top}& > [part=table] > * > tr > :is(th, td) code{overflow-wrap:anywhere}& > [part=table] > * > tr > th:first-child{min-width:96px}& > [part=table] > * > tr > :is(th, td):not(:first-child){text-align:left}& > [part=table] > tbody > tr > td:has(> [part=yes], > [part=no]){text-align:center}container-type:inline-size;@container(max-width:560px){& > [part="table"] { table-layout: fixed; }
            & > [part="table"] > thead > tr > th:first-child { width: 108px; }
        }}& > [part=table] > tbody > tr > td > :is([part=yes], [part=no]){display:inline-flex;vertical-align:middle}& > [part=table] > tbody > tr > td > [part=yes]{color:var(--s1)}& > [part=table] > tbody > tr > td > [part=no]{color:var(--e0);opacity:.8}& > [part=table] > caption, & > [part=table] > tbody > tr > td > [part=sr]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}bench-bars{display:block;position:relative;width:100%;min-width:0; [part="cap"] { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px; color: var(--fg3); font-size: var(--t2); } [part="better"] { color: var(--fg4); font-family: var(--mono); font-size: var(--t1); letter-spacing: .08em; text-transform: uppercase; } [part="rows"] { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } [part="row"], [part="axis"] { display: grid; grid-template-columns: var(--iw, 0px) minmax(0, calc(var(--lw) + 16px)) minmax(48px, 1fr) calc(var(--vw) + 14px) var(--sw, 0px); align-items: center; } [part="icon"] { grid-column: 1; display: inline-flex; color: var(--fg4); } [part="label"] { grid-column: 2; } [part="track"] { grid-column: 3; } [part="value"] { grid-column: 4; } [part="score"] { grid-column: 5; } [part="label"] { padding-right: 12px; overflow: hidden; color: var(--fg2); font-size: var(--t3); text-overflow: ellipsis; white-space: nowrap; } [part="track"] { position: relative; height: 24px; } [part="fill"] { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; min-width: 2px; border-radius: var(--r2); background: var(--l1); transition: width var(--dur4) var(--ease1); } [part="value"] { color: var(--fg3); font-size: var(--t2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } [part="unit"] { color: var(--fg4); } [part="sep"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } [part="score"] { color: var(--fg4); font-family: var(--mono); font-size: var(--t1); text-align: right; } [part="row"][hot] { & [part="fill"] { background: var(--p2); box-shadow: none; } & [part="label"], & [part="value"], & [part="unit"], & [part="score"], & [part="icon"] { color: var(--a1); } & [part="label"], & [part="value"] { font-weight: 700; } } [part="axis"] { margin-top: 8px; } [part="ticks"] { grid-column: 3; position: relative; height: 16px; border-top: 1px solid var(--l2); container-type: inline-size; } [part="tick"] { position: absolute; top: 4px; color: var(--fg4); font-family: var(--mono); font-size: var(--t1); transform: translateX(-50%); &:first-child { transform: none; } &:last-child { transform: translateX(-100%); } } @container (max-width: 240px) { [part="tick"]:not(:first-child, :last-child) { display: none; } } &[size="sm"] { [part="track"] { height: 12px; } [part="fill"] { border-radius: var(--pill); } [part="row"][hot] [part="track"] { height: 12px; } } &[labels="inside"] { [part="row"], [part="axis"] { grid-template-columns: var(--iw, 0px) 0px minmax(0, 1fr) calc(var(--vw) + 14px) var(--sw, 0px); } [part="label"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } [part="track"] { height: 28px; } [part="fill"] { overflow: hidden; } [part="in"] { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; padding: 0 12px; color: var(--fg2); font-size: var(--t2); white-space: nowrap; } [part="row"][hot] [part="in"] { color: var(--a1); font-weight: 700; } [part="row"][hot] [part="fill"] [part="in"] { color: var(--p5); } }}[ui~=bench]{display:flex;flex-direction:column;gap:12px;width:100%}code-block,[ui~=code-wrap]{.kw{color:var(--code-keyword)}.fn{color:var(--code-function)}.str{color:var(--code-string)}.num{color:var(--code-number)}.cm{color:var(--code-comment);font-style:italic}}code-block{display:block;position:relative;min-width:0;border:1px solid var(--l1);border-radius:var(--r3);background:var(--code-bg);box-shadow:var(--hl);container-type:inline-size; [part="head"] { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--l2); } [part="label"] { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; } [part="file"] { overflow: hidden; color: var(--fg2); font-family: var(--mono); font-size: var(--t2); text-overflow: ellipsis; white-space: nowrap; } [part="lang"] { flex: none; color: var(--fg3); font-family: var(--mono); font-size: var(--t1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } [part="note"] { flex: none; margin-right: 4px; color: var(--fg4); font-size: var(--t1); } [part="tabs"] { display: flex; flex: 1; align-self: stretch; min-width: 0; margin-left: -16px; overflow-x: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } [part="tab"] { flex: none; padding-inline: 16px; color: var(--fg3); font-size: var(--t2); @supports (text-box: trim-both cap alphabetic) { padding-top: max(0px, 2 * (round(.5cap + .5px, 1px) - .5px - .5cap) + .02px); padding-bottom: max(0px, 2 * (.5cap + .5px - round(.5cap + .5px, 1px)) - .02px); text-box: trim-both cap alphabetic; } white-space: nowrap; transition: color var(--dur2) var(--ease1), box-shadow var(--dur2) var(--ease1); &:hover { color: var(--fg1); } &[selected] { color: var(--a1); box-shadow: inset 0 -2px 0 var(--a1); } &:focus-visible { color: var(--a1); box-shadow: inset 0 0 0 1px var(--p2), inset 0 -2px 0 var(--a1); } &:first-child:focus-visible { border-top-left-radius: var(--r3); } } [part="play"], [part="copy"] { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r2); color: var(--fg3); font-size: var(--t2); white-space: nowrap; transition: color var(--dur2) var(--ease1), background var(--dur2) var(--ease1), border-color var(--dur2) var(--ease1); &:hover { background: var(--sf3); color: var(--fg1); } &:active { background: var(--sf1); } &:focus-visible { border-color: var(--p2); box-shadow: var(--gl1); } &[hidden] { display: none; } } [part="play"] { color: var(--a1); } [part="play"]:hover { color: var(--a1); } [part="ico"], [part="done"] { display: inline-flex; } [part="done"] { display: none; } [part="copy"][state~="copied"] { border-color: var(--s2); background: var(--s3); color: var(--s1); [part="ico"] { display: none; } [part="done"] { display: inline-flex; } } [part="copy"][state~="error"] { border-color: var(--e2); background: var(--e3); color: var(--e1); } [part="body"] { margin: 0; padding: 16px 0; border-radius: 0 0 var(--r3) var(--r3); overflow-x: auto; overscroll-behavior-x: contain; color: var(--fg2); font-family: var(--mono); font-size: var(--t2); line-height: 20px; tab-size: 4; &:focus-visible { box-shadow: var(--gl1); } &[hidden] { display: none; } } [part="preview"]:not([hidden]) { display: grid; place-items: center; } [part="body"] > code { display: inline-block; min-width: 100%; } [part="line"] { display: block; padding: 0 20px; &[mark] { background: var(--a4); box-shadow: inset 2px 0 0 var(--a1); } } &[lines] code { counter-reset: line; } &[lines] [part="line"] { position: relative; padding-left: 52px; counter-increment: line; &::before { content: counter(line); position: absolute; left: 0; width: 36px; color: var(--fg4); text-align: right; user-select: none; } } [part="status"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } > [part="body"]:first-child { border-radius: var(--r3); } &[verdict] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; } &[verdict] [part="body"] { grid-column: 1; padding: 12px 0; border-radius: var(--r3); [part="line"] { padding: 0 8px 0 16px; } } &[verdict="bad"] { border-color: var(--e2); } &[verdict="good"] { border-color: var(--s2); } [part="caption"] { grid-column: 1; padding: 12px 8px 0 16px; font-family: var(--mono); font-size: var(--t1); } &[verdict="bad"] [part="caption"] { color: var(--e1); } &[verdict="good"] [part="caption"] { color: var(--s1); } &[verdict] [part="caption"] + [part="body"] { padding-top: 4px; } [part="aside"] { display: flex; align-items: center; gap: 4px; grid-column: 2; grid-row: 1; align-self: start; padding: 8px 8px 8px 12px; } [part="caption"] ~ [part="aside"] { grid-row: 1 / span 2; } [part="verdict"] { display: inline-flex; align-items: center; height: 28px; } &[verdict] [part="copy"] { width: 28px; padding: 0; justify-content: center; [part="text"] { display: none; } } &[verdict="bad"] [part="verdict"] { color: var(--e1); } &[verdict="good"] [part="verdict"] { color: var(--s1); } &[verdict]:has(> [part="body"]:focus-visible) { border-color: var(--p2); box-shadow: var(--gl1); } &[verdict] > [part="body"]:focus-visible { box-shadow: none; } @container (max-width: 400px) { [part="play"] [part="text"], [part="copy"]:not([state]) [part="text"] { display: none; } }}a-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);color:var(--fg1);transition:border-color var(--dur2)var(--ease1); :is(&, & > [part="link"]) > [part="head"] { display: flex; align-items: center; gap: 12px; min-width: 0; } :is(&, & > [part="link"]) > [part="head"] > [part="icon"] { display: inline-flex; flex: none; color: var(--a1); } :is(&, & > [part="link"]) > [part="head"] > [part="heading"] { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } :is(&, & > [part="link"]) > [part="head"] > [part="heading"] > [part="eyebrow"] { display: inline-flex; align-items: center; gap: 8px; color: var(--a1); font-family: var(--mono); font-size: var(--t1); font-weight: 600; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; } :is(&, & > [part="link"]) > [part="head"] > [part="heading"] > [part="title"] { margin: 0; color: var(--fg1); font-size: var(--t4); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; } :is(&, & > [part="link"]) > [part="head"] > [part="tools"] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; } :is(&, & > [part="link"]) > [part="body"] { display: flex; flex-direction: column; gap: 12px; min-width: 0; } :is(&, & > [part="link"]) > [part="body"] > [part="desc"] { margin: 0; color: var(--fg3); font-size: var(--t3); line-height: 1.5; } &[variant="panel"] { & > [part="head"] { flex-wrap: wrap; padding: 16px 20px; } & > [part="body"] { padding: 20px; } & > [part="foot"] { margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--l2); } & > [part="head"]:has(+ [part="body"], + [part="foot"]) { border-bottom: 1px solid var(--l2); } & > [part="head"] > [part="heading"] > [part="title"] { font-size: var(--t3); } } &:not([variant="panel"]) { gap: 8px; padding: 20px; :is(&, & > [part="link"]) > [part="foot"] { margin-top: 8px; } } &[variant="feature"] { :is(&, & > [part="link"]) > [part="head"] { flex-direction: column; align-items: flex-start; } :is(&, & > [part="link"]) > [part="head"] > [part="icon"] { margin-bottom: 8px; } } &[variant="tip"] { gap: 4px; padding: 16px; border-color: var(--l3); background: var(--a4); & > [part="head"] > [part="heading"] { gap: 8px; } & > [part="head"] > [part="heading"] > [part="title"] { font-size: var(--t3); } & > [part="body"] > [part="desc"] { font-size: var(--t2); } } &[variant="link"] { padding: 0; &:not([hot]):hover { border-color: var(--l3); } &:has(:focus-visible) { border-color: var(--p2); box-shadow: var(--gl1); } } & > [part="link"] { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 20px; border-radius: inherit; color: inherit; text-decoration: none; &:focus-visible { outline: none; } &:hover > [part="action"] > an-icon { transform: translateX(2px); } } & > [part="link"] > [part="action"] { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; color: var(--a1); font-size: var(--t3); font-weight: 600; & > an-icon { transition: transform var(--dur2) var(--ease1); } } &[hot] { border-color: var(--p2); box-shadow: var(--sh2); }}.site-wide{display:block;min-width:0}.hero{position:relative;width:100%;padding:48px 0 64px;overflow:hidden;> .container{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:64px;max-width:1280px;padding:0 24px;margin:0 auto}.hero-copy{flex:1;min-width:0;max-width:560px}}@media(max-width:1100px){.hero{padding:48px 0;> .container{flex-direction:column;align-items:flex-start;gap:48px}.hero-copy{max-width:none;width:100%}}}@media(max-width:640px){.hero{padding:32px 0 48px;> .container{padding:0 16px}}}.hero-visual{position:relative;flex:none;width:480px;aspect-ratio:1}:is(.demo-result,code-block>[part=preview]){min-height:96px;margin:8px;padding:24px;border:1px dashed var(--l1);border-radius:var(--r2);background:var(--bg1);color:var(--fg2);font-size:var(--t3);line-height:1.5;overflow-x:auto;&:focus-visible{border-style:solid;border-color:var(--p2)} :is(h1, h2, h3, h4) { margin: 0 0 8px; color: var(--fg1); } h1 { font-size: var(--t6); } h2 { font-size: var(--t5); } h3 { font-size: var(--t4); margin-top: 16px; } p { margin: 4px 0; } :is(ul, ol) { margin: 8px 0; padding-left: 20px; list-style: disc; } li { padding: 2px 0; list-style: inherit; } li.done > label { text-decoration: line-through; opacity: .6; } button { height: 28px; padding: 0 12px; border: 1px solid var(--l1); border-radius: var(--r3); background: var(--sf1); box-shadow: var(--hl); color: var(--fg1); font-size: var(--t2); font-weight: 600; cursor: pointer; @supports (text-box: trim-both cap alphabetic) { &:not([style*="height"]) { padding-top: max(0px, 2 * (round(.5cap, 1px) - .5cap) + .01px); padding-bottom: max(0px, 2 * (.5cap - round(.5cap, 1px)) - .01px); text-box: trim-both cap alphabetic; } } &:hover { border-color: var(--l3); } &:focus-visible { box-shadow: var(--gl1); } } button[type="submit"] { background: var(--p2); border-color: var(--p2); color: var(--p5); } button[style*="background"] { color: light-dark(var(--fg1), var(--bg1)); } form, fieldset { display: flex; flex-direction: column; gap: 8px; max-width: 400px; } fieldset { padding: 16px; border: 1px solid var(--l1); border-radius: var(--r3); } legend { padding: 0 4px; color: var(--fg1); font-size: var(--t3); font-weight: 600; } :is(form, fieldset) > :is(button, a-button) { align-self: flex-start; } ol.steps { display: flex; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: step; } ol.steps > li { display: flex; align-items: center; gap: 6px; padding: 0; color: var(--fg3); font-size: var(--t2); counter-increment: step; } ol.steps > li::before { content: counter(step); display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--l1); border-radius: var(--pill); font-size: var(--t1); } ol.steps > li:is([aria-current], .done) { color: var(--a1); } ol.steps > li:is([aria-current], .done)::before { border-color: var(--l3); background: var(--a3); } label { color: var(--fg3); font-size: var(--t2); } label:has(input[type="checkbox"], input[type="radio"]) { display: flex; align-items: center; gap: 8px; color: var(--fg1); font-size: var(--t3); } input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select { width: 100%; max-width: 400px; height: 34px; padding: 0 12px; border: 1px solid var(--input-border); border-radius: var(--r3); background: var(--sf5); color: var(--fg1); transition: border-color var(--dur2) var(--ease1); &:hover { border-color: var(--l3); } &:focus-visible { border-color: var(--l3); box-shadow: var(--gl1); } &[aria-invalid="true"] { border-color: var(--e0); } &[aria-invalid="true"]:focus-visible { border-color: var(--e0); box-shadow: var(--gle); } } textarea { height: auto; min-height: 34px; padding: 6px 12px; } input::placeholder { color: var(--fg4); } input:is([type="checkbox"], [type="radio"]) { position: relative; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--input-border); border-radius: var(--r1); background: var(--sf5); box-shadow: var(--hl); appearance: none; -webkit-appearance: none; cursor: pointer; &:hover:not(:checked) { border-color: var(--l3); } &:focus-visible { border-color: var(--p2); box-shadow: var(--gl1); } &:checked::after { content: ""; position: absolute; } } input[type="checkbox"]:checked { border-color: var(--p2); background: var(--p2); &::after { inset: 0; background: var(--p5); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12L10 17L20 7'%2F%3E%3C%2Fsvg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12L10 17L20 7'%2F%3E%3C%2Fsvg%3E") center / 12px no-repeat; } } input[type="radio"] { border-radius: var(--pill); } input[type="radio"]:checked { border-color: var(--p2); &::after { inset: 3px; border-radius: var(--pill); background: var(--p2); } } table { width: 100%; border-collapse: collapse; } th { padding: 8px 12px; border-bottom: 1px solid var(--l1); color: var(--fg3); font-size: var(--t2); text-align: left; } td { padding: 8px 12px; border-bottom: 1px solid var(--l2); } tr:hover td { background: var(--table-hover); } small, [role="status"] { color: var(--fg3); font-size: var(--t2); } [role="alert"] { color: var(--e1); font-size: var(--t2); font-weight: 600; } .error, [aria-invalid="true"] ~ [role="status"] { display: flex; color: var(--fg1); font-size: var(--t2); font-weight: 600; line-height: 1.4; } :is(.error, [aria-invalid="true"] ~ [role="status"]):not(:empty)::before { content: ''; flex: none; width: 1.1em; height: 1.1em; margin: .15em 4px 0 0; background: var(--e0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12ZM15 15L9 9M9 15L15 9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12ZM15 15L9 9M9 15L15 9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .card, .user-card, .box { max-width: 360px; padding: 16px; border: 1px solid var(--l1); border-radius: var(--r3); background: var(--sf1); } .box { margin: 4px 0; padding: 12px 16px; } :is(.card, .user-card) + :is(.card, .user-card), * + * > :is(.card, .user-card) { margin-top: 8px; } .card-header { display: flex; align-items: center; gap: 8px; } .badge { display: inline-block; padding: 2px 8px; border-radius: var(--pill); background: var(--a3); color: var(--a1); font-size: var(--t1); font-weight: 700; text-transform: uppercase; } .todo { max-width: 400px; } .todo > div { display: flex; gap: 8px; margin: 12px 0; } .todo li { display: flex; align-items: center; gap: 8px; } .date-picker { max-width: 320px; } .date-picker > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .date-picker td { text-align: center; cursor: pointer; border-radius: var(--r2); } .date-picker td:hover { background: var(--sf3); } .date-picker td.selected { background: var(--p2); color: var(--p5); font-weight: 700; } v-c { display: block; overflow: hidden auto; border: 1px solid var(--l1); border-radius: var(--r3); } a-row { display: flex; border-bottom: 1px solid var(--l2); } a-row:hover { background: var(--table-hover); } .table-header { position: sticky; top: 0; z-index: 1; display: flex; border-bottom: 1px solid var(--l1); background: var(--sf1); } .table-cell { flex: 1; padding: 8px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-header .table-cell { color: var(--fg3); font-size: var(--t2); font-weight: 600; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }}.landing{> section:where(:not(.hero)){padding:48px 0}> section + section:not(.showcase){border-top:1px solid var(--l1)}header{margin-bottom:32px;h2{margin:0} [ui~="lede"] { margin-top: 12px; }}.hero > [fx~=grid]{position:absolute;inset:0;pointer-events:none;background:var(--copper);mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='300'><path stroke='%23000' stroke-opacity='.1' d='M40.5 0V300M292.5 0V300M0 40.5H420M0 157.5H420'/><path stroke='%23000' stroke-opacity='.06' d='M292 236.5H420'/><path fill-opacity='.35' d='M39 40.5a1.5 1.5 0 0 0 3 0a1.5 1.5 0 0 0-3 0M291 40.5a1.5 1.5 0 0 0 3 0a1.5 1.5 0 0 0-3 0M39 157.5a1.5 1.5 0 0 0 3 0a1.5 1.5 0 0 0-3 0M291 157.5a1.5 1.5 0 0 0 3 0a1.5 1.5 0 0 0-3 0'/></svg>")0 0/420px 300px,radial-gradient(ellipse 110% 100% at 50% 0%,#000 35%,transparent 78%);mask-composite:intersect}.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:24px; [ui~="lede"] { max-width: 480px; }}.hero-visual{pointer-events:none;> *{position:absolute} [part="scene"] { left: -81.3%; top: -77.3%; width: 286.6%; height: 219.1%; &::before, &::after { content: ''; position: absolute; inset: 0; mask-size: 100% 100%; mask-composite: intersect; } &::before { background: var(--copper); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-300 -400 1700 1300'><linearGradient id='hxb' x2='0' y2='1'><stop stop-opacity='.75'/><stop offset='.45' stop-opacity='.36'/><stop offset='1' stop-opacity='0'/></linearGradient><linearGradient id='hxw' x2='0' y2='1'><stop stop-opacity='.12'/><stop offset='1' stop-opacity='0'/></linearGradient><radialGradient id='hxp' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(380 0 0 45 478 525)'><stop stop-opacity='.5'/><stop offset='.25' stop-opacity='.25'/><stop offset='1' stop-opacity='0'/></radialGradient><radialGradient id='hxf' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(460 0 0 150 478 525)'><stop stop-opacity='.4'/><stop offset='.5' stop-opacity='.1'/><stop offset='1' stop-opacity='0'/></radialGradient><radialGradient id='hxr'><stop stop-opacity='.75'/><stop offset='1' stop-opacity='0'/></radialGradient><clipPath id='hxc'><path d='M-300-400H1400V525H-300z'/></clipPath><radialGradient id='hxl' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(560 0 0 560 470 460)'><stop offset='.45' stop-color='%23fff'/><stop offset='.75' stop-color='%23fff' stop-opacity='.35'/><stop offset='1' stop-color='%23fff' stop-opacity='0'/></radialGradient><mask id='hxa'><path fill='url(%23hxl)' d='M-300-400h1700v1300h-1700z'/></mask><g clip-path='url(%23hxc)' mask='url(%23hxa)'><g transform='rotate(-35 160 525)'><path fill='url(%23hxb)' d='M-600 525h2400v230h-2400z'/><path fill='url(%23hxw)' d='M-600 757h2400v150h-2400z'/></g></g><linearGradient id='hxs' x2='0' y2='1'><stop stop-opacity='0'/><stop offset='.5' stop-opacity='.35'/><stop offset='1' stop-opacity='0'/></linearGradient><g clip-path='url(%23hxc)' fill='url(%23hxs)'><path transform='rotate(-35 160 525)' d='M-600 513h2400v24h-2400z'/><path fill-opacity='.4' transform='rotate(-35 160 525)' d='M-600 478h2400v20h-2400zM-600 747h2400v20h-2400z'/></g><path fill='none' stroke='url(%23hxf)' stroke-width='1.25' d='M-2 525L-657 900M78 525L-467 900M158 525L-278 900M238 525L-89 900M318 525L100 900M398 525L289 900M478 525L478 900M558 525L667 900M638 525L856 900M718 525L1045 900M798 525L1234 900M878 525L1423 900M958 525L1613 900'/><ellipse cx='478' cy='545' rx='400' ry='80' fill='url(%23hxp)'/><ellipse cx='420' cy='550' rx='380' ry='80' fill='url(%23hxr)' fill-opacity='.45'/><path fill='none' stroke='url(%23hxf)' shape-rendering='crispEdges' stroke-width='1.25' stroke-opacity='.8' d='M-300 549H1400M-300 587H1400M-300 650H1400'/><ellipse cx='478' cy='525' rx='640' ry='6' fill='url(%23hxr)'/></svg>"), radial-gradient(closest-side at 45.8% 56%, #000 60%, transparent); } &::after { background: var(--seam); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-300 -400 1700 1300'><linearGradient id='hxh' gradientUnits='userSpaceOnUse' x1='-300' x2='1400'><stop stop-opacity='0'/><stop offset='.46'/><stop offset='1' stop-opacity='0'/></linearGradient><clipPath id='hxc'><path d='M-300-400H1400V525H-300z'/></clipPath><path transform='rotate(-35 160 525)' stroke='%23000' stroke-opacity='.18' d='M-600 525H1800'/><g clip-path='url(%23hxc)'><path transform='rotate(-35 160 525)' stroke='%23000' stroke-opacity='.9' stroke-width='1.4' d='M-600 525H1800'/></g><g clip-path='url(%23hxc)'><path transform='rotate(-35 160 525)' stroke='%23000' stroke-opacity='.45' d='M-600 488H1800M-600 757H1800'/></g><path stroke='url(%23hxh)' stroke-width='1.6' d='M-300 525H1400'/></svg>"), radial-gradient(closest-side at 45.8% 56%, #000 35%, transparent); } } [part="grain"] { left: -60%; top: -50%; width: 220%; height: 200%; transform: rotate(-35deg); mask-image: radial-gradient(closest-side, #000 30%, transparent); &::before, &::after { content: ''; position: absolute; inset: 0; } &::before { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='hxn' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.01 .5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='5 0 0 0 -2.9 5 0 0 0 -2.9 5 0 0 0 -2.9 0 0 0 0 1' result='s'/><feTurbulence type='fractalNoise' baseFrequency='.025' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/><feComposite in2='s' operator='arithmetic' k2='.4' k3='.3' k4='.29' result='m'/><feTurbulence type='fractalNoise' baseFrequency='.9' stitchTiles='stitch' seed='3'/><feColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/><feComposite in2='m' operator='arithmetic' k2='.45' k3='1' k4='-.22' result='f'/><feTurbulence type='fractalNoise' baseFrequency='.8 .012' seed='5' stitchTiles='stitch'/><feColorMatrix values='6 0 0 0 -3.6 6 0 0 0 -3.6 6 0 0 0 -3.6 0 0 0 0 1'/><feComposite in2='f' operator='arithmetic' k2='.25' k3='1'/></filter><rect width='400' height='400' filter='url(%23hxn)'/></svg>") 0 0 / 400px; mask-image: linear-gradient(215deg, #000 58%, rgb(0 0 0 / 15%) 61%); } &::after { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='hxg' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='4' seed='9' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1' result='m'/><feTurbulence type='fractalNoise' baseFrequency='.8' stitchTiles='stitch' seed='2'/><feColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/><feComposite in2='m' operator='arithmetic' k2='.6' k3='.9' k4='-.25'/></filter><rect width='300' height='300' filter='url(%23hxg)'/></svg>") 0 0 / 300px; mask-image: linear-gradient(215deg, transparent 58%, #000 61%); } mix-blend-mode: overlay; opacity: .6; } [part="tile"] { left: 14%; top: 6%; width: 72%; aspect-ratio: 1; mx-logo { position: absolute; left: -1.75%; top: -.9%; width: 103.51%; svg { width: 100%; height: auto; } } &::after { content: ''; position: absolute; left: .95%; top: 1.2%; width: 98.1%; height: 99.3%; border-radius: 17% / 16.8%; box-shadow: inset 0 0 4px var(--hot), inset 0 0 10px var(--ember), inset 0 0 16px color-mix(in srgb, var(--ember) 40%, transparent), inset 0 -10px 24px color-mix(in srgb, var(--ember) 15%, transparent); mix-blend-mode: lighten; } } [part="smoke"] { position: absolute; left: -11.16%; top: -10.9%; width: 122.34%; height: 123.51%; overflow: hidden; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='107 102 1040 1050'><filter id='hxs'><feGaussianBlur stdDeviation='16'/></filter><g filter='url(%23hxs)'><linearGradient id='hxt' x2='0' y2='1'><stop stop-opacity='.4'/><stop offset='.4'/></linearGradient><rect x='195' y='190' width='864' height='874' rx='157' fill='none' stroke='url(%23hxt)' stroke-width='44'/></g></svg>") 0 0 / 100% 100%; mix-blend-mode: plus-lighter; &::before, &::after { content: ''; position: absolute; inset: 0 -256px -256px 0; background: var(--copper); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='hxk' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='5' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1' result='c'/><feTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/><feComposite in2='c' operator='arithmetic' k2='.45' k3='.75' k4='-.1'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -1'/></filter><rect width='256' height='256' filter='url(%23hxk)'/></svg>") 0 0 / 256px; mix-blend-mode: plus-lighter; opacity: .22; animation: hx-rise-left 19s linear infinite; } &::after { inset: 0 0 -512px -256px; mask-position: 97px 61px; animation: hx-rise-right 26s linear infinite; } }} :root[data-theme="light"] & .hero-visual { [part="scene"] { opacity: .45; } [part="grain"], [part="smoke"] { display: none; } } .showcase { padding-top: 0; [fx~="glass"] { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: center; padding: 16px; border-radius: var(--r4); } } .bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: center; margin-bottom: 16px; padding: 32px; border-radius: var(--r4); h3 { margin: 0 0 8px; } p { margin: 0; color: var(--fg3); } } .cta { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 32px; border-radius: var(--r4); text-align: center; h2 { margin: 0; font-size: var(--t7); } [ui~="lede"] { max-width: 560px; margin-bottom: 16px; } }}@media(max-width:1100px){.landing{.hero-visual{display:none}.showcase [fx~=glass], .bench{grid-template-columns:minmax(0,1fr)}.bench{gap:32px}}}@media(max-width:640px){.landing{> section:where(:not(.hero)){padding:32px 0}.showcase [fx~=glass]{padding:8px}.bench{padding:20px}.cta{padding:48px 16px}}}