:root{--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--card-logical-width: 512px;--card-logical-height: 342px;--font-ui: system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;--font-display: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 24px rgba(0, 0, 0, .5);--hairline: 1px}[data-theme=classic],[data-theme=classic] *{--surface-0: #ffffff;--surface-1: #f0f0f0;--surface-2: #cccccc;--surface-3: #a0a0a0;--text-1: #000000;--text-2: #666666;--text-3: #999999;--accent: #000000;--accent-hover: #666666;--accent-active: #000000;--accent-contrast: #ffffff;--hairline-color: #000000;--border-color: #000000;--glass-bg: transparent;--glass-backdrop: none;--glass-border: var(--hairline) solid var(--hairline-color);--glass-shadow: 0 2px 4px rgba(0, 0, 0, .2);--glass-radius: 0;--token-keyword-color: #000000;--token-string-color: #666666;--token-number-color: #666666;--token-comment-color: #999999;--token-keyword-weight: bold;--transition-duration: 0ms}html:not([data-palette]),html[data-palette=ink],[data-theme=haunted],[data-theme=haunted] *{--surface-0: #0b0b0c;--surface-1: #121214;--surface-2: #18181b;--surface-3: #202024;--text-1: #e8e8f0;--text-2: #a8a8c8;--text-3: #808090;--accent: #d4b98c;--accent-hover: #dcc9a4;--accent-active: #c9a979;--accent-contrast: #000000;--hairline-color: rgba(212, 185, 140, .3);--border-color: rgba(212, 185, 140, .3);--glass-bg: rgba(18, 18, 20, .7);--glass-backdrop: blur(8px);--glass-border: var(--hairline) solid rgba(212, 185, 140, .2);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .4);--glass-radius: var(--radius-md);--token-keyword-color: #d4b98c;--token-string-color: #d4b98c;--token-number-color: #8cc8c8;--token-comment-color: #808090;--token-keyword-weight: bold;--transition-duration: .15s}html[data-palette=navy],[data-theme=haunted][data-palette=navy],[data-theme=haunted][data-palette=navy] *{--surface-0: #0a1020;--surface-1: #0f172a;--surface-2: #141e33;--surface-3: #1b2740;--text-1: #e8f0f8;--text-2: #a8c8e8;--text-3: #8090a8;--accent: #a9c7e8;--accent-hover: #b8d3f0;--accent-active: #9ab5d8;--accent-contrast: #000000;--hairline-color: rgba(169, 199, 232, .3);--border-color: rgba(169, 199, 232, .3);--glass-bg: rgba(15, 23, 42, .7);--glass-backdrop: blur(8px);--glass-border: var(--hairline) solid rgba(169, 199, 232, .2);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .4);--glass-radius: var(--radius-md);--token-keyword-color: #a9c7e8;--token-string-color: #a9c7e8;--token-number-color: #88d8d8;--token-comment-color: #8090a8;--token-keyword-weight: bold;--transition-duration: .15s}html[data-palette=graphite],[data-theme=haunted][data-palette=graphite],[data-theme=haunted][data-palette=graphite] *{--surface-0: #161412;--surface-1: #1d1a17;--surface-2: #24201c;--surface-3: #2c2722;--text-1: #f0ede8;--text-2: #c8b8a8;--text-3: #a0908a;--accent: #c8875a;--accent-hover: #d4956e;--accent-active: #b87548;--accent-contrast: #1d1a17;--hairline-color: rgba(200, 135, 90, .3);--border-color: rgba(200, 135, 90, .3);--glass-bg: rgba(29, 26, 23, .7);--glass-backdrop: blur(8px);--glass-border: var(--hairline) solid rgba(200, 135, 90, .2);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .4);--glass-radius: var(--radius-md);--token-keyword-color: #c8875a;--token-string-color: #c8875a;--token-number-color: #90d0d0;--token-comment-color: #a0908a;--token-keyword-weight: bold;--transition-duration: .15s}*{box-sizing:border-box}html{--data-theme: "haunted"}html:not([data-theme]){--data-theme: "haunted"}html,body{margin:0;padding:0;width:100%;height:100%;font-family:var(--font-ui);background-color:var(--surface-0);color:var(--text-1);line-height:1.4}[data-theme=classic] body{background-image:repeating-conic-gradient(#000 0% 25%,#fff 0%) 0 0 / 2px 2px;background-color:var(--surface-1)}[data-theme=haunted] body{background:radial-gradient(circle at 20% 50%,color-mix(in srgb,var(--accent) 15%,transparent) 0%,color-mix(in srgb,var(--accent) 5%,transparent) 15%,transparent 50%),radial-gradient(circle at 80% 80%,color-mix(in srgb,var(--accent) 12%,transparent) 0%,color-mix(in srgb,var(--accent) 4%,transparent) 15%,transparent 50%),linear-gradient(180deg,var(--surface-0) 0%,var(--surface-1) 100%);background-attachment:fixed}body.edit-mode{display:grid;grid-template-columns:250px 1fr 300px;grid-template-rows:40px 1fr 200px;gap:1px;background-color:var(--surface-1)}body.run-mode{display:grid;grid-template-columns:1fr;grid-template-rows:40px 1fr;gap:1px;background-color:var(--surface-1)}#app{width:100%;height:100%;display:contents}.app-header{grid-column:1 / -1;grid-row:1;background-color:var(--surface-2);border-bottom:var(--hairline) solid var(--border-color);padding:0 var(--spacing-sm);display:flex;align-items:center;gap:var(--spacing-md);font-weight:700;font-size:clamp(12px,.75vw,15px);color:var(--text-1);height:clamp(44px,3.2vw,60px);font-family:var(--font-ui)}.app-header-title{font-weight:700;padding-right:var(--spacing-md);border-right:var(--hairline) solid var(--border-color);display:flex;align-items:center;gap:var(--spacing-sm);font-size:clamp(14px,1vw,18px)}.app-header-title-text{background:linear-gradient(135deg,var(--accent) 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}[data-theme=classic] .app-header-title-text{background:none;-webkit-text-fill-color:var(--text-1);color:var(--text-1)}.app-header-group{display:flex;gap:0;align-items:center;border-left:var(--hairline) solid var(--hairline-color);height:18px;margin:0 var(--spacing-sm);padding:0}.app-header-group:first-child{border-left:none;margin-left:0}.app-header button{border:none;padding:0;background-color:transparent;color:var(--text-2);font-weight:400;border-radius:var(--radius-sm);margin:0;font-family:var(--font-ui);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);transition:all var(--transition-duration);font-size:clamp(12px,.75vw,15px);height:30px;min-width:30px}.app-header button:hover,.app-header button:active{background-color:var(--surface-2);color:var(--text-1)}.app-header button.active,.app-header button.button-primary{background-color:var(--accent);color:var(--accent-contrast)}.app-header button.button-primary:hover{background-color:var(--accent-hover);color:var(--accent-contrast)}.app-header button.button-primary:active{background-color:var(--accent-active);color:var(--accent-contrast)}.app-header button svg{width:clamp(14px,.9vw,18px);height:clamp(14px,.9vw,18px);flex-shrink:0;color:currentColor}.theme-toggle{margin-left:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm)}.palette-selector{margin-left:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--surface-2);color:var(--text-1);border:var(--hairline) solid var(--border-color);border-radius:var(--radius-md);font-family:var(--font-ui);font-size:13px;cursor:pointer;transition:all var(--transition-duration)}.palette-selector:hover{background-color:color-mix(in srgb,var(--accent) 10%,transparent);border-color:var(--accent)}.palette-selector:focus{outline:2px solid var(--accent);outline-offset:2px}.palette-selector option{background-color:var(--surface-1);color:var(--text-1)}.app-main{display:contents}.card-list-panel{grid-column:1;grid-row:2;background:var(--glass-bg);backdrop-filter:var(--glass-backdrop);border-right:var(--glass-border);overflow-y:auto;padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md);color:var(--text-1)}.card-canvas{grid-column:2;grid-row:2;background-color:var(--surface-1);border-right:var(--hairline) solid var(--border-color);overflow:hidden;position:relative;display:flex;flex-direction:column}.element-inspector{grid-column:3;grid-row:2 / 4;background:var(--glass-bg);backdrop-filter:var(--glass-backdrop);border-left:var(--glass-border);border-right:var(--glass-border);overflow-y:auto;padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);color:var(--text-1)}.script-editor{grid-column:2;grid-row:3;background:var(--glass-bg);backdrop-filter:var(--glass-backdrop);border-top:var(--glass-border);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);overflow-y:auto;color:var(--text-1)}.edit-mode .card-list-panel{display:flex}.run-mode .card-list-panel{display:none}.edit-mode .element-inspector{display:flex}.run-mode .element-inspector{display:none}.edit-mode .script-editor{display:flex}.run-mode .script-editor{display:none}.card-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.card-item{padding:var(--spacing-sm);background-color:var(--surface-1);border:var(--hairline) solid var(--border-color);border-radius:var(--glass-radius);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);color:var(--text-1);transition:all var(--transition-duration)}.card-item:hover{background-color:color-mix(in srgb,var(--accent) 8%,transparent);border-color:var(--accent);transform:translateY(-1px)}.card-item.selected{background-color:var(--accent);color:var(--accent-contrast);border-color:var(--accent);font-weight:700}.card-item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-item-rename{padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--surface-0);border:var(--hairline) solid var(--border-color);cursor:pointer;font-size:12px;font-family:var(--font-mono);margin-right:var(--spacing-xs)}.card-item-rename:hover{background-color:var(--surface-1)}.card-item-delete{padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--surface-0);border:var(--hairline) solid var(--border-color);cursor:pointer;font-size:12px;font-family:var(--font-mono)}.card-item-delete:hover{background-color:var(--surface-1)}.empty-state-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;padding:var(--spacing-lg);border:var(--hairline) solid var(--hairline-color);border-radius:var(--radius-md);pointer-events:none;background-color:color-mix(in srgb,var(--surface-1) 50%,transparent);backdrop-filter:blur(4px)}.empty-state-text{font-weight:700;font-size:14px;color:var(--text-2);margin-bottom:var(--spacing-sm)}.empty-state-hint{font-size:12px;color:var(--text-3);font-style:italic}.canvas-container{flex:1;overflow:hidden;position:relative;display:flex;align-items:flex-start;justify-content:flex-start;padding:24px;min-height:0;background-color:var(--surface-0);box-shadow:inset 0 1px 3px #0003}.card-view{flex:none;width:512px;min-width:512px;height:342px;min-height:342px;box-sizing:border-box;background-color:#ebe7de;border:3px solid #000000;position:relative;transform-origin:top left}[data-theme=haunted] .card-view{box-shadow:0 0 16px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}[data-theme=classic] .card-view{box-shadow:var(--shadow-md)}.card-element{position:absolute;border:2px solid #000000;cursor:move;font-family:var(--font-mono);font-size:12px;padding:var(--spacing-xs);user-select:none}.card-element:hover{background-color:color-mix(in srgb,var(--accent) 8%,transparent)}.card-element.selected{outline:3px solid var(--accent);outline-offset:-1px}.card-element:focus{outline:3px solid var(--accent);outline-offset:-1px}.card-field{background-color:#fff;border:1.5px solid #000000;padding:var(--spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#000}.resize-handle{position:absolute;width:8px;height:8px;background-color:var(--accent);border:1px solid var(--border-color);cursor:nwse-resize;right:-5px;bottom:-5px}.inspector-section{display:flex;flex-direction:column;gap:var(--spacing-sm);border-bottom:1px solid var(--hairline-color);padding-bottom:var(--spacing-md)}.inspector-label{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-family:var(--font-ui)}.panel-header{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.125em;color:var(--accent);font-family:var(--font-ui)}.inspector-input{padding:var(--spacing-xs);border:1px solid var(--border-color);border-radius:var(--glass-radius);font-family:var(--font-mono);font-size:12px;background-color:var(--surface-1);color:var(--text-1)}.inspector-input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}.inspector-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}.editor-header{display:flex;gap:var(--spacing-sm);align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-sm);color:var(--text-1);font-family:var(--font-ui);font-size:13px;font-weight:600}.editor-tab{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background-color:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--hairline-color);border-bottom:none;border-radius:4px 4px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--text-2)}.editor-tab-icon{width:14px;height:14px;color:var(--accent)}.editor-title{font-weight:700;flex:1;font-size:13px;font-family:var(--font-ui)}.editor-error{color:#ff6b6b;font-size:11px}.editor-textarea{flex:1;padding:var(--spacing-sm);padding-left:40px;border:1px solid var(--border-color);border-radius:var(--glass-radius);font-family:var(--font-mono);font-size:12px;background-color:var(--surface-0);color:var(--text-1);resize:none;overflow-y:auto;line-height:1.5;position:relative}[data-theme=classic] .editor-textarea{background-color:var(--surface-1);padding-left:40px}.editor-textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.editor-line-numbers{position:absolute;left:0;top:0;bottom:0;width:32px;padding:var(--spacing-sm) 4px;background-color:color-mix(in srgb,var(--surface-2) 80%,var(--accent) 5%);border-right:1px solid var(--hairline-color);overflow:hidden;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--text-3);text-align:right;user-select:none}.editor-buttons{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}button,.button{padding:var(--spacing-xs) var(--spacing-md);background-color:var(--surface-2);border:var(--hairline) solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--text-1);transition:all var(--transition-duration)}button:hover,.button:hover{background-color:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}button:active,.button:active{background-color:var(--accent);color:var(--accent-contrast);transform:translateY(0);box-shadow:inset 0 2px 4px color-mix(in srgb,#000 20%,transparent)}button:focus-visible,.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}.card-button{background-color:#ede8de;border:2px solid #000000;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;border-radius:var(--radius-md);transition:all var(--transition-duration);box-shadow:var(--shadow-sm)}.card-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.card-button:active{transform:translateY(0);box-shadow:inset 0 2px 4px #0003}.card-button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(2px)}.modal{background:var(--glass-bg);backdrop-filter:var(--glass-backdrop);border:var(--glass-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);max-width:400px;display:flex;flex-direction:column;gap:var(--spacing-md);box-shadow:var(--shadow-lg);color:var(--text-1)}.modal-title{font-weight:700;font-size:14px;color:var(--accent)}.modal-message{font-size:12px;line-height:1.6;color:var(--text-2)}.modal-buttons{display:flex;gap:var(--spacing-md);justify-content:flex-end;margin-top:var(--spacing-sm)}input[type=text]{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--glass-radius);font-family:var(--font-ui);font-size:13px;background-color:var(--surface-1);color:var(--text-1)}textarea{padding:var(--spacing-xs);border:1px solid var(--border-color);border-radius:var(--glass-radius);font-family:var(--font-mono);font-size:12px;background-color:var(--surface-1);color:var(--text-1)}input[type=text]:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.token{font-family:var(--font-mono);font-size:12px}.token-keyword{font-weight:var(--token-keyword-weight);color:var(--token-keyword-color)}.token-identifier{color:var(--text-2)}.token-string{color:var(--token-string-color)}.token-number{color:var(--token-number-color)}.token-operator,.token-punctuation{color:var(--text-1)}.token-comment{color:var(--token-comment-color);font-style:italic}.run-mode-viewer{width:100%;height:100%;display:flex;flex-direction:column;background-color:var(--surface-0);grid-column:1 / -1;grid-row:2;position:relative}.run-mode-header{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:100;background:color-mix(in srgb,var(--surface-1) 85%,transparent);backdrop-filter:blur(8px);border:var(--hairline) solid var(--hairline-color);border-radius:var(--radius-lg);padding:8px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-md)}.run-mode-header svg{width:20px;height:20px;color:var(--accent)}.run-mode-header-label{font-family:var(--font-mono);font-size:13px;color:var(--text-1);font-weight:700}.run-mode-header-exit{background-color:color-mix(in srgb,var(--accent) 20%,transparent);border:var(--hairline) solid var(--accent);color:var(--text-1);padding:4px 12px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-mono);font-size:12px;transition:all var(--transition-duration)}.run-mode-header-exit:hover{background-color:color-mix(in srgb,var(--accent) 30%,transparent);border-color:var(--accent-hover)}.run-mode-viewer .card-canvas{flex:1;overflow:hidden;position:relative;display:block;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 1px);background-size:20px 20px;background-position:0 0,10px 10px;background-color:var(--surface-0);min-height:0;padding:24px}.run-mode-viewer .card-view{width:var(--card-logical-width);height:var(--card-logical-height);background-color:#ebe7de;border:3px solid #000000;position:absolute;left:0;top:0;margin:0;box-shadow:var(--shadow-md),inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent)}.run-button{background-color:#ede8de;border:2px solid #000000;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;font-family:var(--font-mono);color:#000;border-radius:var(--radius-md);transition:all var(--transition-duration);box-shadow:var(--shadow-sm)}.run-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.run-button:active{transform:translateY(0);box-shadow:inset 0 2px 4px #0003}.run-button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.run-field{border:1.5px solid #000000;padding:var(--spacing-xs);font-family:var(--font-mono);font-size:12px;background-color:#fff;color:#000}.run-field-editable{cursor:text}.run-field-readonly{background-color:#fff;opacity:1}::-webkit-scrollbar{width:16px;height:16px}::-webkit-scrollbar-track{background:var(--surface-1);border:var(--hairline) solid var(--border-color)}::-webkit-scrollbar-thumb{background:var(--accent);border:var(--hairline) solid var(--border-color);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}.hidden{display:none!important}.disabled{opacity:.5;pointer-events:none}.flex{display:flex}.flex-column{flex-direction:column}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.error{color:#ff6b6b}.success{color:#51cf66}.welcome-modal{background:var(--glass-bg);backdrop-filter:var(--glass-backdrop);border:var(--glass-border);border-radius:var(--glass-radius);padding:var(--spacing-xl);max-width:500px;display:flex;flex-direction:column;gap:var(--spacing-lg);box-shadow:var(--glass-shadow);color:var(--text-1);text-align:center}.welcome-icon{display:flex;justify-content:center;margin-bottom:var(--spacing-md)}.welcome-icon svg{width:64px;height:64px;color:var(--accent);opacity:.8}.welcome-title{margin:0;font-size:24px;font-weight:700;color:var(--accent);font-family:var(--font-ui);background:linear-gradient(135deg,var(--accent) 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}[data-theme=classic] .welcome-title{background:none;-webkit-text-fill-color:var(--text-1);color:var(--text-1);font-family:var(--font-ui)}.welcome-description{margin:0;font-size:14px;line-height:1.6;color:var(--text-2);font-family:var(--font-ui)}.welcome-tips{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-sm);text-align:left}.welcome-tips li{font-size:13px;line-height:1.5;color:var(--text-2);padding-left:var(--spacing-md);position:relative;font-family:var(--font-ui)}.welcome-tips li:before{content:"▸";position:absolute;left:0;color:var(--accent);font-weight:700}.welcome-buttons{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-md)}.welcome-btn{padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--border-color);border-radius:var(--glass-radius);font-family:var(--font-ui);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition-duration);text-transform:none}.welcome-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.welcome-btn-primary{background-color:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}.welcome-btn-primary:hover{background-color:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px)}.welcome-btn-primary:active{transform:translateY(0);opacity:.9}.welcome-btn-secondary{background-color:transparent;color:var(--accent);border-color:var(--accent)}.welcome-btn-secondary:hover{background-color:color-mix(in srgb,var(--accent) 8%,transparent);border-color:var(--accent-hover);color:var(--accent-hover);transform:translateY(-2px)}.welcome-btn-secondary:active{transform:translateY(0);opacity:.8}.prompt-input-container{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.prompt-input-container input{padding:var(--spacing-md);font-size:13px;border:1px solid var(--border-color);border-radius:var(--glass-radius);background-color:var(--surface-1);color:var(--text-1);font-family:var(--font-ui)}.prompt-input-container input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.button-primary{background-color:var(--accent);color:var(--surface-0);border-color:var(--accent)}.button-primary:hover{background-color:var(--accent-hover);border-color:var(--accent-hover)}.button-primary:active{background-color:var(--accent-active);transform:scale(.98)}.button-danger{background-color:#ff6b6b;color:#fff;border-color:#ff6b6b}.button-danger:hover{background-color:#ff5252;border-color:#ff5252;transform:translateY(-2px)}.button-danger:active{background-color:#ff3838;transform:scale(.98)}@media (max-width: 900px) and (min-width: 700px){body.edit-mode{grid-template-columns:250px 1fr}.element-inspector{display:none}}@media (max-width: 768px){body{grid-template-columns:200px 1fr;grid-template-rows:40px 1fr 150px}.element-inspector,.script-editor{grid-column:1 / 3;grid-row:3}}@keyframes cardFlipIn{0%{opacity:0;transform:rotateY(90deg)}to{opacity:1;transform:rotateY(0)}}@keyframes cardFlipOut{0%{opacity:1;transform:rotateY(0)}to{opacity:0;transform:rotateY(-90deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes scaleAndFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scaleAndFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.card-flip-in{perspective:1200px;animation:cardFlipIn .32s cubic-bezier(.25,.46,.45,.94) forwards}.card-flip-out{perspective:1200px;animation:cardFlipOut .32s cubic-bezier(.25,.46,.45,.94) forwards}.card-fade-in{animation:fadeIn .32s ease-out forwards}.card-fade-out{animation:fadeOut .32s ease-out forwards}.mode-switch-in{animation:scaleAndFadeIn .25s ease-out forwards}.mode-switch-out{animation:scaleAndFadeOut .25s ease-out forwards}.welcome-fade-in{animation:fadeIn .4s ease-out forwards}.modal-fade-in{animation:fadeIn .15s ease-out forwards}.modal-fade-out{animation:fadeOut .15s ease-out forwards}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important}:root{--transition-duration: 0ms !important}[data-theme=haunted],[data-theme=haunted] *,[data-theme=classic],[data-theme=classic] *{--transition-duration: 0ms !important}.card-flip-in,.card-flip-out,.card-fade-in,.card-fade-out,.mode-switch-in,.mode-switch-out,.welcome-fade-in,.modal-fade-in,.modal-fade-out{animation:none!important}}.ai-panel-drawer{position:fixed;top:48px;right:0;width:420px;height:calc(100vh - 48px);background:var(--glass-bg);backdrop-filter:var(--glass-backdrop);border-left:var(--hairline) solid var(--border-color);z-index:999;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);transform:translate(0);transition:transform .2s ease-out;overflow:hidden}.ai-panel-drawer.hidden{transform:translate(100%);display:none}.ai-panel-header{display:flex;align-items:center;justify-content:space-between;border-bottom:var(--hairline) solid var(--border-color);padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-sm) var(--spacing-lg);margin-bottom:0;flex-shrink:0}.ai-panel-drawer>:not(.ai-panel-header):not(.ai-button-group){overflow-y:auto;min-height:0;flex:1}.ai-panel-header-title{font-size:14px;font-weight:700;color:var(--text-1);font-family:var(--font-ui);margin:0}.ai-panel-close-btn{background:transparent;border:none;color:var(--text-2);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;font-size:18px;transition:color var(--transition-duration)}.ai-panel-close-btn:hover{color:var(--accent)}.ai-offline-notice{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);margin:var(--spacing-md) var(--spacing-lg);background-color:var(--surface-1);border:1px solid var(--hairline-color);border-radius:var(--radius-md);font-size:12px;color:var(--text-2);font-family:var(--font-mono);line-height:1.3}.ai-offline-notice:before{content:"";width:6px;height:6px;background-color:var(--accent);border-radius:50%;flex-shrink:0}.ai-prompt-section{display:flex;flex-direction:column;gap:var(--spacing-sm);flex-shrink:0;padding:var(--spacing-md) var(--spacing-lg);padding-top:var(--spacing-md)}.ai-prompt-label{font-size:12px;font-weight:700;color:var(--text-1);font-family:var(--font-ui)}.ai-prompt-textarea{width:100%;min-height:80px;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--glass-radius);background-color:var(--surface-1);color:var(--text-1);font-family:var(--font-mono);font-size:12px;line-height:1.4;resize:vertical;font-weight:400}.ai-prompt-textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.ai-generate-btn{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--accent);color:var(--accent-contrast);border:2px solid var(--accent);border-radius:var(--glass-radius);font-weight:600;font-family:var(--font-ui);font-size:13px;cursor:pointer;transition:all var(--transition-duration);flex-shrink:0;margin:0 var(--spacing-lg)}.ai-generate-btn:hover:not(:disabled){background-color:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}.ai-generate-btn:active:not(:disabled){transform:scale(.98)}.ai-generate-btn:disabled{background-color:var(--surface-2);color:var(--text-3);border-color:var(--surface-2);opacity:1;cursor:not-allowed}.ai-code-block{padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--surface-0);border:1px solid var(--hairline-color);border-radius:var(--glass-radius);font-family:var(--font-mono);font-size:11px;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;line-height:1.4;color:var(--text-2);flex-shrink:0}.ai-diff-preview{padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--surface-0);border:1px solid var(--hairline-color);border-radius:var(--glass-radius);font-family:var(--font-mono);font-size:11px;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;line-height:1.4;flex-shrink:0}.ai-diff-line{padding:4px 4px 4px 8px;margin-bottom:2px;border-radius:0;border-left:2px solid transparent;color:var(--text-2)}.ai-diff-line.add{background-color:#5aa07824;border-left-color:#5aa078}.ai-diff-line.remove{background-color:#c85a5a24;border-left-color:#c85a5a;text-decoration:none;color:var(--text-3)}.ai-diff-line.context{color:var(--text-3);opacity:.7}.ai-button-group{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-lg);flex-shrink:0;border-top:1px solid var(--border-color)}.ai-accept-btn,.ai-discard-btn{padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--glass-radius);font-weight:600;font-family:var(--font-ui);font-size:13px;cursor:pointer;transition:all var(--transition-duration)}.ai-accept-btn{background-color:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}.ai-accept-btn:hover:not(:disabled){background-color:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}.ai-accept-btn:active:not(:disabled){transform:scale(.98)}.ai-accept-btn:disabled{opacity:.5;cursor:not-allowed}.ai-discard-btn{background-color:transparent;color:var(--text-2);border-color:var(--border-color)}.ai-discard-btn:hover{background-color:color-mix(in srgb,var(--accent) 8%,transparent);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.ai-discard-btn:active{transform:scale(.98)}*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.card-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.card-element:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.tooltip{padding:var(--spacing-sm) var(--spacing-md);background:var(--glass-bg);backdrop-filter:var(--glass-backdrop);border:var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--glass-radius);color:var(--text-1);font-family:var(--font-ui);font-size:12px;line-height:1.2;max-width:200px;text-align:center;word-wrap:break-word;z-index:10000}[data-theme=classic] .tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--border-color)}[data-theme=haunted] .tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--hairline-color)}} .ai-diff-preview > div{padding:2px 4px;margin-bottom:2px;line-height:1.4}@media (min-width: 901px){body.edit-mode{grid-template-columns:clamp(220px,15vw,300px) 1fr clamp(260px,17vw,340px);grid-template-rows:clamp(44px,3.2vw,60px) 1fr clamp(200px,24vh,300px)}body.run-mode{grid-template-rows:clamp(44px,3.2vw,60px) 1fr}}.app-header button{font-size:clamp(12px,.8vw,16px);padding:clamp(5px,.4vw,9px) clamp(10px,.8vw,16px)}.app-header button svg{width:clamp(14px,1vw,20px);height:clamp(14px,1vw,20px)}.ai-panel.ai-panel-drawer>*,.ai-panel.ai-panel-drawer .ai-prompt-section>*{flex:0 0 auto!important}.ai-panel.ai-panel-drawer{overflow-y:auto}.ai-panel.ai-panel-drawer>.ai-button-group{margin-top:auto;position:sticky;bottom:0;background:inherit;padding-top:8px}.ai-generate-btn{height:40px;min-height:40px;max-height:40px}.ai-offline-notice{padding:8px 12px;height:auto;min-height:0}.ai-code-block,.ai-diff-preview{height:auto;min-height:0;max-height:none;flex:0 0 auto}.script-editor{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}