:root {
  --bg: #111417;
  --panel: #f5f1e8;
  --panel-strong: #fffaf0;
  --ink: #211c15;
  --muted: #736c61;
  --line: #d8d0c2;
  --accent: #246b61;
  --accent-strong: #174d46;
  --stage: #25282c;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Yu Gothic UI", "Hiragino Sans", Meiryo, system-ui, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.app {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  /* Fixed height: zoomed-in content must scroll INSIDE the stage; with
     min-height the whole page grew instead, hiding the bottom toolbar.
     dvh tracks the real visible height on mobile (collapsing URL bar). */
  height: 100vh;
  height: 100dvh;
  background: var(--stage);
}

.app.panel-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.side-panel {
  overflow: auto;
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  background: var(--panel);
  transition: transform 180ms ease;
}

.panel-collapsed .side-panel {
  transform: translateX(-100%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 800;
}

.brand h1 {
  margin: 0;
  font-size: 21px;
}

.brand p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.panel {
  margin-top: 20px;
}

.panel h2 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.upload-box {
  display: grid;
  place-items: center;
  min-height: 66px;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-weight: 800;
}

.upload-box input {
  display: none;
}

.field {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.field input,
.field select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel-strong);
  color: var(--ink);
}

textarea {
  min-height: 132px;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.check-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.primary-button,
.secondary-button,
.text-button,
.icon-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--ink);
  font-weight: 800;
}

.primary-button,
.secondary-button,
.text-button {
  min-height: 38px;
  padding: 0 14px;
}

.primary-button {
  width: 100%;
  margin-top: 10px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.secondary-button {
  width: 100%;
  margin-top: 8px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
}

.control-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control-icon-small {
  width: 16px;
  height: 16px;
}

.hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.viewer-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  color: #f2eee6;
}

.menu-toggle {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 12;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(17, 20, 23, 0.72);
  color: #f2eee6;
  backdrop-filter: blur(10px);
}

.menu-toggle:hover {
  background: rgba(36, 107, 97, 0.55);
  border-color: rgba(117, 196, 183, 0.55);
}

.bottombar {
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 16px;
  background: rgba(17, 20, 23, 0.88);
  backdrop-filter: blur(12px);
}

#pageLabel,
.page-jump {
  color: #bdb6aa;
  font-size: 13px;
}

.stage {
  position: relative;
  display: flex;
  overflow: auto;
  /* Hidden scrollbars: panning is drag-based, and the turning sheet's
     projected box briefly overflows the stage mid-flip — visible scrollbars
     would pop in and jolt the layout. */
  scrollbar-width: none;
  /* All touch gestures (swipe, pan, pinch) are handled via pointer events */
  touch-action: none;
  min-height: 0;
  padding: 12px 76px;
  perspective: 1800px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(135deg, #1d2125, #30343a);
}

.stage::-webkit-scrollbar {
  display: none;
}

.stage.dragging::after {
  position: absolute;
  inset: 22px;
  display: grid;
  place-items: center;
  border: 2px dashed #b7d8d2;
  border-radius: 10px;
  color: #e8fffb;
  background: rgba(36, 107, 97, 0.24);
  content: "PDFをドロップ";
  font-size: 22px;
  font-weight: 900;
}

.book-surface {
  position: relative;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  justify-items: center;
  /* The surface must keep its natural size when zoomed past the stage so the
     stage scrolls (drag-to-pan). Capping it with max-width / letting the flex
     stage shrink it compressed spread pages into each other. */
  flex-shrink: 0;
  /* NOT preserve-3d: inside a 3D rendering context, stacking follows depth
     and the sheet's hinge (z=0) ties with the flat pages — Chrome resolves
     the tie by painting the underlying page over the sheet at the gutter.
     A plain perspective container keeps the 3D look for the turning sheet
     while sheet-vs-page stacking stays plain deterministic z-index. */
  perspective: 1800px;
}

.book-surface[data-mode="spread"] {
  grid-template-columns: repeat(2, minmax(0, auto));
}

.book-page {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}

.book-surface[data-mode="spread"] .book-page:first-child {
  transform-origin: right center;
}

.book-surface[data-mode="spread"] .book-page + .book-page {
  transform-origin: left center;
}

/* Adjacent REAL pages: clip each page's soft outer shadow at the spine so it
   cannot spill across onto the facing page. That accidental spill used to
   read as gutter shading — and it popped off whenever a curl overlay covered
   the page. There is deliberately NO spine shading now; if one is ever added
   back, it must be painted above the curl overlays (z-index > 6) or it will
   flicker during hints and flips. */
.book-surface[data-mode="spread"] .book-page:not(.placeholder):has(+ .book-page:not(.placeholder)) {
  clip-path: inset(-140px 0 -140px -140px);
}

.book-surface[data-mode="spread"] .book-page:not(.placeholder) + .book-page:not(.placeholder) {
  clip-path: inset(-140px -140px -140px 0);
}

.book-page {
  cursor: grab;
  touch-action: none;
}

.book-page.placeholder {
  visibility: hidden;
  box-shadow: none;
}

.book-page canvas {
  display: block;
  max-width: none;
  background: #fff;
}

.empty-state,
.page-loading {
  max-width: 520px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 34px;
  color: #e9e3d8;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow);
}

/* 事前ラスタライズしたページにはテキスト層が無いため、検索は成立しない。
   空振りさせるより出さない。 */
.no-search .search-group,
.no-search #mobileSearchButton,
.no-search .search-popup {
  display: none;
}

/* 読み込みが速いときは何も見せない。0.22秒はそのままの状態で待ち、そこから
   ゆっくり浮かび上がる。描画が先に終われば一度も現れないまま消える。 */
.page-loading {
  animation: stage-loading-fade 0.5s ease 0.22s both;
}

@keyframes stage-loading-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loading {
    animation-duration: 0.01s;
  }
}

.empty-state h2 {
  margin: 0 0 10px;
}

.empty-state p {
  margin: 0;
  color: #c9c1b5;
  line-height: 1.65;
}

.nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 8;
  width: min(10vw, 76px);
  border: 0;
  background: transparent;
}

.nav-left {
  left: 0;
}

.nav-right {
  right: 0;
}

.nav-zone:hover {
  background: linear-gradient(90deg, rgba(36, 107, 97, 0.22), transparent);
}

.nav-right:hover {
  background: linear-gradient(270deg, rgba(36, 107, 97, 0.22), transparent);
}

.bottombar {
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.search-group,
.tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #e9e3d8;
  font-size: 13px;
}

.radio-row input {
  accent-color: #75c4b7;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box input {
  width: 220px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0 32px 0 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.search-box input::placeholder {
  color: #9b948a;
}

.search-box button {
  position: absolute;
  right: 4px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #bdb6aa;
}

.search-box button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.tool-button {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #f2eee6;
  font-size: 16px;
}

.tool-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.tool-button.active {
  border-color: #75c4b7;
  background: rgba(36, 107, 97, 0.45);
}

[hidden] {
  display: none !important;
}

.search-popup {
  position: absolute;
  left: 50%;
  bottom: 70px;
  z-index: 20;
  width: min(440px, calc(100% - 24px));
  max-height: 50vh;
  transform: translateX(-50%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(17, 20, 23, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.search-popup header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e9e3d8;
  font-size: 13px;
}

.search-popup .search-results {
  margin: 0;
  padding: 10px;
  max-height: none;
  overflow: auto;
}

.search-popup .search-results li button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e9e3d8;
}

.search-popup .search-results li button:hover {
  border-color: #75c4b7;
}

.search-popup .search-results .result-page {
  color: #75c4b7;
}

.pen-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  cursor: crosshair;
  touch-action: none;
}

/* Page-curl hover hints are real mini-curls (.curl-root) created by
   viewer.js — see bindCurlHints; no pseudo-element affordance needed. */

.page-jump {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-jump input {
  width: 72px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-align: center;
}

.thumbnail-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 10px;
  max-height: 52vh;
  overflow: auto;
}

.thumb {
  display: grid;
  gap: 5px;
  justify-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.thumb canvas {
  width: 92px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.26);
}

.thumb.active {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.flip-hold {
  position: absolute;
  z-index: 5;
  overflow: hidden;
}

.flip-hold.has-page {
  background: #fff;
  box-shadow: var(--shadow);
}

/* Like .book-page: keep the hold overlay's shadow from spilling across the
   spine while it stands in for the hidden opposite page during a flip. */
.flip-hold.has-page[data-slot="left"] {
  clip-path: inset(-140px 0 -140px -140px);
}

.flip-hold.has-page[data-slot="right"] {
  clip-path: inset(-140px -140px -140px 0);
}

.flip-hold img,
.flip-hold canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Corner-peel curl overlay. Geometry (position/size/clip-path/transform) is set
   inline per frame from page-curl.js; these rules only cover paint defaults. */
/* Scoped under .curl-root: the book surface itself carries hover-state classes
   named curl-fwd / curl-back — unscoped rules would restyle the surface. */
.curl-root .curl-front {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}

.curl-root .curl-back {
  position: absolute;
  left: 0;
  top: 0;
  /* The reflection matrix from page-curl.js is derived about the local origin,
     so the transform must pivot there, not the default element center. */
  transform-origin: 0 0;
  overflow: hidden;
  background: #fff;
}

.curl-root .curl-front canvas,
.curl-root .curl-front img,
.curl-root .curl-back canvas,
.curl-root .curl-back img,
.curl-root .curl-under canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Printed back of the leaf: pre-mirrored so the fold reflection shows it
   reading correctly (see page-curl.js). */
.curl-root .curl-back-inner {
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}

/* Single-page mode turns one isolated sheet. Its reverse is the mirrored
   front print showing faintly through the paper, rather than the next page
   painted normally as it is on the back of a leaf in spread mode. The paper
   and ink opacity are animated per frame by page-curl.js. */
.curl-root.curl-translucent-back .curl-back {
  background: transparent;
}

.curl-root.curl-translucent-back .curl-back-inner {
  transform: none;
  filter: grayscale(0.18) contrast(0.82) brightness(1.08);
}

.curl-root .curl-under {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}

.curl-root .curl-shadow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Crease shading on the leaf's back face; gradient set per-frame from
   page-curl.js in the element's pre-transform space. */
.curl-root .curl-back-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.search-results {
  margin: 10px 0 0;
  padding: 0;
  max-height: 240px;
  overflow: auto;
  list-style: none;
  display: grid;
  gap: 6px;
}

.search-results li button {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--panel-strong);
  color: var(--ink);
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
}

.search-results li button:hover {
  border-color: var(--accent);
}

.search-results .result-page {
  color: var(--accent-strong);
  font-weight: 800;
  margin-right: 6px;
}

.search-results mark {
  background: #ffe49a;
  border-radius: 2px;
}

.toc-list {
  display: grid;
  gap: 2px;
  max-height: 260px;
  overflow: auto;
  font-size: 13px;
}

.toc-list button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.toc-list button:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.toc-list .toc-children {
  margin-left: 14px;
}

body[data-embed="1"] .app {
  height: 100vh;
}

body[data-embed="1"][data-chrome="0"] .app {
  grid-template-columns: 1fr;
}

body[data-embed="1"][data-chrome="0"] .viewer-shell {
  grid-template-rows: minmax(0, 1fr);
}

body[data-embed="1"][data-chrome="0"] .stage {
  padding: 12px;
}

/* ---------- mobile chrome (tap-to-reveal overlay) ---------- */

/* Hidden entirely outside the phone breakpoint; the desktop layout keeps its
   persistent bottom toolbar instead. */
.mobile-chrome {
  display: none;
}

.mobile-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 24;
}

.mobile-page-indicator {
  margin: 0;
  padding: 5px 0 4px;
  background: rgba(17, 20, 23, 0.62);
  color: #f2eee6;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.mobile-toolrow {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: rgba(17, 20, 23, 0.82);
  backdrop-filter: blur(10px);
}

.mobile-toolrow-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex: 1;
  /* visually center the icon group against the close button's width */
  margin-right: 40px;
}

.mobile-tool {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  padding: 0 8px;
  background: transparent;
  color: #f2eee6;
  font-size: 17px;
}

.mobile-tool.active {
  color: #75c4b7;
  background: rgba(117, 196, 183, 0.16);
}

.mobile-tool-text {
  font-size: 13px;
  font-weight: 800;
}

.filmstrip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 24;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(17, 20, 23, 0.82);
  backdrop-filter: blur(10px);
  -webkit-overflow-scrolling: touch;
}

.filmstrip .film-thumb {
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
  justify-items: center;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 3px;
  background: transparent;
  color: #bdb6aa;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.filmstrip .film-thumb canvas {
  display: block;
  width: 58px;
  border-radius: 2px;
  background: #fff;
}

.filmstrip .film-thumb.active {
  border-color: #75c4b7;
  color: #fff;
}

/* ---------- tablet & phone ---------- */

@media (max-width: 980px) {
  .app,
  .app.panel-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The side panel becomes an overlay drawer sliding in from the left */
  .side-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 26;
    width: min(320px, 84vw);
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 60px rgba(0, 0, 0, 0.4);
  }

  .panel-collapsed .side-panel {
    transform: translateX(-110%);
    box-shadow: none;
  }

  .thumbnail-rail {
    max-height: none;
  }

  .stage {
    padding: 12px 40px;
  }

  .nav-zone {
    width: 44px;
  }

  .menu-toggle {
    top: 10px;
    left: 10px;
  }
}

/* Phone reading mode: chrome-less light stage, edge tab, tap-to-reveal
   overlay. The second query catches landscape phones (wide but short). */
@media (max-width: 700px), ((max-height: 500px) and (pointer: coarse)) {
  .mobile-chrome {
    display: block;
  }

  .mobile-chrome[hidden] {
    display: none;
  }

  /* Clean reading view: pale grey paper table instead of the dark stage */
  .stage {
    padding: 10px 0;
    background: #d9d9d9;
    perspective: 1800px;
  }

  .page-loading,
  .empty-state {
    border-color: rgba(0, 0, 0, 0.14);
    color: #3c3832;
    background: rgba(255, 255, 255, 0.55);
  }

  .empty-state p {
    color: #5d574e;
  }

  /* Page turning is gesture-driven on phones (swipe / corner drag); the hover
     hot-zones would swallow the taps that toggle the overlay. */
  .nav-zone {
    display: none;
  }

  /* The toolbar collapses to a search row revealed from the mobile overlay. */
  .bottombar {
    display: none;
  }

  body.mobile-search .bottombar {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
  }

  body.mobile-search.mobile-filmstrip .bottombar {
    bottom: 106px;
  }

  .bottombar .tool-group,
  .bottombar .page-jump {
    display: none;
  }

  /* The menu button becomes an ActiBook-style tab flush with the left edge */
  .menu-toggle {
    top: 84px;
    left: 0;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: rgba(17, 20, 23, 0.78);
    font-size: 0;
  }

  .menu-toggle .control-icon {
    display: none;
  }

  .menu-toggle::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }

  /* While the overlay is up the tab hides (the overlay owns navigation) */
  .mobile-ui-open .menu-toggle {
    display: none;
  }
}

@media (max-width: 640px) {
  .bottombar {
    gap: 8px 10px;
    min-height: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }

  /* Search takes its own full row, controls share the second row */
  .search-group {
    flex: 1 1 100%;
  }

  .search-box {
    flex: 1;
  }

  .search-box input {
    width: 100%;
    min-width: 0;
    height: 40px;
  }

  .tool-group {
    gap: 6px;
  }

  .tool-button {
    min-width: 40px;
    height: 40px;
  }

  .page-jump {
    margin-left: auto;
  }

  .page-jump input {
    width: 54px;
    height: 40px;
  }

  .search-popup {
    bottom: 112px;
    max-height: 42vh;
  }

  .icon-button {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.privacy-link {
  margin: 18px 4px 0;
  font-size: 12px;
}

.privacy-link a {
  color: var(--muted);
}

.analytics-notice {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-strong);
  color: var(--ink);
  font-size: 12.5px;
  box-shadow: var(--shadow);
}

.analytics-notice p {
  margin: 0;
  flex: 1 1 180px;
}

.analytics-notice a,
.analytics-notice button {
  color: var(--accent-strong);
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
}

body[data-chrome="0"] .analytics-notice,
.analytics-notice[hidden] {
  display: none !important;
}