/* Styles of the home page that UnoCSS cannot generate from class names: the gallery (switched by radio inputs, no
   JavaScript), the highlighter on key words and the red ticks of the hero. Loaded after uno.css. */

/* ── Highlighter: dark text on a felt-pen stroke. Soft slanted ends, uneven corners, a second pass across the stroke and
   a fine grain (a small SVG as a data URI, so no request). Finished by default; it grows while it scrolls into view
   only where the browser can drive an animation by scrolling and the reader allows motion. ── */
.mark {
  --mark: #fde047;
  --pass: rgba(234, 179, 8, 0.32);
  background-color: transparent; /* the browser paints <mark> yellow itself */
  color: #0f172a;
  padding: 0 0.22em;
  margin: 0 -0.04em;
  border-radius: 0.35em 0.15em 0.4em 0.2em / 0.5em 0.2em 0.45em 0.25em;
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 0 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(177deg, transparent 34%, var(--pass) 36% 44%, transparent 46%),
    linear-gradient(101deg, transparent 0, var(--mark) 1.6%, var(--mark) 97.5%, transparent 100%);
  background-size: 160px 82%, 100% 100%, 100% 82%;
  background-position: 0 88%, 0 0, 0 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mark {
      background-size: 0 82%, 0% 100%, 0% 82%;
      animation: mark-in linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 30%;
    }
  }
}
@keyframes mark-in {
  to {
    background-size: 160px 82%, 100% 100%, 100% 82%;
  }
}
@media (prefers-color-scheme: dark) {
  .mark { --mark: #facc15; }
}

/* ── Red ticks like a teacher's pen, before the features in the hero ── */
.tick {
  flex: none;
  fill: none;
  stroke: #f87171;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Gallery: one app large (stage), the others beside it ── */
.gal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 960px) {
  .gal {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 40px;
    align-items: start;
  }
  .gal-stage { grid-column: 1; grid-row: 1; }
  .gal-side { grid-column: 2; grid-row: 1; }
}
.gal > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.gal-stage,
.gal-side {
  min-width: 0;
}
.gal-panel { display: none; }
/* Squared like a school exercise book. */
.gal-link {
  display: block;
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
}
.gal-link:hover .gal-frame {
  box-shadow: 0 0 0 3px #bfdbfe;
}
.gal-frame {
  position: relative;
  border-radius: 20px;
  padding: 28px 28px 0;
  overflow: hidden;
  background-color: #f1f5f9;
  background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
}
.gal-win {
  width: 86%;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}
.gal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  background: #e2e8f0;
}
.gal-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
}
.gal-win picture,
.gal-phone picture {
  display: block;
}
.gal-thumbs picture {
  display: block;
  flex: none;
}
.gal-win img,
.gal-phone img {
  display: block;
  width: 100%;
  height: auto;
}
.gal-phone {
  position: absolute;
  right: 28px;
  bottom: 0;
  width: 24%;
  min-width: 96px;
  overflow: hidden;
  border: 5px solid #0f172a;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
}
.gal-phone img {
  aspect-ratio: 1 / 2;
  object-fit: cover;
  object-position: top;
}
.gal-cap {
  margin: 16px 0 0;
  color: #475569;
  font-size: 1.0625rem;
}
.gal-eg {
  margin: 0 0 8px;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gal-thumbs {
  display: flex;
  gap: 12px;
  padding: 4px 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
@media (min-width: 960px) {
  .gal-thumbs {
    flex-direction: column;
    overflow: visible;
  }
}
.gal-thumbs label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
  padding: 8px;
  border: 2px solid #7c8ba1; /* 3:1 on white: the thumbnails are controls */
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  scroll-snap-align: start;
}
.gal-thumbs label:hover { border-color: #93c5fd; }
.gal-thumbs img {
  width: 72px;
  height: 48px;
  object-fit: cover;
  object-position: top left;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.gal-thumbs span {
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}
.gal-thumbs small {
  display: block;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 400;
}

/* The checked radio input shows its stage and marks its thumbnail; its focus ring goes to the thumbnail. */
.gal > input:nth-of-type(1):checked ~ .gal-stage .gal-panel:nth-child(1),
.gal > input:nth-of-type(2):checked ~ .gal-stage .gal-panel:nth-child(2),
.gal > input:nth-of-type(3):checked ~ .gal-stage .gal-panel:nth-child(3),
.gal > input:nth-of-type(4):checked ~ .gal-stage .gal-panel:nth-child(4),
.gal > input:nth-of-type(5):checked ~ .gal-stage .gal-panel:nth-child(5),
.gal > input:nth-of-type(6):checked ~ .gal-stage .gal-panel:nth-child(6) {
  display: block;
}
.gal > input:nth-of-type(1):checked ~ .gal-side label:nth-child(1),
.gal > input:nth-of-type(2):checked ~ .gal-side label:nth-child(2),
.gal > input:nth-of-type(3):checked ~ .gal-side label:nth-child(3),
.gal > input:nth-of-type(4):checked ~ .gal-side label:nth-child(4),
.gal > input:nth-of-type(5):checked ~ .gal-side label:nth-child(5),
.gal > input:nth-of-type(6):checked ~ .gal-side label:nth-child(6) {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #bfdbfe;
}
.gal > input:nth-of-type(1):focus-visible ~ .gal-side label:nth-child(1),
.gal > input:nth-of-type(2):focus-visible ~ .gal-side label:nth-child(2),
.gal > input:nth-of-type(3):focus-visible ~ .gal-side label:nth-child(3),
.gal > input:nth-of-type(4):focus-visible ~ .gal-side label:nth-child(4),
.gal > input:nth-of-type(5):focus-visible ~ .gal-side label:nth-child(5),
.gal > input:nth-of-type(6):focus-visible ~ .gal-side label:nth-child(6) {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

/* ── Dark mode: follows the system. The screenshots switch to dark shots where the app has a dark mode. ── */
@media (prefers-color-scheme: dark) {
  .gal-frame {
    background-color: #0f172a;
    background-image: linear-gradient(#1e293b 1px, transparent 1px), linear-gradient(90deg, #1e293b 1px, transparent 1px);
  }
  .gal-link:hover .gal-frame { box-shadow: 0 0 0 3px #1e3a8a; }
  .gal-win { background: #0b1220; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
  .gal-bar { background: #1e293b; }
  .gal-bar i { background: #334155; }
  .gal-phone { border-color: #334155; background: #0b1220; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
  .gal-cap { color: #b8c4d6; }
  .gal-eg { color: #a3b1c6; }
  .gal-thumbs label { border-color: #5d6d87; background: #111a2e; }
  .gal-thumbs label:hover { border-color: #3b82f6; }
  .gal-thumbs img { border-color: #2a3a52; }
  .gal-thumbs span { color: #f1f5f9; }
  .gal-thumbs small { color: #a3b1c6; }
  .gal > input:nth-of-type(1):checked ~ .gal-side label:nth-child(1),
  .gal > input:nth-of-type(2):checked ~ .gal-side label:nth-child(2),
  .gal > input:nth-of-type(3):checked ~ .gal-side label:nth-child(3),
  .gal > input:nth-of-type(4):checked ~ .gal-side label:nth-child(4),
  .gal > input:nth-of-type(5):checked ~ .gal-side label:nth-child(5),
  .gal > input:nth-of-type(6):checked ~ .gal-side label:nth-child(6) {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px #1e3a8a;
  }
  .gal > input:nth-of-type(1):focus-visible ~ .gal-side label:nth-child(1),
  .gal > input:nth-of-type(2):focus-visible ~ .gal-side label:nth-child(2),
  .gal > input:nth-of-type(3):focus-visible ~ .gal-side label:nth-child(3),
  .gal > input:nth-of-type(4):focus-visible ~ .gal-side label:nth-child(4),
  .gal > input:nth-of-type(5):focus-visible ~ .gal-side label:nth-child(5),
  .gal > input:nth-of-type(6):focus-visible ~ .gal-side label:nth-child(6) {
    outline-color: #93c5fd;
  }
}