[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:960px){[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}[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}article-head{display:block;margin-bottom:32px;h1 + [ui~=lede]{margin-top:16px}}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}an-timeline{display:flex;flex-direction:column}timeline-item{display:grid;grid-template-columns:28px 1fr;gap:16px;padding:0 0 24px;position:relative;&::before{content:'';position:absolute;left:13px;top:18px;bottom:-4px;width:1px;background:var(--l3)}&:last-child{padding-bottom:0;&::before{display:none}}& > [part=dot]{width:12px;height:12px;margin-top:4px;margin-left:7px;border:2px solid var(--p2);border-radius:50%;background:0 0;position:relative;z-index:1;transition:background var(--dur3)var(--ease1)}& > [part=body]{display:flex;flex-direction:column;gap:4px;min-width:0;line-height:1.5}& > [part=body] > [part=head]{display:flex;align-items:baseline;justify-content:space-between;gap:12px}& > [part=body] > [part=head] > [part=version]{font-weight:700;font-size:var(--t3);color:var(--fg1)}& > [part=body] > [part=head] > [part=date]{font-size:var(--t2);color:var(--fg4);white-space:nowrap}& > [part=body] > [part=title]{font-size:var(--t3);color:var(--fg3)}& > [part=body] [part=notes]{display:flex;flex-direction:column;gap:4px;margin:4px 0 0;padding:0;list-style:none;& > li{position:relative;padding-left:16px;color:var(--fg2);font-size:var(--t2);&::before{content:'';position:absolute;left:4px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--fg4)}& a{color:var(--a1);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;&:hover{color:var(--p1)}&:focus-visible{outline:none;border-radius:var(--r1);box-shadow:var(--gl1)}}}}& > [part=body] > [part=group]{margin-top:8px;& > [part=label]{color:var(--fg4);font-family:var(--mono);font-size:var(--t1);font-weight:600;line-height:16px;letter-spacing:.1em;text-transform:uppercase}&[tone=danger] > [part=label]{color:var(--e1)}}& > [part=body] > [part=link]{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:8px;border-radius:var(--r1);color:var(--a1);font-size:var(--t2);font-weight:600;text-decoration:none;& > an-icon{transition:transform var(--dur3)var(--ease1)}&:hover > an-icon{transform:translateX(2px)}&:focus-visible{outline:none;box-shadow:var(--gl1)}}&[hot]{& > [part=dot]{background:var(--p2)}& > [part=body] > [part=head] > [part=version]{color:var(--a1)}}}an-timeline[variant=changelog] timeline-item{& > [part=body] > [part=head]{align-items:center;justify-content:flex-start}& > [part=dot]{margin-top:5px}& > [part=body] > [part=title]{color:var(--fg1);font-weight:600}}an-timeline code{background:color-mix(in srgb,var(--fg1) 8%,transparent);color:var(--fg1)}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="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); }}