html,body{margin:0;height:100%;background:#0c0908;overflow:hidden;color:#f1e4cf;
  /* rounded gothic where the device has one (Mac, iPhone, Windows with Office); otherwise the ordinary gothic */
  font-family:"Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO","Helvetica Neue","Segoe UI","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
/* start screen: everything centred on the screen, over a shade that is darkest behind the text */
#start{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 28px;box-sizing:border-box;cursor:pointer;transition:opacity 1.4s;z-index:3;text-align:center;
  background:radial-gradient(ellipse 70% 62% at center,rgba(10,8,7,.8),rgba(10,8,7,.62) 55%,rgba(10,8,7,.3));text-shadow:0 1px 6px rgba(0,0,0,.7)}
#start.off{opacity:0;pointer-events:none}
#start .cta{margin:0 0 34px;font-size:18px;font-weight:500;letter-spacing:.18em;line-height:1.5}
#start .cta span{display:block;margin-top:8px;font-size:13.5px;font-weight:400;letter-spacing:.1em;opacity:.78}
#start .about{width:100%;max-width:760px;padding-top:28px;border-top:1px solid rgba(241,228,207,.22)}
#start .about p{margin:0;font-size:13px;line-height:2;opacity:.86;text-wrap:balance;white-space:pre-line}   /* pre-line: a line break typed in index.html shows as a line break */
#start .about p+p{margin-top:22px}
#start .about p[lang=ja]{letter-spacing:.06em}
#start .about p[lang=en]{letter-spacing:.015em;line-height:1.8}
@media (max-width:760px){
  #start .cta{font-size:15px;margin-bottom:24px}
  #start .about{padding-top:20px}
  #start .about p{font-size:12px;line-height:1.85}
}
#clock{position:fixed;top:20px;right:24px;z-index:2;pointer-events:none;font-size:14px;letter-spacing:.12em;opacity:.72;
  white-space:pre;font-variant-numeric:tabular-nums;text-shadow:0 1px 6px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.6)}
/* panel: three rows — the scene's name, the buttons, the sliders */
#hud{position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:44px 22px 18px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:13px;
  letter-spacing:.08em;transition:opacity .8s;z-index:2}
#hud .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
#info{font-size:16px;letter-spacing:.14em;margin-bottom:2px}
#ver{position:absolute;right:22px;bottom:18px;font-size:10.5px;letter-spacing:.1em;opacity:.5}
#hud.hide{opacity:0;pointer-events:none}
#hud label{display:flex;align-items:center;gap:6px}
#hud input[type=range]{width:90px;accent-color:#d9a05b}
#hud button{font:inherit;color:inherit;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
  border-radius:4px;padding:5px 10px;cursor:pointer}
#hud button:hover{background:rgba(255,255,255,.18)}
#err{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;text-align:center;line-height:2;z-index:4;background:#0c0908}
.gone{display:none!important}
#err.on{display:flex}
#err code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;opacity:.85}