*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:14px;background:#1e1e24;color:#e4e4e8}.app{display:grid;grid-template-rows:48px 1fr;height:100%}.header{display:flex;align-items:center;gap:12px;padding:0 16px;background:#14141a;border-bottom:1px solid #2e2e38}.header h1{font-size:15px;margin:0;font-weight:600}.header .tag{font-size:11px;color:#8f8fa3;border:1px solid #3a3a48;border-radius:10px;padding:2px 8px}.header .spacer{flex:1}.project-select{background:#242430;border:1px solid #343442;color:#e4e4e8;border-radius:4px;padding:4px 8px;font-size:12.5px;max-width:220px}.hbtn{background:#242430;border:1px solid #343442;color:#c9c9d6;border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer}.hbtn.danger:hover{border-color:#ff6b6b;color:#ff6b6b}.cm-amp-region{background:#e8562d17}.cm-amp-keyword{color:#ff8c5a;font-weight:600}.cm-amp-var{color:#6ee7de}.cm-amp-string{color:#b5e48c}.cm-amp-func{color:#ffd166}.cm-amp-perso{color:#d3a8ff;background:#d3a8ff1f;border-radius:2px}.main{display:grid;grid-template-columns:minmax(380px,1fr) minmax(380px,1fr);min-height:0}.left{display:grid;grid-template-rows:36px 1fr;min-height:0;border-right:1px solid #2e2e38}.tabs{display:flex;align-items:stretch;background:#191920;border-bottom:1px solid #2e2e38;overflow-x:auto}.tabs button{background:none;border:none;border-bottom:2px solid transparent;color:#9a9aad;padding:0 14px;font-size:12.5px;cursor:pointer;white-space:nowrap}.tabs button.active{color:#fff;border-bottom-color:#e8562d}.editor-host{min-height:0;overflow:hidden}.editor-host .cm-editor{height:100%;font-size:13px}.right{display:grid;grid-template-rows:36px 1fr auto;min-height:0}.toolbar{display:flex;align-items:center;gap:6px;padding:0 10px;background:#191920;border-bottom:1px solid #2e2e38;font-size:12px}.toolbar .spacer{flex:1}.toolbar button{background:#242430;border:1px solid #343442;color:#c9c9d6;border-radius:4px;padding:3px 10px;font-size:12px;cursor:pointer}.toolbar button.active{background:#e8562d;border-color:#e8562d;color:#fff}.preview-host{min-height:0;overflow:auto;background:#26262e;display:flex;justify-content:center;padding:16px}.preview-frame{background:#fff;border:none;height:100%;min-height:400px;box-shadow:0 2px 12px #0006;transition:width .15s ease}.source-view{width:100%;margin:0;padding:12px;overflow:auto;font-family:Consolas,Courier New,monospace;font-size:12px;color:#d0d0dc;white-space:pre-wrap;word-break:break-all}.problems{max-height:190px;overflow-y:auto;border-top:1px solid #2e2e38;background:#17171d;padding:6px 0}.problems h2{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8f8fa3;margin:4px 12px}.problem{display:flex;gap:8px;padding:3px 12px;font-size:12.5px;align-items:baseline}.problem .sev{font-weight:700;font-size:11px;width:52px;flex-shrink:0}.problem .sev.error{color:#ff6b6b}.problem .sev.warning{color:#ffc94d}.problem .sev.compat{color:#6bb2ff}.problem .loc{color:#8f8fa3;font-size:11.5px;flex-shrink:0}.problem .clients{color:#8f8fa3;font-style:italic}.problem .sev.compat.soft{color:#5a7ba6}.problem a{color:#6bb2ff;text-decoration:none}.problem a:hover{text-decoration:underline}.problems .datasource{float:right;font-weight:400;text-transform:none;letter-spacing:0;color:#6d6d80}.problems .empty{color:#6d6d80;padding:3px 12px;font-size:12.5px}