.demo{position:fixed;inset:0;z-index:1200;height:100dvh;display:flex;flex-direction:column;background:#14201c;color:#f0d7ad;overscroll-behavior:none;font-family:Arial,sans-serif}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid #a27d4855;background:#14201c}
.header span{font-size:10px;letter-spacing:.18em;color:#c69962}.header h1{font-size:17px;line-height:1.2;margin:3px 0 0;font-weight:600}.header a{color:#e5d4b5;text-decoration:none;font-size:13px;padding:10px 0;white-space:nowrap}
.viewport{position:relative;flex:1;min-height:0;touch-action:none;overflow:hidden;background:#cba274}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;background:#18221ded;color:#f0d7ad}.loading p{max-width:320px;font-size:15px;line-height:1.5}
.controls{padding:10px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-top:1px solid #a27d4855}.row{display:flex;justify-content:center;gap:8px;max-width:590px;margin:auto}.row button,.row select,.loading button{min-height:42px;border:1px solid #957044;border-radius:5px;padding:9px 12px;background:#24342c;color:#f0d7ad;font:600 13px/1.25 Arial,sans-serif;cursor:pointer;touch-action:manipulation}.row select{flex:1;min-width:0;max-width:250px}.row button{min-width:85px}.row button:first-child{background:#b17b40;color:#101c16;border-color:#d1a36b}.row button:disabled,.row select:disabled{opacity:.45;cursor:wait}.row button:focus-visible,.row select:focus-visible,.header a:focus-visible{outline:2px solid #ffdc9c;outline-offset:3px}.controls p{text-align:center;margin:7px 0 0;color:#c6b89f;font-size:11px;line-height:1.3}
@media(max-width:400px){.row button,.row select{font-size:12px;padding:8px}.row button{min-width:72px}.header h1{font-size:15px}}
@media(orientation:landscape) and (max-height:500px){.header{padding-top:3px;padding-bottom:3px}.header>div{display:flex;align-items:center;gap:12px}.header h1{font-size:13px;margin:0}.header a{padding:5px 0;font-size:12px}.controls{padding-top:5px;padding-bottom:max(5px,env(safe-area-inset-bottom))}.controls p{display:none}.row button,.row select{min-height:34px;padding:6px 10px}}

[hidden]{display:none!important}.viewport canvas{position:absolute;inset:0}.loading{font-family:Arial,sans-serif}