:root{ --bg:#0f0e13; --txt:#e8dfd2; --dim:#8a8092; --ember:#ffab52; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;align-items:center;justify-content:center;padding:20px;}
main{width:min(1180px,96vw)}
header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:10px}
h1{font:600 19px/1.2 ui-serif,Georgia,serif;margin:0;letter-spacing:.02em}
#title{margin:2px 0 0;color:var(--dim);font-size:13px;font-style:italic}
.right{color:var(--dim);font-size:12px;letter-spacing:.06em}
/* the stage is the height authority — aspect-ratio fixes its height from its width, so the
   canvas can never leave a dead box under itself the way a stretched flex child does */
.stage{aspect-ratio:1100 / 760;border:1px solid #241f2b;border-radius:12px;overflow:hidden;
  background:#0b0a0f;line-height:0}
.stage canvas{width:100%;height:100%;display:block;cursor:pointer}
#say{min-height:2.4em;margin:12px 2px 0;color:#cdc2b6;
  font:italic 400 16px/1.45 ui-serif,Georgia,serif;opacity:0;transition:opacity .5s ease;max-width:60ch}
footer{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px;color:var(--dim);font-size:12px;align-items:center}
footer b{color:#b9aec4;font-weight:600}
/* NO OPACITY HERE. `.8` composited --dim against the page down to 3.66:1, under the 4.5:1 AA
   floor; the colour alone is 5.11:1. Italic already carries the aside, without costing contrast. */
footer .note{margin-left:auto;font-style:italic}
@media (prefers-reduced-motion: reduce){ #say{transition:none} }