:root{--bg: #0b1020;--panel: #121a2e;--panel-2: #1a2540;--ink: #e5e7eb;--muted: #8b93a7;--accent: #38bdf8;--accent-2: #f59e0b;--danger: #f87171}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:4px 14px;background:var(--panel);min-height:36px}.header .app-name{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-right:6px}.header .link{font-size:12px;color:var(--muted);text-decoration:none;padding:2px 4px;border-radius:4px;margin-left:auto}.header .link:hover{color:var(--accent);background:none;border-color:transparent}.toolbar{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:6px 14px;background:var(--panel);border-bottom:1px solid #243049}.group-pill{display:flex}.group-pill button{border-radius:0;margin-left:-1px}.group-pill button:first-child{border-radius:10px 0 0 10px;margin-left:0}.group-pill button:last-child{border-radius:0 10px 10px 0}.group-pill button:focus-visible{z-index:1;position:relative}button{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);background:var(--panel-2);border:1px solid #2c3a5a;border-radius:10px;padding:6px 14px;cursor:pointer;transition:background .12s,border-color .12s,transform .05s}button:hover:not(:disabled){background:#243456;border-color:#3a4d75}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}.material-symbols-outlined{font-size:20px;vertical-align:middle}button.mode.active,button.primary{background:var(--accent);color:#06223a;border-color:var(--accent);font-weight:600}button.primary:hover{background:#56c5f0}a.link{font-size:14px;color:var(--accent);text-decoration:none;padding:6px 14px;border:1px solid transparent;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}a.link:hover{background:#243456;border-color:#3a4d75}@media (max-width: 900px){.toolbar{gap:8px;padding:4px 8px}button,a.link{font-size:12px;padding:4px 10px}.status{padding:4px 8px;font-size:11px}.zoom-controls button{width:40px;height:40px;font-size:20px}}.canvas-container{flex:1;position:relative;min-height:0;overflow:hidden}#canvas{width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none}.zoom-controls{position:absolute;bottom:12px;right:12px;display:flex;flex-direction:column;gap:4px;z-index:10;opacity:.75;transition:opacity .2s}.zoom-controls:hover{opacity:1}.zoom-controls button{width:34px;height:34px;padding:0;border-radius:6px;background:#121a2eeb;border:1px solid #2c3a5a;color:var(--ink);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.zoom-controls button:hover{background:#243456;border-color:#3a4d75}.zoom-controls button.pan-active{background:var(--accent);color:#06223a;border-color:var(--accent)}#canvas{flex:1;min-height:0;width:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none}button.toggle-on{background:var(--accent-2);color:#06223a;border-color:var(--accent-2);font-weight:600}button.toggle-on:hover{background:#f7b833}button.toggle-off{background:var(--panel-2);color:var(--muted);border-color:#2c3a5a}button.toggle-off:hover{background:#243456;border-color:#3a4d75}.simulate-controls{display:flex;align-items:center;gap:6px}.weight-label-prefix{font-size:12px;color:var(--muted);white-space:nowrap}.weight-slider{width:100px;height:6px;accent-color:var(--accent);cursor:pointer;margin:0 2px}.weight-slider:disabled{opacity:.4;cursor:default}.weight-label{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600;min-width:28px}#simulate-dismiss{padding:2px 8px;font-size:14px;line-height:1;border-radius:6px;background:transparent;border:1px solid #2c3a5a;color:var(--muted);cursor:pointer;transition:color .12s,border-color .12s}#simulate-dismiss:hover{color:var(--danger);border-color:var(--danger)}.status{padding:6px 12px;background:var(--panel);border-top:1px solid #243049;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.about-btn{width:20px;height:20px;padding:0;background:transparent;border:1px solid #2c3a5a;color:var(--muted);border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:8px;margin-right:4px}.about-btn:hover{color:var(--accent);border-color:var(--accent)}.about-text{font-size:13px;line-height:1.6;color:var(--ink);margin:0 0 10px}.about-acknowledgments{font-size:12px;line-height:1.5;color:var(--muted);margin:14px 0 0;padding-top:12px;border-top:1px solid #243049}#shortcuts-btn{width:34px;height:34px}.shortcuts-dialog{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.shortcuts-content{background:var(--panel);border:1px solid #2c3a5a;border-radius:12px;padding:20px 24px;max-width:420px;width:90%;box-shadow:0 8px 32px #00000080}.shortcuts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.shortcuts-title{font-size:16px;font-weight:700;color:var(--ink)}.shortcuts-close{padding:2px 8px;font-size:16px;background:transparent;border:1px solid #2c3a5a;color:var(--muted);border-radius:6px;cursor:pointer}.shortcuts-close:hover{color:var(--danger);border-color:var(--danger)}.shortcuts-table{width:100%;border-collapse:collapse}.shortcuts-table td{padding:6px 0;font-size:13px;color:var(--ink);border-bottom:1px solid #1a2540}.shortcuts-table td:first-child{white-space:nowrap;padding-right:16px;color:var(--muted)}kbd{display:inline-block;padding:1px 6px;font-size:12px;font-family:ui-monospace,monospace;background:var(--panel-2);border:1px solid #3a4d75;border-radius:4px;color:var(--accent)}.ai-model-select{font-size:12px;background:var(--panel-2);color:var(--ink);border:1px solid #2c3a5a;border-radius:8px;padding:4px 8px;cursor:pointer}.ai-panel{display:flex;flex-direction:column;height:220px;max-height:40vh;background:var(--panel);border-top:2px solid var(--accent);overflow:hidden}.ai-progress{display:flex;flex-direction:column;gap:4px;padding:8px 14px;background:var(--panel-2)}.ai-progress-bar{height:4px;background:#243049;border-radius:2px;overflow:hidden}.ai-progress-fill{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width .3s}#ai-progress-label{font-size:11px;color:var(--muted)}.ai-messages{flex:1;overflow-y:auto;padding:8px 14px;display:flex;flex-direction:column;gap:8px}.ai-message{font-size:13px;line-height:1.5;padding:6px 10px;border-radius:8px;max-width:90%}.ai-message.user{align-self:flex-end;background:#1a3a5c;color:var(--ink)}.ai-message.ai{align-self:flex-start;background:var(--panel-2);color:var(--ink);border:1px solid #2c3a5a}.ai-message.error{align-self:flex-start;background:#f8717126;color:var(--danger);border:1px solid var(--danger)}.ai-input-row{display:flex;gap:6px;padding:6px 10px;border-top:1px solid #243049}.ai-input{flex:1;background:var(--panel-2);border:1px solid #2c3a5a;border-radius:8px;padding:6px 10px;color:var(--ink);font-size:13px;outline:none}.ai-input:focus{border-color:var(--accent)}.ai-send{padding:6px 12px;font-size:13px}