/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END RESET */

:root {
    --bg:       #f5f3ef;
    --surface:  #faf9f7;
    --surface2: #eceae5;
    --border:   #d6d3cc;
    --accent:   #e4e2dd;
    --ink:      #1c1b19;
    --muted:    #7a776f;
    --dim:      #5a5650;
    --code-bg:  #1c1b19;
    --hi-tag:   #c9a86c;
    --hi-attr:  #7ec8c8;
}

*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body { 
    background: var(--bg); 
    color: var(--ink); 
    font-family: 'Public Sans', sans-serif; 
    font-weight: 400; 
    line-height: 1.6; 
    min-height: 100vh; 
}

code { 
    font-family: 'JetBrains Mono', monospace; 
    font-size: .82em; 
    background: var(--accent); 
    padding: 1px 5px; 
    border-radius: 3px; 
    color: var(--dim); 
}

/* HEADER */
header { 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    background: rgba(245,243,239,.93); 
    backdrop-filter: blur(12px); 
    border-bottom: 1.5px solid var(--border); 
    padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between; height: 60px; 
}

.header-left { 
    display: flex; 
    align-items: center; 
    gap: .9rem; 
}

.tag-badge { 
    font-family: 'JetBrains Mono', monospace; 
    font-size: .72rem; 
    font-weight: 600; 
    color: var(--surface); 
    background: var(--ink); 
    padding: 3px 10px; 
    border-radius: 3px; 
    letter-spacing: .04em; 
}

header h1 { 
    font-size: 1rem; 
    font-weight: 700; 
    letter-spacing: -.01em; 
}

.header-right a { 
    font-family: 'JetBrains Mono', monospace; 
    font-size: .68rem; 
    color: var(--muted); 
    letter-spacing: .08em; 
}

.header-right a:hover {
    color: var(--dim);
    border-bottom-color: var(--dim);
}

/* GRID */
.demos-wrapper {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 2.5rem;
}

.demos-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1.5px; 
    padding: 1.5px; 
    max-width: 1200px; 
    margin: 0 auto; 
    background: var(--border); 
}


/* CARD */
.demo-card { 
    background: var(--surface); 
    padding: 2rem; display: flex; 
    flex-direction: column; 
    gap: 1.3rem; 
}

.demo-card:hover { 
    background: var(--surface2); 
}


.card-header { 
    display: flex; 
    align-items: center; 
    gap: .75rem; 
}

.card-number { 
    font-family: 'JetBrains Mono', monospace; 
    font-size: .62rem; 
    font-weight: 600; 
    color: var(--muted); 
    letter-spacing: .12em; 
    text-transform: uppercase; 
    border: 1px solid var(--border); 
    padding: 2px 8px; 
    border-radius: 2px; 
    flex-shrink: 0; 
}

.card-title { 
    font-size: 1rem; 
    font-weight: 700; 
    line-height: 1.3; 
}

.card-desc { 
    font-size: .84rem; 
    color: var(--ink); 
    line-height: 1.7; 
}

/* CODE BLOCK */
.code-block { 
    background: var(--code-bg); 
    border-radius: 5px; 
    padding: .9rem 1.15rem; 
    font-family: 'JetBrains Mono', monospace; 
    font-size: .71rem; 
    line-height: 1.75; 
    color: #e4e2dd; 
    overflow-x: auto; 
    border-left: 3px solid var(--accent); }

.code-indent {
    padding-left: 15px;
}

.t { /* t = CODE BLOCK TAG */
    color: var(--hi-tag); 
} 

.x { /* x = CODE BLOCK CONTENT */
    color: #e4e2dd; 
} 

.h { /* h =  HIGHLIGHTED CODE */
    color: var(--hi-attr);
}

/* DETAILS IN DEMOS */
.demo-live details { 
    color: var(--ink);
    font-family: 'Public Sans'; 
}

.demo-live summary { 
    cursor: pointer; 
    font-weight: 500; 
    padding: 4px 0; 
}

.demo-live summary:focus-visible { 
    outline: 2px solid var(--ink);
    outline-offset: 2px; 
}

/* DEMO 4 */

#demo-4 details {
    background-color: lightblue;
}

#demo-4 details[open] {
    background-color: lightgreen;
}

/* DEMO 5 */

#demo-5 summary::after {
    content: " open";
}
#demo-5 details[open] summary::after {
    content: " close";
}

/* DEMO 6 */

#demo-6 summary::marker {
    content: '👉 ';
}

#demo-6 details[open] summary::marker {
    content: '👇 ';
}

/* RESOURCES */
.resources {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2.5rem;
    border-top: 1.5px solid var(--border);
}

.resources-heading {
    font-family: 'Public Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2rem;
}

.col-heading {
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: .9rem;
}

.resources-col ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
}

.resources-col li::before {
    content: '—';
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    color: var(--border);
    margin-right: .5rem;
}

.resources-col a {
    font-size: .84rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: border-color .15s, color .15s;
}

.resources-col a:hover {
    color: var(--dim);
    border-bottom-color: var(--dim);
}

/* FOOTER */
footer { 
    text-align: center; 
    padding: 2.5rem 2rem 3.5rem; 
    font-family: 'JetBrains Mono', monospace; 
    font-size: .62rem; color: var(--muted); 
    letter-spacing: .1em; 
    border-top: 1.5px solid var(--border); 
    margin-top: 1.5px; 
    background: var(--surface); 
}