@font-face{font-family:LabNoteJP;src:url(fonts/LabNoteJP.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:LabNoteEN;src:url(fonts/LabNoteEN.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:LabNumber;src:url(fonts/LabNumber.woff2) format('woff2');font-weight:500;font-display:swap}
:root{--paper:#F7F5F0;--ink:#20232A;--blue:#1C64D9;--orange:#E8590C;--gray:#5C6370;--line:#C8C4BC;--soft:#EEEAE1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--paper);font:500 17px/1.65 LabNoteJP,sans-serif}
html[lang=en] body{font-family:LabNoteEN,sans-serif}
header,main,footer{max-width:1240px;margin:auto;padding:14px 32px}
header{display:flex;align-items:center;gap:16px;border-bottom:1px solid #D5D1CA}
a{color:#1857B9;text-underline-offset:4px;overflow-wrap:anywhere}
.brand{color:var(--blue);text-decoration:none;font-size:17px}
.silent{color:var(--gray);font-size:16px}
.language{margin-left:auto;min-height:44px;display:flex;align-items:center}
h1{font-size:clamp(22px,2.6vw,30px);font-weight:500;line-height:1.4;margin:6px 0 4px}
h2{font-size:23px;font-weight:500;line-height:1.4;margin:0 0 8px}
h3{font-size:19px;font-weight:500;line-height:1.45;margin:0 0 8px}
.lead{color:var(--gray);margin:0 0 10px;max-width:920px}
.intro{margin-bottom:14px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.tabs button{flex:1;min-width:160px;text-align:left;padding:8px 16px}
.tabs span{margin-right:10px}
.tabs small{color:var(--gray);font-size:16px}
/* 2 列の時も、枠（サイトの埋め込みは幅 894px）の幅に合わせて図の列が縮む。説明の列は 300px より狭くしない。 */
.layout{display:grid;grid-template-columns:minmax(0,min(620px,max(320px,calc(100vh - 310px)))) minmax(300px,1fr);gap:clamp(20px,3vw,36px);align-items:start}
.visual{width:100%}
.visual,.controls{min-width:0}
#hint{margin:0 0 6px}
.stage{width:100%;aspect-ratio:1;position:relative;background:var(--paper);border:1px solid #E4E0D6;border-radius:10px;overflow:hidden;touch-action:manipulation}
.stage canvas{display:block;width:100%;height:100%;cursor:crosshair}
button,input,select{font:inherit;color:inherit}
button{min-height:44px;border:1px solid #AAA69E;background:#fff;border-radius:9px;padding:9px 14px;cursor:pointer;line-height:1.4;max-width:100%}
button:hover{background:var(--soft)}
button[aria-pressed=true]{border:2px solid var(--ink);background:#EEEBE4}
button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
button.primary:hover{background:#3A3E48}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.buttons{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0}
.setting{margin:18px 0}
.setting label,.setting .label{display:block;margin-bottom:4px}
.setting small,.note{display:block;color:var(--gray);font-size:16px;line-height:1.6}
.slider{display:flex;align-items:center;gap:8px}
.slider input[type=range]{flex:1;min-width:0;min-height:44px;accent-color:var(--ink)}
.slider button{min-width:48px;padding:6px 10px}
.value{font-family:LabNumber,sans-serif;font-variant-numeric:tabular-nums;min-width:72px;text-align:right}
.more{border-top:1px solid var(--line);margin-top:16px;padding-top:6px}
.cta{border-top:2px solid var(--ink);margin-top:22px;padding-top:16px}
.readout{border-left:3px dashed var(--blue);margin:16px 0 0;padding:4px 0 4px 16px}
.readout .row{display:flex;gap:12px;align-items:flex-start;margin:10px 0}
.readout .sw{flex:none;width:36px;height:36px;border-radius:5px;border:2px solid var(--gray)}
.readout b{display:block;font-weight:500}
.readout .res{color:var(--blue);font-size:19px}
.readout code{display:block;color:var(--gray);font:500 15px LabNumber,monospace}
.readout .eq{color:var(--blue);font-size:19px;margin:6px 0}
#sharelink{width:100%;min-height:44px;padding:8px;margin-top:8px;border:1px solid #AAA69E;border-radius:6px}
#status{color:var(--gray);min-height:1.6em;margin:14px 0 0}
.round{font-size:20px;margin:4px 0 12px}
.answers{display:grid;gap:9px;margin:16px 0}
.answers button{text-align:left}
.result-plot{width:100%;height:auto;display:block;margin:6px 0 2px}
.stats{margin:8px 0;padding:0;list-style:none}
.stats li{margin:4px 0}
.stats .num{font-family:LabNumber,sans-serif;font-variant-numeric:tabular-nums}
.next{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0}
fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:14px 0}
fieldset label{display:flex;align-items:center;gap:10px;min-height:44px}
fieldset input{width:22px;height:22px;accent-color:var(--ink)}
.daily{margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
.daily .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;max-width:720px}
.notebook{margin-top:36px;border-top:1px solid var(--line);padding-top:24px}
#records{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:16px;margin:18px 0}
.record{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#FFFDF9;min-width:0}
.record.compare{grid-column:1/-1}
.record p{margin:6px 0;font-size:16px}
details{margin-top:22px;border-top:1px solid var(--line)}
summary{cursor:pointer;min-height:44px;display:list-item;padding:10px 0}
details p,details li{font-size:16px;max-width:900px}
#sources ul{padding-left:22px}
footer{color:var(--gray);font-size:16px;padding-bottom:44px}
[hidden]{display:none!important}
@media (max-width:760px){
  header,main,footer{padding:16px}
  header{gap:10px;flex-wrap:wrap}
  .layout{grid-template-columns:1fr;gap:14px}
  .lead{font-size:15px;line-height:1.6}
  .tabs{gap:6px;margin-bottom:12px}
  .tabs button{min-width:0;flex:1 1 30%;padding:6px 8px;font-size:15px;line-height:1.3}
  .tabs span{display:block;margin:0}
  .tabs small{display:block;font-size:13px;line-height:1.3}
  .visual{position:sticky;top:0;z-index:2;background:var(--paper);padding-bottom:6px;width:100%;min-width:0}
  .visual h2{font-size:19px;margin-bottom:4px}
  .stage{max-width:min(100%,56vh);max-width:min(100%,56svh);margin:auto}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* 動画の中で実験台を見せるための撮影用の配置（?capture） */
.capture header,.capture .intro,.capture .daily,.capture .notebook,.capture details,.capture footer,.capture #status{display:none!important}
.capture main{max-width:1600px;padding:22px 40px}
.capture .tabs{margin:0 0 18px}
.capture .tabs button{font-size:22px;padding:10px 20px}
.capture .tabs small{font-size:19px}
.capture body,.capture{font-size:22px}
.capture .layout{grid-template-columns:600px minmax(0,1fr);gap:46px}
.capture .visual{width:600px}
.capture .visual{position:static}
.capture h2{font-size:28px}
.capture #hint{font-size:20px}
.capture .setting small,.capture .note{font-size:19px}
.capture .readout{display:none!important}