:root{--bg: #0f172a;--panel: #1e293b;--border: #334155;--text: #f1f5f9;--muted: #94a3b8;--faint: #64748b;--accent: #3b82f6;--accent-hover: #2563eb}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.container{max-width:72rem;margin:0 auto;padding:1rem}header{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}h1{font-size:1.875rem;font-weight:700;letter-spacing:-.025em;margin:0}h1 .brand{color:#60a5fa}#app-version{font-size:1rem;font-family:ui-monospace,monospace;color:var(--faint);margin-left:.5rem}.subtitle{color:var(--muted);font-size:.875rem;margin:.25rem 0 0}.gh-link{color:var(--muted);font-size:.875rem;text-decoration:none}.gh-link:hover{color:var(--text)}.layout{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width: 768px){.layout{grid-template-columns:1fr 2fr}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:.5rem;padding:1rem;display:flex;flex-direction:column;gap:1rem}.section{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--border);padding-top:1rem}.section:first-child{border-top:none;padding-top:0}label.field{display:block}.field-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.25rem}.field-label .value{color:#60a5fa}input[type=text]{width:100%;background:#334155;border:1px solid #475569;border-radius:.25rem;padding:.5rem .75rem;font-size:1rem;color:var(--text)}input[type=text]:focus{outline:2px solid var(--accent);outline-offset:-1px}input[type=range]{width:100%;accent-color:var(--accent)}.hint{font-size:.75rem;color:var(--faint);margin:.25rem 0 0;line-height:1.5}.mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.mode-selector{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.mode-selector label{cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.5rem .75rem;border-radius:.25rem;border:1px solid #475569;color:var(--muted);font-size:.875rem;transition:background .15s,border-color .15s}.mode-selector label:has(:checked){background:var(--accent);border-color:var(--accent);color:#fff}.mode-selector input{display:none}.check{display:flex;align-items:center;gap:.5rem;font-size:.875rem;cursor:pointer;user-select:none}.check input{width:1rem;height:1rem;accent-color:var(--accent)}#download-btn{width:100%;background:var(--accent);color:#fff;font-weight:500;font-size:1rem;padding:.625rem;border:none;border-radius:.25rem;cursor:pointer;transition:background .15s}#download-btn:hover{background:var(--accent-hover)}#download-btn:active{background:#1d4ed8}a{color:var(--muted)}a:hover{color:var(--text)}.preview-wrap{background:var(--panel);border:1px solid var(--border);border-radius:.5rem;overflow:hidden;position:relative;height:520px;display:flex;flex-direction:column}#preview-canvas{width:100%;flex:1;display:block;outline:none;min-height:0}#stats{padding:.4rem .75rem;font-size:.75rem;font-family:ui-monospace,monospace;color:var(--faint);border-top:1px solid var(--border);min-height:1.6rem}footer{margin-top:2rem;text-align:center;font-size:.75rem;color:var(--faint)}