.gyro-tools{position:absolute;z-index:5;left:5%;top:340px;width:285px}
.gyro-tools details{border:1px solid var(--line);border-radius:12px;background:var(--surface);backdrop-filter:blur(16px)}
.gyro-tools summary{display:flex;align-items:center;gap:14px;list-style:none;min-height:46px;padding:0 14px;color:var(--accent);cursor:pointer;font-size:11px;letter-spacing:1px}
.gyro-tools summary::-webkit-details-marker{display:none}.gyro-tools summary span{color:var(--fg);letter-spacing:0}.gyro-tools summary small{margin-left:auto}
.gyro-panel{padding:4px 12px 12px;max-height:min(400px,43dvh);overflow:auto;overscroll-behavior:contain}
.gyro-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.gyro-grid button{padding:5px;white-space:normal;font-size:10px;min-height:44px}
.gyro-grid [aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.gyro-field{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11px;line-height:1.6;margin:12px 0;color:var(--muted)}
.gyro-field select{font:inherit;min-height:44px;flex:1;min-width:0;max-width:100%;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:0 8px}
.gyro-field input[type=range]{width:100%;flex-basis:100%;height:34px;touch-action:none}.gyro-field output{margin-left:auto;font-variant-numeric:tabular-nums}
.gyro-check{min-height:44px;cursor:pointer}.gyro-check input{width:18px;height:18px;accent-color:var(--accent)}
.gyro-note{font-size:10px;line-height:1.8;color:var(--muted);margin:10px 0}.gyro-panel a,#gyroDetail a{display:block;font-size:11px;line-height:1.7;color:var(--accent);padding:5px 0}
#gyroStatus{display:block;font-size:10px;line-height:1.7;color:var(--muted);padding:8px 3px}
.stage[data-model=gyro] #viewport,.stage[data-model=gyro] #poster{inset:92px 30px 218px 325px}
.stage[data-model=gyro] .intro{max-width:300px;top:135px}.stage[data-model=gyro] h1{font-size:38px;letter-spacing:-1px;line-height:1.13}.stage[data-model=gyro] h1 span{font-size:16px;letter-spacing:2px}.stage[data-model=gyro] .intro p{line-height:1.8;font-size:11px}
.stage[data-model=gyro] .hint{display:none}.stage[data-model=gyro] .camera-tools{left:auto;right:5%;max-width:90%;z-index:3}.stage[data-model=gyro] .camera-tools button{min-width:42px;min-height:44px}
.stage[data-model=gyro] .dock{z-index:4}.stage[data-model=gyro] #sheet{z-index:12}.stage[data-model=gyro] #backdrop{z-index:11}
#gyroDetail{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}.gyro-system{font-size:10px;color:var(--accent);margin-bottom:10px}
.gyro-evidence{display:flex;flex-wrap:wrap;gap:6px}.gyro-evidence span{font-size:9px;line-height:1.7;border:1px solid var(--line);border-radius:4px;padding:4px 6px;color:var(--muted)}
#gyroDetail dl{margin:15px 0;font-size:11px;line-height:1.85}#gyroDetail dt{font-size:10px;color:var(--accent);margin-top:10px}#gyroDetail dd{margin:3px 0;color:var(--fg)}#gyroDetail h4{font-size:11px;font-weight:500;margin:14px 0 8px}
#gyroDetail ul{list-style:none;margin:0;padding:0}#gyroDetail li{border-top:1px solid var(--line);padding:7px 0;font-size:10px;line-height:1.7}#gyroDetail li code{display:block;color:var(--accent);font-size:11px}#gyroDetail li span{display:block;color:var(--muted)}
.stage.immersive[data-model=gyro] #viewport{inset:50px 0 195px!important}.stage.immersive[data-model=gyro] .gyro-tools{display:block!important;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:240px}.stage.immersive[data-model=gyro] .gyro-panel{max-height:50dvh}
@media(max-width:760px){
 .stage[data-model=gyro] .intro{top:calc(98px + env(safe-area-inset-top));left:20px;max-width:calc(100% - 40px)}
 .stage[data-model=gyro] h1{font-size:29px;margin:10px 0 8px}.stage[data-model=gyro] h1 span{display:inline;font-size:12px;letter-spacing:.8px;margin-left:8px}.stage[data-model=gyro] .intro p{font-size:10px;margin:8px 0}.stage[data-model=gyro] .specs{margin-top:8px;font-size:7px}
 .gyro-tools{left:12px;right:12px;top:calc(210px + env(safe-area-inset-top));width:auto}.gyro-tools summary{min-height:44px}.gyro-panel{max-height:40dvh}.gyro-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gyro-grid button{min-height:44px;font-size:10px}#gyroStatus{font-size:9px;padding-top:5px}
 .stage[data-model=gyro] #viewport,.stage[data-model=gyro] #poster{inset:calc(282px + env(safe-area-inset-top)) 0 calc(225px + env(safe-area-inset-bottom))}
 .stage[data-model=gyro] .camera-tools{right:12px;left:12px;justify-content:center;max-width:none;bottom:calc(163px + env(safe-area-inset-bottom));gap:1px;padding:3px}.stage[data-model=gyro] .camera-tools button{flex:1;min-width:0;padding:0 5px;font-size:10px;min-height:44px}
 .stage[data-model=gyro] .dock{left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));padding:12px}.stage[data-model=gyro] .dock-actions{gap:6px}.stage[data-model=gyro] .dock-actions button{font-size:11px;padding:0 8px}.stage[data-model=gyro] .dock-actions button span{margin-left:5px}.stage[data-model=gyro] .range-row{gap:10px}.stage[data-model=gyro] .state{display:none}.stage[data-model=gyro] .range-row label{font-size:9px}.stage[data-model=gyro] #range{height:36px;touch-action:none}
 .stage[data-model=gyro] .gyro-tools:has(details[open]){z-index:8}.stage[data-model=gyro] .gyro-tools details[open]{box-shadow:0 16px 40px #0005}
}
@media(max-width:370px){.stage[data-model=gyro] h1{font-size:25px}.stage[data-model=gyro] h1 span{font-size:10px;margin-left:4px}.gyro-tools{top:202px}.stage[data-model=gyro] #viewport{top:274px}}
@media(orientation:landscape) and (max-height:600px){
 .stage[data-model=gyro] .intro{top:82px;left:max(16px,env(safe-area-inset-left));max-width:220px}.stage[data-model=gyro] h1{font-size:24px}.stage[data-model=gyro] h1 span{display:block;font-size:12px;margin-left:0}.stage[data-model=gyro] .intro p,.stage[data-model=gyro] .specs{display:none}
 .gyro-tools{left:16px;right:auto;top:176px;width:215px}.gyro-grid{grid-template-columns:1fr 1fr}.gyro-panel{max-height:40dvh}#gyroStatus{max-width:215px}
 .stage[data-model=gyro] #viewport,.stage[data-model=gyro] #poster{inset:80px 8px 137px 228px}.stage[data-model=gyro] .dock{left:245px;right:12px;bottom:10px;padding:8px}.stage[data-model=gyro] .dock-actions button{min-height:40px}.stage[data-model=gyro] .range-row{margin-top:4px}.stage[data-model=gyro] .camera-tools{left:245px;right:12px;bottom:128px}.stage[data-model=gyro] .camera-tools button{min-height:38px}
}