:root{--bg-primary:#1e1e1e;--bg-secondary:#252525;--bg-tertiary:#2d2d2d;--bg-hover:#3a3a3a;--bg-active:#4a4a4a;--accent:#4a9eff;--accent-hover:#6ab0ff;--accent-active:#ff6b6b;--text-primary:#e0e0e0;--text-secondary:#b0b0b0;--border:#3d3d3d;--shadow:#0000004d}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-primary);width:100%;height:100%;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow:hidden}.spinner{border:2px solid var(--border);border-top-color:var(--text-primary);border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}#layout{grid-template:"display header""bottom-left canvas"1fr"bottom-left canvas"/1fr 1fr;height:100%;display:grid}#layout>div{z-index:1;pointer-events:none}#layout>div>*{pointer-events:auto}#layout .viewer{z-index:0;pointer-events:auto;grid-area:1/1/4/3}#layout .header{grid-area:header;place-self:start end;align-items:flex-start;gap:8px;padding:6px 6px 0 0;display:flex}#layout .display{grid-area:display;align-self:start}#layout .bottom-left{grid-area:bottom-left;align-self:end;min-width:0}#layout .canvas{grid-area:canvas;align-self:stretch;min-width:0;min-height:0;padding:10px;overflow:hidden}#layout .footer{pointer-events:none;z-index:2;grid-area:1/1/4/3;place-self:end center;padding-bottom:12px}#layout .footer>*{pointer-events:auto}#playback-bar .playback-inner{background:var(--bg-secondary);border:1px solid var(--border);box-shadow:0 2px 8px var(--shadow);border-radius:8px;align-items:center;gap:10px;min-width:420px;padding:8px 14px;display:flex}#playback-bar .playback-btn{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;border-radius:4px;flex-shrink:0;padding:4px 8px;font-size:14px}#playback-bar .playback-btn:hover{background:var(--bg-hover)}#playback-bar .playback-slider{accent-color:var(--accent);flex:1}#playback-bar .playback-time{color:var(--text-primary);flex-shrink:0;font-family:monospace;font-size:12px}#playback-bar .playback-count{color:var(--text-secondary);flex-shrink:0;font-size:11px}#layout:has(#canvas:not(.open)) .canvas{display:none}#layout:has(#canvas:not(.open)) .bottom-left{grid-area:2/1/4/-1}@media (width<=1024px){#layout{grid-template:"display""header""canvas"minmax(0,1fr)"bottom-left""footer"/1fr}#layout .viewer{grid-area:1/1/6/2}#layout .footer{pointer-events:none;grid-area:footer;place-self:end center;padding:8px}#playback-bar .playback-inner{width:min(420px,100vw - 16px);min-width:0}#layout:has(#canvas:not(.open)){grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"display""header""bottom-left""footer"}#layout:has(#canvas:not(.open)) .bottom-left{grid-area:bottom-left}}#viewer{background:var(--bg-primary);width:100%;height:100%;margin:0;padding:0;overflow:hidden}#display{background:var(--bg-secondary);border:1px solid var(--border);width:280px;box-shadow:0 1px 4px var(--shadow);-webkit-user-select:none;user-select:none;border-radius:0 0 4px 4px;margin-left:8px;overflow:hidden}#display summary{cursor:pointer;background:var(--bg-tertiary);color:var(--text-primary);border-bottom:1px solid var(--border);padding:6px 10px;font-size:.8rem;font-weight:500;transition:background .2s}#display summary:hover,#display[open] summary{background:var(--bg-hover)}#display .display-item{border-bottom:1px solid var(--border);align-items:center;gap:6px;padding:6px 10px;transition:background .15s;display:flex}#display .display-item:last-child{border-bottom:none}#display .display-item:hover{background:var(--bg-tertiary)}#display .display-item label{color:var(--text-secondary);margin-right:auto;font-size:.8rem}#display .display-pair{flex:1;justify-content:space-between;align-items:center;gap:6px;display:flex}#display .display-pair-separator{background:var(--border);flex-shrink:0;width:1px;height:14px}#display .display-toggle-group{align-items:center;gap:8px;display:flex}#display .display-toggle-option{align-items:center;gap:4px;display:flex}#display .display-toggle-option-separated{border-left:1px solid var(--border);padding-left:8px}#display .display-toggle-label{color:var(--text-secondary);letter-spacing:.05em;font-size:.7rem}#display .display-item input[type=number]{background:var(--bg-primary);max-width:50px;color:var(--text-primary);border:1px solid var(--border);border-radius:3px;padding:3px 6px;font-size:.8rem;transition:border-color .2s}#display .display-item input[type=range]{cursor:pointer;width:50px;margin:0}#display .display-item input[type=number]:focus{border-color:var(--accent);outline:none}#display .value-display{min-width:25px;color:var(--text-secondary);text-align:right;font-size:.8rem}#list{background:var(--bg-secondary);border:1px solid var(--border);-webkit-user-select:none;user-select:none;transform-origin:0 100%;border-bottom:none;border-radius:4px 4px 0 0;flex-direction:column-reverse;width:210px;max-height:400px;margin-left:8px;transition:opacity .3s,transform .3s;display:flex;overflow-y:auto}#list[open]{animation:.3s forwards slideIn}#list:not([open]){animation:.3s forwards slideOut}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(10px)scale(.95)}}#list::-webkit-scrollbar{width:8px}#list::-webkit-scrollbar-track{background:var(--bg-primary)}#list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}#list::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}#list>summary{display:none}#list .components-item{border-bottom:1px solid var(--border);align-items:center;gap:6px;padding:6px 10px;transition:background .15s;display:flex}#list .components-item:last-child{border-bottom:none}#list .components-item:hover{background:var(--bg-tertiary)}#list .components-item.active{background:var(--bg-tertiary);border-left:3px solid var(--accent);padding-left:7px}#list .components-item.active label{color:var(--text-primary);font-weight:600}#list .components-item label{color:var(--text-secondary);cursor:pointer;margin-right:auto;font-size:.8rem}#list .components-rename-input{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--accent);border-radius:3px;outline:none;width:100%;margin-right:auto;padding:2px 6px;font-size:.8rem}#list .components-templates{border-top:1px solid var(--border)}#list .components-divider{background:var(--bg-primary);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);cursor:pointer;padding:6px 10px;font-size:.7rem;font-weight:600;transition:background .2s}#list .components-divider:hover{background:var(--bg-tertiary)}#list .components-copy-btn{cursor:pointer;background:var(--accent);color:#fff;border:1px solid var(--accent);opacity:0;border-radius:3px;padding:2px 8px;font-size:.9rem;font-weight:600;transition:all .2s}#list .components-item.template:hover .components-copy-btn{opacity:1}#list .components-copy-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:scale(1.1)}#list .components-copy-btn:active{transform:scale(.95)}#list .components-delete-btn{cursor:pointer;color:var(--text-secondary);opacity:0;background:0 0;border:1px solid #0000;border-radius:3px;padding:0 6px;font-size:1.2rem;font-weight:600;line-height:1;transition:all .2s}#list .components-item:hover .components-delete-btn{opacity:1}#list .components-delete-btn:hover{background:var(--accent-active);color:#fff;border-color:var(--accent-active)}#list .components-delete-btn:active{transform:scale(.95)}#parameters{background:var(--bg-secondary);border:1px solid var(--border);-webkit-user-select:none;user-select:none;border-bottom:none;border-left:none;border-radius:0 4px 4px 0;width:210px;overflow:hidden}#parameters.hidden{display:none}#parameters>div{border-bottom:1px solid var(--border);align-items:center;gap:6px;padding:6px 10px;transition:background .15s;display:flex}#parameters>div:last-child{border-bottom:none}#parameters>div:hover{background:var(--bg-tertiary)}#parameters label{color:var(--text-secondary);margin-right:auto;font-size:.8rem}#parameters input[type=number],#parameters input[type=text]{background:var(--bg-primary);max-width:80px;color:var(--text-primary);border:1px solid var(--border);border-radius:3px;padding:3px 6px;font-size:.8rem;transition:border-color .2s}#parameters select{background:var(--bg-primary);width:110px;color:var(--text-primary);border:1px solid var(--border);cursor:pointer;border-radius:3px;padding:4px 26px 4px 8px;font-size:.8rem;line-height:1.2;transition:border-color .2s}#parameters input[type=number]:focus,#parameters input[type=text]:focus,#parameters select:focus{border-color:var(--accent);outline:none}#parameters input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:var(--accent)}#analysis-status{cursor:default;justify-content:center;align-items:center;padding:4px 10px;display:flex;position:relative}#analysis-status .dot{border-radius:50%;width:10px;height:10px;transition:background .3s,box-shadow .3s}#analysis-status .label:not(:empty){color:var(--text-secondary);white-space:nowrap;margin-left:9px;font-size:.75rem;line-height:10px}#analysis-status .tooltip{background:var(--bg-tertiary);color:var(--text-secondary);white-space:nowrap;opacity:0;pointer-events:none;border-radius:4px;padding:4px 8px;font-size:.75rem;transition:opacity .2s;position:absolute;bottom:100%;left:0}#analysis-status:hover .tooltip{opacity:1}#analysis-status .dot.success{background:#4caf50;box-shadow:0 0 4px #4caf5088}#analysis-status .dot.error{background:#ff6b6b;animation:1.5s ease-in-out infinite pulse;box-shadow:0 0 4px #ff6b6b88}#analysis-status .dot.warning{position:relative;overflow:visible}#analysis-status .dot.warning:after{content:"⚠";color:#ffa726;font-size:.55rem;line-height:1;position:absolute;top:-7px;right:-9px}@keyframes pulse{0%,to{box-shadow:0 0 4px #ff6b6b88}50%{box-shadow:0 0 10px #ff6b6bcc}}#components-bar{background:var(--bg-secondary);border:1px solid var(--border);width:fit-content;box-shadow:0 1px 4px var(--shadow);border-radius:0 4px 4px 0;flex-wrap:wrap;gap:6px;margin-bottom:10px;padding:6px;display:flex}#components-bar .components-bar-button{cursor:pointer;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:3px;padding:6px 12px;font-size:.8rem;font-weight:500;transition:all .2s}#components-bar .components-bar-button:hover{background:var(--bg-hover);border-color:var(--accent);transform:translateY(-1px)}#components-bar .components-bar-button.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 1px var(--bg-secondary), 0 0 0 3px var(--accent)}#components-bar .analysis-badge{opacity:.75;margin-left:4px;font-size:.65rem;font-weight:400}#components-bar .components-bar-button.active .analysis-badge{opacity:.9}#components-bar #analysis-status{border-left:1px solid var(--border);margin-left:4px;padding:4px 6px 4px 10px}#components{width:fit-content}#components .components-column,#components .components-standard-slot{align-items:flex-end;display:flex}#components .components-standard-slot[hidden],#components .components-earthquake-slot[hidden]{display:none}#canvas{background:var(--bg-secondary);border:1px solid var(--border);width:100%;height:100%;box-shadow:0 2px 8px var(--shadow);-webkit-user-select:none;user-select:none;border-radius:4px;flex-direction:column;display:none;overflow:hidden}#canvas.open{display:flex}.canvas-header{border-bottom:1px solid var(--border);background:var(--bg-tertiary);flex-shrink:0;justify-content:space-between;align-items:center;height:44px;padding:0 12px;display:flex}.canvas-header-left{align-items:center;gap:10px;display:flex}.canvas-header h2{color:var(--text-primary);margin:0;font-size:.9rem;font-weight:500}.canvas-header .print-button{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;border-radius:3px;align-items:center;gap:5px;padding:4px 10px;font-size:.75rem;font-weight:500;transition:all .2s;display:flex}.canvas-header .print-button:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-secondary)}.canvas-header .close-button{color:var(--text-secondary);cursor:pointer;opacity:.65;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:1.3rem;line-height:1;transition:all .2s;display:flex}.canvas-header .close-button:hover{background:var(--bg-hover);color:var(--text-primary);opacity:1}.canvas-header .close-button:active{background:var(--bg-active)}.canvas-body{background:var(--bg-primary);flex:1;padding:12px;overflow:hidden auto}@media print{:root{--text-primary:#111;--text-secondary:#555;--border:#ccc;--bg:#fff;--bg-primary:#fff;--bg-secondary:#fff;--bg-tertiary:#f5f5f5;--shadow:none}html.printing-canvas,body.printing-canvas{height:auto!important;position:static!important;overflow:visible!important}body.printing-canvas>:not(#layout){display:none!important}body.printing-canvas #layout{height:auto!important;display:block!important;position:static!important;overflow:visible!important}body.printing-canvas #layout>div:not(.canvas){display:none!important}body.printing-canvas #layout .canvas{width:100%!important;height:auto!important;margin:0!important;padding:0!important;display:block!important;position:static!important;overflow:visible!important}body.printing-canvas #canvas{box-shadow:none!important;border:none!important;width:100%!important;height:auto!important;display:block!important;position:static!important;overflow:visible!important}body.printing-canvas .canvas-header{display:none!important}body.printing-canvas .canvas-body{height:auto!important;padding:0!important;display:block!important;overflow:visible!important}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}[style*="opacity: 0.6"]{opacity:1!important}[style*="background: #f59e0b"],[style*="background:#f59e0b"]{color:#7a5800!important;background:#fff8e1!important;border:1px solid #d97706!important}[style*="color: #f59e0b"]{color:#7a5800!important}[style*="background: #10b981"],[style*="background:#10b981"]{color:#065f46!important;background:#ecfdf5!important;border:1px solid #059669!important}[style*="color: #10b981"]{color:#065f46!important}[style*="background: #ef4444"],[style*="background:#ef4444"]{color:#991b1b!important;background:#fef2f2!important;border:1px solid #dc2626!important}[style*="color: #ef4444"]{color:#991b1b!important}}#canvas-bar{gap:8px;display:flex}#canvas-bar button{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:3px;align-items:center;padding:6px 12px;font-size:.8rem;font-weight:500;transition:all .2s;display:flex}#canvas-bar button:hover{background:var(--bg-hover);border-color:var(--accent);transform:translateY(-1px)}#canvas-bar button.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 1px var(--bg-secondary), 0 0 0 3px var(--accent)}#earthquake-graphs{z-index:100;background:var(--bg-secondary);border:1px solid var(--border);box-shadow:0 2px 8px var(--shadow);pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:4px;flex-direction:column;gap:8px;padding:10px 12px;display:none;position:fixed;top:10px;right:10px}#earthquake-graphs.visible{display:flex}.eq-graph-label{color:var(--text-secondary);margin-bottom:1px;font-size:.72rem;font-weight:500;line-height:1.2}canvas.eq-graph{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:3px;max-width:100%;display:block}@media (width<=1024px){#earthquake-graphs{width:min(364px,100vw - 16px);margin:8px 0 0 8px;position:static}}