: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: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"/1fr}#layout .viewer{grid-area:1/1/5/2}}#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 input[type=number]:focus,#parameters input[type=text]: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{align-items:flex-end;display:flex}#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)}.baked-controls{z-index:10;background:var(--bg-secondary);background:color-mix(in srgb, var(--bg-secondary) 92%, transparent);border:1px solid var(--border);max-width:min(1040px,100vw - 16px);box-shadow:0 10px 30px var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:4px;grid-template-columns:auto minmax(180px,340px) minmax(220px,auto) auto;align-items:center;gap:8px 10px;padding:10px;display:grid;position:fixed;bottom:14px;left:50%;transform:translate(-50%)}.baked-playback{align-items:center;gap:8px;display:flex}.baked-button{min-width:64px;height:32px;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border);font:inherit;cursor:pointer;border-radius:4px;padding:0 10px;font-size:.82rem}.baked-button-secondary{min-width:84px;color:var(--text-secondary)}.baked-button:hover{background:var(--bg-hover)}.baked-slider{width:100%;min-width:180px;accent-color:var(--accent)}.baked-readout{min-width:220px;color:var(--text-secondary);white-space:nowrap;gap:2px;font-size:.78rem;line-height:1.25;display:grid}.baked-readout>div:first-child{color:var(--text-primary);align-items:baseline;gap:8px;display:flex}.baked-readout strong{font-size:.86rem;font-weight:650}.baked-readout span{color:var(--text-secondary)}.baked-warning{color:#fca5a5!important}.baked-legend{color:var(--text-secondary);white-space:nowrap;grid-template-columns:auto 90px auto;align-items:center;gap:6px;font-size:.72rem;display:grid}.baked-legend strong{color:var(--text-primary);grid-column:1/-1;font-size:.76rem;font-weight:600}.baked-legend i{border:1px solid var(--border);background:linear-gradient(90deg,#7dd3fc,#22c55e,#facc15,#ef4444);border-radius:999px;width:90px;height:9px;display:block}.baked-message{place-items:center;padding:24px;display:grid}.baked-message>div{background:var(--bg-secondary);border:1px solid var(--border);max-width:720px;box-shadow:0 1px 4px var(--shadow);border-radius:4px;padding:20px}.baked-message h1{margin-bottom:8px;font-size:1rem;font-weight:600}.baked-message p{color:var(--text-secondary);margin-bottom:12px;font-size:.9rem}.baked-message code{color:var(--text-primary);background:var(--bg-primary);border:1px solid var(--border);border-radius:4px;padding:10px;font-size:.8rem;line-height:1.5;display:block;overflow-x:auto}@media (width<=720px){.baked-controls{grid-template-columns:1fr;width:calc(100vw - 16px)}.baked-slider,.baked-playback,.baked-readout,.baked-legend{width:100%}.baked-playback{justify-content:space-between}.baked-legend{grid-template-columns:auto 1fr auto}.baked-legend i{width:100%}}