@charset "UTF-8";
:root{color-scheme:dark;--bg:#080f18;--panel:#101a27;--line:#253140;--text:#ecf1f7;--muted:#8c9aad;--yellow:#f4d46c;--blue:#58b8fc;--cyan:#83d9ef;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed;opacity:.5}button{color:inherit}button,summary,a,input{ -webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}input:focus-visible{outline:2px solid var(--cyan);outline-offset:6px;border-radius:10px}button:active{transform:translateY(1px)}[hidden]{display:none!important}svg{width:20px;height:20px;flex:none}button svg,.drag-hint svg,.note-title svg,summary svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.lab{width:min(1512px,100%);padding:0 40px;margin:auto}.masthead{height:72px;display:flex;align-items:center;gap:32px;border-bottom:1px solid #1c2735}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:750;letter-spacing:.09em}.brand svg{color:var(--yellow);height:29px;width:29px}.subject{font-size:14px;color:var(--muted);display:flex;gap:17px}.slash{color:#495466}.lesson-number{margin-left:auto;color:var(--muted);font-size:12px;letter-spacing:.1em}.lesson-number b{color:#d3dce8;font-size:14px;font-weight:500;margin-left:10px}.introduction{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0 24px}h1{font-size:clamp(25px,2.15vw,32px);line-height:1.4;letter-spacing:.06em;margin:0 0 6px;font-weight:700}.introduction p{font-size:14px;color:#9eaabd;margin:0;letter-spacing:.02em}.intro-tag{display:flex;align-items:center;gap:9px;padding:6px 10px;border:1px solid var(--line);border-radius:5px;font-size:12px;color:#a8b6c8;white-space:nowrap}.intro-tag span{width:6px;height:6px;border-radius:2px;border:1px solid #9aaabc}.experiment{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b1420;box-shadow:0 14px 70px #0002}.observation{display:grid;grid-template-columns:minmax(0,1fr) 265px;min-height:420px;height:clamp(420px,calc(100svh - 360px),650px)}.viewport{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 47%,#142539 0,#0b1420 65%)}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.scene-topline,.scene-bottomline{position:absolute;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}.scene-topline{top:21px}.scene-bottomline{bottom:20px}.live-status{display:flex;align-items:center;gap:8px;font-size:12px;color:#c1ccd9;letter-spacing:.03em}.live-status i{width:6px;height:6px;background:#82d6e7;border-radius:50%;box-shadow:0 0 9px #7edbe34d}.live-status.paused i{background:#8e9aab;box-shadow:none}.scene-caption{font-size:12px;color:#7f90a5}.drag-hint{font-size:12px;color:#8192a7;display:flex;align-items:center;gap:7px}.drag-hint svg{width:16px;height:16px;stroke:#74869a}.orbit-button{pointer-events:auto;display:flex;gap:7px;align-items:center;background:#142032c9;border:1px solid #314257;border-radius:6px;padding:6px 9px;color:#acbccc;font-size:12px;min-height:34px}.orbit-button svg{height:16px;width:16px}.orbit-button:hover{background:#1c2c3f;border-color:#52708e}.orbit-button[aria-pressed="false"]{color:#8793a4;border-color:#2c3746}.scene-label,.product-label{position:absolute;left:0;top:0;display:flex;gap:9px;padding:9px 12px;z-index:2;border:1px solid #344356;border-radius:7px;background:#101b2bef;pointer-events:none;will-change:transform;white-space:nowrap;box-shadow:0 5px 15px #0002}.scene-label strong{font-size:14px;font-weight:650;letter-spacing:.025em}.scene-label small{display:block;font-size:12px;color:#94a5ba;margin-top:1px}.label-dot{width:7px;height:7px;display:inline-block;border-radius:50%;flex:none;margin-top:7px}.yellow{background:var(--yellow)}.blue{background:var(--blue)}.enzyme-label{border-color:#315d80}.enzyme-label strong{color:#97d2ff}.label-stem{position:absolute;left:20px;top:100%;height:27px;width:1px;background:linear-gradient(#52647a,#52647a44)}.label-stem:after{content:"";position:absolute;width:4px;height:4px;left:-1.5px;bottom:0;background:#8292a7;border-radius:50%}.enzyme-label .label-stem{left:50%;background:linear-gradient(#3e7ca7,#3e7ca733)}.bond-label{position:absolute;top:0;left:0;font-size:13px;letter-spacing:.03em;color:#dfc879;white-space:nowrap;pointer-events:none;padding:5px 9px;border-radius:4px;background:#141c26db;border:1px solid #6d5e303d;will-change:transform}.bond-label span{position:absolute;bottom:100%;left:50%;height:20px;width:1px;background:#75633588}.product-label{gap:7px;align-items:center;padding:6px 9px;border-color:#71623b;background:#211f1be8;opacity:0;transition:opacity .25s}.product-label .label-dot{margin:0;width:6px;height:6px}.product-label strong{font-size:13px;color:#f7dc8c;font-weight:500}.product-label small{font-size:12px;color:#c0b38f}.product-label i{position:absolute;bottom:100%;left:50%;height:19px;width:1px;background:#8a775188}.reaction-panel{border-left:1px solid var(--line);background:#101a27;padding:25px 24px 20px;display:flex;flex-direction:column;min-width:0;overflow-y:auto}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:26px}.eyebrow{font-size:13px;letter-spacing:.05em;color:#a6b4c6}.step-count{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;color:#6f8198}.steps{list-style:none;padding:0;margin:0}.step{position:relative;display:flex;gap:13px;padding-bottom:25px;opacity:.46;transition:opacity .3s}.step:last-child{padding-bottom:0}.step:not(:last-child):before{content:"";position:absolute;left:14px;top:34px;bottom:6px;width:1px;background:#3b495c}.step-number{display:flex;justify-content:center;align-items:center;width:30px;height:30px;border:1px solid #405065;flex:none;font-size:12px;color:#a4b5c7;border-radius:50%;font-family:ui-monospace,monospace;transition:all .3s}.step h2{font-size:15px;font-weight:550;margin:3px 0 6px;letter-spacing:.02em}.step p{font-size:14px;color:#a1b0c2;margin:0;line-height:1.85}.step:not(.is-active) p{display:none}.step.is-active{opacity:1}.step.is-active .step-number{color:#0f1926;background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 18px #f4d46c15}.step.is-active h2{color:#f5db8c}.observation-note{border-top:1px solid #263345;padding-top:18px;margin-top:auto}.note-title{display:flex;align-items:center;gap:8px;font-size:12px;color:#b3c4d8}.note-title svg{height:17px;width:17px;color:#8fb7d6}.observation-note p{margin:8px 0 0;font-size:14px;line-height:1.9;color:#92a5bc;min-height:68px}.cut-counter{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;color:#91a1b5}.cut-counter b{font-family:ui-monospace,monospace;font-size:24px;font-weight:500;color:var(--yellow)}.cut-counter div>span{margin-left:2px}.controls{display:flex;align-items:center;gap:28px;padding:18px 24px;background:#111b28;border-top:1px solid var(--line)}.playback-buttons{display:flex;align-items:center;gap:13px;flex-shrink:0}.play-button{border:0;border-radius:8px;padding:0 15px;height:44px;display:flex;align-items:center;justify-content:center;gap:8px;min-width:117px;background:var(--yellow);color:#182132;font-size:14px;font-weight:650;box-shadow:0 3px 9px #0002}.play-button:hover{background:#ffdf7b}.play-button svg{fill:currentColor;stroke:none;width:18px;height:18px}.reset-button{display:grid;place-items:center;width:40px;height:42px;border:1px solid transparent;border-radius:7px;background:transparent;color:#9dadc2}.reset-button:hover{color:#e0e8f5;background:#1e2b3d;border-color:#344356}.reset-button svg{width:21px;height:21px}.timeline{flex:1;min-width:90px}.timeline-label{display:flex;gap:15px;justify-content:space-between;align-items:center;font-size:12px;color:#8e9eb4;margin-bottom:10px}.time{white-space:nowrap;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#a9b8cb;font-variant-numeric:tabular-nums}.time-separator{color:#596b83;margin:0 7px}progress{appearance:none;display:block;width:100%;height:4px;overflow:hidden;border:0;border-radius:9px;background:#2a384b}progress::-webkit-progress-bar{background:#2a384b}progress::-webkit-progress-value{background:var(--yellow);border-radius:9px}progress::-moz-progress-bar{background:var(--yellow);border-radius:9px}.speed-control{width:228px;flex-shrink:0;border-left:1px solid #2a3749;padding-left:28px}.speed-heading{display:flex;align-items:center;justify-content:space-between;line-height:1.2;margin-bottom:9px}.speed-heading label{font-size:13px;color:#a8b6c9}.speed-heading output{font-size:14px;color:#dde6f2;font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}.speed-heading output span{font-size:12px;margin-left:5px;font-family:inherit;color:#a8b6c9}.speed-track{display:flex;align-items:center;gap:10px}.speed-track>span{font-size:12px;color:#7e90a8;font-family:ui-monospace,monospace}input[type="range"]{appearance:none;display:block;min-width:0;width:100%;height:4px;border-radius:10px;margin:6px 0;background:linear-gradient(to right,var(--yellow) 42.857%,#34445a 42.857%);cursor:pointer}input[type="range"]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:var(--yellow);border-radius:50%;box-shadow:0 0 0 4px #f4d46c13}input[type="range"]::-moz-range-thumb{width:12px;height:12px;background:var(--yellow);border:0;border-radius:50%;box-shadow:0 0 0 4px #f4d46c13}.legend{display:flex;align-items:center;gap:0;padding:21px 0 19px;border-bottom:1px solid #1e2938}.legend>div{display:flex;align-items:center;gap:14px;flex:1;padding-left:27px}.legend>div+div{border-left:1px solid #263142}.legend>div:first-child{padding-left:10px}.legend strong{font-size:13px;font-weight:500;letter-spacing:.025em;display:inline-block;margin-right:12px}.legend small{font-size:12px;color:#8799ae;display:inline-block}.legend-symbol{flex:none;width:15px;height:15px;border-radius:50%;box-shadow:inset -3px -3px 5px #0005,inset 2px 2px 4px #ffffff60}.legend-symbol.pair{position:relative;width:34px;height:15px;background:transparent;box-shadow:none}.pair:before{content:"";position:absolute;width:18px;height:3px;background:#a78b37;left:8px;top:6px}.pair i{position:absolute;width:15px;height:15px;top:0;border-radius:50%;background:var(--yellow);box-shadow:inset -3px -3px 5px #0005,inset 2px 2px 4px #ffffff60}.pair i:last-child{right:0}footer{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:14px 0 20px;font-size:12px;color:#697e95}details{max-width:820px}summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;width:max-content;color:#8294ab}summary::-webkit-details-marker{display:none}summary svg{width:13px;height:13px}details[open] summary svg{transform:rotate(180deg)}details p{font-size:13px;line-height:1.9;color:#9babc0;margin:12px 0 0}details a{color:#a5cce9;display:block;margin-top:6px;text-underline-offset:4px}.footer-note{white-space:nowrap}.loading,.error-message,.no-script{position:absolute;inset:0;z-index:10;background:#0c1623;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.loading p{font-size:14px;color:#a7bacf}.loading-ring{width:32px;height:32px;border:2px solid #29384d;border-top-color:var(--yellow);border-radius:50%;animation:spin 1s linear infinite}.error-message strong{font-size:18px}.error-message p{font-size:14px;color:#aab9ca;max-width:330px}.error-message button{border:1px solid #647b98;border-radius:7px;background:#203047;padding:8px 15px;font-size:14px}.no-script{font-size:15px}body.is-error .scene-label,body.is-error .bond-label{display:none}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){.observation{grid-template-columns:minmax(0,1fr) 290px}.reaction-panel{padding:29px}.step{padding-bottom:34px}.step h2{font-size:16px}.step p,.observation-note p{font-size:14px}}
@media(max-height:850px) and (min-width:1001px){.lab{padding:0 30px}.masthead{height:62px}.introduction{padding:18px 0}.observation{height:clamp(396px,calc(100svh - 322px),540px);min-height:396px}.reaction-panel{padding:20px}.panel-heading{margin-bottom:20px}.step{padding-bottom:20px}.step p{line-height:1.7}.observation-note{padding-top:13px;margin-top:17px}.observation-note p{min-height:0;line-height:1.75}.cut-counter{margin-top:9px}.controls{padding:16px 20px}.legend{padding:16px 0}footer{padding:11px 0 15px}}
@media(max-width:1100px){.lab{padding:0 24px}.observation{grid-template-columns:minmax(0,1fr) 235px}.reaction-panel{padding:20px}.controls{gap:18px;padding:17px 18px}.speed-control{width:200px;padding-left:18px}.legend small{display:block}.legend strong{margin:0 0 1px}.scene-topline,.scene-bottomline{left:18px;right:18px}.scene-caption{font-size:12px}.timeline-label>span:first-child{display:none}.timeline-label{justify-content:flex-end}}
@media(max-width:850px){.lab{padding:0 20px}.masthead{height:64px;gap:24px}.introduction{padding:22px 0}.intro-tag{display:none}.observation{height:auto;min-height:0;grid-template-columns:1fr}.viewport{height:clamp(385px,55svh,530px)}.reaction-panel{border-left:0;border-top:1px solid var(--line);padding:20px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px}.panel-heading{grid-column:1/-1;margin:0}.steps{display:flex;grid-column:1/-1;gap:22px}.step{flex:1;padding:0;gap:9px}.step:not(:last-child):before{display:none}.step h2{font-size:14px;margin-top:5px}.step p{font-size:14px}.step-number{height:27px;width:27px}.observation-note{margin:0;padding-top:14px;grid-column:1/2}.note-title{display:none}.observation-note p{min-height:0;margin:0;font-size:12px}.cut-counter{margin:0;padding-left:18px;border-top:1px solid #263345;gap:16px;font-size:12px}.cut-counter b{font-size:20px}.controls{gap:18px}.speed-control{width:190px}.legend>div{padding-left:20px;gap:12px}.legend>div:first-child{padding-left:4px}.legend small{font-size:12px}}
@media(max-width:580px){.lab{padding:0 14px}.masthead{height:60px;gap:20px}.brand{font-size:16px;gap:9px}.brand svg{width:26px;height:26px}.subject{gap:10px;font-size:12px}.lesson-number{display:none}.introduction{padding:20px 2px}h1{font-size:26px}.introduction p{font-size:14px;line-height:1.8;margin-top:7px}.experiment{border-radius:11px}.viewport{height:390px}.scene-topline{top:17px;left:14px;right:14px}.scene-bottomline{left:13px;right:13px;bottom:15px}.scene-caption{font-size:12px}.drag-hint{font-size:12px;gap:5px}.drag-hint svg{width:13px;height:13px}.orbit-button{font-size:12px;padding:5px 7px}.scene-label{padding:6px 8px;gap:6px}.scene-label strong{font-size:14px}.scene-label small{font-size:12px}.scene-label .label-dot{width:5px;height:5px;margin-top:6px}.bond-label{font-size:12px;padding:3px 6px}.product-label{gap:5px;padding:4px 7px}.product-label strong{font-size:13px}.product-label small{font-size:12px}.reaction-panel{padding:18px 15px;gap:14px}.eyebrow{font-size:12px}.steps{gap:13px}.step{display:block}.step-number{height:24px;width:24px;font-size:12px;margin-bottom:7px}.step h2{font-size:14px;margin-bottom:4px}.step p{font-size:13px;line-height:1.8}.observation-note p{font-size:12px;line-height:1.8}.cut-counter{display:block;text-align:right;padding:13px 0 0 12px;font-size:12px;white-space:nowrap}.cut-counter b{font-size:22px}.controls{display:grid;grid-template-columns:1fr auto;padding:15px;gap:18px 15px}.playback-buttons{gap:9px}.play-button{min-width:114px;height:43px;padding:0 13px;font-size:13px}.reset-button{width:34px}.timeline{grid-row:2;grid-column:1/-1}.timeline-label>span:first-child{display:inline;font-size:12px}.timeline-label{justify-content:space-between;margin-bottom:8px}.speed-control{width:157px;padding-left:16px}.speed-heading label{font-size:12px}.speed-heading output{font-size:13px}.speed-track{gap:8px}.speed-track>span{font-size:12px}.legend{padding:18px 0;gap:10px}.legend>div{padding:0!important;align-items:flex-start;gap:8px;border:0!important}.legend strong{font-size:13px;line-height:1.7}.legend small{font-size:12px;line-height:1.8}.legend-symbol{width:11px;height:11px;margin-top:4px}.legend-symbol.pair{width:22px;height:11px}.pair i{height:11px;width:11px}.pair:before{width:12px;left:5px;height:2px;top:5px}.footer-note{font-size:12px}summary{font-size:12px}footer{gap:12px;padding-top:13px}.time{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.loading-ring{animation:none}}

.label-below .label-stem{top:auto;bottom:100%}.label-below .label-stem:after{bottom:auto;top:0}
@media(max-width:400px){.controls{grid-template-columns:1fr}.speed-control{grid-column:1/-1;width:100%;border-left:0;padding:0}.timeline{grid-row:3}.scene-caption{max-width:140px;text-align:right}.subject{gap:6px}.lab{padding:0 10px}}