/* Sizely page: the design tokens, fonts, buttons and panels of the desktop app, over the shared style.css. */
@font-face {
  font-family: "Nunito";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/nunito-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/nunito-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/nunito-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/nunito-latin-800-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/geist-mono-latin-400-normal.woff2") format("woff2");
}

.theme-sizely {
  /* App tokens */
  --bg-base: #14151b;
  --bg-surface: #1b1d25;
  --bg-elevated: #23262f;
  --bg-hover: #2b2f3a;
  --bg-inset: #101117;
  --orange: #ff8a4c;
  --orange-bright: #ffa676;
  --orange-deep: #d9652b;
  --orange-ink: #2a1408;
  --peach: #ffc4a3;
  --mint: #9be8c6;
  --sky: #9ccfff;
  --lavender: #c3b2ff;
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* The shared tokens of style.css, in the colors of the app */
  --bg-0: var(--bg-elevated);
  --bg-1: var(--bg-surface);
  --bg-2: var(--bg-surface);
  --bg-3: var(--bg-hover);
  --line: #2e313d;
  --line-strong: #3d4150;
  --text: #f4f1ec;
  --text-2: #bdbac8;
  --text-3: #8a889c;
  --cyan: var(--orange-bright);
  --blue: var(--orange);
  --violet: var(--lavender);
  --magenta: var(--peach);
  --lime: var(--mint);
  --amber: #ffe39a;
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Nunito", "Segoe UI", system-ui, sans-serif;
  --radius: 26px;
}

/* Background: the 3D view of the app. The grid is on the .sky canvas, between these two layers. */
.theme-sizely::before {
  background: var(--bg-elevated);
}

.theme-sizely::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 32% at 50% 52%, rgba(255, 138, 76, 0.1) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 18% 20%, rgba(195, 178, 255, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 78%, rgba(156, 207, 255, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(8, 9, 13, 0.35) 100%);
}

.theme-sizely a:not(.btn):not(.brand) {
  transition: color 0.12s;
}

/* Header */
.theme-sizely .site-header {
  background: rgba(20, 21, 27, 0.86);
}

.theme-sizely .nav a,
.theme-sizely .subnav a,
.theme-sizely .brand {
  font-weight: 700;
}

.theme-sizely .nav a[aria-current] {
  color: var(--peach);
  background: rgba(255, 138, 76, 0.14);
}

.theme-sizely .nav a.lang {
  color: var(--orange-bright);
  border-color: rgba(255, 138, 76, 0.55);
  background: rgba(255, 138, 76, 0.14);
  box-shadow: none;
}

.theme-sizely .nav a.lang:hover {
  color: var(--orange-ink);
  background: var(--orange-bright);
}

.theme-sizely .subnav a:hover {
  color: var(--orange-bright);
}

/* Hero */
.theme-sizely .hero h1 {
  font-weight: 800;
  background: linear-gradient(100deg, #ffc4a3, #ff8a4c 45%, #c3b2ff);
  -webkit-background-clip: text;
  background-clip: text;
}

.theme-sizely .tagline {
  font-weight: 700;
}

.theme-sizely .eyebrow {
  color: var(--orange-bright);
  font-weight: 800;
}

.theme-sizely .eyebrow::before {
  background: var(--mint);
  box-shadow: 0 0 10px rgba(155, 232, 198, 0.7);
}

.theme-sizely .badges li {
  background: var(--bg-inset);
  border-color: var(--line);
  font-weight: 600;
}

.theme-sizely .version {
  color: var(--text-2);
}

.theme-sizely .hero-art img {
  border-radius: 22%;
  animation: none;
  box-shadow: none;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 22px rgba(255, 138, 76, 0.32));
}

.theme-sizely .halo {
  background: radial-gradient(circle, rgba(255, 138, 76, 0.38), rgba(195, 178, 255, 0.12) 55%, transparent 72%);
  filter: blur(30px);
  animation: none;
}

/* Tactile buttons of the app */
.theme-sizely .btn {
  --face-top: var(--bg-hover);
  --face-bottom: var(--bg-elevated);
  --lip: #15171e;
  min-height: 42px;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  color: #f4f1ec;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--face-top), var(--face-bottom));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 4px 0 var(--lip),
    0 10px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}

.theme-sizely .btn .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.theme-sizely .btn:hover {
  outline: 2px solid #ffe2cf;
  outline-offset: 1px;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 5px 0 var(--lip),
    0 14px 22px rgba(0, 0, 0, 0.4);
}

.theme-sizely .btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 2px 6px rgba(0, 0, 0, 0.2),
    0 1px 0 var(--lip),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

.theme-sizely .btn-primary {
  --face-top: var(--orange-bright);
  --face-bottom: var(--orange);
  --lip: var(--orange-deep);
  color: var(--orange-ink);
  background: linear-gradient(180deg, var(--face-top), var(--face-bottom));
}

.theme-sizely .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1),
    0 5px 0 var(--lip),
    0 14px 26px rgba(255, 138, 76, 0.32);
}

/* A real window of the app */
.theme-sizely .shot {
  padding: 0 0 72px;
}

.app-window {
  margin: 0;
}

.app-window img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 40px rgba(255, 138, 76, 0.12);
}

.app-window figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-2);
}

/* Sections and panels */
.theme-sizely .alt {
  background: rgba(20, 21, 27, 0.62);
  border-color: var(--line);
}

.theme-sizely .section-head p {
  color: var(--text-2);
}

.theme-sizely h2,
.theme-sizely h3 {
  font-weight: 800;
}

.theme-sizely .card,
.theme-sizely .steps li {
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface));
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--edge-light), var(--shadow-md);
}

.theme-sizely .card:hover,
.theme-sizely .steps li:hover {
  border-color: var(--line-strong);
  box-shadow: var(--edge-light), var(--shadow-md);
}

.theme-sizely .card p,
.theme-sizely .steps p {
  color: var(--text-2);
}

/* Icon tiles, as in the panels of the app; each one takes a pastel of the palette */
.theme-sizely .steps li:nth-child(4n + 1),
.theme-sizely .card:nth-child(4n + 1) {
  --tile: var(--peach);
  --tile-rgb: 255, 196, 163;
}

.theme-sizely .steps li:nth-child(4n + 2),
.theme-sizely .card:nth-child(4n + 2) {
  --tile: var(--lavender);
  --tile-rgb: 195, 178, 255;
}

.theme-sizely .steps li:nth-child(4n + 3),
.theme-sizely .card:nth-child(4n + 3) {
  --tile: var(--mint);
  --tile-rgb: 155, 232, 198;
}

.theme-sizely .steps li:nth-child(4n + 4),
.theme-sizely .card:nth-child(4n + 4) {
  --tile: var(--sky);
  --tile-rgb: 156, 207, 255;
}

.theme-sizely .step-icon,
.tile {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: var(--tile);
  background: rgba(var(--tile-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--tile-rgb), 0.28);
}

.theme-sizely .step-icon .icon,
.tile .icon {
  width: 22px;
  height: 22px;
  filter: none;
}

.theme-sizely .card.highlight {
  border-color: rgba(255, 138, 76, 0.45);
  background: linear-gradient(110deg, rgba(255, 138, 76, 0.16), rgba(195, 178, 255, 0.05) 60%, var(--bg-surface)), var(--bg-surface);
}

.theme-sizely .wand {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: var(--orange-ink);
  background: linear-gradient(180deg, var(--orange-bright), var(--orange));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 0 var(--orange-deep),
    0 10px 26px rgba(255, 138, 76, 0.32);
  animation: none;
}

.theme-sizely .wand .icon {
  width: 28px;
  height: 28px;
  filter: none;
}

.theme-sizely .card li {
  color: var(--text-2);
}

.theme-sizely .site-footer {
  background: rgba(20, 21, 27, 0.86);
}

.theme-sizely .site-footer p,
.theme-sizely .support p {
  color: var(--text-2);
}

@media (max-width: 640px) {
  .theme-sizely .shot {
    padding-bottom: 48px;
  }
}