/* Embossify - site styles. Dark, glassy hero with a live relief preview; clean light content. */

@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/raleway-400.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/raleway-600.woff2") format("woff2"); }

:root {
  --ink: #090c13;
  --ink-2: #111827;
  --ink-3: #1b2436;
  --line-d: rgba(255, 255, 255, .1);
  --accent: #1aa3e8;
  --accent-dark: #0b7fb8;
  --cta: #3fb868;
  --cta-dark: #2f9a53;
  --glow-a: #1aa3e8;
  --glow-b: #57d18a;
  --bg: #f4f6f9;
  --card: #fff;
  --text: #1c2230;
  --muted: #667085;
  --line: #e4e7ec;
  --danger: #b94a48;
  --radius: 14px;
  --header-h: 76px;
  --wrap: clamp(1160px, 78vw, 2000px);
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 30px rgba(16, 24, 40, .08);
  --font: "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Raleway", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  font: 16px/1.65 var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, video, iframe, canvas { max-width: 100%; }
img { height: auto; }
a { color: var(--accent-dark); }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; margin: 0 0 .55em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f7f8fa; border: 1px solid var(--line); border-radius: 10px; padding: 16px; font-size: .9rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
.grad { background: linear-gradient(100deg, var(--glow-a), var(--glow-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Header and menu ---------- */
/* The header floats over the dark top section of every page: no band of its own. It gains a glass
   background only once the page has scrolled (or the mobile menu is open) so links stay readable. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s; }
.site-header.scrolled, .site-header.menu-open { background: rgba(9, 12, 19, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--line-d); }
.site-header.menu-open { background: rgba(9, 12, 19, .97); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 12px; }
.brand { display: flex; align-items: center; padding: 8px 0; flex: 0 0 auto; }
.brand img { display: block; height: 34px; width: auto; max-width: none; flex: none; aspect-ratio: 200 / 30; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-d); color: #e8edf7; padding: 8px 10px; cursor: pointer; border-radius: 10px; }
.nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(255, 255, 255, .08); }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; gap: 4px; }
.nav li { position: relative; }
.nav a, .nav .sub-toggle { color: #dbe3f2; text-decoration: none; }
.nav > ul > li > a { text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.nav > ul > li > a { position: relative; display: block; padding: 9px 14px; font-size: 15px; border-radius: 10px; transition: background .15s, color .15s; }
.nav li:hover > a, .nav li:focus-within > a, .nav a:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.nav > ul > li.active > a { color: #fff; }
.nav > ul > li.active > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--glow-a), var(--glow-b)); }
.nav .sub-toggle { display: none; }
/* The Terra item's label wears the blue-green gradient (it follows the holiday colors when a holiday theme is on). */
.nav a[href="/terra"] > .nl { background: linear-gradient(100deg, var(--glow-a), var(--glow-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; font-weight: 600; }
.nav .has-sub > a::before { content: ""; position: absolute; right: 4px; top: 50%; margin-top: -2px; border: 4px solid transparent; border-top-color: currentColor; }
.nav .has-sub > a { padding-right: 22px; }
.nav .sub { display: none; position: absolute; right: 0; top: 100%; min-width: 150px; width: max-content; max-width: 300px; padding: 8px; background: #0f1522; border: 1px solid var(--line-d); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); z-index: 60; }
@media (min-width: 861px) { .nav > ul > li:has(> a[href="/terra"]) > .sub { right: auto; left: 50%; transform: translateX(-50%); } }
.nav .sub a { display: block; padding: 10px 12px; font-size: 14px; border-radius: 9px; }
.nav .sub .sub { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; }
.nav li:hover > .sub, .nav li:focus-within > .sub, .nav li.open > .sub { display: block; }
.nav .sub li:hover > a, .nav .sub li:focus-within > a { background: rgba(255, 255, 255, .08); color: #fff; }

/* Between the phone menu and a full desktop bar the logo and links shrink together; the logo never changes shape. */
@media (min-width: 861px) and (max-width: 1120px) {
  .brand img { height: clamp(24px, 3.2vw, 34px); }
  .nav > ul { gap: 0; }
  .nav > ul > li > a { padding: 9px clamp(7px, 1.1vw, 14px); font-size: clamp(13.5px, 1.45vw, 15px); }
  .nav .has-sub > a { padding-right: 20px; }
  .nav > ul > li.active > a::after { left: clamp(7px, 1.1vw, 14px); right: clamp(7px, 1.1vw, 14px); }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 70; background: #0b0f19; max-height: calc(100vh - var(--header-h)); overflow-y: auto; border-bottom: 1px solid var(--line-d); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); padding: 8px 12px 16px; }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav li { display: flex; flex-wrap: wrap; align-items: stretch; }
  .nav li > a { flex: 1 1 0; padding: 14px 14px; font-size: 16px; }
  .nav > ul > li > a { padding: 14px; }
  .nav > ul > li.active > a::after { display: none; }
  .nav > ul > li.active > a { background: rgba(255, 255, 255, .1); }
  .nav .has-sub > a::before { display: none; }
  .nav .has-sub > a { padding-right: 14px; }
  .nav .sub-toggle { display: block; flex: 0 0 52px; background: none; border: 0; cursor: pointer; border-radius: 10px; }
  .nav .sub-toggle:hover { background: rgba(255, 255, 255, .08); }
  .nav .sub-toggle::after { content: ""; display: inline-block; border: 5px solid transparent; border-top-color: #cdd5e5; transform: translateY(3px); }
  .nav li.open > .sub-toggle::after { border-top-color: transparent; border-bottom-color: #cdd5e5; transform: translateY(-3px); }
  .nav .sub, .nav li:hover > .sub, .nav li:focus-within > .sub { position: static; display: none; flex: 1 0 100%; box-shadow: none; background: rgba(255, 255, 255, .04); border: 0; border-radius: 10px; min-width: 0; }
  .nav li.open > .sub { display: block; }
  .nav .sub a { padding: 12px 14px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #eef2fb; padding: calc(var(--header-h) + clamp(28px, 4.5vw, 64px)) 0 clamp(44px, 6vw, 90px);
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(26, 163, 232, .28), transparent 62%),
    radial-gradient(760px 460px at -5% 105%, rgba(63, 184, 104, .22), transparent 60%),
    var(--ink);
}
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.hero h1 { color: #fff; margin-bottom: .45em; }
.hero .lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: #b9c3d8; max-width: 34em; }
.hero .lead p { margin-bottom: .8em; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; color: #9fd8f3; font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow-ico { flex: none; width: 28px; height: 28px; filter: drop-shadow(0 0 10px rgba(26, 163, 232, .35)); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 22px 0 0; }
.chips li { padding: 7px 14px; border-radius: 999px; font-size: .9rem; color: #dfe7f5; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-d); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
.formats { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-d); max-width: 34em; }
.formats-title { margin: 0 0 12px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa0bd; }
.format-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.format-list li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 9px; overflow: hidden; text-align: center; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .14); }
.format-list li::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 13px 13px 0; border-color: transparent #0a1020 rgba(26, 163, 232, .55) transparent; }
.format-list li b { font-size: 1.05rem; letter-spacing: .04em; background: linear-gradient(90deg, #6fe39b, #5cc8f5); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.format-list li small { font-size: .7rem; letter-spacing: .04em; color: #8fa0bd; }
.formats-note { margin: 0 0 8px; font-size: .92rem; color: #9fb0cc; }
.formats-link { color: #7fd0f5; font-size: .92rem; text-decoration: none; }
.formats-link:hover { color: #fff; text-decoration: underline; }

/* Studio: the converter, framed as glass */
.studio { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .15); border-radius: 22px; padding: 14px; box-shadow: 0 40px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stage { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: #060910; cursor: pointer; border: 1px solid rgba(255, 255, 255, .08); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-col { min-width: 0; }
.stage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; }
.stage-go { margin-top: 10px; padding-top: 11px; padding-bottom: 11px; font-size: .95rem; letter-spacing: .06em; }
.stage-col:fullscreen .stage-go, .stage-col:-webkit-full-screen .stage-go { display: none; }
.studio .stage-pick { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 15px; border-radius: 999px; cursor: pointer; color: #fff; font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); transition: background .15s, border-color .15s; }
.studio .stage-pick:hover, .studio .stage-pick:focus-within, .stage.drag + .stage-bar .stage-pick { background: rgba(26, 163, 232, .85); border-color: transparent; }
.stage-pick svg { width: 17px; height: 17px; flex: none; }
.stage.drag { outline: 2px dashed var(--glow-a); outline-offset: -8px; }.studio-controls { padding: 16px 6px 6px; }
.studio .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.studio label { color: #aeb9d0; font-size: .82rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.studio input[type="number"] { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.studio input[type="number"]:focus { border-color: var(--glow-a); outline-color: rgba(26, 163, 232, .35); }
.studio .switch > span:not(.slider) { color: #dce4f4; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.studio .switch .slider { background: rgba(255, 255, 255, .22); }
.studio .explained { color: #93a0ba; text-align: center; font-size: .88rem; margin: 12px 0 0; }
.file-chip { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; color: #dbe4f5; }
.file-chip.on { display: flex; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { background: none; border: 0; color: #9fb0cc; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* ---------- Page header band (inner pages) ---------- */
.page-head { color: #fff; padding: calc(var(--header-h) + clamp(22px, 4vw, 44px)) 0 clamp(30px, 5vw, 56px); background: radial-gradient(700px 300px at 90% 0%, rgba(26, 163, 232, .25), transparent 65%), radial-gradient(600px 300px at 0% 120%, rgba(63, 184, 104, .2), transparent 60%), var(--ink); }
.page-head h1 { margin: 0; color: #fff; }
.page-head p { margin: .6em 0 0; color: #b9c3d8; max-width: 42em; }
.page-body { padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 6vw, 72px); }

/* ---------- Sections, cards, grid ---------- */
.section { padding: clamp(44px, 6vw, 84px) 0; }
.section-head { text-align: center; max-width: 40em; margin: 0 auto 38px; }
.section-head p { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 32px); margin-bottom: 24px; }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: 72ch; }
.prose img { border-radius: 12px; }
.prose h2:not(:first-child) { margin-top: 1.7em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose.wide { max-width: none; }
.card.page-card { max-width: 920px; margin-left: auto; margin-right: auto; }

.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; }
.steps li { counter-increment: step; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 56px 26px 26px; }
.steps li::before { content: counter(step); position: absolute; top: 18px; left: 24px; font: 600 2.4rem/1 var(--font-head); background: linear-gradient(135deg, var(--glow-a), var(--glow-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps strong { display: block; font: 600 1.15rem var(--font-head); margin-bottom: 6px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; list-style: none; padding: 0; margin: 0 0 1em; }
.features li { position: relative; padding-left: 32px; }
.features li::before { content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 50%; background: #dcf5e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f9a53' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (max-width: 700px) { .features { grid-template-columns: 1fr; } }

.cta-band { background: radial-gradient(600px 240px at 80% 0%, rgba(26, 163, 232, .3), transparent 70%), var(--ink-2); color: #fff; border-radius: 22px; padding: clamp(28px, 5vw, 52px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.cta-band h2 { margin: 0; color: #fff; }
.cta-band p { margin: .3em 0 0; color: #b9c3d8; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font: inherit; font-weight: 600; padding: 12px 24px; border: 0; border-radius: 12px; background: var(--accent-dark); color: #fff; cursor: pointer; text-decoration: none; text-align: center; transition: transform .12s, box-shadow .15s, background .15s; }
.btn:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.btn-cta { background: linear-gradient(135deg, #3fb868, #1aa3e8); letter-spacing: .08em; box-shadow: 0 8px 24px rgba(26, 163, 232, .35); }
.btn-cta:hover { background: linear-gradient(135deg, #46c874, #2bb1f5); box-shadow: 0 12px 30px rgba(26, 163, 232, .5); }
.btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-block { display: block; width: 100%; }
.btn-soft { background: #eaf3fa; color: var(--accent-dark); margin-top: 10px; }
.btn-soft:hover { background: #d9ebf7; color: var(--accent-dark); }

/* ---------- 3D preview ---------- */
dialog.wide { width: min(860px, 100% - 24px); }
.viewer-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.viewer-gap { flex: 1; }
.chip-btn { font: inherit; font-size: .88rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; }
.chip-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.chip-btn[aria-pressed="true"] { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.chip-btn:focus-visible { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.viewer-stage { position: relative; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #26344f 0%, #101826 60%, #090c13 100%); }
.viewer-stage canvas { display: block; width: 100%; height: min(58vh, 480px); touch-action: none; cursor: grab; outline: none; }
.viewer-stage canvas:active { cursor: grabbing; }
.viewer-stage canvas:focus-visible { box-shadow: inset 0 0 0 3px rgba(26, 163, 232, .6); }
.viewer-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 20px; text-align: center; color: #cfd9ec; }
.viewer-msg[hidden] { display: none; }
.viewer-hint { margin: 10px 0 0; text-align: center; font-size: .85rem; color: var(--muted); }
dialog.wide .dlg-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Forms ---------- */
label { font-weight: 600; font-size: .95rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea {
  width: 100%; font: inherit; padding: 11px 14px; border: 1px solid #d0d5dd; border-radius: 11px; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(26, 163, 232, .28); border-color: var(--accent); }
textarea { min-height: 180px; resize: vertical; }
.field { margin-bottom: 18px; }
.field > label { display: block; margin-bottom: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -5000px; }
.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; border: 1px solid; }
.alert-error { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.alert-ok { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.note-box { padding: 12px 16px; border-radius: 12px; background: #eef5fa; border-left: 4px solid #1aa3e8; font-size: .92rem; line-height: 1.5; }
.order-mail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.order-mail p { margin: 0 0 10px; }
.studio .alert-error { background: rgba(240, 68, 56, .15); border-color: rgba(240, 68, 56, .4); color: #ffb4ab; }

.switch { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .slider { position: relative; width: 46px; height: 26px; flex: 0 0 46px; background: #c5cbd6; border-radius: 13px; transition: background .15s; }
.switch .slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.switch input:checked + .slider { background: var(--cta); }
.switch input:checked + .slider::after { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }

.meter { height: 10px; background: #e5e9f0; border-radius: 6px; overflow: hidden; margin: 14px 0 6px; }
.meter > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--glow-a), var(--glow-b)); transition: width .15s; }
.meter.busy > span { width: 100% !important; background: repeating-linear-gradient(45deg, var(--glow-a), var(--glow-a) 12px, var(--glow-b) 12px, var(--glow-b) 24px); background-size: 34px 34px; animation: stripes .8s linear infinite; }
@keyframes stripes { to { background-position: 34px 0; } }

/* ---------- Dialogs ---------- */
dialog { border: 0; border-radius: 20px; padding: 0; width: min(460px, 100% - 32px); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); color: var(--text); overflow: hidden; }
dialog::backdrop { background: rgba(5, 8, 14, .65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog .dlg-head { padding: 20px 26px 0; }
dialog .dlg-head h3 { margin: 0; font-size: 1.35rem; }
dialog .dlg-body { padding: 18px 26px 22px; }
dialog .dlg-foot { padding: 14px 26px; text-align: right; background: #f7f8fa; border-top: 1px solid var(--line); }
.result-option { padding: 14px 0; text-align: center; }
.result-option + .result-option { border-top: 1px solid var(--line); }
.result-option small { display: block; color: var(--muted); margin-top: 8px; }
.ok-badge { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #dcf5e5; color: #2f9a53; margin-bottom: 12px; }
.ok-badge svg { width: 32px; height: 32px; }

.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 14px; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Checkout, packs, order tables ---------- */
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.pack { cursor: pointer; display: block; }
.pack input { position: absolute; opacity: 0; }
.pack-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 24px 14px; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .15s, transform .12s, box-shadow .15s; }
.pack:hover .pack-card { transform: translateY(-2px); }
.pack input:checked + .pack-card { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(26, 163, 232, .15), var(--shadow); }
.pack input:focus-visible + .pack-card { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.pack-uses { font: 600 2.4rem/1 var(--font-head); background: linear-gradient(135deg, var(--glow-a), var(--glow-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack-label { color: var(--muted); font-size: .88rem; }
.pack-price { font: 600 1.5rem var(--font-head); margin-top: 10px; }
.pack-each { color: var(--muted); font-size: .85rem; }
table.params th[scope="row"] { width: 9em; background: none; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--muted); font-weight: 600; }
.redeem-box { margin-top: 14px; }
.redeem-box summary { cursor: pointer; color: var(--accent-dark); font-size: .92rem; text-align: center; }
.redeem-box form { margin-top: 12px; display: grid; gap: 10px; }

/* ---------- Code blocks, tables, ads ---------- */
.codeblock { position: relative; margin: 0 0 20px; border-radius: 14px; background: #0b1220; border: 1px solid #1d2a44; overflow: hidden; }
.codeblock[data-label]::before { content: attr(data-label); display: block; padding: 8px 16px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #7f8db0; background: #0f1a2e; border-bottom: 1px solid #1d2a44; }
.codeblock pre { margin: 0; border: 0; border-radius: 0; background: transparent; color: #d9e2f5; padding: 16px 92px 16px 18px; font: .88rem/1.65 ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, Menlo, monospace; overflow-x: auto; white-space: pre; }
.codeblock .copy { position: absolute; top: 8px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: 600 .78rem var(--font); color: #cfe0ff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; cursor: pointer; transition: background .15s; }
.codeblock .copy:hover { background: rgba(26, 163, 232, .35); }
.codeblock .copy.done { background: rgba(63, 184, 104, .35); color: #fff; }
.tok-m { color: #7ee2a8; }
.tok-s { color: #ffd479; }
.tok-c { color: #6f7f9e; }
.tok-u { color: #79c0ff; }
.table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 12px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table-wrap th, .table-wrap td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap th { background: #f7f8fa; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.table-wrap td:first-child { white-space: nowrap; }
.table-wrap tr:last-child td { border-bottom: 0; }
/* On phones every table (marked with .stack by site.js) becomes a list of cards instead of scrolling sideways. */
@media (max-width: 640px) {
  body table.stack.stack { display: block; width: 100%; min-width: 0; font-size: .93rem; border: 0; }
  body table.stack.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body table.stack.stack tbody, body table.stack.stack tr, body table.stack.stack td, body table.stack.stack th { display: block; width: auto; }
  body table.stack.stack tr { padding: 12px 14px 13px; border-bottom: 1px solid var(--line); }
  body table.stack.stack tr:last-child { border-bottom: 0; }
  body table.stack.stack td, body table.stack.stack th { padding: 2px 0; border: 0; white-space: normal; text-align: left; }
  body table.stack.stack td:first-child, body table.stack.stack th:first-child { padding-bottom: 5px; font-weight: 700; color: var(--text); }
  body table.stack.stack td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  body table.stack.stack.cols2 td::before { display: none; }
  .table-wrap, .help-sec .table-wrap { overflow: visible; }
}
table.params { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.params th, table.params td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.params tr:last-child td { border-bottom: 0; }
table.params th { background: #f7f8fa; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.prose code { background: #eef1f6; padding: 1px 7px; border-radius: 6px; font-size: .88em; }
.codeblock code { background: none; padding: 0; }
.ad-slot { margin: 24px auto; min-height: 0; text-align: center; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { flex-shrink: 0; background: var(--ink); color: #9aa6bd; padding: 36px 0; font-size: .92rem; border-top: 1px solid var(--line-d); }
.site-footer a { color: #cfd8ea; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "links social" "copy copy"; align-items: center; gap: 18px 32px; }
.site-footer .foot-links { grid-area: links; }
.site-footer .social { grid-area: social; justify-self: end; }
.site-footer .copyright { grid-area: copy; margin: 0; padding-top: 18px; text-align: center; border-top: 1px solid var(--line-d); }
.site-footer .foot-links, .site-footer .social { min-height: 32px; }
.site-footer .foot-links { font-size: .92rem; line-height: 32px; }
.site-footer .copyright { font-size: .88rem; line-height: 1.5; }
.site-footer .foot-links ul { gap: 0 26px; }
.site-footer .copyright a { color: #e9f1ff; }
@media (max-width: 720px) {
  .site-footer .foot-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "links" "social" "copy"; gap: 14px; }
  .site-footer .social { justify-self: start; }
}.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; }

/* ---------- Presets, tabs and option panels (converter) ---------- */
.studio-wrap { min-width: 0; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.presets-label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa0bd; margin-right: 2px; }
.preset { font: inherit; font-size: .88rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; color: #e9f4fb; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); transition: background .15s, border-color .15s; }
.preset:hover, .preset:focus-visible { background: rgba(26, 163, 232, .22); border-color: rgba(26, 163, 232, .6); outline: none; }
.preset.on { background: rgba(63, 184, 104, .22); border-color: rgba(63, 184, 104, .7); }
.preset-more { position: relative; }
.preset-more summary { list-style: none; cursor: pointer; font-size: .88rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; color: #cfe9f7; border: 1px dashed rgba(255, 255, 255, .3); }
.preset-more summary::-webkit-details-marker { display: none; }
.preset-more summary::after { content: ""; display: inline-block; margin-left: 8px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; vertical-align: middle; }
.preset-more[open] summary { background: rgba(255, 255, 255, .08); }
.preset-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; display: flex; flex-direction: column; gap: 6px; min-width: 260px; padding: 10px; background: #0f1522; border: 1px solid var(--line-d); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.preset-menu .preset { text-align: left; border-radius: 10px; }

.tabs { display: flex; gap: 4px; margin: 0 0 14px; padding: 4px; background: rgba(255, 255, 255, .06); border-radius: 12px; }
.tab { flex: 1; font: inherit; font-size: .9rem; font-weight: 600; padding: 8px 10px; border: 0; border-radius: 9px; cursor: pointer; color: #aeb9d0; background: transparent; transition: background .15s, color .15s; }
.tab:hover { color: #fff; }
.tab[aria-selected="true"] { background: rgba(26, 163, 232, .85); color: #fff; }
.tab:focus-visible { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.tab .ti { width: 16px; height: 16px; margin: 0 7px 0 0; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.tab[aria-selected="true"] .ti, .tab:hover .ti { opacity: 1; }
@media (max-width: 420px) { .tab .ti { display: none; } }
/* The tab bar always stays on one line: tabs tighten, then lose their icons, as the space shrinks */
.tabs { container-type: inline-size; flex-wrap: nowrap; }
.tab { flex: 1 1 auto; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 560px) { .tab { padding: 8px 6px; font-size: .86rem; } .tab .ti { width: 15px; height: 15px; margin-right: 5px; } .tabs .tab-more { padding-inline: 8px; } .tabs .tab-more .chev { margin-left: 5px; } }
@container (max-width: 500px) { .tabs:has(.tab-more) .tab .ti { display: none; } }
@container (max-width: 390px) { .tab { padding: 8px 4px; font-size: .82rem; } .tab .ti { display: none; } }
@container (max-width: 270px) { .tab { font-size: .74rem; } .tabs .tab-more { padding-inline: 5px; } }
@container (max-width: 330px) { .tab { padding-inline: 3px; } .tabs .tab-more .chev { margin-left: 3px; } }

/* Coin, shape and ready-made tiles pop out when you point at them */
.shape, .coin { transition: none; }
.shape:hover, .coin:hover { z-index: 3; }
.shape-card, .coin-card, .preset.ready { transition: transform .2s cubic-bezier(.2, .8, .3, 1.25), box-shadow .2s, background .15s, border-color .15s; }
.shape-art, .coin-art { transition: transform .22s cubic-bezier(.2, .8, .3, 1.4); }
.shape:hover .shape-card, .coin:hover .coin-card, .preset.ready:hover, .preset.ready:focus-visible, .shape input:focus-visible + .shape-card, .coin input:focus-visible + .coin-card { transform: translateY(-4px) scale(1.07); background: rgba(26, 163, 232, .16); border-color: rgba(26, 163, 232, .75); box-shadow: 0 14px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(26, 163, 232, .55); position: relative; z-index: 3; }
.shape:hover input:checked + .shape-card, .coin:hover input:checked + .coin-card, .preset.ready.on:hover { box-shadow: 0 14px 26px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--glow-a); }
.shape:hover .shape-art, .coin:hover .coin-art, .preset.ready:hover .shape-art, .preset.ready:focus-visible .shape-art { transform: scale(1.12) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .shape-card, .coin-card, .preset.ready, .shape-art, .coin-art { transition: none; } .shape:hover .shape-card, .coin:hover .coin-card, .preset.ready:hover, .shape:hover .shape-art, .coin:hover .coin-art, .preset.ready:hover .shape-art { transform: none; } }
.ready-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin: 0 0 16px; }
.preset.ready { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; height: 100%; padding: 10px 5px 9px; border-radius: 12px; text-align: center; line-height: 1.2; font-weight: 400; font-size: inherit; color: #cfd9ec; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.preset.ready.on { background: rgba(26, 163, 232, .2); border-color: var(--glow-a); color: #fff; box-shadow: inset 0 0 0 1px var(--glow-a); }
.preset.ready:focus-visible { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.shape[hidden] { display: none; }
.tab-intro { margin: -2px 0 12px; font-size: .84rem; line-height: 1.45; color: #9fb0cc; }
.tab-intro b { color: #cfe9f7; font-weight: 600; }
.tab-note { padding: 7px 11px; border-radius: 9px; color: #cfe9f7; background: rgba(26, 163, 232, .14); border: 1px solid rgba(26, 163, 232, .35); }
.tab-note[hidden] { display: none; }
.panel[hidden] { display: none; }
.studio .field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .studio .field-row.three { grid-template-columns: 1fr; } }
.studio select { width: 100%; padding: 11px 12px; font: inherit; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; }
.studio select option { color: #1c2230; }
.studio .hint { margin: 4px 0 12px; font-size: .85rem; color: #93a0ba; }
.studio .hint b { color: #e9f4fb; }
.range { display: grid; grid-template-columns: 128px minmax(0, 1fr) 34px; align-items: center; gap: 10px; margin-bottom: 12px; }
.range .lbl { margin: 0; }
.range input[type="range"] { width: 100%; accent-color: var(--glow-a); }
.range output { text-align: right; font-size: .85rem; color: #cfe9f7; font-variant-numeric: tabular-nums; }
.xform { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.studio .chip-btn { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #e9f4fb; }
.studio .chip-btn:hover { border-color: var(--glow-a); color: #fff; }
.studio .chip-btn[aria-pressed="true"] { background: rgba(26, 163, 232, .85); border-color: transparent; color: #fff; }
.shape-grid, .coin-grid { display: grid; grid-auto-rows: 1fr; gap: 8px; margin: 0 0 16px; }
.shape-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.coin-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.shape, .coin, .studio label.shape, .studio label.coin { position: relative; display: block; margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 400; color: inherit; min-width: 0; }
.shape input, .coin input { position: absolute; opacity: 0; }
.shape-card, .coin-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; height: 100%; padding: 10px 5px 8px; color: #cfd9ec; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); text-align: center; line-height: 1.2; transition: background .15s, border-color .15s; }
.shape:hover .shape-card, .coin:hover .coin-card { border-color: rgba(26, 163, 232, .6); }
.shape input:checked + .shape-card, .coin input:checked + .coin-card { background: rgba(26, 163, 232, .2); border-color: var(--glow-a); color: #fff; box-shadow: inset 0 0 0 1px var(--glow-a); }
.shape input:focus-visible + .shape-card, .coin input:focus-visible + .coin-card { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.shape-art { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; }
.shape-thumb { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; filter: url(#shape-lum); }
.shape-none { display: block; width: 40px; height: 30px; border: 2px solid #cfd9ec; border-radius: 4px; }
.shape-name { display: flex; align-items: center; justify-content: center; min-height: 2.4em; font-size: .74rem; overflow-wrap: anywhere; }
.coin-region { margin: 14px 0 8px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa0bd; }
.coin-region:first-of-type { margin-top: 4px; }
.coin-card { gap: 4px; padding-bottom: 9px; }
.coin-art { display: block; width: 92px; height: 92px; flex: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
.coin-art svg { display: block; width: 92px; height: 92px; }
.coin-name { display: flex; align-items: center; justify-content: center; min-height: 2.3em; font-size: .76rem; font-weight: 600; color: #e9f4fb; }
.coin-dim { font-size: .68rem; color: #8fa0bd; font-variant-numeric: tabular-nums; }
.coin input:checked + .coin-card .coin-dim { color: #cfe9f7; }
.result-dims { margin: 0 0 6px; text-align: center; color: var(--muted); font-size: .9rem; }

/* ---------- Examples page ---------- */
.example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .example-grid { grid-template-columns: 1fr; } }
.example { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.example-pair { display: grid; grid-template-columns: 1fr auto 1.35fr; align-items: stretch; gap: 0; background: linear-gradient(160deg, #0d1424, #111b30 60%, #0a101c); padding: 18px 14px 12px; }
.example-pair figure { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.example-pair figure > img, .example-open { flex: 1; min-height: 190px; width: 100%; border-radius: 12px; }
.example-pair figure > img { object-fit: contain; background: #05080f; border: 1px solid rgba(255, 255, 255, .08); }
.example-pair figcaption { margin-top: 8px; text-align: center; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa0bd; }
.example-arrow { align-self: center; padding: 0 8px; font-size: 1.6rem; color: var(--glow-a); }
.example-open { position: relative; padding: 0; border: 1px solid rgba(255, 255, 255, .08); background: radial-gradient(ellipse at 50% 40%, #1d2a45 0%, #0d1424 70%); cursor: pointer; overflow: hidden; }
.example-open img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
.example-open:hover img, .example-open:focus-visible img { transform: scale(1.04); }
.example-open:focus-visible { outline: 3px solid rgba(26, 163, 232, .6); outline-offset: 2px; }
.example-play { position: absolute; right: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff; background: rgba(26, 163, 232, .9); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.example-body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.example-body h2 { font-size: 1.35rem; margin-bottom: .35em; }
.example-body p { color: var(--muted); }
.example-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 4px 0 16px; }
.example-facts li { padding: 4px 11px; border-radius: 999px; font-size: .8rem; background: #eef3f9; color: #34445f; }
.example-actions { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) { .example-pair { grid-template-columns: 1fr; gap: 6px; } .example-arrow { transform: rotate(90deg); justify-self: center; } .example-pair figure > img, .example-open { min-height: 220px; } }

/* ---------- Advanced drop-down, coins, limits (converter) ---------- */
.studio .presets { margin: 0 0 14px; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.preset-reset { border-style: dashed; color: #aeb9d0; background: transparent; }
.studio .presets-label { margin: 4px 0 6px; }
.adv-sec h4 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa0bd; font-family: var(--font); font-weight: 600; }
.studio .limit { display: block; margin-top: 4px; font-size: .74rem; color: #7f8fab; }
.studio optgroup { color: #1c2230; }

/* Advanced is a drawer that opens under the page content, so nothing inside the form needs a scroll bar */
.studio .tab.used::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 8px 5px; border-radius: 50%; background: var(--glow-b); box-shadow: 0 0 8px var(--glow-b); }

/* Studio mode: a normal page (header and footer stay), preview on the left, every input on the right */
.studio { position: relative; }
.full-toggle { display: inline-flex; align-items: center; padding: 8px 14px; font: inherit; font-size: .85rem; font-weight: 600; color: #cfd9ec; text-decoration: none; background: transparent; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.full-toggle:hover, .full-toggle:focus-visible { background: rgba(26, 163, 232, .85); border-color: transparent; color: #fff; }
.hero.studio-page { padding: calc(var(--header-h) + 14px) 0 clamp(26px, 3vw, 44px); }
.studio-page .wrap { display: block; width: min(1800px, 100% - 32px); max-width: none; }
.studio-page .studio { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 470px); gap: 16px; align-items: start; }
.studio-page .stage-col { position: sticky; top: calc(var(--header-h) + 10px); display: flex; flex-direction: column; height: calc(100vh - var(--header-h) - 40px); height: calc(100svh - var(--header-h) - 40px); min-height: 460px; }
.studio-page .stage { flex: 1; aspect-ratio: auto; min-height: 0; }
.studio-page .studio-controls { padding: 4px 6px 4px 2px; }
.studio-page .studio-controls > .btn-cta { position: sticky; bottom: 10px; z-index: 2; box-shadow: 0 -16px 18px #12161f, 0 8px 24px rgba(26, 163, 232, .25); }
@media (max-width: 900px) {
  .studio-page .studio { grid-template-columns: minmax(0, 1fr); }
  .studio-page .stage-col { position: static; height: auto; min-height: 0; }
  .studio-page .stage { flex: none; aspect-ratio: 4 / 3; }
}
/* Learn: guide index and guide pages */
.page-card .table-wrap { overflow-x: auto; margin: 1.2em 0; }
.page-card table { border-collapse: collapse; width: 100%; }
.page-card th, .page-card td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.page-card th { background: #f1f6fb; }
.site-footer .social { gap: 8px; }
.site-footer .social svg { width: 17px; height: 17px; }
.site-footer .social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-d); color: #cfd8ea; transition: background .15s, color .15s, transform .12s; }
.site-footer .social a:hover, .site-footer .social a:focus-visible { background: rgba(26, 163, 232, .85); color: #fff; text-decoration: none; transform: translateY(-2px); }

/* Help page */
.help-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.help-toc { position: sticky; top: calc(var(--header-h) + 18px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 8px 10px 16px; max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; }
.help-toc p { margin: 0 0 8px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.help-toc ul { list-style: none; margin: 0; padding: 0; }
.help-toc a { display: block; padding: 7px 10px; margin-right: 6px; border-radius: 8px; color: #33415c; text-decoration: none; font-size: .9rem; line-height: 1.3; }
.help-toc a:hover, .help-toc a:focus-visible { background: #eaf4fb; color: #0b6fa0; }
.help-body > .lead { font-size: 1.12rem; color: #44506a; max-width: 46em; margin-bottom: 22px; }
.help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 26px; }
.help-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--radius); text-decoration: none; color: #fff; background: radial-gradient(260px 120px at 100% 0%, rgba(26, 163, 232, .35), transparent 70%), var(--ink-2); box-shadow: var(--shadow); transition: transform .12s, box-shadow .15s; }
.help-card:hover, .help-card:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(9, 12, 19, .28); color: #fff; }
.help-card strong { font-size: 1.05rem; }
.help-card > span:last-child { color: #b9c3d8; font-size: .88rem; }
.help-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #3fb868, #1aa3e8); color: #fff; flex: none; margin-bottom: 8px; }
.help-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.help-sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 32px); margin-bottom: 22px; scroll-margin-top: calc(var(--header-h) + 14px); }
.help-sec h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.help-sec h2 .help-ico { margin-bottom: 0; }
.help-sec h3 { margin: 1.4em 0 .4em; }
.help-steps { list-style: none; counter-reset: hs; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.help-steps li { counter-increment: hs; position: relative; padding: 14px 16px 14px 62px; background: #f5f9fc; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.help-steps li::before { content: counter(hs); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.help-steps span { color: #4a566f; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 6px 0 16px; }
.type-card { display: flex; flex-direction: column; gap: 4px; padding: 15px 16px; background: #f5f9fc; border: 1px solid var(--line); border-left: 4px solid #1aa3e8; border-radius: 12px; }
.type-card strong { color: var(--ink); }
.type-card span { color: #4a566f; font-size: .94rem; }
.callout { margin: 16px 0; padding: 14px 18px; border-radius: 12px; border: 1px solid; border-left-width: 5px; }
.callout strong { display: block; margin-bottom: 2px; }
.callout p { margin: 0; }
.callout.tip { background: #eefaf2; border-color: #b9e6c9; border-left-color: #3fb868; }
.callout.note { background: #eaf4fb; border-color: #bcdcf0; border-left-color: #1aa3e8; }
.callout.warn { background: #fff6e8; border-color: #f2d6a6; border-left-color: #e8960f; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .03em; }
.pill.free { background: #dcf5e5; color: #17753a; }
.pill.paid { background: #e3f1fb; color: #0b6fa0; }
details.faq { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: #f9fbfd; }
details.faq summary { cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 600; list-style: none; position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #1aa3e8; border-bottom: 2px solid #1aa3e8; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
details.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details.faq summary:hover { background: #eef5fa; border-radius: 12px; }
details.faq p { margin: 0; padding: 0 16px 16px; color: #44506a; }
.help-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: clamp(22px, 4vw, 36px); border-radius: 22px; color: #fff; background: radial-gradient(500px 220px at 85% 0%, rgba(26, 163, 232, .3), transparent 70%), var(--ink-2); }
.help-contact h2 { margin: 0 0 4px; color: #fff; font-size: 1.35rem; }
.help-contact p { margin: 0; color: #b9c3d8; max-width: 34em; }
@media (max-width: 900px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-toc { position: static; max-height: none; }
  .help-toc ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .help-toc a { background: #f1f6fb; margin: 0; }
}
.help-body.prose { max-width: none; }
.help-cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ---------- Learn, guides and Help: pages that pop ---------- */
.page-head { position: relative; overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 15%, transparent 75%); }
.page-head .wrap { position: relative; }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.page-head .deck { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: #c3cde1; max-width: 40em; margin: .7em 0 0; }
.crumb { margin: 0 0 10px !important; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #7fd0f5 !important; font-weight: 700; }
.crumb a { color: #7fd0f5; text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; }
.head-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0 !important; padding: 0; }
.head-stats span { padding: 5px 13px; border-radius: 999px; font-size: .82rem; color: #dfe7f5; background: rgba(255, 255, 255, .08); border: 1px solid var(--line-d); }
.page-art { position: relative; width: 310px; height: 200px; }
.page-art.single { width: 190px; height: 170px; }
.art-tile { position: absolute; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.art-1 { left: 0; top: 36px; transform: rotate(-9deg); }
.art-2 { left: 92px; top: 0; transform: rotate(4deg); }
.art-3 { left: 186px; top: 56px; transform: rotate(10deg); }
.page-art.single .art-2 { left: 24px; top: 14px; transform: rotate(-5deg); }
@media (max-width: 900px) { .page-art { display: none; } .page-head-grid { grid-template-columns: 1fr; } }

.gico { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 26%; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -8px 16px rgba(0, 0, 0, .14), 0 10px 22px rgba(9, 12, 19, .22); transition: transform .18s; flex: none; }
.gico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 55% at 25% 12%, rgba(255, 255, 255, .38), transparent 70%); pointer-events: none; }
.gico svg { width: 64%; height: 64%; position: relative; z-index: 1; }
.gico.sm { width: 44px; height: 44px; }
.gico.lg { width: 76px; height: 76px; }
.gico.xl { width: 104px; height: 104px; }
.gico.xxl { width: 140px; height: 140px; }

.learn-intro { max-width: 46em; margin-bottom: 26px; font-size: 1.08rem; color: #44506a; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px; margin-bottom: 32px; }
.guide-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: inherit; overflow: hidden; transition: transform .15s, box-shadow .18s, border-color .18s; }
.guide-card::before { content: ""; position: absolute; right: -50px; top: -50px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(closest-side, rgba(26, 163, 232, .14), transparent); transition: transform .3s; }
.guide-card:hover, .guide-card:focus-visible { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(9, 12, 19, .17); border-color: rgba(26, 163, 232, .55); }
.guide-card:hover::before { transform: scale(1.3); }
.guide-card:hover .gico { transform: rotate(-5deg) scale(1.07); }
.guide-card h2 { position: relative; margin: 8px 0 0; font-size: 1.2rem; line-height: 1.25; }
.guide-card p { position: relative; margin: 0; color: #54617b; flex: 1; font-size: .96rem; }
.guide-meta { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--muted); }
.guide-more { color: #0b7fb8; font-weight: 700; }
.guide-more i { font-style: normal; display: inline-block; transition: transform .15s; }
.guide-card:hover .guide-more i { transform: translateX(5px); }
.guide-help { background: linear-gradient(180deg, #f3f8fd, #fff); }
.guide-cta { margin-top: 10px; }

.guide-main { min-width: 0; }
.guide-body { padding: clamp(22px, 4vw, 46px); }
.guide-body > p:first-child { font-size: 1.12rem; color: #33415c; }
.guide-body h2 { position: relative; margin: 1.9em 0 .6em; padding-left: 20px; font-size: clamp(1.35rem, 2.4vw, 1.7rem); scroll-margin-top: calc(var(--header-h) + 14px); }
.guide-body h2::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 6px; border-radius: 6px; background: linear-gradient(180deg, #3fb868, #1aa3e8); }
.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 { margin: 1.5em 0 .4em; font-size: 1.06rem; color: #0b6fa0; text-transform: none; letter-spacing: 0; }
.guide-body ul { list-style: none; padding-left: 0; }
.guide-body ul li { position: relative; padding-left: 30px; margin: .5em 0; }
.guide-body ul li::before { content: ""; position: absolute; left: 5px; top: .5em; width: 12px; height: 12px; border-radius: 4px; transform: rotate(45deg); background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.guide-body ol { padding-left: 1.5em; }
.guide-body ol li::marker { color: #1aa3e8; font-weight: 700; }
.guide-body strong { color: var(--ink); }
.guide-body a { color: #0b7fb8; font-weight: 600; }
.guide-body .table-wrap { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--line); border-radius: 14px; }
.guide-body table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.guide-body th, .guide-body td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-body th { background: #eef5fa; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #44506a; }
.guide-body tbody tr:nth-child(even) td { background: #f9fbfd; }
.guide-body tbody tr:last-child td { border-bottom: 0; }
.guide-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.guide-pager .pager { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); text-decoration: none; transition: transform .14s, border-color .16s; }
.guide-pager .pager span { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.guide-pager .pager strong { color: var(--ink); line-height: 1.3; }
.guide-pager .pager:hover { transform: translateY(-3px); border-color: rgba(26, 163, 232, .55); }
.guide-pager .pager.prev { grid-column: 1; }
.guide-pager .pager.next { grid-column: 2; text-align: right; }
.guide-all { text-align: center; margin: 20px 0 0; color: var(--muted); }
@media (max-width: 600px) { .guide-pager { grid-template-columns: 1fr; } .guide-pager .pager.next, .guide-pager .pager.prev { grid-column: auto; text-align: left; } }
.guide-body.prose { max-width: none; }
.guide-body p, .guide-body li { max-width: 52em; }
.gico svg { width: 66%; height: 66%; }
.page-head-grid.no-art { grid-template-columns: 1fr; }

/* Partner ad spots (off until switched on in Admin > Ads) */
.ad-spot { max-width: min(100%, var(--aw)); margin: 24px auto; text-align: center; }
.ad-spot iframe, .ad-spot img { display: block; max-width: 100%; margin: 0 auto; border: 0; }
.ad-tag { display: block; margin: 0 0 4px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #8a94a8; }
.help-side .ad-spot { margin-top: 18px; }
@media (max-width: 767px) { .ad-spot.dev-desktop { display: none; } }
@media (min-width: 768px) { .ad-spot.dev-mobile { display: none; } }
.help-side { position: sticky; top: calc(var(--header-h) + 18px); }
.help-side .help-toc { position: static; }
@media (max-width: 900px) { .help-side { position: static; } }

/* Tighter page headers, and text pages as wide as the rest */
.page-head { padding: calc(var(--header-h) + 16px) 0 clamp(20px, 2.6vw, 30px); }
.page-head.fancy h1 { font-size: clamp(1.9rem, 3.4vw, 2.55rem); line-height: 1.12; }
.page-head .deck { margin-top: .45em; font-size: clamp(.98rem, 1.4vw, 1.12rem); }
.crumb { margin: 0 0 6px !important; }
.head-stats { margin: 14px 0 0 !important; }
.head-stats span { padding: 3px 11px; font-size: .78rem; }
.page-art { height: 150px; width: 280px; }
.page-art.single { width: 150px; height: 112px; }
.art-tile .gico.xl { width: 84px; height: 84px; }
.art-tile .gico.xxl { width: 100px; height: 100px; }
.art-1 { top: 26px; }
.art-2 { left: 82px; }
.art-3 { left: 168px; top: 40px; }
.page-art.single .art-2 { left: 24px; top: 6px; }
.page-card.prose { max-width: none; }
.page-card.prose > p, .page-card.prose > ul, .page-card.prose > ol { max-width: 62em; }
@media (max-width: 900px) { .page-head { padding-bottom: 20px; } }

/* Code example tabs */
.code-tabs { margin: 8px 0 24px; }
.code-tabs .code-tab > h4 { margin: 18px 0 8px; font-size: 1rem; color: #0b6fa0; }
.code-tabs.ready .code-tab > h4 { display: none; }
.code-tab-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 5px; border-radius: 14px; background: #eaf0f6; }
.code-tab-list button { flex: 1 1 auto; min-width: 96px; padding: 9px 14px; font: inherit; font-weight: 600; font-size: .92rem; color: #44506a; background: transparent; border: 0; border-radius: 10px; cursor: pointer; transition: background .15s, color .15s; }
.code-tab-list button:hover { background: rgba(26, 163, 232, .12); color: #0b6fa0; }
.code-tab-list button[aria-selected="true"] { background: linear-gradient(135deg, #3fb868, #1aa3e8); color: #fff; box-shadow: 0 4px 12px rgba(26, 163, 232, .35); }
.code-tab-list button:focus-visible { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.code-tabs .code-tab[hidden] { display: none; }
.code-tabs .codeblock { margin-bottom: 0; }
.code-tabs pre { max-height: 560px; overflow: auto; }

/* Advanced drawer */
.tablist { display: contents; }
.tab-more { flex: 0 0 auto; padding-inline: 14px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .12); border-radius: 0 9px 9px 0; }
.tab-more .chev { display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s; }
.tab-more[aria-expanded="true"] { background: rgba(26, 163, 232, .85); color: #fff; }
.tab-more[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.adv-drawer { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility 0s .35s; }
.adv-drawer.open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s ease, visibility 0s; }
.adv-clip { overflow: hidden; min-height: 0; padding: 0 2px 2px; }
.hero .adv-card.studio { padding: 16px 18px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12); }
.adv-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.adv-head h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.adv-close { width: 30px; height: 30px; border: 0; border-radius: 50%; font: inherit; line-height: 1; color: #cfd9ec; background: rgba(255, 255, 255, .08); cursor: pointer; }
.adv-close:hover, .adv-close:focus-visible { background: rgba(26, 163, 232, .85); color: #fff; }
.adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 26px; align-items: start; }
.adv-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.adv-sec { min-width: 0; padding-bottom: 8px; }
.adv-sec .field-row { margin-bottom: 12px; }
.adv-sec .hint { margin: 8px 0 0; }
.adv-sec .range { gap: 8px; }

.adv-sec .xform { margin-top: 14px; }
.adv-sec .switch { margin-bottom: 8px; }

/* Home page: Advanced opens inside the converter card in place of the other tabs. The card grows, so there is no scroll bar. */
.adv-inline { display: block; visibility: visible; transition: none; }
.adv-inline:not(.open) { display: none; }
.adv-inline .adv-clip { overflow: visible; padding: 0; }
.hero .adv-inline .adv-card.studio { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.adv-inline .adv-head { display: none; }
.adv-inline .adv-grid { display: block; }
.adv-inline .adv-col { display: block; }
.adv-inline .adv-sec { padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.adv-inline .adv-col:last-child .adv-sec:last-child { border-bottom: 0; margin-bottom: 14px; padding-bottom: 0; }
.adv-inline .adv-sec .hint { margin: 8px 0 0; }
.adv-inline .limit { margin-top: 3px; }
.adv-inline .adv-sec h4 { margin-bottom: 10px; }
.adv-inline .range { margin-bottom: 10px; }

.adv-inline .field-row { margin-bottom: 10px; }
.adv-inline .xform { margin: 10px 0 0; }
.adv-inline .switch { margin-bottom: 8px; }
/* Studio page: a full-width strip under the studio; the studio gets a little shorter so both stay in view */
.studio-page .adv-drawer { margin-top: 14px; }
.studio-page .adv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.studio-page .adv-col { display: contents; }
.studio-page .studio-controls { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
.studio-page .adv-card.studio { display: block; height: auto; }
@media (max-width: 1100px) { .studio-page .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .studio-page .adv-grid { grid-template-columns: 1fr; } }
/* Picture type: Auto / Color / Black and white */
.ptype { margin: 2px 0 12px; }
.seg { display: grid; grid-template-columns: .8fr 1fr 1.45fr; gap: 6px; }
.seg-opt { position: relative; display: block; margin: 0; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; }
.seg-opt span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 10px; font-size: .92rem !important; font-weight: 600; color: #cfd9ec !important; text-align: center; line-height: 1.15; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background .15s, border-color .15s; }
.seg-opt:hover span { border-color: rgba(26, 163, 232, .6); }
.seg-opt input:checked + span { background: rgba(26, 163, 232, .22); border-color: var(--glow-a); color: #fff !important; box-shadow: inset 0 0 0 1px var(--glow-a); }
.seg-opt input:focus-visible + span { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.dot { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); }
.dot-color { background: conic-gradient(#ef4444, #f59e0b, #facc15, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); }
.dot-bw { background: linear-gradient(90deg, #111 50%, #f4f4f4 50%); }
.ptype .hint { margin: 8px 0 0; min-height: 2.6em; }
@media (max-width: 520px) { .seg { gap: 4px; } .seg-opt span { min-height: 36px; padding: 6px 4px; gap: 4px; font-size: .8rem !important; } .seg-opt .dot { width: 11px; height: 11px; } .studio label { letter-spacing: .02em; } }

/* Help bubbles: a small "?" beside a setting opens a short explanation (site.js) */
.lbl { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; min-width: 0; }
.lbl label, .studio .lbl label { margin: 0; }
.lbl-text { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: #aeb9d0; }
.studio .lbl-text { color: #aeb9d0; }
.qm { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 15px; height: 15px; padding: 0; margin: 0 0 0 1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #b9dcf0; font: 600 10px/1 var(--font); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.qm::after { content: ""; position: absolute; inset: -15px; }
.qm:hover, .qm:focus-visible, .qm[aria-expanded="true"] { background: rgba(26, 163, 232, .85); border-color: transparent; color: #fff; outline: none; }
.qm:focus-visible { box-shadow: 0 0 0 3px rgba(26, 163, 232, .45); }
.card .qm, .page-body .qm, dialog .qm { border-color: #b8c3d6; background: #eef3f9; color: #34537a; }
.card .qm:hover, .page-body .qm:hover, dialog .qm:hover, dialog .qm[aria-expanded="true"], .card .qm[aria-expanded="true"] { background: #1aa3e8; color: #fff; border-color: transparent; }
.tip-bubble { position: fixed; z-index: 2000; width: max-content; max-width: min(300px, 100vw - 24px); padding: 11px 14px; border-radius: 12px; background: #fff; color: #1c2230; font-size: .86rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); border: 1px solid #d5dce8; }
.tip-bubble[hidden] { display: none; }
.studio .switch .qm { margin-left: auto; }

/* Mobile safety: nothing may push a page wider than the phone */
html, body { max-width: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }
.page-body, .page-card, .prose, .help-body, .help-sec, .guide-body, .card { min-width: 0; overflow-wrap: break-word; }
pre, .codeblock { max-width: 100%; overflow-x: auto; }
.prose table, .help-sec table, .guide-body table, .page-card table { max-width: 100%; }
.help-sec table { display: block; overflow-x: auto; }
@media (max-width: 560px) {
  .wrap { width: calc(100% - 28px); }
  .help-sec, .card { padding-left: 16px; padding-right: 16px; }
  .help-sec h2 { gap: 10px; }
  .studio { padding: 10px; }
  .stage { aspect-ratio: 4 / 3; }
  .range { grid-template-columns: 112px minmax(0, 1fr) 28px; gap: 8px; }
}
/* Choosing the type of paid file (after the free one, and on the checkout page) */
dialog#done-dialog { width: min(580px, 100% - 20px); }
dialog[open] { display: flex; flex-direction: column; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
dialog .dlg-body { overflow-y: auto; }
.result-option.pro { text-align: left; }
.result-option.pro h4 { margin: 0 0 6px; font-size: 1.05rem; }
.pro-lead { margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
.pt-pick { display: grid; gap: 8px; margin: 0 0 10px; }
.pt-opt { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400; }
.pt-opt input { position: absolute; opacity: 0; }
.pt-card { display: block; padding: 11px 14px 11px 42px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, background .15s; position: relative; }
.pt-card::before { content: ""; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #b5bfd0; background: #fff; }
.pt-opt:hover .pt-card { border-color: #7cc4ea; }
.pt-opt input:checked + .pt-card { border-color: #1aa3e8; background: #f1f9ff; box-shadow: 0 0 0 1px #1aa3e8; }
.pt-opt input:checked + .pt-card::before { border-color: #1aa3e8; background: radial-gradient(circle, #1aa3e8 0 4px, #fff 5px); }
.pt-opt input:focus-visible + .pt-card { outline: 3px solid rgba(26, 163, 232, .45); outline-offset: 2px; }
.pt-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.pt-top strong { font-size: 1rem; color: var(--text); }
.pt-size { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-blurb { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.4; color: #4a566f; }
.pro-help { display: inline-block; margin: 0 0 12px; font-size: .88rem; }
.result-option.pro .btn-block { margin-top: 2px; }
/* ---------- Viewer (/viewer) ---------- */
.vw [hidden] { display: none !important; }
.wrap.vw-wrap { width: min(clamp(1600px, 82vw, 1900px), 100% - 32px); }
.vw { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.vw[data-mode="empty"] { grid-template-columns: minmax(0, 1fr); }
.vw[data-mode="empty"] .vw-panel { display: none; }
.vw-main { position: sticky; top: calc(var(--header-h) + 10px); min-width: 0; }
.vw-stage { position: relative; height: calc(100vh - var(--header-h) - 40px); height: calc(100svh - var(--header-h) - 40px); min-height: 460px; max-height: 860px; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 70px rgba(9, 12, 19, .35); background: #0a1020; color: #eef2fb; }
.vw[data-mode="empty"] .vw-stage { height: min(560px, 70vh); min-height: 380px; }
.vw-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; cursor: grab; }
.vw-stage canvas:active { cursor: grabbing; }
.vw-stage.measuring canvas { cursor: crosshair; }
.vw-stage.drag { outline: 3px dashed var(--glow-a); outline-offset: -10px; }
.vw-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.vw-line { stroke: #ffd23f; stroke-width: 2; }
.vw-dot { fill: #ffd23f; stroke: #0a1020; stroke-width: 2; }
.vw-label { fill: #fff; font: 600 13px var(--font); paint-order: stroke; stroke: rgba(0, 0, 0, .85); stroke-width: 3px; stroke-linejoin: round; }
.vw-label.sm { font-size: 11px; }
.vw-stage.light-bg .vw-label { fill: #111; stroke: rgba(255, 255, 255, .9); }
.vw-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.vw-empty h2 { margin: 6px 0 0; font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: #fff; }
.vw-empty p { margin: 0; color: #9fb0cc; }
.vw-empty-icon .icon-tile { margin: 0 auto; }
.vw-empty-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.vw-limits { font-size: .85rem; letter-spacing: .02em; }
.vw-busy { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; min-width: min(320px, 80%); padding: 12px 18px; border-radius: 14px; background: rgba(9, 12, 19, .88); border: 1px solid rgba(255, 255, 255, .18); font-size: .9rem; }
.vw-busy .meter { height: 6px; }
.vw-notice { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); max-width: min(560px, 90%); padding: 10px 16px; border-radius: 12px; font-size: .9rem; line-height: 1.4; text-align: center; color: #e9f4fb; background: rgba(9, 12, 19, .9); border: 1px solid rgba(255, 255, 255, .2); z-index: 3; }
.vw-notice.error { background: rgba(120, 22, 16, .92); border-color: rgba(255, 140, 130, .5); }
.vw-notice.warn { background: rgba(110, 72, 8, .92); border-color: rgba(255, 200, 100, .5); }
.vw-hud { position: absolute; top: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 24px); gap: 6px; z-index: 2; }
.vw-hud-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(9, 12, 19, .6); color: #e9f4fb; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s; }
.vw-hud-btn:hover, .vw-hud-btn:focus-visible { background: rgba(26, 163, 232, .85); border-color: transparent; }
.vw-hud-btn[aria-pressed="true"] { background: rgba(63, 184, 104, .85); border-color: transparent; color: #fff; }
.vw-hud-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vw-hint { position: absolute; left: 14px; bottom: 10px; margin: 0; font-size: .74rem; letter-spacing: .02em; color: rgba(207, 217, 236, .75); pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.vw-stage.light-bg .vw-hint { color: rgba(30, 40, 60, .7); text-shadow: none; }
@media (hover: none) { .vw-hint { display: none; } }
.vw-image { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.vw-image:active { cursor: grabbing; }
.vw-image img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.vw-image.checker { background: repeating-conic-gradient(#c9d1de 0% 25%, #fff 0% 50%) 0 0 / 24px 24px; }

.vw-panel.studio { padding: 0; overflow: hidden; background: linear-gradient(180deg, #121b30, #0b1120); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 70px rgba(9, 12, 19, .3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.vw-sec { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.vw-sec:last-of-type { border-bottom: 0; }
.vw-sec > summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; cursor: pointer; list-style: none; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #aeb9d0; user-select: none; }
.vw-sec > summary::-webkit-details-marker { display: none; }
.vw-sec > summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.vw-sec[open] > summary::after { transform: rotate(-135deg); }
.vw-sec > summary:hover { color: #fff; }
.vw-body { padding: 2px 16px 16px; }
.vw-body .field-row { margin-bottom: 8px; }
.vw-body .field { margin-bottom: 12px; }
.vw-body .seg { margin-bottom: 12px; }
.vw-body input[type="range"] { width: 100%; accent-color: var(--glow-a); margin: 0 0 12px; }
.vw-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vw-views { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.vw-views .chip-btn { padding: 7px 4px; font-size: .8rem; text-align: center; }
.vw-file { margin: 0 0 12px; font-size: .9rem; color: #cfe9f7; overflow-wrap: anywhere; }
.vw-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.vw-swatch { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, .28); cursor: pointer; }
.vw-swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--glow-a); }
.vw-swatches input[type="color"] { width: 34px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.vw-stats { margin: 0 0 12px; }
.vw-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: .85rem; }
.vw-stats dt { color: #8fa0bd; }
.vw-stats dd { margin: 0; color: #e9f4fb; text-align: right; overflow-wrap: anywhere; }
.vw-stats dd.warn { color: #ffb86b; }
.vw-stats dd.good { color: #7be59b; }
.vw-readout { margin: 12px 0 0; font-size: .88rem; line-height: 1.5; color: #cfe9f7; }
.vw-readout strong { font-size: 1.15rem; color: #ffd23f; }
.vw-keys { margin: 0; padding: 12px 16px; font-size: .82rem; color: #8fa0bd; border-top: 1px solid rgba(255, 255, 255, .1); }
.vw-keys summary { cursor: pointer; font-weight: 600; letter-spacing: .02em; color: #aebbd2; }
.vw-keylist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.vw-keylist li { display: flex; align-items: center; gap: 8px; line-height: 1.25; }
.vw-keylist li > span { flex: none; min-width: 2.7em; text-align: right; }
.vw-keys kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px 0; border-radius: 6px; font: 700 .76rem/1.5 var(--font); text-align: center; color: #e9f4fb; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-bottom-width: 2px; }
.vw-panel .lbl output { margin-left: auto; font-size: .82rem; color: #cfe9f7; }
.vw-info { margin-top: 34px; }
.vw-info .help-sec:last-child { margin-bottom: 0; }
.vw-page .vw-cta { margin-top: 22px; }
.vw-info .table-wrap table { display: table; width: 100%; }
@media (max-width: 960px) {
  .vw { grid-template-columns: minmax(0, 1fr); }
  .vw-main { position: static; }
  .vw-stage { height: 64vw; height: 64svw; min-height: 340px; max-height: 70svh; }
  .vw[data-mode="empty"] .vw-stage { height: auto; min-height: 340px; }
}
.adv-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.preset-menu { max-height: min(60vh, 460px); overflow-y: auto; width: min(340px, calc(100vw - 48px)); }
.preset-menu .preset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; font-weight: 400; }
.preset-menu .preset strong { font-size: .92rem; color: #fff; }
.preset-menu .preset small { font-size: .76rem; line-height: 1.35; color: #9fb0cc; text-align: left; }
/* ---------- Examples: resolution badges, enlarge, lightbox, resolution ladder ---------- */
.example-zoom { position: relative; display: block; flex: 1; width: 100%; min-height: 190px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: zoom-in; overflow: hidden; }
.example-zoom img { display: block; width: 100%; height: 100%; min-height: 190px; object-fit: contain; border-radius: 12px; background: #05080f; border: 1px solid rgba(255, 255, 255, .08); transition: transform .25s; }
.example-zoom:hover img, .example-zoom:focus-visible img { transform: scale(1.03); }
.example-zoom:focus-visible { outline: 3px solid rgba(26, 163, 232, .6); outline-offset: 2px; }
.example-enlarge { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(9, 12, 19, .7); color: #e9f4fb; cursor: zoom-in; opacity: 0; transition: opacity .15s, background .15s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.example-enlarge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.example-zoom:hover .example-enlarge, .example-zoom:focus-visible .example-enlarge, .three-d:hover > .example-enlarge, .example-enlarge:focus-visible { opacity: 1; }
.example-enlarge:hover { background: rgba(26, 163, 232, .9); }
.three-d { position: relative; }
.three-d > .example-enlarge { top: 8px; right: 8px; }
@media (hover: none) { .example-enlarge { opacity: .9; } }
.fig-res { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .62rem; letter-spacing: .08em; color: #a9ecc0; background: rgba(63, 184, 104, .16); border: 1px solid rgba(63, 184, 104, .35); }
.example-facts li.fact-res { color: #0d5a31; background: #dff7e8; font-weight: 600; }

dialog.lightbox { width: min(1100px, 100% - 20px); background: #0a1020; color: #eef2fb; border: 1px solid rgba(255, 255, 255, .14); }
dialog.lightbox::backdrop { background: rgba(3, 5, 10, .82); }
.lb-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.lb-head h3 { margin: 0; flex: 1; min-width: 0; font-size: 1.15rem; color: #fff; }
.lb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0; background: rgba(255, 255, 255, .07); border-radius: 12px; }
.seg-btn { font: inherit; font-size: .85rem; font-weight: 600; padding: 7px 14px; border: 0; border-radius: 9px; cursor: pointer; color: #aeb9d0; background: transparent; }
.seg-btn[aria-selected="true"] { background: rgba(26, 163, 232, .9); color: #fff; }
.lb-close { width: 34px; height: 34px; border: 0; border-radius: 50%; font: inherit; color: #cfd9ec; background: rgba(255, 255, 255, .08); cursor: pointer; }
.lb-close:hover, .lb-close:focus-visible { background: rgba(26, 163, 232, .9); color: #fff; }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; height: min(70vh, 700px); background: #05080f; }
dialog.lightbox.is-3d .lb-stage { background: radial-gradient(ellipse at 50% 40%, #1d2a45 0%, #0d1424 70%); }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; font-size: 1.8rem; line-height: 1; color: #fff; background: rgba(9, 12, 19, .6); cursor: pointer; z-index: 2; }
.lb-nav:hover, .lb-nav:focus-visible { background: rgba(26, 163, 232, .9); border-color: transparent; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.lb-note { margin: 0; flex: 1 1 280px; font-size: .88rem; color: #9fb0cc; }
.lb-actions { display: flex; gap: 8px; }
@media (max-width: 640px) { .lb-head { flex-wrap: wrap; } .lb-head h3 { flex-basis: 100%; order: 1; } .lb-tabs { order: 2; flex: 1; } .lb-close { order: 3; } .lb-nav { width: 38px; height: 38px; } }

.res-ladder { margin-top: 38px; padding: clamp(22px, 3vw, 34px); border-radius: 22px; color: #eef2fb; background: radial-gradient(520px 240px at 90% 0%, rgba(26, 163, 232, .22), transparent 70%), radial-gradient(420px 220px at 0% 100%, rgba(63, 184, 104, .16), transparent 70%), var(--ink-2); box-shadow: var(--shadow); }
.res-head h2 { margin: 0 0 6px; color: #fff; font-size: 1.4rem; }
.res-head p { margin: 0 0 20px; max-width: 52em; color: #b9c3d8; }
.res-head strong { color: #fff; }
.res-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.res-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 270px); align-items: center; gap: 6px 22px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.res-row.here { background: rgba(63, 184, 104, .1); border-color: rgba(63, 184, 104, .45); }
.res-name { display: flex; align-items: center; gap: 10px; }
.res-name strong { color: #fff; }
.res-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.res-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3fb868, #1aa3e8); }
.res-meta { display: flex; flex-direction: column; font-size: .88rem; color: #dce4f4; }
.res-meta small { color: #8fa0bd; font-size: .78rem; }
.res-foot { margin: 16px 0 0; }
.res-foot a { color: #7fd0f5; }
@media (max-width: 760px) { .res-row { grid-template-columns: minmax(0, 1fr); } }
/* See the difference: the same close-up at every type */
.detail-demo { margin-top: 38px; padding: clamp(22px, 3vw, 34px); border-radius: 22px; color: #eef2fb; background: radial-gradient(520px 240px at 100% 0%, rgba(124, 92, 255, .2), transparent 70%), radial-gradient(420px 220px at 0% 100%, rgba(26, 163, 232, .16), transparent 70%), var(--ink-2); box-shadow: var(--shadow); }
.dd-subject { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.dd-subject:first-of-type { border-top: 0; padding-top: 6px; }
.dd-intro { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 16px; }
.dd-src { margin: 0; }
.dd-src img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); }
.dd-src figcaption { margin-top: 6px; text-align: center; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa0bd; }
.dd-intro h3 { margin: 0 0 4px; color: #fff; font-size: 1.15rem; }
.dd-intro p { margin: 0; color: #b9c3d8; font-size: .92rem; }
.dd-intro .dd-credit { margin-top: 8px; font-size: .78rem; color: #8fa0bd; }
.dd-credit a { color: #7fd0f5; }
.dd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dd-card { margin: 0; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.dd-card.here { border-color: rgba(63, 184, 104, .5); }
.dd-zoom { display: block; padding: 0; border: 0; cursor: zoom-in; background: radial-gradient(ellipse at 50% 40%, #1d2a45 0%, #0d1424 70%); aspect-ratio: 1; overflow: hidden; }
.dd-zoom img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.12); transition: transform .25s; }
.dd-zoom:hover img, .dd-zoom:focus-visible img { transform: scale(1.2); }
.dd-zoom:focus-visible { outline: 3px solid rgba(26, 163, 232, .6); outline-offset: -3px; }
.dd-card figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px 12px; }
.dd-card figcaption strong { color: #fff; font-size: .95rem; }
.dd-card figcaption small { flex-basis: 100%; color: #8fa0bd; font-size: .74rem; font-variant-numeric: tabular-nums; }
dialog.lightbox.single .lb-tabs, dialog.lightbox.single .lb-nav, dialog.lightbox.single .lb-actions { display: none; }
@media (max-width: 900px) { .dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dd-intro { grid-template-columns: 1fr; } .dd-src { max-width: 180px; } }
/* Examples tabs */
.ex-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 5px; width: fit-content; max-width: 100%; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ex-tab { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .95rem; font-weight: 600; padding: 9px 20px; border: 0; border-radius: 999px; cursor: pointer; color: #44506a; background: transparent; transition: background .15s, color .15s; }
.ex-tab:hover { color: #0b6fa0; }
.ex-tab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); box-shadow: 0 6px 16px rgba(26, 163, 232, .3); }
.ex-tab:focus-visible { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.ex-count { min-width: 22px; padding: 0 7px; border-radius: 999px; font-size: .76rem; line-height: 20px; text-align: center; background: rgba(0, 0, 0, .08); }
.ex-tab[aria-selected="true"] .ex-count { background: rgba(255, 255, 255, .28); }
.ex-panel[hidden] { display: none; }
.ex-note { margin: 0 0 20px; color: var(--muted); font-size: .95rem; }
.ex-note strong { color: #17753a; }
.ex-panel > .detail-demo { margin-top: 0; }
@media (max-width: 520px) { .ex-tabs { width: 100%; border-radius: 22px; } .ex-tab { flex: 1 1 auto; justify-content: center; padding: 9px 12px; font-size: .88rem; } }
/* Bulk packs: one size for every tile, ascending order */
.bulk-h { font-size: 1.15rem; margin: 0 0 14px; }
.packs { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 26px; }
.packs .pack { flex: 0 0 calc((100% - 56px) / 5); min-width: 120px; }
.pack { display: flex; }
.pack-card { flex: 1; justify-content: flex-start; gap: 0; padding: 14px 12px 18px; position: relative; }
.pack-tag { min-height: 22px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #17753a; }
.pack-uses { font-size: 2.6rem; }
.pack-label { margin-bottom: 8px; }
.pack-price { margin-top: 0; }
.pack-save { min-height: 24px; margin-top: 10px; padding: 2px 10px; font-size: .78rem; font-weight: 700; color: #0b6fa0; }
.pack-save:not(:empty) { border-radius: 999px; background: #e3f1fb; }
.bulk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.bulk-how ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bulk-how li { padding-left: 18px; position: relative; color: var(--muted); line-height: 1.5; }
.bulk-how li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--glow-a), var(--glow-b)); }
.bulk-how li b { color: var(--text, inherit); }
@media (max-width: 760px) { .bulk-grid { grid-template-columns: 1fr; } .packs .pack { flex-basis: calc(50% - 7px); } }
/* API page: one card per section, steps as tabs, request beside response */
.api-main { display: grid; gap: 18px; }
.api-sec { padding: clamp(18px, 3vw, 30px); }
.api-sec > h2 { margin-top: 0; }
.api-sec h2 + p { margin-top: 0; }
.api-sec > .codeblock { margin: 10px 0 14px; }
.api-sec .code-tabs { margin: 4px 0 0; }
.api-sec .code-tab > p { margin: 0 0 12px; }
.api-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: stretch; }
.api-pair .codeblock { margin: 0; }
.api-pair pre { white-space: pre-wrap; word-break: break-all; padding-right: 18px; }
.api-sec .table-wrap { margin: 12px 0 0; }
.api-sec th, .api-sec td { padding: 8px 12px; }
.api-sec code { white-space: normal; }
.api-get { display: block; margin: 12px 8px 4px 0; text-align: center; padding: 10px 12px; font-size: .9rem; }
.api-page .code-tabs > .code-tab-list { margin-bottom: 14px; }
@media (max-width: 760px) { .api-pair { grid-template-columns: minmax(0, 1fr); } }.api-sec table.params { table-layout: fixed; }
.api-sec table.params th:nth-child(1) { width: 24%; }
.api-sec table.params th:nth-child(2) { width: 15%; }
.api-sec table.params td:first-child code { display: inline-block; margin: 1px 2px 1px 0; }
.api-sec table.params td:first-child { overflow-wrap: anywhere; }
@media (max-width: 760px) { .api-sec table.params { table-layout: auto; min-width: 560px; } }.api-sec .table-wrap td:first-child { white-space: normal; }
/* Closing links on guides */
.keep-exploring { margin-top: 2em; padding: 16px 20px; border-radius: 14px; background: #eef5fa; border-left: 5px solid #1aa3e8; line-height: 1.6; }

/* Preset icons: a small colored tile beside each preset */
.gico.xs { width: 40px; height: 40px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -6px 12px rgba(0, 0, 0, .14); }
.gico.xxs { width: 22px; height: 22px; border-radius: 30%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.gico.xs::after, .gico.xxs::after { background: radial-gradient(70% 55% at 25% 12%, rgba(255, 255, 255, .32), transparent 70%); }
.gico.xs svg { width: 70%; height: 70%; }
.gico.xxs svg { width: 74%; height: 74%; stroke-width: 3.4; }
.preset.has-ico { display: inline-flex; align-items: center; gap: 8px; padding-left: 8px; }
.preset-menu .preset { flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; }
.preset-menu .preset .pm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preset-menu .preset:hover .gico, .preset-menu .preset:focus-visible .gico { transform: rotate(-5deg) scale(1.07); }
/* Settings labels: a brighter white than the helper text around them; tighter Advanced spacing; Reset in its section */
.studio label, .lbl-text, .studio .lbl-text, .presets-label { color: #f4f8ff; }
.studio .switch > span:not(.slider) { color: #f4f8ff; font-weight: 600; }
.studio label { font-weight: 600; }
.studio small, .studio .limit, .studio .hint { color: #8fa0bd; }
.adv-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adv-reset { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.adv-reset .chip-btn { padding: 4px 12px; font-size: .8rem; }
.adv-sec { padding-bottom: 2px; }
.adv-sec h4 { margin-bottom: 8px; }
.adv-sec .field-row, .adv-inline .field-row { margin-bottom: 8px; }
.adv-sec .range, .adv-inline .range { margin-bottom: 7px; }
.adv-inline .adv-sec { padding: 0 0 8px; margin-bottom: 8px; }
.adv-inline .adv-col:last-child .adv-sec:last-child { margin-bottom: 6px; }
.adv-sec .xform, .adv-inline .xform { margin-top: 8px; }
.adv-sec .switch, .adv-inline .switch { margin-bottom: 6px; }
.adv-inline .limit { margin-top: 2px; min-height: 0; }.adv-sec .field { margin-bottom: 0; }
.adv-sec .field-row { gap: 10px 12px; }
.adv-sec .lbl { margin-bottom: 4px; }
.adv-sec .field-row + .field-row { margin-top: 2px; }
/* Tighter footer */
.site-footer { padding: 22px 0 18px; }
.site-footer .foot-grid { gap: 10px 32px; }
.site-footer .copyright { padding-top: 12px; }
@media (max-width: 760px) { .site-footer .foot-grid { gap: 10px; } }
/* File type tiles are buttons that explain themselves */
.formats-title span { text-transform: none; letter-spacing: 0; opacity: .7; }
.format-list li { padding: 0; }
.format-list .fmt { all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 9px; cursor: pointer; border-radius: 10px; }
.format-list li:hover { border-color: rgba(26, 163, 232, .6); background: linear-gradient(180deg, rgba(26, 163, 232, .18), rgba(255, 255, 255, .03)); }
.format-list li:has(.fmt[aria-pressed="true"]) { border-color: rgba(63, 184, 104, .8); background: linear-gradient(180deg, rgba(63, 184, 104, .22), rgba(26, 163, 232, .06)); box-shadow: 0 0 0 3px rgba(63, 184, 104, .15); }
.format-list .fmt:focus-visible { outline: 2px solid #7fd0f5; outline-offset: 1px; }
.format-list .fmt b { font-size: 1.05rem; letter-spacing: .04em; background: linear-gradient(90deg, #6fe39b, #5cc8f5); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.format-list .fmt small { font-size: .7rem; letter-spacing: .04em; color: #8fa0bd; }
.format-desc { margin: -4px 0 14px; padding: 10px 14px; border-radius: 10px; background: rgba(63, 184, 104, .1); border: 1px solid rgba(63, 184, 104, .35); color: #dbe8f8; font-size: .92rem; line-height: 1.5; }
.format-desc b { color: #fff; }
/* Embossify Studio brand mark, bottom right of the preview (never part of a download) */
.studio-mark { position: absolute; right: 12px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 10px; border-radius: 999px; pointer-events: none; background: rgba(6, 9, 16, .62); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); opacity: .92; }
.studio-mark img { display: block; width: 76px; height: auto; }
.studio-mark b { font: 700 .62rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: #04121d; padding: 4px 7px 4px 8px; border-radius: 999px; background: linear-gradient(100deg, #3fb868, #1aa3e8); }
@media (max-width: 520px) { .studio-mark { right: 8px; bottom: 8px; padding: 4px 7px; } .studio-mark img { width: 62px; } }.formats { max-width: 37em; }
.format-list { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 7px; }
/* Studio page: three quick steps above the preview (hidden for good once dismissed) */
.st-guide { display: flex; align-items: center; gap: 6px 14px; list-style: none; margin: 0 0 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.st-guide[hidden] { display: none; }
.st-guide li { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
.st-guide li + li:not(.st-close)::before { content: ""; flex: none; width: 14px; height: 14px; margin-left: -8px; border-top: 2px solid rgba(255, 255, 255, .28); border-right: 2px solid rgba(255, 255, 255, .28); transform: rotate(45deg) scale(.7); }
.st-guide .gico.xs { width: 34px; height: 34px; }
.st-guide li > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-guide b { font-size: .86rem; color: #fff; font-weight: 600; }
.st-guide small { font-size: .74rem; line-height: 1.3; color: #9fb0cc; }
.st-guide .st-close { flex: none; margin-left: auto; }
.st-guide .st-close button { width: 26px; height: 26px; border: 0; border-radius: 50%; font: inherit; line-height: 1; color: #cfd9ec; background: rgba(255, 255, 255, .08); cursor: pointer; }
.st-guide .st-close button:hover, .st-guide .st-close button:focus-visible { background: rgba(26, 163, 232, .85); color: #fff; }
@media (max-width: 1280px) { .st-guide small { display: none; } }
@media (max-width: 900px) { .st-guide small { display: block; } }
@media (max-width: 680px) { .st-guide { flex-wrap: wrap; } .st-guide li { flex: 1 1 100%; } .st-guide li + li:not(.st-close)::before { display: none; } .st-guide .st-close { position: absolute; right: 8px; } .st-guide { position: relative; } }
/* Steps sit above the Studio card (not in the preview column), so the preview keeps its full size; the badge is in the upper right */
.st-guide { max-width: var(--wrap, 1200px); }
.studio-page .st-guide { margin: 0 0 12px; }
.studio-mark { right: 12px; left: auto; top: 10px; bottom: auto; }
@media (max-width: 520px) { .studio-mark { right: 8px; left: auto; top: 8px; bottom: auto; } }
.studio-mark b { font: 700 .62rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: #04121d; padding: 4px 7px 4px 8px; border-radius: 999px; background: linear-gradient(100deg, #3fb868, #1aa3e8); }
a.studio-link { pointer-events: auto; cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
a.studio-link:hover, a.studio-link:focus-visible { background: rgba(6, 9, 16, .85); border-color: rgba(255, 255, 255, .5); transform: translateY(-1px); }
a.studio-link:focus-visible { outline: 3px solid rgba(26, 163, 232, .6); outline-offset: 2px; }
/* The pills under the home headline: a small glowing bullet in a different shade of the brand colors */
.chips li { display: inline-flex; align-items: center; gap: 9px; --dot: #3fb868; }
.chips li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 24%, transparent), 0 0 10px color-mix(in srgb, var(--dot) 65%, transparent); }
.chips li:nth-child(2) { --dot: #1fb08a; }
.chips li:nth-child(3) { --dot: #1aa3e8; }
.chips li:nth-child(4) { --dot: #5b8cff; }
/* Studio steps: the full width of the page, three equal steps, no close button */
.st-guide, .studio-page .st-guide { max-width: none; width: 100%; padding: 12px 18px; gap: 6px 22px; }
.st-guide li { justify-content: center; }
.st-guide li > span:last-child { flex: 0 1 15em; }
.st-guide .gico.xs { width: 40px; height: 40px; }
.st-guide b { font-size: .95rem; }
.st-guide small { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 680px) { .st-guide small { white-space: normal; } }
.st-guide li + li:not(.st-close)::before { margin-left: -14px; }
@media (max-width: 680px) { .st-guide li { justify-content: flex-start; } .st-guide li > span:last-child { flex: 1 1 auto; } }
/* About page */
.about-wrap { display: grid; gap: clamp(26px, 4vw, 44px); }
.about-wrap > section { min-width: 0; }
.ab-intro { max-width: 52em; }
.ab-lead { font: 600 clamp(1.4rem, 2.8vw, 2rem)/1.25 var(--font-head); margin: 0 0 .6em; background: linear-gradient(100deg, #0b7fb8, #2c9b58); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-intro p { font-size: 1.05rem; line-height: 1.65; }
.ab-sec h2 { margin: 0 0 6px; }
.ab-sub { margin: 0 0 18px; color: var(--muted); }
.ab-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: abstep; }
.ab-steps figure { margin: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ab-steps img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #090c13; }
.ab-steps figcaption { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.ab-steps figcaption b { color: var(--ink); font-size: 1rem; }
.ab-steps figure + figure { position: relative; }
.ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-card { padding: 22px 22px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ab-card h3 { margin: 14px 0 6px; font-size: 1.08rem; text-transform: none; letter-spacing: 0; }
.ab-card p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.ab-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 26%; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 18px rgba(9, 12, 19, .2); }
.ab-ico svg { width: 64%; height: 64%; }
.ab-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ab-who li { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--glow-a); border-radius: 12px; }
.ab-who li:nth-child(3n+2) { border-left-color: #3fb868; }
.ab-who li:nth-child(3n) { border-left-color: #7c5cff; }
.ab-who b { font-size: 1rem; color: var(--ink); }
.ab-who span { font-size: .92rem; color: var(--muted); line-height: 1.45; }
.ab-cta { padding: clamp(22px, 4vw, 36px); border-radius: var(--radius); color: #dfe7f5; background: radial-gradient(600px 240px at 90% 0%, rgba(26, 163, 232, .3), transparent 65%), radial-gradient(500px 240px at 0% 120%, rgba(63, 184, 104, .24), transparent 60%), var(--ink); }
.ab-cta h2 { margin: 0 0 8px; color: #fff; }
.ab-cta p { margin: 0; max-width: 46em; line-height: 1.6; }
.ab-cta a { color: #7fd0f5; font-weight: 600; }
@media (max-width: 1100px) { .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ab-cards, .ab-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ab-steps, .ab-cards, .ab-who { grid-template-columns: minmax(0, 1fr); } }
/* Embossify Viewer brand mark: the same badge as Studio, upper left, so the viewer's own buttons keep the upper right */
.vw-stage .studio-mark { top: 12px; left: 12px; right: auto; bottom: auto; }
.vw-hud { top: 12px; }
.vw-notice { z-index: 4; }
@media (max-width: 640px) { .vw-stage .studio-mark { top: 8px; left: 8px; } .vw-hud { top: 52px; right: 8px; } }
/* Viewer page: the same dark, wide layout as Studio, with the three steps across the top */
.vw-hero { overflow: visible; }
.vw-hero .vw-wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
.vw-hero .st-guide { margin-bottom: 12px; }
.vw-hero .vw-stage { max-height: none; }
.vw-hero .vw-info { display: none; }
.vw-empty { overflow: hidden; }
.vw-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000 100%); }
.vw-wv { animation: vw-flow linear infinite; will-change: transform; }
@keyframes vw-flow { from { transform: translateX(0); } to { transform: translateX(-800px); } }
@media (prefers-reduced-motion: reduce) { .vw-wv { animation: none; } }
.vw-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(22px, 4vw, 40px) clamp(22px, 5vw, 56px); border-radius: 22px; border: 2px dashed rgba(255, 255, 255, .28); background: rgba(9, 12, 19, .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); max-width: 92%; }
.vw-stage.drag .vw-drop { border-color: var(--glow-a); background: rgba(26, 163, 232, .16); }
.vw-drop h2 { margin: 0; }
/* The Viewer's settings panel reuses the "studio" look but must not take the Studio page's two-column grid */
.studio-page .vw-panel.studio { display: block; grid-template-columns: none; gap: 0; align-items: stretch; }
.vw-hero .vw-panel { min-width: 0; }
/* Five preset tiles in the main row, then More: tidy two-row layout instead of a ragged wrap */
.presets { gap: 8px 8px; }
.presets .preset.has-ico { padding: 6px 12px 6px 7px; font-size: .86rem; }
.presets-label { flex: 0 0 100%; margin: 0 0 -2px; }
.studio .presets-label { margin: 0 0 -2px; }
/* Footer: Terms and Privacy ride on the copyright line, so the footer stays short */
.site-footer .copyright .sep { margin: 0 8px; opacity: .5; }
.site-footer .copyright a + .sep + a, .site-footer .copyright .sep + a { color: #cfd8ea; }
/* Shorter inner-page headers: content starts higher */
.page-head { padding: calc(var(--header-h) + 8px) 0 16px; }
.page-head .deck { margin-top: .3em; }
.page-art { height: 104px; width: 230px; }
.page-art.single { width: 104px; height: 84px; }
.art-tile .gico.xl { width: 66px; height: 66px; }
.art-tile .gico.xxl { width: 76px; height: 76px; }
.page-art .art-1 { left: 0; top: 14px; }
.page-art .art-2 { left: 70px; top: 4px; }
.page-art .art-3 { left: 142px; top: 18px; }
.page-art.single .art-2 { left: 14px; top: 4px; }
@media (max-width: 900px) { .page-head { padding-bottom: 14px; } }
/* Figures and lead paragraphs in guides and Help */
.guide-fig { margin: 1.6em 0; }
.guide-fig img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 10px 28px rgba(9, 12, 19, .22); }
.guide-fig figcaption { margin-top: .7em; text-align: center; font-size: .92rem; color: #5b6784; }

/* Terra guide: real place thumbnails and the color schemes */
.terra-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 1.4em 0 .6em; }
.terra-gallery a { display: flex; flex-direction: column; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(9, 12, 19, .08); transition: transform .15s, box-shadow .15s, border-color .15s; }
.terra-gallery a:hover, .terra-gallery a:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 26px rgba(26, 163, 232, .2); outline: none; }
.terra-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #1a2333; }
.terra-gallery span { display: block; padding: 9px 12px 11px; line-height: 1.3; }
.terra-gallery strong { display: block; font-size: .95rem; }
.terra-gallery small { display: block; color: var(--muted); font-size: .8rem; }
.prose .fig-note { margin: 0 0 1.4em; text-align: center; font-size: .92rem; color: #5b6784; }
.terra-palettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 1.2em 0; }
.terra-palettes > div { padding: 12px 14px 14px; background: #f5f9fc; border: 1px solid var(--line); border-radius: 14px; }
.terra-palettes i { display: block; height: 22px; margin-bottom: 10px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(9, 12, 19, .08); }
.terra-palettes strong { display: block; }
.terra-palettes span { display: block; font-size: .9rem; color: var(--muted); line-height: 1.4; }
.guide-body > .lead { font-size: 1.14rem; line-height: 1.6; color: #44506a; max-width: 46em; }
.guide-body > .guide-fig:first-of-type { margin-top: 1.2em; }
/* Tilt slider under the preview */
.stage-tilt { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #cfd9ec; font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.stage-tilt input[type=range] { width: 110px; margin: 0; accent-color: #1aa3e8; cursor: pointer; }
/* The note under EMBOSSIFY: a quiet second line about the 3D preview */
.studio .explained .ex-main { color: #b4bfd6; }
.studio .explained .ex-sub { display: inline-block; margin-top: 3px; font-size: .8rem; color: #7f8ba6; }
/* Studio: Advanced is built into the right-hand panel (above EMBOSSIFY). Quiet box: a thin green-to-blue border and a title accent, no tinted fill */
.hero.studio-page .adv-inline.open .adv-card.studio { position: relative; padding: 16px 14px 4px; margin-bottom: 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .025); box-shadow: none; }
.hero.studio-page .adv-inline.open .adv-card.studio::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 14px; pointer-events: none; background: linear-gradient(135deg, rgba(63, 184, 104, .65), rgba(26, 163, 232, .45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.hero.studio-page .adv-inline .adv-head { display: flex; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 0; }
.hero.studio-page .adv-inline .adv-head h3 { position: relative; font-size: .95rem; letter-spacing: .02em; color: #fff; }
.hero.studio-page .adv-inline .adv-head h3::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #3fb868, #1aa3e8); }
.hero.studio-page .adv-inline .adv-close { display: none; }
.hero.studio-page .adv-inline .adv-sec { border-bottom-color: rgba(255, 255, 255, .09); }
/* Studio: Advanced is a permanent section of the panel; EMBOSSIFY comes last, after everything */
.hero.studio-page .adv-pinned { display: block; visibility: visible; }
.hero.studio-page .adv-pinned .adv-card.studio { margin: 4px 0 18px; }
.hero.studio-page .studio-controls > .btn-cta { position: static; box-shadow: 0 8px 24px rgba(26, 163, 232, .25); }
.hero.studio-page .tabs { margin-bottom: 4px; }
/* Keep the preview pinned while the settings scroll: 'clip' hides overflow like 'hidden' but does not break sticky */
.hero.studio-page { overflow: clip; }

/* Preset description line under the preset buttons, and the "More" button when one of its presets is chosen */
.presets .preset-desc { flex: 0 0 100%; margin: 2px 0 0; min-height: 2.9em; font-size: .82rem; line-height: 1.45; color: #a9b8d1; }
.presets .preset-desc strong { color: #f1f7fd; font-weight: 600; }
.presets .preset-desc .pd-vals { display: inline; margin-left: 6px; font-size: .78rem; color: #7f8ba6; }
.preset-more summary.has-on { border-style: solid; border-color: rgba(63, 184, 104, .7); background: rgba(63, 184, 104, .2); color: #fff; }
.preset-more summary .pm-label { display: inline-block; max-width: 11.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.preset-menu .preset.on { background: rgba(63, 184, 104, .2); border-color: rgba(63, 184, 104, .7); box-shadow: inset 3px 0 0 #3fb868; }

/* "More presets" is a violet-tinted button so it reads as a menu, not another preset */
.preset-more summary { border-style: solid; border-color: rgba(150, 140, 255, .5); background: rgba(124, 108, 255, .16); color: #e6e2ff; }
.preset-more summary:hover, .preset-more[open] summary { background: rgba(124, 108, 255, .28); }

/* Size readout on the preview canvas, and full screen for Studio's preview */
.stage-size { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: #e9f4fb; background: rgba(9, 12, 19, .66); border: 1px solid rgba(255, 255, 255, .16); pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stage-size[hidden] { display: none; }
.full-toggle:disabled { opacity: .45; cursor: not-allowed; }
.full-toggle:disabled:hover { background: transparent; color: #cfd9ec; border-color: rgba(255, 255, 255, .2); }
.stage-col:fullscreen { height: 100%; padding: 18px; background: #0a0e17; }
.stage-col:fullscreen .stage { flex: 1; aspect-ratio: auto; }

/* The preset row: buttons flow in as many rows as the layout allows (data-rows); converter.js moves the overflow into "More presets".
   Until it has run, the area is clipped to that many rows so the page does not jump. */
.preset-rows { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.presets[data-rows="1"]:not(.fit) .preset-rows { max-height: 36px; overflow: hidden; }
.presets[data-rows="2"]:not(.fit) .preset-rows { max-height: 80px; overflow: hidden; }
.preset-rows > .preset { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.preset-rows > .preset.preset-reset { padding: 6px 14px; }
.preset-rows > .preset .pm-text { display: inline; }
.preset-rows > .preset .pm-text strong { font-size: inherit; font-weight: inherit; color: inherit; }
.preset-rows > .preset small, .preset-rows > .preset .pm-extra { display: none; }
.preset-rows > .preset .gico { width: 22px; height: 22px; border-radius: 30%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.preset-rows > .preset .gico svg { width: 74%; height: 74%; stroke-width: 3.4; }
.preset-more.menu-right .preset-menu { left: auto; right: 0; }

/* Studio: the presets are the top band of the Studio card, one row directly above the canvas, with the description below */
.studio-presets { grid-column: 1 / -1; padding: 0 2px 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.studio-presets .presets { margin: 0; }
.studio-presets .presets .preset-desc { min-height: 1.5em; margin: 8px 0 0; }

/* Illustrated content under the Viewer and Studio tools */
.art-band { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: clamp(14px, 3vw, 36px); margin-bottom: 26px; padding: clamp(22px, 4vw, 44px); border-radius: 26px; overflow: hidden; color: #fff; background: radial-gradient(520px 300px at 100% 0%, rgba(26, 163, 232, .32), transparent 70%), radial-gradient(420px 260px at 0% 100%, rgba(63, 184, 104, .22), transparent 70%), linear-gradient(160deg, #0b1226, #101b34); box-shadow: var(--shadow); }
.art-band::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 70% 50%, #000, transparent 75%); }
.art-kicker { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a9ecc0; background: rgba(63, 184, 104, .16); border: 1px solid rgba(63, 184, 104, .4); }
.art-copy h2 { margin: .45em 0 .35em; color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; }
.art-brand { display: inline-flex; align-items: center; gap: 9px; padding: 6px 11px 6px 13px; border-radius: 999px; background: rgba(6, 9, 16, .62); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.art-brand img { display: block; width: 104px; height: auto; }
.art-brand b { font: 700 .72rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: #04121d; padding: 5px 9px 5px 10px; border-radius: 999px; background: linear-gradient(100deg, #3fb868, #1aa3e8); }
.art-copy p { max-width: 46ch; margin: 0 0 16px; color: #b9c3d8; }
.art-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.art-chips li { padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: #dbe6f8; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.art-pic { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); animation: art-float 7s ease-in-out infinite; }
@keyframes art-float { 50% { transform: translateY(-6px); } }
@media (max-width: 860px) { .art-band { grid-template-columns: minmax(0, 1fr); } .art-pic { max-width: 640px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .art-pic { animation: none; } }

/* Feature cards with a colored icon (set --g1 and --g2 on the card) */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 6px; }
.feat { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(240px 130px at 100% 0, color-mix(in srgb, var(--g1) 16%, transparent), transparent 72%), #fff; transition: transform .15s, box-shadow .2s, border-color .2s; }
.feat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(9, 12, 19, .12); border-color: color-mix(in srgb, var(--g1) 45%, #fff); }
.feat .gico { margin-bottom: 6px; }
.feat strong { color: var(--ink); font-size: 1.05rem; }
.feat > span:last-child { color: #4a566f; font-size: .93rem; line-height: 1.5; }
.feat .gico svg, .sec-dark .gico svg { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .feat, .feat:hover { transition: none; transform: none; } }

/* A dark section for the promise (privacy) */
.help-sec.sec-dark { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 24px; align-items: start; color: #c9d4ea; border-color: transparent; background: radial-gradient(560px 260px at 100% 0%, rgba(26, 163, 232, .28), transparent 70%), radial-gradient(380px 220px at 0% 100%, rgba(63, 184, 104, .2), transparent 70%), var(--ink-2); }
.sec-dark h2 { color: #fff; }
.sec-dark strong { color: #fff; }
.sec-dark a { color: #7fd2ff; }
.sec-dark p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .help-sec.sec-dark { grid-template-columns: minmax(0, 1fr); } }

/* Keyboard keys */
.vw-info table code { display: inline-block; min-width: 1.9em; padding: 1px 8px 0; border-radius: 7px; font-size: .86rem; font-weight: 700; text-align: center; color: var(--ink); background: linear-gradient(#fff, #e6ecf5); border: 1px solid #c3cddd; border-bottom-width: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset; }

/* Studio: numbered steps, tips with ticks, and drawings of what the settings do */
.studio-info .prose ol.how-steps, .prose ol.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 10px 0 22px; padding: 0; list-style: none; counter-reset: hs; }
.prose ol.how-steps li { position: relative; margin: 0; padding: 18px; border-radius: 16px; background: #f5f9fc; border: 1px solid var(--line); counter-increment: hs; line-height: 1.5; }
.prose ol.how-steps li::before { content: counter(hs); display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 16px rgba(26, 163, 232, .28); }
.prose ul.tip-list { padding: 0; list-style: none; display: grid; gap: 10px; }
.prose ul.tip-list li { position: relative; margin: 0; padding: 12px 14px 12px 46px; border-radius: 14px; background: #f5f9fc; border: 1px solid var(--line); }
.prose ul.tip-list li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #3fb868, #1aa3e8) center / 100% no-repeat; }
.prose ul.tip-list li::after { content: ""; position: absolute; left: 21px; top: 18px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 10px 0 24px; }
.viz { margin: 0; overflow: hidden; border-radius: 18px; color: #fff; background: radial-gradient(220px 110px at 100% 0, rgba(26, 163, 232, .28), transparent 70%), var(--ink-2); box-shadow: var(--shadow); }
.viz svg { display: block; width: 100%; height: auto; padding: 12px 12px 0; }
.viz figcaption { display: flex; flex-direction: column; gap: 2px; padding: 4px 16px 16px; }
.viz figcaption strong { font-size: 1rem; }
.viz figcaption span { color: #b9c3d8; font-size: .88rem; line-height: 1.4; }
.viz .base { stroke: rgba(255, 255, 255, .25); stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }
.viz .soft { stroke: rgba(255, 255, 255, .42); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.viz .hi { stroke: #3fb868; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.viz .hb { stroke: #1aa3e8; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.viz .fill { fill: rgba(63, 184, 104, .22); stroke: none; }
.viz .fillb { fill: rgba(26, 163, 232, .22); stroke: none; }
.viz .dim { stroke: #f5b301; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.viz .lbl { fill: #9fb0cf; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-anchor: middle; }

/* ---------- Phone menu: a floating card with icons, a dimmed page behind it, and a hamburger that turns into a cross ---------- */
.nav .ni { display: none; }
.burger path { transition: transform .25s ease, opacity .2s ease; transform-box: fill-box; transform-origin: center; }
.nav-toggle[aria-expanded="true"] .burger .l1 { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger .l2 { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger .l3 { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger path { transition: none; } }
@media (max-width: 860px) {
  html.nav-locked { overflow: hidden; }
  html.nav-locked body::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(3, 5, 10, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .nav-toggle { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .05); }
  .site-header.menu-open .nav-toggle { background: rgba(26, 163, 232, .2); border-color: rgba(26, 163, 232, .55); }
  .nav { left: 10px; right: 10px; top: calc(100% + 6px); padding: 8px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; background: radial-gradient(320px 160px at 100% 0%, rgba(26, 163, 232, .18), transparent 70%), radial-gradient(260px 160px at 0% 100%, rgba(63, 184, 104, .14), transparent 70%), #0b101b; box-shadow: 0 26px 60px rgba(0, 0, 0, .6); max-height: calc(100vh - var(--header-h) - 22px); max-height: calc(100dvh - var(--header-h) - 22px); overscroll-behavior: contain; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
  .nav.open { display: block; animation: nav-in .2s ease-out; }
  @keyframes nav-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
  .nav > ul { gap: 3px; }
  .nav li { align-items: center; }
  .nav li > a, .nav > ul > li > a { display: flex; align-items: center; gap: 13px; padding: 9px 10px; font-size: 16px; font-weight: 600; letter-spacing: .01em; color: #e6edf9; border-radius: 14px; text-shadow: none; }
  .nav .ni { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; color: #8fdcff; background: rgba(26, 163, 232, .14); border: 1px solid rgba(26, 163, 232, .28); }
  .nav .ni svg { width: 19px; height: 19px; }
  .nav li:nth-child(3n+2) > a .ni { color: #9be8b4; background: rgba(63, 184, 104, .14); border-color: rgba(63, 184, 104, .3); }
  .nav li:nth-child(3n+3) > a .ni { color: #ffd68a; background: rgba(245, 179, 1, .12); border-color: rgba(245, 179, 1, .28); }
  .nav > ul > li.active > a { background: linear-gradient(100deg, rgba(63, 184, 104, .2), rgba(26, 163, 232, .2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  .nav > ul > li.active > a .ni { color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); border-color: transparent; }
  .nav li:hover > a, .nav li:focus-within > a { background: rgba(255, 255, 255, .07); }
  .nav .sub-toggle { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; margin-left: 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
  .nav .sub-toggle::after { transform: none; transform-origin: 50% 25%; transition: transform .2s ease; }
  .nav li.open > .sub-toggle::after { border-top-color: #cdd5e5; border-bottom-color: transparent; transform: rotate(180deg); }
  .nav .sub, .nav li:hover > .sub, .nav li:focus-within > .sub { flex: 1 0 calc(100% - 28px); margin: 2px 0 6px 28px; padding: 4px 0 4px 10px; background: none; border-left: 2px solid rgba(26, 163, 232, .35); border-radius: 0; }
  .nav .sub a { padding: 10px 12px; font-size: 15px; font-weight: 500; color: #b9c3d8; border-radius: 10px; }
  .nav .sub a:hover { color: #fff; }
}

/* ---------- Phones: tidy hero chips and a one-line presets bar ---------- */
@media (max-width: 640px) {
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 16px; }
  .chips li { gap: 7px; min-width: 0; padding: 6px 9px; font-size: .78rem; line-height: 1.25; }
  .chips li::before { width: 7px; height: 7px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot) 24%, transparent), 0 0 7px color-mix(in srgb, var(--dot) 60%, transparent); }
  .presets { position: relative; }
  .preset-rows > .qm { display: none; }
  .preset-rows { gap: 6px; }
  .preset-rows > .preset { padding: 5px 10px 5px 6px; font-size: .82rem; }
  .preset-rows > .preset.preset-reset { padding: 5px 10px; }
  .preset-more summary { padding: 6px 10px; font-size: .82rem; }
  .preset-more summary::after { margin-left: 5px; }
  .preset-more summary .pm-label { max-width: 7.5em; }
  .preset-menu { max-height: min(62vh, 440px); min-width: 0; }
}

/* ---------- Footer on small screens: text links stay on one line where they can ---------- */
@media (max-width: 720px) {
  .site-footer .foot-links { line-height: 1.3; }
  .site-footer .foot-links ul { flex-wrap: nowrap; justify-content: space-between; gap: 0 8px; }
  .site-footer .foot-links a { white-space: nowrap; font-size: clamp(.62rem, 3.3vw, .92rem); }
  .site-footer .social { justify-self: center; }
  .site-footer .copyright { line-height: 1.9; }
  .site-footer .copyright .sep { margin: 0 6px; }
  .site-footer .copyright .legal { display: block; }
}
@media (min-width: 721px) {
  .site-footer .copyright .legal::before { content: "\00b7"; margin: 0 8px; opacity: .5; }
}
@media (max-width: 340px) {
  .site-footer .foot-links ul { flex-wrap: wrap; gap: 4px 12px; }
}

/* ---------- Viewer: controls sit in a bar under the picture (never over it); the logo badge stays top right ---------- */
.vw-stage { container-type: inline-size; }
.vw:not([data-mode="empty"]) .vw-stage canvas, .vw:not([data-mode="empty"]) .vw-stage .vw-image, .vw:not([data-mode="empty"]) .vw-stage .vw-overlay { bottom: 56px; height: calc(100% - 56px); }
.vw-stage .vw-hud { top: auto; right: 0; bottom: 0; left: 0; max-width: none; height: 56px; padding: 0 14px; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; background: rgba(9, 12, 19, .94); border-top: 1px solid rgba(255, 255, 255, .12); }
.vw-stage .vw-hint { left: auto; right: 16px; bottom: 21px; }
@container (max-width: 960px) { .vw-hint { display: none; } }
.vw-stage .studio-mark { top: 12px; right: 12px; left: auto; bottom: auto; }
@media (max-width: 640px) {
  .vw-stage .studio-mark { top: 8px; right: 8px; left: auto; }
  .vw-stage .vw-hud { top: auto; right: 0; justify-content: center; gap: 6px; padding: 0 8px; }
}

/* ---------- About: mission, values and the made-in-the-USA badge ---------- */
.ab-intro { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 180px); gap: clamp(22px, 4vw, 52px); align-items: start; }
.ab-intro-text { max-width: 52em; }
.ab-mission { padding: 14px 18px; border-left: 4px solid #2c9b58; border-radius: 0 12px 12px 0; background: linear-gradient(100deg, rgba(63, 184, 104, .12), rgba(26, 163, 232, .08)); }
.ab-values { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 20px; padding: 0; list-style: none; }
.ab-values li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--text); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(9, 12, 19, .05); }
.ab-values svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.ab-usa { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 16px; text-align: center; border-radius: var(--radius); background: transparent; border: 1px solid var(--line); box-shadow: none; }
.ab-usa svg { width: 100%; max-width: 78px; height: auto; border-radius: 6px; filter: saturate(.4); opacity: .85; }
.ab-usa b { margin-top: 6px; font-size: .9rem; color: var(--text); }
.ab-usa span { font-size: .8rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 820px) { .ab-intro { grid-template-columns: minmax(0, 1fr); } .ab-usa { flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: left; gap: 14px; } .ab-usa svg { max-width: 120px; } .ab-usa b { margin: 0; } }

/* ---------- Contact: help notes across the top, then a full-width form ---------- */
.contact-page .wrap { display: grid; gap: 24px; }
.contact-info { max-width: none; width: 100%; padding: clamp(20px, 3vw, 30px); }
.ci-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px clamp(24px, 5vw, 64px); }
.ci-cols h3 { margin-top: 0; }
.ci-cols ul { margin-bottom: 0; }
.contact-form { position: relative; overflow: hidden; padding: clamp(22px, 3.5vw, 38px); }
.contact-form::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #3fb868, #1aa3e8); }
.cf-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.cf-head h2 { margin: 0; }
.cf-head p { margin: 2px 0 0; color: var(--muted); }
.cf-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); box-shadow: 0 8px 20px rgba(26, 163, 232, .3); }
.cf-ico svg { width: 26px; height: 26px; }
.contact-form .field input[type="email"] { width: 100%; max-width: 460px; }
.contact-form textarea { width: 100%; min-height: 200px; resize: vertical; }
.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
@media (max-width: 520px) { .contact-form .field input[type="email"] { max-width: none; } .cf-foot .btn { width: 100%; } }

/* Contact, tighter: less padding and gaps, a shorter message box, and the email beside the heading on wide screens */
.contact-page .wrap { gap: 14px; }
.contact-info { padding: 14px clamp(18px, 2.5vw, 26px) 16px; }
.ci-cols { gap: 0 clamp(24px, 5vw, 56px); }
.ci-cols h3 { margin: 0 0 6px; font-size: 1.02rem; }
.ci-cols li { margin-bottom: 2px; }
.contact-form { padding: 20px clamp(18px, 2.5vw, 26px) 18px; }
.cf-head { gap: 12px; margin-bottom: 12px; }
.cf-head h2 { font-size: 1.3rem; }
.cf-head p { margin: 0; font-size: .92rem; }
.cf-ico { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 4px 12px rgba(26, 163, 232, .25); }
.cf-ico svg { width: 21px; height: 21px; }
.contact-form .field { margin-bottom: 10px; }
.contact-form .field > label { margin-bottom: 4px; }
.contact-form textarea { min-height: 120px; }
.cf-foot { gap: 8px 18px; }

/* ---------- File formats at checkout and on the order page ---------- */
.fmt-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 0 0 12px; }
.fmt-opt { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400; }
.fmt-opt input { position: absolute; opacity: 0; }
.fmt-card { display: block; height: 100%; padding: 10px 12px 10px 38px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, background .15s; position: relative; }
.fmt-card::before { content: ""; position: absolute; left: 12px; top: 13px; width: 15px; height: 15px; border-radius: 4px; border: 2px solid #b5bfd0; background: #fff; }
.fmt-opt:hover .fmt-card { border-color: #7cc4ea; }
.fmt-opt input:checked + .fmt-card { border-color: #1aa3e8; background: #f1f9ff; box-shadow: 0 0 0 1px #1aa3e8; }
.fmt-opt input:checked + .fmt-card::before { border-color: #1aa3e8; background: #1aa3e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.fmt-opt input:disabled + .fmt-card { cursor: default; opacity: .85; }
.fmt-opt input:focus-visible + .fmt-card { outline: 3px solid rgba(26, 163, 232, .45); outline-offset: 2px; }
.fmt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fmt-top strong { color: var(--text); }
.fmt-top em { font-style: normal; font-size: .8rem; color: var(--muted); }
.fmt-blurb { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.35; color: #4a566f; }
.dl-formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.dl-formats .btn { min-width: 96px; }
.vw-formats { margin: 8px 4px 0; font-size: .76rem; line-height: 1.4; color: #6b7690; }

/* Buy dialog tabs, "Select all", and the "Add more formats" box on the receipt */
.buy-tabs { display: flex; gap: 4px; margin: 10px 0 12px; padding: 4px; border-radius: 12px; background: #eef2f8; }
.buy-tab { flex: 1; font: inherit; font-size: .9rem; font-weight: 600; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: #4a566f; cursor: pointer; }
.buy-tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(9, 12, 19, .15); }
.buy-tab:focus-visible { outline: 3px solid rgba(26, 163, 232, .45); outline-offset: 1px; }
.buy-count { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: .75rem; color: #fff; background: linear-gradient(100deg, #3fb868, #1aa3e8); }
.fmt-all { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.fmt-all input { width: 17px; height: 17px; accent-color: #1aa3e8; }
.fmt-opt.off { opacity: .55; }
.fmt-opt.off .fmt-card { cursor: not-allowed; }
.pt-opt.off { opacity: .5; filter: grayscale(1); }
.pt-opt.off .pt-card { cursor: not-allowed; background: #f3f5f8; }
.fmt-size { white-space: nowrap; color: #5b6b86; font-weight: 600; }
/* "Download as" tiles: wider than the picture-type tiles so every caption fits on one line and all tiles match. */
.formats-out .format-list { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.formats-out .format-list .fmt { padding: 8px 2px 7px; }
.formats-out .format-list .fmt b { font-size: .95rem; letter-spacing: .02em; }
.formats-out .format-list .fmt small { white-space: nowrap; font-size: .62rem; letter-spacing: 0; }
#pane-formats .fmt-pick { grid-template-columns: 1fr; margin-bottom: 8px; }
.upgrade-box { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.upgrade-box h3 { margin: 0 0 4px; }
.upgrade-box .fmt-pick { margin-bottom: 14px; }

.promo-row { display: flex; gap: 8px; margin-top: 8px; }
.promo-box { margin: 4px 0 14px; }
.promo-box summary { display: inline-block; cursor: pointer; color: #1479a8; font-size: .92rem; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.promo-box summary::-webkit-details-marker { display: none; }
.promo-box summary:hover { color: #0b5a7d; }
.promo-box small { display: block; margin-top: 6px; }
.pulse-once { animation: pulse-once 1.4s ease-out 2; }
@keyframes pulse-once { 0% { box-shadow: 0 0 0 0 rgba(26, 163, 232, .55); } 100% { box-shadow: 0 0 0 18px rgba(26, 163, 232, 0); } }
.promo-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.sale-note { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: rgba(63, 184, 104, .12); border: 1px solid rgba(63, 184, 104, .4); color: #1f7a45; font-weight: 600; font-size: .92rem; text-align: center; }
#co-disc-row td { color: #1f7a45; }

.site-popup { width: min(92vw, 460px); padding: 30px 28px 24px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: linear-gradient(180deg, #131a28, #0c1019); color: #dbe8f8; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.site-popup::backdrop { background: rgba(5, 8, 14, .66); }
.site-popup h2 { margin: 0 0 10px; font-size: 1.55rem; background: linear-gradient(90deg, #6fe39b, #5cc8f5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-popup p { margin: 0 0 20px; color: #b4c3dc; line-height: 1.55; }
.site-popup-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.site-popup-x { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #9fb0cc; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.site-popup-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Announcement bar: fixed above the (fixed) header; the header and page move down while it is there. */
.site-notice { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; padding: 4px 40px; box-sizing: border-box; background: linear-gradient(90deg, #1f7a45, #1479a8); color: #fff; font-size: .9rem; text-align: center; }
.site-notice p { margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.site-notice a { color: #fff; font-weight: 700; text-decoration: underline; }
.site-notice-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.site-notice-x:hover { background: rgba(255, 255, 255, .2); }
body:has(.site-notice) .site-header { top: 36px; }
body:has(.site-notice) main { margin-top: 36px; }
@media (max-width: 640px) { .site-notice { font-size: .82rem; padding: 4px 36px 4px 12px; } }

/* ---------- Embossify Terra (prototype) ---------- */
.terra { display: grid; grid-template-columns: minmax(300px, 410px) minmax(0, 1fr); gap: 20px; align-items: start; }
.terra .card { margin-bottom: 16px; }
.terra-form { position: relative; overflow: hidden; }
.terra-form::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #3fb868, #1aa3e8); }
.terra-tag { display: inline-block; margin-bottom: 12px; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.terra-form .field { margin-bottom: 14px; }
.terra-form .field-row { gap: 12px; margin-bottom: 0; }
.terra-form input[type="text"] { width: 100%; }
.terra-form input[type="range"] { width: 100%; accent-color: var(--glow-a); }
.terra-form output { float: right; font-weight: 700; color: var(--accent-dark); }
.terra-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.terra-seg label { flex: 1 1 52px; margin: 0; cursor: pointer; }
.terra-seg input { position: absolute; opacity: 0; pointer-events: none; }
.terra-seg span { display: block; padding: 9px 2px; white-space: nowrap; text-align: center; font-weight: 700; font-size: .92rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.terra-seg input:checked + span { color: #fff; border-color: transparent; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.terra-seg input:focus-visible + span { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.terra-places { display: flex; flex-wrap: wrap; gap: 8px; }
.terra-form .btn-cta { width: 100%; }
.terra-form .btn-cta:disabled { opacity: .7; cursor: progress; }
.terra-note { margin: 12px 0 0; font-size: .85rem; }
.terra-stage canvas { height: min(62vh, 540px); }
.terra-stage[data-state="busy"] .viewer-msg::before { content: ""; width: 22px; height: 22px; margin-right: 12px; flex: none; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #3fb868; animation: terra-spin .9s linear infinite; }
.terra-stage[data-state="error"] .viewer-msg { color: #ffb4ab; }
@keyframes terra-spin { to { transform: rotate(360deg); } }
.terra-result h2 { margin-top: 0; font-size: 1.2rem; }
.terra-stats { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0 0 16px; }
.terra-stats dt { color: var(--muted); }
.terra-stats dd { margin: 0; font-weight: 600; }
.terra-dl { display: flex; flex-wrap: wrap; gap: 10px; }
.terra-credit { margin: 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 860px) { .terra { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .terra-stage[data-state="busy"] .viewer-msg::before { animation: none; } }

/* Terra: choosing a place (popular places, map, link) */
.terra-pick { margin-bottom: 20px; }
.tp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.tp-head h2, .terra-form > h2, .terra-result h2 { margin: 0; font-size: 1.25rem; }
.tp-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: #eef3f9; }
.tp-tabs button { font: inherit; font-size: .9rem; font-weight: 600; padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.tp-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); box-shadow: 0 4px 12px rgba(26, 163, 232, .3); }
.tp-tabs button:focus-visible { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.tp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tp-group h3 { margin: 18px 0 10px; font-size: 1.02rem; }
.tp-group h3 small { margin-left: 8px; font-weight: 400; color: var(--muted); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
/* Phones: one swipeable row instead of a stack */
@media (max-width: 640px) {
  .tp-grid { display: flex; gap: 10px; margin: 0 -4px; padding: 2px 4px 8px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tp-grid .tp-card { flex: 0 0 140px; scroll-snap-align: start; }
}
.tp-cats small { opacity: .7; margin-left: 2px; }
.tp-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 14px 16px; font-weight: 700; text-align: center; text-decoration: none; color: var(--accent-dark); border: 1.5px dashed var(--accent); border-radius: 14px; transition: background .15s; }
.tp-more:hover, .tp-more:focus-visible { background: rgba(26, 163, 232, .08); outline: none; }
.tp-card { display: flex; flex-direction: column; text-align: left; padding: 0; font: inherit; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tp-card:hover, .tp-card:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 24px rgba(26, 163, 232, .18); outline: none; }
.tp-thumb { display: block; aspect-ratio: 1; background: #1a2333; }
.tp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tp-name { padding: 8px 10px 0; font-weight: 700; font-size: .9rem; line-height: 1.25; }
.tp-blurb { padding: 2px 10px 10px; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.tm-stage { position: relative; border-radius: 14px; overflow: hidden; background: #0d1522; }
.tm-stage canvas { display: block; width: 100%; height: min(56vh, 460px); touch-action: pan-x pan-y; outline: none; }
.tm-stage canvas:focus-visible { box-shadow: inset 0 0 0 3px rgba(26, 163, 232, .6); }
.tm-ctl { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; }
.tm-ctl .chip-btn { width: 36px; height: 36px; padding: 0; font-size: 1.2rem; line-height: 1; }
.tm-msg { position: absolute; left: 12px; bottom: 10px; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: .8rem; color: #fff; background: rgba(0, 0, 0, .55); }
.tm-msg:empty, .tm-msg[hidden] { display: none; }
.tm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.tm-read { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); }
.tl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-row input { flex: 1 1 320px; min-width: 0; }
.tl-msg { min-height: 1.4em; margin: 10px 0 0; }
.tl-msg.ok { color: #067647; }
.tl-msg.bad { color: #b42318; }
.tf-place { margin: 4px 0 14px; color: var(--muted); }
.terra-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.terra-colors label { margin: 0; cursor: pointer; }
.terra-colors input { position: absolute; opacity: 0; pointer-events: none; }
.terra-colors span { display: block; padding: 6px 8px 7px; font-size: .82rem; font-weight: 600; text-align: center; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.terra-colors i { display: block; height: 10px; margin-bottom: 5px; border-radius: 5px; }
.terra-colors input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26, 163, 232, .35); }
.terra-colors input:focus-visible + span { outline: 3px solid rgba(26, 163, 232, .5); outline-offset: 2px; }
.terra-check { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 6px; }
.terra-form select { width: 100%; }
.terra-pro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; border: 1px solid rgba(63, 184, 104, .45); background: linear-gradient(135deg, rgba(63, 184, 104, .08), rgba(26, 163, 232, .08)), var(--card); }
.terra-pro h2 { margin: 0 0 6px; font-size: 1.15rem; }
.terra-pro > div { flex: 1 1 320px; }
.terra-pro p { margin: 0 0 6px; }
#t-buy-dialog .field { margin-bottom: 0; }
#t-buy-dialog input[type="email"] { width: 100%; }

/* Terra library */
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 8px; }
.tl-bar input[type="search"] { flex: 1 1 260px; min-width: 0; }
.tl-bar .tp-cats { margin: 0; flex: 2 1 360px; }
.tl-bar small { opacity: .7; }
.lib-group h2 { margin: 26px 0 12px; font-size: 1.3rem; }
.lib-group h2 small { margin-left: 10px; font-weight: 400; font-size: .85rem; color: var(--muted); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.lib-card { display: flex; flex-direction: column; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.lib-card:hover, .lib-card:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(26, 163, 232, .2); outline: none; }
.lib-thumb { position: relative; display: block; aspect-ratio: 1; background: #1a2333; }
.lib-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lib-tag { position: absolute; top: 10px; left: 10px; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.lib-name { padding: 11px 13px 0; font-weight: 700; line-height: 1.25; }
.lib-blurb { padding: 3px 13px 0; font-size: .85rem; line-height: 1.4; color: var(--muted); }
.lib-meta { margin-top: auto; padding: 10px 13px 13px; font-size: .76rem; color: var(--accent-dark); font-weight: 600; }
.lib-card[hidden], .lib-group[hidden], .tp-group[hidden] { display: none; }
.tp-lib { margin: 0 0 12px; }
.tp-find { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.tp-find input[type="search"] { flex: 1 1 280px; min-width: 0; }
.tp-none { margin: 10px 0; }
.tm-gate { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; border-radius: 14px; background: #0d1522; color: #cfd9ec; }
.tm-gate p { margin: 0; max-width: 60ch; }
.tp-group[hidden], .tp-card[hidden] { display: none; }
.tp-explorer { font-weight: 600; white-space: nowrap; }
.tpl-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 20px; align-items: start; margin-bottom: 4px; }
.tpl-viewer { margin-bottom: 0; }
.tpl-viewer .terra-stage canvas { height: min(58vh, 480px); }
.tpl-crumb { margin: 0 0 14px; font-size: .9rem; color: var(--muted); }
.tpl-crumb a { color: var(--muted); }
.tpl-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tpl-actions .btn[hidden] { display: none; }
.tpl-note { margin: 0 0 14px; font-size: .9rem; }
.tpl-credit { margin: 12px 0 0; font-size: .85rem; color: var(--muted); }
.tpl-near { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tpl-near-card { display: flex; align-items: center; gap: 10px; padding: 8px; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.tpl-near-card:hover, .tpl-near-card:focus-visible { border-color: var(--accent); box-shadow: 0 8px 20px rgba(26, 163, 232, .15); outline: none; }
.tpl-near-card img { flex: none; width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: #1a2333; }
.tpl-near-card strong { display: block; font-size: .9rem; line-height: 1.25; }
.tpl-near-card small { color: var(--muted); }
.tpl-pic { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
.tpl-pic img { width: 100%; height: auto; border-radius: 12px; display: block; }
.tpl-facts h2, .terra-place .prose h2 { margin-top: 0; }
.tpl-more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.tpl-pn { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .tpl-top { grid-template-columns: minmax(0, 1fr); } .tpl-pic img { max-width: 260px; margin: 0 auto; } }
.tp-geo { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.tp-geo input[type="search"] { flex: 1 1 320px; min-width: 0; border-radius: 999px; padding-left: 18px; }
.tg-results { margin: 0 0 14px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.tg-note { margin: 2px 6px 8px; color: var(--muted); }
.tg-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; width: 100%; padding: 9px 12px; font: inherit; text-align: left; color: var(--text); background: none; border: 0; border-radius: 10px; cursor: pointer; }
.tg-item:hover, .tg-item:focus-visible { background: #eef6fb; outline: none; }
.tg-item strong { grid-column: 1; }
.tg-item span { grid-column: 1; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.tg-item em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; font-size: .8rem; color: var(--accent-dark); }
.tg-credit { margin: 8px 6px 0; font-size: .78rem; color: var(--muted); }
.nav .nav-search-li > a { padding-left: 8px; padding-right: 8px; display: inline-flex; align-items: center; }
.nav > ul > li.nav-search-li.active > a::after { left: 8px; right: 8px; }
@media (max-width: 860px) { .nav .nav-search-li { display: none; } }
.terra-how { margin: 0 0 20px; padding: 18px 22px; border-radius: var(--radius); border: 1px solid rgba(63, 184, 104, .4); background: linear-gradient(135deg, rgba(63, 184, 104, .08), rgba(26, 163, 232, .08)), var(--card); }
.terra-how h2 { margin: 0 0 10px; font-size: 1.15rem; }
.terra-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: how; }
.terra-how li { position: relative; padding-left: 38px; line-height: 1.45; counter-increment: how; }
.terra-how li::before { content: counter(how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.terra-how p { margin: 0; font-size: .93rem; }
@media (max-width: 820px) { .terra-how ol { grid-template-columns: minmax(0, 1fr); } }

/* The thin search bar under the header (small screens use the footer icon instead) */
.search-strip { background: #0e1421; border-bottom: 1px solid var(--line-d); }
.search-strip form { display: flex; justify-content: flex-end; align-items: center; gap: 0; padding-top: 5px; padding-bottom: 5px; }
.search-strip input[type="search"] { width: min(320px, 100%); height: 28px; padding: 0 12px; font-size: .85rem; color: #e8edf7; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-d); border-right: 0; border-radius: 999px 0 0 999px; box-shadow: none; }
.search-strip input[type="search"]::placeholder { color: #8d99b1; }
.search-strip input[type="search"]:focus { outline: none; background: rgba(255, 255, 255, .12); border-color: rgba(26, 163, 232, .7); }
.search-strip button { display: grid; place-items: center; width: 34px; height: 28px; padding: 0; color: #cfd8ea; background: rgba(255, 255, 255, .1); border: 1px solid var(--line-d); border-radius: 0 999px 999px 0; cursor: pointer; }
.search-strip button:hover, .search-strip button:focus-visible { color: #fff; background: rgba(26, 163, 232, .7); outline: none; }
.site-footer .social .social-search { display: none; }
@media (max-width: 860px) { .search-strip { display: none; } .site-footer .social .social-search { display: list-item; } }

/* Terra Explorer: a category rail, a grid of places, and a window with the 3D model */
.ex { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.ex-side { position: sticky; top: calc(var(--header-h) + 14px); display: flex; flex-direction: column; gap: 12px; }
.ex-side input[type="search"] { width: 100%; border-radius: 999px; }
.ex-cats { display: flex; flex-direction: column; gap: 4px; }
.ex-cat { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 14px; font: inherit; font-weight: 600; text-align: left; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.ex-cat small { color: var(--muted); font-weight: 600; }
.ex-cat:hover { border-color: var(--accent); }
.ex-cat[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.ex-cat[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.ex-surprise { width: 100%; }
.ex-any { font-size: .88rem; font-weight: 600; text-align: center; }
.ex-group[hidden], .ex .lib-card[hidden] { display: none; }
.ex .lib-card { position: relative; font: inherit; text-align: left; padding: 0; }
.ex .lib-card:focus-within { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(26, 163, 232, .2); }
.lib-link { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; outline: none; }
.lib-quick { position: absolute; top: 9px; right: 9px; min-width: 40px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; font: inherit; font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(9, 12, 19, .78); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.lib-quick:hover, .lib-quick:focus-visible { background: linear-gradient(135deg, #3fb868, #1aa3e8); outline: 2px solid #fff; }
.ex-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ex-blurb { margin: 0 0 10px; }
#ex-dialog .viewer-stage canvas { height: min(52vh, 440px); }
@media (max-width: 860px) {
  .ex { grid-template-columns: minmax(0, 1fr); }
  .ex-side { position: static; }
  .ex-cats { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ex-cat { flex: none; white-space: nowrap; }
  .ex-cat small { display: none; }
  .ex-any { text-align: left; }
}
.tp-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tp-sale { font-size: .85rem; font-weight: 700; color: #067647; }
.tp-sale s { margin-left: 6px; color: var(--muted); font-weight: 400; }
/* ---------- Site search: the box (in the Help, Learn and guide headers, and on /search) and the results page ---------- */
.site-search { display: flex; gap: 8px; max-width: 560px; margin-top: 14px; }
.site-search input[type="search"] { flex: 1 1 auto; min-width: 0; border-radius: 999px; padding: 10px 18px; }
.site-search .btn { flex: none; padding-left: 22px; padding-right: 22px; }
.page-head .site-search input[type="search"] { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); }
.page-head .site-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .62); }
.page-head .site-search input[type="search"]:focus { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); outline: none; }
.search-card .site-search { max-width: none; margin: 0; }
.search-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.search-count { margin: 4px 2px 12px; }
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.search-results .card { position: relative; margin: 0; padding: 16px 20px; }
.search-results h2 { margin: 4px 0 6px; font-size: 1.12rem; }
.search-results h2 a { text-decoration: none; color: var(--text); }
.search-results h2 a:hover { color: var(--accent-dark); text-decoration: underline; }
.search-sec { font-weight: 400; color: var(--muted); }
.search-snip { margin: 0 0 6px; line-height: 1.55; }
.search-snip mark { background: rgba(245, 179, 1, .3); color: inherit; padding: 0 2px; border-radius: 3px; }
.search-url { margin: 0; font-size: .8rem; color: #067647; overflow-wrap: anywhere; }
.search-kind { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #64748b; }
.search-kind.kind-guide { background: linear-gradient(135deg, #7c5cff, #1aa3e8); }
.search-kind.kind-faq { background: linear-gradient(135deg, #1aa3e8, #4f46e5); }
.search-kind.kind-tool { background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.search-kind.kind-place { background: linear-gradient(135deg, #3fb868, #0ea5a5); }
@media (max-width: 520px) { .site-search { flex-wrap: wrap; } .site-search .btn { width: 100%; } }

/* The slim search bar above the article on the FAQ and Learn pages */
.help-main { min-width: 0; }
.article-search { display: flex; align-items: center; gap: 10px; height: 48px; margin: 0 0 20px; padding: 0 6px 0 18px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 22px rgba(15, 23, 42, .06); transition: border-color .15s, box-shadow .15s; }
.article-search:hover { border-color: #c9d3e3; }
.article-search:focus-within { border-color: transparent; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(26, 163, 232, .6), 0 12px 28px rgba(26, 163, 232, .2); }
.article-search .as-ico { flex: none; width: 19px; height: 19px; color: #7c8aa3; transition: color .15s; }
.article-search:focus-within .as-ico { color: var(--accent); }
.article-search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 1rem; color: var(--text); -webkit-appearance: none; appearance: none; }
.article-search input[type="search"]:focus { outline: none; box-shadow: none; }
.article-search input[type="search"]::placeholder { color: #8493ab; }
.article-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.article-search .as-key { flex: none; padding: 1px 8px 2px; font: 600 .78rem/1.3 var(--font); color: #7c8aa3; background: #f3f6fb; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px; }
.article-search:focus-within .as-key { opacity: 0; }
.article-search .as-go { flex: none; height: 36px; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-size: .86rem; font-weight: 700; letter-spacing: .06em; color: #fff; cursor: pointer; background: linear-gradient(135deg, #3fb868, #1aa3e8); box-shadow: 0 4px 12px rgba(26, 163, 232, .3); transition: filter .15s, transform .12s; }
.article-search .as-go:hover, .article-search .as-go:focus-visible { filter: brightness(1.08); outline: none; }
.article-search .as-go:active { transform: translateY(1px); }
.learn-page > .wrap > .article-search { max-width: 760px; margin-left: auto; margin-right: auto; margin-bottom: 26px; }
@media (max-width: 600px) { .article-search { height: 44px; } .article-search .as-key { display: none; } .article-search .as-go { height: 32px; padding: 0 16px; } }.bal-big { margin: 0 0 6px; font-size: 1.15rem; color: var(--muted); }
.bal-big strong { font-size: 2.6rem; line-height: 1.1; background: linear-gradient(135deg, #3fb868, #1aa3e8); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Gallery: objects, coins and terrain showcases */
.gal-h { margin: 28px 0 12px; font-size: 1.15rem; }
.gal-h:first-of-type { margin-top: 4px; }
.gal-sub { margin: -6px 0 12px; font-size: .92rem; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.gal-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px 14px; text-align: center; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.gal-item:hover, .gal-item:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 26px rgba(26, 163, 232, .18); outline: none; }
.gal-item strong { font-size: .88rem; line-height: 1.25; }
.gal-item small { color: var(--muted); font-size: .76rem; }
.gal-art { display: flex; align-items: center; justify-content: center; min-height: 64px; margin-bottom: 4px; }
.gal-coins .gal-art { min-height: 76px; }
.gal-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gal-place { display: flex; flex-direction: column; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.gal-place:hover, .gal-place:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(26, 163, 232, .2); outline: none; }
.gal-place img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #1a2333; }
.gal-place span { display: block; padding: 11px 14px 14px; }
.gal-place strong { display: block; line-height: 1.25; }
.gal-place small { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.4; color: var(--muted); }

/* Studio and Lens start with the standard banner; the tool section sits right under it. */
.page-head + .hero { padding-top: clamp(18px, 2.5vw, 30px); }
.page-head + .hero.studio-page { margin-top: -1px; }
/* Big screens: the page grows with the window (see --wrap), and the type grows a little so it does not look tiny. */
@media (min-width: 1700px) { html { font-size: 106.25%; } }
@media (min-width: 2200px) { html { font-size: 112.5%; } }

/* Checkout: one guided page (detail, formats, email) with a live order summary beside it. Used for the converter and Terra. */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: start; }
.co-main { display: grid; gap: 18px; min-width: 0; }
.co-main .card, .co-side .card { margin: 0; }
.co-step h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 1.25rem; }
.co-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: .95rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.co-tag { margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.co-ultra { margin-top: 10px; }
.co-step .fmt-pick { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.co-side { position: sticky; top: calc(var(--header-h) + 14px); }
.co-summary h2 { margin: 0 0 10px; font-size: 1.25rem; }
.co-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: .92rem; }
.co-facts dt { color: var(--muted); }
.co-facts dd { margin: 0; overflow-wrap: anywhere; }
.co-lines { list-style: none; margin: 0 0 8px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 6px; font-size: .95rem; }
.co-lines li { display: flex; justify-content: space-between; gap: 12px; }
.co-lines b { font-weight: 600; white-space: nowrap; }
.co-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 6px 0; }
.co-total-row[hidden] { display: none; }
.co-grand { margin: 10px 0 14px; font-size: 1.1rem; }
.co-grand strong { font-size: 1.7rem; }
.co-note { margin: 12px 0 0; font-size: .85rem; }
.co-codes { display: grid; gap: 10px; }
@media (max-width: 960px) { .co-grid { grid-template-columns: minmax(0, 1fr); } .co-side { position: static; } }

/* After the free conversion: a wider window, an STL button and matching buttons for the other free formats. */
#done-dialog { width: min(640px, 100% - 32px); }
.fmt-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; }
.fmt-btns .fmt-btn { display: inline-flex; flex-direction: column; align-items: center; min-width: 92px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); font-weight: 700; text-decoration: none; line-height: 1.2; transition: transform .15s, border-color .15s, box-shadow .15s; }
.fmt-btns .fmt-btn small { margin: 2px 0 0; font-size: .74rem; font-weight: 500; color: var(--muted); }
.fmt-btns .fmt-btn:hover, .fmt-btns .fmt-btn:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 18px rgba(26, 163, 232, .18); outline: none; }
.fmt-btns-label { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
.buy-cta { text-align: left; }
.buy-cta ul { margin: 8px 0 14px; padding-left: 1.2em; color: var(--muted); font-size: .92rem; }
.btn .btn-sub { display: block; font-size: .78rem; font-weight: 500; opacity: .9; }

/* The upgrade offer after a free conversion: a clear card with one big button. */
.result-option.buy-cta { margin-top: 14px; padding: 18px; border: 2px solid #1aa3e8; border-radius: 16px; background: linear-gradient(135deg, rgba(63, 184, 104, .08), rgba(26, 163, 232, .12)); text-align: center; }
.result-option.buy-cta h4 { margin: 0 0 4px; font-size: 1.2rem; }
.result-option.buy-cta .pro-lead { margin: 0 0 12px; color: var(--muted); }
.result-option.buy-cta + .result-option, .result-option + .result-option.buy-cta { border-top: 2px solid #1aa3e8; }
.btn-up { font-size: 1.1rem; padding: 14px 18px; }
.btn-up b { font-weight: 800; }

/* Place pages: use the width of a big screen like an art site, instead of long narrow blocks. */
.tpl-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.tpl-col { display: grid; gap: 20px; min-width: 0; }
.tpl-col > .card { margin: 0; }
.tpl-col .prose { max-width: none; }
.tpl-top { margin-bottom: 0; }
.tpl-viewer .terra-stage canvas { height: clamp(420px, 62vh, 860px); }
@media (min-width: 1500px) { .tpl-top { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); gap: 26px; } .tpl-cols { gap: 26px; } .tpl-col { gap: 26px; } }
@media (max-width: 1000px) { .tpl-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .tpl-top { grid-template-columns: minmax(0, 1fr); } .tpl-viewer .terra-stage canvas { height: min(70vw, 420px); } }

/* Every black header band is the same height, whatever is in it: title and subtitle sit in the middle, and the icon never changes it. */
.page-head-grid { min-height: 132px; }
.page-head-grid > div:first-child { align-self: center; }
@media (max-width: 900px) { .page-head-grid { min-height: 150px; } .page-head .deck { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }
@media (min-width: 1700px) { .page-head-grid { min-height: 150px; } }

/* Terra: size units and "make it a..." chips */
.size-row { display: flex; gap: 8px; }
.size-row select:first-child { flex: 1; min-width: 0; }
.terra-things { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.terra-things .chip-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; height: auto; padding: 8px 12px; text-align: left; border-radius: 12px; }
.terra-things .chip-btn small { font-size: .74rem; font-weight: 500; opacity: .75; }
.terra-things .chip-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Terra collections */
.col-intro { max-width: 52em; margin: 0 0 20px; font-size: 1.05rem; color: var(--muted); }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.col-card { text-decoration: none; }
.col-more { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.col-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.col-set { display: flex; flex-direction: column; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.col-set:hover, .col-set:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(26, 163, 232, .2); outline: none; }
.col-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); background: #1a2333; }
.col-mosaic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.col-set-text { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.col-set-text strong { font-size: 1.1rem; }
.col-set-text span { color: var(--muted); }
.col-set-text small { color: var(--accent-dark); font-weight: 600; }

/* Gallery objects open /make/{slug}; the make page's sample pictures */
.gal-make { display: block; margin-top: 4px; font-size: .8rem; font-weight: 600; color: var(--brand-2, #1a7fb8); opacity: .85; }
.gal-item:hover .gal-make, .gal-item:focus-visible .gal-make { opacity: 1; text-decoration: underline; }
.make-samples { margin: 14px 0 0; padding: 14px 16px; border: 1px solid rgba(26, 163, 232, .3); border-radius: 12px; background: rgba(26, 163, 232, .06); }
.make-samples p { margin: 0 0 8px; }
.make-sample-row { display: flex; flex-wrap: wrap; gap: 8px; }
.make-sample { padding: 0; border: 2px solid transparent; border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; line-height: 0; }
.make-sample:hover, .make-sample:focus-visible { border-color: #1aa3e8; }
.make-sample img { width: 64px; height: 64px; object-fit: cover; }

/* Error pages */
.err-page .alert { margin-bottom: 16px; }
.err-search { margin-bottom: 8px; }
.err-search-row { display: flex; gap: 10px; margin-top: 10px; }
.err-search-row input { flex: 1; min-width: 0; }
.err-h { margin: 28px 0 12px; font-size: 1.25rem; }
.err-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.err-link { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s; }
.err-link span { color: var(--muted, #5b6577); font-size: .9rem; }
.err-link:hover, .err-link:focus-visible { transform: translateY(-2px); border-color: #1aa3e8; }
.err-near { border-color: #3fb868; }
.make-samples .muted { margin-top: 10px; }

.bulk-custom { margin-top: 20px; }
.bulk-custom p { max-width: 46em; }

/* Quick tour (src/Tour.php, public/assets/js/tour.js) */
.tour-fab-wrap { position: fixed; left: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; gap: 4px; }
.tour-fab-wrap[hidden] { display: none; }
.tour-fab-x { width: 26px; height: 26px; padding: 0; font-size: 1.1rem; line-height: 1; color: #fff; background: #0e1a2b; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; cursor: pointer; opacity: .85; }
.tour-fab-x:hover, .tour-fab-x:focus-visible { opacity: 1; border-color: #5cc8f5; }
.tour-fab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; font: inherit; font-size: .92rem; font-weight: 600; color: #fff; background: #0e1a2b; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); cursor: pointer; }
.tour-fab span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #3fb868, #1aa3e8); font-weight: 800; }
.tour-fab:hover, .tour-fab:focus-visible { border-color: #5cc8f5; }
.tour-spot { position: fixed; z-index: 2000; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 3px #1aa3e8, 0 0 0 9999px rgba(5, 10, 20, .62); transition: top .2s, left .2s, width .2s, height .2s; }
.tour-card { position: fixed; z-index: 2001; width: min(360px, calc(100vw - 24px)); padding: 16px 18px; color: #1b2433; background: #fff; border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); }
.tour-card[hidden], .tour-spot[hidden] { display: none; }
.tour-card.tour-dock { top: auto !important; left: 12px !important; right: 12px; bottom: 12px; width: auto; }
.tour-count { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1a7fb8; }
.tour-title { margin: 0 0 6px; font-size: 1.15rem; }
.tour-text { margin: 0 0 14px; line-height: 1.5; }
.tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour-nav button { font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 10px; border: 1px solid #c9d2e0; background: #fff; color: #1b2433; cursor: pointer; }
.tour-nav button.tour-next { color: #fff; border-color: transparent; background: linear-gradient(135deg, #3fb868, #1aa3e8); margin-left: 6px; }
.tour-nav button.tour-skip { border-color: transparent; background: none; color: #5b6577; padding-left: 0; }
.tour-nav button:disabled { opacity: .4; cursor: default; }
@media print { .tour-fab, .tour-spot, .tour-card { display: none; } }

/* The "your embossment is ready" pop-up: wide, two columns (free download | upgrade), and it pops in. */
dialog#done-dialog { width: min(880px, 100% - 24px); border: 0; }
dialog#done-dialog[open] { animation: done-pop .32s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes done-pop { from { opacity: 0; transform: translateY(18px) scale(.93); } to { opacity: 1; transform: none; } }
dialog#done-dialog .dlg-head { display: flex; align-items: center; gap: 14px; padding: 22px 28px; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
dialog#done-dialog .dlg-head::before { content: "\2713"; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .25); color: #fff; font-size: 1.5rem; font-weight: 800; }
dialog#done-dialog .dlg-head h3 { margin: 0; color: #fff; font-size: clamp(1.3rem, 3vw, 1.8rem); }
dialog#done-dialog .dlg-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; padding: 24px 28px; }
dialog#done-dialog .dlg-body:has(#buy-pro[hidden]) { grid-template-columns: minmax(0, 520px); justify-content: center; }
dialog#done-dialog .result-dims { grid-column: 1 / -1; margin: 0; font-size: 1rem; }
dialog#done-dialog .result-option { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
dialog#done-dialog .result-option + .result-option { border: 0; }
dialog#done-dialog .result-option.buy-cta { padding: 22px; box-shadow: 0 8px 28px rgba(26, 163, 232, .22); }
dialog#done-dialog .btn-block { font-size: 1.05rem; padding: 14px 18px; }
@media (max-width: 720px) { dialog#done-dialog .dlg-body { grid-template-columns: minmax(0, 1fr); padding: 18px; } dialog#done-dialog .dlg-head { padding: 16px 18px; } }
@media (prefers-reduced-motion: reduce) { dialog#done-dialog[open] { animation: none; } }

.make-samples summary { cursor: pointer; }
.make-samples[open] summary { margin-bottom: 8px; }
.make-cat { margin: 10px 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.make-note { margin-top: 12px; font-size: .85rem; }
.make-sample img { width: 56px; height: 56px; }

/* Terra Explorer: a map first, the list second */
.ex { display: block; }
.ex-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.ex-bar input[type="search"] { flex: 1 1 260px; min-width: 0; border-radius: 999px; }
.ex .ex-cats { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ex .ex-cat { padding: 6px 12px; border-radius: 999px; font-size: .9rem; }
.ex-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.ex .ex-cat { justify-content: flex-start; }
.ex .ex-cat small { margin-left: 4px; }
.ex-mapwrap { margin: 0 0 12px; border-radius: 16px; }
.ex-mapwrap canvas { height: clamp(380px, 66vh, 820px); }
.ex-mapwrap .ex-count { position: absolute; left: 12px; top: 12px; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: .8rem; color: #fff; background: rgba(0, 0, 0, .55); }
.ex-pin { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 12px; width: min(420px, calc(100% - 28px)); padding: 12px; color: var(--text); background: #fff; border-radius: 14px; box-shadow: 0 10px 32px rgba(0, 0, 0, .4); }
.ex-pin[hidden] { display: none; }
.ex-pin img { flex: none; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; background: #0d1522; }
.ex-pin-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: .9rem; }
.ex-pin-text strong { font-size: 1.05rem; }
.ex-pin-text small { color: var(--muted); }
.ex-pin-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ex-pin-x { position: absolute; top: 4px; right: 8px; font-size: 1.4rem; line-height: 1; border: 0; background: none; cursor: pointer; color: var(--muted); }
.ex-how { margin: 0 0 14px; }
.ex-list { margin-top: 8px; }
.ex-list > summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
@media (max-width: 700px) { .ex-pin { left: 8px; right: 8px; bottom: 8px; width: auto; } .ex-pin img { width: 72px; height: 72px; } }
.ex-bar .ex-surprise, .ex-bar .btn { width: auto; flex: none; }
.ex-bar input[type="search"] { height: 44px; padding: 0 18px; font: inherit; border: 1px solid var(--line); background: #fff; }
.ex .ex-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.ex .ex-cat { flex: none; white-space: nowrap; }
.ex, .ex-bar, .ex .ex-cats, .ex-mapwrap { min-width: 0; max-width: 100%; }
.terra-ex { overflow-x: clip; }

.tour-fab[hidden] { display: none; }


.gal-art-shape { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #1aa3e8, #3fb868); }
.gal-art-shape img { width: 32px; height: 32px; mix-blend-mode: screen; }

/* Samples tab in the converter */
.sample-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.sample-cats small { opacity: .7; }
.sample-group[hidden] { display: none; }
.sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.sample-grid .make-sample { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 6px 4px; line-height: 1.2; font: inherit; font-size: .74rem; color: inherit; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; }
.sample-grid .make-sample img { width: 72px; height: 72px; border-radius: 6px; }
.sample-grid .make-sample:hover, .sample-grid .make-sample:focus-visible { border-color: #1aa3e8; }
.sample-grid .make-sample span { text-align: center; }
.make-samples .make-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Terra Collections: stories to read, not a grid to browse */
.story-index { display: grid; gap: 18px; }
.story-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.story-card:hover, .story-card:focus-visible { transform: translateY(-2px); border-color: #1aa3e8; }
.story-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 14px; overflow: hidden; background: #0d1522; aspect-ratio: 1; }
.story-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.story-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.story-card-text small { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1a7fb8; }
.story-card-text strong { font-size: 1.6rem; line-height: 1.15; }
.story-card-text em { font-style: normal; color: #17753a; font-weight: 600; }
.story-names { color: var(--muted); font-size: .9rem; }
.story-go { margin-top: 6px; font-weight: 700; color: #1a7fb8; }
.story-lead { max-width: 52rem; margin: 6px 0 14px; }
.story-intro { margin: 0 0 6px; font-size: 1.2rem; line-height: 1.55; }
.story-facts { margin: 0; color: var(--muted); }
.story-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.story-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; font-size: .9rem; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.story-jump a span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.story-stops { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.story-stop { position: relative; display: grid; grid-template-columns: 56px 240px minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px 22px 18px 14px; background: #fff; border: 1px solid var(--line); border-radius: 20px; scroll-margin-top: calc(var(--header-h) + 14px); }
.story-num { font-size: 2.6rem; font-weight: 800; line-height: 1; text-align: center; background: linear-gradient(135deg, #3fb868, #1aa3e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story-thumb { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #0d1522; }
.story-thumb img { width: 100%; height: 100%; object-fit: cover; }
.story-text h2 { margin: 0 0 6px; font-size: 1.5rem; }
.story-text p { margin: 0 0 8px; }
.story-meta { color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) {
	.story-card { grid-template-columns: minmax(0, 1fr); }
	.story-mosaic { aspect-ratio: 2 / 1; grid-template-columns: repeat(4, 1fr); }
	.story-stop { grid-template-columns: 40px minmax(0, 1fr); }
	.story-thumb { grid-column: 2; max-width: 260px; }
	.story-text { grid-column: 1 / -1; }
	.story-num { font-size: 2rem; }
}

/* Terra Explorer: capture a spot, icons, bubbles, search results */
.ex-ico { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; font-style: normal; font-size: .85rem; line-height: 1; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.ex-ico-world { background: #1aa3e8; }
.ex .ex-cat[aria-pressed="true"] .ex-ico { box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
.ex-search { position: relative; flex: 1 1 280px; min-width: 0; }
.ex-search input[type="search"] { width: 100%; }
.ex-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 36px rgba(0, 0, 0, .25); }
.ex-results[hidden] { display: none; }
.ex-results button { display: flex; align-items: center; gap: 4px; width: 100%; padding: 8px 10px; font: inherit; text-align: left; color: var(--text); background: none; border: 0; border-radius: 10px; cursor: pointer; }
.ex-results button:hover, .ex-results button:focus-visible { background: #eef6fc; }
.ex-results strong { display: block; }
.ex-results small { display: block; color: var(--muted); }
.ex-tip { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 999px; font-size: .82rem; color: #fff; background: rgba(0, 0, 0, .55); pointer-events: none; }
.ex-bubble { position: absolute; z-index: 5; left: 0; top: 0; bottom: auto; width: min(380px, calc(100% - 24px)); transform: translate(-50%, calc(-100% - 18px)); }
.ex-bubble.below { transform: translate(-50%, 18px); }
.ex-bubble::after { content: ""; position: absolute; left: calc(50% + var(--ax, 0px)); bottom: -9px; width: 16px; height: 16px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.ex-bubble.below::after { bottom: auto; top: -8px; }
.ex-bubble.dock { position: absolute; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; transform: none; }
.ex-bubble.dock::after { display: none; }
.ex-spot { display: block; padding: 14px 16px; color: var(--text); background: #fff; border-radius: 14px; box-shadow: 0 10px 32px rgba(0, 0, 0, .4); }
.ex-spot[hidden] { display: none; }
.ex-spot-km { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.ex-spot-km label { cursor: pointer; }
.ex-spot-km input { position: absolute; opacity: 0; }
.ex-spot-km span { display: inline-block; padding: 4px 11px; font-size: .85rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; }
.ex-spot-km input:checked + span { color: #fff; border-color: transparent; background: linear-gradient(135deg, #3fb868, #1aa3e8); }
.ex-spot-km input:focus-visible + span { outline: 3px solid rgba(26, 163, 232, .5); }
.ex-pin { width: min(420px, calc(100% - 24px)); }
@media (max-width: 700px) { .ex-tip { bottom: auto; top: 44px; } }

/* "Not sure where to start?" row on the home page */
.start-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.start-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.start-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 8px 4px 9px; font: inherit; color: inherit; text-decoration: none; text-align: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; cursor: pointer; }
.start-tile[hidden] { display: none; }
.start-tile:hover, .start-tile:focus-visible { border-color: #1aa3e8; background: rgba(26, 163, 232, .12); }
.start-tile small { font-size: .72rem; line-height: 1.15; opacity: .9; }
.start-art { display: grid; place-items: center; width: 56px; height: 56px; }
.start-art img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.start-art .gal-art-shape { width: 56px; height: 56px; }
.start-art .gico { margin: 0; }
.make-samples .make-note a { font-size: .85rem; }

.obj-art { display: block; width: 64px; height: 64px; object-fit: contain; }
.start-art .obj-art { width: 56px; height: 56px; }
.gal-art .obj-art { width: 84px; height: 84px; margin: 0 auto; }
.shape-art .obj-art { width: 48px; height: 48px; }

/* Outline pictures keep their own proportions (a tall bookmark or a wide card is never squeezed into a square) */
.gal-art-shape img, .shape-thumb { object-fit: contain; }
.start-art .gal-art-shape img { width: 34px; height: 34px; object-fit: contain; border-radius: 0; }

.fmt-sd { display: block; margin-top: 6px; font-size: .86rem; color: #8a5a00; }
.fmt-sd[hidden] { display: none; }
.fmt-note { margin: 4px 0 10px; padding: 8px 12px; font-size: .88rem; color: #6b4a00; background: #fff6df; border: 1px solid #f0d9a0; border-radius: 10px; }
.fmt-note[hidden] { display: none; }
/* Art tab: a menu of categories instead of a row of bubbles */
/* SD / HD / ULTRA badges */
.tier { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; line-height: 1.55; vertical-align: middle; color: #fff; white-space: nowrap; }
.tier-sd { background: #6b7a90; }
.tier-hd { background: linear-gradient(90deg, #3fb868, #1aa3e8); }
.tier-ultra { background: linear-gradient(90deg, #8b5cf6, #ec4899); }

/* Checkout: Smooth / Pixel Grid tabs, and an Ultra copy indented under the file it belongs to */
.style-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.style-tab { padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer; }
.style-tab.on { color: var(--text); border-bottom-color: #1aa3e8; }
.style-tab:not(.on):last-child { font-weight: 500; opacity: .8; }
.style-panel[hidden] { display: none; }
.fmt-group { display: flex; flex-direction: column; gap: 6px; }
.ultra-sub { margin: 6px 0 0 26px; }
.fmt-group .ultra-sub { margin-top: 0; }
.ultra-sub .fmt-card { border-style: dashed; padding-top: 8px; padding-bottom: 8px; }
.ultra-sub .fmt-card::before { top: 11px; }
.ultra-sub::before { content: ""; position: absolute; left: -16px; top: -8px; width: 12px; height: 26px; border-left: 2px solid #b5bfd0; border-bottom: 2px solid #b5bfd0; border-bottom-left-radius: 8px; }
.ultra-why { display: block; margin-top: 3px; color: #8a5a00; font-weight: 600; }
.ultra-why[hidden] { display: none; }
.ultra-sub[hidden], .ultra-text[hidden] { display: none; }
.ultra-sub input:checked + .fmt-card { border-color: #8b5cf6; background: #f6f1ff; box-shadow: 0 0 0 1px #8b5cf6; }
.ultra-sub input:checked + .fmt-card::before { border-color: #8b5cf6; background-color: #8b5cf6; }
.dl-head { margin: 18px 0 8px; font-size: 1.05rem; }
.btn-ultra { color: #fff; background: linear-gradient(90deg, #8b5cf6, #ec4899); border-color: transparent; }
.btn-ultra:hover, .btn-ultra:focus-visible { filter: brightness(1.08); color: #fff; }
.co-step .fmt-pick > .fmt-opt { align-self: start; }
/* Home: the three "see more" buttons, the chips above the starter tiles, and a horizontal Art menu */
.start-actions .btn-soft { margin-top: 0; }
.hero-text > .chips { margin: 16px 0 0; }
/* Checkout: an Ultra tick that is not available is one quiet line with a yellow reason */
.ultra-sub.off { opacity: 1; }
.ultra-sub.off .fmt-top { opacity: .55; }
.ultra-sub .ultra-desc[hidden] { display: none; }
.ultra-sub.off .ultra-why { margin-top: 0; }
.ultra-sub.off .fmt-card { padding-top: 6px; padding-bottom: 6px; }
.ultra-sub.off .fmt-card::before { top: 9px; }
.fmt-all-note { margin: -4px 0 10px 25px; font-size: .82rem; color: var(--muted); }
.pro-ultra { margin: 0 0 10px; font-size: .88rem; line-height: 1.4; }
.pro-ultra .tier { margin-right: 2px; }
.start-actions .btn { padding: 8px 12px; font-size: .85rem; white-space: nowrap; }
.fmt-top em { white-space: nowrap; }
/* Art tab: the category menu is a second tab bar that looks exactly like the one above it */
.sub-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); margin: 4px 0 14px; }
.sub-tabs .tab { flex: 1 1 auto; overflow: visible; text-overflow: clip; }
.sub-tabs .tab small { margin-left: 5px; font-size: .78em; font-weight: 400; opacity: .75; }
.ex-spot-hint { display: block; margin: 2px 0 4px; font-size: .78rem; color: var(--muted); }
.ex-near-msg { margin: 0 0 10px; padding: 8px 12px; font-size: .88rem; color: #6b4a00; background: #fff6df; border: 1px solid #f0d9a0; border-radius: 10px; }
.ex-near-msg[hidden] { display: none; }
.spin { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: exspin .7s linear infinite; }
@keyframes exspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }
/* Phones and small tablets: the converter comes straight after the headline, then the starter tiles and the format lists */
@media (max-width: 900px) {
  .hero .wrap > .hero-text { display: contents; }
  .hero .wrap { row-gap: 0; }
  .hero-text > * { order: 1; }
  .hero-text > .eyebrow { justify-self: start; }
  .hero .wrap > .studio-wrap { order: 2; margin: 22px 0 10px; }
  .hero-text > .start-mix, .hero-text > .formats { order: 3; }
  .hero-text > .start-mix { margin-top: 20px; }
}
@media (max-width: 480px) { .field-row .lbl { min-height: 2.6em; align-items: flex-end; } }
/* Very wide screens: collection stops sit in two columns instead of long, mostly empty bars */
@media (min-width: 1900px) { .story-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Touch screens and phones: comfortable tap targets, and a footer whose links are readable and easy to hit */
@media (pointer: coarse), (max-width: 700px) {
  .chip-btn { min-height: 34px; }
  .tabs .tab { min-height: 38px; }
  input[type="range"] { min-height: 30px; }
  .fmt-all { min-height: 40px; }
  .fmt-all input { width: 20px; height: 20px; }
  .promo-box summary, .redeem-box summary { padding: 9px 0; }
}
@media (max-width: 720px) {
  .site-footer .foot-links ul { flex-wrap: wrap; justify-content: center; gap: 0 2px; }
  .site-footer .foot-links a { display: inline-block; padding: 9px 10px; font-size: .92rem; line-height: 1.2; }
}
@media (pointer: coarse), (max-width: 700px) {
  .site-footer .copyright a { display: inline-block; padding: 7px 4px; }
  .tour-fab-x { min-width: 34px; min-height: 34px; }
}

/* The map never traps the page: a short hint says how to zoom or move it when someone scrolls or swipes over it */
.tm-hint { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; text-align: center; font-weight: 600; color: #fff; background: rgba(8, 14, 26, .62); opacity: 0; pointer-events: none; transition: opacity .2s; }
.tm-hint.show { opacity: 1; }

/* The pin bubble can sit beside its pin when there is no room above or below it. */
.ex-bubble.beside { transform: translate(-50%, -50%); }
.ex-bubble.beside::after { display: none; }

/* The spot panel never floats over the spot: a fixed panel on the right of the map (the map aims the spot at the free part), or under the map on a phone.
   It is always shown whole; if the map is very short, the panel scrolls inside itself. */
.ex-bubble.ex-spot { left: auto; right: 12px; top: 12px; bottom: auto; width: min(384px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; transform: none; }
.ex-bubble.ex-spot::after { display: none; }
.ex-bubble.ex-spot.dock { position: relative; right: auto; top: auto; left: auto; bottom: auto; width: auto; max-height: none; margin: 8px; overflow: visible; }
.ex-spot-km { margin: 8px 0 4px; }
.ex-spot .ex-pin-btns .btn { padding-inline: 12px; flex: 1 1 auto; justify-content: center; text-align: center; }
.tm-stage.spot-docked .ex-tip { display: none; }
.tm-stage.spot-docked .tm-msg { bottom: auto; top: 40px; }
#ex-spot-go.ready::before { content: "\2713\00a0"; }
#ex-spot-go.busy { opacity: .85; pointer-events: none; }

/* Dialogs never clip their bottom: the middle scrolls and the button bar stays in view. On a phone the 3D preview's three buttons share two rows. */
dialog[open] .dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
dialog[open] .dlg-head, dialog[open] .dlg-foot { flex: none; }
@media (max-width: 640px) {
  #view-dialog .dlg-head { padding: 14px 16px 0; }
  #view-dialog .dlg-body { padding: 10px 16px 12px; }
  #view-dialog .dlg-foot { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  #view-dialog .dlg-foot #view-download { grid-column: 1 / -1; }
  #view-dialog .dlg-foot .btn { margin: 0; padding-left: 12px; padding-right: 12px; }
  #view-dialog .viewer-stage canvas { height: min(44vh, 340px); }
}
/* "Make something real": whole rows at every width (12 objects fit 6, 4, 3 or 2 across); any leftover row is centered */
.home-objects .gal-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.home-objects .gal-item { flex: 0 0 calc((100% - 60px) / 6); min-width: 0; }
@media (max-width: 899px) { .home-objects .gal-item { flex-basis: calc((100% - 36px) / 4); } }
@media (max-width: 599px) { .home-objects .gal-item { flex-basis: calc((100% - 24px) / 3); } }
@media (max-width: 389px) { .home-objects .gal-item { flex-basis: calc((100% - 12px) / 2); } }