:root{--bg-panel:#3c3e44;--bg-panel-dark:#1f2023;--bg-header:#16171c;--text-light:#f5f5f6;--accent-html:#ff6f61;--accent-css:#4dc9ff;--accent-js:#ffd166;--console-error:#ff6b6b;--console-warn:#ffd166;--console-info:#4dc9ff}*,:after,:before{box-sizing:border-box}#root,body,html{height:100%}body,html{overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0}#root{display:flex;flex-direction:column;min-height:100%}.app-header{background-color:#16171c;background-color:var(--bg-header);border-bottom:1px solid #303136;color:#f5f5f6;color:var(--text-light);flex-wrap:wrap;gap:.5rem;justify-content:space-between;padding:.6rem 1rem}.app-header,.brand{align-items:center;display:flex}.brand{gap:.6rem}.brand-logo{color:#f5f5f6;color:var(--text-light);display:block}.brand-name{font-size:1.05rem;font-weight:700;letter-spacing:.02em}.live-badge{align-items:center;color:#8ef0a5;display:inline-flex;font-size:.7rem;gap:.35rem;letter-spacing:.08em;margin-left:.25rem;text-transform:uppercase}.live-dot{animation:livePulse 1.8s ease-out infinite;background:#34d058;border-radius:50%;box-shadow:0 0 0 #34d05899;height:.5rem;width:.5rem}@keyframes livePulse{0%{box-shadow:0 0 0 0 #34d0588c}70%{box-shadow:0 0 0 6px #34d05800}to{box-shadow:0 0 0 0 #34d05800}}.header-actions{display:flex;gap:.5rem}.header-btn{align-items:center;background:#303136;border:1px solid #484a51;border-radius:.4rem;color:#f5f5f6;color:var(--text-light);cursor:pointer;display:inline-flex;font-size:.85rem;gap:.4rem;padding:.4rem .75rem;text-decoration:none;transition:background-color .15s ease,transform .15s ease}.header-btn:hover{background:#43454c;transform:translateY(-1px)}.header-btn:active{transform:translateY(0)}.shortcut-hint{background:#1d1e20;border:1px solid #4d4f56;border-radius:.3rem;color:#b7bac2;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.7rem;padding:.05rem .35rem}.playground{flex:1 1;flex-direction:column}.pane,.playground{display:flex;min-height:0}.pane{flex:1 1}.top-pane{background-color:#3c3e44;background-color:var(--bg-panel)}.bottom-pane{gap:2px}.preview-pane{background:#fff;flex:2 1;min-width:0}.preview-pane iframe{display:block}.resizable-bottom-group,.resizable-editor-group,.resizable-outer-group{height:100%;width:100%}.resizable-panel{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;overflow:hidden}[data-panel]{transition:flex .2s ease}.is-resizing [data-panel]{transition:none}.resize-handle{background:#303136;flex-shrink:0;position:relative;transition:background-color .15s ease}.resize-handle:focus-visible,.resize-handle:hover{background:#4dc9ff;background:var(--accent-css);outline:none}.resize-handle--vertical{cursor:col-resize;width:4px}.resize-handle--horizontal{cursor:row-resize;height:4px}.editor-container{background-color:#3c3e44;background-color:var(--bg-panel);border-top:3px solid #0000;display:flex;flex-basis:0;flex-direction:column;flex-grow:1;min-width:0;overflow:hidden;padding:.5rem;transition:height .2s ease}.editor-container--html{border-top-color:#ff6f61;border-top-color:var(--accent-html)}.editor-container--css{border-top-color:#4dc9ff;border-top-color:var(--accent-css)}.editor-container--js{border-top-color:#ffd166;border-top-color:var(--accent-js)}.editor-container.collapsed .code-mirror-wrapper{display:none}.expand-collapse-btn{background:none;border:none;color:#fff;cursor:pointer;flex-shrink:0;margin-left:.5rem}.editor-title{align-items:center;background-color:#1f2023;background-color:var(--bg-panel-dark);border-top-left-radius:.5rem;border-top-right-radius:.5rem;color:#fff;display:flex;gap:.4rem;justify-content:space-between;padding:.5rem .5rem .5rem 1rem}.editor-title-label{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-mirror-wrapper{flex-grow:1;min-height:0;overflow:hidden}.code-mirror-wrapper,.code-mirror-wrapper .cm-editor{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.code-mirror-wrapper .cm-editor{height:100%}.code-mirror-wrapper .cm-scroller{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.console-pane{background:#1a1b20;border-left:2px solid #000;color:#e6e6e6;display:flex;flex:1 1;flex-direction:column;min-width:0}.console-header{align-items:center;background:#1f2023;background:var(--bg-panel-dark);display:flex;font-size:.8rem;font-weight:600;justify-content:space-between;letter-spacing:.05em;padding:.4rem .75rem;text-transform:uppercase}.console-clear-btn{background:none;border:none;color:#ccc;cursor:pointer;padding:.15rem .4rem}.console-clear-btn:disabled{cursor:default;opacity:.35}.console-clear-btn:not(:disabled):hover{color:#fff}.console-body{flex:1 1;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.8rem;overflow-y:auto;padding:.4rem 0}.console-empty{color:#777;font-style:italic;padding:.5rem .75rem}.console-line{animation:consoleLineIn .15s ease-out;border-bottom:1px solid #ffffff0d;padding:.25rem .75rem;white-space:pre-wrap;word-break:break-word}@keyframes consoleLineIn{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.console-error{color:#ff6b6b;color:var(--console-error)}.console-warn{color:#ffd166;color:var(--console-warn)}.console-info{color:#4dc9ff;color:var(--console-info)}[cmdk-overlay]{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a0a0c99;inset:0;position:fixed;z-index:100}[cmdk-overlay][data-state=open]{animation:paletteFadeIn .12s ease-out}[cmdk-overlay][data-state=closed]{animation:paletteFadeOut .1s ease-in forwards}.command-palette-content{background:#1f2023;background:var(--bg-panel-dark);border:1px solid #3e4046;border-radius:.6rem;box-shadow:0 20px 60px #00000073;display:flex;flex-direction:column;left:50%;max-height:min(420px,70vh);overflow:hidden;position:fixed;top:12vh;transform:translateX(-50%);width:min(560px,calc(100vw - 2rem));z-index:101}.command-palette-content[data-state=open]{animation:paletteSlideIn .14s ease-out}.command-palette-content[data-state=closed]{animation:paletteSlideOut .1s ease-in forwards}[cmdk-root]{display:flex;flex:1 1;flex-direction:column;min-height:0}@keyframes paletteFadeIn{0%{opacity:0}to{opacity:1}}@keyframes paletteFadeOut{0%{opacity:1}to{opacity:0}}@keyframes paletteSlideIn{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}@keyframes paletteSlideOut{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-6px)}}[cmdk-input]{background:#0000;border:none;border-bottom:1px solid #3a3b41;color:#f5f5f6;color:var(--text-light);flex-shrink:0;font-size:.95rem;outline:none;padding:.9rem 1rem;width:100%}[cmdk-input]::placeholder{color:#777c88}[cmdk-list]{flex:1 1;min-height:0;overflow-y:auto;padding:.4rem;scrollbar-color:#5b5e67 #0000;scrollbar-width:thin}[cmdk-list]::-webkit-scrollbar{width:8px}[cmdk-list]::-webkit-scrollbar-track{background:#0000}[cmdk-list]::-webkit-scrollbar-thumb{background-color:#5b5e67;border-radius:999px}[cmdk-list]::-webkit-scrollbar-thumb:hover{background-color:#4dc9ff;background-color:var(--accent-css)}[cmdk-empty]{color:#8a8f9c;font-size:.9rem;padding:1.5rem 1rem;text-align:center}[cmdk-group-heading]{color:#777c88;font-size:.7rem;font-weight:600;letter-spacing:.06em;padding:.5rem .6rem .25rem;text-transform:uppercase}[cmdk-item]{align-items:center;border-radius:.4rem;color:#f5f5f6;color:var(--text-light);cursor:pointer;display:flex;font-size:.9rem;padding:.55rem .75rem;scroll-margin:.4rem;transition:background-color .1s ease,color .1s ease}[cmdk-item][data-selected=true]{background:#4dc9ff;background:var(--accent-css);color:#0e1116}[cmdk-item][aria-disabled=true]{cursor:default;opacity:.4}.crash-screen{align-items:center;background:#16171c;background:var(--bg-header);color:#f5f5f6;color:var(--text-light);display:flex;flex-direction:column;gap:.75rem;height:100%;justify-content:center;padding:2rem;text-align:center}.crash-screen button{background:#4dc9ff;background:var(--accent-css);border:none;border-radius:.4rem;color:#16171c;cursor:pointer;font-weight:600;padding:.5rem 1.25rem}@media (max-width:1024px){.app-header{padding:.5rem .75rem}}@media (max-width:760px){#root,body,html{height:auto;min-height:100%}.pane,.playground{flex:none}.pane{min-height:0}.bottom-pane,.top-pane{flex-direction:column}.editor-container{flex:none;height:260px}.editor-container.collapsed{flex-grow:0;height:44px}.preview-pane{flex:none;height:45vh;min-height:280px}.console-pane{border-left:none;border-top:2px solid #000;flex:none;height:240px}.bottom-pane{gap:0}}@media (max-width:480px){.app-header{padding:.5rem .6rem}.brand-name{font-size:.95rem}.live-badge{display:none}.header-btn{padding:.45rem .6rem}.btn-label,.shortcut-hint{display:none}.editor-title{font-size:.9rem;padding:.4rem .4rem .4rem .75rem}.editor-container{height:220px}.command-palette-content{top:6vh}}@media (max-height:480px) and (orientation:landscape){#root,body,html{height:100%}.pane,.playground{flex:1 1}.pane{min-height:0}.bottom-pane,.top-pane{flex-direction:row}.editor-container{flex:1 1;height:auto;min-height:0}.editor-container.collapsed{height:auto}.console-pane,.preview-pane{flex:1 1;height:auto}.console-pane{border-left:2px solid #000;border-top:none}.app-header{padding:.35rem .6rem}.live-badge{display:none}}@supports (padding:max(0px)){.app-header{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
/*# sourceMappingURL=main.8ec425a2.css.map*/