/* Designs on the website (MMX 09.10.2026): ours stays the default; a visitor from an iPhone, iPad or Mac
   may switch to the Apple look (iOS 27 / macOS 27 «Golden Gate», Liquid Glass), one from Android or
   HarmonyOS to Material 3 Expressive. html[data-design] is set by design.js (and early in <head>). */

@font-face { font-family: "Roboto Flex"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(/fonts/roboto-flex-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Flex"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(/fonts/roboto-flex-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ── Apple: Liquid Glass over a warm Golden Gate sunset ─────────────────────────────── */
:root[data-design="apple"] {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
  --font-brand: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-read: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
  --accent: #a9532f;
  --accent-ink: #9a4a2e;
  --glass: rgb(255 255 255 / .55);
  --glass-edge: rgb(255 255 255 / .85);
  --sky: radial-gradient(1100px 700px at 10% -10%, #f4b28a 0%, transparent 60%), radial-gradient(900px 640px at 100% 8%, rgb(226 122 87 / .55) 0%, transparent 60%), linear-gradient(180deg, #f9e4cf 0%, #ede6f2 55%, #f6f2ec 100%);
}
:root[data-design="apple"][data-theme="dark"] {
  --accent: #b85a36;
  --accent-ink: #f09a76;
  --glass: rgb(30 30 40 / .5);
  --glass-edge: rgb(255 255 255 / .14);
  --sky: radial-gradient(1000px 650px at 12% -10%, #5a2a2a 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #1e2238 0%, transparent 60%), linear-gradient(180deg, #0e1422 0%, #161a28 60%, #1c1a18 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-design="apple"]:not([data-theme="light"]) {
    --accent: #b85a36;
    --accent-ink: #f09a76;
    --glass: rgb(30 30 40 / .5);
    --glass-edge: rgb(255 255 255 / .14);
    --sky: radial-gradient(1000px 650px at 12% -10%, #5a2a2a 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #1e2238 0%, transparent 60%), linear-gradient(180deg, #0e1422 0%, #161a28 60%, #1c1a18 100%);
  }
}
:root[data-design="apple"] body { background: var(--sky); background-attachment: fixed; letter-spacing: -.005em; }
:root[data-design="apple"] .alive-bg { opacity: .5; }
:root[data-design="apple"] header { background: transparent; border: 0; padding-top: 10px; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-design="apple"] header .wrap {
  width: calc(100% - 24px); height: 58px; border-radius: 999px; padding-inline: 18px 8px;
  background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 14px 40px -18px rgb(60 30 20 / .35);
}
:root[data-design="apple"] .btn { border-radius: 999px; padding: 14px 22px; font-weight: 600; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), filter .2s; }
:root[data-design="apple"] .btn:active { transform: scale(.95); }
:root[data-design="apple"] .btn-sm { padding: 10px 16px; }
:root[data-design="apple"] .btn-ghost { background: var(--glass); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
:root[data-design="apple"] :is(.chat, .plat, .access, .model-co, .case) {
  border-radius: 30px; background: var(--glass); border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px -30px rgb(60 30 20 / .35);
}
:root[data-design="apple"] h1 { font-weight: 700; letter-spacing: -.025em; }
:root[data-design="apple"] h1 em { font-style: normal; }
:root[data-design="apple"] h2 { font-weight: 700; letter-spacing: -.02em; }
/* the two answers become the big glass panels of the first screen */
:root[data-design="apple"] .wins { gap: 14px; }
:root[data-design="apple"] .wins li {
  padding: 22px 24px; border-radius: 30px; background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 20px 50px -30px rgb(60 30 20 / .35);
}
:root[data-design="apple"] .wins li::before { font: 800 56px/.9 var(--font-brand); letter-spacing: -.04em; color: var(--accent); }
:root[data-design="apple"] .wins b { font: 800 clamp(22px, 2.6vw, 30px)/1.1 var(--font-brand); letter-spacing: -.02em; }
:root[data-design="apple"] .live { border-radius: 30px; }
:root[data-design="apple"] .langs { background: var(--glass); }
:root[data-design="apple"] .music { background: var(--glass); }
:root[data-design="apple"] section.block { border-top-color: transparent; }

/* ── Material 3 Expressive: tonal colour from our terracotta, Roboto Flex, shapes that morph ── */
:root[data-design="material"] {
  --font-ui: "Roboto Flex", Roboto, system-ui, sans-serif;
  --font-brand: "Roboto Flex", Roboto, system-ui, sans-serif;
  --font-read: "Roboto Flex", Roboto, system-ui, sans-serif;
  --bg: #fff8f6; --surface: #fceeea; --surface-2: #f5e5df; --fg: #231917; --muted: #53433f; --line: #ecdfda;
  --accent: #8f4c33; --accent-ink: #8f4c33; --bubble: #ffdbcf; --mark: #8f4c33;
  --pc: #ffdbcf; --on-pc: #72341e; --tc: #f6e388; --on-tc: #4f4500; --on-accent: #fff;
}
:root[data-design="material"][data-theme="dark"] {
  --bg: #1a110f; --surface: #271d1b; --surface-2: #322825; --fg: #f1dfda; --muted: #d8c2bc; --line: #3d3230;
  --accent: #ffb59b; --accent-ink: #ffb59b; --bubble: #72351e; --mark: #ffb59b;
  --pc: #72351e; --on-pc: #ffdbcf; --tc: #524600; --on-tc: #f6e388; --on-accent: #55200a;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="material"]:not([data-theme="light"]) {
    --bg: #1a110f; --surface: #271d1b; --surface-2: #322825; --fg: #f1dfda; --muted: #d8c2bc; --line: #3d3230;
    --accent: #ffb59b; --accent-ink: #ffb59b; --bubble: #72351e; --mark: #ffb59b;
    --pc: #72351e; --on-pc: #ffdbcf; --tc: #524600; --on-tc: #f6e388; --on-accent: #55200a;
  }
}
:root[data-design="material"] .alive-bg { opacity: .35; }
:root[data-design="material"] header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-design="material"] .btn { border-radius: 999px; padding: 14px 24px; font-weight: 650; letter-spacing: .01em; transition: border-radius .35s cubic-bezier(.2, 1.4, .4, 1), transform .35s cubic-bezier(.2, 1.4, .4, 1); }
:root[data-design="material"] .btn:active { border-radius: 12px; transform: scale(.97); }
:root[data-design="material"] .btn-primary { color: var(--on-accent); }
:root[data-design="material"] .btn-ghost { background: var(--pc); color: var(--on-pc); border-color: transparent; }
:root[data-design="material"] :is(.chat, .plat, .access, .model-co, .case) {
  background: var(--surface); border-color: transparent; border-radius: 28px; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-design="material"] .composer { background: var(--surface-2); border-color: transparent; border-radius: 28px; }
:root[data-design="material"] h1 { font-weight: 750; letter-spacing: -.015em; font-variation-settings: "opsz" 96; }
:root[data-design="material"] h1 em { font-style: normal; }
:root[data-design="material"] h2 { font-weight: 750; font-variation-settings: "opsz" 72; }
:root[data-design="material"] .wins { gap: 2px; }
:root[data-design="material"] .wins li { background: var(--surface); padding: 20px; border-radius: 8px; }
:root[data-design="material"] .wins li:first-child { border-radius: 28px 28px 8px 8px; }
:root[data-design="material"] .wins li:last-child { border-radius: 8px 8px 28px 28px; }
:root[data-design="material"] .wins li::before {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: var(--tc); color: var(--on-tc); font: 800 26px/1 var(--font-ui);
}
:root[data-design="material"] .wins b { font: 750 22px/1.2 var(--font-ui); }
:root[data-design="material"] .langs { gap: 2px; background: transparent; padding: 0; }
:root[data-design="material"] .langs a { background: var(--surface-2); border-radius: 8px; }
:root[data-design="material"] .langs a:first-child { border-radius: 999px 8px 8px 999px; }
:root[data-design="material"] .langs a:last-child { border-radius: 8px 999px 999px 8px; }
:root[data-design="material"] .langs a[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-radius: 999px; box-shadow: none; }
:root[data-design="material"] .live { border-radius: 28px; }
:root[data-design="material"] .plat-ico { border-radius: 14px; background: var(--pc); color: var(--on-pc); }

/* ── The switch in the footer and the first-visit offer ─────────────────────────────── */
.design-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.design-switch .opts { display: flex; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.design-switch button { border: 0; background: transparent; color: var(--muted); font: 500 13px/1 var(--font-ui); padding: 8px 12px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.design-switch button[aria-checked="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.design-switch.spot .opts { animation: design-spot 1.4s ease-in-out 3; }
@keyframes design-spot { 50% { box-shadow: 0 0 0 6px rgb(244 184 96 / .45), 0 0 28px rgb(244 184 96 / .9); } }

.design-offer {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; transform: translateX(-50%);
  width: min(460px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: 28px; border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: 0 24px 60px -24px rgb(40 20 10 / .45);
}
.design-offer h2 { font: 600 17px/1.3 var(--font-ui); margin: 0; animation: none; }
.design-offer p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.design-offer .row { display: flex; gap: 8px; }
.design-offer .btn { flex: 1; }
.design-offer.toast { flex-direction: row; align-items: center; justify-content: space-between; }
.design-offer.toast span { font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .design-offer { animation: design-in .6s cubic-bezier(.2, 1.3, .4, 1) both; }
  @keyframes design-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translateX(-50%); } }
}