html,body{margin:0;overflow:hidden;touch-action:none;font-family:sans-serif;background:#000;position:fixed;width:100%;height:100%}body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.welcome-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1000}.welcome-content{background-color:#222;padding:2rem;border-radius:1rem;text-align:center;max-width:90%;width:400px;color:#fff}.welcome-content img{padding:1rem 2rem}.welcome-content p{color:#aaa;margin:1rem 0;line-height:1.5;font-variant:all-small-caps;letter-spacing:3px}#startAppBtn{position:static;display:inline-block;background:gold;color:#333;font-weight:700;margin-top:1.5rem;padding:1rem 2rem;border-radius:2rem;border:none;cursor:pointer;font-size:1.2rem;transition:background-color .3s}#startAppBtn:hover{background:#ffec8a}#drawCanvas{position:absolute;top:0;left:0;z-index:1;pointer-events:none}button{padding:.7em 1.3em;border-radius:1em;font-size:1.1em;background:#333;color:#fff;border:none;cursor:pointer;opacity:.92;user-select:none;min-width:44px;min-height:44px;display:flex;align-items:center}#modeToggleButtons{display:flex;align-items:center;position:absolute;z-index:2;top:10px;left:10px}#modeToggleButtons button{height:54px}#drawToggleBtn{border-radius:1em 0 0 1em}#viewToggleBtn{border-radius:0 1em 1em 0}.active-mode{background-color:#4caf50;color:#fff;box-shadow:0 0 8px #4caf5099}.active-mode .toggle-icon{filter:brightness(1.2)}#modeToggleButtons button{transition:all .3s ease}#truncateToggleBtn{position:absolute;z-index:2;bottom:10px;right:10px;transition:all .3s ease}#truncateToggleBtn.active{background-color:#4caf50;color:#fff;box-shadow:0 0 8px #4caf5099}#importSvgBtn{position:absolute;z-index:2;bottom:10px;left:10px}.renderer-indicator{position:absolute;top:10px;right:10px;z-index:100;background-color:#0009;color:#fff;padding:6px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);display:none;font-family:monospace}.renderer-indicator.webgpu{border-color:#4caf5066;color:#4caf50}.renderer-indicator.webgl{border-color:#2196f366;color:#2196f3}body.app-active .renderer-indicator{display:block}#drawToggleBtn,#viewToggleBtn,#truncateToggleBtn,#importSvgBtn,#checkerboard{display:none}body.app-active #drawToggleBtn,body.app-active #viewToggleBtn,body.app-active #truncateToggleBtn,body.app-active #importSvgBtn{display:block}#debugControls{position:absolute;z-index:2;left:10px;top:70px;display:flex;flex-direction:column;gap:6px}#debugControls button{font-size:.9em;padding:.4em .9em}#checkerboard{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;background-size:30px 30px;background:#eee2 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".25" ><rect x="8" width="8" height="8" /><rect y="8" width="8" height="8" /></svg>')}#drawCanvas{width:100vw;height:100vh}@supports (padding: max(0px)){body.app-active #modeToggleButtons{top:max(10px,env(safe-area-inset-top,10px));left:max(10px,env(safe-area-inset-left,10px))}body.app-active #importSvgBtn{bottom:max(10px,env(safe-area-inset-bottom,10px));left:max(10px,env(safe-area-inset-left,10px))}body.app-active #truncateToggleBtn{bottom:max(10px,env(safe-area-inset-bottom,10px));right:max(10px,env(safe-area-inset-right,10px))}}@media screen and (orientation: landscape) and (max-height: 500px){.welcome-content{padding:1rem;max-width:95%}.welcome-content img{padding:.5rem 1rem;max-height:60px}#startAppBtn{padding:.5rem 1.5rem;font-size:1rem;margin-top:.5rem}}#finishDrawingBtn{position:absolute;z-index:2;top:10px;left:50%;transform:translate(-50%);background:#4caf50;color:#fff;font-weight:600;display:none;gap:6px;align-items:center;justify-content:center;padding:.6em 1em;transition:all .3s ease}#finishDrawingBtn:hover{background:#45a049}#finishDrawingBtn:disabled{opacity:.5;cursor:not-allowed;background:#666}#finishDrawingBtn.visible{display:flex}#finishDrawingBtn .finish-icon{width:22px;height:22px}#countdownSeconds{font-size:1.1em;font-weight:700;min-width:1em;text-align:center}#finishDrawingBtn.counting{animation:pulse-btn 1s ease-in-out infinite}@keyframes pulse-btn{0%,to{box-shadow:0 0 #4caf5066}50%{box-shadow:0 0 0 8px #4caf5000}}