:root{
    --ink:#1b1a33; --ink-2:#26244a;
    --paper:#efe6da; --paper-dim:#b9b0a9;
    --verbena:#a884ec; --sun:#e0b03a; --sea:#5fa898;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:radial-gradient(120% 90% at 30% 55%, var(--ink-2) 0%, var(--ink) 60%, #12112a 100%);color:var(--paper);font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;overflow:hidden}
  canvas{display:block;width:100%;height:100%}
  #stage{position:fixed;inset:0;z-index:1}
  #reef{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.5s ease;overflow:hidden}
  .bg{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
  .bg.base{opacity:1;background:radial-gradient(120% 90% at 30% 55%, #26244a 0%, #1b1a33 60%, #12112a 100%)}
  .bg.sun{background:radial-gradient(120% 110% at 50% 30%, #f4d888 0%, #d38a34 50%, #713c15 100%)}
  .bg.verbena{background:radial-gradient(120% 110% at 50% 42%, #7a5cc4 0%, #35206a 56%, #160b32 100%)}
  .bg.anemone{background:radial-gradient(120% 110% at 50% 34%, #3a7a84 0%, #12414d 52%, #061b23 100%)}
  .bub{position:absolute;bottom:-6vh;border-radius:50%;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,.04));opacity:0;animation:rise linear infinite}
  @keyframes rise{0%{transform:translateY(0) scale(.9);opacity:0}12%{opacity:.55}88%{opacity:.35}100%{transform:translateY(-112vh) scale(1.1);opacity:0}}
  .flecks{position:absolute;inset:-5%;background:
      radial-gradient(circle at 33.1% 16.5%, rgba(255,214,130,0.12) 0, rgba(255,214,130,0) 1.5px),
      radial-gradient(circle at 53.4% 37.1%, rgba(255,214,130,0.22) 0, rgba(255,214,130,0) 0.7px),
      radial-gradient(circle at 5.6% 43.6%, rgba(255,214,130,0.12) 0, rgba(255,214,130,0) 0.7px),
      radial-gradient(circle at 42.8% 81.4%, rgba(255,214,130,0.15) 0, rgba(255,214,130,0) 0.8px),
      radial-gradient(circle at 62.2% 93.0%, rgba(255,214,130,0.2) 0, rgba(255,214,130,0) 1.4px),
      radial-gradient(circle at 95.7% 6.5%, rgba(255,214,130,0.17) 0, rgba(255,214,130,0) 1.8px),
      radial-gradient(circle at 15.8% 13.3%, rgba(255,214,130,0.3) 0, rgba(255,214,130,0) 1.0px),
      radial-gradient(circle at 19.3% 57.8%, rgba(255,214,130,0.19) 0, rgba(255,214,130,0) 1.5px),
      radial-gradient(circle at 54.6% 8.0%, rgba(255,214,130,0.15) 0, rgba(255,214,130,0) 0.7px),
      radial-gradient(circle at 67.3% 43.0%, rgba(255,214,130,0.24) 0, rgba(255,214,130,0) 1.0px),
      radial-gradient(circle at 45.5% 30.8%, rgba(255,214,130,0.27) 0, rgba(255,214,130,0) 1.7px),
      radial-gradient(circle at 25.4% 57.1%, rgba(255,214,130,0.31) 0, rgba(255,214,130,0) 1.3px),
      radial-gradient(circle at 72.0% 29.6%, rgba(255,214,130,0.13) 0, rgba(255,214,130,0) 2.0px),
      radial-gradient(circle at 42.1% 74.7%, rgba(255,214,130,0.22) 0, rgba(255,214,130,0) 0.8px),
      radial-gradient(circle at 5.8% 66.1%, rgba(255,214,130,0.24) 0, rgba(255,214,130,0) 1.7px),
      radial-gradient(circle at 86.0% 32.1%, rgba(255,214,130,0.24) 0, rgba(255,214,130,0) 1.6px),
      radial-gradient(circle at 57.7% 45.8%, rgba(255,214,130,0.33) 0, rgba(255,214,130,0) 1.8px),
      radial-gradient(circle at 47.5% 65.8%, rgba(255,214,130,0.27) 0, rgba(255,214,130,0) 0.7px),
      radial-gradient(circle at 64.1% 97.3%, rgba(255,214,130,0.17) 0, rgba(255,214,130,0) 1.8px),
      radial-gradient(circle at 39.0% 66.2%, rgba(255,214,130,0.21) 0, rgba(255,214,130,0) 0.6px),
      radial-gradient(circle at 18.1% 13.2%, rgba(255,214,130,0.28) 0, rgba(255,214,130,0) 0.7px),
      radial-gradient(circle at 14.4% 25.8%, rgba(255,214,130,0.31) 0, rgba(255,214,130,0) 1.1px),
      radial-gradient(circle at 9.7% 45.1%, rgba(255,214,130,0.31) 0, rgba(255,214,130,0) 1.4px),
      radial-gradient(circle at 80.7% 84.9%, rgba(255,214,130,0.2) 0, rgba(255,214,130,0) 1.0px),
      radial-gradient(circle at 36.4% 86.9%, rgba(255,214,130,0.14) 0, rgba(255,214,130,0) 1.9px),
      radial-gradient(circle at 18.9% 24.3%, rgba(255,214,130,0.22) 0, rgba(255,214,130,0) 0.9px);
    animation:drift 40s ease-in-out infinite alternate;opacity:.9}
  @keyframes drift{0%{transform:translate(0,0)}100%{transform:translate(2%, -3%)}}
  .bub{filter:blur(0.5px)}
  #painterly{position:fixed;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(125% 105% at 50% 42%, rgba(0,0,0,0) 42%, rgba(6,10,18,.42) 78%, rgba(4,7,14,.66) 100%)}
  #painterly::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
  header{z-index:3;position:fixed;left:clamp(18px,4vw,48px);bottom:clamp(18px,4vw,40px);max-width:32ch;pointer-events:none}
  header h1{font-size:clamp(20px,2.4vw,30px);font-weight:400;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em;transition:opacity .6s ease;font-style:italic}
  header p{font-size:clamp(13px,1.15vw,15px);line-height:1.5;margin:0;color:var(--paper-dim)}
  html.embedded header{display:none}
  #nerve-note{position:fixed;z-index:3;top:24px;left:24px;max-width:36ch;color:#e3dccc;font:12px/1.55 system-ui;pointer-events:none}
  nav{z-index:3;position:fixed;right:clamp(18px,4vw,48px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:clamp(18px,3vh,30px)}
  .play{display:flex;align-items:center;gap:14px;background:none;border:0;color:var(--paper);cursor:pointer;padding:0;font:inherit;text-align:left}
  .play .sq{position:relative;width:52px;height:52px;flex:none;border:1.5px solid var(--paper);border-radius:3px;display:grid;place-items:center;transition:background .25s,color .25s}
  .play .sq svg{width:18px;height:18px}
  .play .sq::after{content:"";position:absolute;inset:-6px;border-radius:6px;border:1.5px solid var(--c);opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s}
  .play.on .sq{background:var(--c);color:var(--ink);border-color:var(--c)}
  .play.on .sq::after{opacity:.9;transform:scale(1);animation:ring 2.4s ease-out infinite}
  @keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
  .play span{display:block;line-height:1.25}
  .play b{display:block;font-weight:400;font-size:15px}
  .play small{display:block;font-size:12.5px;color:var(--paper-dim)}
  /* Keep the interface legible where the moving sunshine passes behind it. */
  html[data-sunshine="sunbeams-and-pollen"] header,
  html[data-sunshine="sunbeams-and-pollen"] nav{text-shadow:0 1px 4px rgba(41,27,9,.85),0 0 16px rgba(41,27,9,.35)}
  html[data-sunshine="sunbeams-and-pollen"] header p,
  html[data-sunshine="sunbeams-and-pollen"] .play small{color:#f4ead4}
  .play:focus-visible .sq{outline:2px solid var(--paper);outline-offset:3px}
  #bowl{--c:var(--sun)} #chimes{--c:var(--verbena)} #fork{--c:var(--sea)}
  @media (max-width:820px){
    #nerve-note{top:82px;left:16px;font-size:11px;max-width:38ch}
    nav{left:12px;right:12px;top:12px;transform:none;flex-direction:row;justify-content:center;gap:clamp(8px,2.5vw,18px)}
    .play{gap:7px;padding:5px 7px;border-radius:8px;background:rgba(12,18,30,.28);backdrop-filter:blur(8px)}
    .play .sq{width:38px;height:38px}.play .sq svg{width:14px;height:14px}
    .play small{display:none}.play b{font-size:clamp(11px,2.2vw,14px)}
    header{max-width:27ch;bottom:14px;left:14px}
  }
  @media (prefers-reduced-motion:reduce){ .play.on .sq::after{animation:none} }