/* v40-v9.0 · Luminous Story Observatory
   Last-loaded visual and responsive layer only.
   Model providers, Volcengine voice, generation, billing, accounts and event flows are untouched. */

:root{
  --lumi-night:#061426;
  --lumi-night-2:#0b2340;
  --lumi-night-3:#172c50;
  --lumi-ink:#10263d;
  --lumi-ink-soft:#405b72;
  --lumi-paper:#fffdf7;
  --lumi-paper-blue:#f2f8fb;
  --lumi-paper-warm:#fff5df;
  --lumi-white:#fff;
  --lumi-cyan:#58dfd3;
  --lumi-cyan-deep:#087a86;
  --lumi-blue:#5a91f2;
  --lumi-violet:#8f75ee;
  --lumi-coral:#ff8b78;
  --lumi-gold:#ffd365;
  --lumi-mint:#baf1dc;
  --lumi-success:#147a64;
  --lumi-warning:#9a5a08;
  --lumi-danger:#a93434;
  --lumi-info:#245ea8;
  --lumi-line:rgba(93,143,171,.32);
  --lumi-line-dark:rgba(152,224,224,.3);
  --lumi-line-strong:rgba(66,118,147,.55);
  --lumi-shadow-1:0 10px 28px rgba(7,29,55,.12),0 1px 2px rgba(7,29,55,.08);
  --lumi-shadow-2:0 26px 68px rgba(3,18,42,.22),0 2px 6px rgba(3,18,42,.1);
  --lumi-shadow-3:0 42px 110px rgba(1,9,24,.46),0 4px 14px rgba(1,9,24,.18);
  --lumi-shadow-inset:inset 0 1px rgba(255,255,255,.72);
  --lumi-radius-xs:10px;
  --lumi-radius-sm:14px;
  --lumi-radius-md:20px;
  --lumi-radius-lg:28px;
  --lumi-radius-xl:40px;
  --lumi-space-1:4px;
  --lumi-space-2:8px;
  --lumi-space-3:12px;
  --lumi-space-4:16px;
  --lumi-space-5:24px;
  --lumi-space-6:32px;
  --lumi-space-7:48px;
  --lumi-space-8:64px;
  --lumi-focus:0 0 0 3px #fff,0 0 0 7px #ffd45f,0 0 0 10px #123d62;
  --atlas-focus:var(--lumi-focus);
  --lumi-ease:cubic-bezier(.2,.78,.2,1);
  --lumi-ease-spring:cubic-bezier(.16,1,.3,1);
  --lumi-control-h:50px;
  --lumi-control-h-lg:58px;
  --lumi-content:1480px;
  color-scheme:light;
}

html{background:var(--lumi-night);scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  color:var(--lumi-ink);
  font-family:"Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 9% 4%,rgba(88,223,211,.18),transparent 28rem),
    radial-gradient(circle at 91% 12%,rgba(143,117,238,.18),transparent 32rem),
    linear-gradient(145deg,var(--lumi-night),#0a2343 56%,#12254a);
}

button,input,textarea,select{font:inherit}
button,a,input,textarea,select,[tabindex]{-webkit-tap-highlight-color:transparent}
button:not([disabled]),[role="button"],summary{cursor:pointer}
button,input,select{min-height:44px}
button{
  position:relative;
  border:1px solid transparent;
  font-weight:850;
  letter-spacing:.01em;
  touch-action:manipulation;
  transition:transform .18s var(--lumi-ease-spring),filter .18s,border-color .18s,box-shadow .18s,background .18s;
}
button:not([disabled]):hover{transform:translateY(-2px)}
button:not([disabled]):active{transform:translateY(0) scale(.985);filter:saturate(.96)}
button[disabled],button[aria-disabled="true"]{cursor:not-allowed;opacity:.58;filter:saturate(.45);transform:none!important}
input,textarea,select{
  width:100%;
  max-width:100%;
  border:2px solid #7698ad;
  border-radius:var(--lumi-radius-sm);
  color:#10273f;
  background:#fff;
  box-shadow:inset 0 2px 6px rgba(16,45,72,.055);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
input:hover,textarea:hover,select:hover{border-color:#4e819b}
input:focus,textarea:focus,select:focus{border-color:#087c8e;background:#fff}
input::placeholder,textarea::placeholder{color:#667f91;opacity:1}
textarea{resize:vertical}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:0!important;
  box-shadow:var(--lumi-focus)!important;
}
::selection{color:#092238;background:#8df1e7}

/* Shared semantic states */
[hidden]{display:none!important}
[aria-live="polite"],output{overflow-wrap:anywhere}
.primary-action,.type-box button,.music-input-box button,#directorCreate,#imagineCreate,#musicDraft,#musicGenerate,
.online-login-card>#onlineAuthSubmit,.online-admin-panel form button{
  min-height:var(--lumi-control-h-lg);
  padding:12px 20px;
  border:1px solid rgba(255,255,255,.66)!important;
  border-radius:17px!important;
  color:#fff!important;
  background:linear-gradient(120deg,#087b88 0%,#2767b5 54%,#6852b4 100%)!important;
  box-shadow:0 12px 28px rgba(28,90,147,.24),var(--lumi-shadow-inset)!important;
  font-weight:950!important;
}
.primary-action:not([disabled]):hover,.type-box button:not([disabled]):hover,.music-input-box button:not([disabled]):hover,
#directorCreate:not([disabled]):hover,#imagineCreate:not([disabled]):hover,#musicDraft:not([disabled]):hover,#musicGenerate:not([disabled]):hover{
  filter:brightness(1.08) saturate(1.08);
  box-shadow:0 17px 34px rgba(28,90,147,.3),var(--lumi-shadow-inset)!important;
}
.generation-error,.music-friendly-error{border-left:6px solid var(--lumi-danger)!important}
.works-empty,.idea-empty{overflow-wrap:anywhere}

/* Command deck */
.topbar{
  min-height:82px;
  padding:10px clamp(14px,2.5vw,40px);
  gap:18px;
  border:0;
  border-bottom:1px solid rgba(148,224,225,.26);
  color:#fff;
  background:
    radial-gradient(circle at 78% -50%,rgba(127,116,232,.22),transparent 42%),
    linear-gradient(105deg,rgba(3,17,37,.97),rgba(7,36,64,.94) 58%,rgba(27,31,73,.94));
  box-shadow:0 15px 50px rgba(1,12,30,.32),inset 0 -1px rgba(255,255,255,.04);
  backdrop-filter:blur(28px) saturate(145%);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
}
.brand{
  position:relative;
  min-width:278px;
  padding:7px 18px 7px 8px;
  border:1px solid rgba(140,226,224,.3);
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.035));
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 9px 26px rgba(1,13,34,.16);
}
.brand::after{content:"";position:absolute;right:10px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--lumi-cyan);box-shadow:0 0 14px var(--lumi-cyan)}
.brand img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 8px 13px rgba(0,0,0,.25))}
.brand span{text-align:left;line-height:1.08}
.brand>span:last-child{display:flex!important;flex:1 1 auto!important;min-width:0!important;flex-direction:column;align-items:flex-start;justify-content:center}
.brand b{font-size:17px;letter-spacing:.035em}
.brand small{display:block;margin-top:6px;color:#c5dce8;font-size:10px;font-weight:850;letter-spacing:.13em}
.top-actions{gap:10px;flex-wrap:wrap;justify-content:flex-end}
.v5-version-chip{display:none!important}
.pill-tool,.volume-tool,#onlineRechargeOpen,#onlineLogout,#onlineAdminOpen{
  min-height:48px;
  padding:7px 14px;
  border:1px solid rgba(158,219,229,.25);
  border-radius:16px;
  color:#f9fdff;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 7px 16px rgba(0,7,23,.1);
}
.pill-tool:hover,.volume-tool:hover{border-color:var(--lumi-cyan);transform:translateY(-2px);background:rgba(38,95,121,.45)}
.pill-ico{box-shadow:none!important}
.volume-tool input{accent-color:var(--lumi-gold)}
.online-account-bar{
  top:96px!important;
  right:clamp(12px,2vw,28px)!important;
  left:auto!important;
  max-width:calc(100vw - 24px);
  min-height:58px;
  padding:8px 9px 8px 15px;
  gap:9px;
  border:1px solid rgba(103,228,220,.7);
  border-radius:20px;
  color:#fff;
  background:linear-gradient(125deg,rgba(7,63,82,.97),rgba(8,32,62,.97));
  box-shadow:0 17px 42px rgba(0,13,34,.3);
  backdrop-filter:blur(18px);
}
.online-account-bar span{min-width:108px}.online-account-bar b{color:#fff}.online-account-bar small{color:#c9e7ee}
#onlineRechargeOpen,#onlineAdminOpen{color:#17243b!important;background:linear-gradient(135deg,#ffe990,#ffca61)!important;border-color:#fff0a9!important;font-weight:950}
#onlineLogout{color:#fff!important;background:rgba(255,255,255,.09)!important}

/* Opening ceremony */
.cinematic-launch{
  color:#fff;
  background:
    radial-gradient(circle at 52% 36%,rgba(88,223,211,.22),transparent 19%),
    radial-gradient(circle at 17% 15%,rgba(143,117,238,.28),transparent 34%),
    radial-gradient(circle at 84% 76%,rgba(255,139,120,.18),transparent 30%),
    linear-gradient(155deg,#041228,#092342 51%,#1a214c);
}
.cinematic-launch::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.9%,rgba(138,225,224,.055) 50%,transparent 50.1%),linear-gradient(transparent 49.9%,rgba(138,225,224,.045) 50%,transparent 50.1%);background-size:86px 86px;mask-image:radial-gradient(circle at 50% 45%,#000,transparent 75%)}
.cinematic-launch::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.88) 0 1px,transparent 1.5px);background-size:67px 67px;opacity:.25;mask-image:linear-gradient(to bottom,#000,transparent 82%)}
.launch-copy{
  left:clamp(32px,5.2vw,84px)!important;
  top:50%!important;
  width:min(42vw,610px)!important;
  padding:clamp(34px,4.2vw,58px);
  transform:translateY(-50%);
  border:1px solid rgba(186,238,236,.37);
  border-radius:var(--lumi-radius-xl);
  background:
    linear-gradient(135deg,rgba(255,255,255,.07),transparent 38%),
    linear-gradient(145deg,rgba(5,27,57,.89),rgba(25,31,73,.76));
  box-shadow:var(--lumi-shadow-3),inset 0 1px rgba(255,255,255,.16);
  backdrop-filter:blur(24px) saturate(130%);
}
.launch-copy::before{content:"STORY OBSERVATORY";display:block;margin-bottom:18px;color:#91f5e9;font-size:10px;font-weight:950;letter-spacing:.3em}
.launch-kicker{color:var(--lumi-gold);letter-spacing:.24em;font-weight:950}
.launch-copy h2{margin-block:14px;color:#fff;font-size:clamp(44px,5.4vw,74px);line-height:1.02;letter-spacing:-.05em;text-wrap:balance}
.launch-copy p{max-width:480px;color:#dbeaf2;font-size:clamp(17px,1.7vw,21px);line-height:1.72}
#startBtn{
  min-height:66px;
  padding:15px 26px;
  border:1px solid #d0ffff;
  border-radius:18px;
  color:#10243b;
  background:linear-gradient(120deg,#79eee2,#8cb3ff 57%,#c3a2ff);
  box-shadow:0 16px 38px rgba(58,195,212,.3),inset 0 2px rgba(255,255,255,.64);
  font-weight:950;
}
#startBtn:hover{transform:translateY(-3px) scale(1.015);filter:saturate(1.08)}
.launch-planet{right:3%!important;width:min(57vw,760px)!important}
.launch-lumi{left:47%!important;top:72%!important;z-index:6!important;filter:drop-shadow(0 30px 34px rgba(1,10,31,.44))}
.launch-lumi img{width:clamp(130px,14vw,190px)!important;height:auto!important}

/* Home: the interactive story observatory */
.screen{isolation:isolate}
.cosmic-home{
  background:
    radial-gradient(circle at 76% 45%,rgba(255,139,112,.24),transparent 32%),
    radial-gradient(circle at 16% 16%,rgba(79,224,218,.18),transparent 28%),
    linear-gradient(155deg,#051529,#092340 56%,#111c3b);
}
.cosmic-home::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,rgba(140,222,229,.075) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(140,222,229,.055) 50%,transparent 50.2%);background-size:88px 88px;mask-image:radial-gradient(circle at 52% 48%,#000,transparent 78%)}
.cosmic-copy{
  left:clamp(28px,4vw,68px)!important;
  top:clamp(28px,6vh,74px)!important;
  max-width:min(39vw,570px)!important;
  padding:clamp(26px,3.6vw,50px)!important;
  border:1px solid rgba(145,224,224,.28);
  border-radius:32px;
  background:linear-gradient(145deg,rgba(4,26,53,.9),rgba(18,29,70,.7));
  box-shadow:0 26px 68px rgba(1,12,31,.34),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
}
.cosmic-copy::after{content:"01  /  EXPLORE";display:block;margin-top:28px;color:#8feae4;font-size:10px;font-weight:950;letter-spacing:.26em}
.cosmic-copy .eyebrow{display:inline-flex;padding:8px 13px;border:1px solid rgba(121,226,224,.42);border-radius:999px;color:#92f1e7;background:rgba(10,47,74,.62);font-weight:900;letter-spacing:.05em}
.cosmic-copy h1{max-width:560px;color:#fff;font-size:clamp(44px,5.3vw,76px);line-height:.98;letter-spacing:-.06em;text-shadow:0 15px 42px rgba(1,9,29,.58);text-wrap:balance}
.cosmic-copy p{max-width:450px;color:#d8e7ef;font-size:clamp(17px,1.7vw,21px);line-height:1.68}
.planet-wrap{filter:drop-shadow(0 42px 74px rgba(0,0,0,.4))}
.planet-tip,.planet-ribbon{border:1px solid rgba(130,224,225,.38);color:#f7fdff;background:rgba(5,31,60,.8);box-shadow:var(--lumi-shadow-1);backdrop-filter:blur(17px)}
.planet-place{
  min-height:54px;
  border:1px solid rgba(148,221,228,.28);
  border-radius:19px;
  color:#f8fcff;
  background:linear-gradient(135deg,rgba(10,45,78,.94),rgba(22,40,82,.92));
  box-shadow:0 12px 28px rgba(0,12,36,.28),inset 0 1px rgba(255,255,255,.08);
}
.planet-place b{color:#fff}.planet-place small{color:#d4e4ec}.planet-place em{color:#ffe79c;background:#142f51;padding:2px 7px;border-radius:999px}
.planet-place:hover,.planet-place.active{border-color:var(--lumi-cyan);background:linear-gradient(135deg,rgba(15,103,112,.96),rgba(68,59,143,.94));transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,12,40,.36),0 0 0 3px rgba(88,223,211,.14)}
.world-icon{background:linear-gradient(135deg,#8df4e7,#95afff);box-shadow:inset 0 1px #fff,0 8px 17px rgba(58,184,207,.28)}
.planet-arrow{border-color:rgba(143,223,224,.45)!important;background:rgba(7,34,65,.78)!important;box-shadow:0 12px 28px rgba(0,10,29,.28)!important}
.lumi-home{border:1px solid rgba(157,223,229,.34)!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(8,36,68,.92),rgba(45,35,83,.86))!important;box-shadow:0 19px 44px rgba(1,10,29,.36)!important}
.lumi-label b{color:#fff!important}.lumi-label small{color:#cae0eb!important}

/* Shared world architecture */
.world-screen{
  --world-a:#58dfd3;
  --world-b:#8f75ee;
  --world-wash:rgba(88,223,211,.16);
  min-height:100dvh;
  padding-bottom:76px;
  color:var(--lumi-ink);
  background:
    radial-gradient(circle at 8% 3%,var(--world-wash),transparent 29rem),
    radial-gradient(circle at 93% 11%,rgba(143,117,238,.15),transparent 32rem),
    linear-gradient(150deg,#eef8f8,#f6f2ff 56%,#fff7e7);
}
.world-screen::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(20,54,80,.035) 1px,transparent 1px),linear-gradient(rgba(20,54,80,.03) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(#000,transparent 68%)}
.world-imagine{--world-a:#3fcfc0;--world-b:#ff9d7e;--world-wash:rgba(63,207,192,.2);background:radial-gradient(circle at 4% 5%,rgba(80,226,202,.25),transparent 28rem),radial-gradient(circle at 94% 10%,rgba(255,157,126,.21),transparent 32rem),linear-gradient(145deg,#edf9f6,#fff8ea 57%,#f8efff)}
.world-director{--world-a:#6c96ff;--world-b:#ff8977;--world-wash:rgba(108,150,255,.18);background:radial-gradient(circle at 8% 2%,rgba(100,150,255,.22),transparent 30rem),radial-gradient(circle at 91% 9%,rgba(255,137,119,.2),transparent 31rem),linear-gradient(150deg,#eff3ff,#fff5ef 55%,#f3efff)}
.world-music{--world-a:#50ddd7;--world-b:#b285ff;--world-wash:rgba(80,221,215,.18);background:radial-gradient(circle at 8% 2%,rgba(77,221,214,.23),transparent 30rem),radial-gradient(circle at 92% 8%,rgba(178,133,255,.22),transparent 31rem),linear-gradient(148deg,#edf9fa,#f2f0ff 56%,#fff4e7)}
.world-library{--world-a:#f2bd55;--world-b:#72d5bd;--world-wash:rgba(242,189,85,.17);background:radial-gradient(circle at 7% 1%,rgba(242,189,85,.19),transparent 28rem),radial-gradient(circle at 94% 10%,rgba(114,213,189,.18),transparent 32rem),linear-gradient(150deg,#edf6f4,#f5f1ff 55%,#fff7e6)}
.experience-head{
  position:relative;
  width:min(var(--lumi-content),calc(100% - 32px));
  margin:clamp(16px,2.5vw,30px) auto 18px;
  display:grid!important;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:15px 20px;
  overflow:hidden;
  border:1px solid rgba(144,219,220,.3);
  border-radius:24px;
  color:#fff;
  background:
    radial-gradient(circle at 90% 0,color-mix(in srgb,var(--world-b) 35%,transparent),transparent 34%),
    linear-gradient(115deg,#071b34,#0c3150 58%,#253057);
  box-shadow:0 18px 44px rgba(2,18,42,.24);
}
.world-screen>.experience-head{height:auto!important;min-height:72px;transform:none!important;grid-template-columns:auto auto minmax(0,1fr)!important}
.experience-head::after{content:"";position:absolute;right:24px;bottom:-26px;width:150px;height:70px;border:1px solid rgba(255,255,255,.12);border-radius:50%;transform:rotate(-8deg)}
.experience-head span{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:42px;padding:8px 13px;border:1px solid color-mix(in srgb,var(--world-a) 60%,#fff);border-radius:999px;color:#fff;font-weight:950;letter-spacing:.02em;background:color-mix(in srgb,var(--world-a) 22%,rgba(6,24,48,.76))}.experience-head b{position:relative;z-index:1;color:#d8e7ee!important;font-weight:750}
.experience-head h2{color:#fff;font-size:clamp(27px,3vw,42px);letter-spacing:-.025em}
.experience-head p{color:#d2e2ec;line-height:1.65}
.back{
  position:relative;z-index:1;
  min-height:46px;
  padding:10px 16px;
  border:1px solid rgba(168,229,229,.5);
  border-radius:14px;
  color:#0e334c;
  background:linear-gradient(135deg,#fff,#def6f1);
  box-shadow:0 7px 18px rgba(0,10,30,.18);
  font-weight:900;
}
.conversation-workshop,.music-bay-shell,.library,.generation-scene{width:min(var(--lumi-content),calc(100% - 32px));margin-inline:auto}
.conversation-workshop,.music-bay-shell{
  display:grid!important;
  grid-template-columns:minmax(360px,.86fr) minmax(520px,1.14fr)!important;
  align-items:stretch;
  gap:20px;
  padding:clamp(14px,2vw,24px);
  border:1px solid rgba(97,171,183,.36);
  border-radius:var(--lumi-radius-xl);
  background:
    linear-gradient(120deg,rgba(255,255,255,.08),transparent 32%),
    linear-gradient(135deg,rgba(246,254,252,.96),rgba(239,241,252,.94));
  box-shadow:var(--lumi-shadow-2);
  backdrop-filter:blur(16px);
}
.story-chat-panel,.magic-gallery-panel,.director-visual-choices,.music-teacher-panel,.music-choice-panel{
  min-width:0;
  padding:clamp(16px,1.8vw,26px)!important;
  border:1px solid rgba(92,151,181,.28);
  border-radius:var(--lumi-radius-lg);
  box-shadow:0 14px 38px rgba(31,65,98,.12);
}
.story-chat-panel,.music-teacher-panel{display:flex!important;flex-direction:column;background:linear-gradient(158deg,#fffdf7,#f4fbfd 72%,#edf7f5)}
.magic-gallery-panel,.director-visual-choices,.music-choice-panel{
  display:flex!important;
  flex-direction:column;
  color:#f8fcff;
  border-color:rgba(142,221,224,.3);
  background:
    radial-gradient(circle at 88% 2%,color-mix(in srgb,var(--world-b) 24%,transparent),transparent 32%),
    radial-gradient(circle at 0 100%,color-mix(in srgb,var(--world-a) 22%,transparent),transparent 38%),
    linear-gradient(155deg,#0b2545,#25315f 58%,#3a2d60);
}
.guide-fanfan{
  position:relative;
  border:1px solid rgba(224,183,99,.46);
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 0,rgba(255,209,100,.2),transparent 34%),
    linear-gradient(135deg,#fff4d9,#fffdf8 58%,#eaf8f5);
  box-shadow:0 9px 24px rgba(100,71,27,.1);
}
.guide-fanfan::after{content:"✦";position:absolute;right:14px;top:11px;color:#a86c0c;font-size:17px}
.guide-fanfan img{filter:drop-shadow(0 9px 12px rgba(64,32,68,.18))}
.guide-fanfan b{color:#18334b}.guide-fanfan p{color:#4f6372!important}.soft-kicker{color:#7a4f72!important}
.creation-progress,.director-rounds,.music-progress{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:12px!important;
  border:1px solid rgba(91,139,172,.25);
  border-radius:18px;
  background:linear-gradient(110deg,#e7f5f4,#eceaf8);
}
.creation-progress i,.director-rounds i,.music-progress i{height:8px!important;border-radius:999px;background:#bfd1dc}
.creation-progress i.current,.director-rounds i.current,.music-progress i.current{background:linear-gradient(90deg,var(--world-a),var(--world-b));box-shadow:0 0 18px color-mix(in srgb,var(--world-a) 45%,transparent)}
.creation-progress span,.director-rounds span,.music-progress span{grid-column:1/-1;color:#183c56!important;font-weight:900!important}
.transcript,.music-selected-strip,.music-facts{
  min-height:44px;
  padding:10px 13px!important;
  border:1px solid rgba(134,164,181,.29);
  border-radius:16px;
  color:#173750;
  background:#fff3d5;
}

/* Voice and input cockpit */
.voice-card,.voice-leaf,#musicVoice{
  min-height:76px;
  border:1px solid #9de8df;
  border-radius:20px;
  color:#f8ffff;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.18),transparent 22%),
    linear-gradient(125deg,#087c85,#275fa5 60%,#6551ad);
  box-shadow:0 13px 30px rgba(21,88,127,.24),inset 0 1px rgba(255,255,255,.22);
}
.voice-leaf{position:relative;overflow:hidden}.voice-leaf::after{content:"";position:absolute;inset:-60% auto -60% -30%;width:48%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.voice-leaf>small{grid-column:2!important;min-width:0;color:#daf5f3!important}
.voice-card:hover,#musicVoice:hover,.voice-leaf:hover{filter:brightness(1.08);transform:translateY(-2px)}
.type-box,.music-input-box{
  display:grid;
  gap:8px;
  margin-top:10px;
  padding:12px;
  border:1px solid #91afc1;
  border-radius:18px;
  background:#fff;
  box-shadow:inset 0 2px 7px rgba(31,65,94,.055),0 8px 20px rgba(31,65,94,.07);
}
.type-box>span,.music-input-box>span{color:#25435b;font-size:12px;font-weight:900}
textarea,input,select{color:#10273f;background:#fff;border-color:#779db4}
.type-box input,.type-box textarea,.music-input-box textarea{min-height:54px;padding:12px 14px;color:#142c44;line-height:1.6;border:2px solid #789db4;border-radius:13px;background:#fbfdff}
.type-box button,.music-input-box button,.primary-action,#directorCreate,#imagineCreate,#musicDraft,#musicGenerate{
  min-height:52px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:16px;
  color:#fff;
  background:linear-gradient(120deg,#087d8e,#326bc3 58%,#7457c7);
  box-shadow:0 10px 23px rgba(40,101,159,.23),inset 0 1px rgba(255,255,255,.28);
  font-weight:950;
}
.type-box button:hover,.primary-action:hover,#directorCreate:hover,#imagineCreate:hover,#musicDraft:hover,#musicGenerate:hover{filter:brightness(1.08);transform:translateY(-2px)}

/* Candidate cards: image first, choice second, metadata last */
.idea-gallery-head,.music-choice-panel>header{padding-bottom:14px;border-bottom:1px solid rgba(151,219,223,.22)}
.idea-gallery-head b,.music-choice-panel>header b{color:#fff}.idea-gallery-head small,.music-choice-panel>header small{color:#c8dfea!important}
.choice-cards,.music-option-grid,.music-starter-grid,.idea-image-gallery,.director-image-gallery{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch;gap:14px}
.choice-hint{color:#2d5169!important;font-weight:800}
.choice-grid{gap:10px!important}
.choice-card{
  min-height:62px!important;
  border:1px solid #a4c0cd!important;
  border-radius:16px!important;
  color:#16354e!important;
  background:linear-gradient(145deg,#fff,#eef8f8)!important;
  box-shadow:0 8px 18px rgba(17,55,82,.09)!important;
}
.choice-card:hover,.choice-card.chosen{border-color:#2fbcb4!important;background:linear-gradient(145deg,#e3fbf5,#e8efff)!important;transform:translateY(-2px)}
.choice-cards>button,.director-visual-choices>button,.music-option-card,.idea-image-gallery>button,.director-image-gallery>button{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(151,204,216,.5);
  border-radius:20px;
  color:var(--lumi-ink);
  background:linear-gradient(155deg,#fff,#f2f8fa);
  box-shadow:0 13px 30px rgba(1,14,35,.23);
  transition:transform .22s var(--lumi-ease),border-color .22s,box-shadow .22s;
}
.choice-cards>button:hover,.director-visual-choices>button:hover,.music-option-card:hover,.idea-image-gallery>button:hover,.director-image-gallery>button:hover{
  transform:translateY(-6px);
  border-color:var(--lumi-cyan);
  box-shadow:0 20px 40px rgba(3,18,47,.3),0 0 0 3px rgba(88,223,211,.16);
}
.choice-cards img,.director-visual-choices img,.music-option-card img,.idea-image-gallery img,.director-image-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;background:linear-gradient(135deg,#d7e8eb,#e8e1f4)}
.choice-cards b,.director-visual-choices b,.music-option-copy b{color:#102c47;font-size:18px;line-height:1.35}
.choice-cards p,.director-visual-choices p,.music-option-copy p{color:#3d5b73;line-height:1.6}
.idea-image-gallery>button span,.director-image-card span{left:8px!important;right:8px!important;bottom:8px!important;padding:11px 12px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:14px!important;color:#fff!important;background:rgba(7,25,51,.9)!important;backdrop-filter:blur(12px);font-size:12px!important;line-height:1.45!important}
.magic-gallery-panel .idea-empty,.magic-gallery-panel .director-caption{color:#d4e8f1;background:rgba(255,255,255,.075);border-color:rgba(184,229,231,.24)}
.lumi-candidate-progress{border:1px solid rgba(134,219,220,.34)!important;border-radius:19px!important;background:rgba(5,25,52,.74)!important;box-shadow:0 12px 30px rgba(0,10,30,.2)!important}

/* Three worlds keep a distinct visual identity without changing their structure. */
.world-imagine .experience-head span{background:rgba(26,104,94,.78)}
.world-imagine .voice-leaf{background:linear-gradient(125deg,#087c73,#257a98 58%,#5574a3)}
.world-director .experience-head span{background:rgba(79,62,131,.82)}
.world-director .voice-leaf{background:linear-gradient(125deg,#315a9f,#694b9f 58%,#a94f75)}
.world-music .experience-head span{background:rgba(28,103,115,.8)}
.world-music .voice-leaf{background:linear-gradient(125deg,#087f83,#3865a8 55%,#7c4eae)}
.music-selected-strip>div,.chosen-film-strip>div{min-width:0;overflow-x:auto;scrollbar-color:var(--world-a) rgba(255,255,255,.12)}

/* Music Bay: aurora stage, never a flat black panel */
.music-bay-shell{background:linear-gradient(135deg,rgba(238,255,251,.96),rgba(240,236,255,.94))}
.music-choice-panel{background:radial-gradient(circle at 84% 0,rgba(255,143,188,.22),transparent 35%),radial-gradient(circle at 0 100%,rgba(79,224,216,.22),transparent 38%),linear-gradient(150deg,#0b2b4b,#2a3266 57%,#4a2d63)}
.music-starter-card,.music-confirm-card,.music-player-card,.music-generation-card{
  border:1px solid rgba(125,193,208,.36);
  border-radius:var(--lumi-radius-lg);
  background:linear-gradient(150deg,#fffdf8,#f2f8fb 72%,#f3efff);
  box-shadow:var(--lumi-shadow-1);
}
.music-option-card{background:linear-gradient(155deg,#fff,#eef8fa)}
.music-option-copy small,.music-option-copy em{color:#31546d!important;background:#edf6f8!important;border-color:#a9cbd5!important}
.music-draft.creation-ready{animation:lumi-ready 1.8s ease-in-out infinite alternate}
@keyframes lumi-ready{to{box-shadow:0 15px 36px rgba(94,86,205,.32),0 0 0 4px rgba(88,223,211,.2)}}
.music-generation-bar{height:18px;border:1px solid rgba(104,163,189,.27);border-radius:999px;background:#d9e7ee;overflow:hidden}
.music-generation-bar>i{background:linear-gradient(90deg,var(--lumi-cyan),var(--lumi-blue),var(--lumi-violet),var(--lumi-coral));box-shadow:0 0 16px rgba(88,223,211,.5)}
.music-player-lyrics{color:#142c45!important;background:#fffdf8!important;border:1px solid #b4cbd6!important;scrollbar-color:#697fc5 #e4ecf3}
.music-friendly-error{color:#702b25!important;background:#fff0eb!important;border-color:#ff9c8d!important}
.music-modal-kicker{color:#704e92!important}.music-player-card h2,.music-confirm-card h2,.music-generation-card h2{color:#132e48!important}

/* Works planet: compact constellation archive */
.memory-screen.world-library{overflow-y:auto!important;overflow-x:hidden}
.story-tree-library-head{background:linear-gradient(115deg,#08233c,#144967 58%,#3a416e)!important;color:#fff!important}
.story-tree-library-head span,.story-tree-library-head b{color:#fff!important}
.library{
  padding:clamp(16px,2.4vw,30px);
  border:1px solid rgba(103,172,186,.36);
  border-radius:var(--lumi-radius-xl);
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(237,247,247,.92));
  box-shadow:var(--lumi-shadow-2);
}
.works-planet-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(26px,4vw,48px);
  border:1px solid rgba(172,228,222,.2);
  border-radius:28px;
  color:#fff;
  background:radial-gradient(circle at 88% 12%,rgba(255,211,101,.28),transparent 27%),radial-gradient(circle at 10% 100%,rgba(84,223,211,.2),transparent 33%),linear-gradient(115deg,#075767,#2b4f91 60%,#674b9b);
  box-shadow:var(--lumi-shadow-1);
}
.works-planet-hero::after{content:"";position:absolute;right:6%;top:15%;width:110px;height:110px;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 24px rgba(255,255,255,.035),0 0 0 49px rgba(255,255,255,.025)}
.works-planet-hero>span{color:#403556!important;background:#ffdf7e!important}.works-planet-hero h2{color:#fff!important}.works-planet-hero p{color:#d9e9ef!important}
.works-room-grid,.works-card-grid{gap:18px}
.works-room{
  min-height:370px!important;
  padding:18px!important;
  overflow:hidden;
  border:1px solid rgba(96,157,184,.32)!important;
  border-radius:26px!important;
  background:linear-gradient(145deg,#fffdf7,#eef6f8)!important;
  box-shadow:0 13px 31px rgba(25,55,86,.16)!important;
}
.works-room.picturebook{border-top:7px solid #f1bd55!important}.works-room.video{border-top:7px solid #6d9ff1!important}.works-room.song{border-top:7px solid #b986e6!important}
.works-room:hover,.works-card:hover{transform:translateY(-5px);border-color:#4fc5c5!important;box-shadow:0 20px 40px rgba(24,70,104,.22)!important}
.works-room-icon{width:62px!important;height:62px!important;border-radius:20px!important;color:#17334c;background:#fff!important;box-shadow:0 7px 18px rgba(29,63,91,.12)}
.works-room-preview{height:150px!important;margin:10px 0!important;gap:7px!important}
.works-room-preview img,.works-room-preview i,.works-room-preview :nth-child(n){height:132px!important;border-width:4px!important;border-radius:14px!important;background:#f5f1e8!important;box-shadow:0 8px 18px rgba(31,48,69,.14)!important}
.works-room-copy{color:#17334b!important}.works-room-copy b{font-size:23px!important;color:#132d47!important}.works-room-copy small{min-height:38px!important;color:#52677a!important}.works-room-copy em{color:#173852!important;background:#e6f5f3!important}
.works-room-head{border:1px solid rgba(116,178,190,.3);border-radius:24px!important;color:#fff;background:linear-gradient(115deg,#0a6773,#365da7 58%,#7655a7)!important}
.works-room-head h2,.works-room-head p{color:#fff!important}.works-room-head>button{color:#17344e!important;background:#fff!important;border:1px solid #b8d3dd!important}
.works-card{overflow:hidden;border:1px solid rgba(98,159,185,.3)!important;border-radius:21px!important;background:#fff!important;box-shadow:0 10px 25px rgba(12,35,61,.12)!important}
.works-card img{background:#e6eff2!important}.works-card>b{color:#152e47!important}.works-card>small,.works-card>em{color:#586b7d!important}
.works-empty{color:#28475f!important;border-color:#9fc4ce!important;background:#f7fcfb!important}
.works-video-viewer{backdrop-filter:blur(20px);background:rgba(2,13,31,.78)}
.works-video-viewer>section{border:1px solid rgba(137,221,224,.48);border-radius:28px;background:#f7fbff;box-shadow:0 32px 86px rgba(0,0,0,.44)}
.memory-detail>summary{color:#163b50!important;background:#fff4d6!important;border:1px solid #e4bd67}

/* Reader: warm editorial book on a quiet stage */
.book-reader{padding:18px;background:rgba(3,14,33,.8);backdrop-filter:blur(21px) saturate(120%)}
.reader-card{
  position:relative;
  border:1px solid rgba(155,211,218,.56)!important;
  border-radius:32px!important;
  background:linear-gradient(145deg,#fffdf8,#edf7fa 68%,#f4efff)!important;
  box-shadow:0 38px 100px rgba(0,0,0,.46)!important;
}
.reader-card::after{content:"LUMI PICTUREBOOK";position:absolute;left:28px;top:19px;color:#577188;font-size:9px;font-weight:950;letter-spacing:.24em}
.reader-card>h2{color:#132d47!important;letter-spacing:-.02em!important}
.reader-card .close,.music-modal .close,.online-admin-panel .close{min-width:50px;color:#17344d!important;background:#fff!important;border:1px solid #98b7c7!important;border-radius:14px!important;font-weight:900}
.reader-panel-stage{overflow:hidden;border:9px solid #fff!important;border-radius:26px!important;background:#e5eef1!important;box-shadow:0 18px 38px rgba(31,57,82,.18)!important}
.reader-panel-stage img{background:#edf3f2!important}
.reader-page-summary,.reader-ruby-text,.reader-text,.reader-pinyin{border:1px solid rgba(113,159,182,.27)!important;border-radius:18px!important;color:#172f48!important;background:rgba(255,255,255,.92)!important}
.reader-page-summary article{color:#173148!important;background:linear-gradient(135deg,#fff1c9,#f8e7db)!important}
.reader-status,.reader-scene-title{color:#405d74!important}
.reader-controls button,.reader-advanced-controls button{min-height:46px;border:1px solid #8fadc0!important;border-radius:14px!important;color:#173650!important;background:#fbfeff!important;font-weight:900!important}
.reader-controls button:hover,.reader-advanced-controls button:hover{background:#dcf5ef!important;border-color:#38b9b7!important}
.reader-controls #readerPlay{color:#19324a!important;background:linear-gradient(135deg,#ffe184,#ffb991)!important;border-color:#edbb63!important}
.reader-paragraph.reading{color:#13273e!important;background:linear-gradient(transparent 56%,rgba(255,205,61,.78) 56%)!important}
.reader-mosaic{border:1px solid rgba(111,158,182,.22);background:#e8f0f3!important;scrollbar-color:#57bcbf #d9e7ec}
.reader-mosaic button{border-radius:13px!important;border:3px solid transparent!important;background:#fff!important}
.reader-mosaic button.current{border-color:#22aaa9!important;box-shadow:0 0 0 4px rgba(34,170,169,.18)!important}

/* Auth, account management and recharge */
.generating,.music-modal,.online-login,.online-admin-panel{background:rgba(2,13,31,.78);backdrop-filter:blur(22px) saturate(120%)}
.online-login{padding:24px;background:radial-gradient(circle at 22% 18%,rgba(75,222,213,.19),transparent 30rem),radial-gradient(circle at 80% 82%,rgba(143,117,238,.22),transparent 32rem),rgba(2,13,31,.9)}
.online-login-card{
  position:relative;
  width:min(940px,95vw)!important;
  min-height:600px;
  display:grid!important;
  grid-template-columns:minmax(270px,.86fr) minmax(350px,1.14fr);
  grid-template-rows:auto auto auto auto auto auto 1fr;
  align-content:center;
  column-gap:54px;
  row-gap:10px;
  padding:48px!important;
  overflow:hidden;
  border:1px solid rgba(133,216,219,.58)!important;
  border-radius:34px!important;
  background:linear-gradient(145deg,#fff9ec,#eef8fa 60%,#f3efff)!important;
  box-shadow:var(--lumi-shadow-3)!important;
}
.online-login-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:42%;background:radial-gradient(circle at 45% 25%,rgba(255,211,101,.26),transparent 30%),radial-gradient(circle at 15% 82%,rgba(88,223,211,.24),transparent 34%),linear-gradient(145deg,#092744,#234c72 58%,#52467f);clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%)}
.online-login-card>img,.online-login-card>span,.online-login-card>h2,.online-login-card>p{position:relative;z-index:1;grid-column:1;color:#fff!important}
.online-login-card>img{grid-row:1;width:112px!important;height:142px!important;filter:drop-shadow(0 15px 20px rgba(0,0,0,.28))}
.online-login-card>span{grid-row:2;color:#8ff1e6!important;letter-spacing:.14em;font-weight:900}
.online-login-card>h2{grid-row:3;margin:4px 0!important;font-size:clamp(28px,3vw,40px)!important;line-height:1.18}
.online-login-card>p{grid-row:4 / span 3;max-width:280px;color:#d6e6ee!important;line-height:1.75!important}
.online-login-card>.online-auth-tabs,.online-login-card>label,.online-login-card>#onlineAuthSubmit,.online-login-card>output{position:relative;z-index:1;grid-column:2}
.online-auth-tabs{padding:5px;border:1px solid #b2cad5;border-radius:16px;background:#dce9ee}
.online-auth-tabs button{border:0!important;border-radius:12px!important;color:#23445d!important;background:transparent!important;font-weight:950}
.online-auth-tabs button[aria-selected="true"],.online-auth-tabs button.active{color:#fff!important;background:linear-gradient(120deg,#087c8e,#3b62b2)!important;border-color:transparent!important}
.online-login-card label,.online-admin-panel label{color:#203d55;font-weight:900}
.online-login-card input,.online-admin-panel input,.online-admin-panel textarea,.online-admin-panel select{min-height:50px;border:2px solid #789db3!important;border-radius:14px!important;background:#fff!important;color:#10263e!important}
.online-login-card>#onlineAuthSubmit,.online-admin-panel form button{min-height:52px;color:#fff!important;background:linear-gradient(120deg,#087c8e,#315fa7)!important;border:1px solid #0b5377!important;border-radius:15px!important;font-weight:950}
.online-login-card output{min-height:28px;color:#6d3028!important;font-weight:850}
.online-admin-panel{padding:18px}
.online-admin-panel>section{
  width:min(1180px,96vw)!important;
  max-height:94vh!important;
  overflow:auto!important;
  padding:clamp(22px,3vw,38px)!important;
  border:1px solid rgba(139,214,217,.58)!important;
  border-radius:32px!important;
  background:linear-gradient(145deg,#fffaf0,#edf8fa 62%,#f2efff)!important;
  box-shadow:var(--lumi-shadow-3)!important;
}
.online-admin-panel>section>h2{margin-right:70px;color:#102d47;font-size:clamp(27px,3vw,38px)}
.online-admin-panel>section>p{color:#4a6275;line-height:1.65}
#onlineCreateAccount,.platform-admin-tools form,.onlineRechargePanel form{gap:13px!important;padding:18px!important;border:1px solid #aec9d3;border-radius:20px;background:#fff;box-shadow:0 8px 22px rgba(25,60,88,.08)}
.platform-admin-tools{margin-top:20px;padding-top:20px;border-top:1px solid #b6cdd6}
.platform-access-note{color:#503a1e!important;background:#fff1c7!important;border-color:#d99128!important}
.online-account-list{display:grid;gap:10px;margin-top:15px}
.online-account-list>*{border:1px solid rgba(105,158,185,.32)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 7px 18px rgba(23,55,81,.07)}
.online-payment-qr{padding:18px;border:1px solid #83b8c8!important;border-radius:22px;background:#fff!important;box-shadow:var(--lumi-shadow-1)}
.online-payment-qr img{border-radius:16px!important}.online-payment-qr figcaption b{color:#07548f!important}.online-pricing-standard{color:#183b50!important;background:#eaf6f8!important;border-color:#6e9eb2!important}

/* Recharge: gallery-like payment station with a clear, non-overlapping action path */
#onlineRechargePanel>section{
  display:grid;
  grid-template-columns:minmax(250px,.76fr) minmax(340px,1.24fr);
  grid-template-areas:
    "title title"
    "qr form"
    "qr reference"
    "message message"
    "history history";
  gap:16px 24px;
  align-items:start;
}
#onlineRechargePanel .close{position:sticky;top:0;z-index:3;justify-self:end;grid-column:1/-1;margin-bottom:-64px}
#onlineRechargeTitle{grid-area:title;margin:0!important;padding-right:78px}
#onlineRechargePanel .online-payment-qr{grid-area:qr;position:sticky;top:16px;display:grid!important;grid-template-columns:1fr!important;margin:0!important;text-align:center}
#onlineRechargePanel .online-payment-qr img{width:100%;max-width:320px;max-height:420px;margin:auto;object-fit:contain}
#onlineRechargePanel .online-payment-qr figcaption{padding:4px 8px;color:#16364f!important}
#onlineRechargeForm{grid-area:form;display:grid!important;grid-template-columns:1fr!important;margin:0!important}
#onlineRechargeForm label{display:grid;gap:7px;margin:0!important}
#onlineRechargeForm button{width:100%;margin-top:4px}
#onlineRechargeReference{grid-area:reference;min-width:0}
#onlineRechargeMessage{grid-area:message;display:block;min-height:28px;padding-inline:3px;color:#6b3027!important;font-weight:900}
#onlineRechargeList{grid-area:history;max-height:220px;overflow:auto}
.online-recharge-reference{display:grid;gap:10px}
.online-recharge-reference>*{min-width:0}
.online-pricing-standard{margin:0!important;padding:16px 18px!important;border-radius:18px!important;line-height:1.65!important}

/* Owner console: compact, high-density operations without a generic admin-template feel */
.online-admin-panel>section>.close{position:sticky;top:0;z-index:4;float:right}
#onlineCreateAccount{display:grid!important;grid-template-columns:1fr 1.15fr 1fr .72fr auto;align-items:end}
#onlineCreateAccount label{display:grid;gap:7px;margin:0!important}
#onlineCreateAccount button{min-width:150px}
.platform-admin-tools form{display:grid!important;grid-template-columns:minmax(280px,1.45fr) minmax(200px,.8fr) minmax(150px,.55fr) auto;align-items:end}
.platform-admin-tools form label{display:grid;gap:7px;margin:0!important}
.platform-admin-tools form label:first-child{grid-row:span 2}
.platform-admin-tools form textarea{min-height:128px}
.platform-access-note{margin:14px 0!important;padding:13px 15px!important;border-radius:14px!important}
.online-account-list article{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;padding:14px 16px!important}
.online-account-list article b,.online-account-list article small{color:#18364e!important}
.platform-credit-actions{display:flex!important;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.platform-credit-actions input{width:112px!important;min-height:42px!important}
.platform-credit-actions button{min-height:42px!important;padding:7px 12px!important}
.platform-unlimited{color:#fff!important;background:#163a52!important}
.online-recharge-admin{margin-top:20px;padding-top:18px;border-top:1px solid #b6cdd6}
.online-recharge-admin article{border-radius:16px!important;background:#fff9e8!important}

/* Generation and modal hierarchy */
.generation-scene,.music-modal>section,.music-confirm-card,.music-player-card,.music-generation-card{
  border:1px solid rgba(137,212,217,.58)!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,#fffaf0,#edf8fb 59%,#f3efff)!important;
  box-shadow:var(--lumi-shadow-3)!important;
}
.generation-scene{
  max-width:820px;
  padding:clamp(24px,4vw,46px)!important;
  display:grid!important;
  grid-template-columns:130px minmax(0,1fr);
  align-items:center;
  gap:22px 28px;
  overflow:hidden;
}
.generation-scene>img{width:130px!important;height:168px!important;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(43,35,76,.22))}
.generation-scene h2{margin:5px 0;color:#102d47!important;font-size:clamp(27px,3.2vw,40px);line-height:1.18;letter-spacing:-.025em}
.generation-scene p{color:#405b70!important;line-height:1.7}
.generation-scene>div:first-of-type>span{color:#087987!important;font-weight:950;letter-spacing:.06em}
.generation-talk{min-height:48px;margin-top:12px;padding:10px 16px;border:1px solid rgba(255,255,255,.58);border-radius:15px;color:#fff;background:linear-gradient(125deg,#0b6c78,#345ea7 58%,#7454a3)}
.growth-line{grid-column:1/-1;width:100%;height:18px;border:1px solid #a9c3d0;border-radius:999px;background:#d7e5ec;overflow:hidden;box-shadow:inset 0 2px 5px rgba(13,48,77,.1)}
.growth-line>i,#growthBar{background:linear-gradient(90deg,var(--lumi-cyan),var(--lumi-blue),var(--lumi-violet),var(--lumi-coral))}
.generation-cells,.generation-error,.generation-diagnostics{grid-column:1/-1}
.generation-cells{display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px}.generation-cells span{height:8px!important;border-radius:999px!important;background:linear-gradient(90deg,#76ddd4,#7ca8e9)!important}
.generation-diagnostics{padding:10px 13px;border:1px solid #b8ccd5;border-radius:13px;color:#35546b!important;background:#f5f9fb!important}
.generation-error{padding:20px!important;border:2px solid #dc6c61!important;border-radius:21px!important;background:#fff0e9!important;color:#5a292b!important}
.generation-error h3,.generation-error p,.generation-error b{color:#5a292b!important}
.generation-error>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.generation-error button{min-height:50px;border-radius:14px;font-weight:950}.generation-error #retryGeneration{color:#fff;background:#a93434;border-color:#7f2424}.generation-error #keepCurrentCreation{color:#173750;background:#fff;border-color:#8daebe}
.voice-events{color:#17364e!important;background:#fff!important;border:1px solid #abc4d0!important}.diagnostic-grid>div{background:#f4f8fb!important;border:1px solid #b8cbd4!important}.diagnostic-grid b{color:#142e47!important}.parent-note{color:#415a6e!important}

.music-generation-card{width:min(760px,94vw)!important;padding:clamp(24px,4vw,44px)!important;text-align:center}.music-generation-card h2{font-size:clamp(27px,3.2vw,40px)!important}.music-generation-card p{color:#405b70!important;line-height:1.7}.music-disc{margin-inline:auto!important}.music-generation-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}.music-generation-actions button,.music-player-buttons button,.music-player-foot button,.music-confirm-actions button{min-height:48px;border:1px solid #84a8bb!important;border-radius:14px!important;color:#17364f!important;background:#fff!important;font-weight:900!important}.music-confirm-actions #musicGenerate{color:#fff!important}
.music-friendly-error{padding:17px!important;border:2px solid #dc6c61!important;border-left-width:6px!important;border-radius:18px!important;background:#fff0eb!important}.music-friendly-error b,.music-friendly-error p{color:#672c29!important}.music-friendly-error button{min-height:48px;border-radius:14px;color:#fff;background:#9b3737;border-color:#7e2929}

/* Motion is purposeful and always optional */
.planet-place,.pill-tool,.volume-tool,.choice-card,.choice-cards>button,.director-visual-choices>button,.music-option-card,.works-room,.works-card,#startBtn,.voice-card,#musicVoice,.voice-leaf{transition:transform .22s var(--lumi-ease),filter .22s,border-color .22s,box-shadow .22s,background .22s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .launch-orbit,.planet-wrap,.lumi-sparkles,.music-disc{transform:none!important}
}
body.low-fx *,body.low-fx *::before,body.low-fx *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
body.low-fx .cosmic-noise,body.low-fx .starfield,body.low-fx .deep-nebula,body.low-fx .launch-nebula{display:none!important}

@media (max-width:1180px){
  .topbar{align-items:flex-start}.brand{min-width:215px}.top-actions{flex:1}
  .conversation-workshop,.music-bay-shell{grid-template-columns:minmax(330px,.88fr) minmax(0,1.2fr)}
  .cosmic-copy h1{font-size:clamp(45px,6.8vw,70px)}
  .works-room{min-height:345px!important}.works-room-copy b{font-size:20px!important}
  #onlineCreateAccount{grid-template-columns:repeat(2,minmax(0,1fr))!important}#onlineCreateAccount button{grid-column:1/-1}
  .platform-admin-tools form{grid-template-columns:1fr 1fr!important}.platform-admin-tools form label:first-child{grid-row:auto;grid-column:1/-1}.platform-admin-tools form button{grid-column:1/-1}
}

/* 1024×768 classroom: keep left input and right creation stage split */
@media (min-width:900px) and (max-width:1100px){
  .topbar{min-height:76px;padding:9px 12px;gap:8px}.brand{min-width:190px}.brand img{width:44px;height:44px}.brand small{display:none}
  .pill-tool,.volume-tool,#onlineRechargeOpen,#onlineLogout,#onlineAdminOpen{min-height:44px;padding:6px 10px}
  .world-screen{padding-top:4px}.experience-head{margin:10px auto 12px;padding:13px 16px}.experience-head h2{font-size:28px}
  .conversation-workshop,.music-bay-shell{width:calc(100% - 20px);grid-template-columns:minmax(310px,.86fr) minmax(0,1.14fr)!important;gap:12px;padding:12px;border-radius:25px}
  .story-chat-panel,.magic-gallery-panel,.director-visual-choices,.music-teacher-panel,.music-choice-panel{border-radius:19px}
  .guide-fanfan{padding:11px!important}.story-host img{width:70px!important;height:90px!important}.story-host b{font-size:17px!important}.story-host p{line-height:1.55!important}
  .voice-leaf,#musicVoice{height:auto!important;min-height:90px!important;padding:12px 14px!important;overflow:hidden!important;grid-template-rows:auto auto!important}.voice-leaf b,#musicVoice b{align-self:end!important;line-height:1.35!important}.voice-leaf small,#musicVoice small{align-self:start!important;line-height:1.35!important}.type-box{padding:9px}.type-box input{min-height:48px}
  .choice-cards{grid-template-columns:1fr!important}.choice-cards,.director-image-gallery,.idea-image-gallery,.music-option-grid,.music-starter-grid{gap:9px}.choice-cards b,.director-image-gallery b,.music-option-copy b{font-size:15px}
  .works-room-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}.works-room{min-height:340px!important;padding:14px!important}.works-room-preview{height:132px!important}.works-room-preview img,.works-room-preview i,.works-room-preview :nth-child(n){height:112px!important}.works-room-copy b{font-size:18px!important}.works-room-copy small{font-size:11px!important}
  .library{width:calc(100% - 20px)!important;padding:13px}.works-planet-hero{padding:20px!important}.works-planet-hero h2{font-size:30px!important}
}

@media (max-width:899px){
  .topbar{position:sticky;display:grid!important;grid-template-columns:1fr;min-height:auto;padding:8px 10px;gap:7px}.brand{width:100%;min-width:0;padding-right:12px}.brand small{display:none}
  .top-actions{display:grid!important;grid-template-columns:minmax(82px,.9fr) minmax(132px,1.35fr) minmax(90px,1fr);width:100%;justify-content:stretch;overflow:visible;gap:7px;padding-bottom:0}
  .brand>span:last-child{display:flex!important;min-width:150px!important;width:auto!important;height:auto!important}.top-actions>.pill-tool,.top-actions>.volume-tool{width:100%;min-width:0;justify-content:center}
  .top-actions .pill-tool b,.top-actions .volume-tool b{display:inline!important;white-space:nowrap}
  .online-account-bar{top:auto!important;right:8px!important;bottom:8px!important;left:8px!important;max-width:none;justify-content:center}
  .conversation-workshop,.music-bay-shell{grid-template-columns:1fr!important;width:calc(100% - 20px);padding:11px;border-radius:22px}
  .experience-head,.library{width:calc(100% - 20px)}
  .world-screen>.experience-head{grid-template-columns:auto minmax(0,1fr)!important;gap:9px;padding:12px 13px}.experience-head>b{grid-column:1/-1}.experience-head>span{justify-self:start}
  .cosmic-home{overflow:hidden!important}
  #home .cosmic-copy{position:absolute!important;left:16px!important;right:auto!important;top:18px!important;width:calc(100% - 32px)!important;max-width:none!important;padding:22px!important}#home .cosmic-copy h1{font-size:clamp(34px,10.5vw,50px)}
  .cosmic-copy p{font-size:15px}.cosmic-copy::after{margin-top:18px}
  #home #planetWrap{left:50%!important;right:auto!important;top:78%!important;width:138vw!important;transform:translate(-50%,-50%)!important}
  .planet-arrow{top:74%!important}.planet-arrow-prev{left:8px!important}.planet-arrow-next{right:8px!important}
  .lumi-home{left:14px!important;bottom:8px!important;width:128px!important}.lumi-home img{width:86px!important;height:116px!important}.lumi-label{display:none!important}
  .planet-tip{display:none!important}
  .launch-copy{left:16px!important;right:16px!important;top:8%!important;width:auto!important;padding:28px!important;transform:none}.launch-copy h2{font-size:clamp(38px,11vw,54px)}
  .launch-copy p{font-size:15px;line-height:1.65}
  .launch-planet{right:-55%!important;top:auto!important;bottom:-18%!important;width:128vw!important;transform:none!important}
  .launch-lumi{left:20%!important;top:66%!important}.launch-lumi img{width:118px!important}
  .works-room-grid{grid-template-columns:1fr!important}.works-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .online-login-card{display:block!important;width:min(560px,94vw)!important;min-height:0;padding:30px!important}
  .online-login-card::before{width:100%;height:250px;bottom:auto;clip-path:none}
  .online-login-card>img,.online-login-card>span,.online-login-card>h2,.online-login-card>p{position:relative;display:block;color:#fff!important}
  .online-login-card>img{float:left;width:82px!important;height:105px!important;margin:5px 16px 92px 0}.online-login-card>span{padding-top:13px}.online-login-card>h2{font-size:25px!important}.online-login-card>p{min-height:92px;margin-bottom:35px!important;color:#dcebf2!important;font-size:13px!important;line-height:1.55!important}
  #onlineRechargePanel>section{display:block!important}#onlineRechargePanel .online-payment-qr{position:static;margin:14px 0!important}#onlineRechargePanel .online-payment-qr img{max-height:310px}#onlineRechargeForm,#onlineRechargeReference,#onlineRechargeMessage,#onlineRechargeList{margin-top:14px!important}
  .online-admin-panel>section{max-height:96vh!important}
}

@media (max-width:620px){
  .brand b{font-size:14px}.brand img{width:40px;height:40px}.experience-head{padding:13px}.experience-head p{font-size:14px}
  .pill-tool,.volume-tool{min-height:44px;padding:5px 7px}.pill-tool b,.volume-tool b{font-size:11px}.volume-tool input{min-width:42px!important;width:48px!important}
  .launch-copy{padding:24px!important}.launch-copy::before{margin-bottom:11px}.launch-kicker{font-size:9px}.launch-copy h2{margin:10px 0;font-size:clamp(36px,11.5vw,50px)}
  #startBtn{width:100%;min-height:58px;margin-top:13px}
  .choice-cards,.director-image-gallery,.idea-image-gallery,.music-option-grid,.music-starter-grid{grid-template-columns:1fr!important}
  .generation-scene,.music-modal>section,.online-login-card,.online-admin-panel>section,.reader-card{border-radius:22px!important}
  .generation-scene{grid-template-columns:1fr!important;text-align:center}.generation-scene>img{margin-inline:auto}.generation-error>div,.music-generation-actions{grid-template-columns:1fr}
  .works-card-grid{grid-template-columns:1fr!important}.book-reader{padding:6px}.reader-card::after{display:none}
  .online-login{padding:10px}.online-login-card{padding:22px!important}.online-login-card::before{height:250px}.online-login-card>p{margin-bottom:26px!important}
  body:not(.screen-away) main{padding-bottom:84px!important}
  #onlineCreateAccount,.platform-admin-tools form{grid-template-columns:1fr!important}#onlineCreateAccount button,.platform-admin-tools form label:first-child,.platform-admin-tools form button{grid-column:auto!important}
  .online-account-list article{grid-template-columns:1fr!important}.platform-credit-actions{justify-content:flex-start!important}
  #onlineRechargePanel .online-payment-qr{padding:12px!important}#onlineRechargePanel .online-payment-qr img{max-height:255px}
}

/* Final theme authority: earlier protected layers use !important for legibility.
   These declarations intentionally win only on color and surface presentation. */
.world-screen.world-imagine{background:radial-gradient(circle at 15% 92%,rgba(255,194,128,.22),transparent 25%),radial-gradient(circle at 82% 18%,rgba(79,226,210,.2),transparent 28%),linear-gradient(145deg,#06192d,#0a3c52 58%,#176477)!important}
.world-screen.world-director{background:radial-gradient(circle at 90% 18%,rgba(255,139,120,.18),transparent 27%),radial-gradient(circle at 12% 88%,rgba(98,143,255,.2),transparent 26%),linear-gradient(145deg,#080e27,#1a2854 56%,#49386b)!important}
.world-screen.world-music{background:radial-gradient(circle at 86% 12%,rgba(187,133,255,.2),transparent 28%),radial-gradient(circle at 12% 88%,rgba(76,223,215,.2),transparent 25%),linear-gradient(145deg,#061b35,#094b65 54%,#4a3b78)!important}
.world-screen.world-library{background:radial-gradient(circle at 86% 12%,rgba(242,189,85,.16),transparent 28%),radial-gradient(circle at 11% 86%,rgba(110,212,187,.17),transparent 27%),linear-gradient(145deg,#071b30,#123f54 56%,#3e3c67)!important}
.world-imagine .story-chat-panel{background:linear-gradient(155deg,#fff8e8,#f4e2bc 62%,#e6f5ee)!important;border-color:#e3b75f!important;color:#142d43!important}
.world-imagine .magic-gallery-panel{background:radial-gradient(circle at 88% 0,rgba(255,151,116,.18),transparent 34%),radial-gradient(circle at 0 100%,rgba(78,224,207,.22),transparent 40%),linear-gradient(150deg,#0a2b47,#16475b 57%,#284d65)!important;border-color:rgba(102,223,210,.62)!important;color:#f8fdff!important}
.world-director .story-chat-panel{background:linear-gradient(155deg,#fff8ed,#eee3f6 68%,#edf5ff)!important;border-color:#a493d1!important;color:#192e47!important}
.world-director .director-visual-choices{background:radial-gradient(circle at 90% 0,rgba(255,134,115,.2),transparent 34%),radial-gradient(circle at 0 100%,rgba(104,145,255,.22),transparent 40%),linear-gradient(150deg,#101d42,#30305f 58%,#4a315d)!important;border-color:rgba(135,163,236,.62)!important;color:#f8fbff!important}
.world-music .music-teacher-panel{background:linear-gradient(155deg,#f8fff9,#dff2e9 62%,#eef6ff)!important;border-color:#5fafaa!important;color:#173247!important}
.world-music .music-choice-panel{background:radial-gradient(circle at 84% 0,rgba(255,143,188,.22),transparent 35%),radial-gradient(circle at 0 100%,rgba(79,224,216,.22),transparent 38%),linear-gradient(150deg,#0b2b4b,#2a3266 57%,#4a2d63)!important;border-color:rgba(161,186,238,.56)!important;color:#f8fbff!important}
.world-imagine .magic-gallery-panel .idea-empty,.world-director .director-visual-choices .idea-empty,.world-music .music-choice-panel .music-empty{color:#edfaff!important;background:rgba(255,255,255,.08)!important;border-color:rgba(194,237,238,.28)!important;text-shadow:0 1px 2px rgba(0,18,36,.45)}
.world-imagine .magic-gallery-panel .idea-gallery-head b,.world-director .director-visual-choices .idea-gallery-head b,.world-music .music-choice-panel .idea-gallery-head b{color:#fff!important}
.world-imagine .magic-gallery-panel .idea-gallery-head small,.world-director .director-visual-choices .idea-gallery-head small,.world-music .music-choice-panel .idea-gallery-head small{color:#d5e8f1!important}
.world-director .director-visual-choices .chosen-film-strip>b,.world-director .director-visual-choices .chosen-film-strip>span{color:#edf8ff!important}
.world-director .director-visual-choices .chosen-film-strip{border-color:rgba(202,226,239,.25)!important}
.world-music .music-choice-panel .music-invitation{color:#f7fcff!important;background:linear-gradient(145deg,rgba(20,47,84,.92),rgba(44,37,83,.9))!important;border-color:rgba(164,219,229,.42)!important}
.world-music .music-choice-panel .music-invitation b{color:#fff!important}
.world-music .music-choice-panel .music-invitation p{color:#d7e8f2!important}
.world-library .works-room{background:linear-gradient(145deg,#fffdf7,#eef6f8)!important;border-color:rgba(96,157,184,.32)!important}
.world-library .works-card{background:#fff!important;border-color:rgba(98,159,185,.3)!important}

/* v41 precision pass: preserve the existing DOM and interaction hooks while
   removing crowded legacy decoration and restoring classroom readability. */
#choiceCards[hidden],#choiceCards[aria-hidden="true"]{display:none!important}
#libraryVersion{display:none!important}

/* The home mark must reserve space for its subtitle instead of clipping it. */
.brand{min-height:64px;min-width:0!important;overflow:visible!important}
.brand>span:last-child{overflow:visible!important}
.brand b,.brand small{overflow:visible!important;white-space:nowrap!important}
.brand small{display:block!important;line-height:1.25!important}

/* The return control is text-first: no decorative orb may occupy its label. */
.experience-head .back{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:max-content!important;padding:10px 16px!important;line-height:1.25!important;text-align:center!important;white-space:nowrap!important}
.experience-head .back::before,.experience-head .back::after{content:none!important;display:none!important}

/* The microphone is a complete, unclipped action surface at classroom size. */
.voice-leaf,#musicVoice{isolation:isolate;align-content:center!important;row-gap:4px!important}
.voice-leaf::after{z-index:0!important;pointer-events:none!important}
.voice-leaf>*{position:relative!important;z-index:1!important}
.voice-leaf b,.voice-leaf small,#musicVoice b,#musicVoice small{min-width:0!important}

/* Candidate copy remains readable on the cinematic image surface. */
.world-imagine .imagine-branch-card .branch-copy,.world-imagine .classroom-branch-card .branch-copy,.world-director .director-branch-card .branch-copy{background:linear-gradient(180deg,rgba(255,253,247,.98),rgba(240,249,250,.98))!important;color:#112f49!important;text-shadow:none!important}
.world-imagine .imagine-branch-card .branch-copy b,.world-imagine .classroom-branch-card .branch-copy b,.world-director .director-branch-card .branch-copy b{color:#102d47!important}
.world-imagine .imagine-branch-card .branch-copy em,.world-imagine .classroom-branch-card .branch-copy em,.world-director .director-branch-card .branch-copy em{color:#254d68!important}
.world-imagine .imagine-branch-card .branch-copy small,.world-imagine .classroom-branch-card .branch-copy small,.world-director .director-branch-card .branch-copy small{color:#47687d!important}

/* A modal close action belongs at the predictable upper-right corner. */
#onlineRechargePanel>section{position:relative!important;padding-top:70px!important}
#onlineRechargePanel .close{position:absolute!important;top:18px!important;right:18px!important;left:auto!important;z-index:20!important;grid-column:auto!important;margin:0!important;min-width:96px!important;color:#12314b!important;background:#fff!important;border:2px solid #5d9bb6!important;box-shadow:0 6px 16px rgba(19,58,83,.16)!important}
#onlineRechargeTitle{padding-right:116px!important}

@media (min-width:900px) and (max-width:1100px){
  .topbar{min-height:84px!important;align-items:center!important}
  .brand{min-width:232px!important}
  .brand small{display:block!important;font-size:9px!important;margin-top:3px!important}
  #imagine .voice-leaf{min-height:112px!important;overflow:visible!important;grid-template-columns:70px minmax(0,1fr)!important;grid-template-rows:auto auto!important;padding:13px 16px!important}
  #imagine .voice-leaf .leaf-core{grid-row:1/3!important;align-self:center!important}
  #imagine .voice-leaf b,#imagine .voice-leaf small{grid-column:2!important;align-self:auto!important;line-height:1.3!important}
  #imagine .voice-leaf small{padding-bottom:1px!important}
}
@media (max-width:899px){
  .brand small{display:block!important;font-size:9px!important;margin-top:2px!important}
  #onlineRechargePanel>section{padding-top:66px!important}
  #onlineRechargePanel .close{top:14px!important;right:14px!important}
}