/* The pages behind the extension in the hero's video (HeroVideo.tsx):
   hero-ask.html, hero-translate.html, hero-panel.html.

   Asked for 2026-10-30: generic rather than a real-looking site, in the
   site's own colours, "mostly abstract" — placeholder bars and shapes, with
   only the passage the scene uses written out. The extension in front of
   them is its own code and stays exactly as it ships; only the page behind
   it is drawn. The feature rows further down keep their realistic pages
   (scene-text.html, scene-panel.html).

   Laid out for the window the landing page draws: 1120x654 under the
   toolbar, and a narrow one on phones. Nothing scrolls, and the landing
   page gives the frame no pointer events. */
:root {
  color-scheme: light;
  --paper: #f7f8f7;
  --card: #ffffff;
  --line: #e4e4e7;
  --line-soft: #ececef;
  --ink: #18181b;
  --text: #3f3f46;
  --green: #10b981;
  --green-soft: #d1fae5;
  --teal: #5eead4;
  --orange: #f97316;
  --orange-soft: #ffedd5;
}
html, body { margin: 0; overflow: hidden; background: var(--paper); }
body { font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); }
.wrap { box-sizing: border-box; max-width: 1000px; margin: 0 auto; padding: 0 28px; }

/* Placeholder text: a line of words that are not there. */
.bar { display: block; height: 10px; border-radius: 999px; background: var(--line); margin: 0 0 12px; }
.bar.thick { height: 16px; background: #d4d4d8; }
.bar.title { height: 22px; border-radius: 8px; background: var(--ink); opacity: .82; }
.bar.green { background: var(--green-soft); }
.bar.orange { background: var(--orange-soft); }
.w20 { width: 20%; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; }
.w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; } .w100 { width: 100%; }

/* A site's header, as shapes: a mark, the menu, a button. */
.site { background: var(--card); border-bottom: 1px solid var(--line-soft); }
.site .wrap { height: 52px; display: flex; align-items: center; gap: 22px; }
.mark { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--green), var(--teal)); flex-shrink: 0; }
.site .bar { margin: 0; height: 8px; }
.menu { display: flex; gap: 14px; }
.menu .bar { width: 46px; }
.pill { margin-left: auto; width: 74px; height: 26px; border-radius: 999px; background: var(--ink); opacity: .85; flex-shrink: 0; }

/* A band under the header, in the green. */
.band { height: 96px; display: flex; align-items: center; background: linear-gradient(90deg, #ecfdf5 0%, #f0fdfa 60%, #fff7ed 100%); border-bottom: 1px solid var(--line-soft); }
.band .wrap { flex: 1; }
.band .bar { margin-bottom: 10px; }

/* Content in a reading column, with shapes beside it. */
.columns { display: grid; grid-template-columns: 190px minmax(0, 560px); column-gap: 60px; padding-top: 24px; }
.aside .bar { height: 8px; margin-bottom: 14px; }
.aside .bar.on { background: var(--green); opacity: .55; }
.tiles { display: flex; gap: 10px; margin-top: 22px; }
.tile { flex: 1; height: 54px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-soft); }
.tile.green { background: var(--green-soft); border-color: transparent; }
.tile.orange { background: var(--orange-soft); border-color: transparent; }

/* The one thing on the page that is written out. */
.passage { margin: 6px 0 18px; color: var(--ink); }

@media (max-width: 700px) {
  .wrap { padding: 0 20px; }
  .columns { display: block; padding-top: 18px; }
  .aside { display: none; }
  .menu { display: none; }
  .band { height: 84px; }
}