*{box-sizing:border-box}body{margin:0;color:#283c3b;background:#e7efe8;font-family:'Yu Gothic UI',Meiryo,sans-serif}#view{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header{position:absolute;top:28px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}header>*{pointer-events:auto}small{letter-spacing:.22em;font-size:11px;color:#577770}h1{font-size:32px;letter-spacing:.12em;margin:5px 0}h1 span{font-size:10px;letter-spacing:0;background:#fff9;padding:5px 9px;border-radius:20px;margin-left:15px;vertical-align:middle}button{font:inherit;border:0;border-radius:10px;padding:11px 15px;background:#fff;color:#2c4942;cursor:pointer;box-shadow:0 2px 5px #213b2d0a}button:hover{background:#def0de}button:focus-visible{outline:3px solid #527a65}button:disabled{opacity:.55;cursor:default}#vr{background:#315e4d;color:white}aside{position:absolute;top:125px;left:32px;width:245px;max-height:calc(100vh - 390px);overflow:auto;background:#ffffffe8;border:1px solid white;border-radius:20px;padding:20px;box-shadow:0 12px 40px #314d3610}h2{font-size:17px;margin:0 0 8px}p{font-size:12px;line-height:1.8;color:#60756d}nav{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}nav button{padding:7px 9px;font-size:11px;background:#edf2ed}nav button.active{background:#315e4d;color:#fff}#list{display:flex;flex-direction:column;gap:5px}#list button{text-align:left;font-size:12px;background:#f4f6f1}#list button.active{background:#e2ebc9}footer{position:absolute;bottom:25px;left:32px;background:#fffffff0;border-radius:18px;padding:16px 20px;max-width:600px}strong{font-size:14px}.controls{display:flex;gap:6px;margin:12px 0 5px;flex-wrap:wrap}.controls button{font-size:12px;background:#edf1e8}footer p{margin:6px 0}output{display:block;font-size:11px;color:#4b7060;max-width:540px}@media(max-width:650px){header{top:15px;left:16px;right:16px}h1{font-size:24px}aside{left:16px;top:100px;width:185px;max-height:35vh;padding:13px}footer{left:16px;right:16px;bottom:15px;padding:12px}.controls button{padding:8px}#vr{font-size:12px}}

.controls button[aria-pressed="true"]{background:#315e4d;color:white}

#cameraPanel{position:absolute;right:24px;top:125px;width:240px;background:#fffffff0;padding:14px;border-radius:16px}#cameraPanel .controls{margin-bottom:0}#cameraPanel button{padding:9px 10px}body:has(#vr:not(:disabled)) #cameraPanel{opacity:1}
@media(max-width:650px){#cameraPanel{top:100px;right:12px;width:155px;padding:10px}#cameraPanel button{font-size:11px;padding:7px}aside{width:170px;max-height:calc(100vh - 390px)}footer{max-height:230px;overflow:auto}header small{font-size:9px}h1 span{margin-left:5px}}