@font-face{font-family:Tour;src:url('../vendor/NotoSansKR.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
*{box-sizing:border-box}html,body,#app,#stage{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
html,body{background:#08151e;color:#f6f7f2;font-family:Tour,'Malgun Gothic',sans-serif;word-break:keep-all;overflow-wrap:normal;line-break:strict}
#app,#stage{position:absolute;inset:0}#stage{isolation:isolate}
#photo,#space,#type{position:absolute;inset:0;width:100%;height:100%;display:block}
#photo{background-size:cover;background-position:center;transform-origin:66% 50%;will-change:transform;display:none}
#space{z-index:1}#type{z-index:2;pointer-events:none}
button{font:600 11px Tour,sans-serif;color:#f3f6f5;background:rgba(7,21,29,.74);border:1px solid #ffffff35;cursor:pointer;white-space:nowrap;touch-action:manipulation}
button:hover{background:#e6b771;color:#07151d}button:focus-visible,input:focus-visible{outline:2px solid #e6b771;outline-offset:3px}
#controls{position:absolute;z-index:3;left:max(5.7%,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;height:34px;width:min(370px,48%)}
#controls button{width:34px;height:34px;border-radius:50%;font-size:17px;flex-shrink:0}
#seek{width:100%;min-width:20px;height:3px;accent-color:#e5b879;cursor:pointer}#clock{font:10px Tour;color:#bac8cb;min-width:32px;font-variant-numeric:tabular-nums}
#sound{position:absolute;right:max(5.7%,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:5;border-radius:20px;height:34px;min-width:98px;letter-spacing:.08em;padding:0 14px}
.render #controls,.render #sound{display:none}
@media(max-height:350px){#controls{bottom:7px;height:26px;gap:5px;width:48%}#controls button{width:26px;height:26px;font-size:14px}#sound{bottom:7px;height:26px;min-width:77px;font-size:9px;padding:0 9px}#clock{font-size:8px;min-width:27px}}