/* Middle East Arabic · Warm Solar · iPhone-focused visual layer.
   Behavior, DOM hooks and the inline script remain frozen. */
:root{
  --ink:#f7f0dc;
  --soft:#f0edde;
  --mute:#d1c9b7;
  --night:#061f2b;
  --night-2:#041721;
  --surface:#0f2b34;
  --surface-2:#15363b;
  --gold:#e8b06f;
  --gold-hi:#edb879;
  --violet:#b86f4a;
  --rose:#b86f4a;
  --sage:#83958b;
  --line:rgba(228,179,100,.32);
  --focus:#f2c889;
  --card-ink:#1a1720;
  --shadow:0 8px 24px rgba(4,16,22,.24);
  --shadow-cta:0 10px 22px rgba(4,16,22,.34),inset 0 1px rgba(255,255,255,.28);
  --radius-card:18px;
  --radius-control:16px;
  --rail:24px;
}

*{box-sizing:border-box}
html{min-width:320px;background:#02131b;color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  width:100%;max-width:430px;min-width:320px;min-height:100dvh;margin:0 auto;overflow-x:hidden;
  background:
    radial-gradient(190px 260px at 108% 22%,rgba(184,111,74,.14),transparent 72%),
    linear-gradient(180deg,var(--night),var(--night-2));
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.58;letter-spacing:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body:before{display:none}
button,input,textarea,select{font:inherit;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;
}
h1,h2,h3,.brand{
  font-family:ui-serif,"New York",Georgia,"Times New Roman",serif;
  font-weight:400;letter-spacing:-.015em;
}
h1{font-size:36px;line-height:1.22}
h2{font-size:30px;line-height:1.32}
h3{font-size:20px;line-height:1.35}
.shell{width:calc(100% - (var(--rail) * 2));max-width:none;margin-inline:auto}
[hidden]{display:none!important}

/* Shared controls */
.top-action,.gold-btn,.soft-btn{
  min-height:56px;border-radius:var(--radius-control);font-size:17px;line-height:1.2;
  font-weight:650;letter-spacing:.01em;transition:filter .16s ease,transform .16s ease;
}
.top-action,.gold-btn{
  padding:16px 22px;border:0;background:var(--gold);color:var(--card-ink);
  box-shadow:var(--shadow-cta);
}
.soft-btn{
  padding:14px 20px;border:1px solid var(--gold);background:rgba(15,43,52,.92);
  color:var(--ink);box-shadow:none;
}
.top-action:hover,.gold-btn:hover,.soft-btn:hover{transform:none;filter:brightness(1.035)}
.top-action:active,.gold-btn:active,.soft-btn:active{transform:translateY(1px);filter:brightness(.96)}
.gold-btn:disabled,.soft-btn:disabled{opacity:.42;filter:saturate(.55);cursor:not-allowed}
.mini-gold{margin:0;padding:16px 20px;font-size:17px}

/* Frame 01 · approved Home master */
.top{
  position:absolute;z-index:40;top:0;left:50%;width:100%;max-width:430px;height:auto;
  padding-top:max(55px,calc(env(safe-area-inset-top) + 8px));border:0;background:transparent;
  transform:translateX(-50%);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.top .shell{height:36px;display:flex;align-items:center;justify-content:flex-start;margin:0 auto;padding:0;border:0;background:transparent}
.top nav,.top-action{display:none}
.brand{
  width:164px;height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;
  overflow:hidden;border:1px solid var(--gold);border-radius:18px;background:var(--night-2);
  color:var(--ink);font-size:0;text-decoration:none;box-shadow:none;
}
.brand:after{
  content:"تاروت القمر";font-family:"Noto Naskh Arabic","Amiri",Tahoma,Arial,serif;
  font-size:13px;font-weight:650;line-height:18px;letter-spacing:0;white-space:nowrap;
}
.brand-mark{width:16px;height:16px;display:grid;place-items:center;border:0;color:var(--gold);font:17px/1 Georgia,serif}
.hero.shell{
  position:relative;isolation:isolate;width:100%;min-height:568px;height:100svh;margin:0;
  overflow:hidden;padding:0;border:0;background:var(--night);color:var(--ink);
}
.hero:before{
  content:"";position:absolute;z-index:-2;inset:0;background-color:var(--night);
  background-image:url('./assets/guide/hero-middle-east-ar-comic-light-plate-v1.jpg');
  background-position:center;background-repeat:no-repeat;background-size:cover;pointer-events:none;
}
.hero:after{
  content:"";position:absolute;z-index:-1;inset:0 0 auto;height:525px;
  background:linear-gradient(180deg,rgba(6,31,43,.78),rgba(6,31,43,.34) 72%,transparent);
  pointer-events:none;
}
.hero>div:first-child{display:contents}
.hero .eyebrow,.hero h1,.hero .lead,.hero #startButton,.hero .fineprint{position:absolute;left:var(--rail);width:calc(100% - (var(--rail) * 2));margin:0}
.hero .eyebrow{
  top:145px;display:block;color:#e4b364;font-size:0;font-weight:650;line-height:18px;letter-spacing:0;text-align:right!important;
}
.hero .eyebrow:before{
  content:"";position:absolute;right:0;top:-19px;width:160px;height:1px;background:var(--gold);
}
.hero .eyebrow:after{content:"لحظة تصغي فيها إلى نفسك.";font-size:13px;letter-spacing:0}
.hero h1{top:174px;font-size:0;line-height:0;letter-spacing:-.02em;white-space:pre-line}
.hero h1 br{display:none}
.hero h1:after{content:"اسحب ثلاث بطاقات\A وتأمل هذه اللحظة.";font-size:34px;line-height:42px}
.hero .lead{top:278px;color:var(--soft);font-size:16px;line-height:25px}
.hero #startButton{
  top:393px;height:56px;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 20px;
}
.hero .fineprint{top:462px;color:var(--mute);font-size:0;line-height:19px;text-align:center}
.hero .fineprint:after{content:"تأمل مجاني · من دون تسجيل · للبالغين 18+";font-size:13px}
.hero .proof,.hero-visual,.ring,.visual-note{display:none}

/* Shared section shell */
.block{padding:48px 0;border-top:1px solid rgba(228,179,100,.16);scroll-margin-top:16px}
.block.tinted,.saved-block{background:transparent}
.section-head{display:block;margin:0 0 24px;text-align:right}
.section-head .eyebrow,.stage .eyebrow,.result .eyebrow,.detail-zone .eyebrow{
  display:block;color:var(--gold);font-size:13px;font-weight:700;line-height:18px;letter-spacing:.1em;text-transform:uppercase;
}
.section-head .eyebrow:before,.stage .eyebrow:before,.result .eyebrow:before,.detail-zone .eyebrow:before{content:""}
.section-head h2{margin:8px 0 0;font-size:30px;line-height:1.3}
.section-head p{max-width:none;margin:10px 0 0;color:var(--soft);font-size:15px;line-height:1.58}

/* Frame 02 · theme, spread and prompt */
#explore{padding-top:40px}
#explore>.shell>.section-head .eyebrow{font-size:0}
#explore>.shell>.section-head .eyebrow:after{content:"الخطوة 1 / 2";font-size:13px}
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.topic{
  position:relative;min-width:0;min-height:118px;padding:14px;color:var(--ink);text-align:left;
  border:1px solid rgba(228,179,100,.2);border-radius:18px;background:rgba(15,43,52,.92);
  box-shadow:inset 0 1px rgba(255,255,255,.03);transition:.16s;
}
.topic:hover,.topic.selected{transform:none;border-color:var(--gold);background:var(--surface-2);box-shadow:var(--shadow)}
.topic i{display:block;margin:0 0 8px;color:var(--gold);font:24px/1 Georgia,serif;font-style:normal}
.topic b{display:block;padding-right:22px;font-size:15px;font-weight:650;line-height:1.28}
.topic span{display:block;margin-top:5px;color:var(--mute);font-size:12px;line-height:1.35}
.topic.selected:after{
  content:"✓";position:absolute;top:10px;right:10px;width:24px;height:24px;display:grid;place-items:center;
  border-radius:50%;background:var(--gold);color:var(--card-ink);font-size:13px;font-weight:800;
}
.config{
  display:block;margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:24px;
  background:rgba(15,43,52,.9);box-shadow:var(--shadow);
}
.config>div+div{margin-top:26px;padding-top:24px;border-top:1px solid rgba(228,179,100,.18)}
.label{display:block;margin:0 0 10px;color:var(--gold);font-size:14px;font-weight:650;line-height:1.4}
.spread-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.spread{
  min-width:0;min-height:60px;padding:10px 8px;border:1px solid rgba(228,179,100,.2);border-radius:16px;
  background:var(--night-2);color:var(--mute);font-size:12px;line-height:1.3;
}
.spread b{display:block;color:var(--ink);font-size:14px}
.spread.active{border-color:var(--gold);background:rgba(232,176,111,.13);color:var(--gold-hi)}
textarea,.library-tools input,.library-tools select{
  width:100%;border:1px solid rgba(228,179,100,.24);border-radius:16px;background:var(--night-2);color:var(--ink);
}
textarea{min-height:108px;padding:14px;resize:vertical;font-size:16px;line-height:1.55}
textarea::placeholder,.library-tools input::placeholder{color:#9c998f}
.config-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:12px}
.config-bottom small{max-width:none;color:var(--mute);font-size:12px;line-height:1.45}
.config-bottom .soft-btn,.config-bottom .gold-btn{flex:0 0 auto}

/* Frame 03 · consent bottom sheet */
.modal{
  position:fixed;inset:0;z-index:80;display:none;align-items:end;justify-items:center;padding:0;
  background:rgba(4,23,33,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.modal.show{display:grid}
.modal-card{
  width:100%;max-height:92svh;overflow:auto;padding:26px 24px calc(24px + env(safe-area-inset-bottom));
  border:1px solid var(--line);border-bottom:0;border-radius:28px 28px 0 0;background:var(--surface);
  box-shadow:0 -18px 58px rgba(0,0,0,.4);
}
.modal-card .eyebrow{color:var(--gold)}
.modal-card h2{margin:8px 0 10px;font-size:30px;line-height:1.3}
.modal-card p{margin:0;color:var(--soft);font-size:15px;line-height:1.58}
.checkline{
  display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px;border:1px solid var(--line);
  border-radius:16px;background:var(--night-2);color:var(--soft);font-size:14px;line-height:1.48;
}
.checkline input{width:22px;height:22px;flex:0 0 22px;margin-top:1px;accent-color:var(--gold)}
.modal-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}
.modal-actions .gold-btn,.modal-actions .soft-btn{width:100%;justify-content:center;margin:0}

/* Frame 04 · draw */
.stage,.result{display:none}
.stage.show,.result.show{display:block}
.stage .shell{padding-top:0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.stage .center{text-align:left}
.stage .center .eyebrow{justify-content:flex-start!important}
.stage h2{margin:8px 0 0;font-size:30px;line-height:1.3}
.stage .center p{max-width:none;margin:10px 0 0;color:var(--soft);font-size:15px;line-height:1.55}
.meter{position:relative;width:100%;height:3px;overflow:hidden;margin:22px 0 24px;border-radius:99px;background:rgba(228,179,100,.22)}
.meter i{display:block;height:100%;border-radius:inherit;background:var(--gold);transition:width .35s ease}
.draw-status{margin:0 0 18px;color:var(--gold);font:650 14px/22px -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;text-align:left}
.draw-deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;width:100%;margin:0}
.back{aspect-ratio:76/116;border-radius:14px!important}
.back:hover{transform:none}
.tarot-card-side{border-color:var(--gold);border-radius:14px;box-shadow:0 12px 22px rgba(0,0,0,.28)}
.tarot-card-front{
  background:radial-gradient(circle at 50% 28%,rgba(232,176,111,.24),transparent 24%),linear-gradient(155deg,#21444a,var(--surface) 78%);
  color:var(--ink);
}
.tarot-card-front i{color:var(--gold)}
.tarot-card-front b{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.tarot-card-front small{color:var(--gold-hi)}
.stage-actions{display:grid;gap:10px;margin-top:18px}
.stage-actions .soft-btn,.stage-actions .gold-btn{width:100%;justify-content:center;margin:0}

/* Frame 05 · Safari handoff */
.safari-guide{
  position:fixed;inset:0;z-index:90;display:none;align-items:end;justify-items:center;padding:0;
  overflow-y:auto;background:rgba(4,23,33,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.safari-guide.show{display:grid}
.safari-guide-card{
  width:100%;max-height:94svh;overflow:auto;padding:24px 24px calc(24px + env(safe-area-inset-bottom));
  border:1px solid var(--line);border-bottom:0;border-radius:28px 28px 0 0;background:var(--surface);
  box-shadow:0 -18px 58px rgba(0,0,0,.42);
}
.safari-mark{width:44px;height:44px;margin:0 0 14px;border:1px solid var(--gold);border-radius:50%;background:rgba(232,176,111,.1);color:var(--gold);font-size:22px}
.safari-guide-card .eyebrow{color:var(--gold);font-size:13px;letter-spacing:.08em}
.safari-guide-card h2{margin:8px 0 10px;font-size:30px;line-height:1.3}
.safari-guide-card>p{margin:0;color:var(--soft);font-size:15px;line-height:1.55}
.safari-handoff-visual{width:min(100%,345px);margin:18px auto 16px;padding:6px;border-color:var(--line);border-radius:18px;background:var(--night-2)}
.safari-step{min-height:64px;padding:12px;border:1px solid rgba(228,179,100,.2);border-radius:16px;background:var(--night-2)}
.safari-step b{background:var(--gold);color:var(--card-ink)}
.safari-step strong{color:var(--gold-hi)}
.safari-guide-actions{display:grid;gap:10px;margin-top:18px}
.safari-guide-actions .gold-btn,.safari-guide-actions .soft-btn{width:100%;justify-content:center;margin:0}
.guide-status{min-height:40px;color:var(--mute);font-size:13px;line-height:1.45}

/* Frames 06–08 · Safari reading */
.safari-journey{min-height:100svh;padding:calc(48px + env(safe-area-inset-top)) 0 calc(28px + env(safe-area-inset-bottom));background:var(--night)}
.safari-journey .shell{width:calc(100% - (var(--rail) * 2))}
.safari-journey-panel{position:relative;overflow:visible;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.safari-journey-panel:before{display:none}
.journey-kicker{min-height:22px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;color:var(--gold);font-size:12px;font-weight:700;line-height:18px;letter-spacing:.08em}
.journey-kicker span:first-child{max-width:72%}
.journey-kicker span:last-child{flex:0 0 auto;color:var(--gold);letter-spacing:.02em}
.journey-progress{height:3px;overflow:hidden;margin:12px 0 24px;border-radius:99px;background:rgba(228,179,100,.22)}
.journey-progress i{display:block;height:100%;border-radius:inherit;background:var(--gold);transition:width .4s ease}
.safari-journey h1{margin:0 0 14px;color:var(--ink);font-size:34px;line-height:1.3;text-align:center}
.safari-journey h2{margin:0 0 12px;font-size:30px;line-height:1.3}
.journey-copy{margin:0;color:var(--soft);font-size:15px;line-height:1.58;text-align:center}
.journey-intention{margin:24px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.journey-intention label{display:block;margin-bottom:8px;color:var(--gold-hi);font-size:14px;font-weight:650}
.journey-intention textarea{min-height:88px;background:var(--night-2);font-size:16px}
.journey-start{width:100%;justify-content:center;margin:0}
.journey-small{margin:14px 0 0;color:var(--mute);font-size:13px;line-height:1.45;text-align:center}
.journey-card-stage{display:grid;justify-items:center;margin:22px 0 42px}
.journey-card{width:178px;aspect-ratio:178/273}
.journey-card-side{border-color:var(--gold);border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.42),0 0 0 1px rgba(237,184,116,.22)}
.journey-card-front{background:radial-gradient(circle at 50% 28%,rgba(232,176,111,.24),transparent 24%),linear-gradient(155deg,#21444a,var(--surface) 78%);color:var(--ink)}
.journey-card-front i{color:var(--gold)}
.journey-card-front b{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.journey-card-front small{color:var(--gold-hi)}
.journey-card-hint{bottom:-30px;color:var(--gold);font-size:13px;letter-spacing:.06em}
#safariRevealButton{width:100%;border:0;background:var(--gold);color:var(--card-ink)}
.journey-reveal{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-align:left}
.journey-reveal:not(.show),.journey-next:not(.ready){display:none}
.journey-reveal h3{color:var(--gold);font-size:20px}
.journey-reveal p{margin:8px 0 0;color:var(--soft);font-size:16px;line-height:1.55}
.journey-response-label{margin:16px 0 10px;color:var(--ink);font-size:14px;font-weight:700}
.journey-response-options{display:grid;grid-template-columns:1fr;gap:10px}
.journey-response{width:100%;min-height:56px;padding:14px 16px;border:1px solid rgba(228,179,100,.24);border-radius:16px;background:var(--surface-2);color:var(--soft);font-size:14px;font-weight:650;text-align:left}
.journey-response.selected{border-color:var(--gold);background:rgba(232,176,111,.14);color:var(--ink)}
.journey-response.selected:after{content:"✓";float:right;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--sage);color:var(--night-2)}
.journey-next{width:100%;justify-content:center;margin-top:12px}
.journey-synthesis{text-align:left}
.journey-synthesis h1{text-align:left}
.journey-thread{display:grid;gap:10px;margin:24px 0;text-align:left}
.journey-thread div{min-height:72px;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:14px;border:1px solid rgba(228,179,100,.22);border-radius:18px;background:var(--surface);color:var(--soft);font-size:14px}
.journey-thread i{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;background:rgba(232,176,111,.08);color:var(--gold);font-size:20px;font-style:normal}
.journey-note-echo{margin:16px 0;color:var(--gold-hi);font:20px/1.5 ui-serif,"New York",Georgia,serif}
.journey-complete{width:100%;justify-content:center;margin:0}

/* Frame 09 · complete result */
.result .shell{padding-top:0;padding-bottom:calc(48px + env(safe-area-inset-bottom))}
.result-box{display:flex;flex-direction:column;padding:0;border:0;background:transparent;box-shadow:none;text-align:left}
.card-reveal{order:-1;min-height:150px;width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.revealed{width:calc((100% - 28px)/3);max-width:105px;aspect-ratio:105/142;padding:10px 7px;border-color:var(--gold);border-radius:14px;background:var(--surface);box-shadow:none;color:var(--ink)}
.revealed:nth-child(2n){transform:none;background:var(--surface)}
.revealed strong{color:var(--gold);font-size:30px}
.revealed small{color:var(--soft);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:10px;white-space:normal;line-height:1.2}
.result-box h2{margin:4px 0 0;font-size:30px;line-height:1.3}
.summary{margin:14px 0 0;color:var(--soft);font-size:16px;line-height:1.58}
.result-meta{margin:14px 0 0;color:var(--mute);font-size:13px;line-height:1.5}
.result-meta b{color:var(--gold-hi)}
.result-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
.result-actions .gold-btn,.result-actions .soft-btn{width:100%;justify-content:center;margin:0}
.saved{min-height:18px;color:#b7ccb9;font-size:13px;text-align:center}
.answer-path{display:grid;gap:10px;margin:24px 0 0}
.answer-step{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px;border:1px solid rgba(228,179,100,.22);border-radius:18px;background:var(--surface)}
.answer-step i{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;background:transparent;color:var(--gold);font-size:20px}
.answer-step b{color:var(--gold);font-size:14px}
.answer-step p{margin:5px 0 0;color:var(--soft);font-size:14px;line-height:1.55}
.clarifier-box{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.clarifier-box h3{color:var(--gold);font-size:20px}
.clarifier-box p{color:var(--soft);font-size:14px}
.clarifier-choices{display:grid;gap:8px}
.clarifier-choice{min-height:48px;border-radius:14px}
.clarifier-reveal{border-color:var(--line)}
.clarifier-glyph{border-color:var(--gold);background:var(--surface-2);color:var(--gold)}
.detail-zone{margin-top:36px;text-align:left}
.detail-zone h2{margin:8px 0 22px;font-size:28px;line-height:1.3}
.detail-list{display:grid;grid-template-columns:1fr;gap:12px}
.detail{min-height:0;display:grid;grid-template-columns:74px 1fr;gap:12px;padding:16px;border:1px solid rgba(228,179,100,.2);border-radius:18px;background:var(--surface)}
.card-glyph{border-color:var(--gold);border-radius:14px;background:var(--surface-2);color:var(--gold)}
.card-glyph i{color:var(--gold)}
.detail h3{font-size:19px}
.position{color:var(--gold)}
.detail p{color:var(--soft);font-size:14px;line-height:1.55}
.tags span{background:rgba(232,176,111,.09);color:var(--mute)}
.followup{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.followup div{padding:18px;border:1px solid rgba(228,179,100,.2);border-radius:18px;background:var(--surface)}
.followup h3{color:var(--gold)}
.followup p{color:var(--soft);font-size:14px}
body.safari-result .result .shell{padding-top:calc(48px + env(safe-area-inset-top))}
body.safari-result.safari-complete .result .shell{padding-bottom:calc(220px + env(safe-area-inset-bottom))}
body.safari-result.safari-complete .result-actions:before{
  content:"";position:fixed;z-index:48;left:50%;bottom:0;width:100%;max-width:430px;height:calc(190px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(228,179,100,.2);background:var(--night-2);transform:translateX(-50%);pointer-events:none;
}
body.safari-result.safari-complete #saveButton,body.safari-result.safari-complete #shareButton{
  position:fixed;z-index:50;left:50%;width:calc(100% - 56px);max-width:338px;transform:translateX(-50%);
}
body.safari-result.safari-complete #saveButton{bottom:calc(104px + env(safe-area-inset-bottom))}
body.safari-result.safari-complete #shareButton{bottom:calc(40px + env(safe-area-inset-bottom))}
body.safari-result.safari-complete #savedState{
  position:fixed;z-index:50;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));width:338px;max-width:calc(100% - 56px);
  color:var(--mute);font-size:12px;line-height:18px;text-align:center;transform:translateX(-50%);
}

/* Secondary content */
.history{display:grid;grid-template-columns:1fr;gap:10px}
.history-empty{padding:22px;border:1px dashed var(--line);border-radius:16px;color:var(--mute);font-size:14px}
.history-item,.library-card,.faq details{border-color:rgba(228,179,100,.2);border-radius:16px;background:var(--surface);color:var(--ink)}
.history-item{min-height:108px;padding:16px}
.history-item time,.history-item span{color:var(--mute)}
.library-tools{display:grid;grid-template-columns:1fr;gap:10px;margin:20px 0}
.library-tools input,.library-tools select{height:48px;padding:0 14px}
.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.library-card{min-height:104px}
.library-card i{color:var(--gold)}
.library-detail{color:var(--soft)}
.library-detail.show{border-color:var(--gold);background:var(--surface)}
.about{display:grid;grid-template-columns:1fr;gap:24px}
.about p,.faq p{color:var(--soft);font-size:14px}
.faq{display:grid;gap:10px}
.faq summary{min-height:52px;color:var(--ink)}
footer{padding:28px var(--rail) calc(32px + env(safe-area-inset-bottom));border-color:rgba(228,179,100,.18);color:var(--mute)}
.toast{bottom:calc(22px + env(safe-area-inset-bottom));border:0;border-radius:16px;background:var(--gold);color:var(--card-ink);box-shadow:var(--shadow-cta)}

@media(max-width:350px){
  :root{--rail:20px}
  .top{padding-top:max(24px,calc(env(safe-area-inset-top) + 4px))}
  .hero:after{height:448px}
  .hero .eyebrow{top:92px}
  .hero .eyebrow:after{font-size:12px;letter-spacing:.8px;white-space:nowrap}
  .hero .eyebrow:before{top:-14px;width:142px}
  .hero h1{top:119px;font-size:0;line-height:0;white-space:pre-line}
  .hero h1:after{content:"اسحب ثلاث بطاقات\A وتأمل هذه اللحظة.";font-size:27px;line-height:32px}
  .hero .lead{top:202px;font-size:15px;line-height:23px}
  .hero #startButton{top:340px;width:280px}
  .hero #startButton{font-size:0}
  .hero #startButton:before{content:"ابدأ القراءة";font-size:17px}
  .hero #startButton span{font-size:17px}
  .hero .fineprint{top:406px;width:280px;padding:4px 6px;border-radius:14px;background:rgba(4,23,33,.76)}
  .topics{gap:8px}
  .topic{min-height:116px;padding:12px 10px}
  .topic b{font-size:14px}
  .config{padding:16px}
  .config-bottom{flex-direction:column;align-items:stretch}
  .config-bottom .soft-btn,.config-bottom .gold-btn{width:100%;justify-content:center}
  .draw-deck{gap:8px 6px}
  .modal-card,.safari-guide-card{padding-left:20px;padding-right:20px}
  .safari-journey h1{font-size:30px}
  .journey-kicker{font-size:11px}
  .card-reveal{gap:8px}
  .detail{grid-template-columns:62px 1fr;padding:14px}
}

@media(min-width:421px){
  :root{--rail:32px}
  .top{padding-top:max(64px,calc(env(safe-area-inset-top) + 10px))}
  .hero:after{height:570px}
  .hero .eyebrow{top:158px}
  .hero .eyebrow:before{top:-19px;width:172px}
  .hero h1{top:190px}
  .hero h1:after{font-size:36px;line-height:45px}
  .hero .lead{top:302px;font-size:17px;line-height:26px}
  .hero #startButton{top:420px;width:366px}
  .hero .fineprint{top:489px}
}

@media(min-width:431px){body{border-radius:36px;box-shadow:0 0 0 1px rgba(228,179,100,.12);overflow:hidden auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.journey-card-inner{transition:none!important}}