:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--black: #080808;--panel: #1d1e22;--line: #2c2d32;--muted-line: #15161a;--editor-row-height: 52vh}*{box-sizing:border-box}html,body{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden;background:var(--black)}body{min-height:100dvh}button,input,textarea{font:inherit}.workspace{display:grid;grid-template-rows:minmax(180px,var(--editor-row-height)) 10px minmax(180px,1fr);width:100%;height:100dvh;padding:8px;background:var(--black)}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr);min-height:0;overflow:hidden}.editor-panel,.preview-panel{min-width:0;min-height:0;overflow:hidden;border:1px solid var(--line);background:var(--panel)}.editor-panel{display:grid;grid-template-rows:40px minmax(0,1fr)}.panel-tab{display:inline-flex;width:max-content;max-width:100%;height:40px;align-items:center;gap:8px;padding:0 15px;border-right:1px solid var(--line);background:linear-gradient(90deg,#202125,#121316);color:#f1f1f3}.panel-tab h1,.panel-tab h2{margin:0;font-size:15px;font-weight:700;line-height:1;white-space:nowrap}.panel-icon{display:grid;width:19px;height:19px;flex:0 0 19px;place-items:center;border-radius:5px;background:#ff3c4f;color:#0b0b0c;font-family:Menlo,Monaco,Consolas,monospace;font-size:12px;font-weight:900;line-height:1}.editor-panel--css .panel-icon{background:#20c8f2;font-size:11px}.editor-panel--js .panel-icon{background:#f2d200}.panel-icon--js{font-size:8px;letter-spacing:-2px;padding-right:2px}.editor{min-height:0;border-top:1px solid var(--muted-line);overflow:hidden}.column-resizer,.row-resizer{position:relative;background:var(--black);touch-action:none;-webkit-user-select:none;user-select:none}.column-resizer{cursor:col-resize}.column-resizer:after{position:absolute;inset:0 4px;background:#24252a;content:"";opacity:0;transition:opacity .12s ease}.row-resizer{cursor:row-resize}.row-resizer:after{position:absolute;inset:4px 0;background:#24252a;content:"";opacity:0;transition:opacity .12s ease}.column-resizer:hover:after,.row-resizer:hover:after,.is-resizing-columns .column-resizer:after,.is-resizing-rows .row-resizer:after{opacity:1}.preview-panel{display:grid;grid-template-rows:40px minmax(0,1fr);background:#fff}.panel-tab--preview{position:relative;z-index:1;width:100%;border-right:0;border-bottom:1px solid var(--line);background:var(--black)}.panel-tab--preview h2{display:inline-flex;height:40px;align-items:center;margin-left:-15px;padding:0 15px;border-right:1px solid var(--line);background:linear-gradient(90deg,#202125,#121316)}.save-button{display:grid;width:32px;height:32px;margin-left:auto;place-items:center;border:1px solid #3a3b42;border-radius:4px;background:#2c2d34;color:#d8d9df;cursor:pointer;transition:border-color .12s ease,background-color .12s ease,color .12s ease,transform .12s ease}.save-button:hover{border-color:#565864;background:#3a3b44;color:#fff}.save-button:active{transform:translateY(1px)}.save-button:focus-visible{outline:2px solid #20c8f2;outline-offset:2px}.save-button[data-state=saved]{border-color:#34d399;background:#155e4b;color:#fff}.save-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#preview{display:block;width:100%;height:100%;border:0;background:#fff}@media(max-width:779px){html,body{height:auto;overflow:auto}.workspace{display:block;height:auto;min-height:100dvh}.editor-grid{display:grid;grid-template-columns:1fr!important;gap:8px;overflow:visible}.editor-panel{height:280px}.column-resizer,.row-resizer{display:none}.preview-panel{height:420px;margin-top:8px}}@media(prefers-reduced-motion:reduce){.column-resizer:after,.row-resizer:after{transition:none}}