:root{--bg: #0a0b0f;--panel: #101319;--panel-2: #0e1117;--card: #121620;--text: #e7ebf4;--muted: #98a1b3;--border: #242a36;--accent: #7aa2f7;--accent-2: #9d7af7;--ok: #5ed4a7;--warn: #f2c94c;--err: #ff6b6b;--playing: #89b4fa;--ring: rgba(122, 162, 247, .45);--status-h: 44px;--footer-h: 36px}*{box-sizing:border-box}html,body,#svelte{height:100%}body{margin:0;font-family:ui-sans-serif,-apple-system,Segoe UI,Inter,Roboto,Noto Sans,Arial;color:var(--text);background:radial-gradient(1000px 700px at 80% -10%,#121528,#0a0b0f 60%) fixed,#0a0b0f;padding-bottom:calc(var(--status-h) + var(--footer-h) + 16px)}.container{max-width:1100px;margin-inline:auto;padding:16px;padding-bottom:calc(var(--status-h) + var(--footer-h) + 16px)}.grid{display:grid;grid-template-columns:1fr;grid-template-areas:"help" "controls" "article";gap:16px}.controls{grid-area:controls}.article{grid-area:article}.help{grid-area:help}@media (min-width: 980px){.grid{grid-template-columns:360px minmax(0,1fr) 320px;grid-template-areas:"controls article help";align-items:start}}.panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 30px #00000059,inset 0 1px #ffffff05}.card{padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--card)}.h1{font-size:22px;font-weight:700}.h2{font-size:16px;font-weight:700;color:var(--muted)}.p{color:#cfd6e6;line-height:1.55}.helper{color:var(--muted);font-size:12px}.input,.select{width:100%;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s}.input:focus,.select:focus,.btn:focus-visible{border-color:var(--accent);box-shadow:0 0 0 6px var(--ring)}.input[aria-invalid=true]{border-color:var(--err);box-shadow:0 0 0 4px #ff6b6b26}.btn{--btn-bg: #1a1f2b;--btn-border: var(--border);display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--btn-border);background:linear-gradient(180deg,var(--btn-bg),#141925);color:var(--text);cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none;transition:filter .15s,transform .02s,border-color .15s}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}.btn[disabled]{opacity:.6;cursor:not-allowed}.btn-primary{--btn-bg: #263051;border-color:#2d3757;box-shadow:0 6px 18px #7aa2f72e}.btn-danger{--btn-bg: #3a262a;border-color:#4b2b30}.btn-ghost{background:transparent}.choice{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#151923}.choice input{accent-color:var(--accent)}.banner{width:100%;background:linear-gradient(90deg,#7aa2f71f,#9d7af71a);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.banner-inner{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;color:#e1e8ff}.badge{font-size:12px;font-weight:700;letter-spacing:.4px;padding:4px 8px;border-radius:999px;border:1px solid #3a4360;background:#1b2030;color:var(--accent)}.statusbar{position:fixed;bottom:var(--footer-h);left:0;right:0;width:100%;height:var(--status-h);min-height:var(--status-h);z-index:1000;grid-column:1 / -1;background:#07080bcc;border-top:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.statusbar-inner{max-width:1100px;margin:0 auto;padding:8px 16px;display:flex;gap:12px;align-items:center;min-height:44px;color:var(--muted)}.dot{width:10px;height:10px;border-radius:999px;background:var(--ok);box-shadow:0 0 8px var(--ok)}.dot.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}.dot.err{background:var(--err);box-shadow:0 0 8px var(--err)}.dot.playing{background:var(--playing);box-shadow:0 0 8px var(--playing)}.dot.loading{background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:dotspin 1s linear infinite}@keyframes dotspin{0%{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}.section{padding:8px 0}.section-header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid transparent}.section-header:hover{background:#121724;border-color:#1c2330}.section-title{font-weight:700}.section-controls{margin-left:auto;display:flex;gap:6px}.icon-btn{width:32px;height:32px;display:inline-grid;place-items:center;border-radius:8px;background:linear-gradient(180deg,#1b2334,#131a28);border:1px solid #2f3b55;color:#eaf0ff;font-size:16px;font-weight:800;line-height:1;cursor:pointer;transition:filter .15s,border-color .15s,box-shadow .15s,transform .02s;box-shadow:0 0 0 1px #7aa2f726,0 6px 16px #00000073}.icon-btn:hover{filter:brightness(1.12);border-color:#445279}.icon-btn:active{transform:translateY(1px)}.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring),0 6px 16px #0000008c}.icon-btn[aria-pressed=true]{background:linear-gradient(180deg,#0f1420,#0b0f18);border-color:#4b65a0;color:#cfe0ff}.section.playing .section-header{border-color:#2a3c62;background:linear-gradient(180deg,#131a28,#0f1420)}.play-dot{width:8px;height:8px;border-radius:999px;background:var(--playing);box-shadow:0 0 8px var(--playing)}.section-body{padding-left:24px;padding-bottom:4px}.section-body p{color:#d6dbea;line-height:1.6;margin:6px 0}hr{border:none;border-top:1px solid var(--border);opacity:.7}.stack{display:grid;gap:12px}.mt-8{margin-top:8px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.field{display:grid;gap:8px}.field-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.error{color:var(--err);font-size:12px}.site-footer{position:fixed;bottom:0;left:0;right:0;height:var(--footer-h);background:var(--panel-2);border-top:1px solid var(--border);z-index:900}.site-footer-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px}.footer-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.site-footer a{color:var(--text);text-decoration:none;border-bottom:1px dotted #3a4360}.site-footer a:hover{color:var(--accent);border-bottom-color:var(--accent)}@media (min-width: 720px){.site-footer-inner{flex-direction:row;justify-content:space-between;align-items:center}}