:root{color-scheme:light;--bg: #f4f7fc;--surface: #ffffff;--surface-soft: #f6f9ff;--line: #d5dfeb;--text: #1f2a38;--muted: #5d718b;--accent: #0f9ad6;--accent-strong: #0e79ba;--danger: #be3f56;--canvas-bg: #f2f5fb}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%}body{font-family:Manrope,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}button,input,textarea,select{font:inherit}.studio-shell{width:100%;height:100%;display:flex;flex-direction:column}.studio-topbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem .6rem;border-bottom:1px solid var(--line);background:#fff}.topbar-left{display:flex;align-items:center;gap:.6rem;min-width:0}.topbar-title-stack{display:grid;gap:.1rem}.studio-kicker{font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1870b5;white-space:nowrap}.studio-subnote{margin:0;font-size:.67rem;color:var(--muted);line-height:1.2}.draft-status{margin:0;font-size:.64rem;line-height:1.2;font-weight:700}.draft-status-idle{color:#9eb2d0}.draft-status-saving{color:#bcdfff}.draft-status-saved{color:#91e7bc}.draft-status-error{color:#ff9bab}.project-name-input{height:30px;width:min(340px,52vw);border:1px solid #c4d4e7;background:#f8fbff;color:#102133;border-radius:4px;padding:0 .6rem}.project-name-input:focus,.field input:focus,.field textarea:focus,.field select:focus,.payload-output:focus{outline:2px solid rgba(15,154,214,.22);border-color:#57a9dd}.topbar-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.ghost-btn,.primary-btn,.danger-btn,.link-btn{height:30px;border-radius:4px;border:1px solid transparent;padding:0 .7rem;font-size:.76rem;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s ease}.ghost-btn{background:#f1f6fd;border-color:#c2d4ea;color:#20364d}.ghost-btn:hover{background:#e8f1fb}.ghost-btn:disabled,.primary-btn:disabled,.danger-btn:disabled{opacity:.55;cursor:not-allowed}.primary-btn{background:var(--accent);color:#eefdfd;border-color:#0e79ba}.primary-btn:hover{filter:brightness(1.04)}.danger-btn{background:#fff1f4;border-color:#efc4cd;color:#7d1f33}.danger-btn:hover{background:#ffe7ec}.link-btn{background:#f6f2ff;border-color:#d8cbf3;color:#493d78}.link-btn:hover{background:#efe8ff}.studio-body{flex:1;min-height:0;display:grid;grid-template-columns:250px 1fr 350px}.studio-body.focus-canvas{grid-template-columns:1fr}.studio-body.focus-canvas .left-panel,.studio-body.focus-canvas .right-panel{display:none}.studio-panel{min-height:0;overflow:auto;border-right:1px solid var(--line);background:#f7faff}.right-panel{border-right:0;border-left:1px solid var(--line)}.panel-content{padding:.6rem;display:grid;gap:.55rem}.panel-block{border:1px solid #d3deea;background:#fff;border-radius:4px;padding:.6rem;display:grid;gap:.5rem}.panel-block h2{margin:0;font-size:.82rem;color:#1f334b;letter-spacing:.01em}.field{display:grid;gap:.24rem}.field span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}.field input,.field textarea,.field select,.payload-output{border:1px solid #c4d2e2;border-radius:4px;background:#fbfdff;color:#1f2c3d;font-size:.79rem;padding:.4rem .52rem}.field textarea,.payload-output{resize:vertical;min-height:78px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.hint{margin:0;font-size:.72rem;color:var(--muted);line-height:1.4}.stage-preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.36rem}.stage-preset-btn{border:1px solid #c4d5e7;border-radius:4px;background:#f7fbff;color:#20344d;text-align:left;padding:.45rem .5rem;display:grid;gap:.08rem;cursor:pointer}.stage-preset-btn span{font-size:.72rem;font-weight:700}.stage-preset-btn small{font-size:.62rem;color:#5f7693}.stage-preset-btn.active{border-color:#69b8e5;background:#edf6ff}.stage-helper-row{display:flex;gap:.34rem;flex-wrap:wrap}.grid-toggle{height:28px;border:1px solid #c5d5e8;border-radius:4px;background:#f5f9ff;color:#28415d;display:inline-flex;align-items:center;gap:.34rem;padding:0 .48rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.grid-toggle input{width:14px;height:14px;accent-color:#22b2c3}.slim-btn{height:28px;padding:0 .56rem;font-size:.68rem}.stage-align-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem}.theme-btn{height:28px;border:1px solid #c5d5e8;border-radius:4px;background:#f7fbff;color:#233c57;font-size:.68rem;font-weight:700;cursor:pointer}.theme-btn.active{border-color:#69b8e5;background:#edf6ff}.theme-swatch-row{display:flex;gap:.28rem;flex-wrap:wrap}.theme-swatch{width:20px;height:20px;border-radius:2px;border:1px solid rgba(255,255,255,.28)}.tiny-btn{height:27px;padding:0 .3rem;font-size:.64rem}.error-text{margin:0;font-size:.74rem;color:#ff9bab}.palette-grid,.template-grid{display:grid;gap:.4rem}.symbol-list{display:grid;gap:.36rem}.symbol-item{border:1px solid #c5d5e8;border-radius:4px;background:#f7fbff;padding:.42rem;display:grid;gap:.32rem}.symbol-item-head{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem}.symbol-item-head strong{font-size:.73rem;color:#243a54}.symbol-item-head small{font-size:.62rem;color:#67809d;letter-spacing:.03em}.asset-input-grid{grid-template-columns:minmax(0,1fr) auto;align-items:end}.asset-action-stack{display:grid;gap:.28rem}.asset-list{display:grid;gap:.36rem}.asset-item{border:1px solid #c5d5e8;border-radius:4px;background:#f7fbff;padding:.42rem;display:grid;grid-template-columns:58px minmax(0,1fr);gap:.44rem}.asset-preview-wrap{width:58px;height:58px;border-radius:2px;border:1px solid #c5d5e8;background:#eef4fb;overflow:hidden}.asset-preview{width:100%;height:100%;object-fit:cover;display:block}.asset-meta{min-width:0;display:grid;gap:.16rem;align-content:start}.asset-meta strong{font-size:.73rem;color:#243a54;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-meta small{font-size:.62rem;color:#67809d}.asset-actions{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.24rem}.template-item{border:1px solid #c5d5e8;border-radius:4px;background:#f8fbff;color:#253a54;text-align:left;padding:.5rem .56rem;display:grid;gap:.14rem;cursor:pointer}.template-item:hover{border-color:#74bce4}.template-item.active{border-color:#69b8e5;background:#edf6ff}.template-title{font-size:.8rem;font-weight:700}.template-copy{font-size:.68rem;color:#5f7895;line-height:1.3}.palette-item{border:1px solid #c5d5e8;border-radius:4px;background:#f8fbff;color:#253a54;text-align:left;padding:.48rem .56rem;display:grid;gap:.12rem;cursor:pointer}.palette-item:hover{border-color:#74bce4}.palette-label{font-size:.78rem;font-weight:700}.palette-hint{font-size:.68rem;color:#5f7895}.layer-list,.record-list{display:grid;gap:.33rem}.layer-row{border:1px solid #c7d7e9;border-radius:4px;background:#f8fbff;padding:.34rem;display:grid;gap:.32rem}.layer-row-meta{display:flex;flex-wrap:wrap;gap:.24rem}.layer-state-chip{display:inline-flex;align-items:center;height:18px;border-radius:4px;border:1px solid #c5d5e8;background:#edf4fd;color:#385472;font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:0 .38rem}.layer-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.24rem}.layer-action-btn{height:24px;border:1px solid #c5d5e8;border-radius:4px;background:#f2f7fe;color:#2a435f;font-size:.62rem;font-weight:700;cursor:pointer}.layer-action-btn:hover{background:#e8f1fb}.layer-action-btn:disabled{opacity:.5;cursor:not-allowed}.layer-item,.record-item{border:1px solid #c7d7e9;border-radius:4px;padding:.4rem .48rem;background:#f8fbff;color:#243c56;display:flex;align-items:center;justify-content:space-between;font-size:.73rem;cursor:pointer}.layer-item{width:100%}.layer-item small,.record-item small{color:#66809d;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em}.layer-item.active,.record-item.active{border-color:#69b8e5;background:#edf6ff}.panel-tabs-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.45rem;padding:.6rem;border-bottom:1px solid #d1ddeb;background:#fff;position:sticky;top:0;z-index:3}.panel-tabs{display:flex;gap:.3rem}.panel-tabs button{height:31px;min-width:0;flex:1;border:1px solid #c5d5e8;border-radius:4px;background:#f3f8ff;color:#2a455f;font-size:.76rem;font-weight:700;cursor:pointer;white-space:nowrap}.panel-tabs button.active{border-color:#69b8e5;background:#edf6ff;color:#1e3850}.advanced-toggle{display:inline-flex;align-items:center;gap:.32rem;color:#5f7490;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.advanced-toggle input{width:14px;height:14px;accent-color:#22b2c3}.horizontal-actions{display:flex;gap:.4rem}.stage-panel{min-height:0;display:flex;flex-direction:column;background:#eef4fc}.stage-toolbar{padding:.5rem .7rem;border-bottom:1px solid #d3deea;background:#fff;display:grid;gap:.45rem}.stage-toolbar-main{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;flex-wrap:wrap}.stage-toolbar p{margin:0;color:#526b88;font-size:.73rem;max-width:720px}.stage-device-switch{display:flex;flex-wrap:wrap;gap:.3rem}.stage-device-btn{min-height:30px;border:1px solid #c5d5e8;border-radius:4px;background:#f4f9ff;color:#29445f;padding:.24rem .5rem;display:grid;gap:.08rem;text-align:left;font-size:.69rem;font-weight:700;cursor:pointer}.stage-device-btn small{font-size:.58rem;color:#607993}.stage-device-btn.active{border-color:#69b8e5;background:#eaf5ff;color:#1f3a53}.stage-wrap{flex:1;min-height:0;padding:.75rem;overflow:auto;display:grid;place-items:center}.stage-canvas{width:1280px;height:760px;position:relative;border-radius:2px;border:1px solid #c9d7e7;background:var(--canvas-bg);overflow:hidden}.stage-element{position:absolute;border:1px solid transparent;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;padding:8px 10px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}.stage-element.locked{cursor:not-allowed;opacity:.9}.stage-element.selected{border-style:solid;border-color:#198fca}.stage-element.primary{border-color:#136ca8}.stage-resize-handle{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border-radius:2px;border:1px solid #136ca8;background:#fff;cursor:nwse-resize}.stage-resize-handle:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-right:2px solid #136ca8;border-bottom:2px solid #136ca8}.stage-guide{position:absolute;pointer-events:none;z-index:12}.stage-guide-v{top:0;bottom:0;width:1px;background:#11a0b2d9}.stage-guide-h{left:0;right:0;height:1px;background:#11a0b2d9}.binding-chip{position:absolute;top:4px;right:4px;font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;color:#123654;background:#d8efff;padding:.14rem .32rem}.node-heading,.node-text{margin:0;width:100%;white-space:pre-wrap;pointer-events:none}.node-heading{line-height:1.05;font-weight:700}.node-text{line-height:1.35}.node-button{width:100%;height:100%;border:none;font:inherit;font-weight:700;pointer-events:none}.node-image{width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}.node-image-placeholder{width:100%;height:100%;display:grid;place-items:center;border-radius:inherit;background:repeating-linear-gradient(135deg,#0e1a2b14,#0e1a2b14 10px,#0e1a2b24 10px,#0e1a2b24 20px);color:#3e5b83;font-size:.9em;font-weight:700;pointer-events:none}.node-shape{width:100%;height:100%;border-radius:inherit;pointer-events:none}.hidden-file-input{display:none}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#22364d57;display:grid;place-items:center;padding:1rem;z-index:30}.modal-panel{width:min(960px,96vw);max-height:90vh;overflow:auto;border-radius:4px;border:1px solid #c6d5e7;background:#fff;padding:.8rem}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.modal-header h2{margin:0;font-size:1rem;color:#20374f}.payload-output{width:100%;min-height:420px;font-family:JetBrains Mono,SFMono-Regular,monospace;font-size:.75rem;line-height:1.45}.toast{position:fixed;right:.9rem;bottom:.9rem;border-radius:4px;border:1px solid #9dcceb;background:#ebf6ff;color:#24517a;padding:.48rem .68rem;font-size:.74rem;font-weight:700;z-index:40}@media(max-width:1320px){.studio-body{grid-template-columns:220px 1fr 320px}}@media(max-width:1100px){.studio-body{grid-template-columns:1fr;grid-template-rows:auto auto auto}.studio-panel,.right-panel{border-right:0;border-left:0;border-bottom:1px solid var(--line);max-height:48vh}.stage-wrap{padding:.5rem}.stage-canvas{width:1120px;height:680px}}@media(max-width:760px){.studio-topbar,.topbar-left{flex-direction:column;align-items:stretch}.studio-subnote{display:none}.topbar-actions{justify-content:flex-start}.project-name-input{width:100%}.panel-tabs-wrap{grid-template-columns:1fr;align-items:stretch}.advanced-toggle{justify-self:start}.stage-preset-grid{grid-template-columns:1fr}.stage-device-switch{width:100%}.stage-device-btn{flex:1;min-width:0}.stage-align-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-input-grid{grid-template-columns:1fr}}