:root{
    --bg:#101118;            /* page, tinted toward the blue of newborn cells */
    --well:#07080b;          /* the dish the cells live in */
    --ink:#c9ccd8;
    --press:rgba(201,204,216,.1);
    --accent:#f3a43c;        /* the orange hinge of the cell palette */
    --on-accent:#2a1a05;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none;
    -webkit-user-select:none;user-select:none}
  body{display:flex;flex-direction:column;height:100dvh;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

  main{flex:1 1 0;min-height:0;min-width:0;margin:10px 10px 0;border-radius:16px;overflow:hidden;background:var(--well)}
  canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated}

  nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px}
  button{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;
    background:none;color:var(--ink);touch-action:manipulation;cursor:pointer;
    transition:transform .18s var(--ease),background-color .18s var(--ease)}
  button:active{transform:scale(.9);background:var(--press)}
  button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  button[hidden]{display:none}
  #play{width:64px;height:64px;background:var(--accent);color:var(--on-accent)}
  #play:active{background:var(--accent);filter:brightness(.88)}

  svg{grid-area:1/1;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.75;
    stroke-linecap:round;stroke-linejoin:round;transition:opacity .18s var(--ease),scale .18s var(--ease)}
  #play svg{width:28px;height:28px;fill:currentColor}
  .b{opacity:0;scale:.6}
  [data-alt] .a{opacity:0;scale:.6}
  [data-alt] .b{opacity:1;scale:1}

  /* landscape: controls move to the right edge, under the thumb */
  @media (orientation:landscape){
    body{flex-direction:row}
    main{margin:10px 0 10px 10px}
    nav{flex-direction:column;padding:12px 10px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}