:root{--bg:#090a10;--bg2:#0d0f1d;--glass:rgba(19,23,44,.7);--line:rgba(255,255,255,.08);--glow:rgba(168,85,247,.25);
--gold:#fbbf24;--gold2:#f59e0b;--cyan:#2dd4bf;--vio:#a855f7;--ok:#10b981;--txt:#e8e9f3;--mute:#9ea3c0;
--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:1.15rem/1.6 var(--sans);color:var(--txt);background:radial-gradient(ellipse at 20% 0,#2e1065 0,transparent 50%),radial-gradient(ellipse at 90% 100%,#1e1b4b 0,transparent 55%),linear-gradient(#090a10,#0d0f1d);background-attachment:fixed;overflow-x:hidden}
main{min-height:100%;padding:2.5rem clamp(1rem,5vw,5rem) 5.5rem;outline:none}
h1{font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:1.08;margin:.2em 0;color:var(--gold);letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem);margin:0 0 1rem;line-height:1.15}
h3{margin:.2rem 0 .5rem;color:var(--cyan)}
a{color:var(--cyan)}p{margin:.5rem 0}
.card{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.6rem}
.card.glow{border-color:var(--glow)}
.grid{display:grid;gap:1.2rem}.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.banner{margin-top:1.4rem;border:1px solid var(--gold2);background:rgba(245,158,11,.1);border-radius:14px;padding:1rem 1.4rem}
.btn{font:inherit;font-size:1rem;color:#1a1200;background:linear-gradient(var(--gold),var(--gold2));border:0;border-radius:999px;padding:.6rem 1.3rem;cursor:pointer;text-decoration:none;display:inline-block;font-weight:600}
.btn.alt{background:transparent;color:var(--cyan);border:1px solid var(--cyan)}
.btn:hover{filter:brightness(1.1)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.pill{display:inline-block;padding:.15rem .7rem;border-radius:999px;font-size:.85rem;font-weight:600;margin-right:.4rem;background:rgba(139,92,246,.25);color:#d8b4fe}
.pill.role{background:rgba(139,92,246,.3)}.pill.aud{background:rgba(6,182,212,.25);color:var(--cyan)}.pill.task{background:rgba(245,158,11,.25);color:var(--gold)}.pill.guard{background:rgba(16,185,129,.25);color:#6ee7b7}
pre{font:.95rem/1.6 var(--mono);white-space:pre-wrap;background:#06070d;border:1px solid var(--line);border-radius:12px;padding:1rem;margin:.6rem 0}
.hero{text-align:center;padding-top:4vh}.hero svg{width:min(320px,60vw);animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.tabs{display:flex;gap:.5rem;margin:1rem 0;flex-wrap:wrap}
.tab{font:inherit;color:var(--txt);background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:.5rem 1rem;cursor:pointer}
.tab[aria-selected=true]{border-color:var(--gold);color:var(--gold)}
.top{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.7rem 1rem;background:rgba(9,10,16,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .sp{flex:1}
.top a.p{padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.9rem;color:var(--txt)}
.top a.p.on{border-color:var(--gold);color:var(--gold)}
#hud{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.6rem;background:rgba(9,10,16,.85);border-top:1px solid var(--line);z-index:6;font-size:.9rem;color:var(--mute)}
#hud.hide{display:none}
#hud button,#hud a{background:none;border:0;color:var(--txt);cursor:pointer;font:inherit;text-decoration:none}
.dot{width:12px;height:12px;border-radius:50%;background:#2a2d4a;padding:0!important}.dot.on{background:var(--gold)}
#toast{position:fixed;bottom:4.5rem;left:50%;transform:translate(-50%,20px);background:var(--ok);color:#fff;padding:.6rem 1.2rem;border-radius:999px;opacity:0;transition:.25s;pointer-events:none;z-index:20}
#toast.on{opacity:1;transform:translate(-50%,0)}
.led{font:700 clamp(4rem,12vw,8rem)/1 var(--mono);color:var(--cyan);text-shadow:0 0 24px rgba(45,212,191,.6);text-align:center;background:#06070d;border-radius:16px;padding:1rem}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#0d0f1d;border-left:1px solid var(--glow);padding:1.5rem;transform:translateX(100%);transition:transform .3s;z-index:15;overflow:auto}
.drawer.open{transform:none}
.do{color:#6ee7b7}.dont{color:#fca5a5}
.tree{font:1rem/1.7 var(--mono)}
details{margin:.5rem 0}summary{cursor:pointer;color:var(--gold)}
ul{padding-left:1.2rem}li{margin:.3rem 0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Procedural dune scape ===== */
#dunes{position:fixed;left:0;right:0;bottom:0;height:20vh;z-index:0;pointer-events:none}
#dunes svg{display:block;width:100%;height:100%}

/* ===== Style upgrade ===== */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;background-size:340px 300px;animation:tw 6s ease-in-out infinite alternate;
background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 70% 12%,#c4b5fd,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fde68a,transparent),radial-gradient(1px 1px at 88% 64%,#fff,transparent),radial-gradient(1px 1px at 25% 55%,#a5f3fc,transparent)}
@keyframes tw{to{opacity:.25}}
main{position:relative;z-index:1;padding-bottom:9rem}
h1,h2{font-weight:800;background:linear-gradient(100deg,#fef3c7,#fbbf24 45%,#f0abfc 80%,#fde68a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 9s linear infinite}
@keyframes shim{to{background-position:200% 0}}
h2::after{content:"";display:block;width:90px;height:3px;margin-top:.6rem;border-radius:3px;background:linear-gradient(90deg,var(--gold),transparent);-webkit-text-fill-color:initial}
.card{position:relative;box-shadow:0 26px 60px -26px #000,inset 0 1px 0 rgba(255,255,255,.07)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(140deg,rgba(251,191,36,.55),transparent 35%,transparent 65%,rgba(168,85,247,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
ul{list-style:none;padding-left:0}
li{position:relative;padding-left:1.7rem}
li::before{content:"\2726";position:absolute;left:0;color:var(--gold);text-shadow:0 0 10px rgba(251,191,36,.7)}
.btn{position:relative;overflow:hidden;box-shadow:0 8px 26px -8px rgba(245,158,11,.7)}
.btn.alt{box-shadow:none}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-120%);transition:transform .6s}
.btn:hover::after{transform:translateX(120%)}
#hud{left:50%;right:auto;transform:translateX(-50%);bottom:1rem;border:1px solid var(--glow);border-radius:999px;padding:.5rem 1.2rem;width:max-content;max-width:94vw;box-shadow:0 12px 40px -10px #000;backdrop-filter:blur(14px)}
.dot.on{box-shadow:0 0 10px var(--gold)}
.led{box-shadow:inset 0 0 30px rgba(45,212,191,.12),0 0 40px -10px rgba(45,212,191,.5)}
/* talking-point reveals: alternate left / right */
.rv{opacity:0;transform:translateX(var(--dx,-120px)) scale(.94);filter:blur(8px);pointer-events:none;transition:opacity .6s ease,transform .85s cubic-bezier(.16,1.1,.3,1),filter .6s ease}
.rv.in{opacity:1;transform:none;filter:none;pointer-events:auto}
.rv.nt{transition:none}
/* lamp + smoke */
#lamp{position:fixed;right:1.2rem;bottom:3.4rem;width:clamp(100px,11vw,160px);z-index:40;background:none;border:0;padding:0;cursor:pointer}
#lamp svg{display:block;width:100%;filter:drop-shadow(0 0 14px rgba(251,191,36,.5))}
#smoke{position:fixed;inset:0;z-index:30;display:none;pointer-events:none}
.w{stroke-dasharray:70 70;stroke-dashoffset:70;opacity:0;animation:wisp 4.5s ease-in-out infinite}
.w2{animation-delay:1.5s}.w3{animation-delay:3s}
@keyframes wisp{0%{stroke-dashoffset:70;opacity:0}25%{opacity:.85}100%{stroke-dashoffset:-70;opacity:0}}
#lamp.rub svg{animation:rub .5s ease-in-out 3;filter:drop-shadow(0 0 28px rgba(251,191,36,.95))}
@keyframes rub{25%{transform:rotate(-4deg) scale(1.05)}75%{transform:rotate(4deg) scale(1.05)}}

/* ===== Cave of Wonders (3 Columns, 3 Gems High) ===== */
.cave-wrap {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.cave-groups {
  display: grid;
  grid-template-columns: 1fr 1fr 1.9fr;
  gap: 1.1rem;
  margin: 0.8rem 0 0.6rem;
  align-items: stretch;
}
.cave-group {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
}
.cave-group h3 {
  margin: 0 0 0.15rem;
  font-size: 1.15rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.cave-group .gsub {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  color: var(--mute);
  line-height: 1.25;
}
.cg-helpers {
  border-color: rgba(168,85,247,.3);
  background: rgba(168,85,247,.08);
}
.cg-games {
  border-color: rgba(45,212,191,.3);
  background: rgba(45,212,191,.08);
}
.cg-deep {
  border-color: rgba(251,191,36,.25);
  background: rgba(251,191,36,.06);
}
.cg-deep h3 {
  color: #fde68a;
}
.gem-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.gem-stack-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.gem {
  position: relative;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 0.45rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  color: var(--txt);
  text-align: left;
  transition: all .2s ease;
  min-height: 52px;
}
.gem:hover, .gem:focus-visible {
  background: rgba(255, 255, 255, .09);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -4px rgba(251, 191, 36, .25);
}
.gemi {
  width: 30px;
  height: 33px;
  flex-shrink: 0;
  filter: hue-rotate(var(--hue)) drop-shadow(0 0 8px rgba(251,191,36,.5));
  animation: gemfloat var(--dur) ease-in-out var(--delay) infinite;
  transition: filter .2s, transform .2s;
}
@keyframes gemfloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}
.gem-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.gname {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px #000;
}
.gshort {
  font-size: 0.78rem;
  color: var(--mute);
  line-height: 1.2;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gemCaption {
  min-height: 2.2rem;
  text-align: center;
  color: var(--mute);
  border-top: 1px solid var(--line);
  padding-top: 0.6rem;
  font-size: 1.05rem;
}
#gemCaption b {
  color: var(--gold);
}
@media(max-width: 960px) {
  .cave-groups {
    grid-template-columns: 1fr;
  }
  .gem-stack-double {
    grid-template-columns: 1fr;
  }
}

/* ===== Treasure modal ===== */
#modal{position:fixed;inset:0;z-index:60;display:none;overflow-y:auto;padding:1.5rem 1rem}
#modal.open{display:flex;align-items:center;justify-content:center}
.mback{position:fixed;inset:0;background:rgba(5,6,14,.84);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mdlg{
  position:relative;
  width:100%;
  max-width:min(980px,94vw);
  max-height:88vh;
  margin:auto;
  display:flex;
  flex-direction:column;
  background:rgba(13,15,31,.95);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(168,85,247,.45);
  border-radius:22px;
  padding:1.8rem 2rem;
  box-shadow:0 30px 90px -15px rgba(0,0,0,.9), 0 0 35px rgba(168,85,247,.2);
  animation:mpop .28s cubic-bezier(.16,1.1,.3,1);
  overflow:hidden;
}
@keyframes mpop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}

.mheader{
  flex-shrink:0;
  border-bottom:1px solid var(--line);
  padding-bottom:1rem;
  margin-bottom:1rem;
}
.mtop-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:.5rem;
}
.mbadge{
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.25rem .8rem;
  border-radius:999px;
  background:rgba(251,191,36,.15);
  color:var(--gold);
  border:1px solid rgba(251,191,36,.3);
}
.mclose{
  background:transparent;
  border:1px solid var(--line);
  color:var(--mute);
  font-size:1.4rem;
  line-height:1;
  width:2.2rem;
  height:2.2rem;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
}
.mclose:hover{
  color:#fff;
  border-color:var(--cyan);
  background:rgba(45,212,191,.15);
  transform:scale(1.05);
}
.mheader h3{
  margin:.2rem 0 .3rem;
  font-size:clamp(1.4rem,2.5vw,1.9rem);
  color:var(--gold);
}
.mdesc{
  color:var(--txt);
  font-size:1rem;
  line-height:1.5;
  margin:.3rem 0 .2rem;
}

.mtabs{
  display:flex;
  gap:.6rem;
  margin-bottom:.8rem;
  border-bottom:1px solid var(--line);
  padding-bottom:.3rem;
  flex-shrink:0;
}
.mtab{
  font:inherit;
  font-size:.95rem;
  font-weight:600;
  color:var(--mute);
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  padding:.5rem 1.2rem;
  cursor:pointer;
  transition:all .2s;
  border-radius:8px 8px 0 0;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.mtab:hover{
  color:var(--txt);
  background:rgba(255,255,255,.05);
}
.mtab.active{
  color:var(--gold);
  border-bottom-color:var(--gold);
  background:rgba(251,191,36,.1);
}

.mbody{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.mpane{
  display:none;
}
.mpane.active{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  animation:fadein .2s ease;
}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Scrollable content areas inside each pane */
.mprompt-wrap,
.mresult-wrap,
.mlesson-wrap{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:.4rem;
}
.mprompt-wrap::-webkit-scrollbar,
.mresult-wrap::-webkit-scrollbar,
.mlesson-wrap::-webkit-scrollbar{width:7px}
.mprompt-wrap::-webkit-scrollbar-track,
.mresult-wrap::-webkit-scrollbar-track,
.mlesson-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:4px}
.mprompt-wrap::-webkit-scrollbar-thumb,
.mresult-wrap::-webkit-scrollbar-thumb,
.mlesson-wrap::-webkit-scrollbar-thumb{background:rgba(168,85,247,.4);border-radius:4px}
.mprompt-wrap::-webkit-scrollbar-thumb:hover,
.mresult-wrap::-webkit-scrollbar-thumb:hover,
.mlesson-wrap::-webkit-scrollbar-thumb:hover{background:rgba(168,85,247,.7)}

/* Prompt tab */
.mprompt-code{
  background:#05070f;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:1.2rem 1.4rem;
  font-family:var(--mono);
  font-size:.88rem;
  line-height:1.65;
  color:#f1f5f9;
  white-space:pre-wrap;
  margin:0;
  user-select:text;
}

/* Result tab */
.mresult-wrap{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
/* Result tab (README) & Lesson tab */
.mreadme-card,
.mlesson-card{
  background:rgba(19,23,44,.6);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:1.4rem 1.6rem;
}
.mreadme-card h3,
.mlesson-card h3{
  margin:0 0 .8rem;
  color:var(--gold);
  font-size:1.3rem;
}
.mreadme-card h4,
.mlesson-card h4{
  margin:1.2rem 0 .4rem;
  color:var(--cyan);
  font-size:1.1rem;
}
.mreadme-card h5,
.mlesson-card h5{
  margin:1rem 0 .3rem;
  color:#fde68a;
  font-size:1rem;
}
.mreadme-card h6,
.mlesson-card h6{
  margin:.8rem 0 .2rem;
  color:var(--txt);
  font-size:.95rem;
}
.mreadme-card p,
.mlesson-card p{
  margin:.4rem 0 .8rem;
  line-height:1.6;
}
.mreadme-card ul,
.mlesson-card ul{
  margin:.5rem 0 .8rem 1.3rem;
  list-style:disc;
}
.mreadme-card ol,
.mlesson-card ol{
  margin:.5rem 0 .8rem 1.3rem;
  list-style:decimal;
}
.mreadme-card li,
.mlesson-card li{
  padding-left:.3rem;
  margin:.35rem 0;
  color:var(--txt);
  line-height:1.55;
}
.mreadme-card li::before,
.mlesson-card li::before{
  display:none;
}
.mreadme-card strong,
.mlesson-card strong{
  color:#fde68a;
}
.mreadme-card em,
.mlesson-card em{
  color:var(--cyan);
  font-style:italic;
}
.mreadme-card code,
.mlesson-card code{
  background:rgba(255,255,255,.08);
  padding:.15rem .35rem;
  border-radius:4px;
  font-family:var(--mono);
  font-size:.88rem;
  color:var(--cyan);
}
.mreadme-card .mcode-block,
.mlesson-card .mcode-block{
  background:#05070f;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:1rem;
  margin:.8rem 0;
  overflow-x:auto;
}
.mreadme-card .mcode-block code,
.mlesson-card .mcode-block code{
  background:none;
  padding:0;
  color:#e2e8f0;
}

/* Common 2-button action bar below each tab */
.mtab-actions{
  flex-shrink:0;
  display:flex;
  gap:1rem;
  align-items:center;
  padding-top:.8rem;
  margin-top:.8rem;
  border-top:1px solid var(--line);
}
.mtab-actions .btn{
  font-size:.95rem;
  padding:.55rem 1.4rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  cursor:pointer;
  text-decoration:none;
}
.mtab-actions .btn.alt{
  color:var(--cyan);
  border:1px solid rgba(45,212,191,.5);
}
.mtab-actions .btn.alt:hover{
  background:rgba(45,212,191,.15);
  border-color:var(--cyan);
}


/* ===== Final Slide: Central Timer, Music Player & Action Buttons ===== */
.final-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:calc(85vh - 7rem);
  gap:2rem;
  width:100%;
  max-width:880px;
  margin:1rem auto 0;
  text-align:center;
  animation:finalFadeIn .5s ease-out;
}
@keyframes finalFadeIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.final-timer-card{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.3rem;
}

.final-led{
  width:100%;
  max-width:760px;
  font-size:clamp(5.5rem,16vw,10.5rem);
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  padding:1.4rem 1rem;
  border-radius:28px;
  background:rgba(6,7,13,.9);
  border:2px solid rgba(45,212,191,.4);
  color:var(--cyan);
  text-shadow:0 0 35px rgba(45,212,191,.75),0 0 70px rgba(45,212,191,.3);
  box-shadow:inset 0 0 50px rgba(45,212,191,.15),0 20px 60px -15px rgba(0,0,0,.9),0 0 40px -10px rgba(45,212,191,.35);
  user-select:none;
}

.timer-controls{
  display:flex;
  gap:.9rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.timer-btn{
  font-size:1.15rem;
  font-weight:700;
  padding:.75rem 1.6rem;
  min-width:105px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .15s ease,filter .2s ease,box-shadow .2s ease;
}
.timer-btn:active{
  transform:scale(.96);
}
.timer-go{
  min-width:130px;
  font-size:1.25rem;
  box-shadow:0 10px 30px -8px rgba(245,158,11,.85);
}

/* Music Player */
.music-player-card{
  width:100%;
  max-width:680px;
  margin:.8rem auto;
  align-self:center;
  background:rgba(19,23,44,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:1.35rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  box-shadow:0 16px 40px -15px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);
}

.music-info{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
  flex:1;
}
.music-icon{
  font-size:1.35rem;
  color:var(--gold);
  filter:drop-shadow(0 0 8px rgba(251,191,36,.6));
  animation:pulseMusic 2.5s ease-in-out infinite alternate;
}
@keyframes pulseMusic{
  to{transform:scale(1.15);filter:drop-shadow(0 0 14px rgba(251,191,36,.95))}
}
.music-title{
  font-weight:600;
  font-size:1.05rem;
  color:var(--txt);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
}
.music-loop-badge{
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:rgba(45,212,191,.15);
  border:1px solid rgba(45,212,191,.35);
  color:var(--cyan);
  padding:.15rem .55rem;
  border-radius:999px;
  white-space:nowrap;
}

.music-controls{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.m-ctrl-btn{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--txt);
  width:38px;
  height:38px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:.95rem;
  transition:all .2s ease;
  padding:0;
}
.m-ctrl-btn:hover{
  background:rgba(255,255,255,.18);
  border-color:var(--gold);
  color:var(--gold);
  transform:scale(1.08);
}
.m-ctrl-btn:active{
  transform:scale(.95);
}

.m-ctrl-btn.m-play-btn{
  width:44px;
  height:44px;
  background:linear-gradient(var(--gold),var(--gold2));
  color:#1a1200;
  border:0;
  font-size:1.15rem;
  font-weight:800;
  box-shadow:0 6px 20px -5px rgba(245,158,11,.8);
}
.m-ctrl-btn.m-play-btn:hover{
  transform:scale(1.1);
  filter:brightness(1.15);
}

.music-vol-group{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-left:.4rem;
  padding-left:.6rem;
  border-left:1px solid rgba(255,255,255,.15);
}

.m-mute-btn{
  width:34px;
  height:34px;
  font-size:.95rem;
}

.vol-slider{
  width:75px;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(255,255,255,.2);
  border-radius:999px;
  outline:none;
  cursor:pointer;
  transition:background .2s;
}
.vol-slider:hover{
  background:rgba(255,255,255,.35);
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px rgba(251,191,36,.8);
  cursor:pointer;
}
.vol-slider::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--gold);
  border:0;
  box-shadow:0 0 8px rgba(251,191,36,.8);
  cursor:pointer;
}

/* Bottom Action Buttons */
.final-actions-row{
  display:flex;
  gap:1.6rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:.4rem;
}

.rounded-action-btn{
  border-radius:999px !important;
  padding:.95rem 2.6rem;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 12px 35px -8px rgba(245,158,11,.6);
  transition:transform .2s cubic-bezier(.16,1.1,.3,1),box-shadow .2s ease,filter .2s ease;
  cursor:pointer;
}
.rounded-action-btn:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 42px -6px rgba(245,158,11,.85);
}
.rounded-action-btn.alt{
  box-shadow:0 12px 35px -8px rgba(45,212,191,.3);
  border-width:2px;
}
.rounded-action-btn.alt:hover{
  box-shadow:0 16px 42px -6px rgba(45,212,191,.6);
  background:rgba(45,212,191,.12);
}

@media(max-width:640px){
  .music-player-card{
    border-radius:20px;
    flex-direction:column;
    padding:1.35rem 1.2rem;
    gap:.8rem;
    margin:.8rem auto;
  }
  .music-vol-group{
    border-left:0;
    padding-left:0;
    margin-left:0;
  }
  .final-actions-row{
    flex-direction:column;
    width:100%;
  }
  .rounded-action-btn{
    width:100%;
  }
}

/* =====================================================================
   SLIDE 1: Hero & Footer Spacing
   ===================================================================== */
.hero-card{
  max-width:760px;
  margin:1.8rem auto 0;
  font-size:1.25rem;
  line-height:1.7;
}
.hero-foot{
  margin-top:3.8rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
  align-items:center;
}
.hero-meta{
  font-size:1.3rem;
  font-weight:700;
  color:var(--cyan);
  letter-spacing:.02em;
  margin:0;
  text-shadow:0 0 16px rgba(45,212,191,.4);
}
.hero-cue{
  font-size:1.15rem;
  color:var(--gold);
  margin:0;
  opacity:.92;
  letter-spacing:.01em;
}

/* =====================================================================
   SLIDE 3: Tightened Genie Loop (Vertical Height Optimization)
   ===================================================================== */
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.6rem;
  margin-bottom:.35rem;
}
.card-head h3{
  margin:0;
  font-size:1.15rem;
  color:var(--gold);
}
.card-head .cicon{
  font-size:1.45rem;
  line-height:1;
  flex-shrink:0;
}
.loop{
  grid-template-columns:repeat(4,1fr);
  gap:.85rem;
}
.loop .card{
  padding:.9rem 1.05rem;
}
.loop .card p{
  margin:0;
  font-size:.95rem;
  line-height:1.45;
}
.loop .card em{
  display:block;
  margin-top:.4rem;
  color:var(--cyan);
  font-size:.88rem;
  font-style:italic;
  line-height:1.35;
}

/* =====================================================================
   SLIDE 4: 2-Column Chat Layout (Human Left, Gemini Right)
   ===================================================================== */
.chat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem 1.2rem;
  margin:.9rem 0;
}
.chat-grid .bubble{
  margin:0;
  padding:.9rem 1.25rem;
  border-radius:14px;
}
.chat-grid .bubble.you{
  background:rgba(22,27,55,.8);
  border-color:rgba(45,212,191,.35);
}
.chat-grid .bubble.genie{
  background:rgba(30,22,60,.8);
  border-color:rgba(168,85,247,.35);
}
.chat-grid .bubble .who{
  display:block;
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.3rem;
}
.chat-grid .bubble.you .who{color:var(--cyan)}
.chat-grid .bubble.genie .who{color:var(--gold)}
.chat-grid .bubble p{
  margin:0;
  font-size:.98rem;
  line-height:1.45;
}
.chat-grid .bubble .chip{
  display:inline-block;
  margin-top:.4rem;
  padding:.15rem .6rem;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--gold);
}
.banner-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

/* =====================================================================
   SLIDE 6: Two Golden Rules — And When to Break Them
   ===================================================================== */
.rules-grid{
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  margin-top:.6rem;
}
.rule-card{
  padding:1.2rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.rule-why{
  font-size:.98rem;
  line-height:1.55;
  margin:0 0 .65rem;
}
.break-box{
  background:rgba(10,12,24,.6);
  border:1px solid rgba(168,85,247,.3);
  border-radius:12px;
  padding:.9rem 1.1rem;
}
.break-tag{
  display:inline-block;
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--gold);
  margin-bottom:.4rem;
}
.break-box p{
  margin:.25rem 0;
  font-size:.92rem;
  line-height:1.48;
}
.slow-explain{
  color:var(--cyan);
  font-weight:600;
  margin-top:.4rem !important;
}
.tri-list{
  margin:.4rem 0 .5rem 1.1rem;
}
.tri-list li{
  font-size:.9rem;
  margin:.25rem 0;
  line-height:1.4;
  padding-left:0;
}
.tri-list li::before{
  display:none;
}
.break-note{
  font-size:.86rem !important;
  color:var(--mute);
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:.45rem;
  margin-top:.45rem !important;
}

/* =====================================================================
   SLIDE 7: Combined Wish Starter & Borrowed Wishes
   ===================================================================== */
.wish-combo{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.starter-card{
  padding:1rem 1.3rem;
  background:rgba(20,24,48,.8);
  border-color:rgba(45,212,191,.35);
}
.starter-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:.7rem;
}
.starter-head .dim{
  font-size:.88rem;
  color:var(--mute);
  margin-left:.4rem;
}
.formula-parts{
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:.85rem;
}
.formula-parts .part{
  background:rgba(10,12,24,.5);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:.65rem .85rem;
}
.formula-parts .part p{
  margin:.3rem 0 0;
  font-size:.88rem;
  line-height:1.4;
}
.borrow-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  margin:.2rem 0 -.3rem;
}
.borrow-header h3{
  margin:0;
  font-size:1.15rem;
  color:var(--gold);
}
.borrow-header .dim{
  font-size:.85rem;
  color:var(--mute);
}
.wishbank{
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
}
.wish{
  padding:.8rem .95rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.4rem;
}
.wish-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
}
.wish p{
  margin:.2rem 0 0;
  font-size:.86rem;
  line-height:1.42;
}
.btn-sm{
  font-size:.82rem !important;
  padding:.3rem .75rem !important;
}

/* =====================================================================
   SLIDE 8: Spacious "See It & Save It" & Notepad Modal
   ===================================================================== */
.sb-steps-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.2rem;
  margin:.4rem 0 .9rem;
}
.sb-step{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:.4rem 1.1rem .4rem .6rem;
}
.s-badge{
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(var(--gold),var(--gold2));
  color:#1a1200;
  font-weight:800;
  font-size:.88rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.s-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.s-text b{
  font-size:.92rem;
  color:var(--txt);
}
.s-desc{
  font-size:.76rem;
  color:var(--mute);
}
.sb-step-arrow{
  color:var(--gold);
  font-size:1.2rem;
  opacity:.6;
}
.sandbox{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  min-height:340px;
}
.sb-left, .sb-right{
  display:flex;
  flex-direction:column;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem 1.2rem;
}
.sb-top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.5rem;
}
.sb-label{
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cyan);
}
#sb-code{
  flex:1;
  min-height:220px;
  width:100%;
  background:#05070f;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:.8rem .95rem;
  font-family:var(--mono);
  font-size:.85rem;
  color:#f1f5f9;
  resize:none;
  outline:none;
  line-height:1.5;
}
#sb-code:focus{
  border-color:var(--cyan);
  box-shadow:0 0 10px rgba(45,212,191,.2);
}
.sb-bottom-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  margin-top:.7rem;
  flex-wrap:wrap;
}
.sb-name-group{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.88rem;
  color:var(--mute);
}
#sb-name{
  background:#05070f;
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;
  padding:.35rem .6rem;
  color:var(--txt);
  font-family:var(--mono);
  font-size:.88rem;
  width:160px;
}
.sb-action-btns{
  display:flex;
  gap:.6rem;
}
.sb-preview-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.5rem;
}
.sb-preview-header .dim{
  font-size:.8rem;
  color:var(--mute);
}
#sb-frame{
  flex:1;
  min-height:260px;
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#090a12;
}
.sb-footer-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-top:.85rem;
  flex-wrap:wrap;
}
.sb-tip{
  font-size:.9rem;
  color:var(--mute);
}
.sb-tip b{
  color:var(--gold);
}
.np-open-btn{
  font-size:.92rem !important;
  padding:.5rem 1.1rem !important;
}

/* Notepad Pop-up Modal */
.notepad-dialog{
  max-width:680px !important;
}
.notepad-modal-body{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:.4rem 0;
}
.np-step-card{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:.75rem 1rem;
}
.np-step-num{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(251,191,36,.15);
  border:1px solid rgba(251,191,36,.4);
  color:var(--gold);
  font-weight:800;
  font-size:1.05rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.np-step-text{
  flex:1;
}
.np-step-text b{
  font-size:1.02rem;
  color:var(--gold);
}
.np-step-text p{
  margin:.2rem 0 0;
  font-size:.92rem;
  line-height:1.45;
  color:var(--txt);
}
.np-step-text code{
  background:rgba(255,255,255,.08);
  padding:.1rem .35rem;
  border-radius:4px;
  color:var(--cyan);
  font-family:var(--mono);
}