/* CueClass site — the "六種主題" section takes on the look of the theme in the centre of the
   carousel (carousel.js sets .themes[data-theme]). This section is the one exception to the flat site
   style: each theme may use its own glass, gradients and textures, because that is how the product
   really looks. Colours, radii and fonts come from src/renderer/src/themes/<id>/theme.css in the app.
   Text contrast (each on its own background, >= 4.5:1):
     soft-glass  #1E1C1A / #665F58 on #EFE7DD (13.9 / 5.1)    paper-parade #1A1A1A / #4F4A43 on #FBF7EE
     pop-collage #111 / #45454B on #F4F4F2 (8.6)               playful-desk #171717 / #4F473D on #E9DCC7 (6.8)
     pixel-sky   #1B2233 / #3C475C on #8FD3F0 (9.6 / 5.7)      halftone-comic #111 / #3D3D3D on #FFD21F (7.5) */

/* theme fonts: bundled OFL subsets, fetched only when a theme that uses them is shown */
@font-face {
  font-family: "Outfit";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin-wght.woff2") format("woff2");
}

@font-face {
  font-family: "Bebas Neue";
  font-display: swap;
  src: url("../fonts/bebas-neue-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Silkscreen";
  font-display: swap;
  src: url("../fonts/silkscreen-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Black";
  font-display: swap;
  src: url("../fonts/archivo-black-latin-400.woff2") format("woff2");
}

.themes {
  /* Pop Collage pieces, used only inside this section */
  --tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 0V56M0 56H56' fill='none' stroke='%23E6E5E0' stroke-width='2'/%3E%3C/svg%3E");
  --checker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23FFE033'/%3E%3Crect width='6' height='6' fill='%23111'/%3E%3Crect x='6' y='6' width='6' height='6' fill='%23111'/%3E%3C/svg%3E");
  --burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 114' preserveAspectRatio='none'%3E%3Cg stroke-linejoin='round'%3E%3Cpolygon transform='translate(5 5)' fill='%23111' stroke='%23111' stroke-width='3' points='98,10 116,17 131,17 140,24 165,23 160,34 176,39 171,48 189,55 171,63 174,71 161,75 164,87 140,87 129,93 114,92 98,101 84,92 70,94 60,86 38,88 40,75 26,71 28,62 9,55 28,48 26,40 37,34 38,23 58,25 70,16 87,18'/%3E%3Cpolygon fill='%23FFE033' stroke='%23111' stroke-width='3' points='98,10 116,17 131,17 140,24 165,23 160,34 176,39 171,48 189,55 171,63 174,71 161,75 164,87 140,87 129,93 114,92 98,101 84,92 70,94 60,86 38,88 40,75 26,71 28,62 9,55 28,48 26,40 37,34 38,23 58,25 70,16 87,18'/%3E%3C/g%3E%3C/svg%3E");
  --burst-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 406 106' preserveAspectRatio='none'%3E%3Cg stroke-linejoin='round'%3E%3Cpolygon transform='translate%285 5%29' fill='%23111' stroke='%23111' stroke-width='3' points='18,20 27,6 36,20 45,5 54,20 63,7 72,20 81,4 90,20 99,7 108,20 117,6 126,20 135,4 144,20 153,7 162,20 171,4 180,20 189,6 198,20 207,4 216,20 225,4 234,20 243,6 252,20 261,8 270,20 279,5 288,20 297,5 306,20 315,7 324,20 333,9 342,20 351,7 360,20 369,6 378,20 382,9 382,20 396,30 382,40 393,50 382,60 395,70 382,80 373,95 364,80 355,95 346,80 337,94 328,80 319,92 310,80 301,95 292,80 283,93 274,80 265,93 256,80 247,94 238,80 229,93 220,80 211,96 202,80 193,96 184,80 175,95 166,80 157,93 148,80 139,94 130,80 121,94 112,80 103,93 94,80 85,94 76,80 67,95 58,80 49,92 40,80 31,93 22,80 18,95 18,80 6,70 18,60 6,50 18,40 8,30'/%3E%3Cpolygon fill='%23FFE033' stroke='%23111' stroke-width='3' points='18,20 27,6 36,20 45,5 54,20 63,7 72,20 81,4 90,20 99,7 108,20 117,6 126,20 135,4 144,20 153,7 162,20 171,4 180,20 189,6 198,20 207,4 216,20 225,4 234,20 243,6 252,20 261,8 270,20 279,5 288,20 297,5 306,20 315,7 324,20 333,9 342,20 351,7 360,20 369,6 378,20 382,9 382,20 396,30 382,40 393,50 382,60 395,70 382,80 373,95 364,80 355,95 346,80 337,94 328,80 319,92 310,80 301,95 292,80 283,93 274,80 265,93 256,80 247,94 238,80 229,93 220,80 211,96 202,80 193,96 184,80 175,95 166,80 157,93 148,80 139,94 130,80 121,94 112,80 103,93 94,80 85,94 76,80 67,95 58,80 49,92 40,80 31,93 22,80 18,95 18,80 6,70 18,60 6,50 18,40 8,30'/%3E%3C/g%3E%3C/svg%3E");
  --t-ink: #111111;
  --t-muted: #45454b;
  --t-title: #111111;
  --t-title-shadow: none;
  --t-display: var(--sans);
  --t-display-weight: 800;
  --t-label-font: "Archivo Black", var(--sans);
  --t-label-bg: #ffe033;
  --t-label-fg: #111111;
  --t-label-border: 2px solid #111111;
  --t-label-radius: 2px;
  --t-label-shadow: 3px 3px 0 #111111;
  --t-label-rot: -3deg;
  --t-frame-bg: #111111;
  --t-frame-border: 2px solid #111111;
  --t-frame-radius: 0px;
  --t-frame-pad: 0px;
  --t-frame-shadow: 4px 4px 0 #111111;
  --t-frame-shadow-on: 12px 12px 0 #ffe033, 12px 12px 0 2px #111111;
  --t-chip-bg: #ffe033;
  --t-chip-fg: #111111;
  --t-chip-border: 2px solid #111111;
  --t-chip-radius: 2px;
  --t-btn-bg: #ffffff;
  --t-btn-fg: #111111;
  --t-btn-border: 2px solid #111111;
  --t-btn-radius: 2px;
  --t-btn-shadow: 3px 3px 0 #111111;
  --t-btn-hover: #ffe033;
  --t-dot: #ffffff;
  --t-dot-border: 2px solid #111111;
  --t-dot-radius: 0;
  --t-dot-on: #111111;
  --t-focus: #111111;
  --t-focus-halo: #ffe033;
  --t-tape: block;
  --t-label-pad: 4px 14px;
  color: var(--t-ink);
}

/* ---------------------------------------------------------------- theme palettes (from the app) */

.themes[data-theme="soft-glass"] {
  --t-ink: #1e1c1a;
  --t-muted: #665f58;
  --t-title: #1e1c1a;
  --t-display: var(--sans);
  --t-display-weight: 300;
  --t-label-font: "Outfit", var(--sans);
  --t-label-bg: rgba(251, 248, 243, 0.8);
  --t-label-fg: #1e1c1a;
  --t-label-border: 1px solid rgba(30, 28, 26, 0.1);
  --t-label-radius: 999px;
  --t-label-shadow: 0 8px 20px -12px rgba(60, 40, 20, 0.35);
  --t-label-rot: 0deg;
  --t-frame-bg: rgba(250, 246, 240, 0.62);
  --t-frame-border: 1px solid rgba(255, 255, 255, 0.85);
  --t-frame-radius: 30px;
  --t-frame-pad: 10px;
  --t-frame-shadow: 0 14px 34px -16px rgba(60, 40, 20, 0.28);
  --t-frame-shadow-on: 0 34px 80px -26px rgba(40, 26, 12, 0.42), 0 8px 20px rgba(40, 26, 12, 0.08);
  --t-chip-bg: #1e1c1a;
  --t-chip-fg: #ffffff;
  --t-chip-border: 1px solid #1e1c1a;
  --t-chip-radius: 999px;
  --t-btn-bg: #1e1c1a;
  --t-btn-fg: #ffffff;
  --t-btn-border: 1px solid #1e1c1a;
  --t-btn-radius: 999px;
  --t-btn-shadow: 0 10px 22px -12px rgba(40, 26, 12, 0.6);
  --t-btn-hover: #36312d;
  --t-dot: rgba(30, 28, 26, 0.18);
  --t-dot-border: 0 solid transparent;
  --t-dot-radius: 999px;
  --t-dot-on: #ff7a1a;
  --t-focus: #c4570c;
  --t-focus-halo: rgba(255, 122, 26, 0.26);
  --t-tape: none;
}

.themes[data-theme="paper-parade"] {
  --t-ink: #1a1a1a;
  --t-muted: #4f4a43;
  --t-title: #1a1a1a;
  --t-display: var(--sans);
  --t-display-weight: 700;
  --t-label-font: "Bebas Neue", var(--sans);
  --t-label-bg: transparent;
  --t-label-fg: #1a1a1a;
  --t-label-border: 0 solid transparent;
  --t-label-radius: 0;
  --t-label-shadow: none;
  --t-label-rot: 0deg;
  --t-frame-bg: #fffdf7;
  --t-frame-border: 2px solid #1a1a1a;
  --t-frame-radius: 22px;
  --t-frame-pad: 10px;
  --t-frame-shadow: 0 2px 0 rgba(26, 26, 26, 0.07), 0 16px 28px -20px rgba(92, 70, 30, 0.5);
  --t-frame-shadow-on: 0 3px 0 rgba(26, 26, 26, 0.08), 0 34px 60px -26px rgba(70, 50, 18, 0.55);
  --t-chip-bg: #f7c530;
  --t-chip-fg: #1a1a1a;
  --t-chip-border: 2px solid #1a1a1a;
  --t-chip-radius: 9px;
  --t-btn-bg: #f7c530;
  --t-btn-fg: #1a1a1a;
  --t-btn-border: 2px solid #1a1a1a;
  --t-btn-radius: 16px;
  --t-btn-shadow: 0 2px 0 #1a1a1a;
  --t-btn-hover: #efb714;
  --t-dot: #fffdf7;
  --t-dot-border: 2px solid #1a1a1a;
  --t-dot-radius: 999px;
  --t-dot-on: #1b6fae;
  --t-focus: #1b6fae;
  --t-focus-halo: rgba(47, 155, 224, 0.3);
  --t-tape: none;
}

.themes[data-theme="pop-collage"] {
  --t-title: #d42a17;
  --t-title-shadow: 3px 3px 0 #111111;
  --t-display: var(--sans);
  --t-display-weight: 800;
  --t-label-bg: var(--burst-wide) center / 100% 100% no-repeat;
  --t-label-pad: 12px 26px 15px 24px;
  --t-label-border: 0 solid transparent;
  --t-label-shadow: none;
  --t-btn-hover: #ffe033;
  --t-focus: #2f5bff;
  --t-focus-halo: rgba(47, 91, 255, 0.3);
}

.themes[data-theme="playful-desk"] {
  --t-ink: #171717;
  --t-muted: #4f473d;
  --t-title: #171717;
  --t-display: var(--sans);
  --t-display-weight: 700;
  --t-label-font: var(--sans);
  --t-label-bg: #0864a3;
  --t-label-fg: #ffffff;
  --t-label-border: 0 solid transparent;
  --t-label-radius: 8px;
  --t-label-shadow: 0 2px 0 #06548a;
  --t-label-rot: -2deg;
  --t-frame-bg: #fbf6ea;
  --t-frame-border: 1px solid #dccbad;
  --t-frame-radius: 20px;
  --t-frame-pad: 12px;
  --t-frame-shadow: 0 2px 0 rgba(160, 128, 84, 0.34), 0 10px 22px -8px rgba(90, 64, 30, 0.28);
  --t-frame-shadow-on: 0 3px 0 rgba(160, 128, 84, 0.4), 0 28px 60px -16px rgba(60, 40, 15, 0.42);
  --t-chip-bg: #e3f3fd;
  --t-chip-fg: #0864a3;
  --t-chip-border: 1px solid #7ccbfa;
  --t-chip-radius: 8px;
  --t-btn-bg: #fffdf7;
  --t-btn-fg: #171717;
  --t-btn-border: 1px solid #c9b590;
  --t-btn-radius: 14px;
  --t-btn-shadow: 0 2px 0 #c9b590;
  --t-btn-hover: #fff3c9;
  --t-dot: #fffdf7;
  --t-dot-border: 1px solid #c9b590;
  --t-dot-radius: 999px;
  --t-dot-on: #ff5a2c;
  --t-focus: #0864a3;
  --t-focus-halo: rgba(77, 181, 245, 0.35);
  --t-tape: none;
}

.themes[data-theme="pixel-sky"] {
  --t-ink: #1b2233;
  --t-muted: #3c475c;
  --t-title: #1b2233;
  --t-display: var(--sans);
  --t-display-weight: 900;
  --t-label-font: "Silkscreen", var(--sans);
  --t-label-bg: #1f5bf0;
  --t-label-fg: #ffffff;
  --t-label-border: 0 solid transparent;
  --t-label-radius: 2px;
  --t-label-shadow: 4px 4px 0 rgba(12, 28, 56, 0.22);
  --t-label-rot: 0deg;
  --t-frame-bg: #ffffff;
  --t-frame-border: 3px solid #1f5bf0;
  --t-frame-radius: 3px;
  --t-frame-pad: 6px;
  --t-frame-shadow: 4px 4px 0 rgba(31, 91, 240, 0.16);
  --t-frame-shadow-on: 8px 8px 0 rgba(12, 28, 56, 0.22);
  --t-chip-bg: #1f5bf0;
  --t-chip-fg: #ffffff;
  --t-chip-border: 0 solid transparent;
  --t-chip-radius: 2px;
  --t-btn-bg: #1f5bf0;
  --t-btn-fg: #ffffff;
  --t-btn-border: 0 solid transparent;
  --t-btn-radius: 2px;
  --t-btn-shadow: 4px 4px 0 rgba(12, 28, 56, 0.25);
  --t-btn-hover: #1747c4;
  --t-dot: #ffffff;
  --t-dot-border: 2px solid #1f5bf0;
  --t-dot-radius: 0;
  --t-dot-on: #1f5bf0;
  --t-focus: #1b2233;
  --t-focus-halo: #ffffff;
  --t-tape: none;
}

.themes[data-theme="halftone-comic"] {
  --t-ink: #111111;
  --t-muted: #3d3d3d;
  --t-title: #111111;
  --t-display-weight: 900;
  --t-label-font: var(--sans);
  --t-label-bg: #111111;
  --t-label-fg: #ffd21f;
  --t-label-border: 0 solid transparent;
  --t-label-radius: 999px;
  --t-label-shadow: none;
  --t-label-rot: 0deg;
  --t-frame-bg: #ffffff;
  --t-frame-border: 3px solid #111111;
  --t-frame-radius: 22px;
  --t-frame-pad: 10px;
  --t-frame-shadow: 4px 4px 0 #111111;
  --t-frame-shadow-on: 7px 7px 0 #111111;
  --t-chip-bg: #111111;
  --t-chip-fg: #ffd21f;
  --t-chip-border: 0 solid transparent;
  --t-chip-radius: 999px;
  --t-btn-bg: #111111;
  --t-btn-fg: #ffd21f;
  --t-btn-border: 2px solid #111111;
  --t-btn-radius: 999px;
  --t-btn-shadow: 3px 3px 0 #ffffff;
  --t-btn-hover: #2e2e2e;
  --t-dot: #ffffff;
  --t-dot-border: 2px solid #111111;
  --t-dot-radius: 999px;
  --t-dot-on: #111111;
  --t-focus: #111111;
  --t-focus-halo: #ffffff;
  --t-tape: none;
}

/* ---------------------------------------------------------------- elements wired to the palette */

.themes .showcase,
.themes .showcase-head,
.themes .tc-controls {
  position: relative;
  z-index: 1;
}

.themes .showcase-head h2 {
  font-family: var(--t-display);
  font-weight: var(--t-display-weight);
  color: var(--t-title);
  text-shadow: var(--t-title-shadow);
}

.themes .showcase-head p:not(.themes-label),
.themes .tc-caption .en {
  color: var(--t-muted);
}

.themes .tc-caption {
  color: var(--t-ink);
}

.themes .themes-label {
  display: flex;
  width: max-content;
  padding: var(--t-label-pad);
  margin-left: 0;
  font-family: var(--t-label-font);
  color: var(--t-label-fg);
  background: var(--t-label-bg);
  border: var(--t-label-border);
  border-radius: var(--t-label-radius);
  box-shadow: var(--t-label-shadow);
  transform: rotate(var(--t-label-rot));
}

.themes .tc-slide .screen-bezel {
  padding: var(--t-frame-pad);
  background: var(--t-frame-bg);
  border: var(--t-frame-border);
  border-radius: var(--t-frame-radius);
  box-shadow: var(--t-frame-shadow);
}

.themes .tc-slide.is-active .screen-bezel {
  box-shadow: var(--t-frame-shadow-on);
}

.themes .tc-slide .screen-glass {
  border-radius: max(0px, calc(var(--t-frame-radius) - var(--t-frame-pad)));
}

/* checkered tape on the active screen (Pop Collage only) */
.themes .tc-slide::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: -26px;
  top: 18px;
  width: 128px;
  height: 24px;
  display: var(--t-tape);
  background: var(--checker);
  border: 2px solid #111111;
  transform: rotate(-32deg);
  opacity: 0;
  transition: opacity 200ms ease;
}

.themes .tc-slide.is-active::before {
  opacity: 1;
}

.themes .tc-progress {
  background: var(--t-dot);
}

.themes .tc-progress i {
  background: var(--t-dot-on);
}

.themes .tc-caption .tc-no {
  color: var(--t-chip-fg);
  background: var(--t-chip-bg);
  border: var(--t-chip-border);
  border-radius: var(--t-chip-radius);
  padding: 0 8px;
}

.themes .tc-btn {
  color: var(--t-btn-fg);
  background: var(--t-btn-bg);
  border: var(--t-btn-border);
  border-radius: var(--t-btn-radius);
  box-shadow: var(--t-btn-shadow);
}

.themes .tc-btn:hover {
  background: var(--t-btn-hover);
}

.themes .tc-dot::before {
  background: var(--t-dot);
  border: var(--t-dot-border);
  border-radius: var(--t-dot-radius);
}

.themes .tc-dot[aria-current="true"]::before {
  background: var(--t-dot-on);
  border-color: var(--t-dot-on);
}

.themes :focus-visible {
  outline-color: var(--t-focus);
  box-shadow: 0 0 0 6px var(--t-focus-halo);
}

/* palette changes cross-fade (colours only; layout never moves) */
.themes .showcase-head h2,
.themes .showcase-head p:not(.themes-label),
.themes .themes-label,
.themes .tc-caption,
.themes .tc-caption .tc-no,
.themes .tc-btn,
.themes .tc-dot::before,
.themes .tc-slide .screen-bezel {
  transition: color 380ms ease, background-color 380ms ease, border-color 380ms ease, box-shadow 380ms ease,
    border-radius 380ms ease, text-shadow 380ms ease;
}