:root{--paper:#fdfcf8;--ink:#111}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
canvas{display:block;width:100%;height:100%}
.hud{position:fixed;left:20px;top:18px;color:#111;font-size:10px;line-height:1.65;
letter-spacing:.14em;opacity:.45;pointer-events:none;mix-blend-mode:multiply}
.hud strong{font-weight:600}
.controls{position:fixed;right:18px;bottom:16px;display:flex;gap:8px;opacity:0;transition:opacity .25s}
body:hover .controls{opacity:1}
button{border:1px solid #c9c9c9;background:rgba(255,255,255,.9);color:#222;padding:8px 11px;
font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;cursor:pointer}
button:hover{background:#f2f2f2}
.start{position:fixed;inset:0;display:grid;place-items:center;background:#fdfcf8;z-index:10;transition:opacity .8s}
.start.hidden{opacity:0;pointer-events:none}
.start button{padding:14px 20px;font-size:12px;letter-spacing:.18em}
.time{position:fixed;left:20px;bottom:14px;font-size:9px;letter-spacing:.12em;opacity:.35}

html.mobile-work .controls{display:none!important}
html.mobile-work .start{display:none!important}