*{box-sizing:border-box}html,body{margin:0;height:100%;background:#081722;color:#e7f4f0;font-family:system-ui,sans-serif}body{display:grid;grid-template-rows:74px 50px minmax(0,1fr) auto auto 28px}header{padding:12px 24px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #345260}header>div{margin-right:auto}small{font-size:10px;letter-spacing:2px;color:#9cb9c3}h1{font:600 clamp(17px,2.5vw,25px) Georgia;margin:6px 0}button,select{font:600 13px system-ui;color:#e7f4f0;border:1px solid #4e7480;border-radius:8px;background:#193742;padding:10px 15px;cursor:pointer;touch-action:none}button:hover,button:active,button.active{background:#3a786e;border-color:#b2e8c5}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #f6c16a}#toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 24px;background:#102a35;gap:12px;font-size:13px}#toolbar>div{display:flex;gap:12px;align-items:center}#toolbar label{font-size:11px;color:#a6c1c7}select{padding:6px;font-size:11px}main{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;background:radial-gradient(ellipse at center,#173342,#07121c)}canvas{display:block;max-width:100%;max-height:100%;width:auto;height:100%;aspect-ratio:900/650;object-fit:contain;touch-action:none;outline:none}#intro,#end{position:absolute;width:min(490px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;left:50%;top:50%;transform:translate(-50%,-50%);background:#0a2230f5;border:1px solid #668b91;border-radius:18px;padding:28px;box-shadow:0 20px 100px #0009;text-align:left}#intro h2,#end h2{font:36px Georgia;margin:15px 0}#intro p,#end p{font-size:14px;line-height:1.6;color:#c6dbdd}.credit{font-size:10px!important;color:#87a6b1!important}.credit:empty{display:none}#custom{display:flex;gap:16px;justify-content:center;padding:0 20px;background:#0d2330}#custom:empty{display:none}#custom label{display:grid;grid-template-columns:90px minmax(90px,210px) 40px;align-items:center;gap:8px;font-size:12px;padding:7px}input[type=range]{width:100%;accent-color:#a5ddca}nav{display:flex;justify-content:center;gap:8px;background:#102a35;padding:9px}nav:empty{display:none}nav button{min-width:70px;user-select:none}footer{display:flex;justify-content:space-between;gap:15px;padding:6px 22px;font-size:9px;letter-spacing:1px;color:#87aab7}[hidden]{display:none!important}@media(max-width:600px){body{grid-template-rows:76px 74px minmax(0,1fr) auto auto 30px}header{padding:8px 10px;gap:5px}header small{font-size:8px;letter-spacing:1px}header button{font-size:11px;padding:9px 8px}header h1{max-width:210px}#toolbar{padding:7px 10px;align-items:start;flex-direction:column;gap:6px;font-size:12px}#toolbar>div{width:100%;justify-content:space-between}#toolbar button{font-size:11px;padding:6px 10px}#intro,#end{padding:20px}#intro h2,#end h2{font-size:27px;margin:10px 0}#intro p,#end p{font-size:12px;line-height:1.45}#custom{padding:0 8px;gap:0;flex-direction:column}#custom label{grid-template-columns:80px 1fr 35px;padding:4px;font-size:11px}nav{gap:4px;padding:7px 5px}nav button{min-width:0;flex:1;padding:12px 4px;font-size:11px}footer{font-size:8px;letter-spacing:0;padding:5px 10px}canvas{width:100%;height:auto;max-height:100%}}