:root{--touch-target-min: 48px;--touch-target-comfortable: 56px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--toolbar-width-desktop: 400px;--toolbar-width-tablet: 320px;--toolbar-width-mobile: 100%;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px)}@media (max-width: 479px){#toolbar{inset:auto 0 0;width:100%;max-width:100%;min-width:100%;border-radius:20px 20px 0 0;max-height:60vh;padding:var(--spacing-lg);padding-bottom:calc(var(--spacing-lg) + var(--safe-area-bottom))}#info-panel{top:var(--safe-area-top);right:var(--spacing-sm);left:var(--spacing-sm);min-width:auto;padding:var(--spacing-md);font-size:11px}#controls-help{display:none}.tool-button{min-height:var(--touch-target-min);padding:var(--spacing-md) var(--spacing-lg);font-size:13px}.category-tab{min-height:var(--touch-target-min);padding:var(--spacing-md) var(--spacing-sm);font-size:12px;flex:1 1 100%}.block-button{min-height:70px;padding:var(--spacing-md);font-size:12px}#block-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));max-height:300px}.compact-toggle{width:var(--touch-target-min);height:var(--touch-target-min);font-size:16px}#block-search{min-height:var(--touch-target-min);padding:var(--spacing-md);font-size:14px}#info-panel h3{font-size:12px;margin-bottom:var(--spacing-sm)}.info-item{font-size:11px;margin:var(--spacing-xs) 0}}@media (min-width: 480px) and (max-width: 767px){#toolbar{max-width:360px;left:var(--spacing-md);bottom:var(--spacing-md);top:auto;padding-bottom:calc(var(--spacing-lg) + var(--safe-area-bottom))}#info-panel{right:var(--spacing-md);top:calc(var(--spacing-md) + var(--safe-area-top));min-width:180px}#controls-help{display:none}.category-tab{min-height:var(--touch-target-min);flex:1 1 calc(50% - 4px)}.block-button{min-height:70px}#block-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.tool-button,#block-search{min-height:var(--touch-target-min)}}@media (min-width: 768px) and (max-width: 1023px){#toolbar{max-width:var(--toolbar-width-tablet);left:var(--spacing-lg);top:var(--spacing-lg);padding:var(--spacing-lg)}#info-panel{right:var(--spacing-lg);top:var(--spacing-lg)}#controls-help{display:block;left:var(--spacing-lg);bottom:var(--spacing-lg)}.category-tab,.tool-button{min-height:44px}.block-button{min-height:65px}#block-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr))}}@media (min-width: 1024px) and (max-width: 1279px){#toolbar{max-width:360px}#block-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}@media (hover: none) and (pointer: coarse){.tool-button,.category-tab,.compact-toggle,#block-search{min-height:var(--touch-target-min)}.block-button{min-height:60px}.tool-button:hover,.category-tab:hover,.block-button:hover{transform:none}.tool-button:active{transform:scale(.98);opacity:.9}.category-tab:active{transform:scale(.98)}.block-button:active{transform:scale(.95)}#toolbar,#block-grid{-webkit-overflow-scrolling:touch}#block-grid::-webkit-scrollbar{display:none}}@media (orientation: landscape) and (max-height: 600px){#toolbar{max-height:85vh;padding:var(--spacing-md)}#toolbar h2{font-size:16px;margin-bottom:var(--spacing-md)}.tool-section h3{font-size:12px;margin-bottom:var(--spacing-sm)}#block-grid{max-height:250px}#info-panel{padding:var(--spacing-md)}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){#toolbar,#info-panel,#controls-help{border-width:1px}}@media (prefers-color-scheme: dark){#toolbar,#info-panel,#controls-help{background:#000000e6}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.mobile-only,.tablet-only{display:none}.desktop-only{display:block}@media (max-width: 767px){.mobile-only{display:block}.desktop-only,.tablet-only{display:none}}@media (min-width: 768px) and (max-width: 1023px){.tablet-only{display:block}.mobile-only,.desktop-only{display:none}}@media (min-width: 1024px){.desktop-only{display:block}.mobile-only,.tablet-only{display:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}*:focus-visible{outline:2px solid #4ecdc4;outline-offset:2px}@media (max-width: 767px){body{font-size:16px}}@media (max-width: 1023px) and (orientation: landscape){.mobile-bottom-nav{height:calc(50px + var(--safe-area-bottom));padding-bottom:var(--safe-area-bottom)}.mobile-nav-btn{min-height:50px;min-width:60px;padding:4px}.mobile-nav-icon{font-size:20px}.mobile-nav-label{font-size:9px}}@media (max-width: 1023px) and (orientation: landscape){.mobile-block-sheet.landscape{inset:0 0 0 auto;width:40vw;max-width:400px;max-height:100vh;border-radius:20px 0 0 20px;transform:translate(100%);padding-top:calc(var(--spacing-xl) + var(--safe-area-top));padding-bottom:var(--safe-area-bottom);display:flex;flex-direction:column}.mobile-block-sheet.landscape.open{transform:translate(0)}.mobile-block-sheet.landscape .bottom-sheet-handle{width:4px;height:40px;margin:auto var(--spacing-lg) auto 0;display:none}.mobile-block-sheet.landscape .mobile-block-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));overflow-y:auto;flex:1}}@media (max-width: 1023px) and (orientation: landscape){.mobile-info-bar{top:var(--safe-area-top);right:var(--spacing-md);left:auto;width:auto;min-width:250px;max-width:40%;padding:var(--spacing-md);border-radius:12px;background:#0009}.mobile-info-bar.expanded .info-detailed{max-height:300px}}@media (max-width: 1023px) and (orientation: landscape){.mobile-drawer{width:60%;max-width:300px}}@media (orientation: landscape) and (max-height: 600px){.mobile-info-bar{padding:var(--spacing-sm) var(--spacing-md);transform:scale(.9);transform-origin:top right}.mobile-bottom-nav{height:45px}.mobile-nav-btn{min-height:45px}.mobile-nav-icon{font-size:18px}.mobile-nav-label{display:none}}.mode-selector{position:relative;margin-bottom:15px;padding:10px;background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.mode-selector:hover{background:#ffffff14;border-color:#4ecdc44d}.mode-badge{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:center}.mode-badge[data-mode=desktop]{background:#3b82f633;border:1px solid #3b82f6;color:#93c5fd}.mode-badge[data-mode=mobile]{background:#22c55e33;border:1px solid #22c55e;color:#86efac}.mode-badge.overridden{border-color:#fbbf24;box-shadow:0 0 10px #fbbf244d;animation:pulse-override 2s ease-in-out infinite}@keyframes pulse-override{0%,to{box-shadow:0 0 10px #fbbf244d}50%{box-shadow:0 0 20px #fbbf2480}}.mode-details{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s ease,margin-top .3s ease}.mode-selector:hover .mode-details{max-height:200px;opacity:1;margin-top:10px}.mode-info{padding:4px 0;font-size:12px;color:#ffffffb3;line-height:1.5}.mode-info strong{color:#4ecdc4;font-weight:600}.mode-toggle-btn{width:100%;margin-top:10px;padding:8px;background:#4ecdc433;border:1px solid #4ecdc4;border-radius:6px;color:#4ecdc4;font-weight:600;font-size:13px;cursor:pointer;transition:all .3s ease}.mode-toggle-btn:hover{background:#4ecdc44d;transform:translateY(-2px);box-shadow:0 4px 12px #4ecdc44d}.mode-toggle-btn:active{transform:translateY(0);box-shadow:0 2px 6px #4ecdc433}@media (max-width: 768px){.mode-selector{padding:8px;margin-bottom:12px}.mode-badge{font-size:13px;padding:5px 10px}.mode-info{font-size:11px}.mode-toggle-btn{font-size:12px;padding:7px}}