:root{
  --bg:#06060a;
  --fg:#f5f5f7;
  --muted:#9a9aa3;
  --accent-red:#ff2d4b;
  --accent-teal:#1fd6c8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",
    "Helvetica Neue",Arial,"Yu Gothic",Meiryo,sans-serif;
  background:var(--bg);
  color:var(--fg);
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* 背景: 既定は静的グラデ（フォールバック）。WebGL 起動時は canvas が上に乗る */
.bg-fallback{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(circle at 38% 42%, rgba(255,45,75,0.30), transparent 46%),
    radial-gradient(circle at 62% 58%, rgba(31,214,200,0.26), transparent 46%),
    var(--bg);
}
canvas#gl{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;}
.hero{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;padding:24px;
}
.logo{
  width:clamp(180px,38vw,460px);max-width:84vw;height:auto;
  /* 3 光源を想定: 左上キー光→右下の近い影 / 右の寒色フィル光→左の青み影 / 上の環境光→下の大暈け */
  filter:
    drop-shadow(2px 3px 5px rgba(0,0,0,.26))
    drop-shadow(-4px 1px 15px rgba(10,18,34,.22))
    drop-shadow(0 6px 34px rgba(0,0,0,.18));
}
.tagline{
  margin-top:28px;
  font-size:clamp(.85rem,2.2vw,1.05rem);
  letter-spacing:.32em;text-transform:uppercase;
  color:#eaeaef;
  text-shadow:
    1px 2px 3px rgba(0,0,0,.28),
    -2px 1px 9px rgba(10,18,34,.24),
    0 3px 16px rgba(0,0,0,.18);
}
footer.copyright{
  position:fixed;left:0;right:0;bottom:22px;z-index:1;
  text-align:center;font-size:.72rem;letter-spacing:.14em;color:#8a8a93;
  pointer-events:none;
  text-shadow:
    1px 1px 2px rgba(0,0,0,.28),
    -1px 1px 6px rgba(10,18,34,.22),
    0 2px 11px rgba(0,0,0,.18);
}