*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none}body{font:16px system-ui;color:#f5efff;background:radial-gradient(ellipse at 50% 40%,#3b3052,#191625);display:grid;grid-template-rows:76px 1fr 76px}header,footer{display:flex;align-items:center;justify-content:space-between;padding:12px max(18px,env(safe-area-inset-left));gap:12px}header b{font-size:23px}button,header a{border:1px solid #ffffff26;border-radius:14px;background:#ffffff0d;color:inherit;font:inherit;padding:12px;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}button:hover,header a:hover{background:#ffffff20;transform:translateY(-2px)}button:disabled{opacity:.3;cursor:default}main{min-height:0}canvas{width:100%;height:100%;display:block}footer{font-size:13px}#notice{text-align:center;max-width:200px;color:#d6c7e8}dialog{border:1px solid #77698b;border-radius:24px;background:#30273f;color:white;padding:24px;max-width:340px}dialog::backdrop{background:#100a1cbb}dialog button{display:block;width:100%;margin-top:12px}dialog p{line-height:1.5;color:#d6c7e8}@media(max-height:500px){body{grid-template-rows:52px 1fr 52px}header,footer{padding:5px 18px}button{padding:8px}}