/* pfpcrop v1 — Jitter design spec (styles.refero.design ab1e41e9, user-pinned 2026-08-17)
   Canvas #f2f1f3, white 40px cards, ink pills + one violet CTA, 4-layer diffuse shadows. */


@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ubuntu-400.woff2) format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ubuntu-500.woff2) format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/ubuntu-700.woff2) format("woff2");
}
/* Variable slice at width 125% (Expanded); used by platform-themed pages. */
@font-face {
  font-family: "Archivo Expanded";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/archivo-expanded.woff2) format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --reading-width: 680px;
  --bg: #f7f7f7;
  --card: #ffffff;
  --ink: #4f4f4f;
  --ink-soft: #757575;
  --ink-faint: #9e9e9e;
  --hairline: #e3e3e3;
  --violet: #1abc9c;
  --violet-deep: #148f77;
  --plum: #1f1f1f;
  --lavender: #cfcfcf;
  --radius-card: 40px;
  --radius-tile: 20px;
  --radius-pill: 50px;
  --shadow-rest:
    rgba(0, 0, 0, 0.01) 0px 119px 48px 0px,
    rgba(0, 0, 0, 0.05) 0px 67px 40px 0px,
    rgba(0, 0, 0, 0.09) 0px 30px 30px 0px,
    rgba(0, 0, 0, 0.1) 0px 7px 16px 0px;
  --shadow-hover:
    rgba(25, 23, 28, 0.01) 0px 152px 61px 0px,
    rgba(25, 23, 28, 0.05) 0px 85px 51px 0px,
    rgba(25, 23, 28, 0.09) 0px 38px 38px 0px,
    rgba(25, 23, 28, 0.1) 0px 9px 21px 0px;
  --shadow-float:
    rgba(0, 0, 0, 0.01) 0px 63px 25px 0px,
    rgba(0, 0, 0, 0.05) 0px 35px 21px 0px,
    rgba(0, 0, 0, 0.09) 0px 16px 16px 0px,
    rgba(0, 0, 0, 0.1) 0px 4px 9px 0px;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.page {
  position: relative;
  z-index: 1;
  background: var(--bg);
  box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.3);
}

main { max-width: 1200px; margin: 0 auto; padding: 0 24px 100px; }

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Site logo (top-left, links home on every page) */
.top { max-width: 1200px; margin: 0 auto; padding: 24px 24px 0; }
.logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo:hover { color: var(--violet); text-decoration: none; }
.theme-discord .logo { color: #fff; }
.theme-discord .logo:hover { color: #c7d0ff; }

/* Hero */
.hero { text-align: center; padding: 48px 0 8px; }
.hero h1 {
  font-family: inherit;
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.05;
  white-space: normal;
  text-wrap: balance;
}

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  corner-shape: squircle;
  box-shadow: var(--shadow-rest);
  margin: 44px auto 0;
  padding: 56px 32px;
  text-align: center;
}
.card:has(.upload-view:not([hidden])) {
  cursor: pointer;
  position: relative;
  aspect-ratio: 620 / 292;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--hairline);
  box-shadow: none;
  transition: box-shadow 0.15s ease;
}
.card:has(.upload-view:not([hidden])) .upload-view { width: 100%; }
.card:has(#editor-view:not([hidden])) {
  background: transparent;
  box-shadow: none;
  padding: 24px 0;
}
.card:has(.upload-view:not([hidden])):hover {
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
}

.btn {
  display: inline-block;
  background: var(--card);
  color: var(--violet);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.5;
  letter-spacing: -0.02em;
  border: none;
  border-radius: 22px;
  corner-shape: squircle;
  box-shadow: inset 0 0 0 1px rgba(12, 41, 126, 0.07);
  padding: 16px 32px;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.btn:hover { box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1); }
.btn:active { box-shadow: inset 0 0 0 1px rgba(12, 41, 126, 0.16); }
.btn:focus-visible { outline: 3px solid rgba(26, 188, 156, 0.45); outline-offset: 2px; }

.btn-ghost { color: var(--ink); }

.upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 180px; padding: 0 8%;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; border-radius: var(--radius-tile);
}
.upload-zone:focus-visible { outline: 3px solid rgba(26, 188, 156, 0.45); outline-offset: 2px; }
.up-icon { width: 168px; height: 168px; color: var(--hairline); margin-bottom: 14px; }
/* Dark themes: paint the icon opaque and fade the whole shape once, so the
   diagonal crossing the frame does not stack two translucent strokes. */
.theme-discord .up-icon, .theme-tiktok .up-icon { color: #fff; opacity: 0.16; }
.up-main { font-size: clamp(20px, 3.3vw, 39px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.up-sub { font-size: 16px; line-height: 1.5; color: var(--ink-faint); }
.up-error, .size-warn, .output-error { font-size: 14px; font-weight: 500; line-height: 1.5; color: #c0392b; }

/* Editor */
.editor-row { display: flex; gap: 48px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.stage-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stage-wrap { position: relative; border-radius: var(--radius-tile); corner-shape: squircle; overflow: hidden; line-height: 0; background: #ececec; }
.stage-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(4, 17, 20, 0.62);
  pointer-events: none;
}
#stage { touch-action: none; cursor: grab; }
#stage.dragging { cursor: grabbing; }
.side { --side-gap: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--side-gap); min-width: 380px; min-height: 480px; }
.preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; min-width: 0; }
.preview-row { display: flex; align-items: center; gap: 16px; max-width: 100%; min-width: 0; }
.preview-row canvas { border-radius: 50%; background: #ececec; min-width: 0; height: auto !important; }
.preview-row .pv { min-width: 0; }
.preview-row .pv canvas { max-width: 100%; }
.preview-wrap[data-editor-background] { padding: 12px; border-radius: 12px; max-width: 100%; box-sizing: border-box; }
.preview-wrap[data-editor-background] .preview-row canvas { background: transparent; }
.orientation-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.orientation-controls .btn { min-height: 44px; padding: 10px 8px; color: inherit; }
.orientation-controls .btn:focus-visible, #stage:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
#editor-view .orientation-controls { display: flex; flex-wrap: wrap; justify-content: center; }
#editor-view .orientation-controls .btn { width: auto; flex: 0 0 auto; }
.rotate-card .orientation-controls { max-width: 480px; margin: 16px auto; }
.preview-surface[data-editor-background][data-background="checkerboard"] {
  background: conic-gradient(#e4e4e4 25%, #fff 0 50%, #e4e4e4 0 75%, #fff 0) 0 0 / 24px 24px;
}
.preview-surface[data-editor-background][data-background="light"] { background: #fff; }
.preview-surface[data-editor-background][data-background="dark"] { background: #242424; }
.circle-preview { width: 100%; max-width: 300px; }
.circle-preview .preview-surface { width: 100%; aspect-ratio: 1; }
.circle-preview canvas { display: block; max-width: 100%; height: auto !important; }
.preview-backgrounds { border: 0; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.preview-backgrounds legend { width: 100%; margin-bottom: 4px; color: var(--ink-soft); font-size: 14px; text-align: center; }
.preview-backgrounds label { display: flex; align-items: center; gap: 5px; min-height: 44px; font-size: 14px; cursor: pointer; }
.preview-backgrounds input { accent-color: var(--violet); }
#editor-view .side > .preview-backgrounds { display: block; margin: calc(8px - var(--side-gap)) 0 0; text-align: center; white-space: nowrap; }
#editor-view .side > .preview-backgrounds legend { float: left; width: auto; margin: 0 6px 0 0; line-height: 44px; font-size: 12px; }
#editor-view .side > .preview-backgrounds label { display: inline-flex; gap: 3px; margin-right: 4px; font-size: 12px; }
#editor-view .side > .preview-backgrounds label:last-child { margin-right: 0; }
@media (max-width: 400px) {
  #editor-view .side > .preview-backgrounds { white-space: normal; min-width: 0; max-width: 100%; }
  #editor-view .side > .preview-backgrounds legend { float: none; width: 100%; margin: 0; line-height: 1.4; }
  .preview-row { gap: 8px; }
}
.rotate-card { text-align: center; }
.rotate-card:has(.utility-editor:not([hidden])) { background: transparent; box-shadow: none; padding: 24px 0; }
.utility-editor { margin-top: 24px; }
.utility-editor .stage-col { flex: 1 1 480px; min-width: 0; max-width: 480px; }
.utility-editor .side { flex: 1 1 320px; min-width: 0; max-width: 380px; min-height: 0; justify-content: flex-start; gap: 16px; }
.utility-editor .rotate-preview { margin: 0; width: 100%; min-height: 320px; border-radius: 12px; overflow: hidden; }
.utility-editor .orientation-controls { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }
.utility-editor .orientation-controls .btn { flex: 0 0 auto; }
.utility-editor .preview-backgrounds { display: flex; align-items: center; margin: 0; min-width: 0; }
.utility-editor .preview-backgrounds legend { float: left; width: auto; margin: 0 8px 0 0; line-height: 44px; font-size: 12px; }
.utility-editor .preview-backgrounds label { font-size: 12px; }
.utility-preview { display: flex; justify-content: center; align-items: center; width: 100%; padding: 12px; box-sizing: border-box; border-radius: 12px; }
.utility-preview canvas { display: block; max-width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.utility-editor .dl-col { width: 100%; }
.utility-editor .outsize { margin: 0; }
#rotate-editor .editor-row { align-items: stretch; }
#rotate-editor .rotate-preview { min-height:0; border-radius:0; background:none; }
#rotate-canvas { border-radius:0; touch-action:none; }
#rotate-editor .zoom-label { width:100%; }
.theme-rotate .content-section > p { max-width:var(--reading-width); margin:0 auto 24px; color:var(--ink-soft); text-align:center; }
.theme-rotate .content-section > h2:not(:first-child) { margin-top:64px; }
.theme-rotate .content-section > .faq-item { max-width:var(--reading-width); margin-inline:auto; }
#rotate-example .comparison-grid canvas, #rotate-example .comparison-grid img { display:block; width:100%; height:auto; border-radius:0; }
#rotate-example .step { padding:0; background:none; box-shadow:none; }
#rotate-editor .side .orientation-controls { justify-content: flex-start; }
#rotate-editor .side .dl-col { margin-top:0; padding-top:0; }
#rotate-editor .side { align-self:flex-start; }
.rotate-angle-row { display:flex; align-items:center; gap:8px; width:100%; font-size:14px; font-weight:500; }
.rotate-angle-row input { flex:1; width:0; min-width:0; }
.rotate-angle-row output { width:4ch; text-align:right; font-variant-numeric:tabular-nums; }
.rotate-angle-row .btn { padding:8px; min-height:44px; }
.aspect-settings { width: 100%; }
@media (max-width: 680px) {
  .utility-editor .editor-row { flex-direction: column; align-items: center; }
  .utility-editor .stage-col, .utility-editor .side { flex: none; width: 100%; max-width: 480px; }
  .utility-editor .rotate-preview { min-height: 0; }
}
@media (max-width: 400px) {
  .utility-editor .preview-backgrounds legend { float: none; width: 100%; line-height: 1.4; margin: 0; }
}
#aspect-editor { margin-top: 24px; }
.theme-aspect .hero h1 { font-size: clamp(30px, 4.4vw, 56px); }
.theme-aspect .hero h2 { margin-top: 48px; }
.theme-aspect .hero > p:not(.sub) { max-width: 760px; margin: 20px auto; }
#aspect-editor .rotate-preview { border-radius:0; min-height:0; background:none; }
#aspect-editor .side { align-self:flex-start; }
#aspect-editor .orientation-controls { justify-content:flex-start; }
#aspect-editor select { font: inherit; min-height: 44px; border: 1px solid currentColor; border-radius: 8px; padding: 8px 12px; }
#aspect-ratio { margin: 8px 12px; }
#aspect-canvas { touch-action: none; cursor: grab; }
#aspect-canvas:active { cursor: grabbing; }
#aspect-editor :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.rotate-card > .up-sub { margin: 12px 0; }
.rotate-preview { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 24px auto 0; }
.rotate-preview canvas { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; object-fit: contain; }
.rotate-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 24px 0; }
.rotate-card .btn:disabled { opacity: 0.5; cursor: wait; }
.rotate-card .btn:focus-visible, .preview-backgrounds input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 680px) {
  .rotate-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rotate-controls .btn { padding: 12px 8px; min-height: 48px; }
}
.zoom-label { font-size: 14px; color: var(--ink-soft); display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; max-width: 480px; }
.zoom-label input { flex: 1; width: 0; min-width: 0; }
.zoom-label + .rotate-angle-row { margin-top: 8px; }
#editor-view .rotate-angle-row + .orientation-controls,
.utility-editor .rotate-angle-row + .orientation-controls { margin: -8px 0 0; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 999px;
  background: #dcdcdc;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--violet);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--violet);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border: none;
  border-radius: 999px;
  background: #dcdcdc;
}
.outsize { font-size: 16px; color: var(--ink-soft); }
.outsize b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

.dl-col { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.dl-col .btn { width: 100%; padding: 28px 24px; }

.linkish {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--violet);
  align-self: center;
}
.linkish:hover { text-decoration: underline; }

/* Platform chips */
.chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 40px 0 0; }
.chips:not(.chips-secondary) .chip { flex: 1 1 0; text-align: center; min-width: 150px; }
.chips-secondary { padding: 14px 0 0; }
.chips-secondary .chip { width: calc((100% - 42px) / 4); text-align: center; }
/* Platform pages' first row holds 3 chips (self excluded), so the circle chip
   matches thirds there; chips read in ink, never in the page's link accent */
body[class*="theme-"] .chips-secondary .chip { width: calc((100% - 28px) / 3); }
body[class*="theme-"] .chip { color: var(--ink); }
body[class*="theme-"] .chip span { color: var(--ink-faint); }
.chip {
  background: var(--card);
  border-radius: 22px;
  corner-shape: squircle;
  box-shadow: inset 0 0 0 1px rgba(12, 41, 126, 0.07);
  padding: 17px 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: box-shadow 0.15s ease;
}
.chip:hover { text-decoration: none; box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1); }
.chip span { color: var(--ink-faint); font-weight: 400; }

/* Homepage Discord chip wears blurple on hover; click irises into the page */

/* Iris page-transition overlay (expands from the click point).
   Background mirrors the Discord page's first viewport so the hand-off is seamless. */
.iris {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(1000px 620px at 80% 120px, rgba(88, 101, 242, 0.32), transparent 70%),
    radial-gradient(1500px 950px at 50% 560px, #2c39e3 0%, rgba(44, 57, 227, 0) 65%),
    linear-gradient(180deg, #06082b 0%, #0d1148 60%, #10154f 100%);
  transition: clip-path 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Scroll-in reveal (elements drift up as they enter the viewport) */
.motion-enabled main > section > * { opacity: 0; transform: translateY(18px); }
html.motion-enabled.motion-ready main > section > .reveal { transition: opacity 0.45s ease var(--reveal-delay, 0ms), transform 0.45s ease var(--reveal-delay, 0ms), box-shadow 0.15s ease, background-color 0.15s ease; }
.motion-enabled main > section > .in { opacity: 1; transform: none; }

/* Sections */
section { padding: 100px 0 0; }
h2 {
  max-width: var(--reading-width);
  margin-inline: auto;
  font-family: inherit;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 32px;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--card);
  border-radius: var(--radius-tile);
  corner-shape: squircle;
  padding: 32px 28px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(12, 41, 126, 0.07);
  transition: box-shadow 0.15s ease;
}
.step:hover { box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1); }
.step b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.step p, .prose, .faq-item p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.prose { max-width: var(--reading-width); margin: 0 auto; text-align: center; font-size: 18px; letter-spacing: -0.023em; }

.faq { max-width: var(--reading-width); margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--hairline); padding: 6px 0; }
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.017em;
  padding: 16px 0;
  list-style-position: outside;
}
.faq-item p { padding: 0 0 18px 20px; }

/* Full-page drop overlay */
.drop-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(31, 31, 31, 0.92);
  display: flex; align-items: center; justify-content: center;
}
.drop-msg { color: #fff; font-size: clamp(20px, 7vw, 56px); font-weight: 700; line-height: 1.2; text-align: center; max-width: 100%; padding: 0 24px; box-sizing: border-box; }
.drop-overlay[hidden] { display: none; }
[hidden] { display: none !important; }

/* Curtain footer: fixed behind the page, revealed at scroll end */
.curtain {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: var(--plum);
  color: var(--lavender);
  padding: 48px 24px 0;
}
.f-inner { max-width: 1200px; margin: 0 auto; }
.f-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 28px; }
.f-desc { max-width: 300px; font-size: 14px; line-height: 1.5; }
.f-nav { display: flex; flex-direction: column; font-size: 14px; line-height: 2; }
.f-nav a { color: #9a9a9a; transition: color 0.15s ease; }
.f-nav a:hover { color: #fff; text-decoration: none; }
.f-nav b { color: #6f6f6f; font-size: 11px; letter-spacing: 1px; }
.wordmark {
  font-family: inherit;
  font-size: clamp(40px, 12vw, 160px);
  font-weight: 700;
  color: #505050;
  line-height: 1;
  margin-top: 24px;
  text-align: center;
  letter-spacing: -0.02em;
  user-select: none;
}
.wordmark span { display:inline-block; white-space:nowrap; }
.f-bottom { padding: 14px 0 22px; font-size: 12px; color: #7a7a7a; }
.directory-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 48px 0 4px;
}
.directory-badge { display: block; flex: 0 0 auto; line-height: 0; }
.directory-badge img { display: block; width: auto; height: 24px; max-width: none; }

/* Hero subtitle (platform pages) */
.sub { max-width: var(--reading-width); margin: 18px auto 0; font-size: 17px; color: var(--ink-soft); }

/* Size warning under the output line (platform pages, shown when crop < minimum) */
.size-warn { max-width: 480px; }

/* Spec table (platform pages) */
.spec-table { width: 100%; max-width: 760px; margin: 0 auto; border-collapse: collapse; font-size: 16px; }
.spec-table th, .spec-table td { padding: 14px 8px; border-bottom: 1px solid var(--hairline); text-align: left; }
.spec-table th { font-weight: 500; color: var(--ink-soft); width: 40%; }
.spec-note { max-width: 760px; margin: 14px auto 0; font-size: 13px; color: var(--ink-faint); }
.spec-table td { font-variant-numeric: tabular-nums; }

.tips-label { max-width: var(--reading-width); margin: 0 auto 8px; font-size: 15px; font-weight: 500; color: var(--ink-soft); }

/* Tips list (platform pages) */
.tips { max-width: var(--reading-width); margin: 0 auto 28px; padding-left: 24px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.tips li { margin-bottom: 10px; }

/* ---- Discord theme: deep-blue gradient, frosted hero card, blurple actions ---- */

.theme-discord {
  --bg: #1a2081;
  --card: rgba(255, 255, 255, 0.08);
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.8);
  --ink-faint: rgba(255, 255, 255, 0.55);
  --hairline: rgba(255, 255, 255, 0.16);
  --violet: #5865f2;
  --violet-deep: #4752c4;
  --plum: #000000;
  --radius-card: 80px;
}
/* Hero glow copied from discord.com's look: near-black top corners, a luminous
   blue bloom behind the tool, settling into flat deep blue for the sections. */
.theme-discord .page {
  background:
    radial-gradient(1000px 620px at 80% 120px, rgba(88, 101, 242, 0.32), transparent 70%),
    radial-gradient(1500px 950px at 50% 560px, #2c39e3 0%, rgba(44, 57, 227, 0) 65%),
    linear-gradient(180deg, #06082b 0%, #0e1250 30%, #1a2081 70%, #12175e 100%);
}
.theme-discord h1,
.theme-discord h2 {
  font-family: "Archivo Expanded", "Ubuntu", Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.theme-discord .hero h1 { font-size: clamp(30px, 2.7vw, 36px); }
.theme-discord a { color: #c7d0ff; }

/* Frosted hero card (backdrop blur over the gradient, like discord.com's 88px cards) */
.theme-discord .card {
  background: var(--card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: none;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.theme-discord .card:has(.upload-view:not([hidden])) {
  box-shadow: none;
}
/* Hover verdict (2026-08-18): homepage shadow + surface brighten, combined */
.theme-discord .card:has(.upload-view:not([hidden])):hover {
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
  background: rgba(255, 255, 255, 0.12);
}
.theme-discord .card:has(#editor-view:not([hidden])) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 24px 0;
}
.theme-discord .up-main { color: #fff; }
.theme-discord .up-error, .theme-discord .output-error { color: #ffb3b3; }
.theme-discord .size-warn { color: #ffb3b3; }

.theme-discord .stage-wrap { background: rgba(255, 255, 255, 0.06); }

/* Buttons: blurple primary, white secondary, 12px radius (discord.com spec) */
.theme-discord .btn {
  border-radius: 12px;
  corner-shape: round;
  box-shadow: none;
  transition: background-color 0.15s ease;
}
.theme-discord #dl-square { background: var(--violet); color: #fff; }
.theme-discord #dl-square:hover { background: var(--violet-deep); box-shadow: none; }
.theme-discord .btn-ghost { background: #fff; color: #23272a; }
.theme-discord .btn-ghost:hover { background: #e6e6e6; box-shadow: none; }
.theme-discord .linkish { color: #c7d0ff; }

.theme-discord input[type="range"] { background: rgba(255, 255, 255, 0.25); }
.theme-discord input[type="range"]::-moz-range-track { background: rgba(255, 255, 255, 0.25); }

/* Chat-row preview (own CSS drawing, no Discord assets) */
.chat-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  background: #313338;
  border-radius: 16px;
  corner-shape: round;
  padding: 18px 20px;
  text-align: left;
}
.chat-avatar { border-radius: 50%; flex: none; }
.chat-body { min-width: 0; }
.chat-meta { display: flex; align-items: baseline; gap: 10px; }
.chat-name { color: #f2f3f5; font-weight: 500; font-size: 16px; }
.chat-time { color: #949ba4; font-size: 12px; }
.chat-msg { color: #dbdee1; font-size: 15px; line-height: 1.4; margin-top: 2px; }

/* Circle previews with online-status dot */
.theme-discord .preview-row canvas, .theme-discord .chat-avatar { background: transparent; }
.pv { position: relative; display: inline-block; line-height: 0; }
.pv::after {
  content: "";
  position: absolute;
  right: 2.5%;
  bottom: 2.5%;
  width: 26%;
  height: 26%;
  background: #23a55a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(26, 32, 129, 0.9);
}

/* Dark-theme hover language: surfaces never move; feedback = surface brightens
   (shadows are invisible on a dark ground; light theme uses shadow instead) */
.theme-discord .chip {
  box-shadow: none;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.theme-discord .chip:hover {
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
  background: rgba(255, 255, 255, 0.16);
}
.theme-discord .step { box-shadow: none; }
.theme-discord .step:hover { box-shadow: none; }

/* Discord-flavored curtain: black like discord.com's footer */
.theme-discord .curtain { background: #000; }
.theme-discord .wordmark { color: #484848; }
.theme-discord .f-nav a:hover { color: #c7d0ff; }

/* ---- TikTok theme: flat black, rose-red action (tiktok.com 2026-08-18) ---- */

.theme-tiktok {
  --bg: #000000;
  --card: rgba(255, 255, 255, 0.08);
  --ink: rgba(255, 255, 255, 0.9);
  --ink-soft: rgba(255, 255, 255, 0.75);
  --ink-faint: rgba(255, 255, 255, 0.5);
  --hairline: rgba(255, 255, 255, 0.16);
  --violet: #fe2c55;
  --violet-deep: #e0264b;
  --plum: #161823;
}
.theme-tiktok .page { background: #000; }
.theme-tiktok .logo { color: #fff; }
.theme-tiktok .logo:hover { color: #fe2c55; }
.theme-tiktok a { color: #ff5c7d; }
.theme-tiktok .card {
  background: var(--card);
  box-shadow: none;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.theme-tiktok .card:has(.upload-view:not([hidden])) { box-shadow: none; }
.theme-tiktok .card:has(.upload-view:not([hidden])):hover {
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
  background: rgba(255, 255, 255, 0.12);
}
.theme-tiktok .card:has(#editor-view:not([hidden])) { background: transparent; box-shadow: none; padding: 24px 0; }
.theme-tiktok .up-main { color: #fff; }
.theme-tiktok .up-error, .theme-tiktok .size-warn, .theme-tiktok .output-error { color: #ff8fa5; }
.theme-tiktok .stage-wrap { background: rgba(255, 255, 255, 0.06); }
.theme-tiktok .btn { border-radius: 8px; corner-shape: round; box-shadow: none; transition: background-color 0.15s ease; }
.theme-tiktok .dl-col .btn:first-child { background: #fe2c55; color: #fff; }
.theme-tiktok .dl-col .btn:first-child:hover { background: #e0264b; box-shadow: none; }
.theme-tiktok .btn-ghost { background: #fff; color: #161823; }
.theme-tiktok .btn-ghost:hover { background: #e6e6e6; box-shadow: none; }
.theme-tiktok .linkish { color: #ff5c7d; }
.theme-tiktok input[type="range"] { background: rgba(255, 255, 255, 0.25); }
.theme-tiktok input[type="range"]::-moz-range-track { background: rgba(255, 255, 255, 0.25); }
.theme-tiktok .preview-row canvas { background: transparent; }
.theme-tiktok .chip { box-shadow: none; transition: box-shadow 0.15s ease, background-color 0.15s ease; }
.theme-tiktok .chip:hover { box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1); background: rgba(255, 255, 255, 0.16); }
.theme-tiktok .step { box-shadow: none; }
.theme-tiktok .curtain { background: #161823; }
.theme-tiktok .wordmark { color: #50536c; }

/* TikTok profile-header mock */
.tt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #121212;
  border-radius: 16px;
  corner-shape: round;
  padding: 24px 20px;
}
.tt-avatar { border-radius: 50%; }
.tt-handle { color: #fff; font-weight: 700; font-size: 17px; }
.tt-follow {
  background: #fe2c55;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  padding: 8px 40px;
}

/* ---- LinkedIn theme: warm light ground, blue pill actions (linkedin.com 2026-08-18) ---- */

.theme-linkedin {
  --bg: #f4f2ee;
  --violet: #0a66c2;
  --violet-deep: #004182;
}
.theme-linkedin h1, .theme-linkedin h2 {
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
.theme-linkedin .hero h1 { font-weight: 400; }
.theme-linkedin .btn { border-radius: 999px; corner-shape: round; }
.theme-linkedin .dl-col .btn:first-child { background: #0a66c2; color: #fff; box-shadow: none; }
.theme-linkedin .dl-col .btn:first-child:hover { background: #004182; box-shadow: none; }
.theme-linkedin .btn-ghost { color: #0a66c2; box-shadow: inset 0 0 0 1.5px #0a66c2; }
.theme-linkedin .btn-ghost:hover { background: #f0f7ff; }
.theme-linkedin .chip { border-radius: 999px; corner-shape: round; }

/* LinkedIn profile-card mock */
.li-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  corner-shape: round;
  padding: 24px 20px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.li-avatar { border-radius: 50%; }
.li-name { color: rgba(0, 0, 0, 0.9); font-weight: 700; font-size: 17px; margin-top: 6px; }
.li-headline { color: rgba(0, 0, 0, 0.6); font-size: 14px; }

/* ---- Facebook theme: cool light ground, bright blue actions (facebook.com 2026-08-18) ---- */

.theme-facebook {
  --bg: #f0f2f5;
  --violet: #0064e0;
  --violet-deep: #0053ba;
}
.theme-facebook h1, .theme-facebook h2 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.theme-facebook .btn { border-radius: 22px; corner-shape: round; }
.theme-facebook .dl-col .btn:first-child { background: #0064e0; color: #fff; box-shadow: none; }
.theme-facebook .dl-col .btn:first-child:hover { background: #0053ba; box-shadow: none; }
.theme-facebook .btn-ghost { background: #e4e6eb; color: #1c1e21; box-shadow: none; }
.theme-facebook .btn-ghost:hover { background: #d8dadf; box-shadow: none; }

/* Facebook comment-row mock */
.fb-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  corner-shape: round;
  padding: 18px 20px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  text-align: left;
}
.fb-avatar { border-radius: 50%; flex: none; }
.fb-bubble { background: #f0f2f5; border-radius: 18px; padding: 10px 14px; min-width: 0; }
.fb-name { color: #1c1e21; font-weight: 700; font-size: 13px; }
.fb-msg { color: #1c1e21; font-size: 15px; line-height: 1.35; margin-top: 2px; }

/* Platform-themed pages retain their compact download button padding. */
body[class*="theme-"] .dl-col .btn { padding: 16px 24px; }

.crop-example h2 { text-wrap: balance; }
.crop-example .prose { margin-bottom: 24px; }
.bottom-upload { margin-top: 64px; text-align: center; }
.upload-slot { width: min(100%, 480px); min-height: 72px; margin-inline: auto; }
.bottom-upload .btn, .floating-upload.btn { background: var(--violet); color: #fff; width: min(100%, 480px); min-height: 72px; padding: 20px 32px; font-size: 24px; box-shadow: none; }
.upload-help { max-width: 460px; margin: 16px auto 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.comparison-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; max-width: 720px; margin-inline: auto; text-align: left; }
.comparison-grid figure { margin: 0; min-width: 0; }
.comparison-grid figcaption, .comparison-preview h3, #rotate-example .step b { font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: normal; }
.comparison-grid figcaption { margin-bottom: 14px; }
.comparison-original { grid-column: 1; grid-row: 1 / 3; }
.comparison-original img, .comparison-result > canvas { display: block; width: 100%; height: auto; border-radius: 12px; }
.comparison-result { grid-column: 2; grid-row: 1; }
.comparison-caption { margin-top: 16px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.comparison-preview { grid-column: 2; grid-row: 2; min-width: 0; }
.comparison-platform .comparison-preview { grid-row: 1; }
.comparison-platform .comparison-result { grid-row: 2; }
.comparison-preview h3 { margin: 0 0 12px; }
.comparison-preview .li-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 18px; text-align: left; }
.comparison-preview .li-avatar { grid-row: 1 / 3; }
.comparison-preview .li-name { align-self: end; margin: 0; }
.comparison-preview .li-headline { align-self: start; }
.comparison-transparent { background-color: #fff; background-image: conic-gradient(#e5e7e9 25%, transparent 0 50%, #e5e7e9 0 75%, transparent 0); background-size: 20px 20px; }
.comparison-circle-examples { grid-template-columns: 220px 120px; max-width: 420px; justify-content: center; }
.comparison-circle-examples .comparison-result { display: flex; flex-direction: column; align-items: center; }
.circle-background-examples { display: grid; grid-template-columns: 120px; gap: 12px; justify-content: center; }
.circle-background-examples canvas { display: block; width: 100%; height: auto; border-radius: 12px; }
.circle-background-lavender { background: #e6ddf5; }
.circle-background-peach { background: #ffe0ca; }
@media (max-width: 600px) {
  .comparison-circle-examples { grid-template-columns: minmax(0, 1fr); }
  .comparison-circle-examples .comparison-original { grid-column: 1; grid-row: 1; max-width: 180px; justify-self: center; }
  .comparison-circle-examples .comparison-result { grid-column: 1; grid-row: 2; width: 100%; }
}
@media (max-width: 600px) {
  .comparison-grid { gap: 24px 14px; }
  .comparison-original { grid-row: 1; }
  .comparison-grid figcaption { margin-bottom: 10px; }
  .comparison-caption { font-size: 12px; margin-top: 10px; }
  .comparison-preview { grid-column: 1 / -1; }
  .comparison-platform .comparison-original { grid-row: 2; }
  .comparison-platform .comparison-preview { grid-row: 1; }
}

.floating-upload.btn { bottom: max(16px, env(safe-area-inset-bottom)); }
.floating-upload.btn.is-floating {
  position: fixed;
  z-index: 20;
  left: 50%;
  translate: -50% 0;
}
.floating-upload.btn.is-floating.is-entering { animation: upload-enter 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes upload-enter {
  from { transform: translateY(calc(100% + max(16px, env(safe-area-inset-bottom)) + 16px)); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-upload.btn.is-floating.is-entering { animation: none; }
}

/* Discord output size is shared by both download actions. */
.output-controls { position: relative; text-align: left; }
.output-toggle { display: flex; align-items: center; gap: 8px; min-height: 32px; background: none; border: 0; padding: 0; color: var(--ink-soft); font: inherit; font-size: 16px; cursor: pointer; }
.output-toggle b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.output-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.output-toggle:focus-visible { outline: 2px solid #c7d0ff; outline-offset: 4px; border-radius: 4px; }
.output-menu { position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 0; width: min(360px, calc(100vw - 48px)); padding: 16px; background: #fff; color: #23272a; border: 1px solid #d4d5da; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.output-menu fieldset { border: 0; min-width: 0; margin: 0; padding: 0; }
.output-menu[data-placement="below"] { bottom:auto; top:calc(100% + 8px); }
.output-menu[data-placement="flow"] { position:relative; bottom:auto; margin-top:8px; }
.ratio-options { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.output-menu .btn:focus-visible, #aspect-editor .output-menu :focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.output-menu .output-option-custom button.btn { width:80px; min-width:0; height:44px; min-height:44px; padding:8px 12px; margin:0; align-self:end; }
.output-menu legend { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.output-option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px; border-radius: 6px; font-size: 16px; cursor: pointer; }
.output-option:has(input:checked) { background: color-mix(in srgb, var(--violet) 10%, white); }
.output-option input { accent-color: var(--violet); flex: none; }
.output-option small { margin-left: auto; font-size: 12px; color: #62656c; white-space: nowrap; }
.output-hint { margin-top: 10px; color: #62656c; font-size: 13px; }
.output-option-custom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; cursor:default; }
.output-option-custom:has(input:checked) { background: color-mix(in srgb, var(--violet) 10%, white); }
.output-custom-label { display: flex; align-items: center; gap: 10px; min-height: 24px; cursor: pointer; }
.output-custom, .output-menu .aspect-custom { display:grid; grid-template-columns:minmax(0, 1fr) 80px; gap:8px; align-items:end; margin:0; padding:0; }
.output-menu .aspect-custom { grid-template-columns:repeat(2, minmax(0, 1fr)) 80px; }
.output-menu .aspect-custom label { display:grid; gap:8px; min-width:0; text-align:left; }
.output-custom input, .output-menu .aspect-custom input { width:100%; min-width:0; min-height:44px; padding:6px 8px; border:1px solid #b7bac4; border-radius:6px; background:#fff; color:#23272a; font:inherit; font-size:16px; }
.output-menu .output-option-custom input:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.output-custom p, .output-menu .aspect-custom p { grid-column:1 / -1; margin:0; padding:0; text-align:left; }
.output-error { margin-top: 10px; }
.output-menu .output-error { color: #c0392b; }
.theme-tiktok .output-option:has(input:checked) { background: #f1f1f2; }
.theme-tiktok .output-menu input[type="radio"] { accent-color: #161823; }
.theme-tiktok .output-custom input { background: #fff; border-color: rgba(22, 24, 35, 0.12); color: #161823; caret-color: #fe2c55; }
.theme-tiktok .output-menu .output-option-custom input:focus-visible,
.theme-tiktok .output-menu .btn:focus-visible { outline-color: #62636a; }
.output-upscale { margin-top: 6px; color: #ffcf8a; font-size: 14px; }

/* Shared label and supporting-copy weight; body prose remains regular. */
label, legend, .up-sub, .outsize, .output-toggle, .output-hint,
.output-upscale, .spec-note, .comparison-caption, .upload-help { font-weight: 500; }
.theme-discord .dl-col .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.theme-discord .dl-col { gap: 10px; }
@media (min-width: 900px) {
  .theme-discord:has(#editor-view:not([hidden])) .top { padding-top: 16px; }
  .theme-discord:has(#editor-view:not([hidden])) .hero { padding-top: 20px; }
  .theme-discord:has(#editor-view:not([hidden])) .sub { margin-top: 12px; }
  .theme-discord .card:has(#editor-view:not([hidden])) { margin-top: 20px; padding: 0; }
  .theme-discord .editor-row { flex-wrap: nowrap; align-items: stretch; gap: 40px; }
  .theme-discord .stage-col { width: max(220px, min(480px, calc(100svh - 270px), calc(100vw - 448px))); flex: none; gap: 12px; }
  .theme-discord .side { --side-gap: 20px; min-width: 0; min-height: 0; width: 360px; justify-content: space-between; }
  .theme-discord .zoom-label { flex-direction: row; align-items: center; gap: 14px; min-height: 24px; }
  .theme-discord .zoom-label input { min-width: 0; }
  .theme-discord .dl-col .btn { padding: 12px 16px; }
}
@media (min-width: 900px) and (max-height: 650px) {
  .theme-discord:has(#editor-view:not([hidden])) .hero { padding-top: 12px; }
  .theme-discord .side { --side-gap: 8px; }
  .theme-discord .chat-card { padding: 10px 16px; }
}
@media (pointer: coarse) {
  .output-toggle, .output-option { min-height: 44px; }
}

/* Platform chips wear their platform's color on hover, on every page.
   .chip.chip-x outranks each theme's generic .chip:hover by source order;
   the hover shadow comes from whichever page rule already provides it. */
.chip.chip-discord, .chip.chip-tiktok, .chip.chip-linkedin, .chip.chip-facebook {
  transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.chip.chip-discord:hover { background: #5865f2; color: #fff; }
.chip.chip-discord:hover span { color: rgba(255, 255, 255, 0.8); }
.chip.chip-tiktok:hover { background: #16181d; color: #fff; }
.chip.chip-tiktok:hover span { color: rgba(255, 255, 255, 0.7); }
.chip.chip-linkedin:hover { background: #0a66c2; color: #fff; }
.chip.chip-linkedin:hover span { color: rgba(255, 255, 255, 0.8); }
.chip.chip-facebook:hover { background: #0064e0; color: #fff; }
.chip.chip-facebook:hover span { color: rgba(255, 255, 255, 0.8); }

/* Circle Crop chip: a teal circle grows from the center on hover (every page) */
.chip.chip-circle {
  background-image: radial-gradient(closest-side, rgba(26, 188, 156, 0.45) 99%, rgba(26, 188, 156, 0) 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0px 0px;
  transition: background-size 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.15s ease;
}
.chip.chip-circle:hover {
  /* Re-declare the dot layer: theme hovers set the background shorthand,
     which would otherwise wipe the gradient image. */
  background-image: radial-gradient(closest-side, rgba(26, 188, 156, 0.45) 99%, rgba(26, 188, 156, 0) 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44px 44px;
  box-shadow: 0 15px 30px rgba(7, 25, 31, 0.1);
}
/* Dark grounds need a brighter dot to read through the frost */
body[class*="theme-"] .chip.chip-circle:hover {
  background-image: radial-gradient(closest-side, rgba(26, 188, 156, 0.8) 99%, rgba(26, 188, 156, 0) 100%);
}
.theme-linkedin .chip.chip-circle:hover,
.theme-facebook .chip.chip-circle:hover {
  background-image: radial-gradient(closest-side, rgba(26, 188, 156, 0.45) 99%, rgba(26, 188, 156, 0) 100%);
}

@media (max-width: 680px) {
  .steps { grid-template-columns: 1fr; }
  .card { padding: 40px 20px; }
  .side { min-height: 0; min-width: 0; width: 100%; }
  .chips:not(.chips-secondary) .chip { flex: 1 1 100%; }
  .chips-secondary .chip,
  body[class*="theme-"] .chips-secondary .chip { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled main > section > * { opacity: 1; transform: none; }
  * { transition: none !important; }
}

.output-option[hidden] { display: none; }
.theme-aspect .rotate-preview { position: relative; }
.banner-guide { position: absolute; left: 2%; bottom: -8%; width: 16%; aspect-ratio: 1; border: 2px dashed #fff; border-radius: 50%; background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 12px; line-height: 1; display: flex; justify-content: center; padding-top: 18%; box-sizing: border-box; pointer-events: none; }
.banner-guide[hidden] { display: none; }