:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#f5efe1;background:#17151d}*{box-sizing:border-box}body{margin:0;height:100svh;display:grid;grid-template-rows:auto minmax(180px,1fr) auto;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,a{min-height:44px;border:1px solid #756141;border-radius:12px;background:#29242c;color:#f6e6be;font:700 13px system-ui;padding:11px 14px;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px}header{padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;gap:12px}small{font-size:9px;letter-spacing:.22em;color:#cfb373}h1{font:600 clamp(19px,5vw,27px) Georgia,serif;margin:4px 0 0}header a{background:#dfbd72;color:#211b24;white-space:nowrap}#test-field{position:relative;overflow:hidden;background:#39343f;touch-action:none;outline:none;contain:strict}#test-world{position:absolute;left:0;top:0;width:1600px;height:1600px;transform-origin:0 0;will-change:transform}.test-actor{position:absolute;left:0;top:0;width:110px;height:140px;contain:layout style;will-change:transform}.test-art,.test-art>svg{position:absolute;inset:0;width:110px;height:140px;overflow:visible}.test-actor>span{position:absolute;left:50%;top:-15px;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:800;background:#19171ee6;padding:4px 12px;border-radius:99px;z-index:2}.test-actor>i{position:absolute;left:34px;top:105px;width:42px;height:8px;border-radius:50%;background:#17121a5c;z-index:-1}#test-helper>span{color:#acdccc}#test-target{position:absolute;width:20px;height:20px;border:2px solid #d8b86e;border-radius:50%;transform:translate(-50%,-50%)}#test-landmarks img{position:absolute;width:180px;height:230px;object-fit:contain;pointer-events:none}#test-status{position:absolute;left:12px;right:12px;top:0;text-align:center;font-size:12px;pointer-events:none;color:#e1d6c4}#test-fps{position:absolute;right:12px;bottom:12px;border:1px solid #c8ac6655;border-radius:9px;background:#14121be6;padding:7px 10px;font:11px ui-monospace,monospace;pointer-events:none}footer{display:grid;gap:8px;padding:12px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));max-width:800px;width:100%;margin:auto}.test-settings,.test-facing,.test-pad{display:flex;align-items:center;justify-content:center;gap:8px}.test-settings{justify-content:space-between;font-size:12px}.test-settings label{display:flex;align-items:center;min-height:44px;gap:5px}input{accent-color:#dabb75;width:18px;height:18px}.test-facing button,.test-pad button{flex:1}.test-facing button[aria-pressed="true"]{background:#d2b573;color:#1b1620}.test-pad button{font-size:21px;padding:5px;touch-action:none;background:#cdd1d5;color:#22202a}footer p{margin:0;text-align:center;color:#b6aebd;font-size:10px;line-height:1.4}[hidden]{display:none!important}@media(orientation:landscape) and (max-height:600px){body{grid-template-columns:1fr 235px;grid-template-rows:auto 1fr}header{grid-column:1/-1;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:6px}h1{font-size:19px}footer{padding:10px;gap:7px;align-self:center}.test-settings{flex-wrap:wrap;justify-content:center;gap:4px}.test-facing{display:grid;grid-template-columns:1fr 1fr}.test-pad{flex-wrap:wrap}.test-pad button{flex:0 0 43%;height:42px}#test-field{grid-column:1;grid-row:2}}

body{height:100dvh;grid-template-columns:minmax(0,1fr)}header,footer{min-width:0}#test-menu-open{justify-self:start;padding:7px 16px;min-height:38px}#test-menu{background:#241e2d;color:#f5efe1;border:1px solid #bba171;border-radius:18px;width:min(90vw,420px);max-height:80dvh}#test-menu::backdrop{background:#090710b8}#test-menu nav{display:grid;gap:10px}.test-menu-title{display:flex;justify-content:space-between;align-items:center;gap:12px}#test-menu-settings label{display:flex;align-items:center;gap:8px}#test-menu-settings p{font-size:12px}#test-menu h2{font:600 23px Georgia}#test-menu h3{font-size:16px}@media(orientation:landscape) and (max-height:600px){body{grid-template-columns:minmax(0,1fr) 235px}}