/* Layout: one continuous 3D world of the Tuwaiq escarpment sits fixed behind the page. Scrolling flies the camera north along the cliff, and every chapter is a different hour over it: the real sky now, dawn, the crescent night, Eid fireworks, national lights, golden hour, maghrib, moonrise, Suhail, the full moon, the 2027 eclipse, the Milky Way. Chapters open with a title card over the open world, then dense, near-opaque panels carry the data on a 1180px column. */
:root{
  --ink:#050b0a;
  --night:#0a1513;
  --glass:rgba(8,16,14,.86);
  --glass-2:rgba(12,24,21,.92);
  --line:rgba(217,178,111,.16);
  --line-2:rgba(217,178,111,.34);
  --gold:#d9b26f;
  --gold-hi:#f5e0b0;
  --gold-lo:#9c7638;
  --text:#f1ebdd;
  --soft:#dcd5c5;
  --muted:#a9ad9f;
  --dim:#8d9689;
  --on-gold:#1b1307;
  --c-school:#6ec6d8;
  --c-rel:#e2bf7a;
  --c-nat:#5cc690;
  --c-pay:#ee9f6e;
  --c-astro:#a3b6e8;
  --c-season:#bccb7a;
  --c-fast:#d7a6e0;
  --f-display:"Reem Kufi","Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;
  --f-callig:"Amiri","Traditional Arabic","Times New Roman",serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --acc:245,224,176;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--gold-lo) var(--ink);-webkit-tap-highlight-color:rgba(217,178,111,.18)}
html{background-color:var(--ink)}
/* body is its own stacking context so the fixed 3D world (negative z-index) paints above body's background, not under it */
body{position:relative;z-index:0;background-color:#050b0a;color:#f1ebdd;background-color:var(--ink);background-image:radial-gradient(120% 80% at 70% 0%,#13261f 0%,var(--ink) 60%);background-attachment:fixed;color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;caret-color:var(--gold);overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
::selection{background:rgba(217,178,111,.4);color:#fff8e8}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--gold-lo);border-radius:99px;border:3px solid var(--ink)}
a{color:var(--gold-hi);text-underline-offset:3px;text-decoration-thickness:1px}
a,button,select,input,label{touch-action:manipulation}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:80;background:var(--gold);color:var(--on-gold);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}

/* world */
#world{position:fixed;inset:0;width:100vw;height:100lvh;z-index:-3;display:block;opacity:0;transition:opacity 1.6s var(--ease-out)}
#world.on{opacity:1}
.veil{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(130% 90% at 50% 40%,transparent 45%,rgba(3,7,6,.55) 100%),linear-gradient(to top,rgba(3,7,6,.55),transparent 35%)}
.grain{display:none;position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
html.nopost .grain{display:block}
.progress{position:fixed;top:env(safe-area-inset-top,0px);inset-inline:0;height:2px;z-index:70;background:linear-gradient(to left,rgb(var(--acc)),var(--gold));box-shadow:0 0 12px rgba(var(--acc),.8);transform-origin:right center;transform:scaleX(0)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:linear-gradient(to bottom,rgba(5,11,10,.72),rgba(5,11,10,0));transition:background .4s,transform .5s var(--ease-out)}
.top.hide{transform:translateY(calc(-100% - 4px))}
.top.solid{background:rgba(5,11,10,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);flex:none}
.brand svg{width:44px;height:44px;flex:none}
.brand b{font-family:var(--f-display);font-size:22px;font-weight:700;line-height:1;display:block}
.brand small{display:block;font-size:11px;letter-spacing:.28em;color:var(--gold);margin-top:5px;direction:ltr;text-align:right;line-height:1}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-inline-start:auto;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;color:var(--soft);text-decoration:none;font-size:14px;padding:10px 10px;border-radius:999px;transition:color .2s,background .2s}
.nav a:hover,.nav a:focus-visible,.nav a.on{color:var(--gold-hi);background:rgba(217,178,111,.12)}
.tools-bar{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:rgba(5,11,10,.4);color:var(--gold-hi);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,box-shadow .3s}
.icon-btn:hover{background:rgba(var(--acc),.14)}
.icon-btn svg{width:17px;height:17px}
.icon-btn[aria-pressed="true"]{background:rgba(var(--acc),.22);border-color:rgb(var(--acc));box-shadow:0 0 18px -4px rgba(var(--acc),.8)}
.clock{flex:none;display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:0 4px;font-variant-numeric:tabular-nums}
.clock b{font-family:var(--f-display);font-size:17px;color:var(--gold-hi);font-weight:500}
.clock span{font-size:12px;color:var(--muted)}
.ticker{overflow:hidden;border-top:1px solid var(--line);height:34px;display:flex;align-items:center;-webkit-mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;gap:44px;width:max-content;white-space:nowrap;animation:tick 90s linear infinite;font-size:13.5px;color:var(--soft);padding-inline:22px}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{display:inline-flex;align-items:center;gap:8px}
.ticker-track i{width:6px;height:6px;border-radius:50%;background:var(--cat);box-shadow:0 0 8px var(--cat)}
.ticker-track b{color:var(--gold-hi);font-weight:500}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* chapter rail */
.rail{direction:ltr;position:fixed;inset-inline-end:max(18px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.rail a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--muted);font-size:12.5px;height:22px}
.rail a i{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold);background:transparent;transition:transform .3s var(--ease-out),background .3s;flex:none}
.rail a span{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s var(--ease-out);white-space:nowrap;background:rgba(5,11,10,.8);padding:2px 8px;border-radius:6px}
.rail a:hover span,.rail a:focus-visible span,.rail a.on span{opacity:1;transform:none}
.rail a.on i{background:rgb(var(--acc));border-color:rgb(var(--acc));transform:scale(1.5);box-shadow:0 0 12px rgba(var(--acc),.8)}
@media (min-width:1300px){.rail{display:flex}}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.hero-in{padding-block:clamp(110px,16vh,180px) 18px;display:grid;gap:26px}
.hero-text{max-width:760px}
.hero h1{font-family:var(--f-display);font-size:clamp(76px,13vw,184px);line-height:.95;margin:0 0 20px;font-weight:700;letter-spacing:0;position:relative;display:inline-block;text-shadow:0 6px 60px rgba(0,0,0,.55);will-change:transform}
.hero h1 .sheen>span{color:var(--gold-hi)}
.sheen{position:relative;display:inline-block}
.sheen::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,247,225,.95) 50%,transparent 60%) no-repeat;background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
.sheen.go::after{animation:sheen 2.8s var(--ease-out) .6s both}
@keyframes sheen{from{background-position:100% 0}to{background-position:0% 0}}
.lede{font-size:clamp(16.5px,1.7vw,19.5px);color:var(--soft);max-width:58ch;margin:0;text-wrap:pretty;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.sky-cap{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;font-size:14.5px;color:var(--gold-hi);flex-wrap:wrap;background:rgba(5,11,10,.55);border:1px solid var(--line);padding:6px 14px;border-radius:999px}
.sky-cap svg{width:18px;height:18px;flex:none}
.live-dot{width:8px;height:8px;border-radius:50%;background:#7ee0a0;box-shadow:0 0 0 0 rgba(126,224,160,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(126,224,160,.55)}70%{box-shadow:0 0 0 10px rgba(126,224,160,0)}100%{box-shadow:0 0 0 0 rgba(126,224,160,0)}}
.hero-panels{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:16px}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-bottom:28px}
.cue{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:28px;color:var(--muted);font-size:13px}
.cue i{width:1px;height:46px;background:linear-gradient(to bottom,var(--gold),transparent);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,var(--gold-hi),transparent);animation:cue 2.2s var(--ease-out) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* surfaces */
.panel,.glass,.qc,.ec,.ev,.sc{position:relative;isolation:isolate}
.glass{background:rgba(6,13,11,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line-2);border-radius:20px;padding:22px 24px;min-width:0;box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.glass .k{font-size:13px;color:var(--gold);margin:0}
.today-h{font-family:var(--f-callig);font-size:clamp(30px,3.4vw,42px);line-height:1.35;margin:6px 0 2px;color:var(--gold-hi);font-weight:700}
.today-g{font-size:17px;margin:0;color:var(--text)}
.today-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);display:grid;gap:4px}
.next-t{font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);margin:4px 0 2px;font-weight:600;line-height:1.3}
.next-d{margin:0;font-size:14.5px;color:var(--muted)}
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.count div{background:linear-gradient(180deg,rgba(217,178,111,.1),rgba(217,178,111,.03));border:1px solid var(--line);border-radius:14px;padding:10px 4px 8px;text-align:center;overflow:hidden}
.count b{display:block;font-family:var(--f-display);font-size:clamp(28px,3.8vw,44px);line-height:1.15;color:var(--gold-hi);font-variant-numeric:tabular-nums;font-weight:600;text-shadow:0 0 24px rgba(245,224,176,.25)}
.count span{font-size:12px;color:var(--muted)}
.qc{display:block;text-decoration:none;color:inherit;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(6,13,11,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .25s var(--ease-out),transform .35s var(--ease-out);min-width:0}
.qc:hover{border-color:var(--line-2);transform:translateY(-3px)}
.qc .k{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;margin:0}
.qc .k i{width:8px;height:8px;border-radius:50%;background:var(--cat);flex:none;box-shadow:0 0 10px var(--cat)}
.qc .v{font-family:var(--f-display);font-size:27px;color:var(--gold-hi);margin:4px 0 0;line-height:1.3}
.qc .d{font-size:13.5px;color:var(--soft);margin:0}
/* pointer-tracking glow */
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(280px circle at var(--mx,50%) var(--my,-40%),rgba(var(--acc),.8),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none;z-index:2}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(var(--acc),.11),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:-1}
.glow:hover::before,.glow:hover::after{opacity:1}

/* chapters */
.chapter{position:relative;padding-bottom:clamp(56px,8vw,110px)}
.title-card{min-height:62vh;display:flex;flex-direction:column;justify-content:flex-end;padding-block:120px 40px;position:relative;overflow:clip}
.title-card[data-ghost]::after{content:attr(data-ghost);content:attr(data-ghost) / "";position:absolute;inset-inline-end:max(16px,env(safe-area-inset-left,0px));bottom:6px;font-family:var(--f-display);font-weight:700;font-size:clamp(120px,24vw,360px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(var(--acc),.2);pointer-events:none;z-index:-1;white-space:nowrap}
.title-card::before{content:"";position:absolute;inset:auto auto 0 0;width:min(760px,100%);height:100%;inset-inline-start:0;background:radial-gradient(70% 60% at 100% 85%,rgba(3,7,6,.55),transparent 70%);z-index:-1;pointer-events:none}
.title-card h2{font-family:var(--f-display);font-size:clamp(50px,8.4vw,124px);line-height:1;margin:0;font-weight:700;text-wrap:balance;text-shadow:0 6px 50px rgba(0,0,0,.6)}
.title-card h2 .w{display:inline-block;will-change:transform}
.title-card .sub{margin:18px 0 0;color:var(--soft);max-width:60ch;font-size:clamp(16px,1.5vw,18px);text-wrap:pretty;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.meta{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13.5px;color:var(--gold-hi);font-weight:500}
.meta span{display:inline-flex;align-items:center;gap:8px;background:rgba(5,11,10,.6);border:1px solid var(--line);padding:5px 12px;border-radius:999px}
.scene{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:var(--muted);letter-spacing:.02em}
.scene::before{content:"";width:40px;height:1px;background:linear-gradient(to left,var(--gold),transparent)}
.sec-body{display:grid;gap:22px}
.sec-head h2{font-family:var(--f-display);font-size:clamp(28px,3.6vw,40px);margin:0;line-height:1.2;font-weight:700}
.sec-head p{margin:4px 0 0;color:var(--muted);font-size:15px}
.panel{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:22px 24px;min-width:0;box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.panel h3{font-family:var(--f-display);font-size:21px;margin:0 0 10px;color:var(--gold-hi);font-weight:600;line-height:1.35}
.panel p{margin:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.note{font-size:14px;color:var(--muted);line-height:1.8}
.note strong{color:var(--soft);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 11px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;line-height:1.6}
.st-soon{color:var(--gold-hi)}
.st-now{color:var(--c-nat)}
.st-past{color:var(--dim)}
.exp{font-size:12px;color:var(--gold);border:1px dashed rgba(217,178,111,.55);border-radius:999px;padding:1px 8px;margin-inline-start:6px;vertical-align:2px;white-space:nowrap;font-weight:400}

/* film strip */
.strip-wrap{overflow:hidden;padding-block:6px}
.strip{display:flex;gap:16px;width:max-content}
.sc{flex:none;width:300px;min-height:300px;padding:22px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,28,24,.92),rgba(6,12,11,.94));display:flex;flex-direction:column;gap:6px;overflow:hidden}
.sc .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--cat);background:color-mix(in srgb,var(--cat) 12%,transparent);border:1px solid color-mix(in srgb,var(--cat) 36%,transparent)}
.sc .ic svg{width:24px;height:24px}
.sc .big{font-family:var(--f-display);font-size:84px;line-height:.95;color:var(--cat);font-weight:600;margin-top:12px;font-variant-numeric:tabular-nums}
.sc .mo{font-size:14px;color:var(--muted);margin-top:-4px}
.sc h4{font-family:var(--f-display);font-size:21px;margin:10px 0 0;font-weight:600;line-height:1.35}
.sc .h{font-family:var(--f-callig);color:var(--gold-hi);font-size:17px;margin:0}
.sc .ft{margin-top:auto;padding-top:10px}
.sc::after{content:"";position:absolute;inset:auto -30% -55% auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cat) 22%,transparent),transparent 70%);z-index:-1}

/* timeline */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;border:1px solid var(--line-2);background:rgba(5,11,10,.6);color:var(--soft);font:inherit;font-size:14px;min-height:44px;padding:6px 16px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{background:rgba(217,178,111,.1)}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600;box-shadow:0 0 24px -6px rgba(245,224,176,.7)}
.tl-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);cursor:pointer;min-height:44px}
.check input{accent-color:var(--gold);width:20px;height:20px}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tl-m{font-family:var(--f-display);font-size:18px;color:var(--gold);padding:14px 2px 2px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.tl-m small{font-family:var(--f-callig);font-size:16px;color:var(--muted)}
.ev{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:var(--glass)}
.ev .dt{text-align:center;border-inline-end:1px solid var(--line);padding-inline-end:16px}
.ev .dt b{display:block;font-family:var(--f-display);font-size:32px;line-height:1.05;color:var(--cat);font-weight:600}
.ev .dt span{font-size:12.5px;color:var(--muted)}
.ev h4{margin:0;font-size:16.5px;font-weight:600;line-height:1.5}
.ev .meta-l{font-size:13.5px;color:var(--muted);margin:2px 0 0}
.cat{font-size:12px;padding:1px 9px;border-radius:999px;color:var(--cat);background:color-mix(in srgb,var(--cat) 12%,transparent);border:1px solid color-mix(in srgb,var(--cat) 38%,transparent);margin-inline-start:8px;vertical-align:2px;white-space:nowrap;font-weight:500}
.ev.past{opacity:.72}
.more{justify-self:center;appearance:none;font:inherit;font-size:15px;color:var(--gold-hi);background:rgba(5,11,10,.6);border:1px solid var(--line-2);border-radius:999px;padding:10px 22px;cursor:pointer;min-height:44px}
.more:hover{background:rgba(217,178,111,.1)}

/* school */
.prog-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.prog-top b{font-family:var(--f-display);font-size:52px;color:var(--gold-hi);line-height:1;font-weight:600}
.prog{height:12px;border-radius:99px;background:rgba(217,178,111,.1);overflow:hidden;border:1px solid var(--line)}
.prog i{display:block;height:100%;background:linear-gradient(to left,var(--gold-hi),var(--gold) 60%,var(--gold-lo));border-radius:99px;box-shadow:0 0 18px rgba(245,224,176,.45);transform-origin:right center}
.prog-ends{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:8px;gap:12px}
.term .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.term .row:last-of-type{border-bottom:0}
.term .row span{color:var(--muted)}
.term .row b{font-weight:500;text-align:left}
.term .prog{height:6px;margin-top:12px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--glass-2)}
table{width:100%;border-collapse:collapse;min-width:680px;font-variant-numeric:tabular-nums}
th{font-weight:500;font-size:13px;color:var(--muted);text-align:right;padding:13px 18px;border-bottom:1px solid var(--line-2);background:rgba(217,178,111,.05);white-space:nowrap}
td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s}
tbody tr:hover td{background:rgba(217,178,111,.05)}
td .s{display:block;font-size:12.5px;color:var(--muted)}
td.t{font-weight:600}
tr.past td{color:var(--dim)}
tr.past td .s{color:var(--dim)}
tr.next td{background:rgba(217,178,111,.09)}
tr.next td.t{color:var(--gold-hi)}
tr.rmd td{background:rgba(226,191,122,.05)}
.tag{font-size:12px;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:0 6px;margin-inline-start:6px;white-space:nowrap;font-weight:400}
.wk-mark{color:var(--c-pay);font-weight:700;margin-inline-start:3px}

/* feature countdown */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:center;background:radial-gradient(120% 140% at 100% 0%,rgba(217,178,111,.16),transparent 55%),var(--glass-2);border-color:var(--line-2)}
.feature .k{font-size:13.5px;color:var(--gold);margin:0}
.feature h3{font-size:clamp(28px,3.2vw,38px);margin:4px 0 4px;color:var(--text)}
.feature .h{font-family:var(--f-callig);font-size:22px;color:var(--gold-hi);margin:0}
.feature .g{color:var(--muted);margin:0;font-size:15px}
.feature .count{margin-top:0}

/* event cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.ec{padding:20px 22px;border-radius:18px;border:1px solid var(--line);background:var(--glass);display:flex;flex-direction:column;gap:4px;min-width:0;transition:transform .35s var(--ease-out),border-color .25s}
.ec:hover{transform:translateY(-3px);border-color:var(--line-2)}
.ec .k{font-size:12.5px;color:var(--cat);margin:0;font-weight:500}
.ec h3{font-family:var(--f-display);font-size:22px;margin:2px 0 2px;font-weight:600;line-height:1.35;color:var(--text)}
.ec .h{font-family:var(--f-callig);font-size:19px;color:var(--gold-hi);margin:0;line-height:1.5}
.ec .g{font-size:14.5px;color:var(--soft);margin:0}
.ec .nt{font-size:13.5px;color:var(--muted);margin:6px 0 0;line-height:1.7}
.ec .ft{margin-top:auto;padding-top:12px}
.ec.past{opacity:.72}

/* ramadan strip */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.rd{border:1px solid var(--line);border-radius:12px;padding:8px 4px 7px;text-align:center;background:rgba(5,11,10,.6);position:relative;transition:transform .25s var(--ease-out),border-color .2s}
.rd:hover{transform:translateY(-2px);border-color:var(--line-2)}
.rd b{display:block;font-family:var(--f-display);font-size:22px;line-height:1.2;font-weight:600}
.rd span{display:block;font-size:12px;color:var(--muted);white-space:nowrap}
.rd.l10{border-color:rgba(226,191,122,.55);background:rgba(226,191,122,.1)}
.rd.l10 b{color:var(--gold-hi)}
.rd.fd{box-shadow:inset 0 -3px 0 var(--c-nat)}
.rd.sh{box-shadow:inset 0 -3px 0 var(--c-school)}
.rd.now{outline:2px solid var(--gold);outline-offset:-2px}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted);margin-top:14px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-inline-end:6px;border:1px solid var(--line-2)}

/* prayer */
.city-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.city-bar label{font-size:14px;color:var(--soft)}
.city-bar select{width:auto;min-width:220px}
.pr-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px}
.next-pr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.next-pr b{font-family:var(--f-display);font-size:28px;color:var(--gold-hi);font-weight:600}
.next-pr .num{font-family:var(--f-display);font-size:38px;color:var(--text);letter-spacing:.02em;text-shadow:0 0 26px rgba(245,224,176,.3)}
.times{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.times li{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:rgba(5,11,10,.55);transition:border-color .3s,background .3s}
.times li span{display:block;font-size:13px;color:var(--muted)}
.times li b{display:block;font-family:var(--f-display);font-size:24px;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}
.times li.done b{color:var(--dim)}
.times li.next{border-color:var(--gold);background:rgba(217,178,111,.12);box-shadow:0 0 30px -10px rgba(245,224,176,.6)}
.times li.next b{color:var(--gold-hi)}
.dial svg,.compass svg{display:block;width:100%;height:auto}
.dial-cap{font-size:13.5px;color:var(--muted);margin-top:6px;text-align:center}
.compass{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.compass .needle{transform-origin:60px 60px;transition:transform 1.2s var(--ease-out)}
.compass b{font-family:var(--f-display);font-size:30px;color:var(--gold-hi);font-weight:600;display:block;line-height:1.2}
.compass p{font-size:14px;color:var(--muted)}

/* moon */
.moon-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:stretch}
.moon-stage{position:relative;aspect-ratio:1/1;max-width:100%;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#13231e 0%,#040908 72%);border:1px solid var(--line)}
.moon-stage canvas{width:100%;height:100%;display:block}
.moon-info h3{font-size:30px;margin-bottom:2px}
.moon-info .h{font-family:var(--f-callig);font-size:21px;color:var(--gold-hi);margin:0}
.moon-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.moon-stats div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(5,11,10,.55)}
.moon-stats span{display:block;font-size:12.5px;color:var(--muted)}
.moon-stats b{font-family:var(--f-display);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
input[type=range]{accent-color:var(--gold);width:100%;min-height:44px;padding:0;border:0;background:transparent}
.range-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.mg{display:inline-flex;vertical-align:-3px;margin-inline-end:6px}

/* seasons */
.season-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
.wheel{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:12px}
.wheel svg{display:block;width:100%;max-width:520px;margin-inline:auto;height:auto}
.wheel text{font-family:var(--f-body);font-size:13px;fill:var(--soft)}
.season-now h3{font-size:40px;margin-bottom:0}
.season-now .d{color:var(--muted);margin:4px 0 14px}
.temp-scale{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-top:16px}
.temp-scale i{flex:1;height:8px;border-radius:99px;background:linear-gradient(to left,#e0784a,#e2bf7a 45%,#6ec6d8)}

/* month calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cal-head h3{margin:0;font-size:28px;color:var(--text)}
.cal-head .hs{display:block;font-family:var(--f-callig);font-size:17px;color:var(--gold);font-weight:400;line-height:1.4}
.navs{display:flex;gap:8px;flex:none}
.navbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--gold-hi);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.navbtn svg{width:18px;height:18px}
.navbtn:hover{background:rgba(217,178,111,.12)}
.navbtn:disabled{opacity:.3;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .wd{text-align:center;font-size:13px;color:var(--muted);padding:4px 0;white-space:nowrap;overflow:hidden}
.cal .wd .ws{display:none}
.day{appearance:none;font:inherit;color:inherit;background:rgba(5,11,10,.6);border:1px solid var(--line);border-radius:12px;min-height:86px;padding:8px 9px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;cursor:pointer;text-align:right;min-width:0;position:relative;transition:border-color .15s,background .15s,transform .2s var(--ease-out)}
.day:hover{border-color:var(--line-2);transform:translateY(-1px)}
.day .g{font-family:var(--f-display);font-size:21px;line-height:1.1;font-weight:500}
.day .h{font-size:12.5px;color:var(--muted);line-height:1.3}
.day .hm{font-size:12px;color:var(--gold);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.day .mn{position:absolute;top:8px;inset-inline-end:8px;width:14px;height:14px}
.day .dots{display:flex;gap:3px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cat)}
.day.wk{background:rgba(14,31,26,.8)}
.day.wk .g{color:var(--soft)}
.day.off{background:rgba(110,198,216,.09);border-color:rgba(110,198,216,.32)}
.day.now{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 0 24px -8px rgba(245,224,176,.7)}
.day.now .g{color:var(--gold-hi)}
.day.sel{background:rgba(217,178,111,.16);border-color:var(--gold)}
.blank{visibility:hidden}
.detail{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.detail h4{font-family:var(--f-display);font-size:20px;margin:0;font-weight:600}
.detail .dh{font-family:var(--f-callig);color:var(--gold-hi);font-size:18px;margin:2px 0 10px}
.detail ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.detail li{display:flex;align-items:center;gap:10px;font-size:15px}
.detail li i{width:9px;height:9px;border-radius:50%;background:var(--cat);flex:none}
.detail .empty{color:var(--muted);font-size:14.5px}
.detail .pt{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:14px;color:var(--soft)}
.detail .pt span b{font-weight:600;color:var(--text)}

/* calculators */
.conv label,.calc label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.fields{display:flex;gap:10px;flex-wrap:wrap}
.fields>div{flex:1 1 110px;min-width:0}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;margin-bottom:12px}
.seg button{appearance:none;border:0;background:transparent;color:var(--soft);font:inherit;font-size:14px;padding:6px 16px;border-radius:999px;cursor:pointer;min-height:38px}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);font-weight:600}
input,select{font:inherit;font-size:16px;background:rgba(5,11,10,.8);color:var(--text);border:1px solid var(--line-2);border-radius:12px;padding:9px 12px;min-height:46px;width:100%}
input:focus-visible,select:focus-visible{outline-offset:1px}
option{background:var(--night);color:var(--text)}
.out{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);min-height:110px}
.out .big{font-family:var(--f-callig);font-size:clamp(26px,3vw,36px);color:var(--gold-hi);line-height:1.4;margin:0;font-weight:700}
.out .sm{font-size:15px;color:var(--soft);margin:2px 0 0}
.out .err{color:var(--c-pay);font-size:15px;margin:0}
.out dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0;font-size:15px}
.out dt{color:var(--muted)}
.out dd{margin:0;color:var(--text);font-weight:500}

/* footer */
.foot{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(10,21,19,.92),var(--ink))}
.foot .wrap{padding-block:44px 52px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px}
.foot h4{font-family:var(--f-display);font-size:17px;margin:0 0 10px;color:var(--gold);font-weight:600}
.foot ul{margin:0;padding:0 18px 0 0;font-size:14.5px;color:var(--muted);display:grid;gap:6px}
.foot .brand{margin-bottom:14px}
.foot p{margin:0}


/* intro curtain, cursor, toast, confetti, palette, back-to-top */
.intro{position:fixed;inset:0;z-index:99;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at 50% 45%,#12241e,var(--ink) 70%);pointer-events:none;animation:introOut 1s var(--ease-out) 1.55s forwards}
.intro svg{width:118px;height:118px;display:block;margin-inline:auto;filter:drop-shadow(0 0 22px rgba(245,224,176,.45))}
.intro .ln{fill:none;stroke:#f5e0b0;stroke-width:2.4;stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1.3s var(--ease-out) forwards}
.intro .ln:nth-child(2){animation-delay:.15s}.intro .ln:nth-child(3){animation-delay:.3s}
.intro p{font-family:var(--f-display);font-size:36px;color:var(--gold-hi);margin:16px 0 0;text-align:center;opacity:0;animation:fadeUp .9s var(--ease-out) .45s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes introOut{to{opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0)}}
.cursor{position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(var(--acc),.75);border-radius:50%;pointer-events:none;z-index:95;opacity:0;transition:width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),opacity .3s,background .3s}
.cursor.on{opacity:1}
.cursor.big{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(var(--acc),.08)}
.cursor-dot{position:fixed;top:0;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgb(var(--acc));pointer-events:none;z-index:95;opacity:0;box-shadow:0 0 10px rgba(var(--acc),.9)}
.cursor-dot.on{opacity:1}
@media (pointer:coarse){.cursor,.cursor-dot{display:none}}
.toast{position:fixed;bottom:calc(26px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,24px);z-index:96;background:rgba(10,21,19,.96);border:1px solid rgba(var(--acc),.55);color:var(--text);padding:11px 20px;border-radius:999px;font-size:14.5px;opacity:0;pointer-events:none;transition:opacity .3s,transform .45s var(--ease-out);box-shadow:0 20px 50px -20px #000,0 0 30px -12px rgba(var(--acc),.8);max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:94}
.palette{position:fixed;inset:0;z-index:97;background:rgba(3,7,6,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:start center;padding:12vh 16px 16px}
.palette[hidden]{display:none}
.pal-box{width:min(660px,100%);background:rgba(10,21,19,.97);border:1px solid var(--line-2);border-radius:22px;box-shadow:0 40px 90px -30px #000,0 0 60px -30px rgba(var(--acc),.7);overflow:hidden}
.pal-box input{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-size:18px;padding:16px 20px;min-height:60px}
.pal-list{list-style:none;margin:0;padding:6px;max-height:min(56vh,460px);overflow-y:auto}
.pal-list li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;cursor:pointer}
.pal-list li[aria-selected="true"],.pal-list li:hover{background:rgba(var(--acc),.13)}
.pal-list li i{width:8px;height:8px;border-radius:50%;background:var(--cat);flex:none}
.pal-list li span{flex:1;min-width:0}
.pal-list li small{color:var(--muted);font-size:12.5px;white-space:nowrap}
.pal-hint{margin:0;padding:10px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
kbd{font-family:var(--f-body);font-size:12px;border:1px solid var(--line-2);border-radius:6px;padding:0 6px;color:var(--soft)}
.totop{position:fixed;inset-inline-start:max(18px,env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(10,21,19,.92);border:1px solid var(--line-2);color:var(--gold-hi);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .45s var(--ease-out),box-shadow .3s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{box-shadow:0 0 24px -6px rgba(var(--acc),.9)}
.totop svg{width:18px;height:18px}
/* hero facts */
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.facts span{font-size:13px;color:var(--soft);background:rgba(5,11,10,.58);border:1px solid var(--line);padding:5px 12px;border-radius:999px}
.facts b{color:var(--gold-hi);font-weight:500}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--glass)}
.stat span{display:block;font-size:13px;color:var(--muted)}
.stat b{display:block;font-family:var(--f-display);font-size:36px;color:var(--gold-hi);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.stat small{font-size:12.5px;color:var(--soft)}
/* hajj rites */
.rites{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.rite{padding:16px;border-radius:16px;border:1px solid var(--line);background:rgba(5,11,10,.55);position:relative}
.rite b{display:block;font-family:var(--f-display);font-size:30px;color:var(--gold-hi);line-height:1.1}
.rite h4{margin:6px 0 2px;font-size:15.5px;font-weight:600}
.rite p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.rite .g{font-size:12.5px;color:var(--soft);margin-top:8px}
.rite.now{border-color:rgb(var(--acc));box-shadow:0 0 30px -12px rgba(var(--acc),.8)}
/* year at a glance */
.year{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ym{appearance:none;font:inherit;color:inherit;text-align:right;background:rgba(5,11,10,.55);border:1px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer;transition:border-color .2s,transform .3s var(--ease-out)}
.ym:hover{border-color:var(--line-2);transform:translateY(-2px)}
.ym h5{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--gold-hi);display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.ym h5 small{font-weight:400;color:var(--muted);font-size:12px}
.g7{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.g7 i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.05)}
.g7 i.w{background:rgba(255,255,255,.1)}
.g7 i.o{background:rgba(110,198,216,.5)}
.g7 i.e{background:rgba(var(--acc),.8)}
.g7 i.t{outline:1.5px solid var(--gold-hi);outline-offset:0}
.g7 i.b{visibility:hidden}
/* copy buttons */
.copy{position:absolute;top:12px;inset-inline-end:12px;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(5,11,10,.6);color:var(--muted);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s,color .2s,border-color .2s;z-index:3}
.ec:hover .copy,.sc:hover .copy,.copy:focus-visible{opacity:1}
@media (hover:none){.copy{opacity:.85}}
.copy:hover{color:var(--gold-hi);border-color:var(--line-2)}
.copy svg{width:16px;height:16px}
/* calendar tooltip */
@media (hover:hover){.day[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:220px;white-space:normal;background:rgba(10,21,19,.97);border:1px solid var(--line-2);color:var(--text);font-size:12.5px;line-height:1.5;padding:6px 10px;border-radius:10px;z-index:5;pointer-events:none;box-shadow:0 14px 30px -12px #000;text-align:center}}
/* eclipse simulator */
.ecl{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;align-items:center}
.ecl-stage{aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#02040a}
.ecl-stage canvas{width:100%;height:100%;display:block}
.ecl .t{font-family:var(--f-display);font-size:42px;color:var(--gold-hi);font-variant-numeric:tabular-nums;display:block;line-height:1.2}
.ecl .ph{font-size:16px;color:var(--text);margin:4px 0 0}
.ecl .cov{font-size:14px;color:var(--muted);margin:2px 0 12px}
.btn{appearance:none;font:inherit;font-weight:600;background:var(--gold);color:var(--on-gold);border:0;border-radius:12px;padding:10px 18px;min-height:46px;cursor:pointer;transition:box-shadow .3s,transform .25s var(--ease-out)}
.btn:hover{box-shadow:0 0 26px -6px rgba(var(--acc),.9);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--gold-hi);border:1px solid var(--line-2)}
/* custom countdowns */
.cd-form{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.cd-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.cd-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(5,11,10,.55)}
.cd-list b{font-family:var(--f-display);font-size:18px;font-weight:600}
.cd-list .cdv{grid-column:1/-1;font-family:var(--f-display);font-size:22px;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.cd-list small{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.cd-list button{appearance:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.cd-list button:hover{color:var(--c-pay);border-color:var(--c-pay)}
.cd-list button svg{width:15px;height:15px}
.span2{grid-column:1/-1}
.foot-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.foot-stats span{font-size:13px;color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.foot-stats b{color:var(--gold-hi)}
.rd.odd::after{content:"";position:absolute;top:7px;inset-inline-start:7px;width:6px;height:6px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 8px var(--gold-hi)}
tr.oddn td:last-child{color:var(--gold-hi)}
@media (max-width:900px){
  .hero-panels,.feature,.grid2,.foot .wrap,.pr-grid,.moon-grid,.season-grid{grid-template-columns:minmax(0,1fr)}
  .quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .moon-stage{max-width:420px;width:100%;margin-inline:auto}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rites{grid-template-columns:repeat(3,minmax(0,1fr))}
  .year{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ecl{grid-template-columns:minmax(0,1fr)}
  .cd-form{grid-template-columns:minmax(0,1fr)}
  .strip-wrap{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * max(16px,env(safe-area-inset-right,0px)));padding-inline:max(16px,env(safe-area-inset-right,0px))}
  .strip-wrap::-webkit-scrollbar{display:none}
  .sc{scroll-snap-align:start;width:260px}
}
@media (max-width:760px){
  .top .wrap{flex-wrap:wrap;gap:4px 12px;padding-block:8px 6px;min-height:0}
  .nav{order:3;flex-basis:100%;margin-inline-start:0}
  .nav a{padding:6px 10px;font-size:13.5px}
  .tools-bar{order:2;margin-inline-start:auto}
  .clock{display:none}
  html{scroll-padding-top:112px}
  .title-card{min-height:52vh;padding-block:90px 28px}
  .cue{display:none}
}
@media (max-width:560px){
  .ev{grid-template-columns:58px minmax(0,1fr);gap:12px;padding:12px 14px}
  .ev .dt{padding-inline-end:10px}
  .ev .dt b{font-size:26px}
  .ev .st{grid-column:2}
  .count{gap:6px}
  .glass,.panel{padding:18px}
  .times{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compass{grid-template-columns:110px minmax(0,1fr)}
  .day{min-height:64px;padding:6px;border-radius:9px}
  .day .g{font-size:16px}
  .day .h{font-size:12px}
  .day .hm{display:none}
  .day .mn{width:11px;height:11px;top:5px;inset-inline-end:5px}
  .cal{gap:4px}
  .cal .wd{font-size:12px}
  .cal .wd .wl{display:none}
  .cal .wd .ws{display:inline}
  .dot{width:6px;height:6px}
  .quick .qc{padding:13px 14px}
  .qc .v{font-size:22px}
  .moon-stats b{font-size:19px}
  .wheel text{display:none}
  .rites{grid-template-columns:repeat(2,minmax(0,1fr))}
  .year{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat b{font-size:28px}
  .title-card[data-ghost]::after{font-size:110px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.cue i::after,.live-dot,.ticker-track{animation:none}
  .intro{display:none}
  .qc,.compass .needle,.times li,.ec,.day,.rd{transition:none}
}

/* ===== The Almanac. A hand-printed Najdi almanac laid over the real mountain.
   Ink on bone paper, a scribe's hand (Katibeh) for titles, Sadu weaving as the only ornament. No glass, no glow. ===== */
:root{--paper:#efe6d2;--paper-2:#e6dabf;--ink-p:#2a1d12;--clay:#7a2d17;--indigo:#24405f;--ochre:#a8761f;
  --f-display:"Katibeh","Amiri",serif;--f-body:"Noto Naskh Arabic","Amiri","Segoe UI",serif;--f-callig:"Amiri","Noto Naskh Arabic",serif;--f-num:"Reem Kufi","Noto Naskh Arabic",sans-serif;
  --sadu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='228' height='26'%3E%3Crect width='228' height='26' fill='%23191009'/%3E%3Crect y='2' width='228' height='3' fill='%237a2d17'/%3E%3Crect y='21' width='228' height='3' fill='%237a2d17'/%3E%3Cpath fill='%23efe6d2' d='M0 19L9 7l9 12zM21 19l8-12 10 12zM42 19l10-12 8 12zM64 19l9-12 9 12z'/%3E%3Cpath fill='%23a8761f' d='M86 7h6l6 12h-6zM101 7h5l7 12h-6zM116 7h6l5 12h-6z'/%3E%3Cpath fill='%23efe6d2' d='M132 13l6-6 6 6-6 6zM148 13l7-6 6 6-6 6zM165 13l6-6 7 6-7 6zM182 13l6-6 6 6-6 6z'/%3E%3Cpath fill='%237a2d17' d='M198 19l6-12 7 12zM214 19l5-12 8 12z'/%3E%3C/svg%3E");
  --paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8 .55' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .11 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23p)'/%3E%3C/svg%3E")}
body{font-size:17.5px;line-height:1.75;background-image:linear-gradient(#2b2a33,#5a4632 60%,#2a1d12);background-attachment:fixed}
html.no3d #world{display:none}
.veil{background:linear-gradient(to top,rgba(20,12,4,.34),transparent 26%)}.grain{display:none!important}
.progress{height:3px;background:var(--clay);box-shadow:none}
::selection{background:#7a2d17;color:#f6eeda}
::-webkit-scrollbar-thumb{background:#7a5b34;border-radius:0;border:2px solid var(--ink)}
:focus-visible{outline:2px solid #e2b866;border-radius:2px}

/* paper plates: every colour variable flips inside them, so the old components become ink on paper */
.panel,.glass,.qc,.ec,.sc,.ev,.tbl-wrap,.wheel,.stat,.pal-box,.more{--text:#2a1d12;--soft:#44341f;--muted:#6a5740;--dim:#847257;--gold:#7a2d17;--gold-hi:#7a2d17;--gold-lo:#a8761f;--line:rgba(70,45,20,.2);--line-2:rgba(70,45,20,.42);--glass:transparent;--on-gold:#f6eeda;--night:#efe6d2;--ink:#efe6d2;--c-school:#17667c;--c-rel:#8b5f14;--c-nat:#19713f;--c-pay:#a9481f;--c-astro:#37509c;--c-season:#5c6b18;--c-fast:#7b3a84;color:var(--text);color-scheme:light}
.panel,.glass,.qc,.ec,.sc,.ev,.wheel,.stat{background:none!important;border:0!important;border-radius:2px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;isolation:isolate;position:relative}
html .panel::before,html .glass::before,html .qc::before,html .ec::before,html .sc::before,html .ev::before,html .wheel::before,html .stat::before{content:"";position:absolute;inset:0;z-index:-1;opacity:1!important;padding:0;border-radius:0;background:var(--paper-tex),var(--paper);-webkit-mask:none;mask:none;clip-path:polygon(0 .5%,6% .1%,13% .6%,21% .15%,30% .55%,39% .05%,48% .5%,57% .1%,66% .6%,75% .15%,84% .55%,92% .1%,100% .45%,99.7% 9%,100% 18%,99.6% 28%,99.9% 38%,99.65% 49%,100% 59%,99.7% 69%,99.95% 79%,99.65% 90%,100% 99.5%,93% 99.9%,85% 99.4%,76% 99.85%,66% 99.45%,56% 99.9%,46% 99.5%,36% 99.95%,26% 99.45%,16% 99.9%,8% 99.5%,0 99.9%,.35% 90%,0 79%,.3% 68%,.05% 58%,.35% 47%,0 37%,.3% 26%,.05% 15%,.3% 7%);pointer-events:none}
html .glow::after,html .sc::after{display:none}
.tbl-wrap{background:var(--paper-tex),var(--paper);border:0;border-radius:2px;box-shadow:0 14px 26px -8px rgba(20,10,0,.5)}
.ec:nth-child(4n+1),.sc:nth-child(3n+1),.qc:nth-child(2n+1){rotate:-.4deg}.ec:nth-child(4n+2),.sc:nth-child(3n+2),.qc:nth-child(4n){rotate:.35deg}.ec:nth-child(4n+3){rotate:-.15deg}
.ec:hover,.qc:hover,.day:hover,.rd:hover,.ym:hover{transform:none}
.ec,.sc,.qc{transition:rotate .35s var(--ease-out)}.ec:hover,.sc:hover,.qc:hover{rotate:0deg}
/* ink, not chips */
.panel h3,.glass h3{font-family:var(--f-display);font-weight:700;font-size:27px;line-height:1.35;color:var(--clay)}
.ec h3,.sc h4,.next-t{font-family:var(--f-display);font-weight:700;line-height:1.35}
.ec h3{font-size:25px}.sc h4{font-size:26px}
.ec .h,.sc .h,.feature .h,.moon-info .h,.detail .dh{color:var(--clay)}
.count div{background:none;border:0;border-inline-start:1px solid var(--line-2);border-radius:0;box-shadow:none;padding-block:4px}
.count div:first-child{border-inline-start:0}
.count b,.qc .v,.prog-top b,.stat b,.moon-stats b,.times li b,.day .g,.rd b,.next-pr .num,.ev .dt b,.sc .big,.rite b,.ecl .t,.compass b,.clock b{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.count b{color:var(--clay);font-size:clamp(26px,3.2vw,38px);font-weight:500}
.times li,.moon-stats div,.rd,.day,.ym,.rite,.cd-list li,.navbtn,.seg{background:none;border-radius:2px;box-shadow:none}
.times li,.moon-stats div,.rite,.ym,.cd-list li{border:0;border-top:1.5px solid var(--line-2);border-radius:0;padding-inline:2px}
.times li.next{background:none;border-top:3px solid var(--clay);box-shadow:none}
.rd{border-color:var(--line)}.rd.l10{background:rgba(168,118,31,.14);border-color:rgba(122,45,23,.4)}.rd.now,.day.now{outline:2px solid var(--clay);outline-offset:-2px;box-shadow:none}
.day{background:rgba(255,250,235,.32);border-color:var(--line)}.day.wk{background:rgba(120,90,50,.1)}.day.off{background:rgba(23,102,124,.11);border-color:rgba(23,102,124,.35)}.day.sel{background:rgba(122,45,23,.14);border-color:var(--clay)}
.day[data-tip]:hover::after{background:#2a1d12!important;color:#f6eeda!important;border:0!important;border-radius:2px!important}
input,select{background:rgba(255,250,235,.6);border-color:var(--line-2);border-radius:2px;color:#2a1d12}option{background:#efe6d2;color:#2a1d12}
.chip,.more,.tag,.cat,.pill,.exp{border-radius:2px;box-shadow:none}
.chip{background:rgba(20,12,4,.55);color:#f3e8cf;border-color:rgba(243,232,207,.35)}.chip[aria-pressed="true"]{background:var(--paper);color:#7a2d17;border-color:var(--paper)}
.more{background:var(--paper-tex),var(--paper);border:0;color:#7a2d17}
.btn{background:#7a2d17;color:#f6eeda;border-radius:2px;box-shadow:none;font-family:var(--f-body)}.btn:hover{box-shadow:none;background:#8f3a1f;transform:none}.btn.ghost{color:#f3e8cf;border-color:rgba(243,232,207,.45);background:none}
.seg button[aria-pressed="true"]{border-radius:2px}.seg{border-radius:2px}
.prog{border-radius:0;height:9px;background:rgba(70,45,20,.14);border:0}.prog i{background:var(--clay);box-shadow:none}
.st-now{color:#19713f;font-weight:700}
tbody tr:hover td{background:rgba(122,45,23,.06)}tr.next td{background:rgba(168,118,31,.16)}tr.rmd td{background:rgba(168,118,31,.08)}
th{color:#7a2d17;font-family:var(--f-body);font-weight:700;font-size:14px}
.cards{gap:18px}
.sc{min-height:280px}.sc .ic{background:none!important;border:0!important;color:var(--cat)}.sc .big{color:var(--cat)}
.copy{background:none;border-color:var(--line-2);color:var(--muted);border-radius:2px}
/* Sadu woven band opens each chapter's pages */
.sec-body::before{content:"";display:block;height:26px;background:var(--sadu) repeat-x;box-shadow:0 5px 12px -3px rgba(20,10,0,.55)}

/* titles written directly over the landscape */
.chapter{padding-bottom:clamp(120px,34vh,420px)}
.title-card{min-height:100svh;justify-content:flex-end;padding-bottom:clamp(36px,8vh,90px)}
.title-card::before,.title-card[data-ghost]::after{display:none!important}
.title-card h2{font-family:var(--f-display);font-weight:700;font-size:clamp(60px,10.5vw,158px);line-height:1.22;color:#fbf3e1;text-shadow:0 2px 2px rgba(25,12,2,.7),0 0 34px rgba(25,12,2,.6);background:none;-webkit-text-fill-color:currentColor}
.title-card .sub{font-size:clamp(18px,1.75vw,23px);line-height:1.7;color:#f8efdd;text-shadow:0 1px 2px rgba(25,12,2,.95),0 0 18px rgba(25,12,2,.75);max-width:44ch}
.meta{gap:2px 0;font-size:15.5px;color:#f3e8cf}.meta span{background:none;border:0;padding:0;text-shadow:0 1px 2px rgba(25,12,2,.95),0 0 14px rgba(25,12,2,.7);border-radius:0}.meta span+span::before{content:"·";margin-inline:9px;opacity:.7}
.scene{font-family:var(--f-display);font-size:19px;color:#f3e8cf;text-shadow:0 1px 3px rgba(25,12,2,.9);margin-top:10px}.scene::before{display:none}
.pen{display:block;width:min(560px,78vw);height:22px;margin:-4px 0 8px;overflow:visible}.pen path{fill:none;stroke:#e8c98a;stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(25,12,2,.8))}
.sec-head{margin-top:18px}.sec-head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,4vw,50px);color:#fbf3e1;text-shadow:0 2px 2px rgba(25,12,2,.7),0 0 24px rgba(25,12,2,.6)}.sec-head p{color:#f3e8cf;text-shadow:0 1px 3px rgba(25,12,2,.95)}
.city-bar label,.legend,.range-ends,.tl-m,.check{text-shadow:0 1px 3px rgba(25,12,2,.9)}
.tl-m{color:#fbf3e1;font-size:26px}.tl-m small{color:#f3e8cf}.check{color:#f3e8cf}
.panel .legend,.panel .range-ends,.panel label{text-shadow:none}

/* header: a dark printed band with the seal */
.top{background:linear-gradient(to bottom,rgba(20,12,4,.55),transparent)}.top.solid{background:#17100a;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 rgba(243,232,207,.14)}
.brand{color:#f3e8cf}.brand svg{width:50px;height:50px;color:#f3e8cf}.brand b{font-family:var(--f-display);font-size:29px;color:#fbf3e1;line-height:1.1;text-shadow:0 1px 3px rgba(25,12,2,.7)}.brand small{display:none}
.nav a{font-size:15.5px;color:#f3e8cf;border-radius:0;padding:10px 9px;text-shadow:0 1px 3px rgba(25,12,2,.8)}.nav a:hover,.nav a:focus-visible,.nav a.on{background:none;color:#fff;box-shadow:inset 0 -2px 0 #e8c98a}
.icon-btn{border-radius:2px;border-color:rgba(243,232,207,.42);background:none;color:#f3e8cf}.icon-btn:hover{background:rgba(243,232,207,.12)}
.clock b{color:#fbf3e1;font-size:16px}.clock span{color:#e8dcc1}
.ticker{border-top:1px solid rgba(243,232,207,.14);-webkit-mask-image:none;mask-image:none}.ticker-track{color:#e8dcc1}.ticker-track i{box-shadow:none}.ticker-track b{color:#fbf3e1}
.rail a i{border-color:#f3e8cf;border-radius:0;transform:rotate(45deg)}.rail a.on i{background:#e8c98a;border-color:#e8c98a;box-shadow:none;transform:rotate(45deg) scale(1.5)}.rail a{color:#f3e8cf}.rail a span{background:#17100a;border-radius:0}

/* hero */
.hero h1{font-family:var(--f-display);font-size:clamp(82px,15vw,226px);line-height:1.12;color:#fbf3e1;text-shadow:0 3px 3px rgba(25,12,2,.65),0 0 44px rgba(25,12,2,.5)}.hero h1 .sheen>span{color:#f1d9a0}.sheen::after{display:none}
.lede{color:#fbf3e1;font-size:clamp(18px,1.8vw,22px);max-width:46ch;text-shadow:0 1px 2px rgba(25,12,2,.95),0 0 18px rgba(25,12,2,.75)}
.sky-cap{background:none!important;border:0!important;padding:0!important;color:#f3e8cf;text-shadow:0 1px 3px rgba(25,12,2,.95);font-size:15.5px}.live-dot{box-shadow:none;animation:none}
.facts span{background:none;border:0;padding:0;font-size:15px;color:#f3e8cf;text-shadow:0 1px 3px rgba(25,12,2,.95)}.facts span+span::before{content:"·";margin-inline-end:8px;opacity:.7}.facts b{color:#fff;font-weight:600}.facts{gap:2px 8px}
.cue{color:#f3e8cf;font-family:var(--f-display);font-size:19px;text-shadow:0 1px 3px rgba(25,12,2,.9)}.cue i{background:#f3e8cf}
.next-d,.today-g{color:var(--soft)}.next-t{font-size:clamp(26px,2.8vw,36px);color:var(--text)}
.qc .k i{box-shadow:none}.qc .v{color:var(--clay)}
/* the tear-off calendar leaf: a Saudi wall ruznama */
.leaf{padding:0!important;text-align:center;min-height:300px;display:flex;flex-direction:column;overflow:visible}
.leaf-head{background:#7a2d17;color:#f6eeda;padding:9px 12px 8px;margin:0;font-size:15px;display:flex;justify-content:space-between;gap:10px;position:relative}
.leaf-head::before{content:"";position:absolute;top:-7px;inset-inline:18%;height:12px;background:radial-gradient(circle,#1a1208 0 3.4px,transparent 4px) 0 0/22% 100% repeat-x}
.leaf-big{font-family:var(--f-num);font-weight:500;font-size:clamp(84px,10vw,128px);line-height:1;color:#2a1d12;margin:12px 0 0}
.leaf .today-h{font-family:var(--f-display);font-size:clamp(23px,2.4vw,30px);line-height:1.3;color:#7a2d17;margin:4px 8px 0}
.leaf .today-g{font-size:15.5px;margin:0 8px}
.leaf .today-note{border-top:1px dashed rgba(70,45,20,.42);margin:10px 14px 0;padding-top:8px;font-size:14px;display:grid;gap:2px;color:var(--muted)}
.tear{appearance:none;background:none;border:0;border-top:1px dashed rgba(70,45,20,.42);font:inherit;font-size:14px;color:#7a2d17;padding:9px;margin-top:auto;cursor:pointer;min-height:42px}
.tear:hover{background:rgba(122,45,23,.08)}
.leaf-fly{position:fixed;z-index:90;pointer-events:none;transform-origin:50% 0;margin:0}
/* notes pencilled onto the land and sky */
.pin{position:fixed;top:0;left:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;width:0;height:0}
.pin.on{opacity:1}
.pin svg{position:absolute;right:-2px;bottom:0;width:70px;height:92px;overflow:visible}.pin path{fill:none;stroke:#fbf3e1;stroke-width:1.5;stroke-linecap:round;filter:drop-shadow(0 1px 1px rgba(25,12,2,.8))}
.pin span{position:absolute;right:62px;bottom:82px;white-space:nowrap;font-family:var(--f-display);font-size:clamp(17px,1.5vw,23px);line-height:1.2;color:#fbf3e1;text-shadow:0 1px 2px rgba(25,12,2,.95),0 0 12px rgba(25,12,2,.7)}
.pin small{display:block;font-family:var(--f-body);font-size:12.5px;color:#f3e8cf}
/* resolution note */
.qbadge{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:45;appearance:none;background:rgba(20,12,4,.68);border:1px solid rgba(243,232,207,.3);color:#f3e8cf;font:13px/1.4 var(--f-body);padding:5px 11px;min-height:34px;border-radius:2px;cursor:pointer;direction:rtl}
.qbadge b{font-family:var(--f-num);font-weight:500}.qbadge:hover{background:rgba(20,12,4,.9)}
/* intro */
.intro{animation:none;background:#17100a;transition:opacity .9s,visibility .9s}.intro.out{opacity:0;visibility:hidden}
.intro svg{width:150px;height:150px;color:#f3e8cf;filter:none;animation:fadeUp .8s var(--ease-out) both}
.intro p{font-family:var(--f-display);font-size:44px;color:#fbf3e1;animation-delay:.25s}
.intro small{display:block;text-align:center;font-size:15px;color:#c9b995;margin-top:6px;min-height:24px;opacity:0;animation:fadeUp .8s var(--ease-out) .5s forwards}
.toast{border-radius:2px;background:#2a1d12;border-color:#7a2d17;box-shadow:0 12px 26px -10px #000;color:#f6eeda}
.palette{background:rgba(15,9,3,.72);-webkit-backdrop-filter:none;backdrop-filter:none}.pal-box{background:var(--paper-tex),var(--paper);border:0;border-radius:2px;box-shadow:0 30px 60px -20px #000}.pal-box input{background:none}.pal-list li[aria-selected="true"],.pal-list li:hover{background:rgba(122,45,23,.14)}.pal-list li small{color:var(--muted)}kbd{border-radius:2px}
.totop{border-radius:2px;background:#17100a;border-color:rgba(243,232,207,.35);color:#f3e8cf;box-shadow:none}.totop:hover{box-shadow:none;background:#2a1d12}
.foot{background:#17100a;border-top:0;position:relative}.foot::before{content:"";display:block;height:26px;background:var(--sadu) repeat-x}.foot .brand svg{width:66px;height:66px}.foot-stats span{border:0;border-radius:0;padding:0}.foot-stats span+span::before{content:"·";margin-inline-end:8px;opacity:.6}.foot-stats b{color:#f3e8cf}
.foot a{color:#e8c98a}
.moon-stage,.ecl-stage{border-radius:2px;border:0}
.wheel text{fill:#44341f}
@media (min-width:901px){.hero-panels{grid-template-columns:minmax(230px,290px) minmax(0,520px);justify-content:start;align-items:stretch}.hero-text{max-width:900px}.sec-body{max-width:1120px}}
@media (max-width:760px){.pin{display:none}.qbadge{left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));font-size:12px}.title-card{min-height:88svh}.leaf-big{font-size:84px}.chapter{padding-bottom:22vh}.ec,.sc,.qc{rotate:0deg}}
@media (prefers-reduced-motion:reduce){.ec,.sc,.qc{transition:none}.intro{transition:none}}
@media (min-width:761px){.hero-in{padding-top:0;gap:34px}.hero-text{min-height:calc(100svh - 104px);display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(6px,5vh,60px)}.sky-cap{margin-top:auto}.facts{margin-bottom:6px}.hero{justify-content:flex-start}.cue{display:none}}
.title-card{max-width:1180px}
@media (max-width:760px){.qbadge{display:none}}
h1,h2,h3,h4,.brand b,.next-t,.today-h,.scene,.cue,.pin span,.intro p,.tl-m{font-weight:400!important}
.hero h1{font-size:clamp(96px,17vw,250px);line-height:1.04}.title-card h2{font-size:clamp(68px,12vw,176px);line-height:1.1}.brand b{font-size:33px}.panel h3,.glass h3{font-size:32px}.ec h3{font-size:29px}.sc h4{font-size:30px}.next-t{font-size:clamp(30px,3.2vw,42px)}.leaf .today-h{font-size:clamp(27px,2.7vw,34px)}.sec-head h2{font-size:clamp(40px,4.6vw,58px)}.pin span{font-size:clamp(20px,1.7vw,26px)}.intro p{font-size:52px}.tl-m{font-size:30px}.scene{font-size:22px}
/* v8: raise the title clear of the text */
.hero h1{font-size:clamp(92px,14.6vw,214px);line-height:1;margin:-.1em 0 .36em}
@media (min-width:761px){.hero-text{padding-top:0}}
.hero h1 .sheen>span{text-shadow:none;background:var(--foil-l);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px rgba(25,12,2,.6))}
:root{--foil:linear-gradient(100deg,#6e4510,#a8761f 26%,#c9983c 44%,#94661a 62%,#6e4510);--foil-l:linear-gradient(100deg,#c9983c,#f3dfa2 34%,#e2bd6a 52%,#fff3cc 66%,#c9983c);
  --shurfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='22'%3E%3Cpath fill='%23b08f63' d='M0 22V14H4V10H8V6H12V2H16V6H20V10H24V14H28V10H32V6H36V2H40V6H44V10H48V14H52H56V22Z'/%3E%3Cpath fill='%231a1208' d='M12 22l2-5 2 5zM38 22l2-5 2 5z'/%3E%3C/svg%3E")}
/* Najdi door */
.door{position:fixed;inset:0;z-index:99;display:grid;grid-template-columns:1fr 1fr;direction:ltr;perspective:1700px;overflow:hidden;background:#0d0803;transition:background .9s .7s,visibility 0s 2.4s}
.door .lf{position:relative;overflow:hidden;will-change:transform;transition:transform 2.1s cubic-bezier(.62,.02,.28,1);box-shadow:inset 0 0 90px rgba(10,5,0,.7)}
.door .lf svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.door .l{transform-origin:0 50%}.door .r{transform-origin:100% 50%}
.door.out{background:transparent;visibility:hidden;pointer-events:none}.door.out .l{transform:rotateY(-108deg)}.door.out .r{transform:rotateY(108deg)}
.door-seal{position:absolute;left:50%;top:50%;translate:-50% -50%;text-align:center;color:#f3dfa2;transition:opacity .5s;background:#17100a;border:2px solid #b58a33;outline:1px solid #b58a33;outline-offset:5px;border-radius:50%;width:clamp(190px,23vmin,250px);aspect-ratio:1;display:grid;place-content:center;box-shadow:0 22px 60px #000}
.door-seal svg{width:clamp(84px,10vmin,110px);height:clamp(84px,10vmin,110px);margin-inline:auto;color:#f3dfa2}.door-seal p{margin:2px 0 0;font-family:var(--f-display);font-size:clamp(25px,3vmin,32px);color:#fbf3e1;line-height:1.2}
.door.out .door-seal{opacity:0}
/* ordinals, medallions, gilt */
.ord,.wl-t{text-shadow:none}.ord{font-family:var(--f-display);font-size:clamp(25px,2.6vw,36px);line-height:1.2;margin:0;background:var(--foil-l);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(25,12,2,.85))}
.medal{position:absolute;top:-17px;left:50%;translate:-50% 0;width:60px;height:60px;border-radius:50%;background:#17100a;border:3px solid transparent;background-image:linear-gradient(#17100a,#17100a),var(--foil-l);background-origin:border-box;background-clip:padding-box,border-box;display:grid;place-items:center;box-shadow:0 7px 14px rgba(15,8,2,.65);z-index:2}
.medal svg{width:32px;height:32px;fill:none;stroke:#f3dfa2;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.panel h3,.glass h3,.ec h3,.sc h4,.sec-num{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
html .panel::after,html .panel.glow::after{content:"";display:block!important;position:absolute;inset:9px;z-index:-1;pointer-events:none;background:none!important;opacity:1!important;border:1px solid rgba(168,118,31,.62);outline:1px solid rgba(168,118,31,.26);outline-offset:3px;border-radius:0;
  background-image:linear-gradient(45deg,#a8761f 50%,transparent 50%),linear-gradient(-45deg,#a8761f 50%,transparent 50%),linear-gradient(135deg,#a8761f 50%,transparent 50%),linear-gradient(-135deg,#a8761f 50%,transparent 50%)!important;background-size:11px 11px!important;background-repeat:no-repeat!important;background-position:0 100%,100% 100%,0 0,100% 0!important}
.panel{padding:clamp(24px,3vw,34px)!important}
.tbl-wrap{position:relative}.tbl-wrap::before{content:"";display:block;height:22px;background:var(--shurfa) repeat-x;position:sticky;left:0;margin-top:0;background-color:#1a1208}
.leaf{--seal:1}.leaf::after{content:"";display:block!important;position:absolute;inset-inline-end:12px;bottom:58px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#f6e4ad,#c49433 46%,#7d5312)!important;opacity:.9!important;box-shadow:0 2px 4px rgba(40,20,0,.45);pointer-events:none;z-index:0}
.leaf-head{background:linear-gradient(#8c3419,#6e2813)}
.day.now{outline-color:#a8761f;background:linear-gradient(145deg,rgba(201,152,60,.38),rgba(168,118,31,.14))}
.progress{background:var(--foil-l)}
.brand svg{color:#f3dfa2}
.foot::before{height:22px;background:var(--shurfa) repeat-x;background-color:transparent;margin-top:-22px;position:relative}
.welcome{display:flex;align-items:center;gap:22px;padding-block:34px 8px}.welcome svg{width:82px;height:102px;flex:none;fill:none;stroke:#e2bd6a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wl-t{font-family:var(--f-display);font-size:clamp(46px,5vw,68px);line-height:1.1;margin:0;background:var(--foil-l);-webkit-background-clip:text;background-clip:text;color:transparent}.wl-s{margin:4px 0 0;color:#e8dcc1;font-size:17px}
.btn{background:linear-gradient(#8f3a1f,#6e2813);border:1px solid #b58a33}
.rd.l10{background:linear-gradient(145deg,rgba(201,152,60,.24),rgba(168,118,31,.08))}
@media (max-width:760px){.medal{width:50px;height:50px;top:-12px}.medal svg{width:27px;height:27px}.leaf::after{bottom:50px;width:34px;height:34px}.welcome svg{width:62px;height:78px}}
@media (prefers-reduced-motion:reduce){.door .lf{transition:none}.door{transition:none}}

/* ---------- the Kingdom chapter ---------- */
.panel.kg-dark{background:radial-gradient(120% 90% at 85% 0%,#0d4a2d 0%,#06301c 48%,#03190e 100%)!important;color:#f3ecd8;border-color:#b58a33}
html .panel.kg-dark::before{background:radial-gradient(120% 90% at 85% 0%,#0f5233 0%,#06301c 50%,#03190e 100%)!important;background-blend-mode:normal!important}
.kg-dark p,.kg-dark li{color:#efe6cf}
.kg-dark .count b,.kg-dark .count div b{color:#ffe3a0!important;-webkit-text-fill-color:#ffe3a0;background:none!important}.kg-dark .count span,.kg-dark .count i,.kg-dark .count small{color:#cdbf9c!important}.kg-dark .count>div{background:rgba(0,0,0,.25)!important;border-color:rgba(217,178,111,.4)!important}
.kg-kick{font-family:var(--f-num);font-size:14px;letter-spacing:.02em;color:#d9b26f;margin:0 0 6px}
.kg-quote{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.kg-quote blockquote{margin:0;font-family:var(--f-display);font-size:clamp(34px,4.6vw,62px);line-height:1.32;color:#f7e7bb}
.kg-quote cite{display:block;margin-top:14px;font:normal 500 15px var(--f-body);color:#cdbf9c}
.kg-flag{position:relative;aspect-ratio:3/2;border:1px solid #b58a33;outline:1px solid rgba(181,138,51,.4);outline-offset:5px;overflow:hidden;box-shadow:0 26px 50px -24px #000}
.kg-flag svg{display:block;width:100%;height:100%}
.kg-flag::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.26),rgba(255,255,255,.1) 18%,rgba(0,0,0,.16) 34%,rgba(255,255,255,.08) 52%,rgba(0,0,0,.2) 70%,rgba(255,255,255,.08) 86%,rgba(0,0,0,.24));background-size:220% 100%;animation:kgFolds 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes kgFolds{to{background-position:100% 0}}
.kg-facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;font-size:16px}
.kg-facts li{padding-inline-start:18px;position:relative}.kg-facts li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px;rotate:45deg;background:#d9b26f}
.kg-dua{text-align:center;padding-block:clamp(34px,5vw,62px)!important;position:relative;overflow:hidden}
.kg-dua h3{font-size:clamp(42px,6vw,76px)!important;margin:0 0 6px;line-height:1.2}
.kg-dua-list{max-width:860px;margin:22px auto 0;display:grid;gap:22px}
.kg-dua-list div>b{display:block;font:500 14px var(--f-num);color:#d9b26f;margin-bottom:6px}
.kg-dua-list p{margin:0;font-family:var(--f-callig);font-size:clamp(21px,2.4vw,29px);line-height:1.85;color:#fbf3dd}
.kg-dua-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:30px}
.kg-amen{position:relative;font-family:var(--f-display);font-size:34px;line-height:1;min-width:190px;min-height:64px;border-radius:999px!important;background:linear-gradient(#f5e0b0,#c99a4a)!important;color:#2a1a06!important;border:1px solid #fff2c9!important;overflow:visible;cursor:pointer;transition:transform .25s var(--ease-out)}
.kg-amen:active{transform:scale(.96)}
.kg-amen i{position:absolute;inset:0;border-radius:inherit;border:2px solid #f5e0b0;opacity:0;pointer-events:none}
.kg-amen.go i{animation:kgRing 1.5s var(--ease-out)}.kg-amen.go i+i{animation-delay:.2s}
@keyframes kgRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.5,3.4)}}
.kg-count{font-size:15px;color:#cdbf9c;margin:12px 0 0}.kg-small{font-size:13.5px;color:#b9ad8d!important;margin:8px 0 0}
.kg-salute{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.kg-salute li{border:1px solid var(--line-2);padding:9px 16px;font-family:var(--f-body);font-weight:600;font-size:15.5px;background:rgba(0,84,48,.09);color:#2a3f2c;display:flex;gap:8px;align-items:center}
.kg-salute li::before{content:"";width:9px;height:9px;rotate:45deg;background:#005430;flex:none}
.kg-mapwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,3vw,34px);align-items:start}
#kg-map{display:block;width:100%;height:auto;overflow:visible}
#kg-map .rg{stroke:#e8d6a3;stroke-width:1.3;cursor:pointer;transition:fill 1.2s,stroke-width .2s;outline:none;vector-effect:non-scaling-stroke}
#kg-map .rg:hover,#kg-map .rg:focus-visible{stroke:#fff;stroke-width:2.4}#kg-map .rg.on{stroke:#ffe9a8;stroke-width:3}
#kg-map .cap{fill:#fff6da;pointer-events:none}#kg-map .capt{font:600 19px var(--f-body);fill:#fff6da;paint-order:stroke;stroke:rgba(3,25,14,.85);stroke-width:4px;text-anchor:middle;pointer-events:none}
#kg-map .her{fill:#ffcf5c;stroke:#2a1a06;stroke-width:1.5;cursor:pointer;transition:opacity .3s}#kg-map.no-her .her{opacity:0;pointer-events:none}
#kg-map .her.on{fill:#fff;stroke:#c9983c;stroke-width:3}
.kg-info h4{font-family:var(--f-display);font-size:36px;margin:0;color:#f7e7bb;line-height:1.2}.kg-info .sub2{margin:2px 0 12px;color:#cdbf9c;font-size:15px}
.kg-rows{display:grid;gap:6px;margin:0}.kg-rows div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(217,178,111,.22);padding:5px 0;font-size:15.5px}.kg-rows dt{color:#cdbf9c}.kg-rows dd{margin:0;font-family:var(--f-num);color:#fbf3dd}
.kg-wave{margin:0 0 14px;padding:10px 14px;border:1px solid rgba(217,178,111,.4);font-size:15.5px;color:#fbf3dd;background:rgba(0,0,0,.2)}.kg-wave b{color:#ffdc8c;font-weight:700}
.kg-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13.5px;color:#cdbf9c;margin-top:10px}.kg-legend i{display:inline-block;width:64px;height:9px;background:linear-gradient(90deg,#0d2a3a,#c9a35a);vertical-align:middle;margin-inline:6px}
.kg-tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 18px}
.kg-tl li{position:relative;padding:14px 0 14px;border-top:2px solid var(--gold-lo)}.kg-tl li::before{content:"";position:absolute;top:-6px;inset-inline-start:0;width:10px;height:10px;rotate:45deg;background:#7a2d17}
.kg-tl b{display:block;font-family:var(--f-num);font-size:23px;color:#7a2d17;font-weight:600;line-height:1.3}.kg-tl small{font-family:var(--f-num);color:#7b6a4e;font-size:13px}.kg-tl span{display:block;font-size:15.5px;line-height:1.6;margin-top:4px}
.kg-kings{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none;border:1px solid var(--line-2)}
.kg-kings li{flex:1 1 130px;padding:12px;text-align:center;border-inline-end:1px solid var(--line);min-width:0}.kg-kings li:last-child{border-inline-end:0}.kg-kings b{display:block;font-family:var(--f-display);font-size:25px;line-height:1.25}.kg-kings span{font-family:var(--f-num);font-size:13px;color:#7b6a4e}
.kg-future{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.kg-future .fut{border:1px solid rgba(217,178,111,.4);padding:18px;min-width:0}.kg-future h4{font-family:var(--f-display);font-size:30px;margin:0;color:#f7e7bb;line-height:1.25}.kg-future p{font-size:14.5px;margin:4px 0 10px;color:#d8cdb0}.kg-future .count{transform-origin:right top}
.kg-her{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:0 18px}.kg-her li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dotted var(--line-2);font-size:15.5px}.kg-her button{all:unset;cursor:pointer;font-weight:600}.kg-her button:hover,.kg-her button:focus-visible{color:#7a2d17;text-decoration:underline}.kg-her span{font-family:var(--f-num);color:#7b6a4e;flex:none}
.kg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}.kg-chips li{font-size:14px;padding:5px 12px;border:1px solid var(--line-2)}
.kg-coffee{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
.kg-cup{all:unset;cursor:pointer;display:grid;justify-items:center;gap:6px;text-align:center;padding:8px 2px;border:1px solid transparent;transition:border-color .3s}.kg-cup:focus-visible,.kg-cup:hover{border-color:var(--line-2)}
.kg-cup svg{width:clamp(44px,8vw,70px);height:auto;overflow:visible}.kg-cup .fill{transform:scaleY(0);transform-origin:50% 100%;transform-box:fill-box;transition:transform .9s var(--ease-out)}.kg-cup.on .fill{transform:none}
.kg-cup b{font-family:var(--f-display);font-size:27px;line-height:1.1}.kg-cup-note{min-height:3.2em;margin:12px 0 0;font-size:16.5px}
@media(max-width:820px){.kg-quote,.kg-mapwrap{grid-template-columns:minmax(0,1fr)}.kg-kings li{flex-basis:42%}}

/* ---------- welcome ---------- */
.greet{margin:0 0 2px;font-family:var(--f-callig);font-size:clamp(20px,2.3vw,30px);line-height:1.4;color:#fff3d2;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.greet span{display:inline-block;opacity:0;animation:gw .8s var(--ease-out) forwards;animation-delay:calc(var(--i)*110ms + .3s)}@keyframes gw{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.greet-sub{margin:0 0 10px;font-size:15px;color:#f0e3c4;text-shadow:0 1px 10px rgba(0,0,0,.8);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.linkbtn{appearance:none;background:none;border:0;border-bottom:1px dashed currentColor;color:#ffdf9e;font:inherit;padding:0;cursor:pointer;min-height:28px}
.name-f{display:flex;gap:8px;align-items:center;margin:0 0 10px;max-width:340px}.name-f[hidden]{display:none}.name-f input{min-height:40px;padding:4px 10px;font-size:15px}.name-f .btn{min-height:40px;padding:4px 14px;flex:none}
.door-line{display:block;font-family:var(--f-callig);font-size:14px;color:#e6cf97;margin-top:2px;min-height:1.4em}
.kalima{margin:10px 0 0;font-family:var(--f-callig);font-size:clamp(18px,1.9vw,24px);color:#ffe7b4;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.farewell{text-align:center;font-family:var(--f-display);font-size:clamp(30px,4vw,48px);color:#e8c98a;margin:0;padding:6px 16px 0}
/* ---------- the majlis ---------- */
.mj-word{text-align:center;padding-block:clamp(30px,5vw,56px)!important}.mj-word p.w{font-family:var(--f-display);font-size:clamp(34px,5vw,64px);line-height:1.35;color:#f7e7bb;margin:6px auto 14px;max-width:820px}
.flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.flip{all:unset;cursor:pointer;display:block;perspective:900px;min-height:124px;-webkit-tap-highlight-color:transparent}.flip:focus-visible{outline:2px solid #7a2d17;outline-offset:2px}
.flip>span{position:relative;display:block;width:100%;height:100%;min-height:124px;transform-style:preserve-3d;transition:transform .7s var(--ease-out)}.flip.on>span{transform:rotateY(180deg)}
.flip b,.flip i{position:absolute;inset:0;display:grid;place-items:center;padding:10px;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--line-2);font-style:normal}
.flip b{font-family:var(--f-display);font-size:24px;line-height:1.25;font-weight:400;background:rgba(122,45,23,.07)}.flip i{transform:rotateY(180deg);background:#7a2d17;color:#fbf0d8;font-size:14.5px;line-height:1.5}
.dyk{font-size:18px;line-height:1.75;min-height:4.2em;margin:0 0 12px}
.ann{list-style:none;margin:0;padding:0;display:grid;gap:8px}.ann li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--line-2);padding:6px 0;font-size:15.5px}.ann span{font-family:var(--f-num);color:#7b6a4e;flex:none}.ann .today{color:#7a2d17;font-weight:700}
/* ---------- your week, year and saved dates ---------- */
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.wk>div{border:1px solid var(--line-2);padding:8px 4px;text-align:center;min-width:0;min-height:112px}.wk .now{background:#7a2d17;color:#fbf0d8;border-color:#7a2d17}.wk .now small,.wk .now em{color:#f3e2bc}
.wk b{display:block;font-family:var(--f-num);font-size:22px;font-weight:600;line-height:1.2}.wk small{display:block;font-size:12px;color:#6d5b42}.wk em{display:block;font-style:normal;font-size:11.5px;line-height:1.35;margin-top:4px;color:#7a2d17;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.yrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 22px;margin-top:14px}.yrs p{margin:0 0 4px;font-size:14.5px;display:flex;justify-content:space-between;gap:10px}.yrs i{display:block;height:7px;background:rgba(122,45,23,.14);position:relative}.yrs i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);background:linear-gradient(to left,#b58a33,#7a2d17)}
.ev{position:relative}.star{all:unset;cursor:pointer;position:absolute;top:8px;inset-inline-start:8px;width:34px;height:34px;display:grid;place-items:center;font-size:21px;color:#b9a67e;transition:color .2s,scale .25s var(--ease-out);z-index:2}.star:hover{color:#b58a33;scale:1.15}.star.on{color:#c9983c}.star:focus-visible{outline:2px solid #7a2d17}
.fav-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.fav-list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--line-2);padding:6px 0}.fav-list span{font-family:var(--f-num);color:#7a2d17;flex:none}
/* ---------- the sun today ---------- */
.sun-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,3vw,30px);align-items:center}#sun-arc{display:block;width:100%;height:auto;overflow:visible}.sun-facts{display:grid;gap:7px;margin:12px 0 0}.sun-facts div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--line-2);padding:4px 0;font-size:15px}.sun-facts dt{color:#6d5b42}.sun-facts dd{margin:0;font-family:var(--f-num)}
#qibla-d{display:block;width:min(240px,70vw);margin-inline:auto;overflow:visible}#qibla-d .needle{transition:rotate 1.4s var(--ease-out);transform-origin:100px 100px}.qb-t{text-align:center;margin:8px 0 0;font-size:15px}
/* ---------- display settings and help ---------- */
.help{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:rgba(10,6,2,.66);padding:16px}.help[hidden]{display:none}.help-box{background:#f0e6d0;color:#2a1d12;max-width:520px;width:100%;max-height:88vh;overflow:auto;padding:24px;border:1px solid #b58a33;outline:1px solid #b58a33;outline-offset:-7px}.help-box h3{font-family:var(--f-display);font-size:30px;margin:0 0 10px;color:#7a2d17}.help-box dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;font-size:15px}.help-box dd{margin:0}.help-box kbd{font-family:var(--f-num);background:#2a1d12;color:#f6eeda;padding:1px 8px}.help-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;font-size:15px}.help-row .btn{min-height:38px;padding:3px 12px}
html.read #world,html.read .veil,html.read .pin{display:none!important}html.read body{background:#2a1d12}html.read .title-card{min-height:auto;padding-block:90px 20px}html.read .chapter{padding-bottom:50px}
main.fs1{zoom:1.1}main.fs2{zoom:1.22}
/* ---------- touches ---------- */
@supports(animation-timeline:scroll()){.sec-body::before{animation:sadu linear both;animation-timeline:scroll(root)}}@keyframes sadu{from{background-position-x:0}to{background-position-x:2400px}}
html .panel,html .glass,html .qc,html .ec,html .sc,html .ev,html .wheel,html .stat{box-shadow:0 12px 18px -8px rgba(20,10,0,.42)!important}.panel{contain:layout style}.sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}.sweep::after{content:"";position:absolute;inset:-20% -70%;background:linear-gradient(105deg,transparent 42%,rgba(255,236,190,.3) 50%,transparent 58%);animation:swp 1.5s ease-out forwards}@keyframes swp{from{translate:60% 0}to{translate:-60% 0}}
.medal.in{animation:mdl 1.1s var(--ease-out)}@keyframes mdl{from{rotate:-150deg;scale:.5}to{rotate:0deg;scale:1}}
.title-card h2.lit{animation:ttl 1.4s ease-out}@keyframes ttl{from{opacity:.5}to{opacity:1}}
.btn{position:relative;overflow:hidden;transition:translate .25s var(--ease-out),box-shadow .3s,background .2s}.rip{position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(255,240,205,.55);translate:-50% -50%;animation:rip .7s ease-out forwards;pointer-events:none}@keyframes rip{to{scale:28;opacity:0}}
.ec,.ev,.sc{transition:translate .3s var(--ease-out),box-shadow .3s}html .ec:hover,html .ev:hover,html .sc:hover{translate:0 -3px;box-shadow:0 0 0 1px #b58a33,0 14px 22px -14px rgba(40,22,4,.6)!important}
:focus-visible{animation:frg .35s ease-out}@keyframes frg{from{outline-offset:9px}}
.nav{position:relative}.nav a.on{box-shadow:none!important}.nav-ink{position:absolute;bottom:0;height:2px;background:#e8c98a;box-shadow:0 0 8px rgba(232,201,138,.8);transition:left .5s var(--ease-out),width .5s var(--ease-out);pointer-events:none}
.pf{position:fixed;top:calc(env(safe-area-inset-top,0px) - 1px);right:0;width:30px;height:16px;z-index:71;color:#e8c98a;translate:12px 0;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.totop{overflow:visible}.totop .ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);rotate:-90deg;pointer-events:none}.totop .ring circle{fill:none;stroke:#e8c98a;stroke-width:2.2;stroke-dasharray:100;stroke-dashoffset:100}
#sand-cv{position:fixed;inset:0;width:100%;height:100%;z-index:58;pointer-events:none;display:none}
.next-ch{display:flex;justify-content:center;gap:10px;align-items:center;margin:26px auto 0;width:max-content;max-width:calc(100% - 32px);padding:10px 22px;background:rgba(23,16,10,.82);border:1px solid #b58a33;color:#f3e8cf;text-decoration:none;font-size:15.5px;transition:background .2s,translate .25s var(--ease-out)}.next-ch:hover{background:#2a1d12;translate:-4px 0}.next-ch b{font-family:var(--f-display);font-size:24px;font-weight:400;color:#ffe3a0;line-height:1.1}
.day-note{margin-top:12px;display:grid;gap:4px}.day-note textarea{font:inherit;font-size:15.5px;background:rgba(255,250,235,.6);border:1px solid var(--line-2);color:#2a1d12;padding:8px 10px;resize:vertical;min-height:58px;width:100%}.note-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px;font-size:15px}.note-list li{display:flex;justify-content:space-between;gap:12px}.note-list span{font-family:var(--f-num);color:#7a2d17;flex:none}.leaf-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tb-mode{max-width:320px}.perf-t{font-family:var(--f-num)}
@media(max-width:820px){.sun-wrap{grid-template-columns:minmax(0,1fr)}.wk{grid-template-columns:repeat(7,minmax(74px,1fr));overflow-x:auto}}
@media(prefers-reduced-motion:reduce){.greet span{animation:none;opacity:1}.sweep,.pf{display:none}.medal.in,.title-card h2.lit{animation:none}}
@media print{#world,.veil,.grain,.progress,.top,.rail,.totop,.qbadge,.pin,.ticker,.cine-bar,#sand-cv,.pf,.door{display:none!important}html,body{background:#fff!important;color:#000!important}.title-card{min-height:0;padding:10px 0}.chapter{padding-bottom:16px;break-inside:auto}.panel{break-inside:avoid}.panel.kg-dark,.panel.kg-dark p,.panel.kg-dark li{color:#000!important}html .panel.kg-dark::before{background:#fff!important}.title-card h2,.sub,.meta,.kalima,.ord{color:#000!important;text-shadow:none!important}}
/* ---------- viewing mode ---------- */
html.cine .site,html.cine .veil,html.cine .grain,html.cine .progress{visibility:hidden}
html.cine,html.cine body{cursor:grab}
.cine-bar{position:fixed;inset-inline:0;bottom:max(14px,env(safe-area-inset-bottom));margin-inline:auto;width:min(760px,calc(100% - 24px));z-index:60;display:none;gap:12px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:12px 16px;background:rgba(14,9,4,.72);backdrop-filter:blur(10px);border:1px solid #b58a33;color:#f5e6c2;font-family:var(--f-body);cursor:auto}
html.cine .cine-bar{display:grid}
.cine-bar output{font-family:var(--f-num);font-size:19px;min-width:96px;text-align:center;color:#ffe3a0}.cine-bar input[type=range]{min-height:34px}.cine-bar select{min-height:40px;padding:4px 8px;background:rgba(0,0,0,.4);color:#f5e6c2;border-color:#b58a33;font-size:14px;border-radius:2px}.cine-bar .row2{grid-column:1/-1;display:flex;gap:10px;justify-content:space-between;align-items:center;font-size:13px;color:#d6c7a2}.cine-bar .row2 select{max-width:58%}.cine-bar option{color:#2a1d12;background:#efe6d2}
.cine-bar button{appearance:none;background:none;border:1px solid #b58a33;color:#f5e6c2;min-height:40px;padding:4px 14px;cursor:pointer;font:inherit}
/* ---------- greeting card, tasbih ---------- */
.card-maker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:18px;align-items:start}.card-maker canvas{display:block;width:100%;height:auto;border:1px solid var(--line-2);box-shadow:0 18px 34px -20px rgba(0,0,0,.7)}.card-maker .field{display:grid;gap:4px;margin-bottom:12px}.card-acts{display:flex;flex-wrap:wrap;gap:10px}
.tb-wrap{display:grid;justify-items:center;gap:10px;text-align:center}.tb{all:unset;cursor:pointer;position:relative;width:min(300px,76vw);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.tb:focus-visible{outline:2px solid #7a2d17;outline-offset:4px}.tb svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.tb circle{fill:#cdbb95;transition:fill .25s,r .25s}.tb circle.on{fill:#7a2d17}.tb .in{display:grid;gap:2px;justify-items:center;padding:20%}.tb .in b{font-family:var(--f-num);font-size:clamp(52px,12vw,76px);line-height:1;color:#7a2d17;font-weight:600}.tb .in span{font-family:var(--f-display);font-size:clamp(25px,5vw,33px);line-height:1.15}
.tb-total{font-size:15px;margin:0}.tb-seal{font-family:var(--f-callig);font-size:18px;line-height:1.7;min-height:3.2em;margin:0;max-width:440px}
.pal-ans{margin:0 0 8px;padding:10px 14px;background:#7a2d17;color:#fbf0d8;font-size:16px;line-height:1.6}
@media(max-width:820px){.card-maker{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.kg-flag::after,.kg-amen.go i{animation:none}}