:root { --m5-bg:#111312; --m5-panel:#1b1e1d; --m5-edge:#2b302e;
        --m5-ink:#e6e3dc; --m5-dim:#8b918d; --m5-accent:#c87a2c; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--m5-bg); color:var(--m5-ink);
  font:14px/1.5 ui-monospace,Menlo,Consolas,monospace; }
body { display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:24px 16px 40px; }
.m5-title { font-size:15px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; margin:0; color:var(--m5-accent); }
.m5-title span { color:var(--m5-dim); font-weight:500; }
.m5-side { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
  justify-content:center; }
.m5-col { display:flex; flex-direction:column; gap:10px; }
.m5-stick { background:linear-gradient(#262a28,#191c1b); border:1px solid var(--m5-edge);
  border-radius:18px; padding:16px; box-shadow:0 20px 60px -30px #000;
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.m5-bezel { background:#000; border-radius:6px; padding:6px; line-height:0;
  box-shadow:inset 0 0 0 1px #333; }
.m5-screen { image-rendering:pixelated; display:block; touch-action:none;
  cursor:grab; border-radius:2px; }
.m5-screen:active { cursor:grabbing; }
.m5-row { display:flex; gap:10px; }
button { font:inherit; color:var(--m5-ink); background:#202422;
  border:1px solid var(--m5-edge); border-radius:6px; padding:8px 16px;
  cursor:pointer; user-select:none; -webkit-user-select:none; }
button:hover { border-color:#3d4441; }
button:active, button.on { background:var(--m5-accent); border-color:var(--m5-accent);
  color:#16181a; }
button:focus-visible { outline:2px solid #4189cc; outline-offset:2px; }
.m5-card { background:var(--m5-panel); border:1px solid var(--m5-edge);
  border-radius:8px; padding:12px 14px; min-width:280px; max-width:360px; }
.m5-card h2 { font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--m5-dim); margin:0 0 8px; font-weight:600; }
.m5-tog { display:flex; align-items:center; gap:8px; color:var(--m5-dim);
  font-size:12px; cursor:pointer; margin-top:8px; }
.m5-hint { color:var(--m5-dim); font-size:12px; margin:8px 0 0; }
.m5-log { height:200px; overflow:auto; margin:0; font-size:11.5px; line-height:1.45;
  color:var(--m5-dim); white-space:pre-wrap; word-break:break-word; }
