:root{color-scheme:dark;--bg-primary: #100f0f;--bg-secondary: #1c1b1a;--bg-tertiary: #282726;--text-primary: #cecdc3;--text-secondary: #878580;--border-color: #343331;--hairline: #282726;--accent: #3aa99f;--on-accent: #100f0f;--success: #879a39;--error: #d14d41;--warning: #da702c;--stage-bg: #0b0a0a;--stage-grid: #1c1b1a;--font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace}:root.light-theme,:root[data-theme=light]{color-scheme:light;--bg-primary: #fffcf0;--bg-secondary: #f2f0e5;--bg-tertiary: #e6e4d9;--text-primary: #100f0f;--text-secondary: #6f6e69;--border-color: #dad8ce;--hairline: #e6e4d9;--accent: #24837b;--on-accent: #fffcf0;--success: #66800b;--error: #af3029;--warning: #bc5215;--stage-bg: #fffcf0;--stage-grid: #e6e4d9}*{box-sizing:border-box}html{scrollbar-color:var(--text-secondary) var(--bg-primary)}body{margin:0;background:var(--bg-primary);color:var(--text-primary);font:14px/1.6 system-ui,sans-serif;min-height:100dvh;display:flex;flex-direction:column}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.skip-link{position:absolute;top:-100px;background:var(--bg-primary);z-index:2;padding:12px}.skip-link:focus{top:0}.gallery-header{min-height:52px;padding:10px 24px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);display:flex;align-items:center;gap:18px}.brand{display:flex;align-items:baseline;gap:12px;font:700 17px var(--font-mono);letter-spacing:-.5px}.brand strong{color:var(--text-primary)}.brand a:hover{text-decoration:none}.site-links{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:12px}.editor-link{display:inline-block;background:var(--accent);color:var(--on-accent);padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap}.editor-link:hover{filter:brightness(1.1);text-decoration:none}.language-picker{display:flex;flex-shrink:0;gap:2px;padding:2px;border:1px solid var(--border-color);border-radius:4px}.language-picker a{padding:3px 7px;border-radius:2px;font:11px var(--font-mono);color:var(--text-secondary)}.language-picker a[aria-current]{background:var(--accent);color:var(--on-accent)}.icon-button{display:inline-flex;padding:5px;color:var(--text-secondary);background:transparent;border:0;border-radius:4px}.theme-sun,.light-theme .theme-moon{display:none}.light-theme .theme-sun{display:block}main{flex:1;width:min(1200px,100%);margin:0 auto;padding:48px 32px 64px}.eyebrow{color:var(--accent);font:11px var(--font-mono);letter-spacing:.12em}h1{font-size:clamp(28px,4vw,42px);font-weight:600;line-height:1.2;letter-spacing:-.035em;margin:16px 0}.intro-copy{color:var(--text-secondary);font-size:16px;max-width:60ch}.intro{margin-bottom:32px}.filters{display:flex;gap:16px;padding-bottom:24px;border-bottom:1px solid var(--border-color)}.filters label{display:flex;flex-direction:column;gap:6px;font:11px var(--font-mono);color:var(--text-secondary)}.search-label{flex:1}.filters input,.filters select{min-width:0;height:36px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-secondary);color:var(--text-primary);padding:0 10px;font:13px system-ui,sans-serif}#result-count{color:var(--text-secondary);font:11px var(--font-mono);margin:20px 0}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.card{display:flex;flex-direction:column;overflow:hidden;color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);transition:border-color .15s}.card:hover{border-color:var(--accent);text-decoration:none}.card-art{aspect-ratio:14/11;padding:12px;background-color:var(--bg-secondary);background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:24px 24px}.card img{display:block;width:100%;height:100%;object-fit:contain}.card-body{padding:18px}.card h2{font-size:18px;line-height:1.35;letter-spacing:-.02em;font-weight:600;margin:14px 0 8px}.description{margin:0;color:var(--text-secondary);min-height:3.2em}.author{color:var(--text-secondary);font:11px var(--font-mono);margin:18px 0 0}.badges{display:flex;flex-wrap:wrap;gap:8px;color:var(--text-secondary);font:10px var(--font-mono)}.badges span{padding:3px 6px;border:1px solid var(--border-color);border-radius:3px}.badges span:first-child{color:var(--accent)}.back-link{font:12px var(--font-mono)}.detail-heading{margin:32px 0}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}.example-stage{min-width:0;position:relative;border:1px solid var(--border-color);background:var(--bg-secondary);padding:14px;min-height:440px;display:grid;place-items:center}.example-stage>img{display:block;width:100%;height:auto;object-fit:contain}.run-example{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 24px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:var(--on-accent);box-shadow:0 4px 24px #0008;font-weight:600}.example-stage:has(iframe){padding:0}.example-stage iframe{display:block;border:0;width:100%;height:660px}.example-notes section{padding-top:20px;margin-top:20px;border-top:1px solid var(--border-color)}.example-notes h2{font:500 11px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}.example-notes p{color:var(--text-secondary);margin:0}.example-notes>a:last-child{display:inline-block;margin-top:12px;font-size:12px}.remix-link{font-size:13px;padding:8px 12px}.message{padding:48px 0;color:var(--text-secondary)}.message button{padding:6px 12px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-secondary);margin-right:16px}.gallery-footer{display:flex;gap:16px;padding:18px 24px;border-top:1px solid var(--border-color);color:var(--text-secondary);font:11px var(--font-mono)}@media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-layout{grid-template-columns:minmax(0,1fr)}.example-notes{max-width:65ch}}@media(max-width:600px){.gallery-header{gap:12px;padding:12px 16px;flex-wrap:wrap}.brand{flex:1}.site-links{order:1;width:100%;margin:0}main{padding:32px 16px 48px}.filters{flex-wrap:wrap;gap:12px}.search-label{flex-basis:100%}.filters label:not(.search-label){flex:1}.cards{grid-template-columns:minmax(0,1fr)}.example-stage{min-height:240px}.example-stage iframe{height:560px}}