/* THE FLOAT ROOM. The host element sets its own size; everything inside is positioned against it. */
.fr{position:relative;overflow:hidden;background:var(--fr-ground,#1B1A19);color:var(--fr-ink,#F2F0EF);
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  font-family:var(--fr-mono,'IBM Plex Mono','Plex Mono',ui-monospace,monospace);transition:background-color .6s}
.fr:focus-visible{outline:2px solid var(--fr-ink);outline-offset:-4px}
.fr-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.fr-canvas:active{cursor:grabbing}
.fr-still{position:absolute;inset:0;display:none}
/* v3: the studio plate, a Cycles render of an infinity cove (Quad float-motion/room/backdrop). Only the current light's plate
   loads; the other one warms once the page is idle. A light change wipes the new plate in from the emblem (JS sets clip-path). */
.fr-plate{position:absolute;inset:0;display:none;opacity:0;background:var(--fr-ground) center/cover no-repeat;transform:scale(1.02);will-change:transform}
.fr-plates-warm .fr-plate,.fr-plate.on{display:block}
.fr-plate.on{opacity:1}
.fr-plate-day{background-image:url(plate/day-l1920.webp);background-image:image-set(url(plate/day-l1920.avif) type("image/avif"),url(plate/day-l1920.webp) type("image/webp"))}
.fr-plate-night{background-image:url(plate/night-l1920.webp);background-image:image-set(url(plate/night-l1920.avif) type("image/avif"),url(plate/night-l1920.webp) type("image/webp"))}
@media (orientation:landscape) and (min-width:1600px) and (min-resolution:1.5dppx){
  .fr-plate-day{background-image:url(plate/day-l3840.webp);background-image:image-set(url(plate/day-l3840.avif) type("image/avif"),url(plate/day-l3840.webp) type("image/webp"))}
  .fr-plate-night{background-image:url(plate/night-l3840.webp);background-image:image-set(url(plate/night-l3840.avif) type("image/avif"),url(plate/night-l3840.webp) type("image/webp"))}}
@media (orientation:portrait){
  .fr-plate-day{background-image:url(plate/day-p1080.webp);background-image:image-set(url(plate/day-p1080.avif) type("image/avif"),url(plate/day-p1080.webp) type("image/webp"))}
  .fr-plate-night{background-image:url(plate/night-p1080.webp);background-image:image-set(url(plate/night-p1080.avif) type("image/avif"),url(plate/night-p1080.webp) type("image/webp"))}}
.fr-canvas{z-index:2}
.fr-still,.fr-hint,.fr-bar,.fr-sound{z-index:3}
.fr-still img{position:absolute;left:15%;top:16%;width:70%;height:62%;object-fit:contain;transition:opacity .45s}
.fr-hint,.fr-sound,.fr-label{font:500 12px/1 var(--fr-mono,'IBM Plex Mono','Plex Mono',ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;margin:0}
.fr-hint{position:absolute;left:max(16px,env(safe-area-inset-left));top:18px;padding:8px 10px;border-radius:4px;
  color:var(--fr-ink-top);background:var(--fr-chip-top);pointer-events:none}
.fr-sound{position:absolute;right:max(16px,env(safe-area-inset-right));top:6px;min-height:44px;padding:0 10px;border:0;border-radius:4px;
  color:var(--fr-ink-top);background:var(--fr-chip-top);cursor:pointer}
.fr-bar{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;color:var(--fr-ink)}
.fr-label{display:flex;gap:12px;justify-content:center;align-items:baseline;min-width:21ch;padding:10px 12px;border-radius:4px;
  background:var(--fr-chip);white-space:nowrap;font-size:12px}
.fr-count{font-variant-numeric:tabular-nums}
.fr-arrow{inline-size:48px;block-size:48px;flex:0 0 48px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  color:inherit;background:var(--fr-chip);border:1px solid currentColor;transition:transform .2s}
.fr-arrow svg{inline-size:20px;block-size:20px}
.fr-arrow:hover{transform:scale(1.06)}
.fr-arrow:active{transform:scale(.94)}
.fr button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.fr-export .fr-hint,.fr-export .fr-bar,.fr-export .fr-sound{display:none}
@media (max-width:420px){.fr-label{min-width:0;font-size:12px;gap:10px}.fr-hint{max-width:46%;line-height:1.4}}
@media (prefers-reduced-motion:reduce){.fr,.fr-arrow,.fr-still img{transition:none}.fr-plate{transform:none!important;transition:opacity .5s}}