:root{--bg: #fafafa;--fg: #1a1a1a;--muted: #666;--border: #ddd;--accent: #0066cc;--code-bg: #f0f0f0;--url-bar-height: 3rem}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #1a1a1a;--fg: #e8e8e8;--muted: #999;--border: #333;--accent: #4da6ff;--code-bg: #2a2a2a}}:root[data-theme=dark]{--bg: #1a1a1a;--fg: #e8e8e8;--muted: #999;--border: #333;--accent: #4da6ff;--code-bg: #2a2a2a}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);line-height:1.5}.app{max-width:900px;margin:0 auto;padding:2rem}.url-bar{position:sticky;top:1rem;background:var(--code-bg);border-radius:8px;margin-bottom:2rem;z-index:100}.url-bar-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem 0}.url-bar-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.url-reset{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;width:1.5rem;height:1.5rem;border:1px solid var(--border);background:var(--bg);color:var(--muted);cursor:pointer;border-radius:50%}.url-reset:hover{background:var(--border);color:var(--fg)}.url-display{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;font-family:ui-monospace,monospace;font-size:1.4rem;overflow-x:auto;white-space:nowrap;gap:.75rem}.url-text{flex:1;min-width:0}.url-display .highlight{font-weight:700;color:var(--accent)}.badges{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem}.badges img{vertical-align:middle}.title-github{display:inline-flex;vertical-align:middle;color:var(--fg);margin-left:.25rem}.title-github:hover{opacity:.7}.intro{color:var(--muted);margin-bottom:1rem}.examples{color:var(--muted);margin-bottom:2rem}.examples ul{margin:.5rem 0 0;padding-left:1.5rem}.examples li{margin-bottom:.25rem}.example-url{font-family:ui-monospace,monospace;font-size:.9rem}.example-gh{color:var(--muted);vertical-align:middle}.example-gh:hover{color:var(--fg)}h1{margin:0 0 .5rem}.subtitle{color:var(--muted);margin:0 0 2rem}.section{margin-bottom:2rem;padding:1.5rem;border:1px solid var(--border);border-radius:8px}.section h2{margin:0 0 1rem;font-size:1.1rem}.controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.control-group{display:flex;flex-direction:column;gap:.25rem}.control-group label{font-size:.85rem;color:var(--muted)}.control-group input,.control-group select{padding:.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg);font-size:.9rem}.control-group input[type=number]{width:80px}.control-group input[type=text]{width:150px}button{padding:.5rem 1rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg);cursor:pointer;font-size:.9rem}button:hover{background:var(--code-bg)}button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.tag-list{display:flex;flex-wrap:wrap;gap:.5rem}.tag{padding:.25rem .5rem;background:var(--code-bg);border-radius:4px;font-size:.85rem}.tag.selected{background:var(--accent);color:#fff}.tag:hover{cursor:pointer;opacity:.8}.code-sample{margin-top:1rem;font-size:.85rem}.code-sample summary{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none}.code-sample summary:hover{color:var(--fg)}.code-sample pre{margin:.5rem 0 0;padding:.75rem;background:var(--code-bg);border-radius:4px;overflow-x:auto;font-family:ui-monospace,monospace;font-size:.8rem;line-height:1.5}a{color:var(--accent)}.fab{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.5rem;z-index:200}.fab-button{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:var(--code-bg);border:1px solid var(--border);color:var(--fg);cursor:pointer;text-decoration:none;transition:transform .1s,background .1s}.fab-button:hover{background:var(--border);transform:scale(1.1)}