/* Seelie · Glass Wing. Pearl and graphite (light) or ink and pearl (dark); the thin-film colour lives only on the mark and one hero field. */
@font-face{font-family:"Syncopate";src:url(/assets/fonts/syncopate-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Syncopate";src:url(/assets/fonts/syncopate-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/geist-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/geist-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/geist-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
/* Arabic only: the unicode-range keeps Latin text in the brand faces */
@font-face{font-family:"Noto Kufi Arabic";src:url(/assets/fonts/noto-kufi-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Kufi Arabic";src:url(/assets/fonts/noto-kufi-arabic-arabic-700-normal.woff2) format("woff2");font-weight:600 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --pearl:#F4F5F8;--white:#FFFFFF;--mist:#E3E5EB;--mist-2:#EDEEF2;--graphite:#1B1D24;--slate:#555A67;--line:rgba(27,29,36,.1);--line-2:rgba(27,29,36,.18);
  --ok:#1E6B4A;--err:#B3261E;
  --film:linear-gradient(100deg,#8FE3FF,#FFB8E6 40%,#FFF1A8 70%,#B8FFD9);
  --fd:"Syncopate",system-ui,sans-serif;--fb:"Geist",system-ui,sans-serif;--fm:"Geist Mono",ui-monospace,monospace;
  --nav-bg:rgba(244,245,248,.86);--notice-bg:#1B1D24;--notice-fg:#F4F5F8;--ph:#6A6F7C;--sel:#FFD6F0;--scroll:#C9CCD5;--film-o:.6;--shadow:rgba(27,29,36,.6);
  --tag-v:#DDEFE6;--tag-v-fg:#15543A;--tag-e:#F3EBD6;--tag-e-fg:#6B4E0E;--tag-t:#F5DDE3;--tag-t-fg:#8A1F3A;
  --gut:clamp(16px,4vw,48px);--ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
/* dark: same roles, inverted. prefs.js sets data-theme from the saved choice or the system setting. */
:root[data-theme="dark"]{
  --pearl:#0E1015;--white:#161920;--mist:#2A2E38;--mist-2:#1D2028;--graphite:#ECEEF3;--slate:#A3A9B6;--line:rgba(236,238,243,.1);--line-2:rgba(236,238,243,.2);
  --ok:#7FD1A9;--err:#FF8A80;
  --nav-bg:rgba(14,16,21,.84);--notice-bg:#1D2028;--notice-fg:#ECEEF3;--ph:#8A90A0;--sel:#6B3C5E;--scroll:#3A3F4B;--film-o:.28;--shadow:rgba(0,0,0,.6);
  --tag-v:#173A2B;--tag-v-fg:#8FE0B7;--tag-e:#3A301A;--tag-e-fg:#F0CF83;--tag-t:#43202B;--tag-t-fg:#F4A6BA;
  color-scheme:dark;
}
/* Arabic: Kufi for Arabic glyphs, brand faces for Latin; Arabic letters must never be tracked apart */
:root[lang="ar"]{--fd:"Noto Kufi Arabic","Syncopate",system-ui,sans-serif;--fb:"Noto Kufi Arabic","Geist",system-ui,sans-serif;--fm:"Noto Kufi Arabic","Geist Mono",ui-monospace,monospace}
:root[lang="ar"] body *{letter-spacing:normal!important}
:root[lang="ar"] h1,:root[lang="ar"] h2,:root[lang="ar"] h3{line-height:1.45}
:root[lang="ar"] body{line-height:1.8}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scrollbar-color:var(--scroll) var(--pearl);scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pearl);color:var(--graphite);font:17px/1.6 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--sel);color:var(--graphite)}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--graphite);text-underline-offset:.25em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--graphite);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--fd);font-weight:700;text-transform:uppercase;text-wrap:balance;margin:0}
p{margin:0}
.wrap{width:min(1240px,100% - 2*var(--gut));margin-inline:auto}
.mono{font-family:var(--fm)}
.skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:60;background:var(--graphite);color:var(--pearl);padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:16px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* announcement + nav */
.notice{background:var(--notice-bg);color:var(--notice-fg);font-size:13px;text-align:center;padding:9px var(--gut)}
.notice b{font-weight:500;background:var(--film);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top,0px);background:var(--nav-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .4s}
.nav.scrolled,.nav.open{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:32px;height:68px;position:relative}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand .m{width:30px;height:30px}
.brand .w{height:12px;width:auto}
.links{display:flex;align-items:center;gap:30px;margin:0;margin-inline-start:auto;padding:0;list-style:none}
.links a{text-decoration:none;font-size:14px;color:var(--slate);transition:color .2s}
.links a:hover,.links a[aria-current="page"]{color:var(--graphite)}
.menu{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--white);cursor:pointer;place-items:center;color:var(--graphite)}
.menu svg{width:20px;height:20px}
@media (max-width:880px){
  .menu{display:grid}.nav .btn{margin-inline-start:auto}
  .links{align-items:stretch;position:absolute;top:100%;left:calc(-1*var(--gut));right:calc(-1*var(--gut));flex-direction:column;gap:0;padding:8px var(--gut) 20px;background:var(--pearl);border-bottom:1px solid var(--line);display:none}
  .nav.open .links{display:flex}
  .links a{display:block;padding:14px 0;font-size:18px;color:var(--graphite);border-bottom:1px solid var(--line)}
}
@media (max-width:420px){.nav .wrap{gap:12px}.brand{gap:8px}.brand .w{height:10px}.nav .btn{padding-inline:14px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 15px/1 var(--fb);padding:15px 22px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,opacity .3s}
.btn.pri{background:var(--graphite);color:var(--pearl);box-shadow:0 8px 20px -12px var(--shadow)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(27,29,36,.7)}
.btn.sec{color:var(--graphite);background:linear-gradient(var(--pearl),var(--pearl)) padding-box,var(--film) border-box}
.btn.sec:hover{transform:translateY(-2px)}
.btn.sm{padding:11px 16px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
.btn svg{width:15px;height:15px}

/* sections */
section.band{padding-block:clamp(88px,11vw,160px)}
.h2{font-size:clamp(22px,2.9vw,38px);line-height:1.2;letter-spacing:.06em}
.sub{margin-top:18px;max-width:52ch;color:var(--slate);font-size:clamp(17px,1.3vw,19px)}

/* hero */
.hero{position:relative;isolation:isolate;padding-block:clamp(40px,7vw,96px) clamp(40px,6vw,80px);overflow:hidden}
.film{position:absolute;inset:-10% -25% 10%;z-index:-1;opacity:var(--film-o);pointer-events:none;
  background:radial-gradient(closest-side,#8FE3FF,transparent) 30% 45%/46% 60% no-repeat,radial-gradient(closest-side,#FFB8E6,transparent) 70% 40%/48% 58% no-repeat,radial-gradient(closest-side,#FFF1A8,transparent) 52% 78%/44% 48% no-repeat,radial-gradient(closest-side,#B8FFD9,transparent) 84% 82%/32% 38% no-repeat;
  filter:blur(40px);animation:drift 18s ease-in-out infinite alternate,hue 26s linear infinite}
@keyframes drift{to{transform:rotate(16deg) scale(1.1) translate(3%,-3%)}}
@keyframes hue{to{filter:blur(40px) hue-rotate(360deg)}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero h1{font-size:clamp(32px,5.4vw,84px);line-height:1.04;letter-spacing:.01em;max-width:11ch;margin-bottom:clamp(28px,4vw,48px)}
.pname{font-size:clamp(18px,1.7vw,22px);letter-spacing:.24em}
.intro p{margin-top:14px;color:var(--slate);max-width:38ch}
.intro .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.intro .note{margin-top:18px;font:12px var(--fm);color:var(--slate)}

/* 3D viewer */
.viewer{position:relative;aspect-ratio:5/4;width:100%;touch-action:pan-y;cursor:grab}
.viewer:active{cursor:grabbing}
.viewer canvas{width:100%;height:100%}
/* hero: a still render shows at once; the live 3D view fades in over it when it starts */
.viewer .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity .6s var(--ease)}
.viewer.has-poster canvas{opacity:0;transition:opacity .6s var(--ease)}
.viewer.has-poster.live canvas{opacity:1}
.viewer.has-poster.live .poster{opacity:0}
.viewer .state{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font:12px/1.6 var(--fm);color:var(--slate)}
.viewer .hint{position:absolute;inset-inline-start:0;bottom:0;font:12px var(--fm);color:var(--slate)}

/* three things */
.does{border-top:1px solid var(--line)}
.rows{margin-top:56px;display:grid}
.rows article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,5vw,80px);padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--line);align-items:start}
@media (max-width:760px){.rows article{grid-template-columns:1fr}}
.rows h3{font-size:clamp(20px,2.4vw,32px);letter-spacing:.06em;line-height:1.2;display:flex;align-items:center;gap:20px}
.rows h3 svg{flex:none;width:44px;height:44px}
.rows p{color:var(--slate);max-width:48ch}
.rows .spec{margin-top:14px;font:13px var(--fm);color:var(--graphite)}

/* configurator */
.build{background:var(--white);border-block:1px solid var(--line)}
.build .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:48px}
@media (max-width:960px){.build .grid{grid-template-columns:1fr}}
.build .stage{position:sticky;top:96px;border-radius:24px;background:var(--pearl);padding:clamp(12px,2vw,24px)}
@media (max-width:960px){.build .stage{position:relative;top:0}}
.build .stage .viewer{aspect-ratio:4/3}
.build .stage .picked{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font:13px var(--fm);color:var(--slate)}
.build .stage .picked b{color:var(--graphite);font-weight:500}
.step{border:0;margin:0;padding:0 0 28px;min-width:0}
.step+.step{box-shadow:inset 0 1px 0 var(--line);padding-top:28px}
.step legend{font:12px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding:0;margin-bottom:16px}
.bodies{display:grid;gap:10px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt .card{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 18px;border:1.5px solid var(--mist);border-radius:14px;background:var(--white);transition:border-color .3s,background .3s,box-shadow .3s}
.opt:hover .card{border-color:#C9CCD5}
.opt input:checked+.card{border-color:var(--graphite);background:var(--mist-2)}
.opt input:focus-visible+.card{outline:2px solid var(--graphite);outline-offset:3px}
.opt b{font:700 14px/1.3 var(--fd);letter-spacing:.1em;text-transform:uppercase}
.opt .price{font:500 15px var(--fm);font-variant-numeric:tabular-nums}
.opt small{grid-column:1/-1;color:var(--slate);font-size:14px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{position:relative;cursor:pointer}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sw span{display:block;width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(27,29,36,.15);transition:transform .3s var(--ease)}
.sw input:checked+span{box-shadow:inset 0 0 0 1px rgba(27,29,36,.15),0 0 0 3px var(--white),0 0 0 4.5px var(--graphite)}
.sw input:focus-visible+span{outline:2px solid var(--graphite);outline-offset:6px}
.sw:hover span{transform:scale(1.06)}
.sw-name{margin-top:12px;font:13px var(--fm);color:var(--slate)}
.about-body p{color:var(--slate);font-size:15px}
.about-body dl{margin:16px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.about-body dt{font:11px/1.4 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.about-body dd{margin:2px 0 0;font:14px var(--fm);font-variant-numeric:tabular-nums}
.field{display:flex;gap:10px;flex-wrap:wrap}
.field input{flex:1 1 220px;min-width:0;font:16px var(--fb);color:var(--graphite);background:var(--pearl);border:1.5px solid var(--mist);border-radius:12px;padding:15px 16px;transition:border-color .3s,background .3s}
.field input::placeholder{color:var(--ph)}
.field input:hover{border-color:#C9CCD5}
.field input:focus{outline:none;border-color:var(--graphite);background:var(--white)}
.field input[aria-invalid="true"]{border-color:var(--err)}
.lbl{font-size:14px;color:var(--slate);display:block;margin-bottom:8px}
/* honeypot: clipped, not pushed off-screen (a big negative offset makes RTL pages scroll sideways) */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.msg{margin-top:10px;font-size:14px}
.msg.err{color:var(--err)}
.fine{margin-top:12px;font-size:13px;color:var(--slate)}
.done{border-radius:16px;background:var(--pearl);padding:22px;display:grid;gap:6px}
.done h3{font-size:18px;letter-spacing:.08em}
.done p{color:var(--slate)}

/* specs teaser + open */
.teaser .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
@media (max-width:860px){.teaser .wrap{grid-template-columns:1fr}}
.teaser ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.teaser li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.teaser li span:last-child{font:14px var(--fm);text-align:end;font-variant-numeric:tabular-nums}
.open .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between;padding:clamp(28px,4vw,48px);border-radius:24px;background:var(--mist)}
.open p{max-width:58ch}
.open small{display:block;margin-top:8px;font:12px var(--fm);color:var(--slate)}

/* faq */
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px)}
@media (max-width:860px){.faq .wrap{grid-template-columns:1fr}}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:500 18px/1.4 var(--fb)}
summary::-webkit-details-marker{display:none}
summary i{flex:none;position:relative;width:14px;height:14px}
summary i::before,summary i::after{content:"";position:absolute;left:0;right:0;top:6px;height:1.5px;background:var(--graphite)}
summary i::after{transform:rotate(90deg);transition:transform .5s var(--ease)}
details[open] summary i::after{transform:rotate(0)}
details p{color:var(--slate);padding:0 0 24px;padding-inline-end:32px;max-width:62ch}

/* long-form pages: specs, privacy, terms */
/* the thin-film field also drifts behind every page header, a little quieter than on the home hero */
.page-head,.lost-main{position:relative;isolation:isolate;overflow:hidden}
.film.soft{opacity:calc(var(--film-o) * .8)}
.page-head{padding-block:clamp(48px,8vw,112px) clamp(32px,5vw,56px);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(26px,4.2vw,56px);line-height:1.1;letter-spacing:.03em;max-width:18ch}
.page-head p{margin-top:18px;max-width:62ch;color:var(--slate);font-size:clamp(17px,1.3vw,19px)}
.page-head .meta{margin-top:14px;font:12px var(--fm);color:var(--slate)}
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:14px;color:var(--slate)}
.tag{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 6px;border-radius:6px;font:500 11px/1 var(--fm);vertical-align:middle;margin-inline-start:8px}
.tag.v{background:var(--tag-v);color:var(--tag-v-fg)}
.tag.e{background:var(--tag-e);color:var(--tag-e-fg)}
.tag.t{background:var(--tag-t);color:var(--tag-t-fg)}
.legend .tag{margin:0;margin-inline-end:8px}
.sheet-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,5vw,72px);padding-block:clamp(40px,6vw,80px)}
@media (max-width:860px){.sheet-layout{grid-template-columns:1fr}.toc{display:none}}
.toc{position:sticky;top:96px;align-self:start;font-size:14px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.toc a{color:var(--slate);text-decoration:none}
.toc a:hover{color:var(--graphite)}
.sheet section{padding-block:8px 48px}
.sheet h2{font-size:clamp(18px,2vw,24px);letter-spacing:.08em;margin-bottom:18px}
.sheet h3{font:500 13px/1 var(--fm);letter-spacing:.1em;color:var(--slate);margin:28px 0 8px}
.sheet dl{margin:0;border-top:1px solid var(--line)}
.sheet dl div{display:grid;grid-template-columns:minmax(140px,.9fr) 1.1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
@media (max-width:520px){.sheet dl div{grid-template-columns:1fr;gap:2px}}
.sheet dt{color:var(--slate);font-size:15px}
.sheet dd{margin:0;font:14px/1.6 var(--fm);font-variant-numeric:tabular-nums}
.sheet .note{margin-top:14px;font-size:15px;color:var(--slate);max-width:66ch}
.sheet ol.open-list{margin:0;padding-inline-start:22px;display:grid;gap:10px;color:var(--graphite);max-width:66ch}
.prose{padding-block:clamp(40px,6vw,80px);max-width:720px}
.prose h2{font-size:clamp(16px,1.6vw,20px);letter-spacing:.08em;margin:44px 0 14px}
.prose p,.prose li{color:var(--graphite);opacity:.88;max-width:66ch}
.prose p+p{margin-top:14px}
.prose ul{padding-inline-start:22px;display:grid;gap:8px;margin:14px 0}

/* footer */
footer{border-top:1px solid var(--line);padding-block:56px calc(40px + env(safe-area-inset-bottom,0px))}
footer .top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:960px){footer .top{grid-template-columns:1fr 1fr}}
@media (max-width:420px){footer .top{grid-template-columns:1fr}}
footer .fh{margin:0 0 12px;font:500 11px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;overflow-wrap:anywhere}
footer a{text-decoration:none;font-size:14px;color:var(--graphite)}
footer a:hover{text-decoration:underline}
footer .tagline{margin-top:14px;color:var(--slate);font-size:14px;max-width:30ch}
footer .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font:12px var(--fm);color:var(--slate)}

/* 404 */
.lost{min-height:60vh;display:grid;align-content:center;gap:18px;padding-block:80px}
.lost h1{font-size:clamp(28px,5vw,64px);letter-spacing:.03em}
.lost p{color:var(--slate);max-width:48ch}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film{animation:none}.btn,summary i::after,.sw span,.opt .card{transition:none}}

/* case colours (from the configurator data; also used by the 3D viewer) */
.c-white{--c:#EDEDEA}.c-copper{--c:#A9662F}.c-bone{--c:#DED7C9}.c-slate{--c:#5B5B63}.c-forest{--c:#2A5145}.c-oxblood{--c:#6E2C3A}.c-midnight{--c:#1F2230}.c-velvet{--c:#58212E}.c-pink{--c:#E9AFC8}
.teaser .cta{margin-top:28px}
.lost .row{display:flex;flex-wrap:wrap;gap:12px}
.done:focus{outline:none}

/* language + theme switches (in the nav list; on phones they sit in the menu) */
.prefs{display:flex;align-items:center;gap:8px}
.pref{display:inline-grid;place-items:center;min-width:40px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--graphite);font:500 14px/1 var(--fb);cursor:pointer;transition:border-color .2s,background .2s}
.pref:hover{border-color:var(--line-2);background:var(--mist-2)}
.pref svg{width:18px;height:18px}
.pref[lang="ar"]{font-family:"Noto Kufi Arabic",var(--fb);font-size:15px}
.pref .sun,:root[data-theme="dark"] .pref .moon{display:none}
:root[data-theme="dark"] .pref .sun{display:block}
@media (max-width:880px){.prefs{padding-top:16px;gap:10px}.pref{height:44px;min-width:56px}}

/* logo: dark ink on light, pearl ink on dark */
.brand .d,:root[data-theme="dark"] .brand .l{display:none}
:root[data-theme="dark"] .brand .d{display:block}

/* direction: arrows point the reading way; Arabic-only notes */
:root[dir="rtl"] .btn svg.arrow{transform:scaleX(-1)}
.ar-only{display:none}
:root[lang="ar"] .ar-only{display:block}

/* while Arabic is applied on load, avoid a flash of English (falls back to visible after 1s) */
:root.i18n-pending body{animation:i18n-reveal 0s 1s both}
@keyframes i18n-reveal{from{visibility:hidden}to{visibility:visible}}