/* ステラ（仮）MVP1 の見た目。色の値は CAPXLE 共通デザイン設計書 v0.2 から。子ども向けに角を丸く・字を大きく。 */
:root{
  --bg:#FFFFFF;--surface:#F6F8FA;--text:#1A2130;--muted:#687385;--accent:#2F6B8A;--accent-strong:#1F516B;
  --accent-soft:#E9F2F6;--on-accent:#FFFFFF;--ink:#1A2130;--on-ink:#FFFFFF;--border:#E6E8EC;--line-ui:#7D8899;
  --ok:#1B7A4A;--ok-bg:#E6F4EC;--warn:#B8402B;--warn-bg:#FBEDE9;
  --star:#F2B632;--star-ink:#7A5200;--sky:#EAF4F8;
  --r:18px;--font:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1319;--surface:#161B23;--text:#E6E9EF;--muted:#9AA5B5;--accent:#6FB2D1;--accent-strong:#9ACBE2;
  --accent-soft:#172A35;--on-accent:#0B1218;--ink:#E6E9EF;--on-ink:#0F1319;--border:#262D38;--line-ui:#738096;
  --ok:#5FCB93;--ok-bg:#12291D;--warn:#EE7F67;--warn-bg:#2E1B17;--star-ink:#F2B632;--sky:#131F28;}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:20px;line-height:1.7;-webkit-tap-highlight-color:transparent}
.sample{background:var(--warn-bg);color:var(--warn);text-align:center;font-size:15px;padding:6px 12px;border-bottom:1px solid var(--border);font-weight:700}
.wrap{max-width:980px;margin:0 auto;padding:16px}
h1{font-size:28px;margin:8px 0 4px}h2{font-size:22px;margin:20px 0 8px}
.muted{color:var(--muted);font-size:16px}
button,.btn{font:inherit;min-height:56px;min-width:56px;padding:10px 22px;border-radius:var(--r);border:2px solid var(--line-ui);
  background:var(--bg);color:var(--text);cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid var(--accent);outline-offset:2px}
button.primary{background:var(--ink);color:var(--on-ink);border-color:var(--ink);font-weight:700}
button.soft{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
button[aria-pressed="true"],button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent-strong)}
button[disabled]{opacity:.55;cursor:not-allowed;border-style:dashed}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:130px;font-size:26px;font-weight:700;
  border:3px solid var(--accent);background:var(--accent-soft);color:var(--accent-strong);border-radius:24px}
.tile .em{font-size:44px;line-height:1}
.tile[disabled]{border-color:var(--line-ui);background:var(--surface);color:var(--muted)}
.card{border:1px solid var(--border);background:var(--surface);border-radius:var(--r);padding:14px 16px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-block;border-radius:999px;padding:2px 12px;background:var(--accent-soft);color:var(--accent-strong);font-size:15px}
.soon{font-size:14px;border:1px dashed var(--line-ui);border-radius:999px;padding:0 10px;color:var(--muted);margin-left:6px}
canvas{display:block;width:100%;height:auto;border:3px solid var(--line-ui);border-radius:var(--r);background:var(--sky);touch-action:none}
.pad{display:flex;justify-content:space-between;gap:12px;margin-top:10px}.pad button{flex:1;min-height:76px;font-size:30px}
.opt{font-size:30px;min-height:76px}
.msg{min-height:1.7em;font-weight:700}
input[type=text]{font:inherit;min-height:48px;padding:6px 12px;border-radius:12px;border:2px solid var(--line-ui);background:var(--bg);color:var(--text)}
table{border-collapse:collapse;width:100%;font-size:16px}th,td{border-bottom:1px solid var(--border);padding:8px;text-align:left;vertical-align:top}
th{background:var(--surface)}
.palette button{font-size:26px;min-height:64px}
#sky{background:#0F1A2E;border-radius:var(--r);width:100%}
.hide{display:none!important}
@media (max-width:600px){body{font-size:18px}.wrap{padding:12px}h1{font-size:24px}}
@media print{
  .noprint,.sample{display:none!important}
  body{background:#fff;color:#000;font-size:14pt}
  .sheet{border:2px solid #000;padding:20mm 16mm;border-radius:0}
}