:root{
  --bg: #f6f7f8;
  --panel: #ffffff;
  --accent: #0b6efd;
  --muted: #667085;
  --border: #e3e7ea;
  --danger: #e11d48;
  font-family: Inter, system-ui, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html,body{height:100%;margin:0;background:var(--bg);color:#0b1220}
#app{
  display:flex;
  gap:12px;
  padding:12px;
  height:100vh;
  box-sizing:border-box;
}

.left, .right{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  box-sizing:border-box;
}

.left{
  flex:1.2;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.right{
  flex:0.9;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  justify-content:flex-start;
  max-width:420px;
}

textarea{
  width:100%;
  box-sizing:border-box;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size:13px;
  color:#08101a;
  resize:none;
  background:transparent;
}

#code{height:40vh; min-height:160px;}
.io{display:flex;gap:8px}
.io textarea{height:120px; flex:1}

.controls{
  display:flex;
  gap:8px;
  align-items:center;
}
button{
  background:var(--accent);
  color:white;
  border: none;
  padding:8px 12px;
  border-radius:8px;
  font-weight:600;
  font-size:13px;
  min-height:40px;
  min-width:64px;
}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.5;transform:none;pointer-events:none}

.small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
#speed{width:120px}

.tape{
  display:flex;
  gap:6px;
  overflow:auto;
  padding:8px;
  border-radius:8px;
  border:1px dashed var(--border);
  background:linear-gradient(180deg, rgba(11,110,253,0.03), transparent);
  min-height:88px;
  align-items:center;
}

.cell{
  min-width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--border);
  font-family: ui-monospace, monospace;
  font-weight:600;
  color:#0b1220;
  box-shadow: 0 1px 0 rgba(10,12,14,0.03);
}

.cell.ptr{
  background: linear-gradient(180deg,#eaf4ff,#fff);
  border:1px solid rgba(11,110,253,0.15);
  box-shadow: 0 4px 10px rgba(11,110,253,0.06);
}

.status{color:var(--muted);font-size:13px}
.brackets{background:#fbfdff;padding:8px;border-radius:8px;border:1px solid var(--border)}
.brackets pre{white-space:pre-wrap;margin:0;font-size:12px;color:#0b1220}
@media (max-width:720px){
  #app{flex-direction:column;padding:10px}
  .left{order:1}
  .right{order:2;width:100%;max-width:none}
  #code{height:34vh}
  .io textarea{height:100px}
}