/* Page d'accueil (toutes les langues) : mêmes couleurs et polices que l'outil. */
/* Page d'accueil : présente l'outil et fait entrer dans la langue choisie. Mêmes couleurs et polices que l'outil.
   Le titre en grand, les kanji dessous, tout centré ; au milieu, le vers « shin mu ke ge » (l'esprit sans obstacle)
   comme dans l'outil, le carré jaune passant doucement de kanji en kanji. */
:root{
  --bg:#eef0ec; --surface:#f8f9f6; --ink:#1d2128; --muted:#5d6560; --line:#d3d8d1;
  --accent:#2c3f73; --accent-soft:#dfe4ef; --on-accent:#f8f9f6;
  --f-display:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",Georgia,serif;
  --f-body:"Zen Kaku Gothic New","Yu Gothic","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#12151c; --surface:#1a1e27; --ink:#e6e4dc; --muted:#9aa09a; --line:#2d323d;
    --accent:#c9a55a; --accent-soft:#29271f; --on-accent:#12151c; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#12151c; --surface:#1a1e27; --ink:#e6e4dc; --muted:#9aa09a; --line:#2d323d;
  --accent:#c9a55a; --accent-soft:#29271f; --on-accent:#12151c; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.65 var(--f-body)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.page{position:relative;overflow:hidden;min-height:100vh}
/* Langue de la page d'accueil (les boutons plus bas, eux, font entrer dans l'outil) */
.pagelang{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:.4em;font-size:.9em;color:var(--muted)}
.pagelang select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.25em .4em}
/* Logo DharmaGates : sceau de pierre usée portant 門 (la porte) ; les éclats prennent la couleur du fond */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand .seal{width:40px;height:40px;flex:none}
.brand .seal path{fill:#a3482f}
.brand .seal .wear{fill:var(--bg)}
.brand .seal text{fill:#f8f9f6;font-family:var(--f-display)}
.brand span{font:700 20px/1 var(--f-display);letter-spacing:.01em}
.brand:hover span,.brand:focus-visible span{color:var(--accent)}
.brand.corner{position:absolute;top:12px;left:16px}
@media (max-width:600px){.pagelang{position:static;justify-content:center;margin-bottom:12px}.brand.corner{position:static;display:flex;width:max-content;margin:0 auto 14px}}
/* Kannon en filigrane : le dessin sert de masque, la couleur suit le thème */
.kannon{position:absolute;inset:0;pointer-events:none;background:var(--ink);opacity:.07;
  -webkit-mask:url(kannon.webp) center/contain no-repeat;mask:url(kannon.webp) center/contain no-repeat}
main{position:relative;max-width:1000px;margin:0 auto;padding:48px 16px 40px;text-align:center}
main > .intro,main > .langs,main > .feats,main > .notes{max-width:820px;margin-left:auto;margin-right:auto}
h1{font:700 clamp(34px,6vw,62px)/1.08 var(--f-display);margin:12px 0 0;letter-spacing:.01em;text-wrap:balance}
.title-jp{margin:.45em 0 0;font:500 clamp(20px,2.8vw,28px)/1.3 var(--f-display);letter-spacing:.32em;color:var(--muted)}
.tagline{margin:1.3em 0 0;font:500 clamp(18px,2.2vw,22px) var(--f-display);min-height:1.6em}
/* L'accroche passe d'une langue à l'autre : elle s'efface en montant, la suivante apparaît */
.tagline .rot{display:inline-block;transition:opacity .7s ease,transform .7s ease}
.tagline .rot.out{opacity:0;transform:translateY(-.4em)}
.tagline .rot.in{opacity:0;transform:translateY(.4em);transition:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Le vers : le carré jaune est un calque sous le texte des kanji, qui glisse de l'un à l'autre */
.hero{max-width:520px;margin:30px auto 0;padding:22px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.line{position:relative;display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center;font-size:clamp(17px,2.4vw,22px)}
.syl{position:relative;display:inline-flex;flex-direction:column;align-items:center;min-width:3em;padding:.35em .5em;border:1px solid var(--line);border-radius:8px;background:var(--surface);line-height:1.25}
.syl > span{position:relative;z-index:2;transition:color .9s ease}
.syl .c{font:500 1.6em var(--f-display)}
.syl .k{font:500 .72em var(--f-display);color:var(--muted)}
.syl .r{font:700 1.05em var(--f-display)}
.syl.on > span{color:var(--on-accent)}
.hl{position:absolute;left:0;top:0;z-index:1;border-radius:8px;background:var(--accent);
  transition:transform 1.1s cubic-bezier(.45,0,.25,1),width 1.1s cubic-bezier(.45,0,.25,1)}
.hero .m{margin:.9em 0 0;font:500 1.1em var(--f-display);color:var(--accent)}
.hero .m em{font-style:normal;color:var(--muted)}
.intro{margin-top:1.6em;color:var(--muted)}
/* Entrée : un bouton par langue, chacun dans sa langue ; celle de la page est en avant */
.langs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.langs a{display:inline-flex;flex-direction:column;align-items:center;min-width:7.2em;padding:.55em 1.1em;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);text-decoration:none;font-weight:500;transition:border-color .15s,background .15s}
.langs a small{font-size:.72em;font-weight:400;color:var(--muted);line-height:1.2}
.langs a:hover,.langs a:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.langs a[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.langs a[aria-current="true"] small{color:var(--on-accent);opacity:.8}
.feats{list-style:none;padding:30px 0 0;margin-top:52px;border-top:1px solid var(--line);display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));text-align:left}
.feats b{font:700 1em var(--f-display);display:block}
.feats span{color:var(--muted);font-size:.93em}
.notes{margin-top:44px;font-size:.85em;color:var(--muted)}
.notes p{margin:.3em 0}
.notes .don{margin:.3em 0 .9em}
.notes .don a{color:var(--accent)}
@media (max-width:600px){.langs a{min-width:calc(50% - 5px)}}
@media (prefers-reduced-motion:reduce){.hl,.syl > span{transition:none}}