:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #183754;
  --heading: #0038a8;
  --accent: #0a5cff;
  --pale: #eaf4ff;
  --line: #cfdded;
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 32px/1.65 var(--font); }
a { color: var(--heading); text-underline-offset: .2em; }
button, select { font: inherit; }
button, select, summary { cursor: pointer; }
button, a, select, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
[hidden] { display: none !important; }
h1, h2 { color: var(--heading); font-weight: 800; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
h1 { font-size: clamp(40px, 4vw, 56px); }
h2 { font-size: clamp(40px, 3.2vw, 48px); }
p { margin: 0; }
.page-nav, .tools-main, .experiment-main, .page-footer { width: min(1440px, calc(100% - 64px)); margin-inline: auto; }
.page-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.page-nav a, .page-footer a { display: inline-flex; align-items: center; gap: 12px; min-height: 64px; font-size: 30px; }
.site-owner { font-size: 30px; }
.collection-heading { margin-block: 48px 40px; }
.collection-heading p { margin-top: 16px; }
.tool-card { display: grid; grid-template-columns: 1fr 1.08fr; border: 2px solid var(--heading); box-shadow: 8px 8px 0 var(--pale); }
.tool-preview { display: block; width: 100%; height: 100%; object-fit: contain; align-self: center; background: white; border-right: 1px solid var(--line); }
.tool-card-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; padding: clamp(24px, 3vw, 48px); }
.tool-theme { color: var(--heading); font-size: 30px; font-weight: 700; }
.action { min-height: 64px; min-width: 64px; display: inline-flex; justify-content: center; align-items: center; gap: 16px; padding: 10px 24px; border: 2px solid var(--heading); background: white; color: var(--heading); font: 700 32px/1.5 var(--font); text-decoration: none; border-radius: 4px; max-width: 100%; }
.action.primary { background: var(--heading); color: white; }
.action:hover { background: var(--pale); }
.action.primary:hover { background: #002c85; }
.action:disabled { opacity: .6; cursor: wait; }
.page-footer { padding-block: 40px 32px; }
.experiment-main > h1 { margin-block: 20px 12px; }
.experiment-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: center; background: white; }
.ball-stage { width: min(100%, 720px); justify-self: center; background: white; color: #202020; }
.ball-count { text-align: right; padding: 8px 20px 0; font-size: 32px; font-variant-numeric: tabular-nums; }
.ball-stage canvas { display: block; width: 100%; aspect-ratio: 1.15; }
.experiment-controls { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0; }
.experiment-question { color: var(--heading); margin-bottom: 8px; font-size: 32px; font-weight: 700; }
.mode-label { margin-top: 8px; font-size: 32px; }
.experiment-controls select { width: 100%; min-height: 64px; padding: 8px 12px; border: 2px solid var(--heading); border-radius: 4px; background: white; color: var(--ink); font-size: 32px; }
.instructor-notes { margin-block: 32px 48px; border-top: 1px solid var(--line); padding-top: 12px; }
.instructor-notes summary { font-size: 32px; min-height: 64px; padding: 8px 0; color: var(--heading); }
.instructor-notes > div { padding-block: 16px; max-width: 38em; }
.instructor-notes p + p { margin-top: 24px; }
.error-message { font-size: 32px; color: #8f1a1a; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: 16px; z-index: 20; min-height: 64px; padding: 8px 16px; background: white; color: var(--heading); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.experiment-layout:fullscreen, .experiment-layout.is-presenting { width: 100%; height: 100%; overflow: auto; padding: 24px; align-content: center; }
.experiment-layout.is-presenting { position: fixed; inset: 0; z-index: 100; }
.presentation-active { overflow: hidden; }
.presentation-active .page-nav, .presentation-active .experiment-main > h1, .presentation-active .instructor-notes, .presentation-active .skip-link { visibility: hidden; }
.experiment-layout:fullscreen .ball-stage, .experiment-layout.is-presenting .ball-stage { width: min(100%, calc((100dvh - 136px) * 1.15)); }
@media (max-width: 1050px) {
  .experiment-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .experiment-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .experiment-question, .mode-label, .experiment-controls select, .error-message { grid-column: 1 / -1; }
  .experiment-question br { display: none; }
  .ball-stage { width: min(100%, 600px); }
  .experiment-layout:fullscreen, .experiment-layout.is-presenting { align-content: start; }
  .experiment-layout:fullscreen .ball-stage, .experiment-layout.is-presenting .ball-stage { width: min(100%, 600px); }
}
@media (max-width: 900px) {
  .tool-card { grid-template-columns: 1fr; }
  .tool-card-content { grid-row: 1; }
  .tool-preview { width: 100%; max-height: 440px; border-right: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 540px) {
  .page-nav, .tools-main, .experiment-main, .page-footer { width: calc(100% - 32px); }
  .site-owner { display: none; }
  .collection-heading { margin-block: 28px; }
  .tool-card-content { padding: 22px; gap: 20px; }
  .tool-card-content .action { width: 100%; }
  .experiment-controls { display: flex; }
  .experiment-controls .action { width: 100%; }
  .experiment-layout:fullscreen, .experiment-layout.is-presenting { padding: 16px; }
  .ball-count { padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Additional tools share the card styling without requiring a preview image. */
.tool-card + .tool-card { margin-top: 40px; }
.tool-card-text { grid-template-columns: minmax(0, 1fr); }
.tool-card-text .tool-card-content { max-width: 42em; }
.tool-note { font-size: 30px; }