:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;height:100vh;overflow:hidden}#root{height:100vh;width:100vw}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}#root{height:100vh;width:100vw;display:flex;flex-direction:column}.app-container{height:100vh;width:100vw;display:flex;flex-direction:column;background-color:#f5f5f5}.url-input-container{display:flex;padding:10px;background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000001a;z-index:1000;flex-shrink:0}.url-input{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px 0 0 8px;font-size:16px;outline:none;transition:border-color .3s ease}.url-input:focus{border-color:#4caf50}.url-input::placeholder{color:#999}.load-button{padding:12px 24px;background-color:#4caf50;color:#fff;border:none;border-radius:0 8px 8px 0;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s ease;white-space:nowrap}.load-button:hover{background-color:#45a049}.load-button:active{background-color:#3d8b40}.hide-button{padding:12px 16px;background-color:#f44336;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s ease;margin-left:10px}.hide-button:hover{background-color:#d32f2f}.hide-button:active{background-color:#b71c1c}.hidden-toggle{position:fixed;top:10px;right:10px;z-index:1001;opacity:.3;transition:opacity .3s ease}.hidden-toggle:hover{opacity:.8}.toggle-hint{width:20px;height:20px;background-color:#4caf50;border-radius:50%;cursor:pointer;position:relative}.toggle-hint:before{content:"⚙";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px}.iframe-container{flex:1;width:100%;position:relative;overflow:hidden}.iframe-container.with-controls{height:calc(100vh - 60px)}.iframe-container.fullscreen{height:100vh}.responsive-iframe{width:100%;height:100%;border:none;display:block}.welcome-message{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 20px;color:#333}.welcome-message h2{font-size:2.5rem;margin-bottom:20px;color:#4caf50;font-weight:300}.welcome-message p{font-size:1.1rem;margin-bottom:10px;line-height:1.6;max-width:600px}.welcome-message code{background-color:#f0f0f0;padding:4px 8px;border-radius:4px;font-family:Courier New,monospace;color:#d63384}@media (max-width: 768px){.url-input-container{flex-direction:column;gap:10px;padding:15px}.url-input{border-radius:8px;font-size:16px}.load-button{border-radius:8px;padding:14px 24px}.iframe-container.with-controls{height:calc(100vh - 100px)}.iframe-container.fullscreen{height:100vh}.welcome-message h2{font-size:2rem}.welcome-message p{font-size:1rem}}@media (max-width: 480px){.url-input-container{padding:10px}.url-input{font-size:16px;padding:10px 12px}.load-button{padding:10px 16px;font-size:14px}.welcome-message{padding:20px 15px}.welcome-message h2{font-size:1.8rem}}@media (orientation: landscape) and (max-height: 500px){.url-input-container{padding:8px}.url-input,.load-button{padding:8px 12px;font-size:14px}.iframe-container.with-controls{height:calc(100vh - 50px)}.iframe-container.fullscreen{height:100vh}}