:root { color-scheme: light; background:#e6dfcd; color:#3a332b; font-family:"Courier New",monospace }
* { box-sizing:border-box }
html,body { width:100%;height:100%;margin:0;overflow:hidden }
body { display:grid;place-items:center;background:#d8cfba }
#wrap { position:relative;line-height:0 }
#wrap::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0) 2px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);
  mix-blend-mode:multiply;
}
canvas {
  width:min(96vw,168vh);height:auto;aspect-ratio:16/9;
  border:1px solid #b9ab92;
  box-shadow:0 0 48px rgba(96,74,40,.3);
  background:#efe8d8;
  image-rendering:auto;
  display:block;
}
.hint { margin:4px 8px;font-size:clamp(8px,1.2vw,12px);text-align:center;opacity:.6;color:#5a5142 }