:root{--bg:#0b0f14;--bar:#161b22;--ink:#e6e9ee;--muted:#8a93a0;--amber:#f59e0b}
  html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow:hidden}
  body{display:flex;flex-direction:column}
  nav{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bar);border-bottom:1px solid #222a33;overflow-x:auto;flex:none}
  nav h1{font-size:16px;font-weight:800;margin:0 10px 0 4px;white-space:nowrap;color:#fff}
  .tab{flex:none;display:flex;align-items:center;gap:8px;background:#1f2630;color:var(--ink);border:1px solid #2b333d;border-radius:999px;
    padding:8px 14px;font:600 14px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
  .tab b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2b333d;font-size:12px}
  .tab:hover{border-color:#4a5563}
  .tab.on{background:var(--amber);color:#1b2430;border-color:var(--amber)}
  .tab.on b{background:#1b2430;color:var(--amber)}
  .tools{flex:none;margin-left:auto;display:flex;gap:6px;align-items:center}
  .tools button{width:36px;height:36px;border-radius:50%;border:1px solid #2b333d;background:#1f2630;color:#fff;font-size:18px;cursor:pointer}
  .langs{display:flex;border:1px solid #2b333d;border-radius:999px;overflow:hidden;margin-right:6px}
  .langs button{width:auto;height:32px;border:0;border-radius:0;padding:0 10px;font:700 12px Inter,system-ui,sans-serif;background:#1f2630;color:var(--muted)}
  .langs button.on{background:#2b333d;color:#fff}
  main{flex:1;position:relative}
  iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
  .hint{position:absolute;right:12px;bottom:10px;font-size:12px;color:var(--muted);pointer-events:none}
  @media (max-width:640px){nav h1{display:none} .tab{padding:7px 11px;font-size:13px} .hint{display:none}}

.tabs{display:contents}