/* 案3「よぞら」：濃い紺の地に 黄色と うすい緑／太くはっきりした文字／太い枠線と くっきりした影 */
html[data-design='3'] {
  color-scheme: dark;
  --page: #070a14;
  --bg: #11172a;
  --surface: #1c2542;
  --ink: #f3f5ff;
  --muted: #a9b1cf;
  --line: #3a4675;
  --accent: #ffd34d;
  --on-accent: #1b1500;
  --accent-soft: #2c3661;
  --warn: #ff9a9a;
  --warn-soft: #43222f;
  --good: #7be6c3;
  --good-soft: #173c3b;
  --rest-soft: #262e4b;
  --radius: 14px;
  --radius-s: 10px;
  --radius-btn: 12px;
  --border: 2px;
  --shadow: 4px 4px 0 #05070f;
  --font: 'M PLUS 1p', 'Hiragino Sans', system-ui, sans-serif;
  --font-head: var(--font);
  --body-weight: 500;
  --head-weight: 800;
  --stroke: 2.200;
}
html[data-design='3'] b, html[data-design='3'] .row-title, html[data-design='3'] .btn { font-weight: 800; }
html[data-design='3'] .apphead h1 { font-size: 20px; }
html[data-design='3'] .card, html[data-design='3'] .list { border-color: var(--line); }
html[data-design='3'] .card-homework { border-color: var(--accent); }
html[data-design='3'] .card-homework .card-head .ic { color: var(--accent); }
html[data-design='3'] .card-step { border-color: var(--good); }
html[data-design='3'] .card-step .card-head .ic { color: var(--good); }
html[data-design='3'] .card-flat { box-shadow: none; }
html[data-design='3'] .btn { box-shadow: var(--shadow); }
html[data-design='3'] .btn-ghost { background: var(--bg); border-color: var(--ink); }
html[data-design='3'] .btn-danger { background: var(--bg); }
html[data-design='3'] .btn:disabled { box-shadow: none; border-style: dashed; background: none; opacity: 1; }
html[data-design='3'] .tabbar { background: #0b1020; border-top-color: var(--line); }
html[data-design='3'] .tab.is-on { color: var(--accent); }
html[data-design='3'] .tag { background: none; border-color: var(--line); }
html[data-design='3'] .tag-good { border-color: var(--good); color: var(--good); background: var(--good-soft); }
html[data-design='3'] .tag-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
html[data-design='3'] .tag-rest { border-color: var(--line); color: var(--muted); background: var(--rest-soft); }
html[data-design='3'] .choice.is-on { border-color: var(--accent); }
html[data-design='3'] .notice { border: 2px solid var(--line); }
html[data-design='3'] .notice .ic, html[data-design='3'] .points .ic { color: var(--good); }
html[data-design='3'] .notice-warn { border-color: var(--warn); }
html[data-design='3'] .alert { box-shadow: var(--shadow); color: var(--ink); }
html[data-design='3'] .textlink, html[data-design='3'] .mini { color: var(--accent); }
html[data-design='3'] .mocknote { background: #2a2d3d; color: #e3e5f2; border-bottom-color: #6c7396; }
html[data-design='3'] .staff-box { background: #f3f5ff; border-color: var(--ink); box-shadow: var(--shadow); }
html[data-design='3'] .staff-line, html[data-design='3'] .staff-clef { stroke: #11172a; }
html[data-design='3'] .staff-note ellipse { fill: #11172a; }
html[data-design='3'] .staff-note path { stroke: #11172a; }
html[data-design='3'] .staff-note.is-now ellipse { fill: #c2410c; }
html[data-design='3'] .staff-note.is-now path { stroke: #c2410c; }
html[data-design='3'] .key { fill: #f3f5ff; stroke: #11172a; }
html[data-design='3'] .key-black { fill: #11172a; }
html[data-design='3'] .key.is-hit { fill: var(--accent); }
html[data-design='3'] .qr { background: #f3f5ff; fill: #11172a; padding: 8px; border-radius: 6px; }
html[data-design='3'] .qr .qr-eye { stroke: #11172a; }
html[data-design='3'] .bar-0 { fill: none; stroke: var(--muted); stroke-width: 1.500; }
html[data-design='3'] .bar-1 { fill: var(--accent); }
html[data-design='3'] .minibars .bar-0 { fill: var(--good); }
html[data-design='3'] .legend span::before { border-color: var(--muted); }
html[data-design='3'] .legend-0::before { background: none; }
html[data-design='3'] .map-road { stroke: var(--line); }
html[data-design='3'] .map-node circle { stroke-width: 3; }
html[data-design='3'] .map-node.is-done circle { fill: var(--good-soft); stroke: var(--good); }
html[data-design='3'] .map-check { stroke: var(--good); }
html[data-design='3'] .result-mark, html[data-design='3'] .handover-mark { background: none; border: 3px solid var(--accent); box-shadow: var(--shadow); }
html[data-design='3'] .kid-face { background: var(--accent); color: var(--on-accent); }
html[data-design='3'] .dots i.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }
html[data-design='3'] .step-dot.is-on { background: var(--accent); }
html[data-design='3'] .toast { border: 2px solid var(--ink); }