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,#browseTexturesBtn,#checkerboard{display:none}body.app-active #drawToggleBtn,body.app-active #viewToggleBtn,body.app-active #truncateToggleBtn,body.app-active #importSvgBtn,body.app-active #browseTexturesBtn{display:block}#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}}#fullscreenBtn{background:#444}#fullscreenBtn:hover{background:#666}:fullscreen #modeToggleButtons,:fullscreen #finishDrawingBtn,:fullscreen #truncateToggleBtn,:fullscreen #importSvgBtn,:fullscreen #browseTexturesBtn,:fullscreen #rendererIndicator,:fullscreen #checkerboard{display:none!important}:-webkit-full-screen #modeToggleButtons,:-webkit-full-screen #finishDrawingBtn,:-webkit-full-screen #truncateToggleBtn,:-webkit-full-screen #importSvgBtn,:-webkit-full-screen #browseTexturesBtn,:-webkit-full-screen #rendererIndicator,:-webkit-full-screen #checkerboard{display:none!important}.texture-browser-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:2000;backdrop-filter:blur(4px)}.texture-browser-modal{background:#1a1a1a;border-radius:12px;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;border:1px solid rgba(255,255,255,.1)}.texture-browser-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1)}.texture-browser-header h2{margin:0;color:#fff;font-size:18px;font-weight:600}.texture-browser-close{background:transparent;border:none;color:#888;font-size:28px;cursor:pointer;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s;min-width:36px;min-height:36px}.texture-browser-close:hover{background:#ffffff1a;color:#fff}.texture-browser-content{padding:20px;overflow-y:auto;flex:1}.texture-browser-loading,.texture-browser-error,.texture-browser-empty{text-align:center;padding:40px;color:#888}.texture-browser-error{color:#ff6b6b}.texture-browser-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.texture-card{background:#252525;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;border:2px solid transparent}.texture-card:hover{border-color:#4caf50;transform:translateY(-2px);box-shadow:0 8px 20px #0000004d}.texture-card:focus{outline:none;border-color:#4caf50}.texture-card-thumbnail{aspect-ratio:16 / 9;background:#333;display:flex;align-items:center;justify-content:center;overflow:hidden}.texture-card-thumbnail img{width:100%;height:100%;object-fit:cover}.texture-card-placeholder{color:#666;font-size:14px;text-align:center}.texture-card-info{padding:12px}.texture-card-name{margin:0 0 8px;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.texture-card-owner{display:flex;align-items:center;gap:8px;margin-bottom:8px}.texture-card-owner .owner-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.texture-card-owner .owner-avatar-placeholder{width:20px;height:20px;border-radius:50%;background:#444;flex-shrink:0}.texture-card-owner .owner-name{color:#aaa;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.texture-card-meta{display:flex;gap:8px;flex-wrap:wrap}.texture-card-meta span{background:#333;color:#aaa;font-size:11px;padding:3px 8px;border-radius:4px}.texture-card-desc{margin:8px 0 0;color:#888;font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#browseTexturesBtn{position:absolute;z-index:2;bottom:10px;left:70px}