.experiment-builder,.custom-experiment { color:#182721; background:#f3f0e8; font:17px/1.6 var(--font-body,Arial,sans-serif); }
.experiment-builder *,.custom-experiment * { box-sizing:border-box; }
.experiment-builder [hidden],.custom-experiment [hidden] { display:none!important; }
.experiment-builder button,.custom-experiment button,.experiment-builder input,.experiment-builder textarea,.experiment-builder select { font:inherit; }
.experiment-builder { width:min(1240px,calc(100% - 64px)); margin:0 auto; padding:38px 0 70px; }
.experiment-builder h1,.custom-experiment h1 { font:400 clamp(32px,4vw,48px)/1.12 var(--font-heading,Georgia,serif); letter-spacing:-.7px; margin:8px 0 18px; }
.experiment-builder h2,.custom-experiment h2 { font-size:24px; line-height:1.25; margin:0 0 18px; }
.experiment-intro { max-width:860px; margin-bottom:28px; }
.experiment-intro p { margin:0 0 16px; }
.experiment-kicker { font-size:16px; font-weight:600; color:#315c48; }
.experiment-scope,.experiment-board-help { color:#546158; font-size:16px; }
.experiment-builder button,.experiment-file-button,.experiment-primary,.experiment-secondary,.custom-experiment button { min-height:46px; padding:11px 16px; border:1px solid #9caa9b; border-radius:3px; background:transparent; color:#182721; cursor:pointer; font-size:16px; line-height:1.35; }
.experiment-primary,.experiment-builder button.experiment-primary,.custom-experiment button.experiment-primary { display:inline-flex; align-items:center; justify-content:center; background:#315c48; color:#fff; border-color:#315c48; font-weight:600; text-decoration:none; }
.experiment-secondary { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.experiment-builder button:hover,.custom-experiment button:hover { border-color:#315c48; background:#e2e5da; }
.experiment-builder .experiment-primary:hover,.custom-experiment .experiment-primary:hover { background:#244b37; color:#fff; }
.experiment-builder button:focus-visible,.experiment-builder input:focus-visible,.experiment-builder textarea:focus-visible,.experiment-file-button:focus-within,.custom-experiment button:focus-visible,.custom-experiment a:focus-visible { outline:3px solid #ba542f; outline-offset:3px; }
.experiment-editor-toolbar { display:flex; flex-wrap:wrap; gap:8px; padding:18px 0; border-top:1px solid #b8c0b3; border-bottom:1px solid #b8c0b3; }
.experiment-file-button { position:relative; display:inline-flex; align-items:center; overflow:hidden; }
.experiment-file-button input { position:absolute; opacity:0; width:100%; height:100%; inset:0; cursor:pointer; }
.experiment-editor-status { color:#315c48; font-size:16px; margin:14px 0 24px; min-height:26px; }
.experiment-trial-status { border-left:3px solid #ba542f; padding-left:13px; margin:20px 0 14px; color:#5a5647; font-size:16px; }
.experiment-editor-status:empty { display:none; }
.experiment-builder { padding-top:18px; }
.experiment-intro { margin-bottom:12px; }
.experiment-intro .experiment-kicker { margin-bottom:2px; font-size:15px; line-height:1.45; }
.experiment-intro h1 { margin:4px 0 8px; font-size:36px; line-height:1.1; }
.experiment-intro>p:last-child { margin-bottom:0; font-size:16px; line-height:1.45; }
.experiment-editor-toolbar { padding-block:10px; align-items:start; }
.experiment-transfer summary { display:flex; align-items:center; min-height:46px; padding:10px 14px; border:1px solid #9caa9b; border-radius:3px; font-size:16px; cursor:pointer; }
.experiment-transfer summary::after { content:'+'; margin-left:12px; }
.experiment-transfer[open] summary::after { content:'−'; }
.experiment-transfer[open] { flex-basis:100%; }
.experiment-transfer>div { display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; }
.experiment-trial-status { margin:12px 0 16px; padding-left:10px; line-height:1.45; }
.experiment-editor-board>h2 { font-size:20px; margin-bottom:12px; }
.experiment-share { padding:20px; border:1px solid #9caa9b; margin-bottom:24px; }
.experiment-share label { display:grid; gap:8px; }
.experiment-share textarea { width:100%; margin-bottom:12px; }
.experiment-construction-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); align-items:start; gap:30px; }
.experiment-editor-board { min-width:0; position:sticky; top:100px; }
.experiment-scene { min-width:0; overflow:hidden; position:relative; background:#e4e4d8; border:1px solid #a5b09f; }
.experiment-scene canvas { display:block; width:100%; height:100%; touch-action:pan-y; }
.experiment-editor-scene { height:390px; }
.experiment-object-picker { display:flex; flex-wrap:wrap; gap:6px; padding:14px 0; }
.experiment-object-picker button { font-size:15px; }
.experiment-object-picker button[aria-pressed=true] { color:#fff; background:#315c48; border-color:#315c48; }
.experiment-add-object { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-bottom:14px; border-bottom:1px solid #bcc4b6; }
.experiment-add-object span { font-size:15px; color:#546158; }
.experiment-board-help { margin-top:14px; }
.experiment-definition { min-width:0; }
.experiment-definition fieldset { min-width:0; margin:0 0 22px; padding:18px 0 0; border:0; border-top:1px solid #b8c0b3; }
.experiment-definition legend { padding:0 8px 0 0; font-weight:600; font-size:21px; }
.experiment-definition fieldset>p { color:#546158; font-size:16px; }
.experiment-definition label { display:grid; align-content:start; gap:7px; font-size:16px; font-weight:600; margin-bottom:14px; min-width:0; position:relative; }
.experiment-definition input,.experiment-definition textarea,.experiment-share textarea { max-width:100%; min-width:0; min-height:46px; width:100%; padding:10px 11px; color:#182721; background:#fffdf7; border:1px solid #8b9c8a; border-radius:2px; font-size:16px; font-weight:400; }
.experiment-definition textarea { resize:vertical; line-height:1.5; }
.experiment-unit { position:absolute; top:0; right:0; font-weight:400; color:#667262; }
.experiment-number-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
.experiment-selected-object { background:#e8e8db; padding:18px 12px 12px!important; border:1px solid #a0ad98!important; }
.experiment-remove { color:#9b3f25!important; border-color:#b9937f!important; }
.experiment-saved { margin-top:42px; padding-top:28px; border-top:2px solid #182721; }
.experiment-saved ul { list-style:none; padding:0; margin:0 0 20px; }
.experiment-saved li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #b8c0b3; }
.experiment-saved li span { flex:1; min-width:0; overflow-wrap:anywhere; }
.experiment-saved li button { padding-inline:12px; }
.experiment-webgl-error { padding:24px; font-size:17px; color:#803c27; }
.custom-experiment { min-height:100svh; }
.custom-experiment-header { display:flex; justify-content:space-between; align-items:center; min-height:62px; padding:10px max(24px,calc((100vw - 1120px)/2)); border-bottom:1px solid #b8c0b3; }
.custom-experiment-header a { min-height:44px; display:inline-flex; align-items:center; color:#315c48; font-size:16px; text-decoration:none; }
.custom-experiment-header a:first-child { font-weight:700; font-size:22px; }
.custom-learning-path { padding:16px 24px; border-bottom:1px solid #b8c0b3; }
.custom-learning-path ol { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:0 auto; padding:0; max-width:760px; gap:12px; }
.custom-learning-path li { display:flex; align-items:center; gap:8px; color:#697265; font-size:15px; }
.custom-learning-path li span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #a5b09f; border-radius:50%; flex:none; font-size:14px; }
.custom-learning-path li[aria-current] { color:#315c48; font-weight:600; }
.custom-learning-path li[aria-current] span { background:#315c48; color:#fff; border-color:#315c48; }
.custom-learning-sheet { width:min(760px,calc(100% - 48px)); margin:0 auto; padding:42px 0 60px; }
.custom-rule-text { font-size:21px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.custom-rule-numbers { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid #b8c0b3; padding:20px 0; gap:18px; margin:28px 0; }
.custom-rule-numbers span { display:grid; gap:8px; color:#586650; font-size:16px; }
.custom-rule-numbers strong { color:#182721; font-size:21px; }
.custom-stage-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.custom-instruction-list { padding-left:25px; }
.custom-instruction-list li { padding-left:6px; margin:14px 0; }
.custom-game-layout { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:20px 0 30px; }
.custom-game-heading h1 { font-size:30px; margin:0 0 8px; }
.custom-game-heading p { font-size:16px; margin:0 0 16px; }
.custom-game-scene { height:min(52svh,520px); min-height:220px; }
.custom-game-readouts { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; border-bottom:1px solid #b8c0b3; padding:14px 0; }
.custom-game-readouts>div { display:grid; gap:4px; }
.custom-game-readouts span { font-size:15px; color:#586650; }
.custom-game-readouts strong { font-size:19px; font-weight:600; }
.custom-drive-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px 0 6px; }
.custom-drive-controls button { min-height:56px; background:#e4e8dc; border-color:#71866b; user-select:none; -webkit-user-select:none; touch-action:none; font-weight:600; }
.custom-drive-controls button[data-drive=brake] { background:#efe0d1; border-color:#b38465; }
.custom-drive-controls button.is-held { background:#315c48; color:#fff; }
.custom-game-message { color:#315c48; font-size:16px; min-height:26px; margin:10px 0; }
.custom-game-actions { display:flex; gap:8px; flex-wrap:wrap; }
.custom-result-data { margin:28px 0; border-top:1px solid #b8c0b3; }
.custom-result-data>div { display:grid; grid-template-columns:1fr 1.4fr; gap:20px; padding:12px 0; border-bottom:1px solid #b8c0b3; }
.custom-result-data dt { color:#586650; }
.custom-result-data dd { margin:0; }
.custom-explanation h2 { margin-top:28px; }
.custom-experiment button.experiment-text-button { border:0; padding-left:0; margin-top:18px; color:#315c48; text-decoration:underline; text-underline-offset:4px; }
.custom-experiment-footer { border-top:1px solid #b8c0b3; padding:18px 24px 28px; text-align:center; color:#586650; font-size:15px; }
.custom-experiment-footer button { display:block; margin:14px auto 0; font-size:15px; }
@media(max-width:900px) {
  .experiment-construction-grid { grid-template-columns:1fr; }
  .experiment-editor-board { position:static; }
  .experiment-editor-scene { height:360px; }
  .experiment-definition { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .experiment-definition fieldset { margin:0; }
  .experiment-definition fieldset:first-child,.experiment-definition>button { grid-column:1/-1; }
}
@media(max-width:560px) {
  .experiment-builder { width:calc(100% - 32px); padding:24px 0 40px; font-size:16px; }
  .experiment-builder h1 { font-size:34px; }
  .experiment-editor-toolbar { display:grid; grid-template-columns:1fr 1fr; }
  .experiment-editor-toolbar>.experiment-primary { grid-column:auto; }
  .experiment-transfer { grid-column:1/-1; }
  .experiment-transfer summary { justify-content:center; }
  .experiment-editor-toolbar>button,.experiment-file-button { font-size:15px; padding-inline:10px; text-align:center; justify-content:center; }
  .experiment-editor-scene { height:280px; }
  .experiment-definition { display:block; }
  .experiment-definition fieldset { margin-bottom:24px; }
  .experiment-number-grid { gap:2px 12px; }
  .experiment-unit { position:static; display:inline; font-size:14px; }
  .experiment-saved li { flex-wrap:wrap; gap:8px; }
  .experiment-saved li span { flex-basis:100%; }
  .custom-experiment-header { padding-inline:16px; }
  .custom-learning-path { padding:12px 16px; }
  .custom-learning-path ol { gap:5px; }
  .custom-learning-path li { flex-direction:column; gap:5px; font-size:12px; }
  .custom-learning-sheet { width:calc(100% - 36px); padding:28px 0 40px; font-size:17px; }
  .custom-learning-sheet h1 { font-size:34px; }
  .custom-rule-text { font-size:19px; }
  .custom-rule-numbers { grid-template-columns:1fr; gap:12px; }
  .custom-rule-numbers span { display:flex; justify-content:space-between; }
  .custom-rule-numbers strong { font-size:18px; }
  .custom-stage-actions { display:grid; grid-template-columns:1fr; }
  .custom-game-layout { width:calc(100% - 24px); padding-top:16px; }
  .custom-game-heading h1 { font-size:25px; }
  .custom-game-heading p { font-size:15px; margin-bottom:12px; }
  .custom-game-scene { height:34svh; min-height:220px; max-height:340px; }
  .custom-game-readouts { grid-template-columns:1fr 1fr; gap:10px; padding:10px 0; }
  .custom-game-readouts span { font-size:14px; }
  .custom-game-readouts strong { font-size:17px; }
  .custom-drive-controls { grid-template-columns:1fr 1fr; gap:8px; padding-top:12px; }
  .custom-drive-controls button { min-height:52px; }
  .custom-drive-controls button[data-drive=accelerate] { grid-column:2; grid-row:1; }
  .custom-drive-controls button[data-drive=brake] { grid-column:2; grid-row:2; }
  .custom-game-actions { display:grid; grid-template-columns:1fr 1fr; }
  .custom-game-actions #custom-stop { grid-column:1/-1; }
  .custom-result-data>div { grid-template-columns:1fr; gap:4px; }
}
@media(max-width:560px) {
  .experiment-builder { padding-top:18px; }
  .experiment-intro h1 { font-size:32px; }
  .custom-experiment[data-custom-stage=game] .custom-experiment-header { min-height:44px; padding-block:0; }
  .custom-experiment[data-custom-stage=game] .custom-experiment-header a:first-child { font-size:19px; }
  .custom-experiment[data-custom-stage=game] .custom-experiment-header button { min-height:40px; padding:7px 12px; font-size:14px; }
  .custom-experiment[data-custom-stage=game] .custom-learning-path { padding:6px 16px; }
  .custom-experiment[data-custom-stage=game] .custom-learning-path ol { grid-template-columns:1fr 1fr 1.7fr 1fr; }
  .custom-experiment[data-custom-stage=game] .custom-learning-path li { flex-direction:row; font-size:0; gap:5px; }
  .custom-experiment[data-custom-stage=game] .custom-learning-path li span { width:22px; height:22px; font-size:12px; }
  .custom-experiment[data-custom-stage=game] .custom-learning-path li[aria-current] { font-size:14px; }
  .custom-game-layout { padding:10px 0 16px; }
  .custom-game-heading h1 { font-size:22px; line-height:1.15; margin:0 0 5px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
  .custom-game-heading p { font-size:14px; line-height:1.4; margin:0 0 9px; }
  .custom-game-scene { height:34svh; min-height:150px; max-height:320px; }
  .custom-game-readouts { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:8px 0; }
  .custom-game-readouts span { font-size:12px; line-height:1.25; }
  .custom-game-readouts strong { font-size:14px; line-height:1.3; }
  .custom-drive-controls { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:9px 0 0; }
  .custom-drive-controls button { min-height:46px; padding:5px 3px; font-size:14px; }
  .custom-drive-controls button[data-drive=accelerate],.custom-drive-controls button[data-drive=brake] { grid-column:auto; grid-row:auto; }
  .custom-game-message { font-size:14px; line-height:1.35; min-height:20px; margin:7px 0; }
  .custom-game-actions { grid-template-columns:1.1fr .8fr 1fr; gap:6px; }
  .custom-game-actions button { min-height:44px; padding:7px 5px; font-size:13px; }
  .custom-game-actions #custom-stop { grid-column:auto; }
  .custom-experiment[data-custom-stage=game] .custom-experiment-footer { display:none; }
}
@media(max-height:500px) and (min-width:561px) {
  .custom-experiment[data-custom-stage=game] .custom-learning-path { padding:6px 16px; }
  .custom-experiment[data-custom-stage=game] .custom-experiment-header { min-height:48px; padding-block:0; }
  .custom-experiment[data-custom-stage=game] .custom-learning-path li { flex-direction:row; }
  .custom-experiment[data-custom-stage=game] .custom-learning-path li span { width:22px; height:22px; }
  .custom-game-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; grid-template-rows:auto auto auto auto auto; gap:5px 14px; height:calc(100svh - 88px); padding:8px 0; }
  .custom-game-scene { grid-column:1; grid-row:1/6; width:100%; height:100%; min-height:0; max-height:none; }
  .custom-game-heading,.custom-game-readouts,.custom-drive-controls,.custom-game-message,.custom-game-actions { grid-column:2; margin:0; }
  .custom-game-heading h1 { font-size:18px; line-height:1.1; margin:0 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .custom-game-heading p { font-size:13px; line-height:1.3; margin:0; }
  .custom-game-readouts { grid-template-columns:1fr 1fr; gap:4px; padding:4px 0; }
  .custom-game-readouts span { font-size:12px; line-height:1.2; }
  .custom-game-readouts strong { font-size:14px; line-height:1.2; }
  .custom-drive-controls { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:4px 0; }
  .custom-drive-controls button { min-height:44px; padding:4px 2px; font-size:12px; }
  .custom-game-message { min-height:0; font-size:13px; line-height:1.3; }
  .custom-game-actions { display:grid; grid-template-columns:1.1fr .8fr 1fr; gap:4px; }
  .custom-game-actions button { min-height:44px; padding:5px 3px; font-size:12px; }
  .custom-experiment[data-custom-stage=game] .custom-experiment-footer { display:none; }
}