:root {
  --bg: #f4f1ea; --panel: #ffffff; --ink: #2b2a27; --muted: #7a766d; --line: #e2ddd1;
  --accent: #e8632b; --accent-ink: #fff; --ok: #2f9e6b; --ng: #c0392b; --star: #f1b21b;
  --font: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); display: flex; flex-direction: column; font-size: 14px; }
body.profile-kids { font-size: 17px; }
body.profile-kids .blocklyTrash, body.profile-kids .blocklyZoom { transform: scale(1.3); transform-origin: bottom right; }
body.profile-teen { --font: "SF Mono", Menlo, "Noto Sans JP", system-ui, sans-serif; }
header { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 1.15em; letter-spacing: .02em; display: flex; align-items: center; gap: 6px; }
.logo { color: var(--accent); font-size: 1.1em; }
.spacer { flex: 1; }
.field { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.field span { font-size: .85em; }
select, button, input[type=range] { font: inherit; }
select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
button { padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; color: var(--ink); }
button:hover { border-color: var(--ink); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
button:disabled { opacity: .45; cursor: default; }
nav#levels { display: flex; gap: 6px; padding: 6px 14px; overflow-x: auto; background: var(--panel); border-bottom: 1px solid var(--line); }
nav#levels button { white-space: nowrap; padding: 4px 10px; font-size: .9em; }
nav#levels button.active { border-color: var(--accent); color: var(--accent); font-weight: 700; }
nav#levels button .s { color: var(--star); margin-left: 4px; font-size: .8em; }
main { flex: 1; display: grid; grid-template-columns: 3fr 2fr; min-height: 0; overflow: auto; }
#editor { display: flex; flex-direction: column; min-width: 0; }
#blockly { flex: 1; min-height: 0; }
#code { margin: 0; padding: 8px 12px; max-height: 30%; overflow: auto; background: #1f1e1b; color: #e8e4d8; font-size: 12px; line-height: 1.5; border-top: 1px solid var(--line); }
#side { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); }
#view { flex: 1; min-height: 240px; position: relative; background: linear-gradient(#e9f2f7, #f6f4ee); }
#view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#view-tip { position: absolute; right: 10px; bottom: 8px; font-size: .75em; color: var(--muted); pointer-events: none; }
#panel { padding: 12px 16px; background: var(--panel); border-top: 1px solid var(--line); }
#panel h2 { margin: 0 0 6px; font-size: 1.2em; }
#panel p { margin: 4px 0; }
#panel b { color: var(--muted); font-weight: 600; margin-right: 6px; font-size: .9em; }
.stats { border-collapse: collapse; margin: 8px 0; }
.stats th { text-align: left; color: var(--muted); font-weight: 600; padding-right: 14px; font-size: .9em; }
.stats td { font-weight: 700; font-variant-numeric: tabular-nums; }
.par { color: var(--muted); font-weight: 400; margin-left: 4px; }
.par:not(:empty)::before { content: "/ "; }
#result { padding: 8px 12px; border-radius: 8px; font-weight: 700; margin: 8px 0; }
#result.ok { background: #e6f5ec; color: var(--ok); }
#result.ng { background: #fbe9e7; color: var(--ng); }
#notice { padding: 6px 10px; border-radius: 6px; background: #fff4d6; color: #8a5a00; font-size: .85em; margin: 6px 0; }
#stars { display: flex; flex-direction: column; gap: 2px; font-size: .9em; color: var(--muted); }
#stars .on { color: var(--star); }
#btn-next { margin-top: 8px; }
.blocklyToolboxDiv { background: #faf8f3; }
@media (max-width: 860px) {
  main { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  #view { min-height: 220px; height: 40vh; flex: none; }
  #side { border-left: 0; border-top: 1px solid var(--line); }
}