/* Finale base tokens. Layout: phone-first control pages in a eucalyptus-and-champagne palette;
   screens are fixed 1920x1080 stages with their own looks. */
:root{
  --bg:#EEF1EE; --surface:#FFFFFF; --ink:#1E2A26; --muted:#5B6A64; --line:#D5DDD8;
  --accent:#2E6A59; --accent-ink:#FFFFFF; --soft:#E2ECE7; --gold:#9C7A33;
  --ok:#2C7A4B; --warn:#A6601F; --off:#7B8580;
  --f-display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-ui:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-latin:"Cormorant Garamond","Times New Roman",serif;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111816; --surface:#19221F; --ink:#E6ECE9; --muted:#9AA9A2; --line:#2A3632;
  --accent:#7CC3AC; --accent-ink:#0F1B17; --soft:#1F2C28; --gold:#D8B76B;
  --ok:#6FCB94; --warn:#E3A35E; --off:#8D9893; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#111816; --surface:#19221F; --ink:#E6ECE9; --muted:#9AA9A2; --line:#2A3632;
  --accent:#7CC3AC; --accent-ink:#0F1B17; --soft:#1F2C28; --gold:#D8B76B;
  --ok:#6FCB94; --warn:#E3A35E; --off:#8D9893; color-scheme:dark }

html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.65}
*{box-sizing:border-box}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;z-index:100;max-width:calc(100% - 32px)}
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}

/* sign-in panel (Google or a link by e-mail) */
.loginpanel{display:grid;gap:10px;width:100%;max-width:380px;margin-inline:auto;text-align:left}
.loginpanel .lp-or{font-size:12px;opacity:.7;text-align:center;margin-top:4px}
.loginpanel .lp-form{display:grid;gap:8px}
.loginpanel .lp-form[hidden]{display:none}
.loginpanel .lp-paste{border-top:1px dashed rgba(128,128,128,.4);padding-top:10px}
.loginpanel .lp-hint{margin:0;line-height:1.6;opacity:.8}
.loginpanel .lp-mail{font:inherit;font-size:16px;padding:11px 12px;border-radius:10px;border:1px solid rgba(128,128,128,.45);background:rgba(255,255,255,.92);color:#1c1c1c;width:100%;box-sizing:border-box}
.loginpanel .btn{width:100%}
.loginpanel .lp-st{margin:0;min-height:1.2em;line-height:1.6}
.loginpanel .lp-st.bad{color:#C4483F}
.camvol{display:flex;align-items:center;gap:10px;margin-top:8px}
.camvol input[type=range]{flex:1;accent-color:#2C6E58}

/* the maker's credit at the foot of every page */
.credit{margin:28px auto 22px;text-align:center;font-family:"Jost","Zen Kaku Gothic New",sans-serif;font-weight:300;font-size:11px;letter-spacing:.32em;text-transform:lowercase;color:#A08A7F;opacity:.9}
.credit b{font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:#8A6F63}
.credit{font-size:13px;letter-spacing:.18em}
.credit b{letter-spacing:.16em}

/* Japanese text breaks only between phrases (the <wbr> put in by jaText); a phrase too long for the line still wraps */
.jw{word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}