@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--hue-primary: 250;--hue-success: 150;--hue-warning: 40;--hue-danger: 350;--color-primary: hsl(var(--hue-primary), 70%, 60%);--color-primary-hover: hsl(var(--hue-primary), 70%, 50%);--color-primary-light: hsl(var(--hue-primary), 70%, 96%);--color-bg: hsl(220, 20%, 98%);--color-surface: hsl(0, 0%, 100%);--color-surface-hover: hsl(220, 10%, 96%);--color-text: hsl(220, 30%, 20%);--color-text-dim: hsl(220, 20%, 50%);--color-border: hsl(220, 15%, 90%);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);font-family:Inter,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--color-text);background-color:var(--color-bg)}:root.dark{--color-bg: hsl(220, 25%, 12%);--color-surface: hsl(220, 25%, 18%);--color-surface-hover: hsl(220, 25%, 22%);--color-text: hsl(220, 10%, 90%);--color-text-dim: hsl(220, 10%, 65%);--color-border: hsl(220, 20%, 25%);--color-primary-light: hsl(var(--hue-primary), 50%, 20%);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .2);color-scheme:dark}body{margin:0;min-width:320px;min-height:100vh}*,*:before,*:after{box-sizing:border-box}button{font-family:inherit;cursor:pointer}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.help-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.help-modal-content{background-color:var(--color-surface);color:var(--color-text);width:90%;max-width:860px;height:85%;max-height:780px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--color-border)}.help-modal-header{padding:16px 24px;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;background-color:var(--color-bg);flex-shrink:0}.help-modal-header h2{margin:0;font-size:1.25rem;font-weight:700;color:var(--color-text)}.help-modal-close{background:none;border:none;cursor:pointer;color:var(--color-text-dim);padding:6px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background-color .2s}.help-modal-close:hover{background-color:var(--color-surface-hover);color:var(--color-text)}.help-modal-tabs{display:flex;background-color:var(--color-bg);border-bottom:1px solid var(--color-border);padding:0 16px;gap:4px;overflow-x:auto;flex-shrink:0}.tab-btn{display:flex;align-items:center;gap:8px;padding:12px 16px;background:none;border:none;border-bottom:3px solid transparent;font-size:.9rem;font-weight:600;color:var(--color-text-dim);cursor:pointer;transition:all .2s ease;white-space:nowrap}.tab-btn:hover{color:var(--color-primary);background-color:var(--color-primary-light)}.tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary);background-color:var(--color-surface)}.help-modal-body{padding:24px 28px;overflow-y:auto;line-height:1.7;flex:1}.help-section h3{margin-top:0;margin-bottom:16px;font-size:1.2rem;color:var(--color-primary);border-bottom:2px solid var(--color-primary-light);padding-bottom:8px}.help-section h4{margin-top:20px;margin-bottom:10px;font-size:1.02rem;font-weight:700;color:var(--color-text)}.help-section p{margin-bottom:12px}.guide-card{background-color:var(--color-bg);border-left:4px solid var(--color-primary);padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:16px}.highlight-box{background-color:var(--color-primary-light);border:1px solid var(--color-primary);border-radius:var(--radius-md);padding:16px;margin-bottom:20px;color:var(--color-text);line-height:1.7}.step-list{margin-bottom:20px;padding-left:20px}.step-list li{margin-bottom:12px}.icon-list{list-style:none;padding:0;margin:0 0 16px}.icon-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--color-border)}.icon-list li:last-child{border-bottom:none}.icon-badge{display:flex;align-items:center;gap:4px;flex-shrink:0;width:44px;height:32px;justify-content:center;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-primary)}.help-modal-body code{background-color:var(--color-bg);color:#d92662;padding:2px 6px;border-radius:var(--radius-sm);font-family:Consolas,Courier New,monospace;font-size:.9em}.editor-layout{display:flex;flex-direction:column;height:100vh;background-color:var(--color-bg)}.editor-toolbar{height:48px;background-color:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding:0 1rem}.editor-main{display:flex;flex:1;overflow:hidden}.editor-sidebar{flex-shrink:0;background-color:var(--color-bg);overflow-y:auto}.editor-resizer{flex-shrink:0;width:5px;cursor:col-resize;background-color:var(--color-border);transition:background-color .15s}.editor-resizer:hover,.editor-resizer:active{background-color:var(--color-primary)}.editor-drag-overlay{position:fixed;inset:0;z-index:9999;cursor:col-resize}.editor-code{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden}.editor-preview{flex-shrink:0;background-color:var(--color-surface);display:flex;flex-direction:column}.editor-tabbar{display:flex;align-items:stretch;background-color:var(--color-bg);border-bottom:1px solid var(--color-border);overflow-x:auto;flex-shrink:0}.editor-tab{display:flex;align-items:center;gap:6px;padding:0 8px 0 12px;height:34px;font-size:.82rem;color:var(--color-text-dim);background-color:transparent;border-right:1px solid var(--color-border);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;max-width:180px}.editor-tab.active{color:var(--color-text);background-color:var(--color-surface);border-bottom-color:var(--color-primary)}.editor-tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-tab-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;border:none;background:transparent;border-radius:4px;color:var(--color-text-dim);cursor:pointer}.editor-tab-close:hover{background-color:var(--color-surface-hover);color:var(--color-text)}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}