[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}[flex]{flex:1;min-width:0}[flex="0"]{flex:none}[flex="2"]{flex:2;min-width:0}[flex="3"]{flex:3;min-width:0}[flex=auto]{flex:auto;min-width:0}[flex=none]{flex:none}[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}input-field:not([multiline]) [part=input],search-bar [part=input],select-field [part=input],a-command [part=input]{padding-top:calc(2 * round(.5cap,1px) + round(.366em,1px) - round(1em,1px));@supports(hanging-punctuation:first){padding-top: 1px;}}search-bar{display:block;width:100%; [part="bar"] { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px 0 12px; border: 1px solid var(--input-border); border-radius: var(--r3); background: var(--sf5); box-shadow: var(--hl); overflow: hidden; transition: border-color var(--dur2) var(--ease1), box-shadow var(--dur0) var(--ease1); } [part="bar"]:hover { border-color: var(--l3); } [part="icon"] { flex-shrink: 0; color: var(--fg3); } [part="input"] { flex: 1; min-width: 0; height: 32px; background: transparent; color: var(--fg1); font: inherit; box-shadow: none; } [part="input"]::placeholder { color: var(--fg4); } [part="input"]::-webkit-search-cancel-button { display: none; } [part="bar"]:has(> [part="input"]:focus), &[state="focus"] [part="bar"] { border-color: var(--p2); box-shadow: var(--gl1); } [part="action"] { flex-shrink: 0; align-self: stretch; margin: -1px -8px -1px 0; padding-inline: 16px; border: 1px solid var(--p2); border-radius: 0 var(--r3) var(--r3) 0; background: var(--p2); color: var(--p5); font-weight: 700; transition: background var(--dur2) var(--ease1); } [part="action"]:hover { border-color: var(--p3); background: var(--p3); } [part="action"]:active { border-color: var(--p4); background: var(--p4); } [part="action"]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--p5); } [part="filters"] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } [part="pill"] { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--sf3); color: var(--fg3); font-size: var(--t2); transition: border-color var(--dur1) var(--ease1), color var(--dur1) var(--ease1); } [part="pill"]:hover { color: var(--fg1); } [part="pill"][aria-pressed="true"] { background: var(--a3); border-color: var(--l3); color: var(--a1); font-weight: 600; } [part="filters"] [part="kbd"] { margin-left: auto; } &[size="xs"] [part="bar"] { min-height: 24px; padding-left: 8px; font-size: var(--t2); } &[size="xs"] [part="input"] { height: 22px; } &[size="sm"] [part="bar"] { min-height: 28px; font-size: var(--t2); } &[size="sm"] [part="input"] { height: 26px; } &[size="lg"] [part="bar"] { min-height: 40px; font-size: var(--t4); } &[size="lg"] [part="input"] { height: 38px; } &[disabled] { opacity: .4; pointer-events: none; }}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)}}a-tab-rail{display:inline-flex;align-self:flex-start;min-width:0;max-width:100%;padding:4px;border:1px solid var(--input-border);border-radius:var(--r4);background:var(--sf2);box-shadow:var(--hl);overflow-x:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}@supports(animation-timeline:scroll()){mask-image: linear-gradient(90deg,transparent,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent); animation: tab-rail-fade linear both; animation-timeline: scroll(self inline);} [part="tab"] { flex: none; position: relative; height: 24px; padding-inline: 12px; border-radius: var(--r2); color: var(--fg2); line-height: 1; white-space: nowrap; transition: color var(--dur2) var(--ease1), background var(--dur2) var(--ease1); + [part="tab"]::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 1px; background: var(--l1); } &:hover { color: var(--fg1); } &[selected] { background: var(--p2); color: var(--p5); } &[selected]::before, &[selected] + [part="tab"]::before, &:focus-visible::before, &:focus-visible + [part="tab"]::before { content: none; } &:focus-visible { z-index: 1; } &:focus-visible:not([selected]) { color: var(--fg1); } &[selected]:focus-visible { box-shadow: 0 0 0 2px var(--sf2), 0 0 0 4px var(--p2); } &:disabled { opacity: .4; cursor: not-allowed; } }}a-tab-rail[variant=underline],a-tab-rail[variant=pill]{padding:0;border:0;border-radius:0;background:0 0;box-shadow:none; [part="tab"] { color: var(--fg3); &::before { content: none; } &:hover { color: var(--fg1); } }}a-tab-rail[variant=underline] [part=tab]{height:36px;border-radius:var(--r2)var(--r2)0 0;&[selected]{background:0 0;color:var(--a1);box-shadow:inset 0 -2px 0 var(--a1)}&:focus-visible{box-shadow:var(--gl1)}&[selected]:focus-visible{box-shadow:inset 0 -2px 0 var(--a1),var(--gl1)}}a-tab-rail[block]{width:100%; [part="tab"] { flex: 1; min-width: 0; white-space: normal; }}a-tab-rail[variant=pill]{flex-wrap:wrap;gap:8px;overflow:visible; [part="tab"] { height: 28px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--sf1); box-shadow: var(--hl); &[selected] { border-color: var(--p2); background: var(--p2); color: var(--p5); box-shadow: none; } &:focus-visible { box-shadow: var(--gl1); } &[selected]:focus-visible { box-shadow: 0 0 0 2px var(--bg1), 0 0 0 4px var(--p2); } }}icon-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--l1);border-radius:var(--r3);background:var(--l2);box-shadow:var(--hl);& > *{grid-column:span 2}& > :last-child:nth-child(3n + 1){grid-column:span 6}& > :last-child:nth-child(3n + 2), & > :nth-last-child(2):nth-child(3n + 1){grid-column:span 3}@media(max-width:560px){grid-template-columns: repeat(2,minmax(0,1fr)); &>:nth-child(n):nth-child(n){grid-column:auto}&>:last-child:nth-child(odd){grid-column:span 2}}}icon-tile{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:20px 12px;background:var(--sf1);text-align:center;& > an-icon{margin-bottom:8px;color:var(--a1)} [part="title"] { color: var(--fg1); font-size: var(--t3); font-weight: 600; } [part="sub"] { color: var(--fg3); font-size: var(--t1); line-height: 1.4; }}a-console{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl); [part="head"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--l2); } [part="title"] { color: var(--fg1); font-size: var(--t3); font-weight: 600; } [part="body"] { display: flex; flex-direction: column; gap: 2px; max-height: var(--console-height, 240px); min-height: 64px; padding: 8px; overflow-y: auto; background: var(--code-bg); font-family: var(--mono); font-size: var(--t2); line-height: 1.5; overscroll-behavior: contain; &:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--p2); } } [part="empty"] { padding: 4px 8px; color: var(--fg4); } [part="line"] { display: flex; flex: none; align-items: flex-start; gap: 8px; padding: 4px 8px; border-radius: var(--r1); color: var(--fg2); > an-icon { margin-top: 2px; color: var(--fg4); } &[level="info"] > an-icon { color: var(--i1); } &[level="warn"] { background: var(--w3); color: var(--fg1); } &[level="warn"] > an-icon { color: var(--w1); } &[level="error"] { background: var(--e3); color: var(--fg1); } &[level="error"] > an-icon { color: var(--e1); } } [part="text"] { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; } [part="say"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [part="time"] { flex: none; color: var(--fg4); font-variant-numeric: tabular-nums; }}.site-wide{display:block;min-width:0}.pg-page{padding:32px 0 48px;.pg-intro{margin-bottom:24px;h1{margin:8px 0 0} [ui~="lede"] { max-width: 640px; }}.pg-tabs{display:none;margin-bottom:12px}.pg-app{overflow:hidden;border:1px solid var(--l1);border-radius:var(--r4);background:var(--sf1);box-shadow:var(--hl)}.pg-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--l1);select{height:28px;padding:0 8px;border:1px solid var(--input-border);border-radius:var(--r3);background:var(--sf5);color:var(--fg1);font-size:var(--t2);&:focus-visible{outline:0;border-color:var(--p2);box-shadow:var(--gl1)}}}.pg-file{padding:2px 8px;border:1px solid var(--l1);border-radius:var(--r2);color:var(--fg2);font-family:var(--mono);font-size:var(--t1)}.pg-keys{flex:1;min-width:0;overflow:hidden;color:var(--fg4);font-size:var(--t1);white-space:nowrap;text-overflow:ellipsis}.pg-body{display:grid;grid-template-columns:minmax(0,1.2fr)minmax(0,1fr)280px;height:clamp(520px,calc(100vh - 300px),760px)}.pg-code{display:flex;min-width:0;min-height:0;background:var(--code-bg);&:focus-within{box-shadow:inset 0 0 0 1px var(--p2)}}.pg-gutter, .pg-paint, .pg-input{margin:0;padding:16px 12px;border:0;font-family:var(--mono);font-size:13px;line-height:1.8;white-space:pre;tab-size:4}.pg-gutter{flex:none;min-width:44px;overflow:hidden;border-right:1px solid var(--l2);color:var(--fg4);text-align:right;user-select:none}.pg-well{position:relative;flex:1;min-width:0}.pg-paint, .pg-input{position:absolute;inset:0;padding-left:16px;overflow:auto}.pg-input{z-index:2;background:0 0;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--a1);resize:none;outline:0}.pg-paint{z-index:1;overflow:hidden;color:var(--fg2);pointer-events:none;.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}}.pg-out{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;padding:12px;border-left:1px solid var(--l1);> a-console{--console-height:160px;flex:none}}.pg-panel{display:flex;flex-direction:column;min-width:0;min-height:0}.pg-head{margin:0;padding:12px 16px;color:var(--fg1);font-size:var(--t3);font-weight:600;letter-spacing:0}.pg-preview{flex:1;overflow:hidden;border:1px solid var(--l1);border-radius:var(--r3);box-shadow:var(--hl);.pg-head{border-bottom:1px solid var(--l2)}&[focused]{border-color:var(--p2);box-shadow:var(--gl1)}}.pg-frame{flex:1;width:100%;min-height:200px;border:0;background:var(--sf1);color:var(--fg1)}.pg-api{border-left:1px solid var(--l1);.pg-head{padding-bottom:8px}}.pg-search{padding:0 12px 12px}.pg-list{flex:1;min-height:0;padding:0 12px;overflow-y:auto}.pg-none{margin:8px 4px;color:var(--fg3);font-size:var(--t2)}.pg-more{padding:12px 16px;border-top:1px solid var(--l2);font-size:var(--t2);&:focus-visible{box-shadow:inset 0 0 0 1px var(--p2)}}.pg-strip{display:grid;grid-template-columns:minmax(0,1fr)280px;gap:16px;margin-top:16px}.pg-open{align-items:flex-start;gap:8px;padding:16px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);.pg-head{padding:0}p{margin:0 0 8px;color:var(--fg3);font-size:var(--t2)}}@media(max-width:1100px){.pg-body{grid-template-columns:minmax(0,1fr)minmax(0,1fr);grid-template-rows:clamp(480px,calc(100vh - 300px),680px)360px;height:auto}.pg-api{grid-column:1/-1;border-top:1px solid var(--l1);border-left:0}.pg-strip{grid-template-columns:minmax(0,1fr)}}@media(max-width:800px){padding-top: 24px; .pg-tabs{display:block}.pg-keys{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.pg-file{display:none}.pg-bar{flex-wrap:wrap}.pg-bar select{flex:1 0 100%}.pg-run{margin-left:auto}.pg-body{display:block;height:auto;> *{height:65vh;min-height:400px;border:0}&:not([view=code]) > .pg-code, &:not([view=preview]) > .pg-out, &:not([view=api]) > .pg-api{display:none}}}}