*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none}body{display:grid;grid-template-rows:auto 1fr auto;background:#172842;color:#fff;font:700 15px system-ui,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}header,footer{z-index:2;background:#172842e8;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}header>div{flex:1}.back{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:50%;background:#fff3cf;color:#28304a;text-decoration:none;font-size:24px}h1{font-size:clamp(18px,5vw,25px);margin:0}small{color:#ffc9a8}#clock{font-size:22px}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}button{min-width:72px;min-height:44px;border:0;border-radius:14px;background:#fff3cf;color:#28304a;font-weight:900;padding:7px 10px}footer p{margin:0;max-width:65ch}.storage{display:flex;align-items:center;gap:6px;font-size:11px}#stage{position:relative;min-height:0;outline:none;background:linear-gradient(#f9ad8e,#8bd6dc 65%,#dbe6c5);overflow:hidden}canvas{display:block;width:100%;height:100%}#chapter{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#17304cdd;padding:6px 12px;border-radius:20px;white-space:nowrap;pointer-events:none}#veil{position:absolute;inset:0;background:#172842d9;display:grid;place-content:center;text-align:center;z-index:3}#veil[hidden],[hidden]{display:none!important}dialog{width:min(92vw,460px);max-height:90vh;overflow:auto;border:0;border-radius:24px;background:#fff8e7;color:#263149;text-align:center;padding:20px;box-shadow:0 20px 70px #17284288}dialog::backdrop{background:#172842aa}dialog button{margin:5px}#ribbon-preview{width:100%;height:150px;background:linear-gradient(#f9ad8e,#8bd6dc);border-radius:18px}@media(max-width:500px){footer{font-size:11px;flex-direction:column;padding:5px 8px}.controls{width:100%}.controls button{flex:1 1 28%;min-width:78px}.storage{min-height:18px}button{min-height:44px}}@media(orientation:landscape){header,footer{padding:3px 8px}h1{font-size:17px}footer{display:grid;grid-template-columns:minmax(150px,1fr) auto}.storage{grid-column:1/-1;min-height:0}.controls{flex-wrap:nowrap}.controls button{min-width:66px}.back{min-width:44px;min-height:44px}}