:root {
    --ink: #e9efe9; --paper: #f3ead7; --paper-ink: #3b3a45;
    --bg: #0c2230;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) { --bg: #20465a; }
  }
  :root[data-theme="dark"] { --bg: #0c2230; }
  html, body { height: 100%; margin: 0; background: var(--bg); overflow: hidden; }
  body { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; color: var(--ink); }
  canvas { display: block; width: 100%; height: 100%; cursor: default; }
  .hint {
    position: fixed; left: 18px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    font-size: 15px; letter-spacing: .04em; font-style: italic; opacity: .7; pointer-events: none;
  }
  .letter {
    position: fixed; inset: 0; display: none; place-items: center;
    background: rgba(5, 20, 30, .45); backdrop-filter: blur(2px);
  }
  .letter.open { display: grid; }
  .sheet {
    width: min(78vw, 360px); padding: 34px 30px 26px; background: var(--paper); color: var(--paper-ink);
    border-radius: 2px; box-shadow: 0 18px 50px rgba(0,0,0,.35); transform: rotate(-1.5deg);
    font-size: 22px; line-height: 1.6; text-align: center;
  }
  .sheet p { margin: 0 0 18px; transition: filter .8s, opacity .8s; min-height: 3.6em; }
  .sheet p.blur { filter: blur(2.5px); opacity: .75; }
  .sheet button {
    font: inherit; font-size: 14px; border: 0; background: none; color: #6b6474;
    padding: 6px 10px; cursor: pointer; border-radius: 4px;
  }
  .sheet button:focus-visible { outline: 2px solid #6b8fa3; }

/* added for IN THIS ELECTRIC SEA: link back to the page */
.ites-back{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:18px;z-index:2;font-size:15px;font-style:italic;opacity:.8}
.ites-back a{color:var(--ink);text-decoration-color:rgba(233,239,233,.4)}