*{box-sizing:border-box}body{color:#f3e8d2;background:#101a20;margin:0;font:14px Segoe UI,system-ui}canvas{width:100vw;height:100vh;display:block}header{text-shadow:0 2px 6px #000;pointer-events:none;max-width:470px;position:fixed;top:25px;left:25px}small{letter-spacing:2px;font-size:10px}h1{margin:8px 0;font:32px Georgia}nav{flex-wrap:wrap;gap:6px;max-width:550px;display:flex;position:fixed;top:24px;right:24px}button,a{color:#fff;cursor:pointer;font:inherit;background:#1e3237e8;border:1px solid #72928d;border-radius:5px;padding:10px 12px;text-decoration:none}button:hover,a:hover{background:#4c6258}#hint{background:#101e24de;border-radius:5px;padding:12px 22px;position:fixed;bottom:100px;left:50%;transform:translate(-50%)}#hint:empty{display:none}footer{color:#d0dad4;text-shadow:0 2px 5px #000;font-size:11px;position:fixed;bottom:18px;left:24px}aside{background:#132026d9;max-width:360px;padding:10px;position:fixed;bottom:20px;right:20px}pre{white-space:pre-wrap;max-height:250px;font-size:11px;overflow:auto}section{background:#14242bf5;border:1px solid #d3ba83;border-radius:8px;width:min(750px,92vw);max-height:82vh;padding:24px;position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}section button{margin:8px}.photos{gap:15px;display:flex}.photos figure{flex:1;margin:0}.photos svg{background:#d1c6a1;width:100%}.photos figcaption{margin:8px 0;font-size:12px}#notice{color:#e6bf75}[hidden]{display:none!important}@media (width<=900px){nav{inset:auto 10px 90px}footer{max-width:70%;font-size:9px}header{top:15px;left:15px}aside{max-width:230px}#hint{bottom:155px}}.alignment{max-width:500px;margin:auto}.alignment svg{border:1px solid #bda880;width:100%}section label{margin:12px;display:block}input[type=range]{width:70%;margin-left:15px}#experiment{color:#c9d6bd;font-size:12px;line-height:1.5}