@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--fg: #39ff14;--fg-dim: #4a8a38;--fg-faint: #2a5a22;--bg: #0a0a0a;--bg-panel: #111111;--bg-elevated: #161616;--border: #222222;--danger: #ff3b30;--danger-bg: #1a0505;--danger-border: #4a1515;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace}[data-theme=amber]{--fg: #ffb000;--fg-dim: #b07a1f;--fg-faint: #6b4a12;--danger: #ff5a3b}[data-theme=cyan]{--fg: #34e0ff;--fg-dim: #2e8a9e;--fg-faint: #1c5560;--danger: #ff5a7a}[data-theme=mono]{--fg: #e6e6e6;--fg-dim: #8a8a8a;--fg-faint: #555555;--danger: #ff5a5a}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font-mono)}.app-root{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg);color:var(--fg)}.app-main{flex:1;overflow:hidden;display:flex}.tab-content{display:flex;flex-direction:column;flex:1;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-panel);border-bottom:1px solid var(--border);gap:12px;min-height:44px;flex-shrink:0}.brand{display:flex;align-items:baseline;gap:2px;font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--fg)}.brand-cursor{animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.tab-bar{display:flex;gap:4px;flex:1;justify-content:center}.tab-btn{background:transparent;border:1px solid transparent;color:var(--fg-dim);font-family:inherit;font-size:12px;padding:6px 14px;border-radius:4px;cursor:pointer;letter-spacing:.04em;transition:all .12s ease}.tab-btn:hover{color:var(--fg);border-color:var(--border)}.tab-btn.tab-active{color:var(--bg);background:var(--fg);border-color:var(--fg)}.theme-switcher{display:flex;gap:6px}.theme-dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--border);cursor:pointer;padding:0}.theme-dot-green{background:#39ff14}.theme-dot-amber{background:#ffb000}.theme-dot-cyan{background:#34e0ff}.theme-dot-mono{background:#e6e6e6}.theme-dot-active{outline:2px solid var(--fg);outline-offset:1px}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg-panel);border-bottom:1px solid var(--border);gap:12px;min-height:40px;flex-shrink:0;flex-wrap:wrap}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.fps-badge{font-size:11px;color:var(--fg-dim);background:var(--bg-elevated);border:1px solid var(--border);padding:2px 8px;border-radius:4px;letter-spacing:.04em}.rec-badge,.error-badge{font-size:11px;color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-border);padding:2px 8px;border-radius:4px}.section-label-inline{font-size:12px;color:var(--fg-dim);letter-spacing:.06em}.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:500;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:all .12s ease;white-space:nowrap;letter-spacing:.03em;background:transparent;color:var(--fg)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn-ghost{background:transparent;color:var(--fg-dim);border-color:var(--border)}.btn-ghost:hover:not(:disabled){background:var(--bg-elevated);color:var(--fg);border-color:var(--fg-dim)}.btn-active{background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn-sm{padding:3px 8px;font-size:11px}.btn-xs{padding:2px 6px;font-size:10px}.btn-lg{padding:12px 28px;font-size:14px;font-weight:700}.btn-full{width:100%;justify-content:center}.btn-preset{background:var(--bg-elevated);color:var(--fg-dim);border-color:var(--border);padding:4px 8px;font-size:11px}.btn-preset:hover{color:var(--fg);border-color:var(--fg)}.btn-group{display:flex;gap:2px}.main-layout{display:flex;flex:1;overflow:hidden}.ascii-area{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;background:var(--bg);padding:16px;position:relative}.ascii-area::-webkit-scrollbar{width:6px;height:6px}.ascii-area::-webkit-scrollbar-track{background:transparent}.ascii-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.ascii-output{font-family:var(--font-mono);color:var(--fg);background:transparent;white-space:pre;-moz-tab-size:1;tab-size:1;line-height:1.15;flex-shrink:0}.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;padding:24px}.splash-hint{font-size:12px;color:var(--fg-faint);letter-spacing:.04em;max-width:360px}.controls-panel{width:240px;flex-shrink:0;background:var(--bg-panel);border-left:1px solid var(--border);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.controls-panel::-webkit-scrollbar{width:4px}.controls-panel::-webkit-scrollbar-track{background:transparent}.controls-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.panel-section{padding:12px;border-bottom:1px solid var(--border)}.section-label{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--fg-faint);text-transform:uppercase;margin-bottom:8px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.slider-row{margin-bottom:10px}.slider-row:last-child{margin-bottom:0}.slider-header{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;color:var(--fg-dim)}.slider-value{color:var(--fg);min-width:36px;text-align:right}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:3px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fg);cursor:pointer}.slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--fg);border:none;cursor:pointer}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.toggle-btn{display:flex;align-items:center;gap:6px;padding:6px 8px;font-family:inherit;font-size:11px;font-weight:500;background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;color:var(--fg-faint);cursor:pointer;transition:all .12s ease;letter-spacing:.03em}.toggle-btn:hover{color:var(--fg-dim);border-color:var(--fg-dim)}.toggle-btn.toggle-on{background:var(--bg-panel);border-color:var(--fg);color:var(--fg)}.toggle-indicator{font-size:10px}.control-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--fg-dim);gap:8px}.charset-input{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;color:var(--fg);font-family:inherit;font-size:11px;padding:6px 8px;outline:none;margin-bottom:6px;letter-spacing:.04em}.charset-input:focus{border-color:var(--fg)}.charset-presets{display:flex;flex-wrap:wrap;gap:4px}.panel-toggle{font-size:11px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;padding:20px;width:100%;max-width:380px}.modal-title{font-size:13px;font-weight:700;color:var(--fg);margin-bottom:10px;letter-spacing:.04em}.modal-message{font-size:12px;color:var(--fg-dim);line-height:1.5;margin-bottom:16px}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.library-layout{flex:1;overflow-y:auto;padding:16px}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.library-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}.library-thumb{font-family:var(--font-mono);font-size:6px;line-height:1.1;color:var(--fg-dim);background:var(--bg);padding:8px;white-space:pre;overflow:hidden;height:70px}.library-card-info{padding:8px 10px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border)}.library-card-name{font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-card-meta{font-size:10px;color:var(--fg-faint)}.library-card-actions{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--border)}.library-player{display:flex;flex-direction:column;height:100%}.library-player-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:12px;color:var(--fg-dim)}.player{display:flex;flex-direction:column;align-items:center;gap:12px}.player-controls{display:flex;align-items:center;gap:8px;width:100%;max-width:600px;flex-wrap:wrap}.player-scrub{flex:1;min-width:100px}.player-frame-count{font-size:11px;color:var(--fg-dim);min-width:70px;text-align:right}.about-panel{max-width:480px;margin:40px auto;padding:24px;display:flex;flex-direction:column;gap:12px}.about-panel h2{font-size:18px;letter-spacing:.06em}.about-panel p{font-size:13px;color:var(--fg-dim);line-height:1.6}.about-panel a{color:var(--fg);text-decoration:underline}@media (max-width: 720px){.topbar{flex-wrap:wrap;gap:8px}.tab-bar{order:3;width:100%;justify-content:space-between}.tab-btn{flex:1;text-align:center;padding:6px 4px}.main-layout{flex-direction:column}.controls-panel{width:100%;border-left:none;border-top:1px solid var(--border);max-height:50vh}.ascii-area{padding:8px}.ascii-output{font-size:6px!important}.toolbar{padding:6px 8px}.toolbar-right{width:100%;justify-content:flex-start}.library-grid{grid-template-columns:1fr}}