:root{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif;color:#162b40;background:#f2f6fa;font-size:16px}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;padding:22px max(24px,calc((100% - 1400px)/2));background:#142e44;color:white}a{color:inherit;text-decoration:none}header span,.eyebrow{font-size:.875rem;letter-spacing:.12em}header b{color:#63d4d0}main{max-width:1448px;margin:auto;padding:28px 24px}.heading,.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}h1{font-size:2rem;margin:8px 0 24px}h2{font-size:1.15rem;margin:0}h3{font-size:1rem}.eyebrow{margin:0;color:#4b657d}.badge{padding:8px 12px;border:1px solid #b5c9d8;border-radius:24px;font-size:.875rem}.controls{display:grid;grid-template-columns:1.3fr .7fr 1.3fr 1fr;gap:16px}label{display:grid;gap:7px;font-size:.875rem;font-weight:600}select,button{font:inherit;color:inherit;background:white;border:1px solid #adc0d0;border-radius:8px;padding:12px;min-height:46px}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #247dcb;outline-offset:3px}select{width:100%;min-width:0}select:disabled{opacity:.5}.lesson{padding:16px 20px;background:#e0edf5;border-left:4px solid #247aa7;line-height:1.8}.workspace{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.4fr);gap:20px}.model-panel,.chart-panel{background:white;border:1px solid #d6e1e9;border-radius:14px;padding:22px;min-width:0}.panel-heading{margin-bottom:16px}.panel-heading span{font-size:.875rem;color:#466782}canvas{display:block;width:100%;height:auto;border-radius:8px;background:#edf2f6}#face{max-height:260px;object-fit:contain}#imageStatus,.small,.legend{font-size:.875rem;line-height:1.7;color:#4b6174}#imageStatus{margin:8px 0}.eye-labels{display:flex;justify-content:space-around;font-size:.875rem;margin:8px 0}#zoom{max-height:140px;object-fit:contain}.gazes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.gazes button[aria-pressed=true]{background:#146e84;color:white;border-color:#146e84}.charts{display:grid;grid-template-columns:1fr 1fr;gap:12px}figure{margin:0;min-width:0;border:2px solid transparent;border-radius:10px;background:#f8fafc;padding:8px}figure.active{border-color:#177e98}figcaption{font-weight:700;text-align:center;line-height:1.7}figcaption small{display:block;font-weight:400;font-size:.875rem}.charts svg{width:100%;height:auto;display:block}.legend{display:flex;flex-wrap:wrap;gap:4px 20px}.reading{border-top:1px solid #d6e1e9;margin-top:24px;padding-top:8px}.reading ol{line-height:2.1;padding-left:24px}aside{margin-top:24px;padding:22px;border:1px solid #c9d7e2;border-radius:12px;line-height:1.8}aside p{font-size:.875rem} @media(max-width:1000px){.workspace{grid-template-columns:1fr}.model-panel{max-width:none}#face{max-height:220px}.controls{grid-template-columns:1fr 1fr}}@media(max-width:520px){main{padding:20px 12px}.model-panel,.chart-panel{padding:14px}.heading{align-items:flex-start}.badge{font-size:.75rem}.charts{grid-template-columns:1fr}header{padding:18px 14px}header span{letter-spacing:0}.controls{gap:12px}h1{font-size:1.7rem}}
.overflow-note{margin:10px 0 0;padding:10px;background:#fff2df;border:1px solid #d5a26b;border-radius:6px;color:#813900;font-size:.875rem;line-height:1.7;overflow-wrap:anywhere}.overflow-note summary{cursor:pointer;font-weight:700;min-height:32px}.overflow-note ul{padding-left:18px;margin-bottom:0}
.controls > *, .workspace > * { min-width: 0; }
.chart-point { cursor: pointer; }
.chart-point:hover { fill: #16788c33; stroke: #16788c; stroke-width: 2; }
.chart-point:focus-visible { outline: none; fill: #f9cf6d66; stroke: #174c71; stroke-width: 3; }
.charts.expanded { grid-template-columns: minmax(0,1fr); }
.charts.expanded figure { max-width: 700px; width: 100%; margin: auto; }
.point-info { padding: 12px 16px; border-left: 3px solid #177e98; background: #eaf5f9; font-size: 14px; line-height: 1.8; font-variant-numeric: tabular-nums; }
@media(min-width:1001px) { .model-panel { align-self: start; position: sticky; top: 12px; } }
@media(max-width:1000px) and (min-height:650px) {
  .model-panel { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px; box-shadow: 0 5px 18px #152f4422; }
  .model-panel .panel-heading { grid-column: 1 / -1; margin-bottom: 0; }
  #face { max-height: 140px; }
  #zoom { max-height: 90px; align-self: center; }
  .model-panel .gazes { grid-column: 1 / -1; margin-top: 0; gap: 4px; }
  .gazes button { min-height: 36px; padding: 5px; font-size: 14px; }
  .model-panel .eye-labels { display: none; }
  #imageStatus { grid-column: 1 / -1; font-size: 12px; margin: 0; }
  .model-panel .small { grid-column: 1 / -1; font-size: 12px; margin: 0; }
  #face { grid-column: 1; grid-row: 2; }
  #zoom { grid-column: 2; grid-row: 2; }
}