/* MiraaaG page. White page, the app shown dark as it runs. Green is the app's "start / running" colour. */
:root {
  --bg: #0e0f10; --ink: #ededeb; --soft: #a4a9ae; --rule: #2b2e31; --tint: #191b1d; --card: #2a2d30; --edge: #2b2e31;
  --green: #12b455; --green-d: #0c8f43; --green-t: #3ad27f;
  --a-bg: #121212; --a-panel: #1b1b1b; --a-well: #242424; --a-rule: #303030; --a-ink: #ededed; --a-soft: #9a9a9a;
  --la: #22c55e; --lb: #f59e0b; --lc: #8b7cf6;
  --font: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif;
}
/* Light theme. theme.js sets data-theme; without scripts the page follows the system. */
:root[data-theme="light"] { --bg: #ffffff; --ink: #111315; --soft: #5a6066; --rule: #e3e5e8; --tint: #f5f6f7; --card: #ffffff; --edge: transparent; --green-t: #0c8f43; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --bg: #ffffff; --ink: #111315; --soft: #5a6066; --rule: #e3e5e8; --tint: #f5f6f7; --card: #ffffff; --edge: transparent; --green-t: #0c8f43; }
}
:root:lang(zh-CN), [lang="zh-CN"] { --font: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Yu Gothic UI", sans-serif; }
[lang="ja"] { --font: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif; }
[lang] { font-family: var(--font); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.8; }
h1, h2, h3, p, ul, ol, dl, dd, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
[hidden] { display: none !important; }
rt { font-size: .46em; font-weight: 400; opacity: .8; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--ink); color: var(--bg); padding: 6px 12px; z-index: 9; }

.top, main, .foot { width: min(1160px, 100% - 44px); margin-inline: auto; }
.top { display: flex; align-items: center; gap: 30px; padding: 18px 0; }
.name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.name img { border-radius: 7px; }
.top nav { display: flex; gap: 26px; margin-left: auto; font-size: .94rem; }
.top nav a { text-decoration: none; color: var(--soft); }
.top nav a:hover { color: var(--ink); }

.hero { padding: 70px 0 44px; text-align: center; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.3; font-weight: 800; letter-spacing: -.01em; max-width: 17em; margin-inline: auto; text-wrap: balance; }
.lead { margin: 22px auto 0; color: var(--soft); font-size: 1.1rem; max-width: 40em; }
.cta { margin-top: 30px; display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }
.btn { background: var(--green); color: #fff; font-weight: 700; text-decoration: none; padding: 13px 28px; border-radius: 999px; }
.btn:hover { background: var(--green-d); }
.link { color: var(--ink); font-weight: 700; }
.facts { margin-top: 44px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 56px; }
.facts li { text-align: left; }
.facts b { display: block; font-size: 1.7rem; line-height: 1.2; font-weight: 800; }
.facts span { color: var(--soft); font-size: .86rem; }

/* the app */
.app { background: var(--a-bg); color: var(--a-ink); border-radius: 12px; overflow: hidden; font-size: .82rem; line-height: 1.6; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); border: 1px solid var(--edge); }
.app .bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; overflow: hidden; }
.sel { background: var(--a-well); border-radius: 6px; padding: 6px 26px 6px 12px; white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; }
.sel::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--a-soft); border-bottom: 1.5px solid var(--a-soft); transform: translateY(-70%) rotate(45deg); }
.sel.wide, .sel.grow { flex: 1; min-width: 0; }
.sel.block { display: block; }
.chip { background: var(--a-well); border-radius: 6px; padding: 6px 12px; white-space: nowrap; }
.chip.dim { color: var(--a-soft); border-radius: 999px; }
.start { background: var(--green); color: #fff; font-weight: 700; border-radius: 999px; padding: 6px 34px; white-space: nowrap; }
.app .body { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 12px; padding: 0 12px; }
.card { background: var(--a-panel); border-radius: 10px; padding: 14px 16px; }
.lab { color: var(--a-soft); font-size: .76rem; margin-bottom: 6px; }
.lab i { font-style: normal; background: var(--a-well); color: var(--a-ink); border-radius: 999px; padding: 1px 9px; margin-left: 6px; }
.lab.row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jp { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 2.5; word-spacing: .12em; }
.jp u { text-decoration: none; border-bottom: 3px solid var(--la); padding-bottom: 2px; }
.jp u.b { border-color: var(--lb); } .jp u.c { border-color: var(--lc); }
.jp.sm { font-size: 1.05rem; line-height: 2.2; }
.zh { font-size: .95rem; color: #d6d6d6; }
.player { display: flex; align-items: center; gap: 14px; padding: 12px 6px; color: var(--a-soft); }
.player span:first-child { color: var(--a-ink); }
.track { flex: 1; height: 3px; background: var(--a-rule); border-radius: 3px; }
.track i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.w66 { width: 66%; } .w40 { width: 40%; } .w82 { width: 82%; }
.tog { display: inline-flex; align-items: center; gap: 8px; color: var(--a-ink); white-space: nowrap; }
.tog::before { content: ""; width: 28px; height: 16px; border-radius: 999px; background: var(--green); box-shadow: inset -12px 0 0 -2px #fff; flex: none; }
.ex { padding: 6px 0 12px; border-bottom: 1px solid var(--a-rule); font-size: .88rem; }
.gr { padding: 10px 0 2px; font-size: .86rem; }
.gr b { font-size: .98rem; }
.gr i, .vocab i { font-style: normal; font-size: .7rem; background: var(--a-well); border-radius: 4px; padding: 1px 6px; margin: 0 2px; color: #7fb7ff; }
.vocab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.vocab li { background: var(--a-bg); border-radius: 8px; padding: 10px 12px; }
.vocab b.a { color: var(--la); } .vocab b.b { color: var(--lb); } .vocab b.c { color: var(--lc); }
.vocab p:first-child { color: var(--a-soft); }
.vocab b { font-size: .95rem; margin-right: 4px; }
.eg { color: var(--a-soft); font-size: .76rem; }
.right { background: var(--a-panel); border-radius: 10px; padding: 10px 12px; min-width: 0; align-self: start; }
.tabsrow { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; color: var(--a-soft); border-bottom: 1px solid var(--a-rule); }
.tabsrow span { padding: 6px 0 8px; }
.tabsrow .on { color: var(--a-ink); font-weight: 700; border-bottom: 2px solid var(--green); }
.frow { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.frow.split { justify-content: space-between; flex-wrap: wrap; }
.search { margin-top: 8px; background: var(--a-well); border-radius: 6px; padding: 6px 12px; color: var(--a-soft); }
.seg { display: inline-flex; align-items: center; gap: 2px; color: var(--a-soft); font-size: .76rem; }
.seg em { font-style: normal; margin-right: 6px; }
.seg b, .seg span { padding: 2px 8px; border-radius: 5px; }
.seg b { background: var(--a-well); color: var(--a-ink); }
.count { color: var(--a-soft); padding-top: 8px; margin-top: 12px; border-top: 1px solid var(--a-rule); }
.thead, .rows button { display: grid; grid-template-columns: 5.2em minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.thead { color: var(--a-ink); font-weight: 700; padding: 8px 8px 6px; font-size: .76rem; }
.rows button { width: 100%; padding: 8px; border-top: 1px solid var(--a-rule); border-left: 3px solid transparent; }
.rows button:hover { background: var(--a-well); }
.rows button[aria-selected="true"] { background: var(--a-well); border-left-color: var(--green); }
.rows time { color: var(--a-soft); font-variant-numeric: tabular-nums; }
.rows span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tip { color: var(--la); font-size: .74rem; padding: 10px 8px 4px; }
.status { display: flex; gap: 18px; padding: 10px 16px; color: var(--a-soft); font-size: .74rem; flex-wrap: wrap; }
.status .r { margin-left: auto; }
.fine { margin: 14px auto 0; color: var(--soft); font-size: .8rem; line-height: 1.7; max-width: 62em; text-align: center; }

.sec { padding-top: 104px; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.4; font-weight: 800; }
.sub { color: var(--soft); margin-top: 10px; font-size: 1.05rem; }
.tabs { display: inline-flex; gap: 4px; margin: 26px 0 18px; padding: 4px; background: var(--tint); border-radius: 10px; }
.tabs button { padding: 8px 20px; border-radius: 7px; color: var(--soft); font-weight: 700; font-size: .94rem; }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.flow ol { counter-reset: n; }
.flow li { counter-increment: n; display: grid; grid-template-columns: 2.2em 1fr; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.flow li::before { content: counter(n); font-weight: 800; color: var(--green-t); }
.scene { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; background: #26364f; color: #fff; overflow: hidden; }
.scene.warm { background: #46303a; }
.scene::before { content: ""; position: absolute; inset: 60% 0 0; background: rgba(0, 0, 0, .25); }
.where { position: absolute; left: 14px; top: 10px; font-size: .74rem; opacity: .7; }
.over { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: 90%; text-align: center; background: rgba(0, 0, 0, .72); border-radius: 6px; padding: 8px 14px 10px; }
.over b { display: block; font-size: clamp(.9rem, 1.9vw, 1.2rem); line-height: 2; }
.over span { font-size: .86rem; color: #d5d8db; }
.mini { border: 1px solid var(--edge); background: var(--a-bg); color: var(--a-ink); border-radius: 12px; padding: 16px; font-size: .84rem; line-height: 1.6; display: grid; gap: 8px; align-content: center; min-height: 148px; }
.mini.center { justify-items: center; }
.mini .player { padding: 4px 0; }
.mini .lp { color: var(--la); }
.mini .search { margin: 0; color: var(--a-ink); border: 1px solid var(--green); }
.hit { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 10px; padding: 7px 8px; border-radius: 6px; }
.hit.on { background: var(--a-well); box-shadow: inset 3px 0 0 var(--green); }
.hit time { color: var(--a-soft); }
.hit span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
mark { background: none; color: var(--la); font-weight: 700; }
.opt { padding: 5px 12px; border-radius: 6px; color: var(--a-soft); }
.opt.on { background: var(--a-well); color: var(--a-ink); }
.mini .gr { padding: 0; }
.uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; margin-top: 34px; }
.uses h3, .steps h3 { font-size: 1.15rem; margin: 16px 0 4px; }
.uses p, .steps > li > p { color: var(--soft); font-size: .96rem; }
.uses .mini p, .steps .mini p { color: inherit; font-size: inherit; }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.steps > li { counter-increment: s; }
.steps h3::before { content: counter(s) ". "; color: var(--green-t); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 30px; align-items: start; }
.points li { padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--soft); }
.points b { display: block; color: var(--ink); }
.spec { border-collapse: collapse; width: 100%; font-size: .94rem; background: var(--tint); border-radius: 12px; }
.spec th, .spec td { text-align: left; padding: 12px 18px; vertical-align: top; border-bottom: 1px solid var(--bg); }
.spec th { width: 8em; font-weight: 400; color: var(--soft); white-space: nowrap; }
.faq { margin-top: 24px; max-width: 800px; }
.faq dt { font-weight: 800; padding-top: 22px; }
.faq dd { color: var(--soft); padding: 4px 0 22px; border-bottom: 1px solid var(--rule); }
.end { text-align: center; }
.end p { margin: 16px auto 0; max-width: 44em; color: var(--soft); }
.foot { display: flex; justify-content: space-between; padding: 28px 0 44px; margin-top: 96px; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--soft); }

@media (max-width: 900px) {
  .top nav { display: none; }
  .top { justify-content: space-between; }
  .hero { padding: 36px 0 30px; text-align: left; }
  h1, .lead { margin-inline: 0; }
  .cta { justify-content: flex-start; }
  .facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: baseline; padding: 8px 0; border-top: 1px solid var(--rule); }
  .facts b { font-size: 1.3rem; }
  .top { gap: 10px; }
  .app .bar .sel:not(.wide), .app .bar .chip { display: none; }
  .app .body, .flow, .two, .uses { grid-template-columns: minmax(0, 1fr); }
  .flow { gap: 20px; }
  .vocab { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec { padding-top: 68px; }
  .fine { text-align: left; }
  .status .r { display: none; }
}
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2 { word-break: auto-phrase; }
.intro { padding: 80px 0; }

/* autoplay control */
.auto { margin-top: 12px; text-align: center; }
.auto button { font-size: .8rem; color: var(--soft); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 14px; }
.auto button:hover { color: var(--ink); }
.auto [aria-pressed="true"] .off, .auto [aria-pressed="false"] .on { display: none; }

/* Motion: a line arrives, is read out, then explained. Restarts whenever a line is shown. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes reveal { from { clip-path: inset(-1em 100% -1em 0); } to { clip-path: inset(-1em 0 -1em 0); } }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes fill { from { width: 0; } }
  @keyframes mark { from { background: var(--green); } }
  .left [data-panel] .jp { animation: reveal 1.3s steps(20) both; }
  .left [data-panel] .zh { animation: rise .4s 1.4s both; }
  .left [data-panel] .track i { animation: fill 3s 1.5s linear both; }
  .left [data-panel] .ex { animation: rise .4s 2.3s both; }
  .left [data-panel] .gr { animation: rise .4s 2.7s both; }
  .left [data-panel] .vocab li { animation: rise .4s 3.1s both; }
  .left [data-panel] .vocab li:nth-child(2) { animation-delay: 3.3s; }
  .left [data-panel] .vocab li:nth-child(3) { animation-delay: 3.5s; }
  .rows button[aria-selected="true"] { animation: mark .8s ease-out; }
  .flow[data-panel] .over, .flow[data-panel] .mini .hit { animation: rise .45s .15s both; }
  .flow[data-panel] .mini .hit:nth-of-type(3) { animation-delay: .3s; }
  .flow[data-panel] .mini .hit:nth-of-type(4) { animation-delay: .45s; }
}

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* language and theme switches: one button each, showing what a click switches to */
.ctl { display: flex; gap: 8px; }
.sw { height: 32px; padding: 0 11px; border: 1px solid var(--rule); border-radius: 999px; font-size: .8rem; color: var(--ink); }
.sw:hover { border-color: currentColor; }
.sw > span { display: inline-flex; align-items: center; gap: 7px; height: 100%; }
.sw .flag { border: 1px solid var(--rule); }
html[data-lang="ja"] .to-ja, html[data-lang="zh"] .to-zh { display: none; }
:root[data-theme="light"] .to-light, :root:not([data-theme="light"]) .to-dark { display: none; }
html[data-bilingual="off"] [data-lang-toggle] { display: none; }