:root { font-family:Arial,Helvetica,sans-serif; color:#111; background:#f3f3f3; }
* { box-sizing:border-box; }
body { margin:0; border-top:3px solid #111; }
.shell { max-width:1150px; margin:0 auto; padding:30px 22px 22px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.brand { display:flex; gap:12px; align-items:center; }
.mark { width:53px; height:53px; display:block;
  object-fit:contain; flex:none; }
.brand strong { display:block; font-size:28px; letter-spacing:-.04em; }
.brand small { display:block; margin-top:4px; color:#555; font-size:13px; }
button { font:700 15px Arial,sans-serif; background:#fff; border:2px solid #111;
  padding:12px 16px; cursor:pointer; }
button:hover,button.active { background:#111; color:#fff; }
button:focus-visible,a:focus-visible { outline:3px solid #555; outline-offset:3px; }
button:disabled { opacity:.5; cursor:wait; }
.tabs { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.message { margin:18px 0 26px; font-size:13px; color:#444; min-height:16px; }
.display-wrap { display:flex; justify-content:center; width:100%; padding:2px 0 14px; }
.display-host { flex:none; position:relative; }
.display { width:800px; height:480px; position:absolute; left:0; top:0;
  transform-origin:top left; background:#fff; color:#111; border:2px solid #111;
  box-shadow:0 18px 35px #0002; padding:16px 16px 0; display:flex;
  flex-direction:column; overflow:hidden; }
.screen { display:flex; gap:30px; flex:1; min-height:0; padding:8px 0 15px; }
.drawing { flex:1; min-width:0; border:2px solid #111; background:#fff;
  box-shadow:7px 7px 0 #111; overflow:hidden; }
.drawing img { width:100%; height:100%; display:block; object-fit:contain;
  image-rendering:pixelated; }
.sidebar { flex:none; width:140px; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; gap:13px; text-align:center; }
.info { width:136px; border-top:2px solid #111; border-bottom:1px solid #888;
  padding:10px 1px; display:flex; flex-direction:column; gap:12px; text-align:left; }
.info div { display:flex; flex-direction:column; gap:4px; }
.info span { display:block; font-size:10px; font-weight:900; letter-spacing:1px; color:#444; }
.info strong { font-size:14px; line-height:1.2; overflow-wrap:anywhere; }
.join { display:flex; flex-direction:column; align-items:center; gap:12px; }
.join img { width:136px; height:136px; image-rendering:pixelated; }
.join b { font-size:12px; letter-spacing:.1px; white-space:nowrap; }
.titlebar { flex:none; height:34px; display:flex; align-items:center;
  justify-content:space-between; border-top:2px dotted #777; font-size:13px; }
.half-horizontal { height:240px; }
.half-horizontal .screen { gap:20px; padding:3px 0 10px; }
.half-horizontal .drawing { box-shadow:5px 5px 0 #111; }
.half-horizontal .sidebar { width:110px; justify-content:center; }
.half-horizontal .info,.half-vertical .info { display:none; }
.half-horizontal .join img { width:85px; height:85px; }
.half-horizontal .join b { font-size:10px; }
.half-horizontal .titlebar,.quadrant .titlebar { height:26px; }
.half-vertical { width:400px; height:480px; }
.half-vertical .screen { flex-direction:column; gap:12px; padding:4px 0 8px; }
.half-vertical .drawing { min-height:0; box-shadow:5px 5px 0 #111; }
.half-vertical .sidebar { width:100%; flex:none; height:100px; justify-content:center; }
.half-vertical .join { flex-direction:row; justify-content:center; gap:12px; }
.half-vertical .join img { width:82px; height:82px; }
.half-vertical .join b { font-size:12px; }
.quadrant { width:400px; height:240px; }
.quadrant .screen { padding:3px 0 10px; }
.quadrant .drawing { box-shadow:4px 4px 0 #111; }
.quadrant .sidebar { display:none; }
footer { display:flex; justify-content:space-between; gap:16px; font-size:13px;
  margin-top:20px; padding-top:20px; color:#555; }
footer a { color:inherit; }
@media (max-width:480px) {
  .shell { padding:18px 12px; }
  .brand strong { font-size:22px; }
  .mark { width:43px; height:43px; font-size:15px; }
  button { padding:10px; font-size:12px; }
  .tabs { gap:6px; }
  footer { flex-direction:column; }
}