*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-header: #f5f5f5;--bg-tab: #e8e8e8;--bg-tab-active: #ffffff;--bg-tab-hover: #dedede;--color-tab: #666;--color-tab-active: #1a1a1a;--border: #d4d4d4;--accent: #007acc;--bg-btn: #e0e0e0;--color-btn: #444;--border-btn: #c4c4c4;--color-label: #555;--color-add-btn: #666;--bg-preview: #ffffff;--bg-preview-err: #fff0f0;--color-preview-err: #c0392b;--border-preview-err: #f5c6cb;--cm-hl-keyword: #d73a49;--cm-hl-control-keyword: #d73a49;--cm-hl-type: #6f42c1;--cm-hl-string: #032f62;--cm-hl-number: #005cc5;--cm-hl-tag: #22863a;--cm-hl-attribute: #6f42c1;--cm-hl-property: #e36209;--cm-hl-operator: #24292e;--cm-hl-comment: #6a737d;--cm-hl-macro: #6f42c1;--cm-fg: #24292e;--cm-gutter-fg: #6e7781;--cm-gutter-border: #d0d7de;--cm-active-line: #8a91991a;--cm-selection: #bbdfff;--cm-cursor: #24292e}@media(prefers-color-scheme:dark){:root{--bg-header: #1e1e1e;--bg-tab: #2d2d2d;--bg-tab-active: #1e1e1e;--bg-tab-hover: #353535;--color-tab: #999;--color-tab-active: #e8e8e8;--border: #3a3a3a;--bg-btn: #2d2d2d;--color-btn: #ccc;--border-btn: #555;--color-label: #bbb;--color-add-btn: #888;--cm-hl-keyword: #f97583;--cm-hl-control-keyword: #f97583;--cm-hl-type: #b392f0;--cm-hl-string: #9ecbff;--cm-hl-number: #79b8ff;--cm-hl-tag: #85e89d;--cm-hl-attribute: #b392f0;--cm-hl-property: #ffab70;--cm-hl-operator: #e1e4e8;--cm-hl-comment: #6a737d;--cm-hl-macro: #b392f0;--cm-fg: #e1e4e8;--cm-gutter-fg: #6e7781;--cm-gutter-border: #30363d;--cm-active-line: #6e76801a;--cm-selection: #003d73;--cm-cursor: #c9d1d9}}html,body,#app{height:100%;overflow:hidden;background:var(--bg-header);font-family:system-ui,-apple-system,sans-serif;font-size:14px}#header{height:40px;display:flex;align-items:stretch;background:var(--bg-header);border-bottom:1px solid var(--border);flex-shrink:0}#tabs-row{flex:1;display:flex;align-items:stretch;overflow-x:auto;min-width:0}#tabs{display:flex;align-items:stretch}.tab{display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--bg-tab);color:var(--color-tab);border-right:1px solid var(--border);cursor:pointer;white-space:nowrap;font-size:13px;user-select:none}.tab.active{background:var(--bg-tab-active);color:var(--color-tab-active);border-bottom:2px solid var(--accent)}.tab:not(.active):hover{background:var(--bg-tab-hover)}.tab-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}.tab-close{background:none;border:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:1px 3px;border-radius:3px;opacity:.5;flex-shrink:0}.tab-close:hover{opacity:1;background:#80808033}#add-file-btn{align-self:center;padding:0 10px;height:100%;background:none;border:none;color:var(--color-add-btn);cursor:pointer;font-size:20px;line-height:1}#add-file-btn:hover{color:var(--color-tab-active)}#controls{display:flex;align-items:center;gap:8px;padding:0 12px;border-left:1px solid var(--border);flex-shrink:0;color:var(--color-label)}#format-btn{padding:4px 10px;background:var(--bg-btn);border:1px solid var(--border-btn);border-radius:4px;color:var(--color-btn);cursor:pointer;font-size:12px}#format-btn:hover{filter:brightness(1.1)}#view-selector{padding:4px 6px;background:var(--bg-btn);border:1px solid var(--border-btn);border-radius:4px;color:var(--color-btn);font-size:12px}#main{display:flex;height:calc(100% - 40px)}#editor-panel{flex:0 0 var(--editor-width, 50%);overflow:hidden;min-width:0}#divider{flex:0 0 5px;background:var(--border);cursor:col-resize;user-select:none}body.dragging-divider{cursor:col-resize;user-select:none}body.dragging-divider iframe{pointer-events:none}#editor-panel .cm-editor{height:100%}#editor-panel .cm-scroller{overflow:auto}#editor-panel .cm-editor{background-color:transparent;color:var(--cm-fg)}#editor-panel .cm-gutters{background-color:transparent;color:var(--cm-gutter-fg);border-right-color:var(--cm-gutter-border)}#editor-panel .cm-activeLineGutter,#editor-panel .cm-activeLine{background-color:var(--cm-active-line)}#editor-panel .cm-selectionBackground,#editor-panel .cm-focused .cm-selectionBackground{background-color:var(--cm-selection)!important}#editor-panel .cm-cursor,#editor-panel .cm-cursor-primary{border-left-color:var(--cm-cursor)}#preview-panel{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-preview)}#preview-frame{flex:1;border:none;width:100%}#preview-errors{padding:10px 14px;background:var(--bg-preview-err);color:var(--color-preview-err);font-family:monospace;font-size:12px;border-top:1px solid var(--border-preview-err);max-height:160px;overflow-y:auto;white-space:pre-wrap}.hop-hover-tooltip{font-size:12px;padding:6px 10px;background:var(--bg-header);color:var(--cm-fg);border:1px solid var(--border);border-radius:4px;max-width:440px;box-shadow:0 2px 8px #00000026;font-family:Inter,sans-serif}.hop-hover-tooltip p{margin:0;line-height:1.5}.hop-hover-tooltip p+p{margin-top:4px}.hop-hover-tooltip code{font-family:monospace;font-size:11px;background:#8080801f;padding:1px 3px;border-radius:3px}.hop-hover-tooltip pre{margin:0 0 4px;overflow-x:auto}.hop-hover-tooltip pre code{background:none;padding:0;font-size:12px}