:root{
  --page:#e9e6f1; --ink:#2a2440;
  --night:#191529; --water:#d9def5; --gold:#f2d796; --mist:#a79bcb;
  --veil:rgba(20,16,36,.74);
  --serif-en:"Cormorant Garamond","Times New Roman",serif;
  --serif-ja:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --page:#0f0c1a; --ink:#ece8f7; color-scheme:dark; } }
:root[data-theme="dark"]{ --page:#0f0c1a; --ink:#ece8f7; color-scheme:dark; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;height:100%;background:var(--page);color:var(--ink);font-family:var(--serif-ja);
  display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#frame{position:relative;height:100%;max-width:100%;aspect-ratio:941/1672;background:var(--night) center/cover no-repeat;overflow:hidden;touch-action:none;transition:background-image .4s}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0 7% 11%;background:linear-gradient(to bottom,rgba(20,16,36,0) 18%,var(--veil) 55%);color:#efeaf9;text-align:center}
.veil[hidden]{display:none}
.title{font-family:var(--serif-en);font-weight:500;font-size:clamp(1.8rem,min(7.5vh,10.5vw),4.2rem);letter-spacing:.2em;margin:0 0 .05em .2em;white-space:nowrap;color:var(--water);text-shadow:0 0 24px rgba(217,222,245,.45)}
.sub{font-size:clamp(.8rem,1.9vh,.95rem);color:var(--mist);margin:0 0 1.1em;letter-spacing:.1em}
.row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.45em;margin:0 0 .9em}
.row .lbl{font-size:.78rem;color:var(--mist);margin-right:.2em}
.chip{font:inherit;font-size:clamp(.8rem,1.85vh,.92rem);color:#ddd6ee;background:rgba(20,16,36,.35);border:1px solid rgba(221,214,238,.35);
  border-radius:999px;padding:.45em 1em;cursor:pointer;letter-spacing:.06em}
.chip[aria-checked="true"]{color:var(--night);background:var(--water);border-color:var(--water)}
.chip.song{font-family:var(--serif-en);font-size:clamp(.95rem,2.1vh,1.08rem);letter-spacing:.12em}
.chip:focus-visible,.btn:focus-visible,.ghost:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.how{font-size:clamp(.78rem,1.8vh,.9rem);line-height:1.8;margin:.2em 0 1.1em;color:#ddd6ee}
.btn{font:inherit;font-size:clamp(.95rem,2.2vh,1.1rem);letter-spacing:.2em;color:var(--night);background:var(--gold);border:0;border-radius:999px;
  padding:.8em 2.4em .75em 2.6em;cursor:pointer;box-shadow:0 0 28px rgba(242,215,150,.45)}
.btn:disabled{opacity:.55;cursor:wait}
.ghost{font:inherit;font-size:.82rem;color:#ddd6ee;background:none;border:1px solid rgba(221,214,238,.4);border-radius:999px;padding:.4em .95em;cursor:pointer;min-width:2.5em}
.offset{display:flex;align-items:center;gap:.6em;margin-top:1em;font-size:.78rem;color:var(--mist)}
.offset output{min-width:4.2em;color:#ddd6ee}
.result{font-size:clamp(.88rem,2vh,1.02rem);line-height:2;margin:0 0 1.3em;color:#ece6f8}
.result b{font-family:var(--serif-en);font-weight:600;font-size:1.3em;color:var(--water);margin:0 .15em}
.result .gold{color:var(--gold)}
.tag{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:14px;font-size:.72rem;color:#d7cfea;background:rgba(20,16,36,.45);padding:.3em .8em;border-radius:999px;letter-spacing:.1em}
.quit{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;background:rgba(20,16,36,.45)}
.prog{position:absolute;left:20%;right:24%;top:calc(22px + env(safe-area-inset-top,0px));height:2px;background:rgba(221,214,238,.18);border-radius:2px;overflow:hidden}
#art{position:absolute;inset:0;background:#0b0914 center/contain no-repeat;opacity:0;transition:opacity 1.6s ease}
#art.on{opacity:1}
#art[hidden]{display:none}
.guideBtn{margin:-.4em 0 1em;font-size:.82rem}
#guide{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:6%;background:rgba(12,10,24,.82)}
#guide[hidden]{display:none}
#guide .card{width:100%;max-width:26rem;max-height:100%;overflow:auto;background:rgba(28,24,48,.96);border:1px solid rgba(221,214,238,.25);border-radius:18px;padding:1.3em 1.2em 1.1em;color:#ece6f8}
#guide h2{font-family:var(--serif-en);font-weight:500;letter-spacing:.14em;font-size:1.15rem;margin:0 0 .9em;text-align:center;color:var(--water)}
#guide .item{display:flex;gap:.9em;align-items:center;margin:0 0 .95em}
#guide svg{flex:0 0 64px;height:48px}
#guide .t{font-size:.86rem;line-height:1.65}
#guide .t b{display:block;font-weight:600;color:var(--water);font-size:.9rem}
#guide .close{display:block;margin:1.1em auto 0}
.prog i{display:block;height:100%;width:0;background:var(--gold);opacity:.8}