@font-face{font-family:Panton;src:url(fonts/Panton-Regular.otf)}@font-face{font-family:Panton;src:url(fonts/Panton-Bold.otf);font-weight:700}*{box-sizing:border-box}body{margin:0;background:#e9f1ef;color:#123b42;font-family:Panton,sans-serif}header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid #bed5ce}a{color:inherit;text-underline-offset:4px}header span{font-weight:700}main{max-width:1500px;min-height:calc(100svh - 72px);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:clamp(30px,5vw,90px);align-items:center;padding:24px 4vw}.stage{display:flex;align-items:center;justify-content:center;min-width:0}.stage:fullscreen{background:#e9f1ef;padding:4vh}canvas{display:block;width:min(100%,calc(100svh - 125px));height:auto;max-height:calc(100svh - 125px);aspect-ratio:1;object-fit:contain;background:white}h1{font-size:clamp(48px,5vw,76px);line-height:1;margin:0 0 20px;letter-spacing:-2px}.intro{font-size:26px;line-height:1.4;margin:0 0 16px}p{line-height:1.55}label{display:grid;gap:10px;margin:22px 0}button,select{font:inherit;min-height:44px;border:1px solid #5b8b87;background:transparent;color:inherit;padding:10px 15px;border-radius:6px;cursor:pointer}button:hover{background:#d2e8e0}button:disabled{opacity:.5}select{background:white;width:100%}.controls{display:flex;gap:9px;flex-wrap:wrap;margin:26px 0}.controls button:first-child{background:#175f58;color:#fff;min-width:94px}input[type=range]{width:100%;accent-color:#176a5c}.check{display:flex;align-items:center;gap:10px}.check input{width:18px;height:18px;accent-color:#176a5c}#status{display:block;font-size:14px;min-height:21px}.note{font-size:14px;color:#486a6a;margin-top:24px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c58b30;outline-offset:4px}@media(max-width:760px){header{padding:0 18px;font-size:14px}main{grid-template-columns:1fr;padding:22px 18px;gap:30px}canvas{width:100%;max-height:none}aside{max-width:540px;margin:auto;width:100%}h1{font-size:48px}.intro{font-size:22px}.controls{margin:20px 0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#exit-fullscreen{display:none;position:absolute;right:22px;top:22px;background:white;z-index:102}.stage:fullscreen #exit-fullscreen,.theatre #exit-fullscreen{display:block}.theatre .stage{position:fixed;inset:0;background:#e9f1ef;z-index:100;padding:5vh}.theatre .stage canvas,.stage:fullscreen canvas{width:min(90vw,90vh);height:min(90vw,90vh);max-height:90vh}