*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#160f26;color:#fff6df;font-family:system-ui,sans-serif}main{height:100dvh;max-width:850px;margin:auto;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));display:grid;grid-template-rows:60px minmax(0,1fr) 106px;gap:6px}header{display:flex;align-items:center;justify-content:space-between}h1{font:23px Georgia,serif;margin:0}p{font-size:12px;margin:4px 0}#clock{font-size:24px;color:#e5f993}#stage{position:relative;min-height:0;overflow:hidden;border:2px solid #635076;border-radius:18px;touch-action:none;background:#20152f}canvas{display:block;width:100%;height:100%;touch-action:none}#message{position:absolute;top:8px;left:8px;right:8px;padding:8px;background:#160f26dd;border-radius:10px;text-align:center;pointer-events:none}footer{text-align:center;display:grid;gap:3px}#marks{font-size:13px;color:#e5f993}button{min-width:85px;min-height:44px;border:1px solid #b79eae;background:#3d294c;color:#fff6df;border-radius:12px;font:inherit;touch-action:manipulation}button:focus-visible,#stage:focus-visible{outline:3px solid #e5f993;outline-offset:-3px}#veil{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#160f26e8}#veil[hidden]{display:none}@media(orientation:landscape) and (max-height:500px){main{grid-template-columns:180px minmax(0,1fr);grid-template-rows:90px 1fr}header{grid-column:1}h1{font-size:19px}#stage{grid-column:2;grid-row:1/3}footer{grid-column:1;align-content:center}}
.production{background:radial-gradient(ellipse at top,#453251,#160f26 70%)}.production main{grid-template-rows:64px minmax(0,1fr) 174px}.production header{gap:8px}.production header div{flex:1;min-width:0}.production h1{font-size:21px}.production header p{font-size:11px}.back{display:grid;place-items:center;flex:0 0 44px;height:44px;border:1px solid #b79eae;border-radius:50%;color:#fff6df;text-decoration:none;font-size:24px}.production #stage{box-shadow:inset 0 0 25px #b19ab522;border-color:#8d709f}.controls{display:flex;justify-content:center;gap:6px}.production button{min-width:80px;padding:5px 10px}.production footer{align-content:center}#save-status{font-size:10px;line-height:14px;min-height:14px}#chapter{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.08em;color:#e5f993;pointer-events:none}dialog{width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:#2d203c;color:#fff6df;border:2px solid #b79eae;border-radius:20px;padding:18px;text-align:center}dialog::backdrop{background:#100a1ccc}dialog h2{font:25px Georgia,serif;margin:0 0 10px}dialog p{line-height:1.5;margin:8px 0}dialog button{margin:3px}#mural-preview{height:150px;width:100%;background:radial-gradient(ellipse,#55406a,#23182f);border-radius:12px;fill:#e5ff80}.reduced #stage{box-shadow:none}@media(max-width:350px){.production h1{font-size:18px}.production header p{font-size:10px}.production #clock{font-size:20px}.production button{min-width:76px;font-size:14px}}@media(orientation:landscape) and (max-height:500px){.production main{grid-template-columns:215px minmax(0,1fr);grid-template-rows:80px minmax(0,1fr)}.production h1{font-size:17px}.production .controls{gap:4px}.production button{min-width:60px;font-size:12px;padding:4px 6px}.production footer{gap:3px}.production #clock{font-size:18px}#mural-preview{height:90px}dialog h2{font-size:21px}}