:root{
  --bg:#FFFFFF; --surface:#F3F5FB; --ink:#1B2A5C; --muted:#4A5A88;
  --gold:#1B2A5C; --ember:#1B2A5C; --line:rgba(27,42,92,.15);
  --ribbon1:#1B2A5C; --ribbon2:#0A1230; --ribbonHi:#3A55A5;
  --btn:#1B2A5C; --halo:rgba(58,85,165,.35); --halo2:rgba(58,85,165,.7);
  --glow:linear-gradient(120deg,#3A55A5 0%,#1B2A5C 50%,#0A1230 100%);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#FFFFFF; --surface:#F3F5FB; --ink:#1B2A5C; --muted:#4A5A88;
    --gold:#1B2A5C; --ember:#1B2A5C; --line:rgba(27,42,92,.15);
    --btn:#1B2A5C; --halo:rgba(58,85,165,.35); --halo2:rgba(58,85,165,.7);
    --glow:linear-gradient(120deg,#3A55A5 0%,#1B2A5C 50%,#0A1230 100%);
    color-scheme:light;
  }
}
:root[data-theme="dark"]{
  --bg:#FFFFFF; --surface:#F3F5FB; --ink:#1B2A5C; --muted:#4A5A88;
  --gold:#1B2A5C; --ember:#1B2A5C; --line:rgba(27,42,92,.15);
  --btn:#1B2A5C; --halo:rgba(58,85,165,.35); --halo2:rgba(58,85,165,.7);
  --glow:linear-gradient(120deg,#3A55A5 0%,#1B2A5C 50%,#0A1230 100%);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:"Tajawal","Segoe UI",Tahoma,sans-serif;font-size:clamp(16px,1.6vw,22px);line-height:1.55;
  overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation;
  display:flex;flex-direction:column;
}
.display{font-family:"Reem Kufi","Tajawal",Georgia,serif}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(12px,2vw,24px) clamp(16px,3vw,40px)}
.brand{display:flex;align-items:center;gap:.8rem}
.brand .logo{height:clamp(64px,9vh,104px);width:auto;display:block}
header{direction:ltr}
[dir="rtl"] .brand>div{direction:rtl}
.brand b{display:block;font-family:"Reem Kufi","Tajawal",serif;font-size:1.15em;font-weight:600;letter-spacing:.01em}
.brand small{color:var(--muted);font-size:.8em}
.controls{display:flex;gap:.5rem}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.45em 1.1em;font-weight:500;min-height:44px}
#musicBtn[hidden]{display:none}

/* Screens */
main{flex:1;position:relative;min-height:0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s;padding:0 clamp(16px,4vw,56px)}
.screen.active{opacity:1;visibility:visible}

/* Ceremony */
#ceremony{justify-content:space-between;padding-top:2vh;padding-bottom:6vh;text-align:center}
.ceremony-top h1{font-family:"Reem Kufi","Tajawal",serif;font-weight:700;font-size:clamp(44px,8vw,120px);line-height:1;margin:0;
  background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}
.ceremony-top p{margin:.6em 0 0;color:var(--muted);font-size:1.1em}
.stage{position:absolute;left:0;right:0;top:50%;height:150px;transform:translateY(-35%)}
.ribbon{position:absolute;inset:0;display:flex;align-items:center;direction:ltr}
.half{flex:1;height:68px;background:linear-gradient(180deg,var(--ribbon1) 0%,var(--ribbonHi) 38%,var(--ribbon1) 60%,var(--ribbon2) 100%);
  border-top:4px solid #FFFFFF;border-bottom:4px solid #FFFFFF;
  box-shadow:0 0 0 1px rgba(10,18,48,.3),0 10px 26px rgba(10,18,48,.3);transition:transform 1.8s cubic-bezier(.5,0,.75,.4),opacity 1.8s ease}
.half.l{transform-origin:left center}
.half.r{transform-origin:right center}
.cut .half.l{transform:rotate(38deg) translateY(30vh);opacity:0}
.cut .half.r{transform:rotate(-38deg) translateY(30vh);opacity:0}
.cutter{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);border:none;background:none;padding:0;border-radius:50%;
  transition:transform .6s ease,opacity .6s ease}
.cutter .disc{position:absolute;inset:14px;border-radius:50%;background:var(--btn);display:grid;place-items:center;
  box-shadow:0 0 0 6px var(--bg),0 12px 34px var(--halo)}
.cutter .disc .word{font-family:"Reem Kufi","Tajawal",serif;font-weight:600;color:#FFFFFF;font-size:22px;line-height:1.1;text-align:center;padding:0 8px}
[lang="ar"] .cutter .disc .word{font-size:28px}
.cutter .ring{position:absolute;inset:0;transform:rotate(-90deg)}
.cutter .ring circle{fill:none;stroke-width:6}
.ring .track{stroke:var(--line)}
.ring .prog{stroke:var(--ember);stroke-linecap:round}
.cutter.holding{transform:translate(-50%,-50%) scale(.94)}
.cut .cutter{opacity:0;transform:translate(-50%,-50%) scale(1.4);pointer-events:none}
.blessing{position:absolute;left:0;right:0;top:calc(50% + 88px);text-align:center;font-family:"Reem Kufi","Tajawal",serif;font-weight:600;font-size:clamp(22px,2.6vw,34px);line-height:1.3;color:#3A55A5;transition:opacity .5s}
.cut .blessing{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .cutter:not(.holding) .disc{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 6px var(--bg),0 12px 34px var(--halo)}50%{box-shadow:0 0 0 6px var(--bg),0 12px 54px var(--halo2)}}
.hint{font-size:1.2em;font-weight:500;transition:opacity .4s}
.cut .hint{opacity:0}
.opened{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .9s ease .9s;pointer-events:none}
.cut .opened{opacity:1;pointer-events:auto}
.opened h2{font-family:"Reem Kufi","Tajawal",serif;font-size:clamp(24px,3.4vw,50px);margin:0 auto;line-height:1.4;max-width:min(92%,1100px)}
.opened p{color:var(--muted);margin:.5em 0 1.4em;font-size:1.15em}
.cta{border:none;border-radius:999px;padding:.8em 2.6em;font-weight:700;font-size:1.1em;background:var(--btn);color:#FFFFFF;min-height:56px}

/* Home */
#home{align-items:stretch}
.home-grid{width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(16px,3vw,40px);align-items:center}
.welcome h2{font-family:"Reem Kufi","Tajawal",serif;font-size:clamp(34px,5vw,72px);line-height:1.08;margin:0 0 .35em}
.welcome p{color:var(--muted);max-width:34ch;margin:0;font-size:1.1em}
.welcome .rule{width:120px;height:6px;border-radius:3px;background:var(--glow);margin:1.4em 0}
.actions{display:flex;flex-direction:column;gap:.9rem}
.action{display:flex;align-items:center;gap:1rem;text-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:1.1em 1.3em;min-height:84px;font-size:1.12em;font-weight:500;transition:border-color .2s,transform .15s}
.action:active{transform:scale(.98)}
.action .ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--bg);color:var(--gold)}
.action .ic svg{width:28px;height:28px}
.action span small{display:block;color:var(--muted);font-size:.8em;font-weight:400}
.action.quiet{background:none;min-height:60px;font-size:1em}

/* Inner pages */
.page{width:100%;max-width:1100px;height:100%;display:flex;flex-direction:column;padding:1vh 0 3vh}
.page-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2em}
.page-head h2{font-family:"Reem Kufi","Tajawal",serif;font-size:clamp(28px,3.8vw,52px);margin:0}
.back{border:1px solid var(--line);background:var(--surface);border-radius:999px;width:56px;height:56px;display:grid;place-items:center;flex:none}
[dir="rtl"] .back svg{transform:scaleX(-1)}
.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 2.5rem;overflow:auto}
.services li{display:flex;gap:1rem;align-items:flex-start;padding:1.1em 0;border-bottom:1px solid var(--line)}
.services li::before{content:"";flex:none;width:12px;height:12px;margin-top:.55em;transform:rotate(45deg);background:var(--glow)}
.services b{display:block;font-size:1.1em}
.services span{color:var(--muted);font-size:.92em}
.book{display:grid;grid-template-columns:minmax(0,900px);justify-content:center;gap:clamp(16px,3vw,40px);min-height:0;flex:1}
.pad-wrap{display:flex;flex-direction:column;gap:.8rem;min-height:0}
.pad{position:relative;flex:1;min-height:240px;background:#FFFFFF;border:2px solid var(--line);border-radius:18px;overflow:hidden;touch-action:none;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 63px,rgba(27,42,92,.10) 63px,rgba(27,42,92,.10) 64px)}
.pad canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.pad-hint{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);pointer-events:none;font-size:1.1em;transition:opacity .3s}
.pad.inked .pad-hint{opacity:0}
.pad-actions{display:flex;gap:.8rem}
.pad-actions .cta{flex:1}
.entry img{display:block;width:100%;height:auto;border-radius:8px;background:#FFFFFF;margin-bottom:.3em}
.status{min-height:1.5em;color:var(--gold);font-weight:500}
.entries{overflow:auto;display:flex;flex-direction:column;gap:.8rem;padding-inline-end:.3rem}
.entry{background:var(--surface);border-inline-start:4px solid var(--gold);border-radius:12px;padding:.9em 1.1em}
.entry p{margin:0 0 .3em;font-size:1.02em}
.entry small{color:var(--muted)}
.empty{color:var(--muted);border:1px dashed var(--line);border-radius:14px;padding:2em;text-align:center}
.about-body{max-width:62ch}
.about-body p{font-size:1.15em;line-height:1.7;margin:0 0 1em}
.show{position:relative;flex:1;min-height:0;border-radius:22px;overflow:hidden;background:#0A1230;touch-action:pan-y}
.show-frame{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide.ph{display:grid;place-items:center;background:linear-gradient(135deg,#1B2A5C,#0A1230);color:rgba(255,255,255,.78);text-align:center;font-size:1.1em}
.slide.ph svg{width:64px;height:64px;opacity:.6;margin:0 auto .6em;display:block}
.show-caption{position:absolute;inset-inline:0;bottom:0;padding:2.4em 1.4em 1.1em;background:linear-gradient(to top,rgba(10,18,48,.88),transparent);color:#FFFFFF;display:flex;flex-direction:column;gap:.1em;pointer-events:none}
.show-caption span{font-size:.85em;opacity:.85}
.show-caption b{font-family:"Reem Kufi","Tajawal",serif;font-size:clamp(22px,2.6vw,36px);font-weight:600}
.show-nav{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:#1B2A5C;display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.show-nav.prev{inset-inline-start:16px}
.show-nav.next{inset-inline-end:16px}
[dir="rtl"] .show-nav svg{transform:scaleX(-1)}
.timeline{list-style:none;margin:1em 0 0;padding:0;display:flex;gap:.6rem}
.timeline li{flex:1;min-width:0}
.timeline button{width:100%;border:none;background:none;padding:.3em 0;text-align:start;color:var(--muted);font-size:.85em;min-height:44px}
.timeline button::before{content:"";display:block;height:5px;border-radius:3px;background:var(--line);margin-bottom:.45em;transition:background .4s}
.timeline .done button::before{background:#3A55A5}
.timeline .cur button::before{background:#1B2A5C}
.timeline .cur button{color:var(--ink);font-weight:700}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
@media (max-width:760px){
  .home-grid,.book{grid-template-columns:1fr}
  .stage{height:120px}.half{height:52px}
  .cutter{width:120px;height:120px}
  .blessing{top:calc(50% + 70px)}
  .cutter .disc .word,[lang="ar"] .cutter .disc .word{font-size:17px}
}

.show-empty{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.78);font-size:1.2em}
.show-empty[hidden],.show-nav[hidden],.show-caption[hidden],.timeline[hidden]{display:none}
.timeline button{min-height:44px}
.slide img{background:#0A1230}
.cutter{touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}