/* 全体：色、文字、ボタン、ページの並び */
:root{
  --bg:#f4f4f5; --surface:#ffffff; --ink:#27272a; --muted:#63636b; --line:#d4d4d8;
  --lilac:#8a5cd6; --lilac-soft:#f3edfc; --gold:#c98a12; --gold-soft:#fff3d6;
  --poison:#3f8a5a; --poison-soft:#e2f3e8; --warn:#c2410c; --warn-soft:#fde8dc;
  --cell:#ffffff; --cell-move:#ffffff; --cell-q:#ffffff; --cell-start:#27272a; --cell-start-ink:#fff;
  --t100:#ffffff; --t100i:#71717a; --t300:#ffffff; --t300i:#0e7490; --t400:#ffffff; --t400i:#1d4ed8;
  --t600:#ffffff; --t600i:#7e22ce; --movei:#15803d;
  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"]){
    --bg:#18181b; --surface:#232326; --ink:#ececee; --muted:#a1a1aa; --line:#3f3f46;
    --lilac:#b48cf2; --lilac-soft:#2e2838; --gold:#f2b84b; --gold-soft:#3d3018;
    --poison:#7fd29b; --poison-soft:#1f3a2a; --warn:#fb8a5c; --warn-soft:#41231a;
    --cell:#232326; --cell-move:#232326; --cell-q:#232326; --cell-start:#ececee; --cell-start-ink:#18181b;
    --t100:#232326; --t100i:#a1a1aa; --t300:#232326; --t300i:#5fc4dc; --t400:#232326; --t400i:#8fb0ff;
    --t600:#232326; --t600i:#d4a5ff; --movei:#7dd3a8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#18181b; --surface:#232326; --ink:#ececee; --muted:#a1a1aa; --line:#3f3f46;
  --lilac:#b48cf2; --lilac-soft:#2e2838; --gold:#f2b84b; --gold-soft:#3d3018;
  --poison:#7fd29b; --poison-soft:#1f3a2a; --warn:#fb8a5c; --warn-soft:#41231a;
  --cell:#232326; --cell-move:#232326; --cell-q:#232326; --cell-start:#ececee; --cell-start-ink:#18181b;
  --t100:#232326; --t100i:#a1a1aa; --t300:#232326; --t300i:#5fc4dc; --t400:#232326; --t400i:#8fb0ff;
  --t600:#232326; --t600i:#d4a5ff; --movei:#7dd3a8;
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;line-height:1.6}
main{max-width:1120px;margin:0 auto;padding:20px 16px 48px}
h1{font-size:1.6rem;font-weight:900;margin:0 0 2px;letter-spacing:.02em}
.sub{color:var(--muted);margin:0 0 18px;font-size:.95rem}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}

.btn{border:0;border-radius:999px;padding:9px 18px;font-weight:700;background:var(--lilac);color:#fff}
.btn.ghost{background:transparent;color:var(--lilac);border:2px solid var(--lilac)}
.btn:disabled{opacity:.5;cursor:default}
footer{margin-top:28px;font-size:.78rem;color:var(--muted)}
.status{min-height:1.6em;margin:10px 2px 0;font-size:.92rem;color:var(--muted)}
.status.err{color:var(--warn)}

.layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:18px;align-items:start}
@media (max-width:860px){.layout{grid-template-columns:1fr}}