@font-face {
  font-family: "Bubble Archive Pixel";
  src: url("品牌素材/英文像素字体.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

body.archive-active { overflow: hidden; }

.archive {
  position: fixed;
  z-index: 92;
  inset: 0;
  display: block;
  min-height: 100dvh;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  color: #164e89;
  background: #c9e6f6;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.archive.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.archive.is-home-account {
  opacity:1;
  visibility:visible;
  pointer-events:none;
  background:transparent;
  transition:none;
}
.archive.is-home-account > :not(.archive-panel) { visibility:hidden; pointer-events:none; }
.archive.is-home-account .archive-panel { visibility:visible; pointer-events:auto; }
.archive.is-home-account-closing {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:none;
}
.archive.is-home-account-closing > :not(.archive-panel) { visibility:hidden; pointer-events:none; }

.archive::before { display: none; }

.archive__topbar {
  position: fixed;
  z-index: 20;
  top: max(17px, env(safe-area-inset-top));
  left: clamp(30px,4.2vw,70px);
  right: clamp(30px,4.2vw,70px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.archive__topbar > * { pointer-events: auto; }
.archive__top-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.archive-id-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(31,78,126,.82);
  font: 400 16px/1 "Bubble Archive Pixel", ui-monospace, monospace;
  letter-spacing: .11em;
  white-space: nowrap;
  max-width: min(52vw, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  font-synthesis: none;
  font-kerning: none;
  font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0;
  font-variant-ligatures: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  padding: 4px 0;
  line-height:1.3;
  border: 0;
  background: none;
  cursor: inherit;
}

.archive-id-status.is-connected { color: #125f98; }

.archive-round-control {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(65,117,165,.34);
  border-radius: 50%;
  color: #287bb5;
  background: linear-gradient(145deg, rgba(222,240,249,.78), rgba(151,192,220,.5));
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.7), inset -2px -2px 4px rgba(45,91,139,.12), 0 2px 5px rgba(40,82,129,.13);
  cursor: inherit;
  transition: transform 160ms ease, filter 160ms ease;
}

.archive-round-control--back { width: 63px; border: 0; background: transparent; box-shadow: none; }
.archive-round-control--back img { width: 100%; height: 100%; object-fit: contain; }
.archive-round-control--music { position: relative; }
.archive-round-control--music .closet-control__note { font: 700 18px/1 Georgia, serif; }
.archive-round-control--music .closet-control__bars { bottom: 7px; right: 6px; }
.archive-round-control--music.is-playing .closet-control__bars i { opacity: 1; animation: closetMusicBar 700ms steps(3,end) infinite; }
.archive-round-control--music.is-playing .closet-control__bars i:nth-child(2) { animation-delay: -210ms; }
.archive-round-control--music.is-playing .closet-control__bars i:nth-child(3) { animation-delay: -430ms; }
.archive-round-control--music.is-playing { filter: brightness(1.08) drop-shadow(0 0 7px rgba(64,176,235,.48)); }
.archive-round-control:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.07); }
.archive-round-control:active { transform: translateY(2px) scale(.96); }

.archive-aquarium {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.archive-aquarium__machine {
  --aquarium-water-left:4.6%;
  --aquarium-water-top:16.4%;
  --aquarium-water-width:90.6%;
  --aquarium-water-height:63.6%;
  position: absolute;
  left: 50%; top: 50%;
  width: max(100vw, calc(100dvh * 1.714));
  aspect-ratio: 1642 / 958;
  transform: translate(-50%,-50%);
}
.archive-aquarium__image,
.archive-aquarium__mobile-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; transition: opacity 150ms steps(2,end); }
.archive-aquarium__mobile-image { display: none; }
.archive-aquarium__image--on,
.archive-aquarium__mobile-image--on { opacity: 0; }
.archive-aquarium[data-power="on"] .archive-aquarium__image--off { opacity: 0; }
.archive-aquarium[data-power="on"] .archive-aquarium__image--on { opacity: 1; }
.archive-aquarium[data-power="on"] .archive-aquarium__mobile-image--off { opacity: 0; }
.archive-aquarium[data-power="on"] .archive-aquarium__mobile-image--on { opacity: 1; }

.archive-water {
  position: absolute;
  z-index: 3;
  left: var(--aquarium-water-left);
  top: var(--aquarium-water-top);
  width: var(--aquarium-water-width);
  height: var(--aquarium-water-height);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.archive-aquarium[data-power="on"] .archive-water { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

.archive-water-foreground {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(16.4% 4.8% 20% 4.6%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  user-select: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.archive-water-foreground--mobile { display: none; }
.archive-aquarium[data-power="on"].has-bubble-collage .archive-water-foreground {
  opacity: .18;
  visibility: visible;
  transition-delay: 0s;
}

.archive-power {
  position: absolute;
  z-index: 8;
  left: 82.55%;
  top: 82.95%;
  width: 5.25%;
  height: 8.2%;
  padding: 0;
  border: 0;
  border-radius: 12%;
  background: transparent;
  cursor: inherit;
  animation: archivePowerBody 1.9s ease-in-out infinite;
}
.archive-aquarium[data-power="on"] .archive-power { animation:none; }
.archive-power:hover,.archive-power:focus-visible { filter:brightness(1.16) drop-shadow(0 0 4px rgba(164,229,255,.45)); }
.archive-power:focus-visible { outline: none; }
.archive-power:active { transform: translateY(2px) scale(.97); }
.archive-power-arrow { position:absolute; z-index:9; left:82.1%; top:74.9%; width:6.1%; height:auto; transform:rotate(90deg); transform-origin:center; filter:drop-shadow(0 0 2px #effdff) drop-shadow(0 0 6px rgba(92,218,255,.98)) drop-shadow(0 0 12px rgba(31,166,255,.88)); pointer-events:none; animation:archiveArrowPoint 1.08s ease-in-out infinite; }
.archive-aquarium[data-power="on"] .archive-power-arrow { display:none; }

.archive-mode-controls {
  position: absolute;
  z-index: 7;
  left: 19.5%;
  top: 82.7%;
  width: 50.5%;
  height: 8.8%;
  display: flex;
  justify-content: center;
  gap: clamp(24px,2.8vw,44px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 160ms ease 180ms, transform 180ms ease 180ms, visibility 0s linear 340ms;
}
.archive-aquarium[data-power="on"] .archive-mode-controls { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 180ms,180ms,0s; }
.archive-mode-controls button {
  position: relative;
  min-height: 100%;
  padding: 2px 8px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font: 400 26px/1 "Bubble Archive Pixel", ui-monospace, monospace;
  letter-spacing: .1em;
  white-space: nowrap;
  cursor: inherit;
  font-synthesis: none;
  font-kerning: none;
  font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0;
  font-variant-ligatures: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  animation:archiveModeFloat 3.2s ease-in-out infinite;
  transition: transform 150ms ease;
}
.archive-mode-controls button:nth-child(2) { animation-delay:-.42s; }
.archive-mode-controls button::before { content:""; position:absolute; z-index:0; left:12%; right:12%; top:34%; bottom:34%; border-radius:50%; background:rgba(100,211,255,.68); filter:blur(6px); opacity:.68; pointer-events:none; animation:archiveModeGlow 3.2s ease-in-out infinite; }
.archive-mode-controls button:nth-child(2)::before { animation-delay:-.42s; }
.archive-mode-controls button span { position:relative; z-index:1; display:block; text-shadow:none; transition:transform 150ms ease; }
.archive-mode-controls button:hover,.archive-mode-controls button:focus-visible { animation-play-state:paused; }
.archive-mode-controls button:hover span,.archive-mode-controls button:focus-visible span { transform:scale(1.075); }
.archive-mode-controls button:hover::before,.archive-mode-controls button:focus-visible::before { opacity:1; filter:blur(5px); }
.archive-mode-controls button:active span { transform:translateY(2px) scale(1.02); }
.archive-mode-controls button:focus:not(:focus-visible) { outline: none; }
.archive-action { min-height:38px; padding:0 16px; border:1px solid rgba(96,148,198,.46); border-radius:5px; color:#234f7d; background:linear-gradient(180deg,rgba(211,232,244,.84),rgba(137,177,208,.65)); box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 3px rgba(42,83,130,.15),0 2px 3px rgba(33,71,117,.17); font:900 10px/1 "Courier New",ui-monospace,monospace; cursor:inherit; }

.archive-add-control {
  position:absolute;
  z-index:58;
  left:50%;
  top:50%;
  min-width:clamp(170px,22vw,270px);
  min-height:clamp(44px,5vw,62px);
  transform:translate(-50%,-50%);
  padding:0 22px;
  border:1px solid rgba(206,244,255,.72);
  border-radius:50%;
  color:#effcff;
  background:radial-gradient(ellipse at 50% 30%,rgba(210,246,255,.38),rgba(64,164,224,.26) 55%,rgba(28,103,170,.16));
  box-shadow:inset 0 2px 3px rgba(255,255,255,.58),0 0 18px rgba(111,216,255,.42),0 6px 14px rgba(16,68,119,.16);
  font:400 clamp(12px,1.25vw,18px)/1 "Bubble Archive Pixel",ui-monospace,monospace;
  letter-spacing:.1em;
  text-shadow:0 0 7px rgba(131,224,255,.88);
  white-space:nowrap;
  cursor:inherit;
  animation:archiveModeFloat 3.2s ease-in-out infinite;
}
.archive-add-control:hover,.archive-add-control:focus-visible { filter:brightness(1.12); box-shadow:inset 0 2px 3px rgba(255,255,255,.7),0 0 25px rgba(111,216,255,.62),0 7px 16px rgba(16,68,119,.18); }
.archive-add-control:active { transform:translate(-50%,calc(-50% + 2px)) scale(.97); }
.archive-add-control--compact { left:auto; top:auto; right:3%; bottom:4%; min-width:0; min-height:34px; transform:none; padding:0 13px; border-radius:45%; font-size:10px; }
.archive-add-control--compact:active { transform:translateY(2px) scale(.97); }
.archive-add-control[disabled] { opacity:.74; filter:saturate(.72); pointer-events:none; animation:none; }
.archive-count { display:block; margin-top:3px; font-size:.72em; letter-spacing:.08em; opacity:.82; }

.archive-collage { position:absolute; inset:0; opacity:1; transition:opacity 180ms ease,transform 180ms ease; }
.archive-collage.is-settling { opacity:0; transform:translateY(3px); }
.archive-collage__item {
  position: absolute;
  padding: 0;
  border: 2px solid rgba(225,248,255,.66);
  background: rgba(210,239,255,.18);
  box-shadow: 0 8px 18px rgba(7,42,83,.26), 0 0 10px rgba(152,224,255,.16);
  overflow: hidden;
  cursor: inherit;
  transform: translate(-50%,-50%);
  transition: transform 180ms ease, filter 180ms ease, z-index 0s;
}
.archive-collage__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.archive-collage__item::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; opacity:.58; background:radial-gradient(circle,rgba(0,199,255,.74) 0 1px,transparent 1.35px) 0 0/5px 5px,radial-gradient(circle,rgba(255,54,174,.65) 0 1px,transparent 1.35px) 2.5px 2.5px/5px 5px,radial-gradient(circle,rgba(255,234,92,.35) 0 .8px,transparent 1.25px) 1px 3px/5px 5px; mix-blend-mode:screen; }
.archive-collage__item.is-opening { filter:brightness(1.4) drop-shadow(0 0 11px rgba(222,250,255,.96)); }
.archive-collage__item:hover,.archive-collage__item:focus-visible { z-index: 40 !important; transform: translate(-50%,-50%) scale(1.035); filter: brightness(1.07) drop-shadow(0 0 7px rgba(180,235,255,.58)); outline: none; }
.archive-loading { position:absolute; z-index:55; inset:0; display:grid; place-content:center; justify-items:center; color:#eafaff; text-shadow:0 1px 2px rgba(19,75,124,.65); }
.archive-loading[hidden] { display:none!important; }
.archive-loading .fish-wrap { width:clamp(80px,9vw,126px); }
.archive-loading .thinking { margin-top:4px; font-size:clamp(8px,.8vw,11px); }

.archive-empty {
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%,-50%);
  display: grid;
  gap: 8px;
  max-width: 62%;
  padding: 18px 22px;
  border: 1px solid rgba(195,235,255,.48);
  border-radius: 18px;
  color: rgba(220,245,255,.82);
  background: rgba(11,64,115,.24);
  text-align: center;
  backdrop-filter: blur(4px);
}
.archive-empty strong { font: 900 clamp(10px,1vw,14px)/1.2 "Courier New", ui-monospace, monospace; letter-spacing: .08em; }
.archive-empty span { font: 600 clamp(9px,.82vw,12px)/1.4 Arial,sans-serif; }

.archive-panel { z-index:125; }
.archive-panel p { margin:6px 0 14px; font-size:clamp(12px,1.1vw,15px); line-height:1.45; text-align:center; }
.archive-form { display: grid; gap: 10px; }
.archive-form label { font-size:10px; line-height:1.2; letter-spacing:.05em; }
.archive-form input { min-height:42px; box-sizing:border-box; width:100%; padding:0 12px; border:3px solid var(--bubble-window-pink-dark); border-radius:3px; color:#64204f; background:#fffafd; box-shadow:inset 3px 3px 0 #f4b7d5,inset -2px -2px 0 #fff; font-size:14px; line-height:1; outline:none; }
.archive-connected { display:grid; justify-items:center; gap:10px; text-align:center; }
.archive-connected .bubble-window-connected { min-height:0; padding-top:8px; }
.archive-connected__bubbles { display:flex; gap:8px; align-items:center; justify-content:center; }
.archive-connected__bubbles i { width:10px; aspect-ratio:1; border:2px solid #198fb3; border-radius:50%; background:rgba(236,253,255,.22); box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 0 6px rgba(75,210,236,.4); animation:archiveConnectedBubble 1.8s ease-in-out infinite; }
.archive-connected__bubbles i:nth-child(2) { animation-delay:.18s; }
.archive-connected__bubbles i:nth-child(3) { animation-delay:.36s; }
.archive-connected__id { margin:4px 0 8px!important; max-width:100%; overflow-wrap:anywhere; font-size:clamp(14px,2vw,20px)!important; line-height:1.45!important; }
.archive-action--disconnect { display:block; margin-left:auto; margin-right:auto; }

.archive-panel--my-grid { position:absolute; z-index:6; inset:0; display:block; padding:0; pointer-events:none; overflow:visible; }
.archive-panel--my-grid .bubble-window__backdrop { display:none; }
.archive-grid-position { --grid-window-x:0px; --grid-window-y:0px; --grid-safe-top:8px; --grid-safe-height:calc(100% - 16px); --grid-safe-center:50%; --grid-window-max:520px; --grid-max-size:502px; position:absolute; z-index:1; left:50%; top:var(--grid-safe-center); width:min(82%,var(--grid-window-max)); max-height:var(--grid-safe-height); transform:translate(calc(-50% + var(--grid-window-x)),calc(-50% + var(--grid-window-y))); pointer-events:none; }
.archive-panel--my-grid .bubble-window__shell--panel { width:100%; height:auto; max-height:none; pointer-events:auto; background:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 4px rgba(31,132,178,.14),0 7px 18px rgba(7,67,112,.2),0 0 18px rgba(128,232,255,.2); animation:archiveGridFloat 6.2s ease-in-out infinite; }
.archive-panel--my-grid .bubble-window__outer-titlebar { touch-action:none; user-select:none; }
.archive-grid-position.is-window-dragging .bubble-window__outer-titlebar { cursor:grabbing!important; }
.archive-panel--my-grid .bubble-window__inner { background:transparent; border-color:rgba(141,226,245,.52); }
.archive-panel--my-grid .bubble-window__inner-title { text-align:left; padding-left:12px; color:#155f83; background:rgba(224,249,255,.28); border-color:rgba(97,197,224,.42); }
.archive-panel--my-grid .bubble-window__content { padding:clamp(5px,.75vw,8px); overflow:visible; background:transparent; border-color:rgba(96,196,223,.52); box-shadow:none; }
.archive-my-gallery { display:grid; grid-template-rows:auto auto auto auto; gap:4px; width:100%; min-height:0; margin:auto; }
.archive-my-gallery__keyword { color:#075d86; font-size:clamp(18px,2.1vw,30px); line-height:1; letter-spacing:.025em; }
.archive-my-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; align-self:center; width:100%; margin:0; background:transparent; }
.archive-my-grid__slot { position:relative; min-width:0; aspect-ratio:1; padding:0; border:1px solid rgba(91,197,224,.66); background:transparent; overflow:hidden; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.archive-my-grid__slot img { display:block; width:100%; height:100%; object-fit:cover; opacity:0; user-select:none; -webkit-user-drag:none; pointer-events:none; transition:opacity 150ms ease; }
.archive-my-grid__slot img[hidden] { display:block; visibility:hidden; }
.archive-my-grid__slot.is-ready img { opacity:1; visibility:visible; }
.archive-my-grid__slot > i { position:absolute; inset:0; pointer-events:none; opacity:.55; background:radial-gradient(circle,rgba(0,199,255,.72) 0 1px,transparent 1.35px) 0 0/5px 5px,radial-gradient(circle,rgba(255,54,174,.6) 0 1px,transparent 1.35px) 2.5px 2.5px/5px 5px,radial-gradient(circle,rgba(255,234,92,.32) 0 .8px,transparent 1.25px) 1px 3px/5px 5px; mix-blend-mode:screen; }
.archive-my-grid__slot.is-presentation img { object-fit:fill; object-position:50% 50%!important; }
.archive-my-grid__slot.is-presentation > i { display:none; }
.archive-my-grid__slot.is-crop-preview > i { display:block; }
.archive-my-grid__slot.is-empty { display:grid; place-items:center; background:transparent; }
.archive-my-grid__slot.is-empty span { display:grid; place-items:center; width:clamp(24px,3vw,34px); aspect-ratio:1; border:1px solid rgba(72,191,221,.72); border-radius:50%; color:rgba(245,254,255,.98); background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.78),rgba(179,237,249,.2) 38%,rgba(56,178,216,.12)); box-shadow:inset 1px 1px 2px rgba(255,255,255,.9),0 0 8px rgba(105,221,245,.26); font:400 clamp(17px,2vw,23px)/1 Arial,sans-serif; transition:transform 150ms ease,filter 150ms ease,box-shadow 150ms ease; }
.archive-my-grid__slot.is-empty:hover span,.archive-my-grid__slot.is-empty:focus-visible span { transform:scale(1.08); filter:brightness(1.1); box-shadow:inset 1px 1px 2px #fff,0 0 13px rgba(105,221,245,.55); }
.archive-my-grid__slot.is-empty:active span { transform:scale(.91); animation:archiveBubblePop 240ms ease-out; }
.archive-my-grid__slot.is-dragging { z-index:3; cursor:grabbing!important; touch-action:none; outline:2px solid rgba(137,239,255,.94); outline-offset:-2px; }
.archive-my-grid__slot.is-reorder-source { opacity:.34; transform:scale(.95); outline:2px solid rgba(139,240,255,.96); }
.archive-my-grid__slot.is-reorder-target { outline:3px solid rgba(255,255,255,.96); outline-offset:-3px; box-shadow:0 0 14px rgba(78,220,255,.82); }
.archive-reorder-ghost { position:fixed; z-index:10050; width:clamp(58px,10vw,96px); aspect-ratio:1; object-fit:cover; transform:translate(-50%,-50%) scale(1.04); border:2px solid rgba(222,252,255,.95); box-shadow:0 8px 24px rgba(5,78,126,.36),0 0 14px rgba(121,235,255,.7); pointer-events:none; opacity:.92; }
.archive-reorder-delete { display:none; min-height:24px; place-items:center; border:1px dashed rgba(205,88,145,.66); color:#9c3268; background:rgba(255,215,235,.28); font-size:7px; letter-spacing:.08em; }
.archive-my-gallery.is-reorder-mode .archive-reorder-delete { display:grid; }
.archive-reorder-delete.is-reorder-target { color:#fff; background:rgba(219,67,139,.7); box-shadow:0 0 12px rgba(238,83,158,.5); }
html.archive-grid-drag-active,body.archive-grid-drag-active { overscroll-behavior:none; }
body.archive-grid-drag-active { position:fixed; left:var(--archive-grid-drag-scroll-x,0); top:var(--archive-grid-drag-scroll-y,0); width:100%; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
@media (pointer:coarse) {
  body.archive-grid-drag-active .archive-reorder-delete { position:fixed; z-index:10049; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); width:min(240px,72vw); min-height:42px; transform:translateX(-50%); }
}
.archive-my-grid__slot.is-loading { display:grid; place-items:center; }
.archive-my-grid__slot.is-loading > i { opacity:0; }
.archive-my-grid__slot.is-ready .archive-slot-spinner { display:none; }
.archive-my-grid__slot.is-load-error::after { content:"×"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.9); font:700 18px/1 Arial,sans-serif; }
.archive-slot-spinner { width:clamp(20px,2.6vw,30px); aspect-ratio:1; border:2px solid rgba(190,245,255,.32); border-top-color:rgba(238,255,255,.96); border-right-color:rgba(56,190,223,.82); border-radius:50%; box-shadow:0 0 9px rgba(102,224,248,.34); animation:archiveSlotSpin 780ms linear infinite; }
.archive-my-grid__slot:hover,.archive-my-grid__slot:focus-visible { z-index:2; filter:brightness(1.08); outline:2px solid #8beaff; outline-offset:-3px; }
.archive-my-gallery__footer { display:flex; align-items:center; justify-content:center; gap:clamp(7px,1.3vw,12px); min-height:28px; color:#146888; font-size:9px; white-space:nowrap; }
.archive-my-gallery__add { min-height:26px!important; }
.archive-my-gallery__download { min-height:26px!important; }
.archive-my-gallery__status { min-height:12px; color:#146888; font-size:7px; line-height:1.2; text-align:center; }
.archive-my-gallery__status.is-error { color:#a64272; }
.archive-my-gallery__add.is-popping { animation:archiveBubblePop 260ms ease-out both; }
.archive-panel--my-grid .bubble-window__shell--panel,.archive-panel--my-grid .bubble-window__shell--panel * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.archive-form input:focus { border-color:var(--bubble-window-aqua-dark); box-shadow:inset 3px 3px 0 #a6ecf1,inset -2px -2px 0 #fff,0 0 0 3px rgba(53,217,231,.26); }
.archive-form input[type="file"] { padding: 10px; height: auto; }
.archive-form__row { display: flex; gap: 8px; flex-wrap: wrap; }
.archive-form__status { min-height:18px; color:#22688f; font-size:10px; line-height:1.35; text-align:center; }
.archive-form__status.is-error { color: #a64272; }
.archive-upload-preview { display: block; max-width: 100%; max-height: 180px; margin: 0 auto; object-fit: contain; border-radius: 12px; }
.archive-inline-bubbles { display:inline-flex; align-items:center; gap:3px; margin-left:5px; vertical-align:middle; }
.archive-inline-bubbles i { width:4px; height:4px; border:1px solid currentColor; border-radius:50%; opacity:.35; animation:bubbleEllipsis 1.25s ease-in-out infinite; }
.archive-inline-bubbles i:nth-child(2) { animation-delay:.16s; }
.archive-inline-bubbles i:nth-child(3) { animation-delay:.32s; }

.archive-viewer { z-index:180; isolation:isolate; }
.archive-viewer .bubble-window__backdrop { background:rgba(80,163,205,.12); backdrop-filter:none; -webkit-backdrop-filter:none; }
.archive-viewer[hidden], .archive-panel[hidden], .archive-empty[hidden] { display: none !important; }
.archive-viewer__window.is-portrait { width:min(65vw,620px); }
.archive-viewer__window.is-square { width:min(76vw,760px); }
.archive-viewer__content { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:7px; padding:8px; overflow:hidden; }
.archive-viewer__record { min-width:0; color:#8d175a; font-size:10px; line-height:1.2; letter-spacing:.055em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archive-viewer__image-area { position:relative; min-width:0; min-height:0; border:3px solid var(--bubble-window-aqua-dark); border-radius:3px; background:#fff; box-shadow:inset 3px 3px 0 #caffff,inset -3px -3px 0 #57c7d8; overflow:hidden; }
.archive-viewer__image-area img { position:absolute; inset:0; display:block; max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; object-fit:contain; }
.archive-viewer.is-image-loading .archive-viewer__image-area::after { content:""; position:absolute; left:50%; top:50%; width:30px; aspect-ratio:1; border:2px solid rgba(165,235,249,.35); border-top-color:#fff; border-right-color:#43bdda; border-radius:50%; transform:translate(-50%,-50%); animation:archiveViewerLoad 760ms linear infinite; }
.archive-viewer__window.is-my-square { width:min(68vw,calc(100dvh - 170px),620px); height:auto; max-height:calc(100dvh - 48px); }
.archive-viewer__window.is-my-square .archive-viewer__image-area { aspect-ratio:1; }
.archive-viewer__window.is-my-square .archive-viewer__image-area img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.archive-viewer__window.is-my-square .archive-viewer__record { display:none; }
.archive-viewer__window.is-my-square .archive-viewer__content { grid-template-rows:auto auto; align-content:start; overflow:visible; }
.archive-viewer__status { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:26px; padding:0 7px; border:3px solid var(--bubble-window-pink-dark); border-radius:2px; color:#77164f; background:#ffc4e1; box-shadow:inset 2px 2px 0 #fff0f8,inset -2px -2px 0 #e567a8; font-size:10px; line-height:1; letter-spacing:.055em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.archive-viewer__status > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.archive-viewer__actions { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.archive-viewer__actions[hidden] { display:none!important; }
.bubble-window .archive-viewer__actions button,.bubble-window .archive-action { border:3px solid var(--bubble-window-aqua-dark); border-radius:3px; color:#075b86; background:var(--bubble-window-aqua); box-shadow:inset 3px 3px 0 var(--bubble-window-aqua-highlight),inset -3px -3px 0 #0ea5c2,2px 2px 0 rgba(126,20,88,.26); cursor:inherit; }
.bubble-window .archive-viewer__actions button { height:21px; padding:0 6px; font-size:8px; line-height:1; }
.bubble-window .archive-action { font-family:"Bubble Window Pixel",ui-monospace,monospace; font-size:11px; }
.bubble-window .archive-viewer__actions button:hover,.bubble-window .archive-action:hover { filter:brightness(1.08) saturate(1.08); }
.bubble-window .archive-viewer__actions button:active,.bubble-window .archive-action:active { transform:translate(2px,2px) scale(.97); box-shadow:inset 2px 2px 0 #0ea5c2,inset -2px -2px 0 var(--bubble-window-aqua-highlight); }

/* Translucent Aqua Pixel Window content controls */
.bubble-window .archive-form input { border:2px solid var(--bubble-window-edge); color:#174f73; background:rgba(248,254,255,.86); box-shadow:inset 2px 2px 0 rgba(162,224,239,.62),inset -1px -1px 0 #fff; }
.bubble-window .archive-form input:focus { border-color:var(--bubble-window-pink-accent); box-shadow:inset 2px 2px 0 rgba(162,224,239,.62),inset -1px -1px 0 #fff,0 0 0 1px rgba(240,75,159,.58); }
.bubble-window .archive-form__status.is-error { color:#c52d79; }
.bubble-window .archive-viewer__image-area { border:2px solid var(--bubble-window-edge); background:#fff; box-shadow:inset 2px 2px 0 #d9fbff,inset -2px -2px 0 rgba(77,169,202,.44); }
.bubble-window .archive-viewer__status { border:2px solid var(--bubble-window-edge); color:#145d7f; background:rgba(184,235,247,.68); box-shadow:inset 1px 1px 0 rgba(243,255,255,.94),inset -1px -1px 0 rgba(70,164,199,.42); }
.bubble-window .archive-viewer__record { color:#146888; }
.bubble-window .archive-viewer__actions button,.bubble-window .archive-action { border:2px solid var(--bubble-window-edge); color:#075b86; background:rgba(57,207,229,.78); box-shadow:inset 2px 2px 0 rgba(222,255,255,.92),inset -2px -2px 0 rgba(14,148,190,.52),1px 1px 0 rgba(18,113,151,.24); }
.bubble-window .archive-viewer__actions button:hover,.bubble-window .archive-action:hover { box-shadow:inset 2px 2px 0 rgba(235,255,255,.95),inset -2px -2px 0 rgba(14,148,190,.58),0 0 0 1px var(--bubble-window-pink-accent); }
.bubble-window .archive-viewer__actions button:active,.bubble-window .archive-action:active { box-shadow:inset 2px 2px 0 rgba(14,148,190,.58),inset -1px -1px 0 rgba(235,255,255,.95); }
.archive-viewer-signal { display:none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.archive button:focus-visible { outline: 2px solid #8be0ff; outline-offset: 3px; }
.archive .archive-power:focus-visible { outline:none; }

@keyframes archivePowerBody { 0%,100% { filter:brightness(.94); } 50% { filter:brightness(1.2) drop-shadow(0 0 4px rgba(164,229,255,.55)); } }
@keyframes archiveArrowPoint { 0%,100% { transform:rotate(90deg) translateX(0); } 50% { transform:rotate(90deg) translateX(6px); } }
@keyframes archiveModeFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes archiveModeFloatMobile { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes archiveModeGlow { 0%,100% { opacity:.58; } 50% { opacity:.9; } }
@keyframes archiveViewerSignal { 0%{opacity:0;transform:scaleY(.03)} 35%{opacity:.92;transform:scaleY(1)} 68%{opacity:.55;transform:scaleY(.18)} 100%{opacity:0;transform:scaleY(1)} }
@keyframes archiveConnectedBubble { 0%,100%{opacity:.55;transform:translateY(0) scale(1)} 48%{opacity:1;transform:translateY(-3px) scale(1.05)} }
@keyframes archiveUploadFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes archiveBubblePop { 0%{transform:scale(1)} 38%{transform:scale(.93)} 70%{transform:scale(1.05);filter:brightness(1.3)} 100%{transform:scale(1)} }
@keyframes archiveSlotSpin { to { transform:rotate(1turn); } }
@keyframes archiveViewerLoad { to { transform:translate(-50%,-50%) rotate(1turn); } }
@keyframes archiveGridFloat { 0%,100%{transform:translate(0,0)} 35%{transform:translate(1px,-4px)} 70%{transform:translate(-1px,3px)} }

@media (hover:hover) and (pointer:fine) {
  .archive,.archive * { cursor: none !important; }
}

@media (max-width:700px) {
  .archive { min-height:100svh; height:100dvh; overflow:hidden; }
  .archive__topbar { top:max(8px,env(safe-area-inset-top)); left:10px; right:10px; }
  .archive-round-control--back { width:53px; }
  .archive-round-control--music { width:40px; }
  .archive__top-actions { gap:6px; }
  .archive-id-status { max-width:44vw; font-size:8px; letter-spacing:.07em; }
  .archive-aquarium__machine { --aquarium-water-left:3.6%; --aquarium-water-top:13.5%; --aquarium-water-width:92.8%; --aquarium-water-height:70.5%; inset:auto; left:0; top:auto; bottom:0; width:100vw; height:auto; aspect-ratio:853 / 1844; transform:none; }
  .archive-aquarium__image { display:none; }
  .archive-aquarium__mobile-image { display:block; object-fit:contain; object-position:center; }
  .archive-water { position:absolute; }
  .archive-water-foreground--desktop { display:none; }
  .archive-water-foreground--mobile { display:block; object-fit:contain; object-position:center; clip-path:inset(13.5% 3.6% 16% 3.6%); }
  .archive-aquarium[data-power="on"].has-bubble-collage .archive-water-foreground { opacity:.2; }
  .archive-mode-controls { position:absolute; left:4.5%; top:87.1%; width:58.5%; height:7.9%; flex-direction:column; align-items:stretch; justify-content:center; gap:10px; }
  .archive-mode-controls button { flex:0 0 auto; width:100%; min-width:0; min-height:14px; padding:0 1px; font-size:14px; line-height:1; letter-spacing:.065em; white-space:nowrap; animation-name:archiveModeFloatMobile; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  .archive-mode-controls button::before { left:4%; right:4%; top:15%; bottom:15%; border-radius:50%; background:rgba(74,190,247,.62); filter:blur(8px); opacity:.78; }
  .archive-mode-controls button:focus-visible { border-radius:3px; outline:2px solid rgba(163,232,255,.96); outline-offset:2px; box-shadow:0 0 0 2px rgba(52,154,220,.28),0 0 9px rgba(151,227,255,.72); }
  .archive-power { position:absolute; left:80.3%; right:auto; top:87.6%; bottom:auto; width:15.2%; height:7.6%; }
  .archive-power-arrow { left:81.2%; top:79.8%; width:13.2%; }
  .archive-loading .fish-wrap { width:86px; }
  .archive-loading .thinking { font-size:8px; }
  .archive-empty { max-width: 70%; padding: 9px 11px; gap: 4px; border-radius: 10px; }
  .archive-empty strong { font-size: 7px; }
  .archive-empty span { font-size: 6px; }
  .archive-viewer__window,.archive-viewer__window.is-portrait,.archive-viewer__window.is-square { width:100%; height:min(78dvh,680px); }
  .archive-viewer__window.is-my-square { height:auto; max-height:min(78dvh,680px); }
  .archive-viewer__content { gap:6px; padding:7px; }
  .archive-viewer__record { font-size:7px; }
  .archive-viewer__status { min-height:28px; padding:4px 6px; font-size:clamp(6px,1.85vw,8px); line-height:1.35; overflow:visible; }
  .archive-viewer__status > span:first-child { line-height:1.35; overflow:visible; text-overflow:clip; }
  .archive-viewer__actions button { height:16px; padding:0 4px; font-size:6px; }
  .archive-form input { font-size:16px; }
  .archive-panel--my-grid { padding:0; }
  .archive-grid-position { width:min(calc(100% - clamp(36px,12vw,52px)),var(--grid-window-max)); max-height:var(--grid-safe-height); }
  .archive-panel--my-grid .bubble-window__shell--panel { width:100%; max-width:none; height:auto; max-height:none; }
  .archive-panel--my-grid .bubble-window__outer-titlebar { font-size:8px; }
  .archive-panel--my-grid .bubble-window__inner-title { padding:5px 8px 4px; font-size:clamp(9px,3.1vw,12px); }
  .archive-panel--my-grid .bubble-window__inner { gap:5px; padding:5px; }
  .archive-panel--my-grid .bubble-window__content { padding:4px; }
  .archive-my-gallery { gap:3px; }
  .archive-my-gallery__keyword { font-size:clamp(18px,6.3vw,25px); }
  .archive-my-grid { width:100%; }
  .archive-my-gallery__footer { min-height:24px; }
  .archive-my-gallery__add { min-height:23px!important; padding:0 9px!important; font-size:8px!important; }
  .archive-my-gallery__download { min-height:23px!important; padding:0 9px!important; font-size:8px!important; }
  .archive-my-gallery__status { font-size:6px; min-height:8px; }
  .archive-add-control { min-width:172px; min-height:44px; font-size:12px; }
  .archive-add-control--compact { right:4%; bottom:3%; min-width:0; min-height:30px; padding:0 10px; font-size:8px; }
}

@media (max-width:360px) {
  .archive-id-status { font-size:7px; }
  .archive-mode-controls button { font-size:13px; letter-spacing:.055em; }
  .archive-panel--my-grid .bubble-window__outer-titlebar { font-size:7px; }
  .archive-panel--my-grid .bubble-window__inner-title { font-size:9px; }
  .archive-my-gallery__keyword { font-size:18px; }
  .archive-my-gallery__footer { gap:5px; font-size:7px; }
  .archive-my-gallery__add,.archive-my-gallery__download { padding:0 6px!important; font-size:7px!important; }
}

@media (prefers-reduced-motion:reduce) {
  .archive *, .archive *::before, .archive *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: 80ms !important; }
}