:root{
    --cream:#F6ECD8; --ink:#3A4356; --warm:#E8C98A; --teal:#4E7F79;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#0e1219;
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    color:var(--cream); -webkit-font-smoothing:antialiased;}
  #app{position:fixed;inset:0}
  canvas{display:block;width:100%;height:100%}

  /* ---------- title / loading card ---------- */
  #veil{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(120% 90% at 62% 18%, #F3DFB4 0%, #E3CFA6 22%, #A9BFC0 52%, #6E8C9E 76%, #3C5069 100%);
    transition:opacity 1.5s cubic-bezier(.4,0,.2,1);}
  #veil.gone{opacity:0;pointer-events:none}
  #veil:before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 55% at 50% 55%, rgba(0,0,0,0) 40%, rgba(30,40,60,.34) 100%);}
  .card{position:relative;text-align:center;padding:0 28px;max-width:660px}
  .kanji{font-size:13px;letter-spacing:.72em;opacity:.72;margin-bottom:20px;color:#2E3D52;
    text-indent:.72em}
  h1{font-size:clamp(34px,7.2vw,68px);font-weight:400;letter-spacing:.035em;line-height:1.02;
    color:#2C3A4E;text-shadow:0 1px 0 rgba(255,255,255,.35)}
  h1 em{font-style:italic;display:block;font-size:.42em;letter-spacing:.24em;margin-top:14px;
    opacity:.66;font-weight:400}
  .rule{width:78px;height:1px;background:#2C3A4E;opacity:.4;margin:26px auto}
  .blurb{font-size:14.5px;line-height:1.85;opacity:.78;color:#26364B;max-width:470px;margin:0 auto}
  .blurb b{font-weight:600}
  #bar{width:230px;height:2px;background:rgba(44,58,78,.2);margin:34px auto 12px;overflow:hidden;border-radius:2px}
  #barIn{height:100%;width:0%;background:linear-gradient(90deg,#4E7F79,#2C3A4E);transition:width .3s ease}
  #stat{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;color:#26364B;
    min-height:16px}
  #enter{margin-top:30px;display:none;cursor:pointer;border:1px solid rgba(44,58,78,.45);
    background:rgba(255,252,244,.34);color:#22303F;padding:14px 40px;border-radius:999px;
    font-family:inherit;font-size:13.5px;letter-spacing:.28em;text-transform:uppercase;
    transition:.35s;backdrop-filter:blur(3px)}
  #enter:hover{background:rgba(255,252,244,.72);letter-spacing:.34em}
  #enter.on{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* ---------- hud ---------- */
  #hud{position:fixed;left:0;right:0;bottom:0;z-index:20;pointer-events:none;
    padding:16px 20px;display:flex;justify-content:space-between;align-items:flex-end;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    text-shadow:0 1px 3px rgba(20,26,38,.7);opacity:0;transition:opacity 1.2s}
  #hud.on{opacity:.62}
  #hud .k{opacity:.65}
  #keys span{display:inline-block;margin-right:14px}
  #keys b{font-weight:600;opacity:.95}
  #tele{text-align:right;font-variant-numeric:tabular-nums;line-height:1.75}
  #tele .v{opacity:.95}

  #panel{position:fixed;top:0;right:0;z-index:25;width:266px;padding:18px 20px 20px;
    background:rgba(20,27,38,.72);backdrop-filter:blur(14px);
    border-left:1px solid rgba(246,236,216,.12);border-bottom:1px solid rgba(246,236,216,.12);
    font-size:11px;letter-spacing:.1em;transform:translateX(102%);transition:.5s cubic-bezier(.4,0,.2,1);
    border-bottom-left-radius:14px}
  #panel.on{transform:none}
  #panel h3{font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.5;
    margin:0 0 12px;font-weight:400}
  #panel h3+h3{margin-top:18px}
  .row{display:flex;align-items:center;justify-content:space-between;margin:7px 0;gap:10px}
  .row label{opacity:.8;text-transform:uppercase;font-size:10px;letter-spacing:.14em}
  .row input[type=range]{width:104px;accent-color:#8FBEA8;background:transparent}
  .row select{background:rgba(246,236,216,.1);color:var(--cream);border:1px solid rgba(246,236,216,.2);
    border-radius:5px;padding:3px 6px;font-family:inherit;font-size:10.5px;letter-spacing:.1em}
  .row .val{opacity:.55;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
  .chk{width:13px;height:13px;accent-color:#8FBEA8}
  .seg{display:flex;gap:3px}
  .seg button{font-family:inherit;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
    padding:4px 7px;border-radius:5px;cursor:pointer;color:var(--cream);
    background:rgba(246,236,216,.08);border:1px solid rgba(246,236,216,.18);transition:.18s}
  .seg button:hover{background:rgba(246,236,216,.2)}
  .seg button.on{background:rgba(143,190,168,.34);border-color:rgba(143,190,168,.6)}
  #panel .note{opacity:.4;font-size:9.5px;line-height:1.7;margin-top:14px;letter-spacing:.06em;
    text-transform:none;font-style:italic}

  #flash{position:fixed;inset:0;z-index:30;pointer-events:none;background:#F6ECD8;opacity:0;
    transition:opacity .5s}
  #toast{position:fixed;left:50%;top:34px;transform:translateX(-50%);z-index:26;
    background:rgba(20,27,38,.8);padding:9px 20px;border-radius:999px;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:.4s;backdrop-filter:blur(10px);
    border:1px solid rgba(246,236,216,.14);pointer-events:none}
  #toast.on{opacity:.9}
  #err{position:fixed;inset:0;z-index:60;display:none;padding:40px;background:#171d27;
    font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.7;
    color:#E8A0A0;white-space:pre-wrap;overflow:auto}

  /* Accessibility + deterministic e2e: drop decorative motion entirely when
     reduced motion is requested. `none` (not a tiny duration) matters — under
     software GL the document timeline can freeze, so a "fast" animation never
     reaches its end state, while `none` applies the final styles immediately. */
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important}
  }