:root{--khatam-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23e8a33d' stroke-opacity='.22' stroke-width='1.4'%3E%3Cpolygon points='100.0,4.0 128.1,32.1 167.9,32.1 167.9,71.9 196.0,100.0 167.9,128.1 167.9,167.9 128.1,167.9 100.0,196.0 71.9,167.9 32.1,167.9 32.1,128.1 4.0,100.0 32.1,71.9 32.1,32.1 71.9,32.1'/%3E%3Cpolygon points='100.0,30.0 120.5,50.5 149.5,50.5 149.5,79.5 170.0,100.0 149.5,120.5 149.5,149.5 120.5,149.5 100.0,170.0 79.5,149.5 50.5,149.5 50.5,120.5 30.0,100.0 50.5,79.5 50.5,50.5 79.5,50.5'/%3E%3Cpolygon points='100.0,56.0 112.9,68.9 131.1,68.9 131.1,87.1 144.0,100.0 131.1,112.9 131.1,131.1 112.9,131.1 100.0,144.0 87.1,131.1 68.9,131.1 68.9,112.9 56.0,100.0 68.9,87.1 68.9,68.9 87.1,68.9'/%3E%3Ccircle cx='100' cy='100' r='18'/%3E%3C/g%3E%3C/svg%3E");--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%2308474d'/%3E%3Cpolygon points='0.00,-24.00 7.03,-16.97 16.97,-16.97 16.97,-7.03 24.00,0.00 16.97,7.03 16.97,16.97 7.03,16.97 0.00,24.00 -7.03,16.97 -16.97,16.97 -16.97,7.03 -24.00,0.00 -16.97,-7.03 -16.97,-16.97 -7.03,-16.97' fill='%230b3a40' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='80.00,-24.00 87.03,-16.97 96.97,-16.97 96.97,-7.03 104.00,0.00 96.97,7.03 96.97,16.97 87.03,16.97 80.00,24.00 72.97,16.97 63.03,16.97 63.03,7.03 56.00,0.00 63.03,-7.03 63.03,-16.97 72.97,-16.97' fill='%230b3a40' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='0.00,56.00 7.03,63.03 16.97,63.03 16.97,72.97 24.00,80.00 16.97,87.03 16.97,96.97 7.03,96.97 0.00,104.00 -7.03,96.97 -16.97,96.97 -16.97,87.03 -24.00,80.00 -16.97,72.97 -16.97,63.03 -7.03,63.03' fill='%230b3a40' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='80.00,56.00 87.03,63.03 96.97,63.03 96.97,72.97 104.00,80.00 96.97,87.03 96.97,96.97 87.03,96.97 80.00,104.00 72.97,96.97 63.03,96.97 63.03,87.03 56.00,80.00 63.03,72.97 63.03,63.03 72.97,63.03' fill='%230b3a40' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='40.00,16.00 47.03,23.03 56.97,23.03 56.97,32.97 64.00,40.00 56.97,47.03 56.97,56.97 47.03,56.97 40.00,64.00 32.97,56.97 23.03,56.97 23.03,47.03 16.00,40.00 23.03,32.97 23.03,23.03 32.97,23.03' fill='%230c5c63' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='48.31,43.44 43.44,48.31 36.56,48.31 31.69,43.44 31.69,36.56 36.56,31.69 43.44,31.69 48.31,36.56' fill='%23e8a33d' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='8.31,3.44 3.44,8.31 -3.44,8.31 -8.31,3.44 -8.31,-3.44 -3.44,-8.31 3.44,-8.31 8.31,-3.44' fill='%23f7f1e6' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='88.31,3.44 83.44,8.31 76.56,8.31 71.69,3.44 71.69,-3.44 76.56,-8.31 83.44,-8.31 88.31,-3.44' fill='%23f7f1e6' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='8.31,83.44 3.44,88.31 -3.44,88.31 -8.31,83.44 -8.31,76.56 -3.44,71.69 3.44,71.69 8.31,76.56' fill='%23f7f1e6' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='88.31,83.44 83.44,88.31 76.56,88.31 71.69,83.44 71.69,76.56 76.56,71.69 83.44,71.69 88.31,76.56' fill='%23f7f1e6' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='40,-9 49,0 40,9 31,0' fill='%23c4553a' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='0,31 9,40 0,49 -9,40' fill='%23c4553a' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='80,31 89,40 80,49 71,40' fill='%23c4553a' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpolygon points='40,71 49,80 40,89 31,80' fill='%23c4553a' stroke='%23f7f1e6' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");--tilef:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23e8a33d' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpolygon points='40.00,16.00 47.03,23.03 56.97,23.03 56.97,32.97 64.00,40.00 56.97,47.03 56.97,56.97 47.03,56.97 40.00,64.00 32.97,56.97 23.03,56.97 23.03,47.03 16.00,40.00 23.03,32.97 23.03,23.03 32.97,23.03'/%3E%3Cpolygon points='0.00,-24.00 7.03,-16.97 16.97,-16.97 16.97,-7.03 24.00,0.00 16.97,7.03 16.97,16.97 7.03,16.97 0.00,24.00 -7.03,16.97 -16.97,16.97 -16.97,7.03 -24.00,0.00 -16.97,-7.03 -16.97,-16.97 -7.03,-16.97'/%3E%3Cpolygon points='80.00,-24.00 87.03,-16.97 96.97,-16.97 96.97,-7.03 104.00,0.00 96.97,7.03 96.97,16.97 87.03,16.97 80.00,24.00 72.97,16.97 63.03,16.97 63.03,7.03 56.00,0.00 63.03,-7.03 63.03,-16.97 72.97,-16.97'/%3E%3Cpolygon points='0.00,56.00 7.03,63.03 16.97,63.03 16.97,72.97 24.00,80.00 16.97,87.03 16.97,96.97 7.03,96.97 0.00,104.00 -7.03,96.97 -16.97,96.97 -16.97,87.03 -24.00,80.00 -16.97,72.97 -16.97,63.03 -7.03,63.03'/%3E%3Cpolygon points='80.00,56.00 87.03,63.03 96.97,63.03 96.97,72.97 104.00,80.00 96.97,87.03 96.97,96.97 87.03,96.97 80.00,104.00 72.97,96.97 63.03,96.97 63.03,87.03 56.00,80.00 63.03,72.97 63.03,63.03 72.97,63.03'/%3E%3C/g%3E%3C/svg%3E");--frieze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' viewBox='0 0 64 16'%3E%3Crect width='64' height='16' fill='%2308474d'/%3E%3Cpolygon points='8,1 15,8 8,15 1,8' fill='%230c5c63' stroke='%23f7f1e6' stroke-width='1.2'/%3E%3Cpolygon points='24,1 31,8 24,15 17,8' fill='%23e8a33d' stroke='%23f7f1e6' stroke-width='1.2'/%3E%3Cpolygon points='40,1 47,8 40,15 33,8' fill='%230b3a40' stroke='%23f7f1e6' stroke-width='1.2'/%3E%3Cpolygon points='56,1 63,8 56,15 49,8' fill='%23c4553a' stroke='%23f7f1e6' stroke-width='1.2'/%3E%3C/svg%3E");--khatam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='20.00,1.00 25.56,6.56 33.44,6.56 33.44,14.44 39.00,20.00 33.44,25.56 33.44,33.44 25.56,33.44 20.00,39.00 14.44,33.44 6.56,33.44 6.56,25.56 1.00,20.00 6.56,14.44 6.56,6.56 14.44,6.56' fill='%23e8a33d'/%3E%3Cpolygon points='25.54,22.30 22.30,25.54 17.70,25.54 14.46,22.30 14.46,17.70 17.70,14.46 22.30,14.46 25.54,17.70' fill='%230c5c63'/%3E%3C/svg%3E");--clipstar:polygon(50.0% 0.0%, 64.6% 14.7%, 85.4% 14.7%, 85.4% 35.4%, 100.0% 50.0%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50.0% 100.0%, 35.4% 85.4%, 14.7% 85.4%, 14.7% 64.6%, 0.0% 50.0%, 14.7% 35.4%, 14.7% 14.7%, 35.4% 14.7%)}
/* Hasibat — «Zellige»: Moroccan zellige tilework. Style only, loaded after style.css. */
:root{--bg:#f7f1e6;--surface:#fffdf8;--surface2:#fbf6ec;--ink:#1d2a2c;--muted:#66706a;--line:#e8dcc6;
  --accent:#0c5c63;--accent-2:#08474d;--accent-ink:#fff;--accent-soft:#dcefee;--saffron:#e8a33d;--terra:#c4553a;--night:#0b3a40;
  --radius:16px;--shadow:0 1px 0 #e8dcc6,0 12px 28px -18px rgb(60 40 10/.35)}
html,body{overflow-x:clip}
body{background:var(--bg) var(--tilef) 0 0/80px}

/* Header + tile frieze */
.top{background:var(--night);border-bottom:3px solid var(--saffron);box-shadow:none}
.brand,.links a,.top a,.top button,.top summary,.top .menu>*{color:#f7f1e6}
.brand{font-weight:800}
.brand .ic{color:var(--saffron)}
.lang,.langs a{background:transparent;border:1.5px solid rgb(232 163 61/.6)!important;color:#f7f1e6}

/* Hero: zellige mosaic under a teal veil, frieze at the bottom */
.hero{position:relative;isolation:isolate;padding:84px 0 62px;color:#fff}
.hero::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;
  background:radial-gradient(55% 90% at 50% 45%,#13626a,var(--night) 75%)}
.hero h1{color:#fff;font-weight:800;font-size:clamp(1.9rem,5vw,3rem);text-shadow:0 2px 12px rgb(0 0 0/.35)}
.hero h1::before{content:"";display:block;width:46px;height:46px;margin:0 auto 10px;background:var(--khatam) center/contain no-repeat;filter:drop-shadow(0 3px 8px rgb(0 0 0/.35))}
.hero p{color:#d9ebe8}
.search{border:2px solid var(--saffron);border-radius:999px;box-shadow:0 14px 30px -14px rgb(0 0 0/.6);padding:5px 20px}
.search:focus-within{border-color:#fff;box-shadow:0 0 0 5px rgb(232 163 61/.35)}
.chip{background:rgb(11 58 64/.65);border:1.5px solid rgb(232 163 61/.55);color:#f7f1e6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:background .15s}
.chip:hover{background:var(--saffron);border-color:var(--saffron);color:var(--night)}
.chip .ic{color:var(--saffron)}.chip:hover .ic{color:var(--night)}

/* Section titles: khatam star + saffron rule */
.cat-h{border-bottom:2px dotted rgb(232 163 61/.55);margin-bottom:14px}
.cat-h h2{font-weight:800;font-size:1.35rem;color:var(--night);display:flex;align-items:center;gap:10px}
.cat-h h2::before{content:"";width:24px;height:24px;flex:none;background:var(--khatam) center/contain no-repeat}
.cat-h a{color:var(--terra);font-weight:700}

/* Cards: tile corner + star icon */
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.card::before{content:"";position:absolute;inset-inline-end:-30px;bottom:-30px;width:64px;height:64px;background:var(--khatam) center/contain no-repeat;opacity:.22;transition:opacity .2s,transform .3s}
.card:hover{transform:translateY(-3px);border-color:var(--saffron);box-shadow:0 18px 32px -18px rgb(60 40 10/.45)}
.card:hover::before{opacity:.75;transform:rotate(22.5deg)}
.card b{font-weight:700;color:var(--night)}
.cic{width:50px;height:50px;border-radius:0;background:var(--cc);color:#fff;clip-path:var(--clipstar)}
.cic .ic{width:20px;height:20px}
.cic.big{width:70px;height:70px}

/* Buttons: Moroccan horseshoe-arch top */
.btn{background:var(--accent);border-radius:999px 999px 12px 12px;box-shadow:inset 0 -3px 0 var(--saffron)}
.btn:hover{background:var(--terra)}
.btn.ghost{background:var(--surface);color:var(--night);border:1.5px solid var(--saffron);box-shadow:none}
.btn.sm{border-radius:10px}

/* Calculator pages: frieze on top of panels, tile star in the result corner */
.calc .panel{border:1px solid var(--line);box-shadow:var(--shadow)}
.calc .panel:not(.out){border-top:4px solid var(--accent)}
.calc .out{border-top:4px solid var(--saffron)}
.calc .panel:not(.out){position:relative;overflow:hidden}
.crumbs{padding-top:28px}
.calc .out::after{content:"";position:absolute;inset-inline-start:6px;top:14px;width:44px;height:44px;background:var(--khatam) center/contain no-repeat;opacity:.25;pointer-events:none}
.calc .out{background:var(--surface)}
.panel>h2,.panel>h3{color:var(--night);font-weight:800;display:flex;align-items:center;gap:8px}
.panel>h2::before,.panel>h3::before{content:"";width:18px;height:18px;flex:none;background:var(--khatam) center/contain no-repeat}
.inp{background:var(--surface2);border:1.5px solid var(--line);border-radius:12px}
.inp:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgb(12 92 99/.12)}
.seg{background:var(--surface2);border-color:var(--line)}
.seg button[aria-pressed=true]{background:var(--night);color:#fff;box-shadow:inset 0 -3px 0 var(--saffron)}
.crumbs a:hover{color:var(--terra)}

/* Footer: mosaic band */
.foot{position:relative;background:var(--night);color:#cfe3e1;border-top:3px solid var(--saffron)}
.foot a,.foot p{color:#cfe3e1}.foot h3,.foot .fh{color:var(--saffron)}
@media (prefers-color-scheme:dark){:root{--bg:#0e1d20;--surface:#132a2e;--surface2:#173236;--ink:#eef3ef;--muted:#a3b3ad;--line:#244247}.card b,.cat-h h2,.panel>h2,.panel>h3{color:#f7f1e6}}

/* ---------- Touches: light, quiet motion and details ---------- */
::selection{background:rgb(232 163 61/.35);color:inherit}
html{scrollbar-color:var(--accent) var(--bg)}
/* Hero: big faint outlined stars on both sides + a saffron halo behind the emblem */
.hero h1{position:relative}
.hero::before{background:
  radial-gradient(closest-side,rgb(232 163 61/.16),transparent) 50% 70px/340px 340px no-repeat,
  var(--khatam-o) calc(50% - min(46vw,620px)) 40%/min(34vw,380px) no-repeat,
  var(--khatam-o) calc(50% + min(46vw,620px)) 70%/min(26vw,300px) no-repeat,
  radial-gradient(60% 120% at 50% 0,#13626a,var(--night) 75%)}
.hero h1::before{animation:hs-spin 40s linear infinite}
@keyframes hs-spin{to{transform:rotate(360deg)}}
.hero p{letter-spacing:.01em}
.search{transition:box-shadow .25s,transform .25s}
.search:focus-within{transform:translateY(-1px)}
.chip{transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgb(232 163 61/.7)}
/* Section star turns a little when the section is hovered */
.cat-h h2::before{transition:transform .5s}
section:hover>.cat-h h2::before,.cat-h:hover h2::before{transform:rotate(45deg)}
/* Cards rise in gently, one after another */
.card{animation:hs-rise .5s cubic-bezier(.2,.7,.2,1) both}
.grid>.card:nth-child(2),.cards>.card:nth-child(2){animation-delay:.04s}
.grid>.card:nth-child(3),.cards>.card:nth-child(3){animation-delay:.08s}
.grid>.card:nth-child(4),.cards>.card:nth-child(4){animation-delay:.12s}
.grid>.card:nth-child(n+5),.cards>.card:nth-child(n+5){animation-delay:.16s}
@keyframes hs-rise{from{opacity:0;transform:translateY(10px)}}
.cic{transition:transform .35s}
.card:hover .cic{transform:rotate(22.5deg) scale(1.06)}
.card:hover b{color:var(--accent)}
/* Buttons: a soft light sweep on hover */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255/.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn:hover::after{transform:translateX(120%)}
/* Result panel: saffron glow and a soft pulse of the star when a result is shown */
.calc .out{box-shadow:0 0 0 1px var(--line),0 16px 34px -20px rgb(232 163 61/.55)}
.calc .out::after{animation:hs-spin 60s linear infinite}
/* Text links in content: underline drawn from the side */
.content a:not(.btn):not(.card){text-decoration:none;background:linear-gradient(var(--saffron),var(--saffron)) 100% 100%/0 2px no-repeat;transition:background-size .3s}
.content a:not(.btn):not(.card):hover{background-size:100% 2px;background-position:0 100%}
/* Inputs: label turns teal while typing */
.fld:focus-within>label{color:var(--accent)}
.inp input::placeholder{color:#a9a294}
@media (prefers-reduced-motion:reduce){.hero h1::before,.calc .out::after,.card{animation:none}.btn::after{display:none}}
.dlc{background:var(--surface);border-color:var(--line);border-radius:18px}
.dlc:hover{border-color:var(--saffron);box-shadow:0 12px 24px -14px rgb(232 163 61/.6)}
/* القوائم المنسدلة داخل الرأس: نص داكن على خلفية فاتحة */
.top .menu-panel,.top .menu-panel a,.top .menu-panel b{color:var(--ink)}
.top .menu-panel small{color:var(--muted)}
.top .menu-panel a:hover{background:var(--surface2);color:var(--accent)}