*{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;min-height:100%}body{background-color:#f5f5f5;font-family:system-ui,-apple-system,sans-serif}.page{display:flex;flex-direction:column;min-height:100vh;align-items:center}.page__main{display:flex;flex-direction:column;align-items:center;flex:1;width:100%;padding-top:56px;padding-bottom:1.5rem;padding-left:.5rem;padding-right:.5rem}.app-header{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;gap:.75rem;padding:0 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;z-index:10}.app-header__logo{display:flex;align-items:center;flex-shrink:0}.app-header__logo svg{width:28px;height:28px;color:#333}.app-header__title{margin:0;font-size:1.125rem;font-weight:600;color:#333}.view-frame{width:95vw;max-width:100%;height:70vh;min-height:240px;border-radius:8px;border:1px solid #e0e0e0;overflow:hidden;background-color:#1a1a1a}.view-frame__canvas-wrap{width:100%;height:100%;touch-action:none}.view-frame--fullscreen-fallback{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;height:100%!important;max-width:none!important;border-radius:0!important;border:none!important;z-index:9999}.control-panel{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;align-items:center;margin-top:1rem;padding:0 .5rem}.control-panel__btn{padding:.5rem 1rem;font-size:.875rem;font-family:inherit;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:6px;cursor:pointer;flex:0 1 auto;min-width:0;white-space:nowrap}@media (max-width: 480px){.control-panel{flex-wrap:nowrap;gap:.35rem;padding:0 .25rem}.control-panel__btn{padding:.35rem .4rem;font-size:.7rem}}.control-panel__btn:hover:not(:disabled){background-color:#f0f0f0;border-color:#999}.control-panel__btn:disabled,.control-panel__btn--disabled{opacity:.6;cursor:not-allowed}