:root{ --bg:#f7f7f8; --panel:#ffffff; --ink:#0f172a; --grid:#e5e7eb; }
  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--ink); font:500 16px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto}
  header{
    position:sticky; top:0; z-index:5; background:var(--panel);
    border-bottom:1px solid var(--grid); display:flex; gap:12px; align-items:center; padding:12px 16px;
  }
  header h1{font-size:16px; margin:0; display:none}
  .tabs{display:flex; gap:8px; margin-left:auto}
  .tab{appearance:none; border:1px solid var(--grid); background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; font:700 13px}
  .tab.active{box-shadow:0 0 0 3px #c7d2fe66; border-color:#93c5fd}
  main{padding:14px}
  .deck{background:var(--panel); border:1px solid var(--grid); border-radius:14px; overflow:hidden}
  .topbar{display:flex; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--grid)}
  .spacer{flex:1}
  .btn{appearance:none; border:1px solid var(--grid); background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; font:600 13px; text-decoration:none; color:#111827}
  .frameWrap{position:relative; height:78vh; background:#fff}
  iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:none; background:#fff}
  iframe.active{display:block}
  .hint{color:#475569; font-size:12px; padding:8px 12px}
  code{background:#f3f4f6; padding:2px 6px; border-radius:6px; border:1px solid var(--grid)}