/* トップページと同じ背景・色・ヘッダー(使い方・更新履歴・応援のページが読み込む) */
:root{
  color-scheme:dark;
  --bg:#000;--glow1:rgba(120,140,255,.16);--glow2:rgba(255,255,255,.07);
  --text:#f2f2f2;--text-strong:#fff;--text-soft:rgba(255,255,255,.8);--text-stat:rgba(255,255,255,.82);
  --muted:rgba(255,255,255,.62);--muted2:rgba(255,255,255,.5);--faint:rgba(255,255,255,.38);
  --panel:rgba(255,255,255,.055);--border:rgba(255,255,255,.13);--border-strong:rgba(255,255,255,.2);
  --control-bg:rgba(255,255,255,.08);--control-hover:rgba(255,255,255,.14);--thumb-bg:rgba(255,255,255,.06);--menu-bg:#1d2130;
  --accent:#9fb0ff;--bar1:#7c8cff;--bar2:#b6c0ff;--gold:#ffd76a;--rank:rgba(255,255,255,.7);
  --badge-border:rgba(255,255,255,.25);--badge-text:rgba(255,255,255,.75);
  --notice-bg:rgba(255,190,90,.12);--notice-border:rgba(255,190,90,.4);--notice-text:#ffe0b0;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#f2f4f8;--glow1:rgba(120,140,255,.2);--glow2:rgba(255,255,255,.8);
    --text:#1c1e28;--text-strong:#11131a;--text-soft:rgba(28,30,40,.82);--text-stat:rgba(28,30,40,.85);
    --muted:rgba(28,30,40,.64);--muted2:rgba(28,30,40,.56);--faint:rgba(28,30,40,.45);
    --panel:rgba(255,255,255,.85);--border:rgba(28,30,40,.12);--border-strong:rgba(28,30,40,.24);
    --control-bg:rgba(28,30,40,.05);--control-hover:rgba(28,30,40,.1);--thumb-bg:rgba(28,30,40,.07);--menu-bg:#ffffff;
    --accent:#4a5bd8;--bar1:#5b6cf0;--bar2:#8e9bff;--gold:#c98a00;--rank:rgba(28,30,40,.55);
    --badge-border:rgba(28,30,40,.26);--badge-text:rgba(28,30,40,.72);
    --notice-bg:rgba(255,170,60,.16);--notice-border:rgba(200,120,0,.45);--notice-text:#6b4300;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f4f8;--glow1:rgba(120,140,255,.2);--glow2:rgba(255,255,255,.8);
  --text:#1c1e28;--text-strong:#11131a;--text-soft:rgba(28,30,40,.82);--text-stat:rgba(28,30,40,.85);
  --muted:rgba(28,30,40,.64);--muted2:rgba(28,30,40,.56);--faint:rgba(28,30,40,.45);
  --panel:rgba(255,255,255,.85);--border:rgba(28,30,40,.12);--border-strong:rgba(28,30,40,.24);
  --control-bg:rgba(28,30,40,.05);--control-hover:rgba(28,30,40,.1);--thumb-bg:rgba(28,30,40,.07);--menu-bg:#ffffff;
  --accent:#4a5bd8;--bar1:#5b6cf0;--bar2:#8e9bff;--gold:#c98a00;--rank:rgba(28,30,40,.55);
  --badge-border:rgba(28,30,40,.26);--badge-text:rgba(28,30,40,.72);
  --notice-bg:rgba(255,170,60,.16);--notice-border:rgba(200,120,0,.45);--notice-text:#6b4300;
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{
  min-height:100vh;
  color:var(--text);
  font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  line-height:1.5;
  background:
    radial-gradient(60vmax 40vmax at 15% -5%,var(--glow1),transparent 60%),
    radial-gradient(50vmax 40vmax at 100% 30%,var(--glow2),transparent 60%),
    var(--bg);
  background-attachment:fixed;
  padding:max(32px,env(safe-area-inset-top)) 16px max(40px,env(safe-area-inset-bottom));
}
main{max-width:920px;margin:0 auto}
header{margin-bottom:20px}
.tagline{margin:2px 0 0;font-size:13px;color:var(--text-soft)}
.tagline a{color:inherit;text-decoration:underline;text-decoration-color:var(--border-strong)}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
h1{font-size:clamp(24px,5.5vw,34px);font-weight:700;letter-spacing:.04em}
#status{margin-top:6px;color:var(--muted);font-size:13px}
select,button.act{
  font:inherit;font-size:13px;color:var(--text);
  background:var(--control-bg);border:1px solid var(--border-strong);
  border-radius:8px;padding:5px 10px;
}
button.act{cursor:pointer;white-space:nowrap}
footer{margin-top:28px;font-size:12px;color:var(--faint)}
footer a{color:inherit}
:root{--line:var(--border);--code:var(--control-bg)}
.pagetitle{margin:10px 0 14px;font-size:20px;font-weight:700}
.head h1{line-height:1.3}