@font-face{font-family:Raleway;src:url('Raleway-Medium.ttf')}@font-face{font-family:Raleway;src:url('Raleway-Bold.ttf');font-weight:700}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:Raleway,Arial,sans-serif}body{display:grid;place-items:center}#container{position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;overflow:hidden;background:#000}#canvas{display:block;width:100%;height:100%;touch-action:none;transition:opacity .3s ease}[hidden]{display:none!important}#experiment{z-index:1;transition:opacity .3s ease}#start-screen{z-index:2}#start-screen,#experiment{position:absolute;inset:0;pointer-events:none}#start-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;background:#000;pointer-events:auto}#start-screen h1{font-weight:700;font-size:clamp(32px,5vw,64px);letter-spacing:.12em;margin:0;text-align:center}#start{display:flex;flex-direction:column;align-items:center;gap:14px;width:clamp(160px,22vw,280px);padding:0;border:0;background:none;color:#fff;cursor:pointer;transition:transform .25s ease}#start:hover,#start:focus-visible{transform:scale(1.08)}#start img{display:block;width:100%;height:auto;filter:invert(1) drop-shadow(0 0 12px #333)}#start span{display:block;font-weight:700;font-size:clamp(22px,2.6vw,34px);line-height:1.1}#lesson-copy{position:absolute;left:6%;top:14%;max-width:34%;text-shadow:0 2px 12px #000;pointer-events:none}#lesson-copy h2,#learning-modal h2{font-size:clamp(24px,3vw,40px);line-height:1.1;margin:0 0 12px;font-weight:700}#lesson-copy p,#learning-modal p{font-size:clamp(15px,1.55vw,21px);line-height:1.4;margin:0;color:#ddd}.brain-stem,.cerebellum{fill:#555;stroke:#fff;stroke-width:4;stroke-linejoin:round}#finish{position:absolute;left:5%;bottom:10%;pointer-events:auto;animation:appear .45s ease}#next,#learning-continue{font:700 clamp(16px,1.5vw,21px) Raleway;color:white;border:2px solid white;border-radius:4px;background:#000;padding:12px 19px;cursor:pointer}#next:hover,#next:focus-visible,#learning-continue:hover,#learning-continue:focus-visible{color:#000;background:#fff}#learning-modal{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.42);pointer-events:auto;z-index:3}.modal-card{width:min(620px,100%);padding:clamp(24px,4vw,48px);background:#000;border:2px solid #fff;border-radius:4px;box-shadow:0 12px 40px #000}#learning-modal p{margin-bottom:28px}#learning-continue{min-width:120px}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:700px){#container{width:100vw;height:100dvh;aspect-ratio:auto}#canvas{position:absolute;top:50%;left:0;width:100%;height:auto;aspect-ratio:16/9;transform:translateY(-50%)}#start-screen h1{font-size:clamp(25px,8vw,42px)}#lesson-copy{left:6%;right:6%;top:7%;max-width:88%}#lesson-copy h2,#learning-modal h2{font-size:clamp(22px,6vw,30px)}#lesson-copy p,#learning-modal p{font-size:clamp(14px,3.8vw,18px)}#finish{bottom:8%}#learning-modal{background:rgba(0,0,0,.18)}.modal-card{max-height:calc(100dvh - 48px);overflow:auto;background:rgba(0,0,0,.82)}}