zinc.css 0.0.0-pre.2 → 0.0.0-pre.3

package/README.md

@@ -15,6 +15,23 @@ sunshine.
 <button>It styles itself</button>
 ```
 
+### From a CDN
+
+No download, no `npm install` — just point a `<link>` at jsDelivr or unpkg:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zinc.css/zinc.css" />
+<!-- or the minified build -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zinc.css/zinc.min.css" />
+
+<!-- unpkg works the same way -->
+<link rel="stylesheet" href="https://unpkg.com/zinc.css/zinc.css" />
+```
+
+Pin a version once you're past prototyping (e.g. `zinc.css@0.1.0/zinc.css`) —
+an unpinned URL always serves `latest`, which is fine for a demo but can
+change under you in production.
+
 ---
 
 ### Fonts (optional but recommended)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "zinc.css",
-	"version": "0.0.0-pre.2",
+	"version": "0.0.0-pre.3",
 	"description": "A classless CSS framework for semantic HTML. Sun-bleached, coastal, one bright accent. No classes, no build step.",
 	"license": "MIT",
 	"author": "Corey McGeachie",

package/zinc.css

@@ -181,6 +181,10 @@ h6 {
   margin-block-start: 1.4em;
 }
 
+:where(header > h1, header > h2, header > h3, header > h4, header > h5, header > h6) {
+  margin-block-start: 0;
+}
+
 :where(p, ul, ol, dl, blockquote, pre, table, figure, hr, details, fieldset, address, video, audio) {
   margin-block-end: 1.2rem;
 }
@@ -402,7 +406,7 @@ caption {
 th, td {
   text-align: left;
   vertical-align: top;
-  padding: .7rem 1rem;
+  padding: .5rem 1rem;
 }
 
 thead th {
@@ -798,6 +802,10 @@ article > footer {
   display: flex;
 }
 
+article + article {
+  margin-top: 1.5rem;
+}
+
 aside {
   background: var(--accent-soft);
   border-inline-start: 4px solid var(--accent);

package/zinc.min.css

@@ -1 +1 @@
-:root{color-scheme:light dark;--font-sans:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;--font-mono:"Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--font-display:var(--font-sans);--radius:6px;--radius-lg:12px;--radius-pill:999px;--width:72rem;--gutter:clamp(1.25rem, 4vw, 2.5rem);--accent:#2a6ff3;--on-accent:#fff;--accent-press:color-mix(in srgb, var(--accent) 86%, #000);--accent-soft:color-mix(in srgb, var(--accent) 14%, transparent);--accent-faint:color-mix(in srgb, var(--accent) 7%, transparent);--bg:#faf9f7;--surface:#fff;--surface-alt:#f1efea;--text:#131210;--muted:#6c6a64;--line:#e4e1da;--ink:#131210;--shadow:0 1px 2px #1312100d, 0 14px 30px -18px #13121047;--code-bg:#18181b;--code-text:#ededf0;accent-color:var(--accent);caret-color:var(--accent)}:root[data-accent=electric]{--accent:#2a6ff3;--on-accent:#fff}:root[data-accent=hot]{--accent:#ff2d78;--on-accent:#fff}:root[data-accent=amber]{--accent:#f59e0b;--on-accent:#1c1407}:root[data-accent=forest]{--accent:#15803d;--on-accent:#fff}:root[data-accent=violet]{--accent:#7c3aed;--on-accent:#fff}@media (prefers-color-scheme:dark){:root:not([data-mode=light]){--bg:#0c0c0d;--surface:#161618;--surface-alt:#1e1e21;--text:#f4f3f0;--muted:#a3a19a;--line:#2a2a2e;--ink:#f4f3f0;--shadow:0 1px 2px #0006, 0 18px 40px -20px #000000bf;--accent-press:color-mix(in srgb, var(--accent) 82%, #fff)}}:root[data-mode=dark]{--bg:#0c0c0d;--surface:#161618;--surface-alt:#1e1e21;--text:#f4f3f0;--muted:#a3a19a;--line:#2a2a2e;--ink:#f4f3f0;--shadow:0 1px 2px #0006, 0 18px 40px -20px #000000bf;--accent-press:color-mix(in srgb, var(--accent) 82%, #fff)}*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth;scrollbar-color:var(--muted) transparent}body{font-family:var(--font-sans);color:var(--text);background:var(--bg);max-width:var(--width);padding:var(--gutter);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin-inline:auto;font-size:clamp(1rem,.965rem + .18vw,1.0625rem);line-height:1.65}::selection{background:var(--accent);color:var(--on-accent)}:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px;border-radius:3px}[hidden]{display:none!important}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}h1,h2,h3,h4,h5,h6{letter-spacing:-.025em;text-wrap:balance;color:var(--text);font-weight:700;line-height:1.08}h1{letter-spacing:-.04em;font-size:clamp(2.4rem,1.7rem + 3vw,3.9rem)}h2{letter-spacing:-.032em;font-size:clamp(1.8rem,1.4rem + 1.7vw,2.55rem)}h3{font-size:clamp(1.3rem,1.15rem + .7vw,1.65rem)}h4{font-size:1.2rem}h5{text-transform:uppercase;letter-spacing:.1em;font-size:.95rem}h6{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:.8rem}:where(h1,h2,h3,h4,h5,h6){margin-block-end:.5em}:where(h2){margin-block-start:1.7em}:where(h3){margin-block-start:1.4em}:where(p,ul,ol,dl,blockquote,pre,table,figure,hr,details,fieldset,address,video,audio){margin-block-end:1.2rem}p{text-wrap:pretty}small{color:var(--muted);font-size:.8125rem}strong,b{font-weight:700}em,i,cite{font-style:italic}address{font-style:normal}a{color:var(--accent);text-underline-offset:.18em;text-decoration:underline .1em;text-decoration-color:var(--accent-soft);transition:text-decoration-color .15s,color .15s}a:hover{text-decoration-color:var(--accent)}mark{background:var(--accent);color:var(--on-accent);border-radius:4px;padding:.05em .28em}ins{background:var(--accent-soft);border-radius:3px;padding:0 .2em;text-decoration:none}del{color:var(--muted)}abbr[title]{text-underline-offset:.2em;cursor:help;text-decoration:underline dotted}sub,sup{font-size:.72em;line-height:0}ul,ol{padding-inline-start:1.4em}li{margin-block:.35em}li::marker{color:var(--accent);font-weight:700}ul ul,ul ol,ol ul,ol ol{margin-block:.35em}dl{grid-template-columns:minmax(7rem,auto) 1fr;gap:.5rem 1.5rem;display:grid}dt{color:var(--text);font-weight:600}dd{color:var(--muted);margin:0}blockquote{border-inline-start:4px solid var(--accent);color:var(--text);padding:.4rem 0 .4rem 1.4rem;font-size:1.18rem;line-height:1.5}blockquote p{margin:0 0 .6rem}blockquote cite{color:var(--muted);font-size:.875rem;font-style:normal;font-weight:600;display:block}blockquote cite:before{content:"— "}hr{background:var(--line);border:none;height:2px;margin-block:2rem}code,kbd,samp,pre{font-family:var(--font-mono)}code{background:var(--surface-alt);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:.12em .42em;font-size:.875em}pre{background:var(--code-bg);color:var(--code-text);border-radius:var(--radius-lg);tab-size:2;padding:1.15rem 1.3rem;font-size:.875rem;line-height:1.55;overflow-x:auto}pre code{font-size:inherit;color:inherit;background:0 0;border:none;padding:0}kbd{background:var(--surface);color:var(--text);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:.12em .45em;font-size:.8em}samp{font-size:.875em}img,picture,svg,video,canvas{max-width:100%;height:auto}img,video{border-radius:var(--radius);display:block}svg{fill:currentColor}figure{text-align:center}figure img,figure video{margin-inline:auto}figcaption{color:var(--muted);margin-top:.6rem;font-size:.85rem}table{border-collapse:collapse;width:100%;font-size:.95rem}caption{caption-side:bottom;color:var(--muted);text-align:left;padding-top:.75rem;font-size:.85rem}th,td{text-align:left;vertical-align:top;padding:.7rem 1rem}thead th{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:2px solid var(--ink);white-space:nowrap;font-size:.74rem}tbody td{border-bottom:1px solid var(--line)}tbody tr{transition:background .12s}tbody tr:hover{background:var(--accent-faint)}tfoot th,tfoot td{border-top:2px solid var(--ink);font-weight:600}label{margin-bottom:.4rem;font-size:.92rem;font-weight:600;display:block}:is(input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=month],input[type=week],input[type=time],input:not([type])),textarea,select{font:inherit;width:100%;color:var(--text);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:.62rem .8rem;transition:border-color .15s,box-shadow .15s}textarea{resize:vertical;min-height:6.5rem;line-height:1.55}:is(input,textarea,select):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}::placeholder{color:var(--muted);opacity:1}:disabled{opacity:.55;cursor:not-allowed}:user-invalid{border-color:#e5484d}:user-invalid:focus{box-shadow:0 0 0 3px #e5484d38}select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-position:right .85rem center;background-repeat:no-repeat;background-size:.85rem;padding-right:2.3rem}select[multiple]{background-image:none;padding-right:.8rem}input[type=checkbox]:not([role=switch]),input[type=radio]{-webkit-appearance:none;appearance:none;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;vertical-align:-.22em;flex:none;place-content:center;width:1.25rem;height:1.25rem;transition:background .12s,border-color .12s;display:inline-grid}input[type=checkbox]:not([role=switch]){border-radius:5px}input[type=radio]{border-radius:50%}input[type=checkbox]:not([role=switch]):checked,input[type=radio]:checked{background:var(--accent);border-color:var(--accent)}input[type=checkbox]:not([role=switch]):checked:after{content:"";border:solid var(--on-accent);border-width:0 2.5px 2.5px 0;width:.34rem;height:.62rem;transform:translateY(-1px)rotate(45deg)}input[type=radio]:checked:after{content:"";background:var(--on-accent);border-radius:50%;width:.55rem;height:.55rem}input[type=checkbox][role=switch]{-webkit-appearance:none;appearance:none;background:var(--line);cursor:pointer;vertical-align:-.4em;border-radius:999px;flex:none;width:2.7rem;height:1.55rem;transition:background .2s;position:relative}input[type=checkbox][role=switch]:after{content:"";background:#fff;border-radius:50%;width:1.15rem;height:1.15rem;transition:left .2s;position:absolute;top:50%;left:3px;transform:translateY(-50%);box-shadow:0 1px 3px #00000059}input[type=checkbox][role=switch]:checked{background:var(--accent)}input[type=checkbox][role=switch]:checked:after{left:calc(100% - 1.15rem - 3px)}input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:100%}input[type=range]::-webkit-slider-runnable-track{background:var(--line);border-radius:999px;height:6px}input[type=range]::-moz-range-track{background:var(--line);border-radius:999px;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--accent);border:2px solid var(--surface);border-radius:50%;width:19px;height:19px;margin-top:-6.5px;box-shadow:0 1px 4px #0000004d}input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid var(--surface);border-radius:50%;width:19px;height:19px}input[type=color]{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;width:3rem;height:2.5rem;padding:.25rem}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}input[type=file]{font:inherit;color:var(--muted);max-width:100%}input[type=file]::file-selector-button{font:inherit;color:var(--text);background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--radius);cursor:pointer;margin-right:.85rem;padding:.5rem .9rem;font-weight:600;transition:background .15s}input[type=file]::file-selector-button:hover{background:var(--surface-alt)}fieldset{border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem 1.3rem}legend{letter-spacing:-.01em;padding-inline:.5rem;font-weight:700}button,input[type=submit],input[type=button],input[type=reset],a[role=button],[data-variant]{font:inherit;color:var(--on-accent);background:var(--accent);border-radius:var(--radius);white-space:nowrap;cursor:pointer;border:1.5px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.62rem 1.15rem;font-weight:600;line-height:1.2;text-decoration:none;transition:background .15s,transform 60ms,box-shadow .15s,color .15s;display:inline-flex}button:hover,input[type=submit]:hover,input[type=button]:hover,a[role=button]:hover,[data-variant]:hover{background:var(--accent-press)}button:active,input[type=submit]:active,input[type=button]:active,a[role=button]:active,[data-variant]:active{transform:translateY(1px)}button:disabled,input:disabled[type=submit],[data-variant]:disabled{transform:none}[data-variant=secondary],button[type=reset],input[type=reset]{background:var(--surface);color:var(--text);border-color:var(--ink)}[data-variant=secondary]:hover,button[type=reset]:hover,input[type=reset]:hover{background:var(--surface-alt)}[data-variant=outline]{color:var(--accent);border-color:var(--accent);background:0 0}[data-variant=outline]:hover{background:var(--accent-soft)}[data-variant=ghost]{color:var(--text);background:0 0;border-color:#0000}[data-variant=ghost]:hover{background:var(--surface-alt)}[data-variant=danger]{color:#fff;background:#e5484d}[data-variant=danger]:hover{background:#cf3b40}[data-size=sm]{border-radius:calc(var(--radius) - 1px);padding:.4rem .8rem;font-size:.85rem}[data-size=lg]{padding:.85rem 1.6rem;font-size:1.08rem}[role=group]{display:inline-flex}[role=group]>*{border-radius:0}[role=group]>:first-child{border-start-start-radius:var(--radius);border-end-start-radius:var(--radius)}[role=group]>:last-child{border-start-end-radius:var(--radius);border-end-end-radius:var(--radius)}[role=group]>:not(:first-child){margin-inline-start:-1.5px}article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(1.3rem,3vw,1.8rem)}article>header{margin-bottom:1rem}article>header>:last-child{margin-bottom:0}article>footer{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.2rem;padding-top:1rem;display:flex}aside{background:var(--accent-soft);border-inline-start:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.25rem}aside>:last-child{margin-bottom:0}nav ul{flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;margin:0;padding:0;list-style:none;display:flex}nav li{margin:0}nav a{color:var(--text);font-weight:600;text-decoration:none}nav a:hover,nav a[aria-current]{color:var(--accent)}details{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface)}summary{cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.1rem;font-weight:600;list-style:none;display:flex}summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--muted);font-size:1.4em;line-height:1;transition:transform .2s}details[open] summary:after{transform:rotate(45deg)}details[open] summary{border-bottom:1.5px solid var(--line)}details>:not(summary){padding-inline:1.1rem}details>:not(summary):first-of-type{padding-top:.95rem}details>:not(summary):last-child{margin-bottom:0;padding-bottom:1.1rem}dialog{max-width:min(32rem,100vw - 2rem);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);margin:auto;padding:clamp(1.3rem,4vw,1.9rem);box-shadow:0 24px 60px -20px #00000080}dialog::backdrop{backdrop-filter:blur(2px);background:#0808098c}dialog>:last-child{margin-bottom:0}progress,meter{-webkit-appearance:none;appearance:none;background:var(--line);border:none;border-radius:999px;width:100%;height:.65rem;overflow:hidden}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--accent);border-radius:999px}progress::-moz-progress-bar{background:var(--accent)}meter::-webkit-meter-bar{background:var(--line);border:none}meter::-webkit-meter-optimum-value{background:var(--accent)}meter::-moz-meter-bar{background:var(--accent)}footer{border-top:1px solid var(--line);color:var(--muted);margin-top:3.5rem;padding-top:1.6rem;font-size:.9rem}footer a{color:var(--muted);text-decoration-color:var(--line)}footer a:hover{color:var(--accent)}
+:root{color-scheme:light dark;--font-sans:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;--font-mono:"Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--font-display:var(--font-sans);--radius:6px;--radius-lg:12px;--radius-pill:999px;--width:72rem;--gutter:clamp(1.25rem, 4vw, 2.5rem);--accent:#2a6ff3;--on-accent:#fff;--accent-press:color-mix(in srgb, var(--accent) 86%, #000);--accent-soft:color-mix(in srgb, var(--accent) 14%, transparent);--accent-faint:color-mix(in srgb, var(--accent) 7%, transparent);--bg:#faf9f7;--surface:#fff;--surface-alt:#f1efea;--text:#131210;--muted:#6c6a64;--line:#e4e1da;--ink:#131210;--shadow:0 1px 2px #1312100d, 0 14px 30px -18px #13121047;--code-bg:#18181b;--code-text:#ededf0;accent-color:var(--accent);caret-color:var(--accent)}:root[data-accent=electric]{--accent:#2a6ff3;--on-accent:#fff}:root[data-accent=hot]{--accent:#ff2d78;--on-accent:#fff}:root[data-accent=amber]{--accent:#f59e0b;--on-accent:#1c1407}:root[data-accent=forest]{--accent:#15803d;--on-accent:#fff}:root[data-accent=violet]{--accent:#7c3aed;--on-accent:#fff}@media (prefers-color-scheme:dark){:root:not([data-mode=light]){--bg:#0c0c0d;--surface:#161618;--surface-alt:#1e1e21;--text:#f4f3f0;--muted:#a3a19a;--line:#2a2a2e;--ink:#f4f3f0;--shadow:0 1px 2px #0006, 0 18px 40px -20px #000000bf;--accent-press:color-mix(in srgb, var(--accent) 82%, #fff)}}:root[data-mode=dark]{--bg:#0c0c0d;--surface:#161618;--surface-alt:#1e1e21;--text:#f4f3f0;--muted:#a3a19a;--line:#2a2a2e;--ink:#f4f3f0;--shadow:0 1px 2px #0006, 0 18px 40px -20px #000000bf;--accent-press:color-mix(in srgb, var(--accent) 82%, #fff)}*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth;scrollbar-color:var(--muted) transparent}body{font-family:var(--font-sans);color:var(--text);background:var(--bg);max-width:var(--width);padding:var(--gutter);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin-inline:auto;font-size:clamp(1rem,.965rem + .18vw,1.0625rem);line-height:1.65}::selection{background:var(--accent);color:var(--on-accent)}:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px;border-radius:3px}[hidden]{display:none!important}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}h1,h2,h3,h4,h5,h6{letter-spacing:-.025em;text-wrap:balance;color:var(--text);font-weight:700;line-height:1.08}h1{letter-spacing:-.04em;font-size:clamp(2.4rem,1.7rem + 3vw,3.9rem)}h2{letter-spacing:-.032em;font-size:clamp(1.8rem,1.4rem + 1.7vw,2.55rem)}h3{font-size:clamp(1.3rem,1.15rem + .7vw,1.65rem)}h4{font-size:1.2rem}h5{text-transform:uppercase;letter-spacing:.1em;font-size:.95rem}h6{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:.8rem}:where(h1,h2,h3,h4,h5,h6){margin-block-end:.5em}:where(h2){margin-block-start:1.7em}:where(h3){margin-block-start:1.4em}:where(header>h1,header>h2,header>h3,header>h4,header>h5,header>h6){margin-block-start:0}:where(p,ul,ol,dl,blockquote,pre,table,figure,hr,details,fieldset,address,video,audio){margin-block-end:1.2rem}p{text-wrap:pretty}small{color:var(--muted);font-size:.8125rem}strong,b{font-weight:700}em,i,cite{font-style:italic}address{font-style:normal}a{color:var(--accent);text-underline-offset:.18em;text-decoration:underline .1em;text-decoration-color:var(--accent-soft);transition:text-decoration-color .15s,color .15s}a:hover{text-decoration-color:var(--accent)}mark{background:var(--accent);color:var(--on-accent);border-radius:4px;padding:.05em .28em}ins{background:var(--accent-soft);border-radius:3px;padding:0 .2em;text-decoration:none}del{color:var(--muted)}abbr[title]{text-underline-offset:.2em;cursor:help;text-decoration:underline dotted}sub,sup{font-size:.72em;line-height:0}ul,ol{padding-inline-start:1.4em}li{margin-block:.35em}li::marker{color:var(--accent);font-weight:700}ul ul,ul ol,ol ul,ol ol{margin-block:.35em}dl{grid-template-columns:minmax(7rem,auto) 1fr;gap:.5rem 1.5rem;display:grid}dt{color:var(--text);font-weight:600}dd{color:var(--muted);margin:0}blockquote{border-inline-start:4px solid var(--accent);color:var(--text);padding:.4rem 0 .4rem 1.4rem;font-size:1.18rem;line-height:1.5}blockquote p{margin:0 0 .6rem}blockquote cite{color:var(--muted);font-size:.875rem;font-style:normal;font-weight:600;display:block}blockquote cite:before{content:"— "}hr{background:var(--line);border:none;height:2px;margin-block:2rem}code,kbd,samp,pre{font-family:var(--font-mono)}code{background:var(--surface-alt);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:.12em .42em;font-size:.875em}pre{background:var(--code-bg);color:var(--code-text);border-radius:var(--radius-lg);tab-size:2;padding:1.15rem 1.3rem;font-size:.875rem;line-height:1.55;overflow-x:auto}pre code{font-size:inherit;color:inherit;background:0 0;border:none;padding:0}kbd{background:var(--surface);color:var(--text);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:.12em .45em;font-size:.8em}samp{font-size:.875em}img,picture,svg,video,canvas{max-width:100%;height:auto}img,video{border-radius:var(--radius);display:block}svg{fill:currentColor}figure{text-align:center}figure img,figure video{margin-inline:auto}figcaption{color:var(--muted);margin-top:.6rem;font-size:.85rem}table{border-collapse:collapse;width:100%;font-size:.95rem}caption{caption-side:bottom;color:var(--muted);text-align:left;padding-top:.75rem;font-size:.85rem}th,td{text-align:left;vertical-align:top;padding:.5rem 1rem}thead th{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:2px solid var(--ink);white-space:nowrap;font-size:.74rem}tbody td{border-bottom:1px solid var(--line)}tbody tr{transition:background .12s}tbody tr:hover{background:var(--accent-faint)}tfoot th,tfoot td{border-top:2px solid var(--ink);font-weight:600}label{margin-bottom:.4rem;font-size:.92rem;font-weight:600;display:block}:is(input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=month],input[type=week],input[type=time],input:not([type])),textarea,select{font:inherit;width:100%;color:var(--text);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:.62rem .8rem;transition:border-color .15s,box-shadow .15s}textarea{resize:vertical;min-height:6.5rem;line-height:1.55}:is(input,textarea,select):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}::placeholder{color:var(--muted);opacity:1}:disabled{opacity:.55;cursor:not-allowed}:user-invalid{border-color:#e5484d}:user-invalid:focus{box-shadow:0 0 0 3px #e5484d38}select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-position:right .85rem center;background-repeat:no-repeat;background-size:.85rem;padding-right:2.3rem}select[multiple]{background-image:none;padding-right:.8rem}input[type=checkbox]:not([role=switch]),input[type=radio]{-webkit-appearance:none;appearance:none;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;vertical-align:-.22em;flex:none;place-content:center;width:1.25rem;height:1.25rem;transition:background .12s,border-color .12s;display:inline-grid}input[type=checkbox]:not([role=switch]){border-radius:5px}input[type=radio]{border-radius:50%}input[type=checkbox]:not([role=switch]):checked,input[type=radio]:checked{background:var(--accent);border-color:var(--accent)}input[type=checkbox]:not([role=switch]):checked:after{content:"";border:solid var(--on-accent);border-width:0 2.5px 2.5px 0;width:.34rem;height:.62rem;transform:translateY(-1px)rotate(45deg)}input[type=radio]:checked:after{content:"";background:var(--on-accent);border-radius:50%;width:.55rem;height:.55rem}input[type=checkbox][role=switch]{-webkit-appearance:none;appearance:none;background:var(--line);cursor:pointer;vertical-align:-.4em;border-radius:999px;flex:none;width:2.7rem;height:1.55rem;transition:background .2s;position:relative}input[type=checkbox][role=switch]:after{content:"";background:#fff;border-radius:50%;width:1.15rem;height:1.15rem;transition:left .2s;position:absolute;top:50%;left:3px;transform:translateY(-50%);box-shadow:0 1px 3px #00000059}input[type=checkbox][role=switch]:checked{background:var(--accent)}input[type=checkbox][role=switch]:checked:after{left:calc(100% - 1.15rem - 3px)}input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:100%}input[type=range]::-webkit-slider-runnable-track{background:var(--line);border-radius:999px;height:6px}input[type=range]::-moz-range-track{background:var(--line);border-radius:999px;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--accent);border:2px solid var(--surface);border-radius:50%;width:19px;height:19px;margin-top:-6.5px;box-shadow:0 1px 4px #0000004d}input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid var(--surface);border-radius:50%;width:19px;height:19px}input[type=color]{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;width:3rem;height:2.5rem;padding:.25rem}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}input[type=file]{font:inherit;color:var(--muted);max-width:100%}input[type=file]::file-selector-button{font:inherit;color:var(--text);background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--radius);cursor:pointer;margin-right:.85rem;padding:.5rem .9rem;font-weight:600;transition:background .15s}input[type=file]::file-selector-button:hover{background:var(--surface-alt)}fieldset{border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem 1.3rem}legend{letter-spacing:-.01em;padding-inline:.5rem;font-weight:700}button,input[type=submit],input[type=button],input[type=reset],a[role=button],[data-variant]{font:inherit;color:var(--on-accent);background:var(--accent);border-radius:var(--radius);white-space:nowrap;cursor:pointer;border:1.5px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.62rem 1.15rem;font-weight:600;line-height:1.2;text-decoration:none;transition:background .15s,transform 60ms,box-shadow .15s,color .15s;display:inline-flex}button:hover,input[type=submit]:hover,input[type=button]:hover,a[role=button]:hover,[data-variant]:hover{background:var(--accent-press)}button:active,input[type=submit]:active,input[type=button]:active,a[role=button]:active,[data-variant]:active{transform:translateY(1px)}button:disabled,input:disabled[type=submit],[data-variant]:disabled{transform:none}[data-variant=secondary],button[type=reset],input[type=reset]{background:var(--surface);color:var(--text);border-color:var(--ink)}[data-variant=secondary]:hover,button[type=reset]:hover,input[type=reset]:hover{background:var(--surface-alt)}[data-variant=outline]{color:var(--accent);border-color:var(--accent);background:0 0}[data-variant=outline]:hover{background:var(--accent-soft)}[data-variant=ghost]{color:var(--text);background:0 0;border-color:#0000}[data-variant=ghost]:hover{background:var(--surface-alt)}[data-variant=danger]{color:#fff;background:#e5484d}[data-variant=danger]:hover{background:#cf3b40}[data-size=sm]{border-radius:calc(var(--radius) - 1px);padding:.4rem .8rem;font-size:.85rem}[data-size=lg]{padding:.85rem 1.6rem;font-size:1.08rem}[role=group]{display:inline-flex}[role=group]>*{border-radius:0}[role=group]>:first-child{border-start-start-radius:var(--radius);border-end-start-radius:var(--radius)}[role=group]>:last-child{border-start-end-radius:var(--radius);border-end-end-radius:var(--radius)}[role=group]>:not(:first-child){margin-inline-start:-1.5px}article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(1.3rem,3vw,1.8rem)}article>header{margin-bottom:1rem}article>header>:last-child{margin-bottom:0}article>footer{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.2rem;padding-top:1rem;display:flex}article+article{margin-top:1.5rem}aside{background:var(--accent-soft);border-inline-start:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.25rem}aside>:last-child{margin-bottom:0}nav ul{flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;margin:0;padding:0;list-style:none;display:flex}nav li{margin:0}nav a{color:var(--text);font-weight:600;text-decoration:none}nav a:hover,nav a[aria-current]{color:var(--accent)}details{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface)}summary{cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.1rem;font-weight:600;list-style:none;display:flex}summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--muted);font-size:1.4em;line-height:1;transition:transform .2s}details[open] summary:after{transform:rotate(45deg)}details[open] summary{border-bottom:1.5px solid var(--line)}details>:not(summary){padding-inline:1.1rem}details>:not(summary):first-of-type{padding-top:.95rem}details>:not(summary):last-child{margin-bottom:0;padding-bottom:1.1rem}dialog{max-width:min(32rem,100vw - 2rem);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);margin:auto;padding:clamp(1.3rem,4vw,1.9rem);box-shadow:0 24px 60px -20px #00000080}dialog::backdrop{backdrop-filter:blur(2px);background:#0808098c}dialog>:last-child{margin-bottom:0}progress,meter{-webkit-appearance:none;appearance:none;background:var(--line);border:none;border-radius:999px;width:100%;height:.65rem;overflow:hidden}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--accent);border-radius:999px}progress::-moz-progress-bar{background:var(--accent)}meter::-webkit-meter-bar{background:var(--line);border:none}meter::-webkit-meter-optimum-value{background:var(--accent)}meter::-moz-meter-bar{background:var(--accent)}footer{border-top:1px solid var(--line);color:var(--muted);margin-top:3.5rem;padding-top:1.6rem;font-size:.9rem}footer a{color:var(--muted);text-decoration-color:var(--line)}footer a:hover{color:var(--accent)}