*{box-sizing:border-box}html,body,#root{touch-action:pan-x pan-y;height:100%;margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#222;background:#f5f5f7;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{color:#222;background:#f5f5f7;flex-direction:column;height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}header{background:#fff;border-bottom:1px solid #ddd;padding:.6rem 1rem}.app-credits{color:#777;text-align:center;background:#fff;border-top:1px solid #ddd;padding:.4rem 1rem;font-size:.72rem}.app-credits a{color:#555;border-bottom:1px dotted #aaa;text-decoration:none}.app-credits a:hover{color:#222;border-bottom-color:#555}.app-logo{width:auto;height:52px;display:block}main{flex:1;grid-template-columns:340px 1fr;min-height:0;display:grid}.app--aside-collapsed main{grid-template-columns:1fr}aside{background:#fff;border-right:1px solid #ddd;flex-direction:column;gap:1rem;min-height:0;padding:1rem;display:flex;overflow-y:auto}.aside-header{justify-content:space-between;align-items:center;margin:-.25rem 0 0;display:flex}.aside-title{text-transform:uppercase;letter-spacing:.06em;color:#888;font-size:.72rem;font-weight:700}.aside-collapse{color:#666;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:3px;padding:.15rem .4rem;font-size:.8rem;line-height:1}.aside-collapse:hover{color:#1361ab;background:#eceef3;border-color:#d8dadf}.aside-expand{z-index:5;color:#2d3138;cursor:pointer;background:#fff;border:1px solid #d8dadf;border-radius:4px;padding:.25rem .5rem;font-size:.85rem;line-height:1;position:absolute;top:.5rem;left:.5rem;box-shadow:0 1px 3px #00000014}.aside-expand:hover{color:#1361ab;background:#eceef3}.app--aside-collapsed .canvas-header,.app--aside-collapsed .canvas-empty,.app--aside-collapsed .stale-banner{padding-left:2.75rem}.input-panel{flex-direction:column;gap:.75rem;display:flex}.input-panel label{flex-direction:column;gap:.25rem;font-size:.85rem;font-weight:600;display:flex}.input-panel textarea{resize:vertical;caret-color:#d23434;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;width:100%;padding:.4rem;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:.9rem;display:block}.input-panel textarea:focus{border-color:#1361ab;outline:none;box-shadow:0 0 0 2px #1361ab2e}.input-panel .insert-buttons{flex-wrap:wrap;gap:.25rem;margin-top:.25rem;display:flex}.input-panel .nt-quick-insert{color:#2d3138;cursor:pointer;background:#f5f6f8;border:1px solid #d8dadf;border-radius:4px;flex:none;min-width:1.8rem;padding:.25rem .45rem;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:.82rem;font-weight:700;line-height:1;transition:background .12s,border-color .12s,transform 60ms}.input-panel .nt-quick-insert:hover{background:#eceef3;border-color:#c2c6ce}.input-panel .nt-quick-insert:active{transform:translateY(1px)}.input-panel small{color:#888;font-weight:400}.input-panel small.err{color:#c0392b}.input-panel .temp-row{align-items:center;gap:.5rem;display:flex}.input-panel .temp-row input[type=range]{flex:1}.input-panel .temp-row input[type=number]{border:1px solid #ccc;border-radius:4px;width:4.5rem;padding:.3rem .4rem;font-size:.9rem}.input-panel .temp-row input[type=number].err{border-color:#c0392b;box-shadow:0 0 0 2px #c0392b26}.input-panel .auto-fold{color:#2d3138;cursor:pointer;flex-direction:row;align-items:center;gap:.4rem;font-size:.82rem;font-weight:500;display:flex}.input-panel .auto-fold input[type=checkbox]{cursor:pointer;margin:0}.input-panel .fold-button{color:#fff;cursor:pointer;background:#1361ab;border:none;border-radius:4px;margin-top:.25rem;padding:.5rem 1rem;font-size:.95rem;font-weight:600}.input-panel .fold-button:disabled{cursor:not-allowed;background:#aac}.error{color:#b03a2e;background:#fdecea;border:1px solid #f5c2bd;border-radius:4px;padding:.5rem .75rem;font-size:.85rem}.config-panel{border-top:1px solid #eee;flex-direction:column;gap:.5rem;padding-top:.6rem;display:flex}.config-toggle,.panel-toggle{cursor:pointer;color:#6c727a;text-transform:uppercase;letter-spacing:.08em;text-align:left;background:0 0;border:none;border-bottom:1px solid #e3e5ea;align-items:center;gap:.4rem;width:100%;padding:.25rem 0 .3rem;font-size:.7rem;font-weight:700;display:inline-flex}.config-toggle:hover,.panel-toggle:hover{color:#1361ab;border-bottom-color:#c7d6e6}.config-toggle-caret,.panel-toggle-caret{color:#9aa0a8;width:.65rem;font-size:.65rem;display:inline-block}.config-toggle:hover .config-toggle-caret,.panel-toggle:hover .panel-toggle-caret{color:#1361ab}.config-dot{background:#1361ab;border-radius:50%;width:.45rem;height:.45rem;margin-left:.1rem}.config-body{flex-direction:column;gap:.55rem;padding:.5rem .1rem .25rem;font-size:.82rem;display:flex}.config-field{flex-direction:column;gap:.2rem;font-weight:600;display:flex}.config-field select,.config-field input[type=number]{border:1px solid #ccc;border-radius:4px;padding:.3rem .4rem;font-size:.85rem;font-weight:400}.config-flags{flex-direction:column;gap:.3rem;display:flex}.config-flags label{cursor:pointer;align-items:center;gap:.4rem;font-weight:400;display:flex}.config-reset{color:#2d3138;cursor:pointer;background:#f5f6f8;border:1px solid #d8dadf;border-radius:4px;align-self:flex-start;padding:.3rem .6rem;font-size:.75rem}.config-reset:disabled{opacity:.45;cursor:not-allowed}.config-reset:not(:disabled):hover{background:#eceef3}.btn{cursor:pointer;border:1px solid #0000;border-radius:5px;flex:1;justify-content:center;align-items:center;gap:.35rem;min-width:90px;padding:.45rem .7rem;font-size:.82rem;font-weight:600;transition:background .12s,border-color .12s,box-shadow .12s,transform 60ms;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-icon{font-size:.95rem;line-height:1}.btn--ghost{color:#2d3138;background:#f5f6f8;border-color:#d8dadf}.btn--ghost:hover{background:#eceef3;border-color:#c2c6ce}.btn--primary{color:#fff;background:#1361ab;border-color:#1361ab;box-shadow:0 1px 2px #1361ab40}.btn--primary:hover{background:#0f5394;border-color:#0f5394;box-shadow:0 2px 5px #1361ab4d}.palette-row{flex-wrap:wrap;gap:.3rem;margin-top:.15rem;display:flex}.palette-swatch{cursor:pointer;border:1px solid #c2c6ce;border-radius:3px;width:1.4rem;height:1.1rem;padding:0;transition:transform 80ms,box-shadow 80ms,border-color 80ms}.palette-swatch:hover{border-color:#888;transform:scale(1.08)}.palette-swatch--active{border-color:#1361ab;box-shadow:0 0 0 2px #1361ab40}.canvas-wrap{background:#fff;flex-direction:column;justify-content:stretch;align-items:stretch;display:flex;position:relative;overflow:hidden}.canvas-header{background:#fafbfc;border-bottom:1px solid #eee;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.6rem .9rem;display:flex}.canvas-header-actions{flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.canvas-header-actions .btn{flex:none;min-width:0;padding:.35rem .65rem;font-size:.8rem}.canvas-header-actions .btn:disabled{opacity:.55;cursor:not-allowed}.canvas-header-divider{background:#d8dadf;align-self:stretch;width:1px;margin:0 .15rem}.canvas-header-group-label{text-transform:uppercase;letter-spacing:.06em;color:#888;margin-right:.05rem;font-size:.7rem;font-weight:600}.canvas-view-style{color:#2d3138;cursor:pointer;align-items:center;gap:.35rem;font-size:.78rem;display:inline-flex}.canvas-view-style-label{text-transform:uppercase;letter-spacing:.06em;color:#888;font-size:.7rem;font-weight:600}.canvas-view-style select{color:#2d3138;cursor:pointer;background:#fff;border:1px solid #d8dadf;border-radius:4px;padding:.25rem .4rem;font-size:.78rem}.png-prefs{display:inline-flex;position:relative}.png-prefs__toggle.is-open{background:#eceef3;border-color:#c2c6ce}.png-prefs__popover{z-index:20;color:#2d3138;background:#fff;border:1px solid #d8dadf;border-radius:6px;flex-direction:column;gap:.7rem;min-width:220px;padding:.7rem .8rem;font-size:.8rem;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 6px 20px #0000001f}.png-prefs__row{cursor:pointer;align-items:center;gap:.5rem;display:flex}.png-prefs__row input[type=checkbox]{cursor:pointer;width:1rem;height:1rem}.png-prefs__group-label{text-transform:uppercase;letter-spacing:.05em;color:#888;margin-bottom:.35rem;font-size:.68rem;font-weight:600}.png-prefs__segmented{background:#f5f6f8;border:1px solid #d8dadf;border-radius:5px;display:flex;overflow:hidden}.png-prefs__segmented button{cursor:pointer;color:#2d3138;background:0 0;border:0;border-right:1px solid #d8dadf;flex-direction:column;flex:1;align-items:center;gap:.1rem;padding:.4rem;font-size:.78rem;font-weight:500;line-height:1.1;display:flex}.png-prefs__segmented button:last-child{border-right:0}.png-prefs__segmented button:hover{background:#eceef3}.png-prefs__segmented button.is-active{color:#fff;background:#1361ab}.png-prefs__segmented-sub{opacity:.7;font-size:.65rem}.canvas-header-metrics{flex-wrap:wrap;gap:1.25rem;display:flex}.canvas-header .metric{flex-direction:column;gap:.1rem;display:flex}.canvas-header .metric-label{text-transform:uppercase;letter-spacing:.05em;color:#888;font-size:.68rem;font-weight:600}.canvas-header .metric-value{color:#2d3138;white-space:nowrap;font-size:.95rem;font-weight:600}.canvas-stage{flex:1;justify-content:stretch;align-items:stretch;min-height:0;display:flex;position:relative}.canvas-stage.is-stale{opacity:.4;filter:grayscale(.5);pointer-events:none}.stale-banner{color:#6b5300;background:#fff7e0;border-bottom:1px solid #f0d77a;align-items:center;gap:.5rem;padding:.45rem .9rem;font-size:.85rem;display:flex}.stale-banner:before{content:"⚠";font-size:1rem;line-height:1}.canvas-empty{color:#999;text-align:center;margin:auto;font-size:.95rem;line-height:1.5}.sequence-canvas{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:100%}.sequence-canvas.dragging{cursor:grabbing}.nt-node--selectable{cursor:pointer}.canvas-hint{color:#777;background:#fafbfc;border-top:1px solid #eee;flex:none;padding:.4rem .9rem;font-size:.78rem}.canvas-hint kbd{color:#444;background:#f8f8f8;border:1px solid #c8c8c8;border-radius:2px;padding:0 .25rem;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:.7rem;display:inline-block}.insert-marker{pointer-events:none;animation:1.1s ease-in-out infinite insert-marker-pulse}@keyframes insert-marker-pulse{0%,60%{opacity:1}61%,to{opacity:.45}}@media (width<=768px){.app,.app--aside-collapsed{height:auto;min-height:100vh}.app-logo{height:40px}main,.app--aside-collapsed main{flex-direction:column;grid-template-columns:none;display:flex}aside{border-bottom:1px solid #ddd;border-right:none;min-height:0;overflow:visible}.aside-collapse,.aside-expand{display:none}.app--aside-collapsed .canvas-header,.app--aside-collapsed .canvas-empty,.app--aside-collapsed .stale-banner{padding-left:.9rem}.canvas-wrap{overflow:visible}.canvas-stage{flex:none;height:100vw;min-height:320px;max-height:100vh}.canvas-empty{min-height:60vw;padding:2rem 1rem}}