/* Shared by every page: light/dark tokens, the header, buttons, lists, ornaments and the footer.
   v1.2: editorial and light. Warm paper, serif type, gold accents, star and Sadu ornaments. */

/* --bg is a plain hex on purpose: Safari tints its bars from the page, and each page's head
   script copies the same value into theme-color. Change it here and in the head scripts. */
:root,[data-mode=light]{color-scheme:light;
  --bg:#f8f6f0;--ink:#1f1d18;--ink-2:#5f5a4f;--ink-3:#938c7d;
  --line:rgba(31,29,24,.12);--surface:#fffdf8;--surface-2:rgba(31,29,24,.045);
  --accent:#8f6b12;--gold:#b8912f;--on-accent:#fff;--ok:#2f8a4c;--warn:#c8402f}
[data-mode=dark]{color-scheme:dark;
  --bg:#141311;--ink:#ece8de;--ink-2:#aaa395;--ink-3:#787266;
  --line:rgba(236,232,222,.12);--surface:#1c1b18;--surface-2:rgba(236,232,222,.06);
  --accent:#d4ae5a;--gold:#c9a24c;--on-accent:#141311;--ok:#5cc282;--warn:#f0705f}
/* The old glass names, kept flat so every page built on them goes quiet too */
:root{--glass-top:var(--surface);--glass-bottom:var(--surface);--glass-inset:var(--surface-2);
  --key-top:var(--surface);--key-bottom:var(--surface);--rim-hi:transparent;--rim-lo:transparent;--sheen:transparent;--shadow:none;
  --text:var(--ink);--muted:var(--ink-2);
  --r-xl:14px;--r-lg:12px;--r:10px;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.22,1,.36,1);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:ui-monospace,"SF Mono","DM Mono",Menlo,monospace;
  --gut:max(20px,env(safe-area-inset-left),env(safe-area-inset-right));--w:min(1040px,100% - 2*var(--gut))}
/* Reading pages (home, lists) use a narrower column */
.read{--w:min(760px,100% - 2*var(--gut))}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--ink);background:var(--bg);
  font:400 17px/1.6 var(--serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
main{flex:1}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
/* Controls stay in the sans face; reading text is serif */
input,select,textarea{font-family:var(--sans)}
a,button,input,label,select{touch-action:manipulation}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
p,li{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:color-mix(in srgb,var(--accent) 25%,transparent)}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:var(--gut);top:-4rem;background:var(--ink);color:var(--bg);padding:.5rem .9rem;border-radius:8px;z-index:50}
.skip:focus{top:calc(env(safe-area-inset-top) + 1rem)}
/* Text links: underline that darkens on hover */
.u{text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .2s,color .2s}
.u:hover{text-decoration-color:currentColor}

/* ===== Arabic =====
   Pages hold both languages side by side; <html lang> (set before first paint) shows one. */
:root[lang=ar] [data-en],:root:not([lang=ar]) [data-ar]{display:none!important}
:root[lang=ar]{--sans:-apple-system,BlinkMacSystemFont,"SF Arabic","IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;--serif:"Amiri","Noto Naskh Arabic",serif}
/* Amiri sits small next to Latin faces, so Arabic reads a size up */
:root[lang=ar] body{font-size:19px}
/* Arabic has no italic, and its small print needs the extra size most */
:root[lang=ar] :is(.items .t,.facts,.app .by,.foot){font-size:16px;font-style:normal}
/* Arabic letters join up, so no letter spacing; and a little more room between lines */
:root[lang=ar] *{letter-spacing:0!important}
:root[lang=ar] body{line-height:1.8}
:root[lang=ar] :is(h1,h2,h3){line-height:1.4}
/* Arrows point the way the page reads */
:root[dir=rtl] .arrow,:root[dir=rtl] .flip{scale:-1 1}
/* Math, code, numbers and chart text keep reading left to right */
:root[dir=rtl] :is(.mono,code,kbd){unicode-bidi:plaintext}
:root[dir=rtl] .ltr{direction:ltr;unicode-bidi:isolate}
:root[dir=rtl] svg{direction:ltr}
:root[dir=rtl] .readout{text-align:end}

/* ===== Panels =====
   .glass is the old name: now a plain card with a hairline border. */
.glass{position:relative;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.lg-filters{display:none}

/* ===== Header ===== */
.nav{display:flex;align-items:center;gap:4px;width:var(--w);margin:0 auto;padding:22px 0 0}
.brand{display:flex;align-items:center;gap:10px;margin-inline-end:auto;text-decoration:none;font-size:18px;font-weight:500;border-radius:8px}
.face{display:block;width:28px;height:28px;border-radius:50%;background:#1b1f2c}
.nav .links{display:flex;gap:2px}
.nav .links a{padding:6px 10px;border-radius:8px;font-size:16px;color:var(--ink-2);text-decoration:none;transition:color .2s}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--ink)}
.round{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;border:0;padding:0;color:var(--ink-2);background:none;transition:color .2s,background-color .2s}
.round:hover{color:var(--ink);background:var(--surface-2)}
.round svg{width:17px;height:17px}
.lang{font:500 15px/1 var(--sans)}
.lang:lang(en){font-size:12.5px;letter-spacing:.03em}
@media (max-width:480px){.brand>span{display:none}.nav .links a{padding:6px 8px}}

/* Light/dark button: a sun by day, a crescent by night (site.js draws the icon) */
.mode svg{overflow:visible}
.mode .sun,.mode .moon{transform-box:view-box;transform-origin:12px 12px;transition:transform .5s var(--ease),opacity .3s}
.mode .moon{opacity:0;transform:rotate(-70deg) scale(.6)}
[data-mode=dark] .mode .sun{opacity:0;transform:rotate(70deg) scale(.6)}
[data-mode=dark] .mode .moon{opacity:1;transform:none}

/* ===== Buttons ===== */
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 15px;border:0;border-radius:8px;text-decoration:none;
  font:500 15.5px var(--serif);color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color .2s,box-shadow .2s}
.btn:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent)}
.btn.pri{color:var(--bg);background:var(--ink);box-shadow:none}
.btn.pri:hover{background:color-mix(in srgb,var(--ink) 85%,var(--bg))}
.btn:active{opacity:.8}

/* ===== Page layout ===== */
.page{width:var(--w);margin:0 auto;padding:56px 0 72px}
.page-head{margin-bottom:32px}
.page-head h1{font-size:clamp(2.1rem,1.8rem + 1.4vw,2.8rem);font-weight:500;letter-spacing:-.015em}
.page-head p{color:var(--ink-2);margin-top:8px;font-size:1.1rem;max-width:52ch}
.panel-pad{padding:24px}
@media (max-width:560px){.panel-pad{padding:18px}}
.label{font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.cap{margin-top:12px;font-size:14px;color:var(--ink-2)}

/* App icons: smooth line marks, one tinted part, no tile */
.mark{width:48px;height:48px;padding:8px;border-radius:12px;flex:none;display:block;background:none;box-shadow:inset 0 0 0 1px var(--line);
  fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mark .fill{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.mark .dot{stroke-width:3.2}
.arrow{display:inline-block;transition:transform .25s var(--ease)}

/* ===== Rows: a label column on the start side, items on the other ===== */
.part{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:8px 24px;padding:28px 0}
.part>h2{font-size:19px;font-weight:500;color:var(--ink);letter-spacing:0;line-height:1.5}
.part>h2 a{text-decoration:none}
.part>h2 a:hover{color:var(--ink)}
.part .more{display:inline-block;margin-top:12px;font-size:14.5px;color:var(--ink-2)}
@media (max-width:600px){.part{grid-template-columns:minmax(0,1fr);gap:10px}}
.prose p+p{margin-top:12px}
.prose .quiet{color:var(--ink-2)}
/* A list of things: name and a short line on one side, a tag on the other */
.items{list-style:none;padding:0;margin:-8px 0}
.items a{display:flex;align-items:baseline;gap:6px 16px;padding:8px 0;text-decoration:none}
.items b{font-weight:500;font-size:18px}
.items span.d{color:var(--ink-2)}
.items .t{margin-inline-start:auto;flex:none;font-size:14.5px;font-style:italic;color:var(--ink-3);font-variant-numeric:tabular-nums}
.items a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.items .t.new{color:var(--accent)}
@media (max-width:600px){.items a{flex-wrap:wrap}.items span.d{flex-basis:100%;order:3;margin-top:-6px;font-size:15px}}

/* ===== Ornaments =====
   An eight-point star between fading gold rules between sections, and a Sadu diamond chain over the
   footer. Both are masks, so they take --gold. */
:root{--sadu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 5h9.5M18.5 5H28'/%3E%3Cpath d='M14 1.5L17.5 5 14 8.5 10.5 5z'/%3E%3C/svg%3E");--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='5.5' y='5.5' width='13' height='13'/%3E%3Crect x='5.5' y='5.5' width='13' height='13' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold)}
.orn::before,.orn::after{content:"";flex:0 1 96px;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent)}
.orn i{width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.page>.orn{margin:8px 0}

/* ===== Footer ===== */
.foot{position:relative;width:var(--w);margin:0 auto;padding:26px 0 calc(28px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  justify-content:space-between;font-size:15px;color:var(--ink-3)}
/* A Sadu chain (the diamonds of Bedouin weaving) on a hairline, fading out at both ends */
.foot::before{content:"";position:absolute;inset-inline:0;top:-5px;height:10px;background:var(--gold);opacity:.75;
  -webkit-mask:var(--sadu) center/28px 10px repeat-x,linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-composite:source-in;
          mask:var(--sadu) center/28px 10px repeat-x,linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect}
.foot a{color:var(--ink-2)}
.foot .btn{padding:6px 12px;font-size:14px}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;z-index:60;pointer-events:none;
  padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;background:var(--ink);color:var(--bg);transition:.3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Pages used to rise in; v1.2 just shows them */
.rise{animation:none}

::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ===== Calculator: activation plot ===== */
.plot-head{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-bottom:6px}
.plot-head h2{font-size:1.25rem;font-weight:600}
.plot-head p{color:var(--ink-2);font-size:15px;margin-top:4px}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:9px;background:var(--surface-2)}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--ink-2);transition:color .25s,background-color .25s,box-shadow .25s}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected=true],.seg button[aria-checked=true]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
#plot{width:100%;height:auto;display:block;touch-action:none;overflow:visible;margin-top:8px}
#plot .ax{stroke:var(--ink-3);stroke-width:1}
#plot .gl{stroke:var(--line);stroke-width:1}
#plot .tk{font:400 10px var(--mono);fill:var(--ink-3)}
#plot .area{fill:var(--accent);opacity:.1}
#plot .curve{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#plot .deriv{fill:none;stroke:var(--warn);stroke-width:1.8;stroke-dasharray:5 5;stroke-linecap:round}
#plot .cross{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 4}
#plot .pt{fill:var(--surface);stroke:var(--accent);stroke-width:2.2}
#plot .pt2{fill:var(--surface);stroke:var(--warn);stroke-width:2}
.plot-foot{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:6px}
.readout{font:400 14px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.readout b{font-weight:500;color:var(--accent)}
.readout i{font-style:normal;color:var(--warn)}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;user-select:none}
.toggle input{appearance:none;width:38px;height:22px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);position:relative;cursor:pointer;transition:background-color .25s}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .35s var(--spring)}
.toggle input:checked{background:var(--warn)}
.toggle input:checked::after{transform:translateX(16px)}


/* scene */
.scene .core{fill:var(--ink);stroke:none}
.scene .t{stroke:var(--line);stroke-width:6}
.scene .ring{stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.05);opacity:1}80%{transform:scale(1.03);opacity:1}100%{transform:scale(1.25);opacity:0}}
.scene .guide{stroke:var(--line)}
.scene .shield{stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;transform-origin:100px 65px;animation:spin 3.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.scene .spark{fill:var(--ink);stroke:none;transform-origin:100px 65px;transform-box:view-box;animation:inbound 2.4s linear infinite}
.scene .s1{--a:-20deg}.scene .s2{--a:140deg;animation-delay:-.8s}.scene .s3{--a:250deg;animation-delay:-1.6s}
@keyframes inbound{from{transform:rotate(var(--a)) translateX(78px)}to{transform:rotate(var(--a)) translateX(30px);opacity:0}}
.scene .cave{animation:cave 6s linear infinite}
@keyframes cave{to{transform:translateX(-150px)}}
.scene .comet{fill:var(--accent);stroke:none;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-16px)}}
.scene .word{stroke:none;font:600 9.5px var(--sans)}
.scene .chip{fill:var(--key-top);stroke:var(--line);stroke-width:1}
.scene .fall{animation:fall 3.6s linear infinite}
.scene .f2{animation-delay:-1.2s}.scene .f3{animation-delay:-2.4s}
@keyframes fall{from{transform:translateY(-40px)}to{transform:translateY(120px)}}
.scene .bad{fill:var(--warn)}
.scene .safe{fill:var(--ink)}
.scene .paddle{fill:var(--accent);stroke:none}
.scene .well{stroke:var(--line);stroke-width:2}
.scene .ledge{stroke:var(--ink-2);stroke-width:5}
.scene .diver{fill:var(--ink);stroke:none;animation:hover 1.6s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(7px)}}
.scene .shot{fill:var(--accent);stroke:none;animation:shoot 1.2s linear infinite}
.scene .sh2{animation-delay:-.4s}.scene .sh3{animation-delay:-.8s}
@keyframes shoot{from{transform:translateY(0)}to{transform:translateY(70px);opacity:0}}


/* ===== Arcade list: a small moving scene beside each game ===== */
.games{list-style:none;padding:0}
.gcard{display:flex;align-items:center;gap:20px;padding:14px 0;text-decoration:none;border-top:1px solid var(--line)}
.games li:first-child .gcard{border-top:0;padding-top:0}
.scene{width:132px;flex:none;aspect-ratio:200/130;border-radius:10px;overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.scene svg{width:100%;height:100%;display:block;fill:none;stroke:var(--ink);stroke-width:1.4;overflow:hidden}
.gmeta h2{font-size:1.1rem;font-weight:500}
.gmeta p{color:var(--ink-2);margin-top:2px}
.gmeta em{font-style:normal;font-weight:500;color:var(--accent);margin-inline-start:6px;font-size:12.5px;white-space:nowrap}
.gcard:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
@media (max-width:480px){.scene{width:96px}.gcard{gap:14px}}

/* ===== Applications ===== */
.app{padding:30px 0;border-top:1px solid var(--line)}
.app:first-of-type{border-top:0;padding-top:0}
.app-top{display:flex;align-items:center;gap:14px}
.app h2{font-size:1.35rem;font-weight:600}
.app h2 .sub{font-weight:400;color:var(--ink-3)}
.app p{color:var(--ink-2);margin-top:12px;max-width:62ch}
.app .by{font-size:14.5px;color:var(--ink-3);margin-top:8px}
.app .by b{color:var(--ink-2);font-weight:500}
.facts{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:10px;padding:0;list-style:none;font-size:14px;color:var(--ink-3)}
.facts li+li::before{content:"·";margin-inline:8px}
.app .btns{margin-top:16px}