.skyHeader,.captureDock,.gestureHint{transition:opacity .35s ease,visibility .35s}
#skySurface.chromeHidden :is(.skyHeader,.captureDock,.gestureHint){opacity:0;visibility:hidden;pointer-events:none}
#skySurface.chromeHidden .skyHeader *{pointer-events:none}
#skySurface.chromeHidden #gl{cursor:none}
@media(prefers-reduced-motion:reduce){.skyHeader,.captureDock,.gestureHint{transition:none}}
.captureDock{gap:clamp(8px,3vw,26px);padding-inline:18px;max-width:calc(100vw - 24px)}
@media(max-width:600px){.captureDock .dockButton{min-width:44px}.captureDock{padding-inline:12px}}

/* Header: fullscreen joins the album as an icon; the dock keeps only shooting + sound. */
.headerActions{display:flex;align-items:center;gap:6px}
.visuallyHidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.headerFullscreen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
/* Sound: one dock button opens a small panel with an on/off switch and the volume. */
.soundControl{position:relative;display:flex}
.soundPopover{position:absolute;top:calc(100% + 10px);right:-6px;pointer-events:auto;text-shadow:none;width:230px;padding:14px 16px 12px;border:1px solid #ffffff22;border-radius:16px;background:#0b1424f2;box-shadow:0 10px 30px #0006;gap:12px;color:white;font-size:12px}
.soundPopover:not([hidden]){display:grid}
.soundRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.soundRow input[type=range]{flex:1;min-width:0}
.soundRow output{width:36px;text-align:right;font-variant-numeric:tabular-nums;color:#fffc}
.soundSwitch{width:44px;height:26px;border-radius:13px;border:1px solid #ffffff40;background:#ffffff1a;padding:2px;display:flex;align-items:center;cursor:pointer}
.soundSwitch span{width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.soundSwitch[aria-checked="true"]{background:#5b8cff;border-color:#5b8cff}
.soundSwitch[aria-checked="true"] span{transform:translateX(18px)}
.soundHint{margin:0;font-size:10px;color:#ffffffa0;line-height:1.5;white-space:pre-line}
@media(max-width:600px){.soundPopover{right:-90px;width:min(230px,calc(100vw - 32px))}}
@media(prefers-reduced-motion:reduce){.soundSwitch span{transition:none}}
.captureDock{z-index:4}   /* the sound panel opens above the status toast */

.headerSound svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.headerActions .soundControl{display:flex}
/* Undo after おまかせ: an actionable toast, separate from the status line. */
.undoToast{position:fixed;z-index:5;left:50%;bottom:150px;transform:translateX(-50%);align-items:center;gap:14px;padding:8px 10px 8px 16px;border:1px solid #ffffff26;border-radius:20px;background:#08111ef0;font-size:12px;white-space:nowrap;max-width:calc(100vw - 32px)}
.undoToast:not([hidden]){display:flex}
.undoToast button{padding:6px 12px;border-radius:14px;border:1px solid #ffffff40;background:#ffffff1a;color:white;font-size:12px}
@media(max-width:600px){.undoToast{bottom:145px;font-size:11px}}
/* おまかせ sits left of the album (same icon + label look); the dock keeps 流れ星・撮る・一時停止. */
.headerSurprise svg{width:20px;height:20px}
.headerSurprise svg circle{fill:currentColor;stroke:none}
.surpriseLabel{font-size:11px}
/* The title is English only. */
.brand h1{font-size:12px;letter-spacing:.32em}
@media(max-width:600px){.skyHeader{padding-inline:10px}.brand{gap:4px}.brand h1{font-size:10px;letter-spacing:.24em;line-height:1.5;width:min-content}.surpriseLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.albumButton span{white-space:nowrap}.headerActions{gap:0}.headerSurprise,.headerSound,.headerFullscreen{min-width:40px}}