/* 第5教材の共通レイアウトに、第6教材固有の表示だけを追加する。 */
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #c58220; outline-offset: 4px; }
.hero { max-width: 900px; }
.experiment-heading, .motion-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.experiment-heading h2 { margin: 0; font-size: 1.35rem; }
.mode-label { flex-shrink: 0; padding: 5px 10px; border-radius: 20px; background: #edf3f5; color: #526d79; font-size: .8rem; font-weight: 750; }
.mode-label.is-revealed { background: #e3f4e9; color: #216846; }
.diagram-intro, .diagram-caption { color: #607783; line-height: 1.6; font-size: .85rem; }
.diagram-caption { margin: 6px 0 14px; }
.diagram-label { font-size: 22px; font-weight: 800; }
.diagram-question { fill: #71848d; font-size: 23px; font-weight: 700; }
.force-control label { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: .92rem; }
.force-control output { font-size: .8rem; white-space: nowrap; }
.force-a { color: #c4473d; }
.force-b { color: #1676b7; }
input[type="range"] { width: 100%; height: 28px; margin: 4px 0; cursor: pointer; accent-color: #c4473d; }
.force-b input { accent-color: #1676b7; }
.range-ends { display: flex; justify-content: space-between; color: #71848d; font-size: .76rem; }
.control-note { color: #607783; font-size: .8rem; line-height: 1.6; margin-bottom: 0; }
.observation-panel { padding: 15px 18px; border-radius: 12px; background: #f0f7f8; }
.observation-panel p:not(.card-kicker) { margin-top: 8px; margin-bottom: 0; line-height: 1.7; }
.result-panel { background: #edf8f1; }
.result-value { color: #216846; font-weight: 850; font-size: 1.15rem; }
.motion-panel { margin-top: 18px; border-top: 1px solid #d8e3e7; padding-top: 16px; }
.motion-heading { margin-bottom: 12px; }
.motion-heading h3 { font-size: 1rem; margin: 0; }
.motion-panel p { line-height: 1.65; margin: 8px 0 0; }
button:disabled { opacity: .5; cursor: default; }
#answer-text { line-height: 1.8; color: #496373; }
#copy-fallback { margin-bottom: 18px; padding: 14px; border: 1px solid #b8ced3; border-radius: 10px; background: white; }
#copy-fallback label { display: block; font-size: .85rem; margin-bottom: 8px; }
#page-url { width: 100%; padding: 10px; border: 1px solid #b8ced3; border-radius: 6px; font: inherit; }
.simulator-layout:fullscreen, .simulator-layout.is-expanded { align-items: start; }
.simulator-layout.is-expanded { position: fixed; inset: 0; z-index: 20; overflow: auto; padding: 28px; background: #f4f7f8; }
body.has-expanded-simulator { overflow: hidden; }
.practice-card { margin-top: 16px; }
.practice-card summary { cursor: pointer; font-weight: 750; line-height: 1.6; }
.practice-card p { line-height: 1.8; }
.practice-label { color: #087c86; font-weight: 800; font-size: .8rem; }
@media(max-width:760px) {
  .page-actions { justify-content: flex-start; flex-wrap: wrap; }
  .control-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 18px; }
  .control-panel h2, .control-panel > label, .control-panel > select, .control-note, #fullscreen-button { grid-column: 1 / -1; }
  .control-panel button { margin-top: 12px; }
  .force-control label { flex-wrap: wrap; }
  .experiment-card { padding: 14px; }
  .experiment-heading h2 { font-size: 1.1rem; }
  .simulator-layout:fullscreen, .simulator-layout.is-expanded { padding: 12px; }
  .questions-link-card { align-items: flex-start; flex-direction: column; gap: 6px; }
}