/* YoMiE website. The role colours (S V O C) come from the product (core.css) and stay the
   only strong colours on the page; everything else is ink on a cool paper. The type is a
   geometric gothic (Zen Kaku Gothic New) with a geometric sans for English (Space Grotesk):
   straight lines and corners, like the boxes of the diagram. */
:root {
  --paper: #f5f6f8;
  --sheet: #ffffff;
  --ink: #1c2330;
  --muted: #5b6472;
  --rule: #dde1e7;
  --S: #2563eb;
  --V: #dc2626;
  --O: #16a34a;
  --C: #d97706;
  --M: #6b7280;
  --J: #0f766e;
  --display: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --en: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --wrap: min(1040px, 100% - 32px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t: 0.7s;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip; /* the hero card overhangs the right edge on wide screens */
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px / 1.8 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--S);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- top bar ---------- */
.bar {
  width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 900 20px / 1 var(--display);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.bar nav {
  display: flex;
  gap: 22px;
  font-size: 14px;
}
.bar nav a {
  text-decoration: none;
  color: var(--muted);
  padding: 6px 0;
}
.bar nav a:hover {
  color: var(--ink);
}

/* ---------- shared ---------- */
main > section {
  width: var(--wrap);
  margin: 0 auto;
  padding: 72px 0;
}
main > section + section {
  border-top: 1px solid var(--rule);
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
  word-break: auto-phrase;
}
h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin-bottom: 28px;
}
h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
}
p {
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  font: 700 15px / 1.4 var(--body);
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.btn.primary {
  background: var(--ink);
  color: #fff;
}
.btn:disabled {
  cursor: default;
  opacity: 0.88;
}

/* ---------- hero ---------- */
.hero {
  padding-top: 40px;
}
.hero h1 {
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.lead {
  max-width: 38em;
  margin-top: 22px;
  font-size: 17px;
  color: var(--muted);
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
/* The one bold spot: on wide screens the hero sits beside its card, and the card overhangs the
   right edge of the viewport (html clips it). */
@media (min-width: 1000px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: center;
    padding-top: 56px;
  }
  .hero h1 {
    font-size: clamp(44px, 5.6vw, 76px);
  }
  .hero-fig {
    margin: 0;
    /* the wrap's right margin plus 8px: the card's edge is just past the viewport at every
       width, and the text inside stays within the card's 28px padding */
    width: calc(100% + (100vw - min(1040px, 100vw - 32px)) / 2 + 8px);
  }
}

/* ---------- the reading card: a page excerpt with the live diagram ---------- */
.reading {
  margin: 48px 0 0;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0 28px 26px;
  box-shadow:
    0 1px 0 var(--rule),
    0 24px 48px -32px rgba(28, 35, 48, 0.28);
}
.page-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -28px 22px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
}
.page-chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rule);
}
.page-chrome em {
  margin-left: 10px;
  font-style: normal;
}
.source {
  font: 500 clamp(21px, 2.6vw, 28px) / 1.7 var(--en);
  letter-spacing: -0.01em;
}
.chunk {
  padding-bottom: 2px;
  border-bottom: 2.5px solid var(--M);
  transition: background-color 0.15s;
}
.chunk.sub {
  border-bottom-style: dashed;
  border-bottom-width: 1.5px;
}
.chunk.r-S {
  border-color: var(--S);
}
.chunk.r-V {
  border-color: var(--V);
}
.chunk.r-O {
  border-color: var(--O);
}
.chunk.r-C {
  border-color: var(--C);
}
.chunk.r-J {
  border-color: var(--J);
}
.chunk.r-M {
  border-color: color-mix(in srgb, var(--M) 55%, transparent);
}
.chunk.lit {
  background: color-mix(in srgb, #facc15 38%, transparent);
  border-radius: 3px;
}
.ja {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}
.diagram-host {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
}
/* The English in the diagram's boxes is set in the site's English face, so the card reads as
   one piece with the sentence above it (the panel keeps core's serif). */
.reading .diagram .box .en {
  font-family: var(--en);
  font-weight: 600;
}
.reading figcaption {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}
.points {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

/* ---------- how ----------
   One row per step: the words on one side, the step's picture on the other, alternating. The
   picture is a page of an ordinary article as the extension leaves it (src/steps.ts); its parts
   copy the extension's own look (content/paint.ts, card.ts, dict.ts) where core.css does not
   carry it. Every class is lp- and scoped under .lp-steps / .lp-page. */
.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 72px;
}
.lp-steps > li {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.lp-steps > li.lp-flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
}
.lp-steps > li.lp-flip > .lp-step-copy {
  order: 2;
}
.lp-step-copy {
  border-top: 2px solid var(--ink);
  padding-top: 16px;
  min-width: 0;
}
.lp-step-copy > .lp-step-no {
  display: block;
  font: 900 34px / 1 var(--display);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.lp-step-copy > p {
  color: var(--muted);
  font-size: 15px;
}

/* the page: a browser window with an ordinary article */
.lp-page {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow:
    0 1px 0 var(--rule),
    0 24px 48px -32px rgba(28, 35, 48, 0.28);
  min-width: 0;
}
.lp-page > .page-chrome {
  margin: 0;
}
.lp-page > .lp-article {
  position: relative;
  padding: 18px 24px 22px;
  /* the reader's page keeps its own look: an ordinary serif article, not the site's type */
  font:
    400 17px / 1.75 Georgia,
    "Times New Roman",
    serif;
  color: #1a1a1a;
}
.lp-article > .lp-title {
  font:
    400 26px / 1.2 Georgia,
    "Times New Roman",
    serif;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.lp-article > .lp-lines {
  display: grid;
  gap: 12px;
  padding: 7px 0;
}
.lp-lines > span {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #eceef2;
}
.lp-lines > span.lp-short {
  width: 58%;
}
.lp-article > .lp-sentence {
  margin: 4px 0;
}

/* what 解析 leaves on the page (paint.ts: 1.5px line, offset 3px; lighter text for the rest) */
.lp-sentence > .lp-k {
  text-decoration: underline solid 1.5px;
  text-underline-offset: 3px;
}
.lp-sentence > .lp-k-S {
  text-decoration-color: var(--S);
}
.lp-sentence > .lp-k-V {
  text-decoration-color: var(--V);
}
.lp-sentence > .lp-k-O {
  text-decoration-color: var(--O);
}
.lp-sentence > .lp-k-C {
  text-decoration-color: var(--C);
}
.lp-sentence > .lp-k-J {
  text-decoration-color: var(--J);
}
.lp-sentence > .lp-dim {
  color: #636363;
}
/* the clicked sentence: each role filled, a 2px line (a subordinate clause lighter, dashed) */
.lp-sentence > .lp-f {
  --c: var(--M);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  text-decoration: underline solid 2px var(--c);
  text-underline-offset: 3px;
}
.lp-sentence > .lp-f.lp-sub {
  background: color-mix(in srgb, var(--c) 7%, transparent);
  text-decoration: underline dashed 1px var(--c);
}
.lp-sentence > .lp-f-S {
  --c: var(--S);
}
.lp-sentence > .lp-f-V {
  --c: var(--V);
}
.lp-sentence > .lp-f-O {
  --c: var(--O);
}
.lp-sentence > .lp-f-C {
  --c: var(--C);
}
.lp-sentence > .lp-f-J {
  --c: var(--J);
}
.lp-sentence > .lp-f-M {
  background: none;
  text-decoration: underline dashed 1px var(--M);
}
.lp-sentence > .lp-c.lp-lit {
  background: color-mix(in srgb, #facc15 38%, transparent);
}

/* the structure card under the clicked sentence (extension content/card.ts) */
.lp-article > .lp-card {
  position: relative;
  margin: 12px -12px 6px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
  font:
    13px / 1.55 -apple-system,
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;
  text-align: left;
}
.lp-card > .lp-card-tick {
  position: absolute;
  top: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: var(--card);
  transform: rotate(45deg);
  border: 0 solid var(--line);
  border-left-width: 1px;
  border-top-width: 1px;
}
.lp-card > .lp-card-head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px 4px 12px;
}
.lp-card-head > .lp-card-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding-top: 4px;
}
.lp-card-chips > .lp-card-title {
  margin-right: 2px;
  font-size: 13px;
  font-weight: 700;
}
.lp-card-head > .lp-card-x {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 16px;
}
.lp-card > .lp-card-tabs {
  display: flex;
  gap: 2px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.lp-card-tabs > span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.lp-card-tabs > .lp-on {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.lp-card-tabs .lp-card-n {
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.lp-card > .lp-card-body {
  padding: 8px 12px 12px;
  min-width: 0;
}

/* the dictionary card (extension content/dict.ts; the entries inside come from core.css) */
.lp-article > .lp-tip {
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: min(320px, calc(100% - 16px));
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  padding: 10px 12px;
  font:
    13px / 1.5 -apple-system,
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;
}
.lp-tip .head {
  font-size: 16px;
}
/* inside the steps' <ol>, a list would otherwise take the nested-list circle */
.lp-tip ul.sense {
  list-style: disc;
}
.lp-tip li.usage {
  list-style: none;
  margin-left: -12px;
}
.lp-tip .fold {
  color: var(--muted);
}
.lp-tip > .lp-tip-chunk {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.lp-tip-chunk > .lp-badge {
  min-width: 18px;
  text-align: center;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--cb, var(--c));
  color: var(--on-fill);
  font-weight: 700;
  font-size: 11px;
}
.lp-tip > .lp-tip-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}
.lp-article > .lp-pointer {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.lp-pointer > svg {
  display: block;
}

@media (max-width: 860px) {
  .lp-steps {
    gap: 48px;
  }
  .lp-steps > li,
  .lp-steps > li.lp-flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .lp-steps > li.lp-flip > .lp-step-copy {
    order: 0;
  }
}

/* ---------- long sentences ---------- */
/* ---------- promo video ---------- */
.promo-fig {
  margin: 28px 0 0;
}
.promo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow:
    0 1px 0 var(--rule),
    0 24px 48px -32px rgba(28, 35, 48, 0.28);
}

.long {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the card's diagram scrolls inside it, never widens the column */
  gap: 8px;
}
.long-copy p {
  max-width: 40em;
  color: var(--muted);
}
.long .reading {
  margin-top: 28px;
}

/* ---------- features ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.grid article {
  background: var(--sheet);
  padding: 26px 28px;
  min-width: 0;
}
.grid p {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- price ---------- */
.plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 30px 32px;
}
.amount {
  font: 900 64px / 1 var(--display);
  letter-spacing: -0.04em;
}
.amount .tier {
  display: block;
  margin-bottom: 8px;
  font: 700 13px / 1.4 var(--body);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.plan ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
}

/* ---------- faq ---------- */
.faq details {
  border-top: 1px solid var(--rule);
  padding: 16px 0;
}
.faq details:last-child {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer;
  font-weight: 500;
}
.faq details p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- footer ---------- */
.foot {
  width: var(--wrap);
  margin: 0 auto;
  padding: 36px 0 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}
.foot a {
  padding: 4px 0;
}

/* ---------- legal pages ---------- */
.legal {
  width: min(760px, 100% - 32px);
  margin: 0 auto;
  padding: 24px 0 72px;
}
.legal h1 {
  font-size: clamp(28px, 4vw, 38px);
  margin-bottom: 24px;
}
.legal h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 40px 0 12px;
}
.legal p,
.legal li {
  margin: 10px 0;
}
.legal blockquote {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--C);
  background: color-mix(in srgb, var(--C) 8%, var(--sheet));
  color: var(--muted);
  font-size: 14px;
}
.legal table {
  display: block;
  overflow-x: auto; /* wide tables scroll on phones instead of widening the page */
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 12px 0;
}
.legal th,
.legal td {
  border: 1px solid var(--rule);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.legal th {
  background: var(--paper);
}

/* ---------- welcome: the page the extension opens once installed (/welcome/) ---------- */
.welcome {
  width: min(760px, 100% - 32px);
  margin: 0 auto;
  padding: 24px 0 72px;
}
.welcome h1 {
  font-size: clamp(28px, 4vw, 38px);
}
.welcome > section {
  width: auto;
  padding: 36px 0;
}
.welcome h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 4px;
}
.welcome h2 > .no {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 15px / 1 var(--en);
}
.welcome h2 + p {
  color: var(--muted);
  word-break: auto-phrase;
}
.pin-fig {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-top: 20px;
}
.reading.try {
  margin-top: 20px;
  padding-top: 22px;
}
/* The sentence is the button: pressed, its translation and diagram open under it (main.ts). */
.try [data-role="sentence"] {
  cursor: pointer;
  border-radius: 6px;
}
.try [data-role="sentence"][aria-expanded="false"]:hover {
  background: var(--paper);
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  main > section {
    padding: 52px 0;
  }
  .bar nav {
    display: none;
  }
  .reading {
    padding: 0 16px 20px;
  }
  .page-chrome {
    margin: 0 -16px 18px;
  }
  .lp-page > .lp-article {
    padding: 14px 16px 18px;
    font-size: 16px;
  }
  .lp-article > .lp-card {
    margin-inline: -8px;
  }
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* ---------- motion ----------
   Blocks arrive from the side as they scroll into view, left and right alternating; inside a
   card the diagram's boxes line up from the left one after another, then the lines between them
   follow. Only hidden while the script runs (html.js, set in index.html) and only when motion is
   welcome, so without JavaScript or with reduced motion everything is there from the start. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transition:
      opacity var(--t) var(--ease),
      transform var(--t) var(--ease);
  }
  .js [data-reveal="left"] {
    transform: translateX(-56px);
  }
  .js [data-reveal="right"] {
    transform: translateX(72px);
  }
  .js [data-reveal="up"] {
    transform: translateY(20px);
  }
  .js [data-reveal].in {
    opacity: 1;
    transform: none;
  }
  .js .diagram-host .box {
    transition:
      opacity 0.5s var(--ease),
      transform 0.5s var(--ease);
    transition-delay: calc(var(--d, 0ms) + 0.25s);
  }
  .js .diagram-host .diagram svg {
    transition: opacity 0.5s var(--ease);
    transition-delay: calc(var(--d, 0ms) + 0.4s);
  }
  /* hidden until the card is in view and the diagram has been drawn (.pending, main.ts) */
  .js :is(.reading:not(.in), .diagram-host.pending) .box {
    opacity: 0;
    transform: translateX(-28px);
  }
  .js :is(.reading:not(.in), .diagram-host.pending) .diagram svg {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}