:root{--ink:#241e2b;--purple:#291a3b;--field:#2f1f44;--gold:#d7b779;--paper:#faf9fc;--muted:#6b6471;--line:#e0dce5}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--purple);color:white;font:16px/1.6 'DM Sans',Arial,sans-serif;display:flex;flex-direction:column}
a{color:inherit;text-underline-offset:5px}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}canvas:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
header{background:var(--paper);color:var(--ink);padding:18px 5%}
.brand{text-decoration:none;font:italic 40px/1 Georgia,serif}
main{flex:1;display:grid;grid-template-columns:minmax(300px,420px) 1fr;min-height:0}
.copy{padding:56px 44px 40px 5vw;display:flex;flex-direction:column;gap:18px}
h1{font:400 clamp(38px,4.4vw,56px)/1.08 'Playfair Display',Georgia,serif;margin:0}
.copy p{margin:0;color:#d3cadd;max-width:34ch}
.copy .where{color:white}
.copy code{font:inherit;color:var(--gold);overflow-wrap:anywhere}
.status{min-height:1.6em;color:var(--gold);font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:8px}
.home{display:inline-block;background:var(--gold);color:var(--purple);text-decoration:none;padding:12px 22px;font-weight:500}
.home:hover{background:white}
.again{background:none;border:0;color:#d3cadd;font:inherit;text-decoration:underline;text-underline-offset:5px;cursor:pointer;padding:0}
.again[hidden]{display:none}
.field{position:relative;min-height:420px}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:none;background:var(--field)}
.no-js canvas{display:none}
.how-short{display:none}
@media(max-width:760px){
 main{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 header{display:none}
 .copy{padding:18px 6% 12px;gap:6px}
 h1{font-size:28px}
 .copy p{max-width:none}
 .how-long{display:none}
 .how-short{display:inline}
 .level{font-size:14px}
 .status{min-height:1.5em;font-size:15px}
 .actions{margin-top:2px;gap:8px 18px}
 .home{padding:9px 16px;font-size:15px}
 .field{min-height:280px}
 .agents{display:none}
 canvas{cursor:auto}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.agents{font-size:14px}
.level{color:white;font-size:15px}