:root{--brand-cyan: #00d4ff;--brand: #2563eb;--accent-on-light: #1d4ed8;--accent-on-dark: #60a5fa;--brand-gradient: linear-gradient(135deg, var(--brand-cyan), var(--brand));--bg: #f5f6fb;--bg-elevated: #ffffff;--surface: rgba(255, 255, 255, .86);--surface-solid: #ffffff;--surface-muted: #f3f2fb;--border: rgba(20, 24, 51, .08);--text: #141833;--text-muted: #5b6080;--accent: var(--accent-on-light);--accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);--danger: #c2255c;--danger-soft: rgba(194, 37, 92, .08);--success: #0f9d76;--shadow: 0 1px 2px rgba(20, 24, 51, .04), 0 12px 32px rgba(20, 24, 51, .07);--blob-opacity: .16;--radius: 20px;--radius-sm: 12px;color-scheme:light}:root[data-accent=violet]{--brand: #7c3aed;--accent-on-light: #6d28d9;--accent-on-dark: #a78bfa}:root[data-accent=teal]{--brand: #0f766e;--accent-on-light: #0f766e;--accent-on-dark: #2dd4bf}:root[data-accent=green]{--brand: #15803d;--accent-on-light: #15803d;--accent-on-dark: #4ade80}:root[data-accent=orange]{--brand: #c2410c;--accent-on-light: #c2410c;--accent-on-dark: #fb923c}:root[data-theme=dark]{--bg: #0b0d1a;--bg-elevated: #121528;--surface: rgba(24, 27, 48, .78);--surface-solid: #181b30;--surface-muted: rgba(255, 255, 255, .04);--border: rgba(255, 255, 255, .08);--text: #eef0ff;--text-muted: #a3a8c7;--accent: var(--accent-on-dark);--accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);--danger: #f06595;--danger-soft: rgba(240, 101, 149, .12);--success: #38d9a9;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .35);--blob-opacity: .2;color-scheme:dark}@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){--bg: #0b0d1a;--bg-elevated: #121528;--surface: rgba(24, 27, 48, .78);--surface-solid: #181b30;--surface-muted: rgba(255, 255, 255, .04);--border: rgba(255, 255, 255, .08);--text: #eef0ff;--text-muted: #a3a8c7;--accent: var(--accent-on-dark);--accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);--danger: #f06595;--danger-soft: rgba(240, 101, 149, .12);--success: #38d9a9;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .35);--blob-opacity: .2;color-scheme:dark}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3{line-height:1.2;margin:0;letter-spacing:-.01em}a{color:var(--accent)}.platform-logo{display:inline-block;height:28px;aspect-ratio:4/1;background-color:currentColor;-webkit-mask:var(--logo) left center/contain no-repeat;mask:var(--logo) left center/contain no-repeat}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.button{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface-solid);color:var(--text);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}.button:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.button:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}.button.primary{border:0;color:#fff;background:var(--brand)}.button.ghost{background:transparent}.button.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent);background:transparent}.button.danger.solid{color:#fff;border:0;background:var(--danger)}.button.small{padding:6px 12px;font-size:.875rem}.button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.accents{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:20px}.accents-label{font-weight:600}.swatches{display:flex;gap:10px}.swatch{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--swatch);cursor:pointer;box-shadow:inset 0 0 0 1px #0000001f}.swatch.selected{box-shadow:0 0 0 3px var(--surface-solid),0 0 0 5px var(--swatch)}.swatch:focus-visible{outline:3px solid color-mix(in srgb,var(--swatch) 45%,transparent);outline-offset:4px}.switch-row{display:flex;align-items:flex-start;gap:14px;margin-top:20px;cursor:pointer}.switch{appearance:none;flex-shrink:0;width:42px;height:24px;margin:2px 0 0;border-radius:999px;background:var(--border);box-shadow:inset 0 0 0 1px var(--border);position:relative;cursor:pointer;transition:background .15s ease}.switch:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0000004d;transition:transform .15s ease}.switch:checked{background:var(--brand)}.switch:checked:after{transform:translate(18px)}.switch:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}.switch-text{display:flex;flex-direction:column;gap:2px}.switch-label{font-weight:600}.switch-hint{font-size:.875rem;color:var(--text-muted)}:root[data-look=simple] .backdrop{display:none}:root[data-look=simple] .topbar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}:root[data-look=simple] .card{background:var(--surface-solid);-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}dialog.dialog{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-solid);color:var(--text);box-shadow:var(--shadow)}dialog.dialog::backdrop{background:#0b0d1a73;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.spinner{width:44px;height:44px;border-radius:50%;border:4px solid color-mix(in srgb,var(--brand) 20%,transparent);border-top-color:var(--brand);border-right-color:var(--brand-cyan);opacity:0;animation:spin .9s linear infinite,spinner-in .2s ease .3s forwards}.rise{animation:rise .35s ease both;animation-delay:calc(var(--i, 0) * 60ms)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}@keyframes spinner-in{to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.tooltip{position:fixed;inset:auto;margin:0;max-width:min(280px,100vw - 16px);padding:6px 10px;border:0;border-radius:8px;background:var(--text);color:var(--bg);font-size:.82rem;font-weight:600;line-height:1.4;box-shadow:var(--shadow);pointer-events:none;animation:tooltip-in .1s ease-out}@keyframes tooltip-in{0%{opacity:0}}.has-tooltip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
