:root{
  --bg:#ffffff; --ink:#14181d; --muted:#5d6672; --line:#e2e6eb;
  --chip:#f4f6f8; --chip-hi:#e9edf2; --accent:#137a3f; --warn-bg:#fff4e5; --warn-ink:#8a4b00;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --ink:#e6edf3; --muted:#8b949e; --line:#222a35;
    --chip:#161b22; --chip-hi:#21262d; --accent:#7ee787; --warn-bg:#2b2000; --warn-ink:#f0c674;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; flex-direction:column; background:var(--bg); color:var(--ink);
  font:13px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
#bar{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-bottom:1px solid var(--line); background:var(--chip); flex:0 0 auto;
}
#dot{color:var(--accent); font-size:12px}
#who{display:flex; flex-direction:column; min-width:0; flex:1 1 auto}
#title{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#kind{
  align-self:flex-start;
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:1px 7px; border-radius:999px;
  border:1px solid var(--line); background:var(--chip); color:var(--accent);
}
#source{color:var(--muted); font-size:11px; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#source:hover{text-decoration:underline}
#tools{display:flex; gap:6px; flex:0 0 auto}
#tools button, #tools a{
  font:600 12px/1 inherit; padding:6px 10px; border-radius:6px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); text-decoration:none;
}
#tools button:hover, #tools a:hover{background:var(--chip-hi)}
#tools button[aria-pressed="true"]{background:var(--chip-hi); border-color:var(--muted)}
#warn{
  margin:0; padding:8px 12px; background:var(--warn-bg); color:var(--warn-ink);
  border-bottom:1px solid var(--line); font-size:12px; flex:0 0 auto;
}
#stage{position:relative; flex:1 1 auto; min-height:0}
#frame{width:100%; height:100%; border:0; display:block; background:#fff}
#srcpanel{
  position:absolute; inset:0; background:var(--bg); display:flex; flex-direction:column; border-top:1px solid var(--line);
}
#srcpanel[hidden]{display:none}
#srchead,#consolehead{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-bottom:1px solid var(--line); background:var(--chip);
  font:600 11px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
#srchead button,#consolehead button{
  font:600 11px/1 inherit; text-transform:none; letter-spacing:0;
  padding:5px 10px; border-radius:6px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
}
#srctext{
  flex:1; resize:none; border:0; outline:0; padding:14px; background:var(--bg);
  font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink);
}
#console{
  position:absolute; left:0; right:0; bottom:0; max-height:40%;
  background:var(--bg); border-top:1px solid var(--line); display:flex; flex-direction:column;
}
#console[hidden]{display:none}
#consoletxt{
  margin:0; padding:10px 12px; overflow:auto; white-space:pre-wrap; word-break:break-word;
  font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink); flex:1;
}