:root{--bg:#f7f5f0;--card:#fff;--ink:#2b2620;--dim:#8a8177;--accent:#7a5c2e;
--soft:#ede4d3;--gold:#b8912f;--line:#e3dcd0;
font-family:"Segoe UI","Arial Hebrew","David",sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#1c1915;--card:#26221c;--ink:#ece5da;
--dim:#9a9184;--accent:#d8b36a;--soft:#3a3226;--gold:#e2bd76;--line:#3a352d}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6}
.p-head,.p-main,.p-foot{max-width:820px;margin:0 auto;padding:1rem}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.p-brand{color:var(--accent);font-weight:700;font-size:1.3rem;text-decoration:none}
.p-lang{color:var(--dim);text-decoration:none;font-size:.9rem;border:1px solid var(--line);
border-radius:999px;padding:.25rem .8rem;white-space:nowrap}
.p-lang:hover{color:var(--accent);border-color:var(--accent)}
h1{font-size:1.7rem;margin:.6rem 0}
h2{font-size:1.1rem;color:var(--accent);margin:1.6rem 0 .5rem}
.p-value{font-size:3.4rem;font-weight:800;color:var(--gold);line-height:1}
.p-letters{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:.7rem 0;direction:rtl}
.p-word{display:inline-flex;flex-wrap:nowrap;gap:.3rem;max-width:100%;overflow-x:auto}
.p-let{display:inline-flex;flex-direction:column;align-items:center;
background:var(--soft);border-radius:8px;padding:.2rem .5rem}
.p-let small{color:var(--dim);font-size:.7rem}
.p-lead{color:var(--ink)}
.p-dim{color:var(--dim)}
.p-cta{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
padding:.7rem 1.3rem;border-radius:999px;margin:.5rem 0}
/* Secondary to .p-cta: same pill, outlined instead of filled. Without this it
   fell through to the browser's default link styling — blue and underlined,
   the only thing on the page that looked unstyled. */
.p-more{display:inline-block;color:var(--accent);text-decoration:none;
border:1px solid var(--line);padding:.55rem 1.1rem;border-radius:999px;margin:.5rem 0}
.p-more:hover{border-color:var(--accent);background:var(--card)}
.p-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.p-list li{background:var(--card);border:1px solid var(--line);border-radius:10px;
padding:.4rem .8rem;max-width:100%}
.p-list a{color:var(--ink);text-decoration:none}
.p-list a:hover{color:var(--accent);text-decoration:underline}
.p-ref{color:var(--dim);font-size:.8rem;margin-inline-start:.4rem}
.p-nav{display:flex;justify-content:space-between;margin:2rem 0}
.p-nav a,.p-foot a{color:var(--accent);text-decoration:none}
@media(max-width:600px){h1{font-size:1.4rem}.p-value{font-size:2.8rem}}