/* Ibn Arabi · Page 1 · The Hidden Treasure. Matches the live course: Times serif, gold on black, borderless art feathered into the dark. */
@font-face{font-family:"IA Arabic";src:url(/nafs/fonts/amiri-cl.woff) format("woff"),local("Amiri");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;font-display:swap}
:root{--gold:#d4a537;--lg:#ffe08a;--pale:#f0ddb4;--ink:#e9dfcb;--mute:#bda888;--dim:#7f705a;--brz:#8a6a48}
*{box-sizing:border-box}
html{background:#000;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:#000;color:var(--ink);font:400 18px/1.66 "IA Arabic","Times New Roman",Times,serif;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.ar{font-family:"IA Arabic","Geeza Pro","Noto Naskh Arabic","Amiri",serif;unicode-bidi:isolate;font-style:normal}
a,a:visited{color:var(--lg);text-decoration:none;border-bottom:1px solid rgba(255,224,138,.35)}
a:hover,a:focus-visible{color:#fff;border-color:#fff;outline:none}
::selection{background:rgba(212,165,55,.35);color:#fff}

/* ---------- opener (from the course's v7 opener; film plays once, ends on black, gold title fades in) ---------- */
.v7o{position:relative;z-index:2;background:#000;display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100svh;min-height:calc(100vw * 16 / 9);overflow:hidden;margin:0;padding:0;isolation:isolate}
.v7o-f{position:relative;width:100vw;aspect-ratio:1216/1648;flex:none;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}
.v7o-f video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;background:#000;opacity:0;transition:opacity .35s ease}
.v7o-f video::-webkit-media-controls,.v7o-f video::-webkit-media-controls-start-playback-button,.v7o-f video::-webkit-media-controls-overlay-play-button,.v7o-f video::-webkit-media-controls-panel,.v7o-f video::-webkit-media-controls-play-button,.v7o-f video::-webkit-media-controls-enclosure{display:none!important;-webkit-appearance:none}
.v7o.playing .v7o-f video{opacity:1}
.v7o.nofilm .v7o-f video{opacity:0!important;transition:none}
.v7o.nofilm .v7o-f{display:none!important}
.v7o-x{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 7vw;pointer-events:none}
.v7o-k{margin:0 0 1.1em;font:400 13px/1 "Times New Roman",Times,serif;letter-spacing:.32em;text-transform:uppercase;color:#7a6146;opacity:0}
.v7o-t{margin:0;font:400 clamp(44px,12.4vw,108px)/1.04 "Times New Roman",Times,serif;letter-spacing:.005em;color:var(--brz);-webkit-text-fill-color:var(--brz);opacity:0;text-wrap:balance}
.v7o-l{display:block;width:min(52%,380px);height:1px;margin:.55em 0 .75em;background:linear-gradient(90deg,transparent,var(--brz) 18%,var(--brz) 82%,transparent);font-size:clamp(44px,12.4vw,108px);opacity:0}
.v7o-g{margin:0;max-width:21em;font:italic 400 clamp(19px,5.3vw,29px)/1.38 "Times New Roman",Times,serif;color:#a3896a;opacity:0;text-wrap:balance}
.v7o-c{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:2;width:12px;height:12px;margin-left:-6px;border-right:1px solid var(--brz);border-bottom:1px solid var(--brz);transform:rotate(45deg);opacity:0;pointer-events:none}
.v7o.done .v7o-k{animation:v7in 1.8s ease-out .2s forwards}
.v7o.done .v7o-t{animation:v7in 2.6s cubic-bezier(.42,0,1,1) .1s forwards}
.v7o.done .v7o-l{animation:v7in 1.8s cubic-bezier(.42,0,1,1) 1.4s forwards}
.v7o.done .v7o-g{animation:v7in 2.4s cubic-bezier(.42,0,1,1) 1.7s forwards}
.v7o.done .v7o-c{animation:v7cue 1.6s ease-in 4.4s forwards}
.v7o.nofilm.done .v7o-t{animation:v7in 1.1s ease-out .05s forwards}
.v7o.nofilm.done .v7o-l{animation:v7in .8s ease-out .45s forwards}
.v7o.nofilm.done .v7o-g{animation:v7in 1s ease-out .6s forwards}
.v7o.nofilm.done .v7o-c{animation:v7cue 1s ease-in 1.8s forwards}
.v7o.now .v7o-k,.v7o.now .v7o-t,.v7o.now .v7o-l,.v7o.now .v7o-g{animation:none!important;opacity:1}
.v7o.now .v7o-c{animation:none!important;opacity:.7}
.v7o.done .v7o-f{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
@keyframes v7in{to{opacity:1}}
@keyframes v7cue{to{opacity:.7}}
@media (min-width:700px){
 .v7o{min-height:600px}
 .v7o-f{width:auto;height:min(92vh,1100px);height:min(92svh,1100px)}}

/* ---------- page ---------- */
main{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:56px 22px calc(70px + env(safe-area-inset-bottom))}
.eyebrow{margin:0 0 10px;font:400 12.5px/1.3 "Times New Roman",Times,serif;letter-spacing:.28em;text-transform:uppercase;color:#d6b070;text-align:center}
.hero{text-align:center;margin:0 0 44px}
h1{margin:0;font:400 clamp(42px,10vw,64px)/1.05 "Times New Roman",Times,serif;color:var(--pale)}
.harb{margin:8px 0 18px;font-size:34px;line-height:1.6;color:#f3d9a8;direction:rtl}
.lede{margin:0 auto;max-width:30em;font-size:19px;line-height:1.66;color:#e6dccb;text-align:left}
p{margin:0 0 14px}
strong{color:#fff3d6;font-weight:400;font-style:normal;letter-spacing:.01em}
em{color:#f1e5c8}

.bh{margin:0 0 18px;text-align:center;font:400 clamp(30px,7.6vw,40px)/1.1 "Times New Roman",Times,serif;color:var(--pale)}
.five{list-style:none;counter-reset:f;margin:0 auto 10px;padding:0;max-width:34em}
.five li{counter-increment:f;position:relative;padding:12px 0 12px 54px}
.five li::before{content:counter(f);position:absolute;left:0;top:13px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:400 18px/1 "Times New Roman",Times,serif;color:#1a1208;
 background:radial-gradient(circle at 35% 30%,#fff1c4,#e7bd5e 45%,#9c7124 100%);box-shadow:0 0 14px rgba(255,210,120,.28),inset 0 -2px 3px rgba(60,35,5,.5)}
.five li+li::after{content:"";position:absolute;left:17.5px;top:-12px;height:24px;width:1px;background:linear-gradient(180deg,transparent,rgba(212,165,55,.6),transparent)}
.five b{display:block;font:400 23px/1.2 "Times New Roman",Times,serif;color:#ffe2a6}
.five span{display:block;font-size:17.5px;line-height:1.55;color:#ddd2bd}

.rule{height:1px;margin:56px auto;max-width:420px;background:linear-gradient(90deg,transparent,rgba(212,165,55,.55),transparent)}

/* move sections: no boxes, just type on black */
.mv{scroll-margin-top:16px}
.mh{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.mn{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:400 25px/1 "Times New Roman",Times,serif;color:#1a1208;
 background:radial-gradient(circle at 35% 30%,#fff1c4,#e7bd5e 45%,#9c7124 100%);box-shadow:0 0 22px rgba(255,210,120,.3),inset 0 -3px 4px rgba(60,35,5,.5)}
.mn.o{font-size:22px}
.mh h2{margin:0;font:400 clamp(32px,8vw,42px)/1.08 "Times New Roman",Times,serif;color:var(--pale)}
.term{margin:4px 0 0;font:italic 400 16px/1.35 "Times New Roman",Times,serif;color:var(--mute)}
.term .ar{font-style:normal;font-size:22px;color:#f3d9a8;margin-right:8px;vertical-align:-2px}
.mv>p{font-size:19px;line-height:1.68;color:#e6dccb}
p .ar{font-size:1.15em;color:#f3d9a8}
.mv>p.big,.big{margin:24px 0;text-align:center;font-style:italic;font-size:clamp(25px,6vw,31px);line-height:1.35;color:#ffe2a6;text-wrap:balance}

.verse{margin:24px 0;padding:6px 0;text-align:center;border:0;background:none}
.verse .a{margin:0 0 8px;font-size:29px;line-height:1.85;color:#f3d9a8;direction:rtl}
.verse .e{margin:0;font:italic 400 22px/1.42 "Times New Roman",Times,serif;color:#f1e5c8;text-wrap:balance}
.verse .c{margin:8px 0 0;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#a99271}
.verse.sm .a{font-size:25px}.verse.sm .e{font-size:19px}

/* paintings: no frame, no edge; feathered on every side into black */
.art{position:relative;margin:26px -22px;padding:0;aspect-ratio:var(--ar)}
.art.tall{max-width:520px;margin-left:auto;margin-right:auto}
.art .pv{position:absolute;inset:0;overflow:hidden;isolation:isolate;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-composite:intersect}
.art img.kb{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 60%}
.live .pv img.kb{animation:kb 46s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-.8%,-1.2%,0)}}
.pv .fx.tw{opacity:0}
.live .pv .fx.tw{animation:fxTw 5s ease-in-out infinite}
.pv .fx.glow,.pv .fx.heart{opacity:.55}
.live .pv .fx.glow{animation:fxBreath 6.5s ease-in-out infinite alternate}
.live .pv .fx.g2{animation-duration:8s;animation-delay:-3s}
.live .pv .fx.heart{animation:fxHeart 4.2s ease-in-out infinite}
@keyframes fxHeart{0%,100%{transform:scale(.85);opacity:.45}18%{transform:scale(1.08);opacity:.95}34%{transform:scale(.95);opacity:.65}50%{transform:scale(1.04);opacity:.85}}
.pv .fx.rings2{opacity:.35}
.live .pv .fx.rings2{animation:fxBreath 8.4s ease-in-out infinite alternate}
.pv .fx.stone{opacity:.32}
.live .pv .fx.stone{animation:fxShim 5.5s ease-in-out infinite alternate}
@keyframes fxShim{from{opacity:.18;transform:translate3d(0,.4%,0) scale(1.0)}to{opacity:.46;transform:translate3d(0,-.6%,0) scale(1.012)}}
.pv .fx.fil,.pv .fx.wfil{opacity:.3;transform-origin:50% 100%}
.live .pv .fx.fil{animation:fxSway 9s ease-in-out infinite alternate}
.live .pv .fx.wfil{animation:fxWide 14s ease-in-out infinite alternate}
@keyframes fxSway{from{transform:translate3d(-1.2%,1%,0) skewX(-1.5deg);opacity:.2}to{transform:translate3d(1.2%,-1.5%,0) skewX(1.5deg);opacity:.42}}
@keyframes fxWide{from{transform:translate3d(-1.5%,.5%,0) scaleY(.97);opacity:.18}to{transform:translate3d(1.5%,-.5%,0) scaleY(1.03);opacity:.38}}
.pv .fx.refl{opacity:.35}
.live .pv .fx.refl{animation:fxRefl 6s ease-in-out infinite alternate}
@keyframes fxRefl{from{transform:scaleX(.97);opacity:.22}to{transform:scaleX(1.03);opacity:.5}}
.pv .fx.pd{opacity:.4}
.live .pv .fx.pd{animation:fxDrift 30s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.pv img.kb{animation:none!important}}

/* figures: title, art, control, one plain caption */
.fig{margin:30px 0;padding:0;border:0;background:none;text-align:center}
.fig h3{margin:0 0 6px;font:400 clamp(26px,6.6vw,34px)/1.12 "Times New Roman",Times,serif;color:var(--pale)}
.fig figcaption{margin:10px auto 0;max-width:28em;font:italic 400 17.5px/1.5 "Times New Roman",Times,serif;color:#cbb994;text-wrap:balance}
.media{position:relative;width:100%;margin:0 auto}
.media canvas,.media svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.media canvas.over{transition:opacity .1s linear}
.media.sq{aspect-ratio:1/1;max-width:600px}
.media.r54{aspect-ratio:5/4}
.media.r45{aspect-ratio:4/5;max-width:520px}
.media.w169{aspect-ratio:16/9}
.media.wide3{aspect-ratio:640/400}
.media.circ{aspect-ratio:960/660}
.dial.wide{width:min(470px,94vw);aspect-ratio:470/300}
.media.w21{aspect-ratio:640/300}
.feather-r{-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent 100%);mask-image:radial-gradient(closest-side,#000 82%,transparent 100%)}
.media.r54.feather-r,.media.w169.feather-r,.media.r45.feather-r{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-composite:intersect}
.phase{min-height:3.3em;margin:8px auto 4px;max-width:28em;font:400 18px/1.4 "Times New Roman",Times,serif;color:#e6dccb}
.phase b{display:block;font-weight:400;font-size:22px;color:#ffe2a6}
.phase span{display:block}
.phase.small{min-height:2.9em;font-style:italic;color:#e1d3b4}
.steps{display:flex;justify-content:center;gap:clamp(14px,5vw,34px);margin:6px 0 0;font:400 13px/1 "Times New Roman",Times,serif;letter-spacing:.24em;text-transform:uppercase;color:#6f604b}
.steps span{transition:color .3s,text-shadow .3s}
.steps span.on{color:#ffe2a6;text-shadow:0 0 12px rgba(255,210,120,.5)}

/* ---------- analog controls: brass on black ---------- */
.ctl{display:flex;justify-content:center;margin:14px 0 4px;user-select:none;-webkit-user-select:none}
/* dial */
.dial{position:relative;width:min(300px,78vw);aspect-ratio:1;touch-action:pan-y;cursor:grab;outline:none}
.dial:active{cursor:grabbing}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial .rotl,.dial .top{pointer-events:none}
.dial .rotl{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dial:focus-visible .rim{stroke:#ffe08a}
/* fader */
.fader{display:flex;align-items:center;gap:14px;width:100%;max-width:560px;touch-action:pan-y;outline:none;cursor:pointer}
.fader .fl,.fader .fr{flex:none;width:76px;font:italic 400 17px/1.15 "Times New Roman",Times,serif;color:#8f7d60;transition:color .08s}
.fader .fl{text-align:right}.fader .fr{text-align:left}
.fader .fl.on,.fader .fr.on{color:#ffe2a6}
.fader .track{position:relative;flex:1;height:84px;margin:0 26px;isolation:isolate}
/* lacquer plate with a polished gold bevel, lit from upper left */
.fader .track::after{content:"";position:absolute;z-index:-1;left:-31px;right:-31px;top:12px;bottom:12px;border-radius:14px;
 border:2px solid transparent;
 background:radial-gradient(120% 140% at 22% 0%,rgba(255,236,190,.10),rgba(255,236,190,0) 55%) padding-box,linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45)) padding-box,url(/spirituality/sufism/ibn-arabi/hidden-treasure/art/tex/lacquer.webp) 0 0/96px padding-box,
  linear-gradient(160deg,#fff2c8 0%,#d8ab52 18%,#7a5720 42%,#2f1f08 70%,#9a7230 88%,#e0b45a 100%) border-box;
 box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 26px rgba(212,165,55,.10),0 10px 22px rgba(0,0,0,.7)}
/* the slot: cut into the plate, inner shadow on the lit (upper) wall */
.fader .track::before{content:"";position:absolute;left:0;right:0;top:50%;height:12px;margin-top:-6px;border-radius:7px;
 background:linear-gradient(180deg,#000 0,#000 30%,#160f07 70%,#3b2a12 100%);
 box-shadow:inset 0 3px 5px rgba(0,0,0,1),inset 0 -1px 0 rgba(255,220,150,.28),0 -1px 0 rgba(0,0,0,.8),0 1px 0 rgba(255,226,160,.22)}
/* engraved ticks: a dark cut with a lit lower-right lip */
.fader .ticks{position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px;pointer-events:none;
 background:repeating-linear-gradient(90deg,rgba(236,196,110,.85) 0 1px,transparent 1px 10%),repeating-linear-gradient(90deg,transparent 0 1px,rgba(255,236,190,.28) 1px 2px,transparent 2px 10%) 0 1px,repeating-linear-gradient(90deg,transparent 0 0,rgba(0,0,0,.95) 0 1px,transparent 1px 10%) -1px -1px;
 -webkit-mask-image:linear-gradient(180deg,#000 0 18%,transparent 18% 82%,#000 82%);mask-image:linear-gradient(180deg,#000 0 18%,transparent 18% 82%,#000 82%)}
/* cap: brushed brass, chamfered top edge, anisotropic band; --hl slides the band a little as the cap travels under the fixed key light */
.fader .cap{--hl:30%;position:absolute;top:50%;left:0;width:46px;height:72px;margin:-36px 0 0 -23px;border-radius:9px;will-change:transform;
 background:linear-gradient(180deg,rgba(255,250,228,.85) 0,rgba(255,250,228,.25) 4px,rgba(255,250,228,0) 9px),
  linear-gradient(0deg,rgba(26,14,2,.75) 0,rgba(26,14,2,0) 9px),
  linear-gradient(90deg,rgba(255,250,228,0) calc(var(--hl) - 14%),rgba(255,250,228,.62) var(--hl),rgba(255,250,228,0) calc(var(--hl) + 14%)),
  linear-gradient(90deg,rgba(255,240,200,.30) 0,rgba(255,240,200,0) 26%,rgba(0,0,0,0) 62%,rgba(20,12,2,.62) 100%),
  url(/spirituality/sufism/ibn-arabi/hidden-treasure/art/tex/brushed-brass.webp) 0 0/90px 90px,#b88a3a;
 box-shadow:0 12px 14px -2px rgba(0,0,0,.9),0 4px 5px rgba(0,0,0,.85),0 0 22px rgba(255,210,120,.16),inset 1px 1px 0 rgba(255,250,225,.7),inset -1px -1px 0 rgba(40,22,2,.75),inset 0 0 0 1px rgba(60,38,8,.35)}
.fader .cap::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:3px;margin-left:-1.5px;border-radius:2px;background:linear-gradient(180deg,#fff6d6,#f0c56c);box-shadow:0 0 6px rgba(255,214,130,.65),-1px -1px 0 rgba(30,18,2,.8)}
.fader .cap::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:24px;margin-top:-12px;border-radius:2px;
 background:repeating-linear-gradient(180deg,rgba(40,24,4,.85) 0 1.5px,rgba(255,244,214,.55) 1.5px 2.5px,rgba(0,0,0,0) 2.5px 5px);
 -webkit-mask-image:linear-gradient(90deg,#000 0 38%,transparent 38% 62%,#000 62%);mask-image:linear-gradient(90deg,#000 0 38%,transparent 38% 62%,#000 62%)}
.fader:focus-visible .cap{box-shadow:0 0 0 2px #ffe08a,0 12px 14px -2px rgba(0,0,0,.9),0 4px 5px rgba(0,0,0,.85)}
/* toggle: a big brass slide switch, flips on release, no delay */
.tgl{display:flex;align-items:center;gap:16px;padding:8px 6px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;outline:none}
.tgl .tl,.tgl .tr{width:104px;font:400 22px/1 "Times New Roman",Times,serif;color:#7d6c52;transition:color .06s,text-shadow .06s}
.tgl .tl{text-align:right}.tgl .tr{text-align:left}
.tgl .tt{position:relative;width:150px;height:76px;border-radius:40px;flex:none;border:3px solid transparent;
 background:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,0) 48%) padding-box,radial-gradient(70% 90% at 50% 120%,rgba(120,84,30,.35),rgba(0,0,0,0) 70%) padding-box,url(/spirituality/sufism/ibn-arabi/hidden-treasure/art/tex/lacquer.webp) 0 0/96px padding-box,
  linear-gradient(155deg,#fff2c8 0%,#dcae55 16%,#7a5720 40%,#2f1f08 66%,#9a7230 86%,#e6bb60 100%) border-box;
 box-shadow:inset 0 4px 9px rgba(0,0,0,.95),inset 0 -2px 3px rgba(255,214,140,.10),0 0 0 1px rgba(0,0,0,.9),0 6px 16px rgba(0,0,0,.75),0 0 32px rgba(212,165,55,.10)}
/* lit slot on the Remember side: a warm inner glow, switched on instantly with the state */
.tgl .tt::before{content:"";position:absolute;inset:3px;border-radius:36px;pointer-events:none;opacity:0;
 background:radial-gradient(60% 85% at 72% 55%,rgba(255,226,160,.42),rgba(255,200,110,.12) 55%,rgba(0,0,0,0) 80%);box-shadow:inset 0 0 14px rgba(255,214,130,.22)}
.tgl[aria-checked=true] .tt::before{opacity:1}
.tgl .tk{--gx:34%;position:absolute;top:3px;left:3px;width:64px;height:64px;border-radius:50%;transition:transform .09s cubic-bezier(.3,.7,.3,1);will-change:transform;
 background:radial-gradient(circle at var(--gx) 28%,rgba(255,254,244,.95) 0,rgba(255,246,214,.55) 9%,rgba(255,240,200,0) 26%),
  radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 56%,rgba(40,22,2,.3) 72%,rgba(255,226,160,.4) 86%,rgba(30,16,2,.55) 100%),
  radial-gradient(circle at 38% 32%,rgba(255,236,186,.55),rgba(226,178,86,.38) 50%,rgba(184,134,46,.2) 100%),
  url(/spirituality/sufism/ibn-arabi/hidden-treasure/art/tex/spun-brass.webp) center/100% 100%,#a87a2c;
 box-shadow:0 10px 12px -2px rgba(0,0,0,.92),0 3px 4px rgba(0,0,0,.85),0 0 18px rgba(255,210,120,.18),inset 1.5px 1.5px 1px rgba(255,248,220,.55),inset -2px -3px 4px rgba(30,16,2,.6)}
/* engraved grip ring and a concave thumb dimple */
.tgl .tk::after{content:"";position:absolute;inset:15px;border-radius:50%;background:repeating-conic-gradient(rgba(40,24,4,.45) 0 5deg,rgba(255,244,214,.45) 5deg 7deg,rgba(150,108,40,.0) 7deg 10deg);-webkit-mask-image:radial-gradient(circle,transparent 58%,#000 62%,#000 96%,transparent 100%);mask-image:radial-gradient(circle,transparent 58%,#000 62%,#000 96%,transparent 100%)}
.tgl .tk::before{content:"";position:absolute;inset:24px;border-radius:50%;background:radial-gradient(circle at 64% 70%,rgba(255,236,190,.55),rgba(170,120,44,.15) 45%,rgba(40,22,2,.55) 100%);box-shadow:inset 1.5px 1.5px 2px rgba(30,16,2,.7),1px 1px 0 rgba(255,244,214,.35)}
.tgl[aria-checked=true] .tk{transform:translateX(74px);--gx:30%}
.tgl[aria-checked=false] .tl,.tgl[aria-checked=true] .tr{color:#ffe2a6;text-shadow:0 0 14px rgba(255,210,120,.45)}
.tgl:focus-visible .tt{box-shadow:inset 0 4px 9px rgba(0,0,0,.95),0 0 0 2px #ffe08a}
/* lever */
.lever{position:relative;width:min(400px,90vw);aspect-ratio:400/250;touch-action:pan-y;cursor:grab;outline:none}
.lever svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lever:focus-visible .arm{filter:drop-shadow(0 0 8px rgba(255,220,150,.6))}
/* three-way selector */
.sel{position:relative;width:min(340px,86vw);aspect-ratio:340/300;touch-action:pan-y;cursor:grab;outline:none}
.sel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sel text{cursor:pointer}

/* pull-downs */
details.more{margin:10px 0;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(212,165,55,.35),transparent) 1}
details.more:last-of-type{border-bottom:1px solid transparent}
details.more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:8px 2px;cursor:pointer;font:400 20px/1.25 "Times New Roman",Times,serif;color:#f0ddb4;touch-action:manipulation}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"";flex:none;width:12px;height:12px;margin-right:8px;border-right:1.5px solid #d6b070;border-bottom:1.5px solid #d6b070;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
details.more[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
details.more>div{padding:0 2px 12px}
details.more p{font-size:18px;line-height:1.65;color:#ddd2bd}

/* close */
.close{text-align:center}
.tl3{margin:6px 0 10px;font:400 clamp(34px,8.6vw,52px)/1.18 "Times New Roman",Times,serif;color:#ffe2a6}
.tl3 span{display:block}
.tl3 span:last-child{font-style:italic;color:#f0ddb4}
.mine{margin:34px auto 0;max-width:24em;font:italic 400 19px/1.55 "Times New Roman",Times,serif;color:#b8a27c}
.mine span{display:block;margin-top:6px;font-style:normal;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#7f6c50}

.src{margin:70px 0 0;color:#6e6352}
.src h2{margin:0 0 6px;font:400 11.5px/1 "Times New Roman",Times,serif;letter-spacing:.2em;text-transform:uppercase;color:#6e6352}
.src ul{margin:0;padding:0 0 0 14px}
.src li{margin:0 0 3px;font-size:11.5px;line-height:1.45}
.src em{color:#7f735f}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- coda: the closing film, its own full-width moment, no controls ---------- */
.coda{position:relative;margin:120px calc(50% - 50vw) 0;width:100vw;padding:80px 0 40px;text-align:center;background:#000}
.coda-f{position:relative;margin:0 auto;width:min(100vw,620px,calc(86svh * 720 / 1264));aspect-ratio:720/1264;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
.coda-f video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;border:0;opacity:0;transition:opacity .4s ease;pointer-events:none}
.coda-f video::-webkit-media-controls,.coda-f video::-webkit-media-controls-start-playback-button,.coda-f video::-webkit-media-controls-overlay-play-button,.coda-f video::-webkit-media-controls-panel,.coda-f video::-webkit-media-controls-enclosure{display:none!important;-webkit-appearance:none}
.coda.playing .coda-f video{opacity:1}
.coda-l{min-height:1.4em;margin:28px auto 0;font:italic 400 clamp(21px,5vw,26px)/1.4 "Times New Roman",Times,serif;color:#a3896a;opacity:0;transition:opacity 2.4s ease}
.coda.ended .coda-l{opacity:1}

.media.sq.feather-e{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-composite:intersect}

/* ===== v3: Grok's ornate gold direction ===== */
.fig h3{background:linear-gradient(180deg,#fff0c6 0%,#f0c870 48%,#c28a34 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,200,110,.18))}
.fig h3::after{content:"";display:block;width:min(300px,72%);height:18px;margin:8px auto 4px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%2020%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23d4a537%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23d9b25e%22/%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23d9b25e%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d4a537%22%20stop-opacity%3D%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M0%2010H136M184%2010H320%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%22.9%22/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23e2bd6a%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M136%2010c6%200%208-5%2013-5%204%200%205%203%203%204.5M184%2010c-6%200-8-5-13-5-4%200-5%203-3%204.5M136%2010c6%200%208%205%2013%205%204%200%205-3%203-4.5M184%2010c-6%200-8%205-13%205-4%200-5-3-3-4.5%22/%3E%3C/g%3E%3Cpath%20d%3D%22M160%203l4%207-4%207-4-7z%22%20fill%3D%22%23f0cd7c%22/%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%2210%22%20r%3D%221.3%22%20fill%3D%22%23e2bd6a%22/%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%2210%22%20r%3D%221.3%22%20fill%3D%22%23e2bd6a%22/%3E%3C/svg%3E") center/contain no-repeat}
.fig figcaption{color:#d9bf86}
.fig figcaption::after{content:"";display:block;width:min(170px,44%);height:12px;margin:10px auto 0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%2020%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23d4a537%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23d9b25e%22/%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23d9b25e%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d4a537%22%20stop-opacity%3D%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M0%2010H136M184%2010H320%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%22.9%22/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23e2bd6a%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M136%2010c6%200%208-5%2013-5%204%200%205%203%203%204.5M184%2010c-6%200-8-5-13-5-4%200-5%203-3%204.5M136%2010c6%200%208%205%2013%205%204%200%205-3%203-4.5M184%2010c-6%200-8%205-13%205-4%200-5-3-3-4.5%22/%3E%3C/g%3E%3Cpath%20d%3D%22M160%203l4%207-4%207-4-7z%22%20fill%3D%22%23f0cd7c%22/%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%2210%22%20r%3D%221.3%22%20fill%3D%22%23e2bd6a%22/%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%2210%22%20r%3D%221.3%22%20fill%3D%22%23e2bd6a%22/%3E%3C/svg%3E") center/contain no-repeat;opacity:.75}
.fig.orn{position:relative;padding:26px 16px 22px}
.fig.orn::before{content:"";position:absolute;inset:4px;border:1px solid rgba(217,178,94,.42);outline:1px solid rgba(217,178,94,.16);outline-offset:4px;pointer-events:none}
.fig.orn .cn{position:absolute;width:54px;height:54px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23d9b25e%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M2%2062V14C2%207%207%202%2014%202H62%22/%3E%3Cpath%20d%3D%22M7%2062V18c0-6%205-11%2011-11H62%22%20stroke-width%3D%22.7%22%20opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M14%202c0%208%204%2012%2012%2012-6%203-10%200-12-4M2%2014c8%200%2012%204%2012%2012-3-6%200-10%204-12%22/%3E%3Cpath%20d%3D%22M18%2018c6-6%2014-4%2016%202-4-3-9-3-12%201M18%2018c-6%206-4%2014%202%2016-3-4-3-9%201-12%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.4%22%20fill%3D%22%23f0cd7c%22/%3E%3Cpath%20d%3D%22M40%207l3%203-3%203-3-3zM7%2040l3%203-3%203-3-3z%22%20fill%3D%22%23e2bd6a%22/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none}
.fig.orn .cn.a{left:0;top:0}.fig.orn .cn.b{right:0;top:0;transform:scaleX(-1)}.fig.orn .cn.c{left:0;bottom:0;transform:scaleY(-1)}.fig.orn .cn.d{right:0;bottom:0;transform:scale(-1,-1)}
.steps span.on{box-shadow:0 1px 0 rgba(255,214,140,.85),0 8px 10px -8px rgba(255,210,120,.6);padding-bottom:7px;margin-bottom:-7px}
/* fx layers: pre-cut light sprites, screen-blended, compositor-only motion, only while on screen */
.fx{position:absolute;display:block;pointer-events:none;mix-blend-mode:screen;max-width:none;will-change:transform,opacity}
.fx.dust{opacity:.32}
.live .fx.dust{animation:fxDrift 38s ease-in-out infinite alternate}
.fx.rings{opacity:.6}
.live .fx.rings{animation:fxBreath 7s ease-in-out infinite alternate}
@keyframes fxDrift{from{transform:translate3d(-1.5%,1%,0) scale(1.06)}to{transform:translate3d(1.5%,-1.5%,0) scale(1.1)}}
@keyframes fxBreath{from{transform:scale(.95);opacity:.45}to{transform:scale(1.05);opacity:.8}}
@keyframes fxPulse{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
@keyframes fxTw{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fx{animation:none!important}}
.media.w11{aspect-ratio:640/620;max-width:600px}
.media.h49{aspect-ratio:640/490}
.live .fx.orb{animation:fxPulse 5s ease-in-out infinite}

/* mist */
.mist{position:absolute;left:0;top:0;width:calc(100% + 256px);height:calc(100% + 256px);background:url(/spirituality/sufism/ibn-arabi/hidden-treasure/art/fx/mist-gold.webp) 0 0/256px 256px repeat;pointer-events:none;mix-blend-mode:screen;opacity:.09;}
.mist.m2{background-image:url(/spirituality/sufism/ibn-arabi/hidden-treasure/art/fx/mist-gold2.webp);background-size:256px 256px;opacity:.1;transform:translate3d(-256px,0,0)}
.mist.chroma{background-image:url(/spirituality/sufism/ibn-arabi/hidden-treasure/art/fx/mist-chroma.webp);opacity:.2}
.mist.chroma.m2{opacity:.15}
.live .mist.m1{animation:mistA 64s linear infinite,mistO 9s ease-in-out infinite alternate}
.live .mist.m2{animation:mistB 101s linear infinite,mistO2 13s ease-in-out infinite alternate}
@keyframes mistA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-256px,-256px,0)}}
@keyframes mistB{from{transform:translate3d(-256px,0,0)}to{transform:translate3d(0,-256px,0)}}
@keyframes mistO{from{opacity:.05}to{opacity:.12}}
@keyframes mistO2{from{opacity:.09}to{opacity:.03}}
.live .mist.chroma.m1{animation:mistA 64s linear infinite,mistOc 9s ease-in-out infinite alternate}
.live .mist.chroma.m2{animation:mistB 101s linear infinite,mistOc2 13s ease-in-out infinite alternate}
@keyframes mistOc{from{opacity:.12}to{opacity:.26}}
@keyframes mistOc2{from{opacity:.18}to{opacity:.08}}
@media (prefers-reduced-motion:reduce){.mist{animation:none!important}}
.mistw{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;-webkit-mask:radial-gradient(closest-side,#000 50%,transparent);mask:radial-gradient(closest-side,#000 50%,transparent)}
.mistw.chroma{-webkit-mask:none;mask:none}
.sel .sl{cursor:pointer}
.sel .sl.on path:first-child{stroke:#ffe2a6;filter:drop-shadow(0 0 5px rgba(255,214,130,.55))}
/* light harmonisation of the fader, toggle and lever with the gold compass dials: the same soft gold halo behind each control (static, no filters) */
.ctl{position:relative}
.ctl::before{content:"";position:absolute;left:50%;top:50%;width:min(520px,96%);height:150%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
 background:radial-gradient(closest-side,rgba(232,184,78,.13),rgba(232,184,78,.04) 60%,transparent)}
.ctl>*{position:relative;z-index:1}
.pv .fx.fil{transform-origin:50% 82%}
/* treasure: keep the stone-light layer to the flame; the painting's own rock stays as painted, and the base is not blown out */
.pv .fx.stone{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 90%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 90%)}
@keyframes fxShim{from{opacity:.14;transform:translate3d(0,.4%,0) scale(1.0)}to{opacity:.34;transform:translate3d(0,-.6%,0) scale(1.012)}}
/* ================= Grok's diagram plates (the painting is the base; text, needles and light sit on top) ================= */
.fig.plate{position:relative;width:min(100%,560px);margin:30px auto;padding:0;container-type:inline-size;text-align:center}
.fig.plate>.media{display:none}
.fig.plate .pl{position:relative;width:100%;aspect-ratio:1718/2560;overflow:hidden;background:#000;isolation:isolate}
.pl>.pbase{position:absolute;inset:0;width:100%;height:100%;display:block}
.fig.plate>.po{position:absolute;left:50%;transform:translate(-50%,-50%);margin:0;z-index:3;max-width:none;min-height:0}
.fig.plate>h3.po{width:92%;font-size:6.3cqw;line-height:1.1;white-space:nowrap}
.fig.plate>h3::after,.fig.plate>figcaption.po::after{display:none}
.fig.plate>figcaption.po{font-size:max(12px,3.55cqw);line-height:1.45;color:#e2c385}
.fig.plate>figcaption:not(.po){margin-top:10px}
.fig.plate .phase.po{font-size:max(12px,3.4cqw);line-height:1.4;color:#e8d6ae}
.fig.plate .phase.po b{font-size:max(14px,4.1cqw);margin-bottom:.15em}
.fig.plate .ctl.po{transform:none;left:auto;margin:0;display:block}
.fig.plate .ctl::before{display:none}
.fig.plate .ctl .dial,.fig.plate .ctl .sel{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:50%}
.fig.plate .ctl .sel{border-radius:0}
.fig.plate .steps.po{font-size:max(10px,2.7cqw);gap:6cqw;color:#8a7656;letter-spacing:.2em}
.pt{position:absolute;transform:translate(-50%,-50%);font-family:"Times New Roman",Times,serif;color:#e8c98c;line-height:1.12;white-space:nowrap;pointer-events:none;z-index:2;text-shadow:0 0 .35em rgba(0,0,0,.9),0 0 .9em rgba(0,0,0,.6)}
.pt b{display:block;font-weight:400;color:#f1d79c}.pt i{display:block}
.pt.lab{font-size:inherit}.pt.lab i{font-size:.82em;color:#cdb282}
.pt.hm{color:#d9bf86}
.pt.orbt{color:#5a3608;text-shadow:0 0 .4em rgba(255,236,190,.8)}
.pt.orba{font-family:"IA Arabic","Geeza Pro","Noto Naskh Arabic",serif;color:#4a2a06;line-height:1;text-shadow:0 0 .12em rgba(255,240,200,.65)}
.pt.hexl{text-transform:uppercase;font-variant:small-caps;letter-spacing:.03em;color:#fbecc4;text-shadow:0 1px 0 rgba(40,24,4,.9),0 0 .5em rgba(0,0,0,.75)}
.pt.dlab{text-transform:uppercase;letter-spacing:.08em;color:#9b8563}
.pt.dlab.on{color:#ffe7b0;text-shadow:0 0 .6em rgba(255,210,120,.75),0 0 .2em rgba(0,0,0,.9)}
.pt.nmz{letter-spacing:.24em;color:#cfb07a}
.pt.vl{white-space:normal;width:5.6em;color:#fff1cc;text-shadow:0 0 .3em rgba(60,30,0,.85)}
.pt.vl i{font-size:.72em}.pt.vl.dk{color:#5a3508;text-shadow:0 0 .35em rgba(255,250,230,.9)}
.pt.arw{font-family:"IA Arabic","Geeza Pro","Noto Naskh Arabic",serif;line-height:1;color:rgba(214,166,80,.55);text-shadow:0 0 .08em rgba(255,200,110,.35)}
.pt.arw em{font-style:normal;color:#ffd77e;text-shadow:0 0 .06em #fff3cf,0 0 .25em rgba(255,200,90,.85)}
.pt.tr{color:#f0cf8a}.pt.gl{color:#d8bd88}
/* light layers */
.pl .fx.pfade{opacity:0}
.pl .fx.ndl{z-index:1;will-change:transform}
.live .pl .fx.spin{animation:plSpin 90s linear infinite}
.pl .fx.pc2{opacity:.55}
.live .pl .fx.pc1{animation:fxPulse 5s ease-in-out infinite}
.live .pl .fx.beat{animation:fxHeart 4.2s ease-in-out infinite}
.pl .veil{position:absolute;background:radial-gradient(closest-side,rgba(2,1,4,.92),rgba(2,1,4,.75) 60%,rgba(2,1,4,0));opacity:0;pointer-events:none}
.pl .veil.v2{background:radial-gradient(closest-side,rgba(12,10,8,.8),rgba(12,10,8,0))}
.pl .gauze{position:absolute;pointer-events:none;opacity:0;background:url(/spirituality/sufism/ibn-arabi/hidden-treasure/art/tex/gauze.webp) 0 0/40% repeat;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);filter:brightness(.35);will-change:transform,opacity}
.pl .lotm{position:absolute;overflow:hidden;pointer-events:none;-webkit-mask:radial-gradient(50% 50% at 50% 55%,#000 45%,transparent);mask:radial-gradient(50% 50% at 50% 55%,#000 45%,transparent)}
.pl .fx.lh{opacity:.35}.live .pl .fx.lh{animation:fxBreath 6s ease-in-out infinite alternate}
.pl .fx.flash.go{animation:plFlash .9s ease-out}
.pl .sweep{position:absolute;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.pl .sweep::before{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,236,190,.16),transparent);transform:translateX(0)}
.live .pl .sweep::before{animation:plSweep 9s ease-in-out infinite}
/* gems: Grok's own faceted hexes, with an inner glow and a slow specular sweep inside a hexagon clip */
.pl .gem{position:absolute;pointer-events:none;mix-blend-mode:screen;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);z-index:1}
.pl .gem:not(.flat){clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%)}
.pl .gem .gi{position:absolute;inset:0;background:radial-gradient(50% 50% at 50% 45%,rgba(255,240,205,.28),rgba(255,220,150,0) 70%)}
.pl .gem .gs{position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;background:linear-gradient(100deg,transparent 0,rgba(255,252,240,.05) 35%,rgba(255,252,240,.42) 50%,rgba(255,252,240,.05) 65%,transparent 100%);transform:translateX(0) skewX(-12deg)}
.live .pl .gem .gi{animation:fxBreath 6s ease-in-out infinite alternate;animation-delay:var(--d)}
.live .pl .gem .gs{animation:plSheen 11s ease-in-out infinite;animation-delay:var(--d)}
.sel .pq{position:absolute;transform:translate(-50%,-50%);padding:.4em .9em;color:#a48e68;font-family:"Times New Roman",Times,serif;white-space:nowrap;cursor:pointer;text-shadow:0 0 .3em #000}
.sel .pq.on{color:#ffe7b0;text-shadow:0 0 .5em rgba(255,210,120,.85),0 0 .15em #000}
.sel .pq::after{content:"";position:absolute;inset:8% -2%;border-radius:4px;box-shadow:0 0 0 1px rgba(255,214,140,0),0 0 14px rgba(255,200,110,0);pointer-events:none}
.sel .pq.on::after{box-shadow:0 0 0 1px rgba(255,214,140,.8),0 0 16px rgba(255,200,110,.5)}
/* no box around the controls: keyboard focus shows on the dial label / the lit plaque instead */
.fig.plate .dial,.fig.plate .sel,.fig.plate .dial:focus,.fig.plate .sel:focus,.fig.plate .dial:focus-visible,.fig.plate .sel:focus-visible{outline:none!important;box-shadow:none!important;border:0!important}
.fig.plate .sel:focus-visible .pq.on{text-decoration:underline;text-underline-offset:.3em;text-decoration-color:rgba(255,224,150,.7)}
#storyFig.plate:focus-within .pt.dlab.on{text-decoration:underline;text-underline-offset:.3em;text-decoration-color:rgba(255,224,150,.6)}
@keyframes plSpin{to{transform:rotate(360deg)}}
@keyframes plSheen{0%,55%{transform:translateX(0) skewX(-12deg)}85%,100%{transform:translateX(420%) skewX(-12deg)}}
@keyframes plSweep{0%{transform:translateX(0)}100%{transform:translateX(430%)}}
@keyframes plFlash{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.pl .gem *,.pl .sweep::before{animation:none!important}}
.live .pl .fx.beat{animation:plBeat 4.2s ease-in-out infinite}
@keyframes plBeat{0%,100%{transform:scale(.85)}18%{transform:scale(1.12)}34%{transform:scale(.95)}50%{transform:scale(1.05)}}
.pl .fx.tw{opacity:0}
.live .pl .fx.tw{animation:fxTw 5s ease-in-out infinite}

.pt.lab.cl{white-space:normal;width:6.4em;text-align:center}
.pt.vl{text-shadow:0 0 .2em rgba(40,18,0,.95),0 0 .5em rgba(40,18,0,.9),0 0 1em rgba(40,18,0,.7)}
.pt.vl.dk{text-shadow:0 0 .2em rgba(255,250,232,.95),0 0 .5em rgba(255,246,220,.9)}

/* teardrop flames, starburst, energy */
.pl .sock{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(4,3,2,.97) 0,rgba(4,3,2,.95) 78%,rgba(4,3,2,0) 100%);pointer-events:none;z-index:1}
.pl .flm{position:absolute;mix-blend-mode:screen;pointer-events:none;z-index:1}
.pl .flm img{display:block;width:100%;height:100%;will-change:transform,opacity}
.live .pl .flm img{animation:plFlame var(--fd,3.6s) ease-in-out infinite}
@keyframes plFlame{0%,100%{transform:scale(.93);opacity:.78}45%{transform:scale(1.06) translateY(-2%);opacity:1}70%{transform:scale(.99);opacity:.9}}
.pl .fx.egy{opacity:.55}.live .pl .fx.egy{animation:plSpin 150s linear infinite,plFlick 7.3s ease-in-out infinite}
@keyframes plFlick{0%,100%{opacity:.5}23%{opacity:.62}31%{opacity:.46}58%{opacity:.66}77%{opacity:.52}}
.pl .fx.sbr{opacity:.85}.live .pl .fx.sbr{animation:plBurst 5.8s ease-in-out infinite}
@keyframes plBurst{0%,100%{transform:scale(.9);opacity:.72}50%{transform:scale(1.08);opacity:1}}
.pl .pt.hexl{z-index:3;text-shadow:0 0 .2em rgba(0,0,0,.95),0 0 .45em rgba(0,0,0,.9),0 0 .9em rgba(0,0,0,.75)}
@media (prefers-reduced-motion:reduce){.pl .flm img{animation:none!important}}

/* gem Name-nodes */
.pl .gmn{position:absolute;pointer-events:none;z-index:2}
.pl .gmn img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pl .gmn .gsh{position:absolute;left:8%;top:14%;width:84%;height:84%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,0));transform:translate(3%,6%)}
.pl .gmn .gin{position:absolute;left:28%;top:30%;width:44%;height:40%;border-radius:50%;background:radial-gradient(closest-side,#fff 0,var(--c) 35%,rgba(0,0,0,0) 100%);mix-blend-mode:screen;opacity:.25}
.live .pl .gmn .gin{animation:plGin var(--gd) ease-in-out var(--dl) infinite}
@keyframes plGin{0%,100%{opacity:.12;transform:scale(.85)}50%{opacity:.55;transform:scale(1.05)}}
.pl .gmn .gk{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;overflow:hidden;mix-blend-mode:screen}
.pl .gmn .gk b{position:absolute;top:-10%;left:-60%;width:38%;height:120%;background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,250,235,.75) 50%,rgba(255,255,255,0) 100%);transform:translateX(-120%) skewX(-12deg);opacity:0}
.live .pl .gmn .gk b{animation:plGlint var(--gl) ease-in-out var(--dl) infinite}
@keyframes plGlint{0%,72%{transform:translateX(0) skewX(-12deg);opacity:0}74%{opacity:1}90%{opacity:1}92%,100%{transform:translateX(560%) skewX(-12deg);opacity:0}}
.pl .pt.hexl{z-index:4}
@media (prefers-reduced-motion:reduce){.pl .gmn i,.pl .gmn b{animation:none!important}}
.pl .fx.dimo{opacity:.18}.live .pl .fx.dimo{animation:plDim 6s ease-in-out infinite}
@keyframes plDim{0%,100%{opacity:.14;transform:scale(.95)}50%{opacity:.26;transform:scale(1.04)}}
.pt.arw{color:rgba(226,178,90,.86);text-shadow:0 0 .05em rgba(255,226,150,.5),0 .02em .04em rgba(60,30,0,.8)}

/* loose stones (no casing): halo + stone, both screen-blended; pulse driven from JS (transform/opacity) */
.pl .gst{position:absolute;pointer-events:none;z-index:2}
.pl .gst .gh{position:absolute;left:-55%;top:-55%;width:210%;height:210%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 55%,#fff6e0) 0,color-mix(in srgb,var(--c) 70%,transparent) 22%,color-mix(in srgb,var(--c) 22%,transparent) 52%,rgba(0,0,0,0) 100%);mix-blend-mode:screen;transform:translate(var(--sx),var(--sy));opacity:.6;will-change:opacity}
.pl .gst .gb{position:absolute;inset:0;display:block;will-change:transform}
.pl .gst img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;filter:none}
.pl .sock{background:radial-gradient(closest-side,rgba(4,3,2,.99) 0,rgba(4,3,2,.98) 70%,rgba(4,3,2,.6) 86%,rgba(4,3,2,0) 100%)}
/* Names: small, light, set beside their stones */
.pl .pt.nml{z-index:4;font-variant:small-caps;text-transform:lowercase;letter-spacing:.08em;color:rgba(246,234,208,.82);text-shadow:0 0 .25em rgba(0,0,0,.95),0 0 .7em rgba(0,0,0,.8)}
/* quieter type on the two story plates: softer title, dial readouts small and light */
#storyFig.plate>h3.po,#endFig.plate>h3.po{color:#e6d6b2;font-size:5.4cqw;text-shadow:0 0 .4em rgba(0,0,0,.85)}
#storyFig .pt.dlab{font-variant:small-caps;text-transform:lowercase;letter-spacing:.1em;color:rgba(214,196,160,.55)}
#storyFig .pt.dlab.on{color:#fbecc9;text-shadow:0 0 .5em rgba(255,214,140,.55),0 0 .2em rgba(0,0,0,.9)}
#endFig .pl .gst .gh{left:-75%;top:-75%;width:250%;height:250%}

/* ===== whole story v4: Grok's redesign plate + its orb/filament/dust layers ===== */
#storyFig.st2{width:min(100%,540px,calc((100svh - 48px) * .6711))}
#storyFig.st2 .pl{-webkit-mask-image:radial-gradient(130% 110% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(130% 110% at 50% 50%,#000 62%,transparent 100%)}
/* dark atmospheric breathing room around the plate on wide screens */
#storyFig.st2::before{content:"";position:absolute;left:50%;top:44%;width:190%;height:120%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(40,30,12,.28),rgba(10,8,4,.18) 55%,rgba(0,0,0,0));pointer-events:none;z-index:-1}
@media (max-width:600px){#storyFig.st2{width:calc(100% + 44px);margin-left:-22px;margin-right:-22px}#storyFig.st2 .pl{-webkit-mask-image:none;mask-image:none}}
#storyFig.st2>h3.po{color:#e9dcbc;font-size:5.6cqw;letter-spacing:.01em;text-shadow:0 0 .5em rgba(0,0,0,.9)}
#storyFig.st2 .phase.po{color:#e6dccb}
#storyFig.st2 .phase.po b{color:#f3e4c0;font-weight:400}
.pl .st2v{background:radial-gradient(closest-side at 50% 39%,rgba(0,0,0,0) 0,rgba(1,1,2,.55) 7%,rgba(1,1,2,.93) 22%,rgba(1,1,2,.96) 100%)}
.pl .st2dim{background:radial-gradient(closest-side,rgba(8,7,6,.85),rgba(8,7,6,0))}
.pl .st2o{position:absolute;pointer-events:none;z-index:2;mix-blend-mode:screen}
.pl .st2o img{display:block;width:100%;height:100%;will-change:transform}
.pl .fx.st2fil{opacity:.4;-webkit-mask-image:radial-gradient(closest-side at 50% 52%,#000 38%,rgba(0,0,0,.5) 62%,transparent 86%);mask-image:radial-gradient(closest-side at 50% 52%,#000 38%,rgba(0,0,0,.5) 62%,transparent 86%)}
.pl .fx.st2dust{opacity:.2;transform-origin:50% 50%}
.pl .pt.nml{font-size:inherit}
/* five-stop track (no box, no outline) */
#storyFig.st2 .ctl .trk{position:absolute;inset:0;border-radius:0;cursor:pointer;touch-action:none;outline:none}
.trk .tln,.trk .tfl{position:absolute;left:0;right:0;top:30%;height:1px;background:linear-gradient(90deg,rgba(214,186,130,.12),rgba(214,186,130,.4) 12%,rgba(214,186,130,.4) 88%,rgba(214,186,130,.12))}
.trk .tfl{background:linear-gradient(90deg,rgba(255,226,160,.25),rgba(255,226,160,.85));transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.trk .tst{position:absolute;top:30%;width:max(5px,1.1cqw);height:max(5px,1.1cqw);margin:calc(max(5px,1.1cqw) / -2) 0 0 calc(max(5px,1.1cqw) / -2);border-radius:50%;background:rgba(214,186,130,.45)}
.trk .tst.on{background:#f6dfa6}
.trk .tth{position:absolute;left:0;right:0;top:30%;height:0;transform:translateX(0);will-change:transform;pointer-events:none}
.trk .tth b{position:absolute;left:0;top:0;width:max(14px,3.2cqw);height:max(14px,3.2cqw);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#fffaf0 0,#ffe3a0 35%,rgba(255,200,110,.35) 70%,rgba(255,200,110,0) 100%)}
.trk .tlb{position:absolute;top:58%;transform:translateX(-50%);font:400 max(9px,2.15cqw)/1 "Times New Roman",Times,serif;font-variant:small-caps;text-transform:lowercase;letter-spacing:.08em;color:rgba(214,196,160,.6);white-space:nowrap;pointer-events:none}
.trk .tlb.on{color:#fbecc9;text-shadow:0 0 .6em rgba(255,214,140,.5)}
.trk:focus-visible .tlb.on{text-decoration:underline;text-underline-offset:.35em;text-decoration-color:rgba(255,224,150,.6)}

/* ---- quiet pack (Grok, Nov 1): extra layers ---- */
.pl .fx.qdisc{will-change:transform;transform-origin:50% 50%}
.pl .hxg{position:absolute;pointer-events:none;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,var(--c) 0,color-mix(in srgb,var(--c) 35%,transparent) 45%,transparent 100%);opacity:.3;z-index:1}
.pl .fx.qorb{mix-blend-mode:screen;opacity:.6}
.live .pl .fx.qorb{animation:qBr 5s ease-in-out infinite alternate}
@keyframes qBr{from{opacity:.45;transform:scale(.97)}to{opacity:.85;transform:scale(1.03)}}
#wordFig .pl .pt.gl{color:rgba(240,226,196,.78);font-variant:normal}
#endFig .sel .pq::after{display:none}
#endFig .sel .pq.on{text-decoration:underline;text-underline-offset:.35em;text-decoration-color:rgba(255,224,150,.55)}
#nowFig .pl .lotm{mix-blend-mode:screen}
/* iPhone: keep the Forget/Remember toggle inside the figure */
@media (max-width:480px){.tgl{gap:10px}.tgl .tl,.tgl .tr{width:auto;font-size:19px}.tgl .tt{width:120px;height:62px}.tgl .tk{width:50px;height:50px}.tgl .tk::after{inset:11px}.tgl .tk::before{inset:18px}.tgl[aria-checked=true] .tk{transform:translateX(58px)}}