:root {
  --ink: #eaf4ff;
  --muted: #91a5c4;
  --line: rgba(173, 211, 255, 0.14);
  --void: #070b1b;
  --panel: rgba(12, 20, 47, 0.78);
  --panel-solid: #101a39;
  --blue: #69ddff;
  --cyan: #8fffe8;
  --violet: #a58cff;
  --pink: #ff8cb8;
  --gold: #ffcf69;
  --green: #64e9a4;
  --red: #ff8194;
  --font: "Outfit", Arial, sans-serif;
  --display: "Space Grotesk", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
html { min-width: 320px; background: var(--void); }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--font); background: radial-gradient(circle at 12% 18%, #1e246b 0, transparent 30%), radial-gradient(circle at 88% 80%, #5a1d5d 0, transparent 25%), var(--void); overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
#sky-canvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hidden { display: none !important; }
.login-view { height: 100vh; max-height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(380px, 1fr) minmax(400px, 1fr); align-items: center; }
.login-world { height: 100%; min-height: 0; position: relative; overflow: hidden; background: linear-gradient(150deg, rgba(32, 25, 102, .52), rgba(4, 62, 94, .16)); border-right: 1px solid var(--line); }
.login-world::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(3, 8, 22, .8)), repeating-linear-gradient(90deg, transparent 0 99px, rgba(113, 224, 255, .055) 100px); }
.login-world::after { content: ""; position: absolute; width: 900px; height: 270px; border-radius: 50%; bottom: -130px; left: -105px; background: radial-gradient(ellipse, rgba(55, 203, 255, .68) 0%, rgba(95, 74, 255, .27) 38%, transparent 70%); filter: blur(6px); }
.orbital-ring { position: absolute; border: 1px solid rgba(126, 234, 255, .28); border-radius: 50%; transform: rotate(-23deg); animation: orbit 11s linear infinite; }
.ring-one { width: 710px; height: 160px; left: -90px; top: 204px; }
.ring-two { width: 560px; height: 118px; left: 10px; top: 255px; border-color: rgba(255, 190, 232, .3); animation-duration: 16s; animation-direction: reverse; }
.planet { position: absolute; border-radius: 50%; filter: drop-shadow(0 0 24px currentColor); }
.planet-a { color: #9d72ff; background: linear-gradient(140deg, #f6a7ff, #7438d0 55%, #2b1370); width: 76px; height: 76px; left: 12%; top: 13%; box-shadow: inset -15px -12px 20px #271564; }
.planet-b { color: #65f6ee; background: linear-gradient(140deg, #ecffff, #44c7e1 45%, #144d95); width: 35px; height: 35px; right: 19%; top: 18%; box-shadow: inset -7px -6px 12px #0a3176; }
.nova-login { position: absolute; width: 200px; height: 290px; z-index: 2; left: 50%; bottom: min(10vh, 70px); transform: translateX(-50%); animation: float 5s ease-in-out infinite; filter: drop-shadow(0 25px 25px rgba(0, 0, 0, .32)); }
.nova-login::before { content: ""; position: absolute; inset: 42px 14px 0; border-radius: 46% 46% 30% 30%; background: linear-gradient(140deg, #ffc75d 0%, #ff8c60 47%, #ef4f7d 100%); box-shadow: inset -18px -18px 0 rgba(162, 44, 100, .3), inset 9px 12px 0 rgba(255, 255, 255, .24), 0 0 70px rgba(255, 122, 148, .38); }
.nova-antenna { position: absolute; left: 88px; top: 9px; height: 50px; width: 19px; border-radius: 20px 20px 2px 2px; background: #ffb762; transform: rotate(13deg); z-index: 2; }
.nova-antenna::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; top: -10px; left: -2px; background: #92fff0; box-shadow: 0 0 22px #92fff0; }
.nova-face { position: absolute; top: 92px; left: 37px; width: 126px; height: 68px; border-radius: 42px; z-index: 2; background: linear-gradient(130deg, #173454, #070d2d 62%, #284660); display: flex; justify-content: space-around; align-items: center; padding: 0 26px; box-shadow: inset 0 4px 10px rgba(185, 255, 255, .2); }
.nova-face span { width: 15px; height: 19px; background: #9efff2; border-radius: 50%; box-shadow: 0 0 16px #8ffff0; }
.nova-core { position: absolute; z-index: 3; width: 50px; height: 50px; top: 182px; left: 75px; border-radius: 50%; background: radial-gradient(circle, #fff 0 8%, #8fffe8 10% 32%, #00a8dd 36% 55%, #2338b1 60% 70%, transparent 73%); box-shadow: 0 0 35px #71e9ff; }
.nova-arm { position: absolute; z-index: 1; width: 40px; height: 104px; top: 167px; border-radius: 35px; background: linear-gradient(140deg, #ffbc67, #ed5c78); }
.nova-arm-left { left: 0; transform: rotate(26deg); }.nova-arm-right { right: 0; transform: rotate(-26deg); }
.login-panel { width: min(420px, calc(100% - 40px)); align-self: center; justify-self: center; padding: 16px 0; }
.academy-mark { display: inline-flex; gap: 10px; align-items: center; color: var(--blue); font-weight: 800; letter-spacing: .16em; font-size: 13px; }.academy-mark svg { width: 18px; }
.eyebrow, .side-label, .kicker { color: var(--gold); font-size: 11px; letter-spacing: .15em; font-weight: 700; }
.login-panel .eyebrow { margin: 16px 0 6px; }.login-panel h1 { margin: 0; font-family: var(--display); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.02; letter-spacing: -1.5px; }.login-panel h1 em { color: var(--cyan); font-style: normal; }.intro { max-width: 420px; font-size: 14px; line-height: 1.45; color: var(--muted); margin: 10px 0 12px; }
.learning-notice { display: flex; gap: 8px; align-items: flex-start; padding: 8px 11px; border: 1px solid rgba(217, 145, 23, .35); background: #fff7df; color: #805a12; font-size: 12px; line-height: 1.35; border-radius: 7px; margin: 10px 0 14px; }.learning-notice svg { color: var(--gold); flex: none; width: 16px; }.learning-notice strong { color: #5f420b; }
form { display: grid; gap: 4px; } form label { color: #45658d; font-size: 12px; font-weight: 600; margin-top: 4px; }.input-wrap { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #f9fcff; border: 1px solid rgba(72, 128, 194, .28); border-radius: 7px; box-shadow: 0 5px 16px rgba(54, 108, 174, .05); transition: border-color .2s, background .2s; }.input-wrap:focus-within { border-color: #2a9bd8; background: #fff; }.input-wrap svg { width: 16px; color: var(--blue); }.input-wrap input { min-width: 0; flex: 1; outline: none; border: 0; background: transparent; color: #17335d; font-size: 14px; }.input-wrap input::placeholder { color: #90a9c8; }.form-error { min-height: 14px; color: #ff9dac; margin: 1px 0; font-size: 12px; }
.button { min-height: 42px; border: 0; border-radius: 7px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }.button:hover { transform: translateY(-2px); filter: brightness(1.07); }.button:active { transform: translateY(0); }.button svg { width: 17px; }.button-primary { color: #071227; background: linear-gradient(100deg, var(--cyan), var(--blue)); box-shadow: 0 8px 25px rgba(84, 216, 255, .22); }.login-button { margin-top: 8px; font-size: 14px; }.demo-hint { color: #6680a5; font-size: 12px; text-align: center; margin-top: 10px; }.demo-hint code { color: #315982; }
.academy-view { min-height: 100vh; }.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; border-bottom: 1px solid var(--line); background: rgba(6, 10, 26, .76); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10; }.logo-button { border: 0; background: transparent; color: white; padding: 0; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .12em; font-size: 13px; }.logo-button svg { color: var(--blue); width: 20px; }.top-progress { display: grid; grid-template-columns: auto 170px auto; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .07em; color: var(--muted); }.top-progress b { font-size: 11px; color: #cbd9ef; letter-spacing: 0; }.progress-track { height: 6px; border-radius: 99px; background: rgba(168, 199, 244, .14); overflow: hidden; }.progress-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 13px var(--cyan); transition: width .45s ease; }.top-actions { display: flex; gap: 10px; align-items: center; }.icon-button { width: 37px; height: 37px; display: grid; place-items: center; color: #c8d8f4; background: rgba(151, 178, 255, .08); border: 1px solid var(--line); border-radius: 7px; }.icon-button svg { width: 17px; }.profile-button { display: inline-flex; gap: 8px; align-items: center; color: #dce7fb; border: 0; background: transparent; }.profile-button svg { width: 14px; color: var(--muted); }.profile-orb { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(140deg, #7e8cff, #ec78ba); }
.academy-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: calc(100vh - 72px); }.sidebar { padding: 25px 12px; border-right: 1px solid var(--line); background: rgba(5, 11, 28, .48); }.side-label { padding: 0 13px; margin: 0 0 12px; color: #7287ad; }.side-link { width: 100%; min-height: 42px; border: 0; border-radius: 7px; background: transparent; color: #9eb0cc; padding: 0 11px; display: flex; gap: 12px; align-items: center; text-align: left; font-size: 13px; transition: background .2s, color .2s; }.side-link:hover { background: rgba(120, 163, 255, .1); color: #e8f1ff; }.side-link.active { color: white; background: linear-gradient(90deg, rgba(102, 220, 255, .18), rgba(132, 117, 255, .09)); box-shadow: inset 2px 0 var(--cyan); }.side-link > svg { width: 17px; color: #7ea3ff; }.side-link b { margin-left: auto; color: #687995; font-size: 10px; }.side-link b svg { width: 12px; vertical-align: middle; }.side-divider { height: 1px; background: var(--line); margin: 16px 10px; }.creator-link > svg { color: var(--gold); }.nova-side { display: flex; gap: 10px; align-items: center; margin: 28px 9px 0; padding: 12px 0 0; border-top: 1px solid var(--line); color: #8b9cba; font-size: 11px; line-height: 1.45; }.nova-side p { margin: 0; }.nova-side strong { color: var(--cyan); }.mini-nova { width: 35px; height: 35px; flex: none; border-radius: 50% 50% 40% 40%; background: linear-gradient(145deg, #ffc35c, #f36183); display: flex; align-items: center; justify-content: center; gap: 6px; }.mini-nova span { width: 5px; height: 7px; border-radius: 99px; background: #8fffe8; }
.content-view { padding: 34px clamp(22px, 4vw, 62px) 52px; overflow: hidden; }.view-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }.view-header h2 { font: 700 clamp(28px, 3.2vw, 45px)/1 var(--display); letter-spacing: -1.2px; margin: 8px 0 0; }.view-header p:not(.kicker) { color: var(--muted); max-width: 510px; line-height: 1.5; margin: 10px 0 0; }.view-number { color: rgba(150, 196, 255, .21); font: 700 72px/1 var(--display); letter-spacing: -5px; }.academy-home { position: relative; min-height: 700px; }.academy-home::before { content: ""; position: absolute; width: 760px; height: 470px; right: -90px; top: -80px; border-radius: 50%; background: radial-gradient(ellipse, rgba(63, 208, 255, .2), rgba(138, 100, 255, .08) 42%, transparent 72%); pointer-events: none; }.home-hero { position: relative; min-height: 315px; overflow: hidden; border: 1px solid rgba(115, 206, 255, .24); border-radius: 10px; padding: 39px 42px; background: linear-gradient(115deg, rgba(21, 47, 100, .93), rgba(52, 31, 104, .69) 52%, rgba(11, 71, 97, .48)), linear-gradient(180deg, #152d73, #161332); box-shadow: 0 28px 55px rgba(1, 4, 18, .35); }.home-hero::after { content: ""; position: absolute; inset: 0; opacity: .43; background: linear-gradient(115deg, transparent 0 64%, rgba(127, 248, 255, .3) 64.1% 64.4%, transparent 64.5%), repeating-linear-gradient(0deg, transparent 0 46px, rgba(159, 235, 255, .11) 47px); }.home-hero h1 { position: relative; z-index: 1; max-width: 590px; margin: 8px 0 12px; font: 700 clamp(32px, 4vw, 55px)/.99 var(--display); letter-spacing: -1.8px; }.home-hero h1 span { color: var(--cyan); }.home-hero p { position: relative; z-index: 1; color: #c1d5ed; margin: 0; max-width: 445px; line-height: 1.5; }.home-hero .button { position: relative; z-index: 1; margin-top: 23px; padding: 0 17px; }.hero-robot { position: absolute; z-index: 2; width: 200px; height: 250px; bottom: -19px; right: 12%; filter: drop-shadow(0 25px 22px rgba(0, 0, 0, .34)); animation: float 5.5s ease-in-out infinite; }.hero-robot .robot-body { position: absolute; inset: 56px 5px 0; border-radius: 43% 43% 22% 22%; background: linear-gradient(140deg, #9c7bff, #4454c6 48%, #1e327a); box-shadow: inset -14px -17px 0 rgba(11, 21, 91, .42), inset 8px 8px 0 rgba(255, 255, 255, .2); }.hero-robot .robot-head { position: absolute; top: 0; left: 29px; width: 146px; height: 116px; border-radius: 45px; background: linear-gradient(140deg, #ffcf69, #ee6982); box-shadow: inset -12px -15px 0 rgba(201, 48, 104, .33); }.hero-robot .robot-face { position: absolute; left: 52px; top: 37px; width: 100px; height: 43px; z-index: 1; border-radius: 32px; background: #07152e; box-shadow: inset 0 3px 9px rgba(140, 255, 255, .34); }.robot-face::before, .robot-face::after { content: ""; position: absolute; top: 13px; width: 12px; height: 13px; border-radius: 50%; background: #89fff2; box-shadow: 0 0 12px #89fff2; }.robot-face::before { left: 22px; }.robot-face::after { right: 22px; }.robot-star { position: absolute; z-index: 2; color: #c7fff9; font-size: 38px; text-shadow: 0 0 15px #89fff2; left: 81px; top: 142px; }.mission-row { display: grid; grid-template-columns: 1.25fr .9fr .9fr; gap: 14px; margin-top: 18px; }.mission-card { position: relative; overflow: hidden; min-height: 160px; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(155deg, rgba(28, 44, 90, .88), rgba(12, 19, 45, .88)); transition: transform .2s, border-color .2s; }.mission-card:hover { transform: translateY(-3px); border-color: rgba(128, 234, 255, .5); }.mission-card:first-child { background: linear-gradient(145deg, rgba(33, 95, 122, .92), rgba(23, 31, 77, .9)); }.mission-icon { position: absolute; font-size: 80px; right: -5px; bottom: -22px; opacity: .23; }.mission-card .card-tag { font-size: 10px; color: var(--cyan); letter-spacing: .09em; font-weight: 700; }.mission-card h3 { margin: 10px 0 7px; font-size: 19px; }.mission-card p { margin: 0; max-width: 180px; font-size: 12px; line-height: 1.45; color: #9cb0ce; }.mission-card button { position: relative; z-index: 1; margin-top: 15px; border: 0; padding: 0; background: transparent; color: white; font-weight: 600; font-size: 12px; }.mission-card button svg { vertical-align: middle; width: 13px; }
.section-title { margin: 35px 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }.section-title h3 { margin: 0; font: 600 18px var(--display); }.section-title span { color: var(--muted); font-size: 12px; }.chapter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.chapter-card { min-height: 154px; padding: 17px; background: rgba(15, 25, 58, .72); border: 1px solid var(--line); border-radius: 8px; text-align: left; color: var(--ink); position: relative; overflow: hidden; }.chapter-card:not(:disabled):hover { border-color: rgba(142, 230, 255, .5); transform: translateY(-2px); }.chapter-card:disabled { opacity: .55; cursor: default; }.chapter-card .chapter-icon { width: 39px; height: 39px; display: grid; place-items: center; color: var(--chapter-color, var(--blue)); background: color-mix(in srgb, var(--chapter-color, var(--blue)) 14%, transparent); border-radius: 7px; }.chapter-card .chapter-icon svg { width: 19px; }.chapter-card h4 { font-size: 15px; margin: 15px 0 5px; }.chapter-card p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.3; }.chapter-state { position: absolute; right: 15px; top: 17px; color: var(--green); }.chapter-state svg { width: 17px; }.chapter-card .lock { color: #7b8ba7; }
.forge-layout { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(300px, 1.2fr); gap: 19px; }.hero-stage, .control-panel, .lab-panel, .result-panel, .prompt-console, .shield-console, .creator-stage, .profile-stage { border: 1px solid var(--line); border-radius: 9px; background: rgba(13, 22, 52, .76); }.hero-stage { min-height: 465px; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 36%, rgba(115, 229, 255, .35), transparent 28%), linear-gradient(160deg, #153164, #190f4a 62%, #0b1534); }.hero-stage::before { content: ""; position: absolute; width: 230px; height: 230px; border: 1px solid rgba(156, 249, 255, .55); border-radius: 50%; box-shadow: 0 0 35px rgba(74, 235, 255, .22), inset 0 0 35px rgba(74, 235, 255, .18); animation: spin 15s linear infinite; }.forge-hero { width: 185px; height: 265px; position: relative; z-index: 1; transform: scale(1.1); filter: drop-shadow(0 20px 18px #05091caa); }.forge-hero .fh-body { position: absolute; bottom: 0; left: 20px; width: 145px; height: 169px; border-radius: 45% 45% 18% 18%; background: linear-gradient(135deg, var(--hero-primary, #ffbd61), var(--hero-secondary, #ed5c88)); box-shadow: inset -15px -18px 0 rgba(81, 19, 103, .31), inset 8px 8px 0 rgba(255,255,255,.22); }.forge-hero .fh-head { position: absolute; left: 24px; top: 10px; width: 136px; height: 126px; border-radius: 42px; background: linear-gradient(135deg, var(--hero-secondary, #ff84ad), var(--hero-primary, #ffbd61)); box-shadow: inset -11px -12px 0 rgba(91, 20, 115, .24); }.forge-hero .fh-face { position: absolute; left: 48px; top: 48px; width: 89px; height: 44px; border-radius: 25px; background: #07162d; z-index: 2; }.forge-hero .fh-face::before { content: "✦  ✦"; letter-spacing: 12px; color: #a2fff2; font-size: 14px; padding-left: 17px; line-height: 42px; }.forge-hero .fh-emblem { position: absolute; z-index: 2; left: 70px; bottom: 57px; font-size: 37px; color: var(--hero-glow, #a1fff0); text-shadow: 0 0 18px var(--hero-glow, #a1fff0); }.forge-hero .fh-antenna { position: absolute; top: -15px; left: 89px; width: 14px; height: 36px; border-radius: 8px; background: var(--hero-primary, #ffbd61); }.forge-hero .fh-antenna::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--hero-glow, #a1fff0); box-shadow: 0 0 14px var(--hero-glow, #a1fff0); position: absolute; top: -9px; left: -2px; }.hero-nameplate { position: absolute; z-index: 2; bottom: 28px; text-align: center; }.hero-nameplate strong { display: block; font: 700 19px var(--display); letter-spacing: .11em; }.hero-nameplate span { color: var(--cyan); font-size: 11px; letter-spacing: .12em; }.control-panel { padding: 26px; }.control-panel h3 { margin: 0 0 6px; font: 600 20px var(--display); }.control-panel > p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }.control-group { margin-top: 20px; }.control-group > label { display: block; color: #b7c7e2; font-size: 12px; font-weight: 600; margin-bottom: 9px; }.swatches, .power-choices { display: flex; gap: 9px; flex-wrap: wrap; }.swatch { width: 37px; height: 37px; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }.swatch.selected { border-color: white; box-shadow: 0 0 0 3px var(--blue), inset 0 0 0 2px rgba(255,255,255,.18); }.power-choice { min-width: 108px; padding: 11px; text-align: left; border: 1px solid var(--line); background: rgba(90, 123, 213, .07); color: #b8c9e5; border-radius: 7px; font-size: 12px; }.power-choice svg { display: block; color: var(--gold); width: 18px; margin-bottom: 7px; }.power-choice.selected { color: white; border-color: var(--cyan); background: rgba(103, 232, 255, .11); }.name-input { width: 100%; color: white; padding: 11px 12px; outline: none; border: 1px solid var(--line); border-radius: 7px; background: rgba(130, 152, 237, .08); }.name-input:focus { border-color: var(--blue); }.save-hero { margin-top: 25px; padding: 0 16px; }
.lab-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 19px; }.lab-panel { padding: 24px; }.mode-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 13px; }.mode-tab { border: 0; border-radius: 6px; padding: 8px 11px; display: inline-flex; gap: 7px; align-items: center; background: transparent; color: var(--muted); font-size: 12px; }.mode-tab svg { width: 15px; }.mode-tab.active { color: white; background: rgba(110, 222, 255, .14); }.asset-tray { min-height: 118px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 19px 0; }.data-card { border: 1px solid rgba(137, 190, 245, .2); border-radius: 8px; background: linear-gradient(150deg, rgba(57, 96, 151, .45), rgba(22, 33, 75, .82)); min-height: 83px; padding: 10px; cursor: grab; display: flex; flex-direction: column; justify-content: space-between; user-select: none; transition: transform .18s, border-color .18s; }.data-card:hover { transform: translateY(-3px); border-color: var(--blue); }.data-card:active { cursor: grabbing; }.data-card .data-visual { font-size: 24px; height: 31px; display: flex; align-items: center; }.data-card .wave { width: 48px; height: 20px; display: inline-block; background: repeating-linear-gradient(90deg, #78f1dd 0 2px, transparent 2px 5px); clip-path: polygon(0 55%, 8% 25%, 17% 80%, 26% 10%, 35% 75%, 44% 35%, 53% 85%, 62% 20%, 71% 76%, 82% 32%, 91% 63%, 100% 45%, 100% 100%, 0 100%); }.data-card span:last-child { color: #c8d7f1; font-size: 11px; }.data-card.dragging { opacity: .35; }.drop-heading { margin: 3px 0 11px; color: #b5c8e5; font-size: 12px; }.drop-zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.drop-zone { min-height: 119px; border: 1.5px dashed rgba(136, 211, 255, .46); background: rgba(56, 93, 158, .08); border-radius: 8px; padding: 10px; transition: .2s; }.drop-zone.hover { background: rgba(103, 232, 255, .13); border-color: var(--cyan); }.drop-zone strong { font-size: 12px; color: #e6f2ff; }.drop-zone .dropped-item { margin-top: 8px; display: flex; gap: 5px; align-items: center; font-size: 10px; color: #beffe9; }.drop-zone .dropped-item::before { content: "✓"; color: var(--green); font-weight: 800; }.training-side { min-height: 435px; padding: 25px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(106, 232, 255, .17), transparent 30%), linear-gradient(160deg, #17275c, #151039); }.training-side::after { content: ""; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(128, 245, 255, .23); border-radius: 50%; right: -81px; bottom: -115px; }.training-side h3 { position: relative; z-index: 1; margin: 0; font: 600 20px var(--display); }.training-side p { position: relative; z-index: 1; color: var(--muted); font-size: 13px; line-height: 1.45; margin: 8px 0; }.model-core { position: relative; z-index: 1; width: 172px; height: 172px; margin: 30px auto 20px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(144, 255, 246, .45); box-shadow: 0 0 35px rgba(88, 229, 255, .24), inset 0 0 35px rgba(101, 95, 255, .2); }.model-core::before, .model-core::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(158, 255, 247, .35); }.model-core::before { inset: 18px; animation: spin 6s linear infinite; }.model-core::after { inset: 43px; border-width: 5px; border-left-color: transparent; border-right-color: transparent; animation: spin 3s linear infinite reverse; }.model-core svg { position: relative; z-index: 1; width: 47px; height: 47px; color: var(--cyan); filter: drop-shadow(0 0 10px var(--cyan)); }.training-stat { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: 12px; color: #b5c7e5; margin-top: 17px; }.training-stat b { color: var(--cyan); }.train-progress { position: relative; z-index: 1; margin: 9px 0 0; }.train-button { position: relative; z-index: 1; width: 100%; margin-top: 23px; }.train-button:disabled { cursor: default; filter: grayscale(.4); opacity: .64; transform: none; }
.result-layout, .prompt-layout, .shield-layout, .creator-layout, .profile-layout { display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(290px, .95fr); gap: 20px; }.test-card { min-height: 355px; border-radius: 9px; border: 1px solid var(--line); padding: 26px; background: linear-gradient(150deg, rgba(34, 74, 125, .82), rgba(28, 22, 77, .82)); position: relative; overflow: hidden; }.test-card::after { content: ""; position: absolute; width: 250px; height: 250px; right: -105px; bottom: -105px; border-radius: 50%; background: radial-gradient(circle, rgba(100, 238, 255, .32), transparent 67%); }.test-visual { height: 136px; display: grid; place-items: center; font-size: 90px; position: relative; z-index: 1; filter: drop-shadow(0 13px 9px #06112799); }.test-card h3 { position: relative; z-index: 1; margin: 3px 0 7px; font: 600 21px var(--display); }.test-card p { position: relative; z-index: 1; margin: 0; color: #b5c9e6; font-size: 13px; }.answer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }.answer-button { min-height: 43px; color: #d8eaff; border: 1px solid var(--line); border-radius: 6px; background: rgba(12, 19, 54, .55); }.answer-button:hover { border-color: var(--blue); }.answer-button.correct { color: #e6ffed; border-color: var(--green); background: rgba(75, 224, 143, .17); }.answer-button.wrong { color: #ffdfe5; border-color: var(--red); background: rgba(255, 112, 137, .15); }.result-panel { padding: 25px; }.score-ring { width: 151px; height: 151px; border-radius: 50%; display: grid; place-items: center; margin: 12px auto 20px; position: relative; background: conic-gradient(var(--green) 0deg 281deg, rgba(162, 191, 232, .15) 281deg 360deg); }.score-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #111b3c; }.score-ring strong { position: relative; z-index: 1; font: 700 32px var(--display); }.score-ring span { position: absolute; z-index: 1; top: 89px; color: var(--muted); font-size: 10px; letter-spacing: .1em; }.result-panel h3 { margin: 0; font: 600 20px var(--display); }.result-panel > p { color: var(--muted); font-size: 13px; line-height: 1.45; }.findings { margin-top: 18px; display: grid; gap: 10px; }.finding { padding: 11px; border-radius: 7px; border: 1px solid var(--line); background: rgba(64, 91, 151, .1); display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.35; color: #b9cbe7; }.finding svg { width: 16px; flex: none; color: var(--green); }.finding.warn svg { color: var(--gold); }
.prompt-console, .shield-console, .creator-stage, .profile-stage { padding: 26px; }.prompt-console h3, .shield-console h3, .creator-stage h3, .profile-stage h3 { margin: 0; font: 600 21px var(--display); }.prompt-console > p, .shield-console > p, .creator-stage > p, .profile-stage > p { color: var(--muted); font-size: 13px; line-height: 1.48; margin: 8px 0 19px; }.prompt-scaffold { min-height: 184px; padding: 16px; border: 1px solid rgba(114, 219, 255, .3); background: rgba(8, 16, 42, .65); border-radius: 8px; }.prompt-line { margin: 7px 0 13px; color: #e3eeff; font-size: 13px; }.prompt-label { color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .07em; }.token-space { min-height: 40px; border-bottom: 1px solid rgba(145, 214, 255, .25); padding: 6px 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }.token { border: 0; color: #f4f8ff; background: linear-gradient(115deg, #665bc3, #307eb2); padding: 7px 9px; border-radius: 5px; font-size: 11px; }.token.goal { background: linear-gradient(115deg, #3769c8, #22a5b7); }.token.example { background: linear-gradient(115deg, #a265b9, #de6d96); }.token.rule { background: linear-gradient(115deg, #b08134, #df9450); }.prompt-toolbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.tool-token { color: #d7e6ff; border: 1px solid var(--line); border-radius: 5px; background: rgba(96, 129, 202, .12); padding: 8px 9px; font-size: 11px; }.tool-token:hover { border-color: var(--blue); }.prompt-score { display: flex; justify-content: space-between; margin-top: 16px; font-size: 12px; color: #b9cce5; }.prompt-score b { color: var(--cyan); }.prompt-side-art { min-height: 360px; position: relative; overflow: hidden; padding: 29px; border: 1px solid var(--line); border-radius: 9px; background: radial-gradient(circle at 50% 46%, rgba(173, 101, 255, .3), transparent 28%), linear-gradient(155deg, #311c69, #122653); }.prompt-side-art::after { content: ""; position: absolute; inset: 0; opacity: .38; background: repeating-linear-gradient(90deg, transparent 0 49px, rgba(171, 222, 255, .13) 50px), repeating-linear-gradient(0deg, transparent 0 49px, rgba(171, 222, 255, .1) 50px); }.prompt-side-art h3, .prompt-side-art p { position: relative; z-index: 1; }.prompt-side-art p { color: #c3d1ef; font-size: 13px; max-width: 360px; line-height: 1.45; }.magic-orb { position: absolute; z-index: 1; left: calc(50% - 72px); top: 138px; width: 144px; height: 144px; border-radius: 50%; background: radial-gradient(circle at 37% 29%, #fff 0 2%, #ffc4fe 3% 8%, #a368ff 24%, #2b58cb 50%, #111b59 68%, transparent 70%); box-shadow: 0 0 65px #a361ff, inset -13px -10px 28px #191356; animation: pulse 3s ease-in-out infinite; }.magic-orb::after { content: ""; position: absolute; inset: -22px; border: 1px solid rgba(235, 194, 255, .45); border-radius: 48% 52% 46% 54%; animation: spin 8s linear infinite; }.orb-spark { position: absolute; z-index: 2; color: #fff5ad; font-size: 29px; text-shadow: 0 0 13px #fff5ad; }.spark-one { left: 24%; top: 126px; }.spark-two { right: 22%; top: 257px; font-size: 18px; }
.scenario-display { min-height: 225px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(41, 49, 119, .78), rgba(28, 24, 76, .7)); padding: 21px; }.scenario-tag { display: inline-flex; gap: 7px; align-items: center; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .08em; }.scenario-tag svg { width: 15px; }.scenario-display h4 { margin: 17px 0 8px; font: 600 20px var(--display); }.scenario-display .ai-bubble { color: #dce7ff; border-left: 3px solid var(--violet); padding: 9px 12px; margin-top: 17px; background: rgba(167, 132, 255, .1); border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.45; }.scenario-display .ai-bubble strong { color: #d1beff; }.choice-list { display: grid; gap: 9px; margin-top: 16px; }.scenario-choice { text-align: left; padding: 12px 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(54, 81, 148, .13); color: #d1ddf1; font-size: 12px; line-height: 1.35; }.scenario-choice:hover { border-color: var(--blue); }.scenario-choice.correct { border-color: var(--green); background: rgba(66, 220, 132, .13); color: #e5ffed; }.scenario-choice.incorrect { border-color: var(--red); background: rgba(255, 116, 144, .12); }.shield-art { min-height: 415px; position: relative; overflow: hidden; padding: 27px; background: radial-gradient(circle at 50% 46%, rgba(79, 232, 170, .24), transparent 29%), linear-gradient(150deg, #123d4f, #1d225b 63%, #331e65); }.shield-art::before { content: ""; position: absolute; width: 255px; height: 255px; left: calc(50% - 127px); top: 103px; clip-path: polygon(50% 0, 95% 18%, 95% 61%, 50% 100%, 5% 61%, 5% 18%); border-radius: 20px; background: linear-gradient(145deg, #73f5be, #3b6ad4 50%, #a65fc9); box-shadow: 0 0 70px rgba(103, 255, 197, .35); opacity: .8; }.shield-art::after { content: "?"; position: absolute; z-index: 1; top: 166px; left: calc(50% - 19px); color: white; font: 700 72px/1 var(--display); text-shadow: 0 0 23px #d8fff7; }.shield-art h3,.shield-art p { position: relative; z-index: 2; }.shield-art p { color: #c8d6ef; font-size: 13px; line-height: 1.46; }.reality-progress { position: relative; z-index: 2; bottom: -240px; color: #cef9ef; font-size: 12px; }
.project-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.project-choice { min-height: 100px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: rgba(76, 95, 160, .1); color: #c6d8ef; }.project-choice:hover, .project-choice.selected { border-color: var(--gold); background: rgba(255, 207, 105, .1); color: white; }.project-choice svg { width: 21px; color: var(--gold); display: block; margin-bottom: 13px; }.project-choice strong { display: block; font-size: 13px; }.project-choice small { color: var(--muted); font-size: 11px; }.creator-ship { min-height: 410px; position: relative; overflow: hidden; padding: 28px; background: radial-gradient(circle at 50% 68%, rgba(95, 225, 255, .34), transparent 21%), linear-gradient(155deg, #132b6d, #451d6f 55%, #132a62); }.creator-ship::after { content: ""; position: absolute; width: 350px; height: 70px; bottom: 35px; left: calc(50% - 175px); border-radius: 50%; background: radial-gradient(ellipse, #93fff0, #3694e9 35%, transparent 72%); filter: blur(9px); }.ship { position: absolute; z-index: 1; width: 210px; height: 240px; top: 107px; left: calc(50% - 105px); clip-path: polygon(50% 0, 85% 43%, 75% 95%, 50% 100%, 25% 95%, 15% 43%); background: linear-gradient(145deg, #ec7fbd, #7562ff 45%, #4bd5e8); box-shadow: 0 0 55px #6d9dff; }.ship::before { content: ""; position: absolute; width: 70px; height: 92px; border-radius: 48%; background: linear-gradient(145deg, #d8ffff, #5bd4ff 50%, #3b3ca0); top: 36px; left: 70px; box-shadow: inset -9px -10px #324199; }.ship::after { content: "✦"; position: absolute; font-size: 40px; color: white; left: 86px; top: 129px; text-shadow: 0 0 16px #8ffff0; }.creator-ship h3,.creator-ship p { position: relative; z-index: 2; }.creator-ship p { color: #c9d8f3; font-size: 13px; line-height: 1.4; max-width: 385px; }
.profile-stage { min-height: 370px; position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(16, 57, 94, .84), rgba(39, 22, 91, .82)); }.badge-list { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 23px; }.badge { width: 106px; min-height: 100px; padding: 12px 8px; display: flex; flex-direction: column; gap: 9px; align-items: center; text-align: center; border: 1px solid var(--line); border-radius: 7px; background: rgba(12, 22, 56, .38); color: #c5d6ef; font-size: 11px; }.badge svg { color: var(--gold); }.badge.locked { opacity: .37; filter: grayscale(1); }.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 23px; }.stat { padding: 15px; background: rgba(92, 138, 205, .1); border-radius: 7px; border: 1px solid var(--line); }.stat strong { font: 700 23px var(--display); }.stat span { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); }.toast { position: fixed; z-index: 100; bottom: 22px; left: 50%; transform: translate(-50%, 25px); opacity: 0; pointer-events: none; max-width: min(450px, calc(100vw - 35px)); border: 1px solid rgba(117, 227, 255, .4); background: rgba(12, 25, 60, .96); color: #e7f5ff; padding: 12px 15px; border-radius: 7px; box-shadow: 0 13px 40px rgba(0,0,0,.35); font-size: 13px; transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-17px); } }.hero-robot { animation: robot-float 5.5s ease-in-out infinite; } @keyframes robot-float { 0%,100% { transform: translateY(0) rotate(-2deg); }50% { transform: translateY(-14px) rotate(2deg); }}@keyframes orbit { to { transform: rotate(337deg); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100% { transform: scale(.93); filter: brightness(.9); }50% { transform: scale(1.06); filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 1020px) { .academy-layout { grid-template-columns: 75px minmax(0,1fr); }.sidebar { padding: 18px 9px; }.side-label,.side-link span,.side-link b,.nova-side { display: none; }.side-link { justify-content:center; padding: 0; }.side-divider { margin: 16px 0; }.forge-layout,.lab-layout,.result-layout,.prompt-layout,.shield-layout,.creator-layout,.profile-layout { grid-template-columns: 1fr; }.home-hero { padding: 36px; }.chapter-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) { .login-view { grid-template-columns: 1fr; }.login-world { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }.nova-login { transform: translateX(-50%) scale(.65); transform-origin: bottom; bottom: -35px; }.ring-one { top: 77px; }.ring-two { top: 118px; }.planet-a { top: 16%; }.login-panel { padding: 36px 0 44px; }.login-panel .eyebrow { margin-top: 34px; }.topbar { height: 62px; padding: 0 14px; }.top-progress { display:none; }.profile-button > span:not(.profile-orb), .profile-button > svg { display:none; }.academy-layout { grid-template-columns: 1fr; }.sidebar { z-index: 8; position: sticky; top: 62px; display: flex; height: 57px; padding: 8px 9px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); background: rgba(6, 11, 28, .95); }.side-link { flex: 0 0 46px; min-height: 39px; }.side-divider { display: none; }.content-view { padding: 26px 16px 42px; }.view-header { align-items:start; }.view-number { font-size: 46px; }.home-hero { min-height: 390px; padding: 28px 23px; }.home-hero h1 { font-size: 34px; max-width: 360px; }.hero-robot { right: -45px; transform: scale(.75); transform-origin: bottom; }.mission-row,.chapter-grid { grid-template-columns: 1fr; }.chapter-card { min-height: 125px; }.asset-tray { grid-template-columns: 1fr 1fr; }.drop-zones { grid-template-columns: 1fr; }.login-panel h1 { font-size: 43px; }.creator-ship,.shield-art { min-height: 330px; }.shield-art::before { transform: scale(.76); transform-origin: bottom; }.reality-progress { bottom: -180px; } }

/* Daylight Academy: bright, playful surfaces with enough contrast for long learning sessions. */
:root { --ink:#18335b; --muted:#5f789d; --line:rgba(67, 119, 183, .19); --void:#eaf7ff; --panel:rgba(255,255,255,.77); --panel-solid:#ffffff; --blue:#2a9bd8; --cyan:#27c8b2; --violet:#7964e8; --pink:#e56d9d; --gold:#d99117; --green:#16a867; --red:#db5f78; }
body { background: radial-gradient(circle at 8% 16%, rgba(159, 223, 255, .72), transparent 27%), radial-gradient(circle at 90% 79%, rgba(255, 191, 215, .52), transparent 27%), linear-gradient(135deg, #f8fdff, #f2f7ff 53%, #fff8ef); }
#sky-canvas { opacity: .22; }
.login-world { background: linear-gradient(145deg, #bfeeff, #d8e6ff 53%, #ffd9e8); border-color: rgba(86, 140, 205, .22); }
.login-world::before { background: linear-gradient(180deg, transparent 55%, rgba(254, 252, 255, .66)), repeating-linear-gradient(90deg, transparent 0 99px, rgba(42, 155, 216, .12) 100px); }
.login-world::after { background: radial-gradient(ellipse, rgba(79, 203, 239, .47) 0%, rgba(169, 146, 255, .24) 38%, transparent 70%); }
.orbital-ring { border-color: rgba(42, 155, 216, .44); }.ring-two { border-color: rgba(229, 109, 157, .42); }
.login-panel .academy-mark { color: #147cab; }.login-panel h1 { color: #18335b; }.login-panel h1 em { color: #0e9d94; }.intro { color: #567399; }
.learning-notice { border-color: rgba(217, 145, 23, .35); background: #fff7df; color: #805a12; }.learning-notice strong { color: #5f420b; }
form label { color: #45658d; }.input-wrap { background: #f9fcff; border-color: rgba(72, 128, 194, .28); box-shadow: 0 5px 16px rgba(54, 108, 174, .05); }.input-wrap:focus-within { background: #fff; border-color: #2a9bd8; }.input-wrap input { color: #17335d; }.input-wrap input::placeholder { color: #90a9c8; }.demo-hint { color: #6680a5; }.demo-hint code { color: #315982; }
.topbar { background: rgba(255, 255, 255, .83); border-color: rgba(67,119,183,.18); }.logo-button { color: #23466f; }.logo-button svg { color: #1793ca; }.top-progress { color: #6a83a5; }.top-progress b { color: #42658e; }.progress-track { background: #dce9f5; }.profile-button { color: #31577e; }.icon-button { color: #31577e; background: #f6fbff; border-color: rgba(67,119,183,.2); }
.sidebar { background: rgba(245, 251, 255, .81); border-color: rgba(67,119,183,.16); }.side-label { color: #7b94b6; }.side-link { color: #577393; }.side-link:hover { color:#22496f; background:#eaf6ff; }.side-link.active { color:#183c66; background:linear-gradient(90deg, #d3f6f0, #ebedff); box-shadow:inset 3px 0 #27c8b2; }.side-link > svg { color:#2a9bd8; }.side-link b { color:#7991af; }.side-divider,.nova-side { border-color:rgba(67,119,183,.16); }.nova-side { color:#647d9f; }.nova-side strong { color:#159a91; }
.view-header h2 { color:#18335b; }.view-header p:not(.kicker) { color:#5f789d; }.view-number { color:rgba(43, 139, 205, .18); }.kicker { color:#be7b13; }
.home-hero { border-color:rgba(70, 157, 210, .34); background:linear-gradient(115deg, rgba(190, 235, 255, .95), rgba(231, 225, 255, .92) 53%, rgba(229, 251, 245, .88)), linear-gradient(180deg,#d6f5ff,#f4edff); box-shadow:0 24px 45px rgba(41, 115, 175, .15); }.home-hero::after { opacity:.42; background:linear-gradient(115deg, transparent 0 64%, rgba(67,177,212,.26) 64.1% 64.4%, transparent 64.5%), repeating-linear-gradient(0deg, transparent 0 46px, rgba(57,131,186,.1) 47px); }.home-hero h1 { color:#1d3c66; }.home-hero h1 span { color:#129c92; }.home-hero p { color:#527296; }
.mission-card,.chapter-card { color:#19375f; background:linear-gradient(155deg, rgba(255,255,255,.94), rgba(238,247,255,.9)); border-color:rgba(67,119,183,.19); box-shadow:0 9px 24px rgba(49,105,160,.08); }.mission-card:first-child { background:linear-gradient(145deg, #e1fbf7, #e4ebff); }.mission-card p,.chapter-card p { color:#6680a3; }.mission-card button { color:#1d5f8a; }.mission-card .card-tag { color:#0d9e91; }.chapter-card:not(:disabled):hover { border-color:rgba(28,157,191,.6); }.chapter-state { color:#1da263; }.chapter-card .lock { color:#9aacbf; }
.hero-stage { background:radial-gradient(circle at 50% 36%, rgba(122, 234, 240, .56), transparent 28%), linear-gradient(160deg, #c8edff, #e3ddff 62%, #fff2f7); border-color:rgba(69,147,210,.27); }.hero-stage::before { border-color:rgba(29,154,177,.5); box-shadow:0 0 35px rgba(74, 203, 220, .21), inset 0 0 35px rgba(74, 203, 220, .13); }.hero-nameplate strong { color:#18335b; }.hero-nameplate span { color:#0e978e; }.control-panel,.lab-panel,.result-panel,.prompt-console,.shield-console,.creator-stage,.profile-stage { background:rgba(255,255,255,.85); border-color:rgba(67,119,183,.2); box-shadow:0 12px 27px rgba(46,106,165,.07); }.control-panel h3,.lab-panel h3,.result-panel h3,.prompt-console h3,.shield-console h3,.creator-stage h3,.profile-stage h3 { color:#19385f; }.control-panel > p,.prompt-console > p,.shield-console > p,.creator-stage > p,.profile-stage > p { color:#6680a2; }.control-group > label { color:#48698f; }.power-choice { color:#547496; border-color:rgba(67,119,183,.18); background:#f3f9ff; }.power-choice.selected { color:#15395f; border-color:#2a9bd8; background:#e5f8ff; }.name-input { color:#17335d; background:#f8fcff; border-color:rgba(67,119,183,.23); }
.mode-tabs { border-color:rgba(67,119,183,.19); }.mode-tab { color:#5e789b; }.mode-tab.active { color:#18416a; background:#dff7f4; }.data-card { background:linear-gradient(150deg,#f6fbff,#e6f1ff); border-color:rgba(66,126,197,.22); box-shadow:0 6px 14px rgba(57,111,171,.07); }.data-card span:last-child { color:#395d86; }.drop-heading { color:#4e7096; }.drop-zone { border-color:rgba(39,160,176,.5); background:#f2fffc; }.drop-zone strong { color:#244d75; }.drop-zone.hover { background:#dcfaf5; border-color:#27c8b2; }.training-side { background:radial-gradient(circle at 50% 45%, rgba(71, 210, 190, .28), transparent 30%), linear-gradient(160deg,#d5f3ff,#eee8ff); border-color:rgba(67,119,183,.22); }.training-side::after { border-color:rgba(42,155,216,.3); }.training-side h3 { color:#183b64; }.training-side p { color:#53769b; }.model-core { border-color:rgba(29,159,165,.46); box-shadow:0 0 35px rgba(65,183,206,.25), inset 0 0 35px rgba(105,95,255,.14); }.model-core::before,.model-core::after { border-color:rgba(42,162,168,.38); }.training-stat { color:#57769a; }.training-stat b { color:#0b9d91; }
.data-card { text-align:left; font:inherit; color:#19385f; }.data-card.selected { border-color:#27c8b2; background:linear-gradient(150deg,#dcfaf5,#dceeff); box-shadow:0 0 0 3px rgba(39,200,178,.19); }.drop-zone { text-align:left; color:#244d75; font:inherit; cursor:pointer; }.drop-zone:focus-visible,.data-card:focus-visible { outline:3px solid #2a9bd8; outline-offset:2px; }
.model-network { position:relative; width:88px; height:88px; border-radius:50%; background:radial-gradient(circle,#c6fff3 0 7%,#78e6d5 8% 12%,#4caecd 13% 39%,#3171b5 40% 46%,transparent 48%); box-shadow:0 0 27px rgba(70,213,194,.43); animation:model-breathe 2.7s ease-in-out infinite; }.model-network::before,.model-network::after { content:""; position:absolute; left:calc(50% - 1px); top:10px; width:2px; height:68px; background:rgba(232,255,250,.68); transform:rotate(45deg); box-shadow:0 0 8px #c8fff2; }.model-network::after { transform:rotate(-45deg); }.model-network span { position:absolute; z-index:2; width:11px; height:11px; border-radius:50%; background:#d8fff7; box-shadow:0 0 10px #9dffed; }.model-network span:nth-child(1){left:6px;top:38px}.model-network span:nth-child(2){right:6px;top:38px}.model-network span:nth-child(3){left:24px;top:7px}.model-network span:nth-child(4){right:24px;bottom:7px}.model-network span:nth-child(5){left:39px;bottom:3px}.model-network b { position:absolute; z-index:3; left:23px; top:29px; width:43px; height:31px; display:grid; place-items:center; border-radius:12px; color:#1b5e7e; background:#d6fff3; box-shadow:0 3px 8px rgba(12,104,128,.21); font:800 12px var(--display); letter-spacing:.05em; }@keyframes model-breathe { 0%,100%{transform:scale(.91);filter:brightness(.93)}50%{transform:scale(1.06);filter:brightness(1.12)} }

/* Bright game-world map. Landmark controls are intentionally part of the scene, not a row of generic cards. */
.world-hero { min-height: 418px; position: relative; display: grid; grid-template-columns: minmax(330px, .84fr) minmax(420px, 1.16fr); align-items: center; overflow: hidden; padding: 34px 36px 28px 42px; border: 1px solid rgba(70,157,210,.32); border-radius: 12px; background: linear-gradient(115deg, #f6fdff 0%, #e9f8ff 44%, #efe9ff 100%); box-shadow: 0 24px 45px rgba(41,115,175,.14); }
.world-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.68; background: linear-gradient(120deg, transparent 0 61%, rgba(94,180,239,.2) 61.15% 61.4%, transparent 61.5%), repeating-linear-gradient(0deg, transparent 0 68px, rgba(56,138,192,.075) 69px); }
.world-copy { position:relative; z-index:3; align-self:start; padding-top:15px; }.world-copy h1 { max-width: 455px; margin: 8px 0 12px; color:#183d68; font:700 clamp(34px,4vw,55px)/.98 var(--display); letter-spacing:-1.75px; }.world-copy h1 span { color:#159c91; }.world-copy > p:not(.kicker) { max-width:420px; color:#54789d; margin:0; font-size:15px; line-height:1.54; }.world-copy .button { margin-top:22px; padding:0 18px; }.world-facts { display:flex; flex-wrap:wrap; gap:13px; margin-top:20px; color:#476f95; font-size:11px; font-weight:600; }.world-facts span { display:inline-flex; gap:5px; align-items:center; }.world-facts svg { width:15px; color:#129e94; }
.academy-island { position:relative; z-index:2; height:352px; min-width:420px; align-self:end; transform: translate(24px, 8px); filter: drop-shadow(0 18px 13px rgba(48, 103, 160, .18)); }.academy-island-base { position:absolute; left:calc(50% - 208px); bottom:20px; width:416px; height:158px; clip-path:polygon(14% 16%,37% 2%,65% 8%,93% 31%,81% 66%,66% 95%,34% 100%,12% 67%,3% 38%); background:linear-gradient(155deg,#7dd9a5,#36af83 48%,#1b8e87 49%,#2076a4 100%); box-shadow:inset 0 -19px 0 rgba(29,105,123,.25); }.academy-island-base::after { content:""; position:absolute; left:14%; top:12%; width:72%; height:68%; clip-path:inherit; border-radius:50%; background:linear-gradient(150deg,#d9fff1,#a4f2d6 38%,#79dcaf 100%); opacity:.92; }.island-grass { position:absolute; z-index:1; left:90px; bottom:73px; width:240px; height:74px; border-radius:50%; background:radial-gradient(ellipse at 40% 35%,#eefff0,#b6f3d4 63%,#64cf9e); box-shadow:0 0 0 8px rgba(76,182,132,.16); }.island-rock { position:absolute; z-index:1; bottom:14px; width:85px; height:76px; background:linear-gradient(135deg,#7ab9d6,#4c8eb8 56%,#2b709d); clip-path:polygon(27% 0,100% 28%,83% 100%,0 74%); }.rock-left { left:49px; transform:rotate(13deg); }.rock-right { right:43px; transform:rotate(-12deg) scale(.8); }
.academy-cloud { position:absolute; z-index:0; height:39px; border-radius:50px; background:#fff; opacity:.77; filter:drop-shadow(0 8px 8px rgba(76,138,193,.12)); }.academy-cloud::before,.academy-cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }.academy-cloud::before { width:52px;height:52px; left:24px; top:-24px; }.academy-cloud::after { width:37px;height:37px; left:68px; top:-15px; }.cloud-one { width:118px; left:22px; top:122px; animation:cloud-drift 10s ease-in-out infinite; }.cloud-two { width:92px; right:10px; top:54px; transform:scale(.72); animation:cloud-drift 13s ease-in-out infinite reverse; }.flight-path { position:absolute; z-index:0; border:1px solid rgba(64,160,209,.28); border-radius:50%; transform:rotate(-19deg); }.path-one { left:42px; top:87px; width:432px; height:148px; }.path-two { left:84px; top:109px; width:312px; height:93px; border-color:rgba(224,107,166,.28); transform:rotate(18deg); }
.world-node { position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; gap:4px; border:0; padding:0; background:transparent; color:#285176; font:600 10px var(--font); text-shadow:0 1px 0 #fff; transition:transform .2s ease, filter .2s ease; }.world-node:hover { transform:translateY(-4px) scale(1.03); filter:brightness(1.05); }.world-node:focus-visible { outline:3px solid #2a9bd8; outline-offset:4px; border-radius:10px; }.node-icon { width:56px; height:56px; display:grid; place-items:center; color:#fff; border:3px solid rgba(255,255,255,.86); border-radius:18px 18px 12px 12px; background:linear-gradient(145deg,#53c9ee,#4178d8); box-shadow:0 9px 13px rgba(38,98,170,.2), inset 0 5px 0 rgba(255,255,255,.24); transform:perspective(90px) rotateX(7deg); }.node-icon svg { width:26px; filter:drop-shadow(0 2px 2px rgba(24,77,133,.34)); }.world-node::after { content:""; position:absolute; z-index:-1; top:17px; width:72px; height:72px; border-radius:50%; background:rgba(90,224,203,.2); opacity:0; transition:opacity .2s; }.world-node.world-current::after { opacity:1; animation:node-pulse 2.1s ease-out infinite; }.world-node.world-done .node-icon { background:linear-gradient(145deg,#7bd993,#33ae7a); }.world-node.world-locked { opacity:.56; filter:saturate(.55); }.world-node.world-locked .node-icon { background:linear-gradient(145deg,#a5b7cf,#7391ae); }.forge-node { left:24%; bottom:119px; }.lab-node { left:42%; bottom:168px; }.lab-node .node-icon { width:70px; height:70px; border-radius:50% 50% 18px 18px; background:linear-gradient(145deg,#61dcbf,#2c93bd); }.arena-node { right:22%; bottom:132px; }.arena-node .node-icon { background:linear-gradient(145deg,#a384eb,#6c62d4); border-radius:50%; }.prompt-node { right:4%; bottom:183px; }.prompt-node .node-icon { background:linear-gradient(145deg,#f49cc9,#c464ba); border-radius:24px 24px 12px 12px; }.shield-node { left:8%; bottom:191px; }.shield-node .node-icon { background:linear-gradient(145deg,#9ce4a9,#34b994); border-radius:50% 50% 13px 13px; }
.academy-beacon { position:absolute; z-index:1; left:calc(50% - 38px); bottom:69px; width:76px; height:142px; transform:perspective(170px) rotateX(-6deg); }.academy-beacon::before { content:""; position:absolute; left:18px; bottom:0; width:40px; height:102px; clip-path:polygon(50% 0,100% 25%,88% 100%,12% 100%,0 25%); background:linear-gradient(90deg,#496ebc,#98e5ff 50%,#4675bf); box-shadow:inset 0 0 0 3px rgba(255,255,255,.26); }.academy-beacon span { position:absolute; z-index:1; left:calc(50% - 16px); width:32px; height:32px; border-radius:50%; background:#fff6b9; box-shadow:0 0 22px #fff0a0; }.academy-beacon span:nth-child(1) { top:8px; }.academy-beacon span:nth-child(2) { top:25px; opacity:.56; transform:scale(1.8); animation:beacon 2.2s ease-out infinite; }.academy-beacon span:nth-child(3) { top:25px; opacity:.33; transform:scale(3.1); animation:beacon 2.2s .7s ease-out infinite; }.academy-star { position:absolute; z-index:3; bottom:129px; left:calc(50% - 12px); color:#fff; font-size:34px; text-shadow:0 0 18px #95fff0; animation:star-bob 2.8s ease-in-out infinite; }
@keyframes cloud-drift { 0%,100%{transform:translateX(0)}50%{transform:translateX(17px)} } @keyframes node-pulse { 0%{transform:scale(.55);opacity:.65}100%{transform:scale(1.35);opacity:0} } @keyframes beacon { 0%{transform:scale(1);opacity:.5}100%{transform:scale(3.6);opacity:0} } @keyframes star-bob { 0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-11px) rotate(16deg)} }
@media (max-width:1020px) { .world-hero { grid-template-columns:1fr; padding:28px; }.academy-island { margin:0 auto -6px; transform:scale(.9); transform-origin:center bottom; height:289px; }.world-copy { padding-top:0; } }
@media (max-width:700px) { .world-hero { min-height:572px; padding:26px 22px 0; }.world-copy h1 { font-size:36px; }.world-copy .button { margin-top:17px; }.world-facts { margin-top:15px; }.academy-island { min-width:380px; margin-left:50%; transform:translateX(-50%) scale(.76); transform-origin:center bottom; height:287px; margin-bottom:-9px; } }
.test-card { color:#18385f; background:linear-gradient(150deg,#d8f5ff,#e7e3ff); border-color:rgba(67,119,183,.22); box-shadow:0 10px 25px rgba(57,110,171,.1); }.test-card::after { background:radial-gradient(circle, rgba(97,222,209,.3), transparent 67%); }.test-card p { color:#58789d; }.answer-button { color:#2e587f; background:#fbfdff; border-color:rgba(67,119,183,.2); }.score-ring { background:conic-gradient(#25b970 0deg 281deg, #dce7f1 281deg 360deg); }.score-ring::before { background:#fff; }.score-ring strong { color:#1b486d; }.score-ring span { color:#6281a4; }.finding { color:#527293; border-color:rgba(67,119,183,.18); background:#f5faff; }
.weather-stage { position:relative; overflow:hidden; isolation:isolate; border-radius:16px; background:radial-gradient(circle at 48% 35%,#fcfeff 0 5%,#ceeeff 34%,#a9dafe 70%,transparent 71%); }.weather-halo { position:absolute; width:119px; height:119px; left:calc(50% - 59px); top:6px; border:1px solid rgba(54,151,211,.34); border-radius:50%; box-shadow:0 0 0 12px rgba(255,255,255,.22),0 0 0 26px rgba(107,219,255,.12); animation:weather-pulse 2.9s ease-out infinite; }.weather-cloud-shape { position:absolute; z-index:2; top:40px; left:calc(50% - 55px); width:109px; height:41px; border-radius:32px; background:linear-gradient(160deg,#fff,#d0d8ff 68%,#a998e0); box-shadow:inset 0 -5px 8px rgba(110,104,186,.2),0 8px 9px rgba(75,122,187,.23); }.weather-cloud-shape span { position:absolute; border-radius:50%; background:inherit; box-shadow:inherit; }.weather-cloud-shape span:nth-child(1) { width:51px; height:51px; left:15px; top:-25px; }.weather-cloud-shape span:nth-child(2) { width:37px; height:37px; left:50px; top:-18px; }.weather-cloud-shape span:nth-child(3) { width:31px; height:31px; right:8px; top:-7px; }.rain-lines { position:absolute; z-index:1; display:flex; gap:14px; top:88px; left:calc(50% - 38px); }.rain-lines i { width:4px; height:25px; display:block; border-radius:10px; background:linear-gradient(#66a8ff,#4d8af4); transform:rotate(26deg); animation:rainfall 1s linear infinite; }.rain-lines i:nth-child(2){animation-delay:.14s}.rain-lines i:nth-child(3){animation-delay:.29s}.rain-lines i:nth-child(4){animation-delay:.43s}.rain-lines i:nth-child(5){animation-delay:.57s}.signal-bars { position:absolute; z-index:3; display:flex; align-items:center; gap:3px; right:24px; bottom:23px; height:24px; }.signal-bars b { width:4px; height:11px; border-radius:5px; background:#1b9cba; animation:signal-bounce .7s ease-in-out infinite alternate; }.signal-bars b:nth-child(2){height:20px;animation-delay:.1s}.signal-bars b:nth-child(3){height:14px;animation-delay:.2s}.signal-bars b:nth-child(4){height:23px;animation-delay:.35s}.signal-bars b:nth-child(5){height:8px;animation-delay:.47s}@keyframes rainfall { 0%{transform:translateY(-4px) rotate(26deg);opacity:0}30%{opacity:1}100%{transform:translateY(15px) rotate(26deg);opacity:0} } @keyframes weather-pulse { 0%,25%{transform:scale(.82);opacity:.7}100%{transform:scale(1.28);opacity:0} } @keyframes signal-bounce { to{transform:scaleY(.45);transform-origin:bottom} }
.fruit-tray { grid-template-columns:repeat(4, 1fr); }.fruit-tray .data-card:nth-child(odd) { background:linear-gradient(150deg,#fff5f7,#ffe6ec); }.fruit-tray .data-card:nth-child(even) { background:linear-gradient(150deg,#fffbe9,#fff0b9); }.fruit-stage { position:relative; overflow:hidden; isolation:isolate; border-radius:16px; background:radial-gradient(circle at 51% 45%,#fff9e2 0 10%,#ffecc4 29%,#ffd9ce 66%,transparent 67%); }.fruit-scan { position:absolute; z-index:1; left:calc(50% - 74px); top:10px; width:148px; height:116px; border:1px solid rgba(223,104,117,.42); border-radius:50%; box-shadow:0 0 0 12px rgba(255,255,255,.25),0 0 0 28px rgba(255,190,150,.17); animation:fruit-scan 2.6s ease-out infinite; }.test-apple { position:absolute; z-index:2; top:27px; left:calc(50% - 42px); width:84px; height:83px; border-radius:43% 43% 48% 48%; background:radial-gradient(circle at 31% 22%,#fff4d0 0 3%,#ff7d76 5% 16%,#f14051 39%,#d72840 73%,#a81b45); box-shadow:inset -12px -10px 17px rgba(126,17,47,.36),inset 6px 7px 12px rgba(255,255,255,.33),0 11px 10px rgba(180,64,81,.22); }.test-apple::before { content:""; position:absolute; z-index:-1; width:10px; height:31px; left:39px; top:-17px; border-radius:10px; background:#77472d; transform:rotate(-15deg); }.test-apple i { position:absolute; width:34px; height:17px; top:-17px; left:46px; border-radius:100% 0 100% 0; background:#51ba78; transform:rotate(-22deg); box-shadow:inset -4px -3px 0 rgba(24,125,76,.24); }.test-apple b { position:absolute; top:0; left:39px; width:19px; height:18px; border-radius:50%; background:#ffd6d4; opacity:.58; filter:blur(1px); }.vision-corners span { position:absolute; z-index:3; width:20px; height:20px; border-color:#e95567; border-style:solid; }.vision-corners span:nth-child(1){left:calc(50% - 79px);top:16px;border-width:2px 0 0 2px}.vision-corners span:nth-child(2){right:calc(50% - 79px);top:16px;border-width:2px 2px 0 0}.vision-corners span:nth-child(3){left:calc(50% - 79px);bottom:13px;border-width:0 0 2px 2px}.vision-corners span:nth-child(4){right:calc(50% - 79px);bottom:13px;border-width:0 2px 2px 0}@keyframes fruit-scan { 0%,25%{transform:scale(.75);opacity:.7}100%{transform:scale(1.25);opacity:0} }.text-stage { position:relative; overflow:hidden; border-radius:16px; background:radial-gradient(circle at 53% 43%,#fff 0 8%,#eee4ff 33%,#ffdce9 72%,transparent 73%); }.text-bubble { position:absolute; padding:9px 12px; border-radius:14px 14px 14px 3px; background:#fff; color:#7452aa; font-size:12px; font-weight:700; box-shadow:0 8px 14px rgba(91,73,164,.17); }.text-bubble.one { top:39px; left:calc(50% - 84px); animation:message-bob 2.5s ease-in-out infinite; }.text-bubble.two { top:79px; right:calc(50% - 82px); color:#178e88; animation:message-bob 2.5s .7s ease-in-out infinite; }.text-star { position:absolute; color:#e394c2; font-size:35px; left:calc(50% - 14px); top:18px; text-shadow:0 0 12px #f5d3ff; }@keyframes message-bob { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
.fruit-art,.instrument-art { position:relative; display:inline-block; width:43px; height:43px; flex:none; }.fruit-art.apple-art::before { content:""; position:absolute; width:31px; height:31px; left:6px; top:9px; border-radius:45% 45% 48% 48%; background:radial-gradient(circle at 30% 22%,#fff 0 4%,#ff9b8e 6% 18%,#ed4252 41%,#bb1c44 75%); box-shadow:inset -6px -5px 8px rgba(130,13,42,.32),inset 4px 4px 7px rgba(255,255,255,.28),0 5px 7px rgba(156,59,77,.18); }.fruit-art.apple-art i { position:absolute; z-index:2; top:1px; left:24px; width:16px; height:8px; border-radius:100% 0 100% 0; background:#47b976; transform:rotate(-25deg); }.fruit-art.apple-art b { position:absolute; z-index:1; top:0; left:19px; width:5px; height:14px; border-radius:5px; background:#77472d; transform:rotate(-15deg); }.fruit-art.green-apple-art::before { content:""; position:absolute; width:31px; height:31px; left:6px; top:9px; border-radius:45% 45% 48% 48%; background:radial-gradient(circle at 30% 22%,#faffd9 0 4%,#d4ed81 7% 20%,#8dc94a 42%,#4e913c 75%); box-shadow:inset -6px -5px 8px rgba(44,101,34,.32),inset 4px 4px 7px rgba(255,255,255,.28),0 5px 7px rgba(66,120,56,.18); }.fruit-art.green-apple-art i { position:absolute; z-index:2; top:1px; left:24px; width:16px; height:8px; border-radius:100% 0 100% 0; background:#50a566; transform:rotate(-25deg); }.fruit-art.green-apple-art b { position:absolute; z-index:1; top:0; left:19px; width:5px; height:14px; border-radius:5px; background:#704a2e; transform:rotate(-15deg); }.fruit-art.orange-art::before { content:""; position:absolute; width:32px; height:32px; left:6px; top:8px; border-radius:50%; background:radial-gradient(circle at 30% 23%,#fff8d8 0 4%,#ffc75c 6% 19%,#f59225 42%,#df5c20 76%); box-shadow:inset -5px -5px 8px rgba(157,65,18,.29),inset 4px 4px 7px rgba(255,255,255,.25),0 5px 7px rgba(143,73,34,.17); }.fruit-art.orange-art i { position:absolute; z-index:2; top:13px; left:12px; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.7); }.fruit-art.orange-art b { position:absolute; z-index:2; top:8px; left:21px; width:6px; height:5px; border-radius:50%; background:#c85a22; }.fruit-art.banana-art::before { content:""; position:absolute; width:36px; height:15px; left:3px; top:15px; border:7px solid #f5c84f; border-top-color:transparent; border-left-color:transparent; border-radius:0 0 35px 36px; transform:rotate(-28deg); box-shadow:inset -2px -2px 0 #d39b22,0 5px 6px rgba(156,111,22,.16); }.fruit-art.banana-art i { position:absolute; z-index:2; width:7px; height:10px; background:#875a2b; border-radius:5px; left:31px; top:9px; transform:rotate(-29deg); }.fruit-art.banana-art b { position:absolute; z-index:1; width:17px; height:6px; left:7px; top:29px; border-radius:50%; background:#fce17c; transform:rotate(-28deg); }.fruit-photo { position:relative; display:grid; place-items:center; width:58px; height:58px; overflow:hidden; border:2px solid rgba(255,255,255,.76); border-radius:11px; background:#d5edf8; box-shadow:inset 0 0 20px rgba(13,65,110,.18),0 5px 10px rgba(39,88,127,.18); }.fruit-photo.image-photo { background:#e8f4fc; }.fruit-photo .fruit-img { position:relative; z-index:2; width:100%; height:100%; object-fit:cover; border-radius:inherit; }.fruit-photo::before { content:""; position:absolute; inset:0; opacity:.92; }.fruit-photo .fruit-art { position:relative; z-index:2; transform:scale(1.27); filter:drop-shadow(0 5px 3px rgba(46,51,45,.26)); }.photo-light { position:absolute; z-index:3; width:58px; height:18px; top:-8px; left:-8px; border-radius:50%; background:rgba(255,255,255,.47); transform:rotate(-24deg); }.scene-picnic { background:linear-gradient(135deg,#ee857d 0 23%,#fff4df 23% 49%,#da7274 49% 68%,#fff3dd 68%); }.scene-picnic::before { background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(255,255,255,.25) 10px 12px); }.scene-kitchen { background:linear-gradient(90deg,#e1f6ff 0 48%,#b8dded 49% 52%,#e9fbff 53%); }.scene-kitchen::before { background:repeating-linear-gradient(0deg,transparent 0 14px,rgba(65,134,157,.2) 15px 16px),repeating-linear-gradient(90deg,transparent 0 18px,rgba(65,134,157,.16) 19px 20px); }.scene-orchard { background:radial-gradient(circle at 15% 15%,#e9ffc3 0 9%,transparent 10%),radial-gradient(circle at 80% 30%,#74c37a 0 17%,transparent 18%),radial-gradient(circle at 22% 83%,#49aa74 0 18%,transparent 19%),linear-gradient(145deg,#9cdb8d,#4aa276); }.scene-basket { background:linear-gradient(115deg,#f5d48b,#b97d43 51%,#f1c97b); }.scene-basket::before { background:repeating-linear-gradient(0deg,rgba(113,71,35,.22) 0 3px,transparent 4px 9px),repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.15) 9px 11px); }.scene-market { background:linear-gradient(135deg,#fbd477 0 29%,#df6e75 30% 52%,#4fa6a4 53% 73%,#e9eef2 74%); }.scene-market::before { background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(255,255,255,.28) 13px 15px); }.scene-backpack { background:linear-gradient(135deg,#5588ce,#254e96 58%,#80b9e1); }.scene-backpack::before { background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.12) 6px 8px); }.scene-window { background:linear-gradient(135deg,#fff7c8 0 30%,#b8e7ff 31% 49%,#fff4d2 50% 70%,#c2e9ff 71%); }.scene-window::before { background:linear-gradient(90deg,transparent 0 47%,rgba(137,105,70,.35) 48% 53%,transparent 54%),linear-gradient(0deg,transparent 0 46%,rgba(137,105,70,.27) 47% 52%,transparent 53%); }.fruit-tray .data-card { align-items:center; text-align:center; }.fruit-tray .data-visual { height:61px; }.fruit-tray .data-label { font-size:11px; }.test-item-card .fruit-photo { width:64px; height:64px; border-radius:12px; }.scanner-preview .fruit-photo { width:78px; height:78px; margin:3px 0 8px; border-radius:15px; transform:scale(1.08); }.scanner-preview .fruit-photo .fruit-art { transform:scale(1.65); }.instrument-art.violin-art::before { content:""; position:absolute; left:15px; top:14px; width:16px; height:24px; border-radius:44% 44% 42% 42%; background:linear-gradient(90deg,#88442f,#d88549 47%,#7c3c2c); box-shadow:inset -3px -3px 4px rgba(73,27,20,.27),0 4px 5px rgba(105,55,31,.16); }.instrument-art.violin-art i { position:absolute; left:21px; top:1px; width:5px; height:23px; border-radius:5px; background:#6f3b2b; }.instrument-art.violin-art b { position:absolute; left:6px; top:10px; width:34px; height:2px; background:#e2a863; transform:rotate(-32deg); box-shadow:0 1px 0 #75422d; }.instrument-art.drums-art::before { content:""; position:absolute; left:5px; top:15px; width:33px; height:22px; border-radius:50%; background:radial-gradient(ellipse at center,#f9f4d8 0 43%,#dc5e63 46% 64%,#9f3a56 66%); box-shadow:inset -3px -4px 4px rgba(112,38,60,.27),0 5px 6px rgba(137,58,71,.15); }.instrument-art.drums-art i,.instrument-art.drums-art b { position:absolute; z-index:2; width:30px; height:3px; border-radius:5px; background:#8b542f; top:10px; }.instrument-art.drums-art i { left:0; transform:rotate(32deg); }.instrument-art.drums-art b { right:0; transform:rotate(-32deg); }.instrument-tray .data-card { background:linear-gradient(150deg,#fff5ea,#ffe4d0); }.instrument-tray .data-card:nth-child(even) { background:linear-gradient(150deg,#f1edff,#e2dcff); }.story-tray { grid-template-columns:repeat(2,1fr); }.story-card { min-height:128px; padding:12px; align-items:flex-start; }.story-card .data-visual { font-size:24px; height:28px; }.data-label { font-weight:700; }.data-excerpt { display:block; color:#6b7f9f; line-height:1.32; font-size:10px; }
.inspection-layout { display:grid; grid-template-columns:minmax(380px,1.08fr) minmax(300px,.92fr); gap:20px; }.inspection-station,.analysis-panel { border:1px solid rgba(67,119,183,.2); border-radius:10px; background:rgba(255,255,255,.86); box-shadow:0 12px 27px rgba(46,106,165,.08); padding:22px; }.inspection-topline { display:flex; align-items:center; justify-content:space-between; gap:9px; color:#1d5b87; font-size:11px; font-weight:800; letter-spacing:.08em; }.inspection-topline span { display:inline-flex; align-items:center; gap:6px; }.inspection-topline svg { width:16px; color:#139a90; }.inspection-topline small { color:#8097b5; font-size:9px; letter-spacing:.06em; }.test-card-tray { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:19px 0 15px; }.test-item-card { min-height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:11px 7px; color:#375d85; border:1px solid rgba(67,119,183,.2); border-radius:9px; background:linear-gradient(150deg,#f9fcff,#eaf6ff); box-shadow:0 5px 11px rgba(42,101,161,.06); transition:transform .2s,border-color .2s,box-shadow .2s; }.test-item-card:nth-child(2) { background:linear-gradient(150deg,#fffbed,#fff1c4); }.test-item-card:nth-child(3) { background:linear-gradient(150deg,#fff4f6,#ffe2e8); }.test-item-card:hover,.test-item-card.selected { transform:translateY(-3px); border-color:#1eb7a2; box-shadow:0 0 0 3px rgba(39,200,178,.14),0 7px 13px rgba(42,101,161,.1); }.test-item-card small { color:#7e96b5; font-size:10px; }.test-item-card.dragging { opacity:.38; }.ai-scanner { position:relative; width:100%; min-height:184px; display:grid; place-items:center; overflow:hidden; color:#527a9e; border:2px dashed rgba(30,170,181,.49); border-radius:11px; background:linear-gradient(145deg,#effcff,#e8eeff); transition:.2s; }.ai-scanner::before,.ai-scanner::after { content:""; position:absolute; left:4%; right:4%; opacity:0; pointer-events:none; transition:opacity .2s ease; }.ai-scanner::before { top:14px; height:3px; border-radius:3px; background:linear-gradient(90deg,transparent 0%,rgba(56,189,248,.4) 15%,#38bdf8 45%,#ffffff 50%,#38bdf8 55%,rgba(56,189,248,.4) 85%,transparent 100%); box-shadow:0 0 10px #38bdf8,0 0 24px rgba(56,189,248,.9),0 0 42px rgba(14,165,233,.7); z-index:10; }.ai-scanner::after { top:14px; height:38px; margin-top:-19px; background:linear-gradient(180deg,transparent 0%,rgba(56,189,248,.18) 35%,rgba(56,189,248,.45) 50%,rgba(56,189,248,.18) 65%,transparent 100%); z-index:9; }.ai-scanner.drop-hover,.ai-scanner.loaded { border-color:#0284c7; background:linear-gradient(145deg,#e8f6ff,#eef4ff); }.ai-scanner.scanning { border-color:#0284c7; background:repeating-linear-gradient(0deg,rgba(56,189,248,.04) 0px,rgba(56,189,248,.04) 1px,transparent 1px,transparent 8px),linear-gradient(145deg,#e0f3ff,#ecf2ff); }.ai-scanner.scanning::before,.ai-scanner.scanning::after { opacity:1; animation:scanner-vertical-sweep 1.2s ease-in-out infinite alternate; }.scanner-empty,.scanner-preview { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px; }.scanner-empty svg { width:27px; height:27px; color:#19aa9e; }.scanner-empty b,.scanner-preview b { color:#235276; font-size:13px; }.scanner-empty small,.scanner-preview small { color:#7790ad; font-size:11px; }.scanner-preview .fruit-art,.scanner-preview .instrument-art { transform:scale(1.6); margin:9px 0 13px; }.scanner-action { margin-top:15px; }.scanner-action .button { width:100%; }.scanner-action .button:disabled { filter:grayscale(.6); opacity:.62; transform:none; cursor:default; }.scanner-action p { margin:10px 2px 0; color:#6a83a5; text-align:center; font-size:11px; }.analysis-panel { min-height:420px; }.analysis-panel > .kicker { margin:0 0 14px; }.analysis-empty,.analysis-loading,.analysis-result,.story-output { min-height:282px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px; border-radius:9px; background:linear-gradient(155deg,#f5fbff,#f1efff); color:#6080a3; }.analysis-empty svg,.analysis-loading svg { width:35px; height:35px; color:#4d9ed9; margin-bottom:10px; }.analysis-empty h3,.analysis-loading h3 { margin:0 0 7px; color:#29577c; font:600 18px var(--display); }.analysis-empty p,.analysis-loading p { margin:0; font-size:12px; line-height:1.45; max-width:230px; }.analysis-panel > .finding { margin-top:13px; }.analysis-result,.story-output { display:block; text-align:left; min-height:282px; padding:0; overflow:hidden; background:#f8fcff; }.prediction-banner { padding:17px; color:#fff; background:linear-gradient(120deg,#2fa2d5,#2dbba3); }.prediction-banner span,.output-label { display:block; font-size:10px; font-weight:800; letter-spacing:.09em; }.prediction-banner strong { display:block; margin-top:5px; font:600 24px var(--display); }.prediction-banner b { display:inline-block; margin-top:10px; padding:5px 8px; border-radius:5px; background:rgba(255,255,255,.2); font-size:16px; }.prediction-banner b small { font-size:10px; font-weight:600; }.analysis-result h3 { margin:17px 18px 8px; color:#29577c; font:600 16px var(--display); }.reason-list { list-style:none; margin:0; padding:0 18px; display:grid; gap:8px; }.reason-list li { display:flex; align-items:flex-start; gap:7px; color:#527596; font-size:12px; line-height:1.35; }.reason-list svg { width:15px; flex:none; color:#19a56a; }.analysis-note { margin:15px 18px 18px; color:#6e87a6; font-size:11px; line-height:1.42; }.story-seed-tray { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-top:19px; }.story-seed { min-height:132px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; text-align:left; padding:14px; border:1px solid rgba(105,91,190,.22); border-radius:9px; background:linear-gradient(145deg,#f7f2ff,#e8f5ff); color:#4b5d94; }.story-seed > span { font-size:25px; }.story-seed b { color:#3f527e; font-size:13px; }.story-seed small { color:#728aaa; font-size:10px; }.story-seed.selected { border-color:#aa75d2; box-shadow:0 0 0 3px rgba(189,122,211,.15); background:linear-gradient(145deg,#f7eefd,#e1f7ff); }.story-engine { min-height:171px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin-top:15px; border:1px solid rgba(120,99,202,.27); border-radius:10px; background:radial-gradient(circle at 50% 38%,rgba(219,178,255,.35),transparent 24%),linear-gradient(145deg,#f6edff,#e7f4ff); color:#607799; text-align:center; }.story-engine div { color:#9a60ca; }.story-engine svg { width:34px; height:34px; filter:drop-shadow(0 0 8px rgba(172,93,213,.36)); }.story-engine b { color:#4d4e8a; }.story-engine small { font-size:11px; }.story-output { padding:19px; max-height:560px; overflow-y:auto; }.story-output h3 { margin:7px 0 12px; color:#4f4a91; font:600 20px var(--display); }.created-story { margin:0 0 12px; color:#526e91; font-size:13px; line-height:1.56; }.story-output .output-label { color:#9760bf; margin-top:10px; }.story-output .reason-list { padding:7px 0 0; }.story-output .reason-list svg { color:#a166c5; }@keyframes scanner-vertical-sweep { 0% { top:14px; } 100% { top:calc(100% - 18px); } }
@media (max-width:700px) { .fruit-tray { grid-template-columns:repeat(2,1fr); } }
.prompt-scaffold { background:#f9fcff; border-color:rgba(40,155,202,.3); }.prompt-line { color:#254c73; }.prompt-label { color:#0b9d91; }.token-space { border-color:rgba(67,119,183,.21); }.tool-token { color:#345e88; background:#f2f8ff; border-color:rgba(67,119,183,.23); }.prompt-score { color:#547597; }.prompt-score b { color:#11978e; }.prompt-side-art { background:radial-gradient(circle at 50% 46%, rgba(239,157,226,.37), transparent 29%), linear-gradient(155deg,#eee4ff,#ccefff); border-color:rgba(106,99,210,.25); }.prompt-side-art::after { opacity:.3; background:repeating-linear-gradient(90deg, transparent 0 49px, rgba(80,151,204,.13) 50px), repeating-linear-gradient(0deg, transparent 0 49px, rgba(80,151,204,.1) 50px); }.prompt-side-art h3 { color:#342c78; }.prompt-side-art p { color:#536a97; }.magic-orb { box-shadow:0 0 65px #c897ff, inset -13px -10px 28px #7867c8; }
.scenario-display { background:linear-gradient(145deg,#e5edff,#ffe8f2); border-color:rgba(102,99,194,.25); }.scenario-display h4 { color:#213e68; }.scenario-display .ai-bubble { color:#3d5880; background:#f6f0ff; border-color:#a98bdf; }.scenario-display .ai-bubble strong { color:#7052ac; }.scenario-choice { color:#3a5d85; background:#f9fcff; border-color:rgba(67,119,183,.2); }.shield-art { background:radial-gradient(circle at 50% 46%, rgba(105,230,168,.36), transparent 29%), linear-gradient(150deg,#d3f9f1,#e5e4ff 63%,#ffe8f6); border-color:rgba(37,166,135,.25); }.shield-art p { color:#4e7093; }.reality-progress { color:#287764; }.shield-art::before { box-shadow:0 0 58px rgba(86,214,168,.35); }
.project-choice { color:#365e85; background:#f6faff; border-color:rgba(67,119,183,.2); }.project-choice.selected,.project-choice:hover { color:#3b4c73; background:#fff8e6; border-color:#d99117; }.creator-ship { background:radial-gradient(circle at 50% 68%, rgba(95,225,255,.36), transparent 21%), linear-gradient(155deg,#d8efff,#eadfff 55%,#ffe8f1); border-color:rgba(75,138,201,.25); }.creator-ship h3 { color:#243d75; }.creator-ship p { color:#536e9a; }.creator-ship::after { background:radial-gradient(ellipse,#a5fff3,#71b7f3 35%,transparent 72%); }
.profile-stage { background:linear-gradient(145deg,rgba(229,250,255,.94),rgba(242,235,255,.91)); }.badge { color:#4c6e94; background:rgba(255,255,255,.62); border-color:rgba(67,119,183,.19); }.stat { background:#f7fbff; border-color:rgba(67,119,183,.18); }.stat strong { color:#1b486d; }.stat span { color:#6880a0; }.toast { color:#274c72; border-color:rgba(42,155,216,.36); background:rgba(255,255,255,.97); box-shadow:0 13px 40px rgba(50,105,167,.18); }
@media (max-width: 700px) { .sidebar { background:rgba(249,253,255,.97); border-color:rgba(67,119,183,.18); } }
@media (max-width:1020px) { .inspection-layout { grid-template-columns:1fr; }.analysis-panel { min-height:0; }.analysis-empty,.analysis-loading { min-height:190px; } }
@media (max-width:700px) { .test-card-tray { grid-template-columns:1fr 1fr; }.test-item-card:last-child { grid-column:1 / -1; min-height:104px; }.story-seed-tray { grid-template-columns:1fr; }.inspection-station,.analysis-panel { padding:17px; }.inspection-topline { align-items:flex-start; flex-direction:column; }.ai-scanner { min-height:163px; }.story-tray { grid-template-columns:1fr; } }

/* Playable sound clips and a lively brain replace static decorative placeholders. */
.lesson-audio { display:none; }.sound-visual { position:relative; display:inline-grid; place-items:center; width:52px; height:48px; }.sound-play-indicator { position:absolute; right:-5px; bottom:-2px; display:grid; place-items:center; width:20px; height:20px; color:#fff; border:2px solid #fff; border-radius:50%; background:#1cae9c; box-shadow:0 3px 7px rgba(23,117,128,.28); }.sound-play-indicator svg { width:10px; height:10px; fill:currentColor; stroke-width:2.4; }.data-card.playing-audio,.test-item-card.playing-audio { border-color:#1dbba8; box-shadow:0 0 0 3px rgba(36,201,177,.2),0 8px 18px rgba(51,155,178,.15); }.data-card.playing-audio .sound-play-indicator,.test-item-card.playing-audio .sound-play-indicator { background:#ee718f; animation:audio-pop .72s ease-in-out infinite alternate; }.data-card.playing-audio .sound-visual::before,.data-card.playing-audio .sound-visual::after,.test-item-card.playing-audio .sound-visual::before,.test-item-card.playing-audio .sound-visual::after { content:""; position:absolute; width:7px; border-radius:7px; background:#24b5a3; animation:audio-bars .36s ease-in-out infinite alternate; }.data-card.playing-audio .sound-visual::before,.test-item-card.playing-audio .sound-visual::before { left:-6px; height:17px; }.data-card.playing-audio .sound-visual::after,.test-item-card.playing-audio .sound-visual::after { left:2px; height:27px; animation-delay:.12s; }.instrument-tray .data-card { min-height:104px; align-items:center; text-align:center; }.test-item-card .sound-visual { transform:scale(1.18); margin-bottom:4px; }.scanner-preview .sound-visual { transform:scale(1.5); margin:8px 0 12px; }.scanner-preview .sound-visual .instrument-art { margin:0; }
.thinking-core { width:184px; height:184px; overflow:hidden; background:radial-gradient(circle at 50% 48%,rgba(236,255,255,.92) 0 8%,rgba(146,238,222,.34) 28%,rgba(127,190,248,.15) 50%,transparent 69%); }.thinking-core::before { inset:13px; border-color:rgba(21,161,167,.32); animation:brain-orbit 7s linear infinite; }.thinking-core::after { inset:36px; border-color:rgba(69,132,222,.36); animation:brain-orbit 4s linear infinite reverse; }.brain-aura { position:absolute; width:82px; height:82px; border-radius:50%; background:rgba(88,213,202,.28); filter:blur(13px); animation:brain-pulse 2.35s ease-in-out infinite; }.aura-two { width:116px; height:116px; background:rgba(147,138,247,.18); animation-delay:1.1s; }.brain-orbit { position:absolute; width:134px; height:134px; border:1px dashed rgba(34,161,189,.48); border-radius:50%; animation:brain-orbit 8s linear infinite; }.brain-orbit i { position:absolute; width:10px; height:10px; border-radius:50%; background:#f9fff9; box-shadow:0 0 9px #5ff5d8; }.brain-orbit i:nth-child(1) { top:-5px; left:60px; }.brain-orbit i:nth-child(2) { right:10px; bottom:20px; background:#e8d5ff; box-shadow:0 0 9px #b985ff; }.brain-orbit i:nth-child(3) { left:9px; bottom:28px; background:#ffecc4; box-shadow:0 0 9px #ffbd65; }.brain-shell { position:relative; z-index:2; width:88px; height:83px; display:grid; place-items:center; color:#1b9aa8; border-radius:48% 46% 43% 44%; background:radial-gradient(circle at 35% 23%,#efffff 0 5%,#a7f5e5 20%,#62cfe0 53%,#5c85db 100%); box-shadow:inset -9px -8px 15px rgba(25,81,158,.22),inset 6px 5px 10px rgba(255,255,255,.48),0 10px 18px rgba(39,116,176,.27); animation:brain-think 2.8s ease-in-out infinite; }.brain-shell::before { content:""; position:absolute; inset:8px; border:2px solid rgba(237,255,252,.68); border-radius:43% 49% 42% 52%; clip-path:polygon(0 0,49% 0,49% 100%,0 100%); }.brain-shell::after { content:""; position:absolute; inset:15px 41px 15px auto; width:2px; border-radius:2px; background:rgba(31,108,161,.52); box-shadow:-18px 9px 0 -1px rgba(253,255,255,.58),16px 18px 0 -1px rgba(253,255,255,.56); }.brain-shell svg { width:65px; height:65px; color:#197f9e; stroke-width:1.45; filter:drop-shadow(0 1px 1px rgba(255,255,255,.8)); }.thought { position:absolute; z-index:4; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 8px currentColor; animation:thought-pop 1.9s ease-in-out infinite; }.thought-one { top:-12px; right:9px; color:#79efda; }.thought-two { top:-25px; right:22px; width:6px; height:6px; color:#fff0ae; animation-delay:.42s; }.thought-three { top:-32px; right:35px; width:4px; height:4px; color:#debfff; animation-delay:.84s; }.brain-signal { position:absolute; z-index:3; right:13px; bottom:18px; display:flex; align-items:flex-end; gap:3px; height:28px; }.brain-signal i { display:block; width:4px; border-radius:5px; background:linear-gradient(#eafffb,#22bbad); box-shadow:0 0 7px rgba(71,219,203,.6); animation:brain-signal .65s ease-in-out infinite alternate; }.brain-signal i:nth-child(1){height:9px}.brain-signal i:nth-child(2){height:20px;animation-delay:.1s}.brain-signal i:nth-child(3){height:14px;animation-delay:.2s}.brain-signal i:nth-child(4){height:25px;animation-delay:.3s}.brain-signal i:nth-child(5){height:12px;animation-delay:.4s}
@keyframes audio-pop { to { transform:scale(1.16); } } @keyframes audio-bars { to { transform:scaleY(.38); transform-origin:center; } } @keyframes brain-orbit { to { transform:rotate(360deg); } } @keyframes brain-pulse { 0%,100% { transform:scale(.62); opacity:.32; } 50% { transform:scale(1.24); opacity:.72; } } @keyframes brain-think { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-6px) rotate(2deg) scale(1.04); } } @keyframes thought-pop { 0%,100% { transform:translate(0,0) scale(.55); opacity:.35; } 55% { transform:translate(8px,-10px) scale(1.15); opacity:1; } } @keyframes brain-signal { to { transform:scaleY(.45); transform-origin:bottom; } }
@media (max-width:700px) { .thinking-core { width:160px; height:160px; margin:23px auto 17px; }.instrument-tray { grid-template-columns:repeat(2,1fr); }.instrument-tray .data-card { min-height:116px; } }
.brain-shell { width:102px; height:82px; background:transparent; box-shadow:none; }.brain-lobe { position:absolute; z-index:1; top:8px; width:52px; height:67px; border:2px solid rgba(236,255,251,.68); background:repeating-radial-gradient(ellipse at 48% 43%,rgba(232,255,251,.84) 0 2px,rgba(119,223,210,.48) 3px 6px,transparent 7px 11px),linear-gradient(145deg,#bffdf0,#62d1dd 58%,#5d75ce); box-shadow:inset -6px -5px 10px rgba(30,89,164,.22),inset 5px 5px 7px rgba(255,255,255,.42),0 6px 12px rgba(46,118,176,.18); }.lobe-left { left:1px; border-radius:56% 41% 43% 54%; transform:rotate(-5deg); }.lobe-right { right:1px; border-radius:41% 56% 54% 43%; transform:rotate(5deg); }.brain-shell::before { z-index:2; inset:10px auto 9px 48px; width:5px; border:0; border-radius:10px; background:#f1fffb; clip-path:none; opacity:.85; box-shadow:0 0 6px #b3ffec; }.brain-shell::after { z-index:3; inset:17px 49px 17px auto; width:2px; background:rgba(25,98,157,.5); box-shadow:-21px 11px 0 -1px rgba(255,255,255,.62),18px 18px 0 -1px rgba(255,255,255,.57); }.brain-shell svg { position:relative; z-index:4; width:68px; height:68px; color:#167e9c; opacity:.8; }
.instrument-art.bird-art::before { content:""; position:absolute; left:7px; top:10px; width:29px; height:26px; border-radius:54% 46% 52% 48%; background:radial-gradient(circle at 29% 25%,#f8ffff 0 3%,#8ee7eb 5% 18%,#43a7d0 41%,#4665b2 78%); box-shadow:inset -5px -5px 7px rgba(30,75,148,.3),inset 4px 4px 6px rgba(255,255,255,.25),0 5px 7px rgba(42,91,164,.2); }.instrument-art.bird-art::after { content:""; position:absolute; left:2px; top:22px; width:13px; height:13px; background:#4a70bb; clip-path:polygon(100% 0,0 50%,100% 100%); transform:rotate(-13deg); }.instrument-art.bird-art i { position:absolute; z-index:3; top:15px; right:1px; width:11px; height:9px; background:#ffbd58; clip-path:polygon(0 0,100% 50%,0 100%); }.instrument-art.bird-art b { position:absolute; z-index:3; left:14px; top:19px; width:17px; height:11px; border-radius:70% 20% 70% 20%; background:linear-gradient(145deg,#d7ffff,#5ebdd9); transform:rotate(-21deg); box-shadow:inset -2px -2px 2px rgba(29,101,151,.25); }.single-drop-zone { grid-template-columns:1fr; }.story-mixer-zone { min-height:139px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; text-align:center; border-width:2px; background:radial-gradient(circle at 50% 40%,rgba(134,244,226,.42),transparent 24%),linear-gradient(145deg,#f3ffff,#e8edff); }.story-mixer-zone strong { color:#176781; font:700 17px var(--display); }.story-mixer-zone small { color:#6383a6; font-size:11px; }
.brainstorm-stage { position:relative; width:148px; height:119px; display:grid; place-items:center; margin:0 0 7px; }.brainstorm-cloud { position:relative; z-index:3; width:70px; height:59px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.82); border-radius:46% 51% 43% 48%; color:#24869d; background:radial-gradient(circle at 32% 25%,#fff 0 4%,#c8fff1 18%,#75d6e5 53%,#7794df 100%); box-shadow:inset -6px -6px 12px rgba(38,89,173,.18),inset 5px 5px 9px rgba(255,255,255,.48),0 8px 18px rgba(66,132,197,.24); animation:brainstorm-bob 1.8s ease-in-out infinite; }.brainstorm-cloud::before,.brainstorm-cloud::after { content:""; position:absolute; z-index:-1; border-radius:50%; background:inherit; border:inherit; }.brainstorm-cloud::before { width:28px; height:28px; left:-12px; bottom:3px; }.brainstorm-cloud::after { width:21px; height:21px; right:-7px; top:2px; }.brainstorm-cloud > span { position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 7px #92ffea; animation:brainstorm-node .8s ease-in-out infinite alternate; }.brainstorm-cloud > span:nth-child(1){left:13px;top:16px}.brainstorm-cloud > span:nth-child(2){right:12px;bottom:14px;animation-delay:.2s}.brainstorm-cloud > span:nth-child(3){right:15px;top:15px;animation-delay:.4s}.brainstorm-cloud svg { width:43px; height:43px; stroke-width:1.6; filter:drop-shadow(0 1px 1px rgba(255,255,255,.9)); }.idea-orbit { position:absolute; width:107px; height:83px; border:1px dashed rgba(57,156,192,.42); border-radius:50%; animation:idea-spin 3.7s linear infinite; }.orbit-right { width:134px; height:98px; border-color:rgba(184,112,211,.34); animation-direction:reverse; animation-duration:5.8s; }.idea-dot { position:absolute; z-index:4; width:9px; height:9px; border-radius:50%; background:#fff4a4; box-shadow:0 0 10px #ffdb7b; animation:idea-float 1.5s ease-in-out infinite alternate; }.dot-one { left:13px; top:29px; }.dot-two { right:14px; bottom:24px; background:#e7c8ff; box-shadow:0 0 10px #c89cff; animation-delay:.3s; }.dot-three { right:27px; top:8px; width:6px; height:6px; background:#92ffe7; box-shadow:0 0 10px #70efd1; animation-delay:.6s; }.idea-bars { position:absolute; z-index:4; right:3px; bottom:8px; display:flex; align-items:flex-end; gap:3px; height:19px; }.idea-bars i { width:4px; display:block; border-radius:4px; background:linear-gradient(#fff,#4bcdbd); box-shadow:0 0 5px rgba(56,199,181,.5); animation:idea-bars .46s ease-in-out infinite alternate; }.idea-bars i:nth-child(1){height:7px}.idea-bars i:nth-child(2){height:16px;animation-delay:.1s}.idea-bars i:nth-child(3){height:11px;animation-delay:.2s}.idea-bars i:nth-child(4){height:19px;animation-delay:.3s}
@keyframes brainstorm-bob { 0%,100%{transform:translateY(2px) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg) scale(1.05)} } @keyframes brainstorm-node { to{transform:scale(1.55);opacity:.48} } @keyframes idea-spin { to{transform:rotate(360deg)} } @keyframes idea-float { to{transform:translateY(-8px) scale(1.15)} } @keyframes idea-bars { to{transform:scaleY(.35);transform-origin:bottom} }

/* Generative AI module styles */
.genai-layout { grid-template-columns: minmax(360px, 1.05fr) minmax(340px, .95fr); }
.genai-points-list { display: grid; gap: 11px; margin: 18px 0; }
.genai-point-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid rgba(67, 119, 183, .2); border-radius: 9px; background: linear-gradient(150deg, #f8fcff, #eef6ff); box-shadow: 0 4px 10px rgba(42, 101, 161, .05); }
.genai-point-icon { font-size: 24px; flex: none; line-height: 1; margin-top: 2px; }
.genai-point-text small { display: block; font-size: 10px; font-weight: 800; color: #169389; letter-spacing: .06em; margin-bottom: 3px; }
.genai-point-text p { margin: 0; color: #32577e; font-size: 12px; line-height: 1.45; font-weight: 500; }
.genai-action-box { margin-top: 18px; }
.genai-help-text { margin: 10px 0 0; color: #6a83a5; font-size: 11px; text-align: center; }
.genai-footer-action { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(67, 119, 183, .22); }
.button-genai { width: 100%; min-height: 42px; background: linear-gradient(135deg, #efe8ff, #ded5ff); border: 1.5px solid #a48eff; color: #49339a; border-radius: 8px; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .2s, box-shadow .2s; }
.button-genai:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(138, 108, 237, .2); }
.button-genai svg { width: 16px; color: #7648db; }
.genai-concept-card { margin-top: 14px; padding: 16px; border-radius: 10px; border: 1px solid rgba(138, 108, 237, .35); background: linear-gradient(150deg, #f9f6ff, #f0ebff); box-shadow: 0 8px 22px rgba(120, 85, 222, .12); animation: fadeIn .3s ease; }
.concept-header { margin-bottom: 9px; }
.concept-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; color: #784ed2; letter-spacing: .08em; }
.concept-badge svg { width: 14px; }
.concept-header h4 { margin: 4px 0 0; color: #2d2466; font-size: 15px; font-family: var(--display); }
.genai-concept-card p { margin: 0; color: #4b4478; font-size: 12px; line-height: 1.5; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Supervised Learning styles */
.supervised-learning-section { margin-top: 16px; }
.button-supervised {
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #0d234a, #181544);
  border: 1.5px solid #00d2ff;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.button-supervised:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 26px rgba(0, 210, 255, 0.38);
  border-color: #5ce6ff;
}
.supervised-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  color: #7eedff;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.supervised-tag svg { width: 13px; color: #5ce6ff; }
.supervised-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: .06em;
  text-shadow: 0 0 12px rgba(92, 230, 255, 0.6);
}
.supervised-hint {
  font-size: 11px;
  color: #a3c4f3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.supervised-hint svg { width: 12px; color: #7eedff; }

/* Concept Modal / Popup Dialog */
.concept-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(4, 9, 26, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: modalFadeIn .25s ease-out;
}
.concept-modal-backdrop.hidden { display: none !important; }
.concept-modal {
  position: relative;
  max-width: 540px;
  width: 100%;
  background: linear-gradient(150deg, #0d1f42, #111433);
  border: 1.5px solid #00d2ff;
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(0, 210, 255, 0.25);
  animation: modalPop .25s cubic-bezier(0.16, 1, 0.3, 1);
  color: #e5f1ff;
}
.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #c9ddff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .18s;
}
.modal-close-btn:hover { background: rgba(255, 255, 255, 0.2); color: white; transform: scale(1.08); }
.modal-close-btn svg { width: 16px; }
.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #5ce6ff;
  background: rgba(0, 210, 255, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 210, 255, 0.3);
  margin-bottom: 12px;
}
.modal-badge svg { width: 14px; color: #5ce6ff; }
.concept-modal h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #ffffff;
  letter-spacing: -0.5px;
}
.modal-lead {
  font-size: 13px;
  line-height: 1.5;
  color: #b7cde9;
  margin: 0 0 18px;
}
.modal-lead strong { color: #5ce6ff; }
.modal-steps {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.modal-step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: rgba(23, 44, 88, 0.45);
  border: 1px solid rgba(84, 150, 245, 0.25);
  border-radius: 9px;
  padding: 12px 14px;
}
.step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d2ff, #6366f1);
  color: #041228;
  font-weight: 900;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 2px;
}
.step-content h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: #ffffff;
  font-weight: 700;
}
.step-content p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #cbdcf4;
}
.step-content em {
  color: #7eedff;
  font-style: normal;
  font-weight: 600;
}
.modal-footer-tip {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(138, 142, 255, 0.35);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 12px;
  color: #dbe4ff;
  line-height: 1.4;
}
.modal-footer-tip svg { width: 18px; flex: none; color: #ffd166; }
.modal-footer-tip strong { color: #ffd166; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Unsupervised Learning styles */
.baskets-stage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 0;
}
.basket-box {
  min-height: 180px;
  border-radius: 12px;
  padding: 16px;
  background: linear-gradient(150deg, rgba(16, 35, 75, 0.75), rgba(12, 19, 45, 0.85));
  border: 1.5px dashed rgba(100, 220, 255, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}
.basket-box.basket-1 {
  border-color: rgba(142, 255, 233, 0.6);
  background: radial-gradient(circle at 50% 20%, rgba(142, 255, 233, 0.12), transparent 70%), linear-gradient(150deg, rgba(12, 45, 68, 0.8), rgba(8, 22, 44, 0.85));
}
.basket-box.basket-2 {
  border-color: rgba(255, 178, 107, 0.6);
  background: radial-gradient(circle at 50% 20%, rgba(255, 178, 107, 0.12), transparent 70%), linear-gradient(150deg, rgba(58, 30, 78, 0.8), rgba(20, 12, 44, 0.85));
}
.basket-box.active-drop {
  border-style: solid;
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.4);
}
.basket-icon-big {
  font-size: 34px;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.basket-title {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px;
}
.basket-desc {
  font-size: 11px;
  color: #9cb5d9;
  margin: 0 0 12px;
}
.basket-contents {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.basket-item-card {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 600;
  color: #e5f1ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.basket-item-card:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #00d2ff;
  transform: translateY(-2px);
}
.basket-item-card.playing-audio {
  background: rgba(0, 210, 255, 0.25) !important;
  border-color: #00d2ff !important;
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.45);
}
.unlabeled-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.unlabeled-card {
  min-height: 80px;
  padding: 12px;
  border-radius: 9px;
  border: 1px solid rgba(137, 190, 245, 0.25);
  background: linear-gradient(150deg, rgba(28, 52, 98, 0.6), rgba(14, 22, 54, 0.8));
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform .18s, border-color .18s;
  color: #dbeaff;
}
.unlabeled-card:hover {
  transform: translateY(-2px);
  border-color: #00d2ff;
}
.unlabeled-card.selected {
  border-color: #00d2ff;
  background: rgba(0, 210, 255, 0.15);
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.25);
}
.button-unsupervised {
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #18204c, #2b174a);
  border: 1.5px solid #bd7aff;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(189, 122, 255, 0.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.button-unsupervised:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 26px rgba(189, 122, 255, 0.38);
  border-color: #d7a8ff;
}
.button-unsupervised .supervised-tag {
  color: #e5bfff;
}
.button-unsupervised .supervised-title {
  text-shadow: 0 0 12px rgba(189, 122, 255, 0.6);
}

/* ====== ANIMATED WI-FI RADAR WAVES AROUND AI CAR ====== */
.wifi-wave-arc {
  animation: wifiWavePulse 1.6s ease-out infinite;
  transform-origin: 80px 135px;
}
.wifi-wave-arc.arc-delay-1 {
  animation-delay: 0.4s;
}
.wifi-wave-arc.arc-delay-2 {
  animation-delay: 0.8s;
}
.wifi-wave-arc.arc-delay-3 {
  animation-delay: 1.2s;
}

@keyframes wifiWavePulse {
  0% {
    opacity: 0.2;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 2px #38bdf8);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #38bdf8);
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 25;
    filter: drop-shadow(0 0 18px #9effee);
  }
}

/* ====== CREATE A ROBO BUILDER ====== */
.robo-builder-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .robo-builder-layout {
    grid-template-columns: 1fr;
  }
}

.robo-assembly-stage {
  position: relative;
  background: linear-gradient(135deg, #0c1225 0%, #0f1e3d 50%, #0a1628 100%);
  border-radius: 20px;
  border: 1.5px solid rgba(56, 189, 248, 0.2);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
}
.robo-stage-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.robo-assembly-area {
  position: relative;
  width: 320px;
  height: 420px;
}

.robo-slot {
  border: 2.5px dashed rgba(56, 189, 248, 0.4);
  border-radius: 14px;
  background: rgba(56, 189, 248, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
}
.robo-slot:not(.placed) {
  animation: slotPulse 2s ease-in-out infinite;
}
.robo-slot.placed {
  border-color: transparent;
  background: transparent;
  animation: none;
}
.robo-slot.drop-hover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.18);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.4);
  transform: translateX(-50%) scale(1.08) !important;
}
.robo-slot[data-slot="left_arm"].drop-hover,
.robo-slot[data-slot="right_arm"].drop-hover {
  transform: scale(1.08) !important;
}
.slot-label {
  font-size: 28px;
  opacity: 0.5;
  filter: grayscale(0.5);
}

@keyframes slotPulse {
  0%, 100% { border-color: rgba(56, 189, 248, 0.25); box-shadow: 0 0 6px rgba(56, 189, 248, 0.1); }
  50% { border-color: rgba(56, 189, 248, 0.55); box-shadow: 0 0 18px rgba(56, 189, 248, 0.25); }
}
@keyframes roboPartSnap {
  0% { transform: translateX(-50%) scale(0.3); opacity: 0.2; }
  60% { transform: translateX(-50%) scale(1.15); }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.robo-progress-hud {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 24px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.robo-parts-tray {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.robo-parts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.robo-part-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  cursor: grab;
  transition: all 0.25s ease;
  user-select: none;
}
.robo-part-card:hover:not(.part-used) {
  border-color: #38bdf8;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2);
  transform: translateY(-2px);
}
.robo-part-card:active:not(.part-used) {
  cursor: grabbing;
  transform: scale(0.96);
}
.robo-part-card.dragging {
  opacity: 0.4;
  transform: scale(0.92);
}
.robo-part-card.part-used {
  opacity: 0.45;
  cursor: default;
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  border-style: dashed;
}

.part-preview {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-radius: 12px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.part-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.part-info .part-part-number {
  color: #57729c;
  font: 800 9px/1 var(--display);
  letter-spacing: .09em;
}
.part-info strong {
  font-size: 13px;
  color: #1e293b;
}
.part-info small {
  font-size: 11px;
  color: #64748b;
}

.robo-complete-reveal {
  width: 280px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: roboRevealPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes roboRevealPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

/* ====== UNTRAINED ROBOT ASK TAB ====== */
.untrained-stage-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .untrained-stage-layout {
    grid-template-columns: 1fr;
  }
}

.untrained-robo-stage {
  position: relative;
  background: linear-gradient(135deg, #090e1a 0%, #0f1e3d 50%, #090e1a 100%);
  border-radius: 16px;
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  transition: all 0.3s ease;
}
.untrained-robo-stage.stage-confused {
  border-color: #f59e0b;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}
.untrained-robo-stage.stage-alert-shaking {
  border-color: #ef4444;
  box-shadow: 0 0 40px rgba(239, 68, 68, 0.5);
  animation: stageRumble 0.15s ease-in-out infinite alternate;
}

@keyframes stageRumble {
  0% { transform: translate(-2px, -2px); }
  100% { transform: translate(2px, 2px); }
}

.robo-speech-bubble-box {
  position: relative;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border: 2px solid #38bdf8;
  border-radius: 16px;
  padding: 10px 14px;
  width: 92%;
  max-width: 400px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 10;
  transition: all 0.3s ease;
}
.robo-speech-bubble-box::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #38bdf8 transparent;
  display: block;
  width: 0;
}
.speech-badge {
  font-size: 10px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.robo-speech-bubble-box p {
  margin: 0;
  font-size: 13px;
  color: #f1f5f9;
  line-height: 1.45;
  font-weight: 600;
}
.robo-speech-bubble-box.confused-pop {
  border-color: #f59e0b;
  animation: speechPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.robo-speech-bubble-box.upset-pop {
  border-color: #ef4444;
  background: linear-gradient(135deg, #450a0a, #1e1b4b);
  animation: speechPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes speechPop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.untrained-robo-avatar-box {
  width: 250px;
  height: 260px;
  position: relative;
  z-index: 5;
  margin-top: 4px;
  transition: transform 0.4s ease;
}
.robo-head-tilt {
  transform: rotate(14deg) translateY(-10px);
}
.robo-shake-crazy {
  animation: roboHeadShakeCrazy 0.12s linear infinite;
}
@keyframes roboHeadShakeCrazy {
  0% { transform: rotate(-8deg) scale(1.05); }
  50% { transform: rotate(8deg) scale(0.95); }
  100% { transform: rotate(-8deg) scale(1.05); }
}

.laser-scanner-beam {
  position: absolute;
  top: 120px;
  left: 10%;
  right: 10%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #22c55e, #86efac, #22c55e, transparent);
  box-shadow: 0 0 16px #22c55e, 0 0 30px #22c55e;
  z-index: 12;
  animation: laserSweep 1.2s ease-in-out infinite alternate;
}
@keyframes laserSweep {
  0% { top: 120px; }
  100% { top: 320px; }
}

.audio-shockwave-overlay {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 12;
  pointer-events: none;
}
.sound-wave-bar {
  width: 8px;
  height: 60px;
  background: #ef4444;
  border-radius: 4px;
  box-shadow: 0 0 12px #ef4444;
  animation: soundBarPulse 0.3s ease-in-out infinite alternate;
}
.sound-wave-bar:nth-child(2) { animation-delay: 0.1s; height: 90px; background: #f59e0b; }
.sound-wave-bar:nth-child(3) { animation-delay: 0.2s; height: 120px; background: #ec4899; }
.sound-wave-bar:nth-child(4) { animation-delay: 0.15s; height: 80px; background: #f59e0b; }
.sound-wave-bar:nth-child(5) { animation-delay: 0.05s; height: 50px; }
@keyframes soundBarPulse {
  0% { transform: scaleY(0.3); opacity: 0.5; }
  100% { transform: scaleY(1.3); opacity: 1; }
}

.untrained-drop-zone {
  margin-top: 10px;
  width: 92%;
  padding: 10px;
  border: 2px dashed rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.6);
  text-align: center;
  font-size: 12px;
  color: #38bdf8;
  font-weight: 700;
  transition: all 0.2s ease;
  z-index: 5;
}
.untrained-drop-zone.drop-active {
  border-color: #f43f5e;
  background: rgba(244, 63, 94, 0.15);
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.3);
  transform: scale(1.04);
}

.untrained-items-tray {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.category-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.photo-cards-grid,
.audio-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.test-input-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 10px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  transition: all 0.25s ease;
  cursor: grab;
}
.test-input-card:hover:not(.item-tested) {
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
  transform: translateY(-2px);
}
.test-input-card.item-tested {
  opacity: 0.55;
  border-style: dashed;
  background: #f1f5f9;
}
.card-thumb-large {
  position: relative;
  width: 100%;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.card-thumb-large img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.thumb-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(15, 23, 42, 0.85);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 13px;
}
.card-thumb-audio {
  position: relative;
  width: 100%;
  height: 55px;
  border-radius: 10px;
  background: #0f172a;
  border: 1.5px solid #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 4px;
}
.card-details strong {
  font-size: 12px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ask-robo-btn {
  font-size: 11px !important;
  padding: 4px 8px !important;
  min-height: 28px !important;
  width: 100%;
}
.play-audio-btn {
  font-size: 11px !important;
  padding: 4px 8px !important;
  min-height: 28px !important;
}

.untrained-lesson-banner {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(245, 158, 11, 0.15));
  border: 1.5px solid #f43f5e;
  border-radius: 14px;
}
.untrained-lesson-banner h4 {
  margin: 0 0 4px;
  color: #fb7185;
  font-size: 13px;
}
.untrained-lesson-banner p {
  margin: 0;
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.35;
}
.untrained-lesson-banner p {
  margin: 0;
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
}
@keyframes dropIntoBasket {
  0% {
    opacity: 0;
    transform: translateY(-26px) scale(0.85);
  }
  60% {
    opacity: 1;
    transform: translateY(4px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.basket-item-card.animate-drop {
  animation: dropIntoBasket 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.basket-item-card.mystery-item {
  border-color: #ffd166 !important;
  background: rgba(255, 209, 102, 0.2) !important;
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.35);
}
.mystery-test-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 14px 0;
}
.mystery-test-card {
  padding: 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(137, 190, 245, 0.3);
  background: linear-gradient(150deg, rgba(28, 52, 98, 0.6), rgba(14, 22, 54, 0.85));
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #e5f1ff;
  transition: all 0.2s ease;
}
.mystery-test-card:hover {
  border-color: #00d2ff;
  transform: translateY(-2px);
}
.mystery-test-card.placed {
  opacity: 0.5;
  pointer-events: none;
  border-style: dashed;
}

/* Big Celebratory Training Complete Banner */
.training-complete-banner {
  margin: 0 0 20px;
  padding: 16px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(99, 102, 241, 0.28));
  border: 2px solid #00d2ff;
  box-shadow: 0 0 28px rgba(0, 210, 255, 0.3), inset 0 0 16px rgba(0, 210, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.training-complete-banner .banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.training-complete-banner .banner-badge-icon {
  font-size: 32px;
  filter: drop-shadow(0 0 12px rgba(0, 210, 255, 0.6));
}
.training-complete-banner .banner-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  color: #00e5ff;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.training-complete-banner .banner-subtitle {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}
.training-complete-banner .banner-subtitle strong {
  color: #ffd166;
  font-size: 16px;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.6);
}

/* Vibrant High-Contrast Toast Notifications */
.toast {
  position: fixed;
  z-index: 100;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 25px);
  opacity: 0;
  pointer-events: none;
  max-width: min(560px, calc(100vw - 35px));
  border: 2px solid #00d2ff !important;
  background: linear-gradient(135deg, #091a3e, #1a0f3d) !important;
  color: #ffffff !important;
  padding: 14px 22px;
  border-radius: 12px;
  box-shadow: 0 14px 45px rgba(0, 210, 255, 0.45) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast strong, .toast b {
  color: #ffd166 !important;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.6);
}
.toast span {
  color: #00e5ff !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}
.toast.celebration {
  border: 2px solid #ffd166 !important;
  background: linear-gradient(135deg, #102450, #421045) !important;
  box-shadow: 0 16px 50px rgba(255, 209, 102, 0.55) !important;
}

/* ==============================================
   CHAPTER 05: AI APPLICATIONS (CLEAN 2-COLUMN LAYOUT)
   ============================================== */
.apps-step-tracker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.apps-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1.5px solid rgba(67, 119, 183, 0.22);
  background: rgba(255, 255, 255, 0.8);
  color: #4b6382;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.apps-step-pill:hover {
  border-color: #00d2ff;
  color: #18335b;
  transform: translateY(-1px);
}
.apps-step-pill.active {
  border-color: #00d2ff;
  background: linear-gradient(135deg, #0d234a, #1a1645);
  color: #00e5ff;
  box-shadow: 0 4px 16px rgba(0, 210, 255, 0.25);
}
.apps-step-pill.completed {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.apps-step-pill.active.completed {
  background: linear-gradient(135deg, #0d234a, #1a1645);
  color: #00e5ff;
}

/* 2-Column Application Layout */
.app-screen-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(340px, 0.9fr);
  gap: 24px;
  margin-bottom: 22px;
  align-items: stretch;
}

/* Left: Detailed Information Card */
.app-text-card {
  padding: 26px 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(67, 119, 183, 0.22);
  box-shadow: 0 12px 30px rgba(46, 106, 165, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.app-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #0099cc;
  background: rgba(0, 210, 255, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 210, 255, 0.25);
  align-self: flex-start;
}
.app-title-row {
  margin: 0;
}
.app-title-row h3 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: #18335b;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-title-row p {
  margin: 0;
  font-size: 13.5px;
  color: #557297;
  line-height: 1.45;
  font-weight: 600;
}

.app-detail-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px dashed rgba(67, 119, 183, 0.2);
  padding-top: 14px;
}
.app-info-block {
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fbff;
  border: 1px solid rgba(67, 119, 183, 0.16);
}
.app-info-block.tech-block {
  border-left: 4px solid #00d2ff;
}
.app-info-block.power-block {
  border-left: 4px solid #f59e0b;
}
.app-info-block.fact-block {
  border-left: 4px solid #8b5cf6;
}
.app-info-block h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tech-block h4 { color: #0284c7; }
.power-block h4 { color: #d97706; }
.fact-block h4 { color: #7c3aed; }
.app-info-block p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #334e68;
}
.app-info-block p strong {
  color: #0f2744;
}

/* Right: Clean Rectangular Image Space */
.app-image-container {
  border-radius: 14px;
  border: 2px solid rgba(67, 119, 183, 0.22);
  background: #f0f9ff;
  box-shadow: 0 12px 30px rgba(46, 106, 165, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  min-height: 380px;
  position: relative;
  overflow: hidden;
}
.app-image-container.has-image {
  border: none;
  background: transparent;
}
.app-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.app-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.app-image-icon-big {
  font-size: 58px;
  filter: drop-shadow(0 6px 12px rgba(2, 132, 199, 0.25));
}
.app-image-placeholder h4 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  color: #0369a1;
  margin: 0;
}
.app-image-placeholder p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  max-width: 240px;
  line-height: 1.4;
}
.app-image-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(2, 132, 199, 0.25);
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
}

/* Bottom Navigation Footer */
.apps-nav-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid rgba(67, 119, 183, 0.22);
  box-shadow: 0 8px 20px rgba(46, 106, 165, 0.06);
}
.apps-counter-badge {
  font-size: 13.5px;
  font-weight: 800;
  color: #18335b;
  letter-spacing: 0.04em;
}

/* Celebration Complete Screen */
.apps-celebration-card {
  text-align: center;
  padding: 38px 24px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,0.95), rgba(240,248,255,0.95));
  border: 2px solid #00d2ff;
  box-shadow: 0 16px 45px rgba(0, 210, 255, 0.25);
  margin-top: 10px;
}
.apps-celebration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.apps-unlocked-badge {
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #091a3e, #1a0f3d);
  border: 1.5px solid #00d2ff;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 210, 255, 0.2);
}
.apps-unlocked-badge span {
  font-size: 26px;
}

@media (max-width: 900px) {
  .app-screen-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CHAPTER 06 // AI CAN MAKE MISTAKES (INFORMATIVE & INTERACTIVE STYLES)
   ========================================================================== */
.mistakes-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  margin-top: 10px;
}
@media (max-width: 960px) {
  .mistakes-layout {
    grid-template-columns: 1fr;
  }
}

.mistake-concept-banner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 650px) {
  .mistake-concept-banner {
    grid-template-columns: 1fr;
  }
}

.concept-info-card {
  padding: 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(67, 119, 183, 0.25);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(46, 106, 165, 0.08);
  position: relative;
  overflow: hidden;
}
.concept-info-card.hallucination-card {
  border-left: 4px solid #a855f7;
  background: linear-gradient(145deg, #faf5ff, #ffffff);
}
.concept-info-card.confidence-card {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(145deg, #fffbeb, #ffffff);
}
.concept-info-card h4 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.concept-info-card.hallucination-card h4 { color: #7e22ce; }
.concept-info-card.confidence-card h4 { color: #b45309; }
.concept-info-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.48;
  color: #4b6282;
}
.concept-info-card strong {
  color: #1e3a5f;
}
.concept-info-card .concept-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 8px;
}
.hallucination-card .concept-tag {
  background: #f3e8ff;
  color: #7e22ce;
}
.confidence-card .concept-tag {
  background: #fef3c7;
  color: #b45309;
}

.mistake-interactive-stage {
  padding: 22px;
  border-radius: 12px;
  border: 1.5px solid rgba(67, 119, 183, 0.22);
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(46, 106, 165, 0.09);
}

.scenario-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  margin-bottom: 12px;
}

.ai-chat-simulation {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  margin: 14px 0 18px;
  position: relative;
}
.ai-chat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 8px;
}
.ai-chat-bubble {
  background: #ffffff;
  border-left: 4px solid #ef4444;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  color: #1e293b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mistake-choices {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.mistake-choice-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 13px 16px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mistake-choice-btn:hover {
  border-color: #3b82f6;
  background: #f0f7ff;
  transform: translateX(3px);
}
.mistake-choice-btn.correct {
  border-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.mistake-choice-btn.incorrect {
  border-color: #ef4444;
  background: #fef2f2;
  color: #991b1b;
}
.mistake-choice-btn:disabled {
  cursor: default;
}

.human-rule-sidebar {
  padding: 22px;
  border-radius: 12px;
  border: 1.5px solid rgba(67, 119, 183, 0.22);
  background: linear-gradient(155deg, #f0fdfa, #f8fafc);
  box-shadow: 0 10px 28px rgba(46, 106, 165, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.human-rule-sidebar h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 18px;
  color: #0f766e;
}
.fact-check-steps {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.fact-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 118, 110, 0.18);
  font-size: 12px;
  line-height: 1.4;
  color: #334155;
}
.fact-step span {
  font-size: 18px;
  flex: none;
}
.fact-step strong {
  display: block;
  color: #0f766e;
  font-size: 12px;
  margin-bottom: 2px;
}

/* Completion Screen */
.mistake-completion-card {
  padding: 32px;
  border-radius: 14px;
  border: 2px solid rgba(16, 185, 129, 0.3);
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.12);
  margin-top: 12px;
}
.mistake-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
@media (max-width: 800px) {
  .mistake-summary-grid {
    grid-template-columns: 1fr;
  }
}
.summary-box {
  padding: 18px;
  border-radius: 10px;
  text-align: left;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
}
.summary-box.box-hallucination {
  border-color: #d8b4fe;
  background: #faf5ff;
}
.summary-box.box-confidence {
  border-color: #fde68a;
  background: #fffbeb;
}
.summary-box.box-rule {
  border-color: #a7f3d0;
  background: #f0fdf4;
}
.summary-box h4 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.box-hallucination h4 { color: #7e22ce; }
.box-confidence h4 { color: #b45309; }
.box-rule h4 { color: #047857; }
.summary-box p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
}
.summary-box ul {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 11.5px;
  color: #475569;
  line-height: 1.45;
}

/* ==========================================================================
   HIGH-END 4-LEVEL AI SUPERHERO & MEGAZORD TITAN STYLES
   ========================================================================== */

/* Level Progression Selector Bar */
.hero-evolution-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 768px) {
  .hero-evolution-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

.level-tier-btn {
  padding: 12px 10px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.level-tier-btn:hover {
  border-color: #0ea5e9;
  background: #f0f9ff;
  transform: translateY(-2px);
}
.level-tier-btn.active {
  border-color: #0284c7;
  background: linear-gradient(145deg, #e0f2fe, #ffffff);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.22);
  color: #0369a1;
  font-weight: 700;
}
.level-tier-btn.level-4-btn.active {
  border-color: #f59e0b;
  background: linear-gradient(145deg, #fffbeb, #fef3c7);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.32);
  color: #b45309;
}
.level-tier-btn .tier-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #64748b;
}
.level-tier-btn.active .tier-badge {
  background: #0284c7;
  color: #ffffff;
}
.level-tier-btn.level-4-btn.active .tier-badge {
  background: #f59e0b;
  color: #ffffff;
}
.level-tier-btn .tier-name {
  font-size: 12px;
  font-weight: 700;
}
.level-tier-btn .tier-icon {
  font-size: 20px;
}

/* High-End Hero Stage */
.hero-stage-highend {
  min-height: 480px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1.5px solid rgba(67, 119, 183, 0.25);
  background: radial-gradient(circle at 50% 40%, rgba(30, 58, 138, 0.95), rgba(15, 23, 42, 0.98)), linear-gradient(160deg, #090d16, #1e1b4b);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  padding: 20px;
}

.hero-stage-highend.level-4-stage {
  background: radial-gradient(circle at 50% 45%, rgba(67, 20, 107, 0.95), rgba(15, 7, 34, 0.98)), linear-gradient(160deg, #18092a, #05010d);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 18px 50px rgba(245, 158, 11, 0.2);
}

/* Background Cyber Grid & Rings */
.cyber-grid-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.6;
}
.cyber-energy-ring {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1.5px dashed rgba(56, 189, 248, 0.35);
  animation: hero-ring-spin 22s linear infinite;
  pointer-events: none;
}
.cyber-energy-ring-inner {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(236, 72, 153, 0.25);
  animation: hero-ring-spin 14s linear infinite reverse;
  pointer-events: none;
}
@keyframes hero-ring-spin {
  to { transform: rotate(360deg); }
}

/* Hero SVG Container */
.hero-svg-canvas {
  width: 100%;
  max-width: 340px;
  height: 340px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5));
}
.hero-svg-canvas svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Floating animation */
.hero-animated-float {
  animation: hero-float-anim 4.5s ease-in-out infinite;
}
@keyframes hero-float-anim {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}

/* Floating Hologram HUD Badges on Stage */
.hud-tier-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px);
}
.hud-power-indicator {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px);
}

.hero-nameplate-highend {
  position: relative;
  z-index: 3;
  margin-top: 10px;
  text-align: center;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 24px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
}
.hero-nameplate-highend strong {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
}
.hero-nameplate-highend span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #38bdf8;
}

/* Control Panel with Stats Radar / Meters */
.hero-stats-card {
  padding: 16px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin: 14px 0;
}
.stats-grid-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.stat-meter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
.stat-meter-label b {
  color: #0284c7;
}
.stat-bar-track {
  height: 7px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-bar-fill.strength-fill {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.hero-unlocked-features {
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.hero-unlocked-features h5 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  color: #166534;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.hero-unlocked-features ul {
  margin: 0;
  padding-left: 16px;
  font-size: 11.5px;
  color: #15803d;
  line-height: 1.45;
}

/* ==========================================================================
   SUPERHERO UPGRADE CINEMATIC TRANSITION MODAL & ANIMATIONS
   ========================================================================== */
.hero-upgrade-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(4, 8, 20, 0.94);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: upgrade-fade-in 0.4s ease-out forwards;
}
@keyframes upgrade-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-upgrade-card {
  width: 100%;
  max-width: 680px;
  background: radial-gradient(circle at 50% 30%, rgba(30, 58, 138, 0.95), rgba(15, 23, 42, 0.98)), linear-gradient(160deg, #0f172a, #050b18);
  border: 2px solid rgba(56, 189, 248, 0.5);
  border-radius: 20px;
  padding: 32px 28px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 70px rgba(56, 189, 248, 0.35), 0 25px 50px rgba(0, 0, 0, 0.6);
  animation: upgrade-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-upgrade-card.megazord-upgrade {
  background: radial-gradient(circle at 50% 35%, rgba(88, 28, 135, 0.95), rgba(15, 7, 34, 0.98)), linear-gradient(160deg, #1e0a38, #05010e);
  border-color: rgba(245, 158, 11, 0.7);
  box-shadow: 0 0 85px rgba(245, 158, 11, 0.45), 0 25px 50px rgba(0, 0, 0, 0.7);
}

@keyframes upgrade-pop {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Background Spinning Rays */
.upgrade-rays {
  position: absolute;
  width: 700px;
  height: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(56, 189, 248, 0.12) 0deg 20deg, transparent 20deg 40deg, rgba(56, 189, 248, 0.12) 40deg 60deg, transparent 60deg 80deg, rgba(56, 189, 248, 0.12) 80deg 100deg, transparent 100deg 120deg, rgba(56, 189, 248, 0.12) 120deg 140deg, transparent 140deg 160deg, rgba(56, 189, 248, 0.12) 160deg 180deg, transparent 180deg 200deg, rgba(56, 189, 248, 0.12) 200deg 220deg, transparent 220deg 240deg, rgba(56, 189, 248, 0.12) 240deg 260deg, transparent 260deg 280deg, rgba(56, 189, 248, 0.12) 280deg 300deg, transparent 300deg 320deg, rgba(56, 189, 248, 0.12) 320deg 340deg, transparent 340deg 360deg);
  animation: rays-spin 30s linear infinite;
  pointer-events: none;
}
.megazord-upgrade .upgrade-rays {
  background: conic-gradient(from 0deg, rgba(245, 158, 11, 0.16) 0deg 20deg, transparent 20deg 40deg, rgba(236, 72, 153, 0.16) 40deg 60deg, transparent 60deg 80deg, rgba(245, 158, 11, 0.16) 80deg 100deg, transparent 100deg 120deg, rgba(236, 72, 153, 0.16) 120deg 140deg, transparent 140deg 160deg, rgba(245, 158, 11, 0.16) 160deg 180deg, transparent 180deg 200deg, rgba(236, 72, 153, 0.16) 200deg 220deg, transparent 220deg 240deg, rgba(245, 158, 11, 0.16) 240deg 260deg, transparent 260deg 280deg, rgba(236, 72, 153, 0.16) 280deg 300deg, transparent 300deg 320deg, rgba(245, 158, 11, 0.16) 320deg 340deg, transparent 340deg 360deg);
}
@keyframes rays-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.upgrade-kicker-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid #38bdf8;
  color: #38bdf8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.megazord-upgrade .upgrade-kicker-tag {
  background: rgba(245, 158, 11, 0.25);
  border-color: #fbbf24;
  color: #fbbf24;
}

.upgrade-title {
  font-family: var(--display);
  font-size: 28px;
  color: #ffffff;
  margin: 0 0 6px;
  position: relative;
  z-index: 2;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.8);
}
.megazord-upgrade .upgrade-title {
  color: #fef08a;
  text-shadow: 0 0 25px rgba(245, 158, 11, 0.9);
}

.upgrade-subtitle {
  color: #94a3b8;
  font-size: 13px;
  margin: 0 auto 16px;
  max-width: 500px;
  line-height: 1.45;
  position: relative;
  z-index: 2;
}
.upgrade-subtitle strong {
  color: #38bdf8;
}
.megazord-upgrade .upgrade-subtitle strong {
  color: #fbbf24;
}

/* Upgraded Avatar Box */
.upgrade-avatar-box {
  width: 220px;
  height: 220px;
  margin: 0 auto 16px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero-evolve-pulse 2s ease-in-out infinite;
}
@keyframes hero-evolve-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.6)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 35px rgba(56, 189, 248, 0.9)); }
}
.megazord-upgrade .upgrade-avatar-box {
  animation: megazord-evolve-pulse 2s ease-in-out infinite;
}
@keyframes megazord-evolve-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 25px rgba(245, 158, 11, 0.7)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 45px rgba(245, 158, 11, 1)); }
}

/* Power Highlights List */
.upgrade-powers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 16px;
  position: relative;
  z-index: 2;
  text-align: left;
}

.upgrade-power-pill {
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
}
.upgrade-power-pill span {
  font-size: 20px;
  flex: none;
}
.upgrade-power-pill strong {
  display: block;
  font-size: 13px;
  color: #38bdf8;
}
.megazord-upgrade .upgrade-power-pill {
  border-color: rgba(245, 158, 11, 0.4);
}
.megazord-upgrade .upgrade-power-pill strong {
  color: #fbbf24;
}

/* Nova learning-upgrade transition: keeps the same companion visible between chapters. */
.nova-upgrade-card { max-width: 720px; }
.evolution-level-badge { position: relative; z-index: 2; display: inline-flex; flex-direction: column; gap: 3px; padding: 7px 14px; border: 1px solid rgba(86, 226, 255, .48); border-radius: 12px; background: rgba(6, 23, 58, .72); color: #8cefff; font: 800 10px/1.2 var(--display); letter-spacing: .1em; }
.evolution-level-badge strong { color: #fff3a4; font-size: 11px; }
.nova-transformation-stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); align-items: center; gap: 8px; }
.nova-transform-box { min-height: 232px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(130, 224, 255, .28); border-radius: 16px; background: linear-gradient(145deg, rgba(29, 65, 125, .58), rgba(12, 22, 59, .68)); overflow: hidden; }
.nova-after-box { border-color: rgba(114, 255, 225, .64); background: radial-gradient(circle at 50% 48%, rgba(68, 222, 205, .24), transparent 50%), linear-gradient(145deg, rgba(31, 75, 128, .82), rgba(17, 24, 75, .85)); box-shadow: inset 0 0 30px rgba(82, 239, 213, .12); }
.transform-box-tag { display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #b7d4f8; background: rgba(4, 12, 38, .7); font: 800 8px/1 var(--display); letter-spacing: .1em; }
.transform-box-tag.new-tag { color: #9bffec; border: 1px solid rgba(100, 255, 219, .33); }
.nova-upgrade-avatar { position: relative; width: 168px; height: 190px; margin-top: 7px; }
.nova-upgrade-avatar .robo-avatar-svg { width: 100%; height: 100%; }
.nova-before-box .nova-upgrade-avatar { opacity: .68; filter: saturate(.72); }
.nova-upgraded-avatar { animation: nova-upgrade-pulse 1.6s ease-in-out infinite; }
.nova-transform-energy { position: relative; min-height: 170px; display: grid; place-items: center; }
.energy-beam-pulse { position: absolute; width: 4px; height: 136px; border-radius: 999px; background: linear-gradient(transparent, #8dfff0 18%, #fff 50%, #8dfff0 82%, transparent); box-shadow: 0 0 20px #7deedf; animation: nova-energy-pulse 1s ease-in-out infinite alternate; }
.lightning-spark { position: relative; z-index: 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #172964; border: 2px solid #9effee; font-size: 23px; box-shadow: 0 0 28px rgba(136, 255, 231, .7); animation: nova-spark-pop 1.3s ease-in-out infinite; }
.morph-arrow-badge { position: absolute; z-index: 3; bottom: 4px; color: #aefdf0; font: 800 8px/1 var(--display); letter-spacing: .09em; white-space: nowrap; }
.powers-pills-row { display: grid; gap: 8px; }
@keyframes nova-upgrade-pulse { 50% { transform: translateY(-7px) scale(1.04); filter: drop-shadow(0 0 18px rgba(108, 255, 228, .8)); } }
@keyframes nova-energy-pulse { to { transform: scaleY(1.12); opacity: .65; } }
@keyframes nova-spark-pop { 50% { transform: scale(1.16); } }
@media (max-width: 600px) { .nova-transformation-stage { grid-template-columns: 1fr; }.nova-transform-energy { min-height: 78px; }.energy-beam-pulse { width: 160px; height: 4px; }.morph-arrow-badge { bottom: 0; }.nova-transform-box { min-height: 185px; }.nova-upgrade-avatar { width: 140px; height: 160px; } }

/* Nova's upgrades are mounted on the robot, never displayed as separate floating tools. */
.robo-avatar-svg .nova-smart-glasses { animation: nova-glasses-scan 1.5s ease-in-out infinite alternate; }
.robo-avatar-svg .nova-sound-sensors { animation: nova-listen-pulse 1.25s ease-in-out infinite alternate; transform-origin: 180px 145px; }
.robo-avatar-svg .nova-mega-armor { animation: nova-mega-shine 2.2s ease-in-out infinite alternate; transform-origin: 180px 210px; }
.robo-avatar-svg .nova-creator-core { animation: nova-creator-pulse 1.2s ease-in-out infinite alternate; transform-origin: 180px 269px; }
@keyframes nova-glasses-scan { to { filter: brightness(1.35); opacity: .75; } }
@keyframes nova-listen-pulse { to { transform: scale(1.06); filter: brightness(1.35); } }
@keyframes nova-mega-shine { to { filter: brightness(1.22) drop-shadow(0 0 8px #ffd46b); } }
@keyframes nova-creator-pulse { to { transform: scale(1.11); opacity: .72; } }

/* ==========================================
   CHAPTER 07: TOP-TIER HOME SURVEILLANCE CREATOR LAB
   ========================================== */
.surveillance-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 20px;
  margin-top: 12px;
  align-items: stretch;
}
@media (max-width: 850px) {
  .surveillance-layout {
    grid-template-columns: 1fr;
  }
}

.surveillance-toolbox {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.surveillance-toolbox h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.surveillance-item-card {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  cursor: grab;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: relative;
}
.surveillance-item-card:hover {
  border-color: #0284c7;
  background: #f0f9ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.15);
}
.surveillance-item-card.dragging {
  opacity: 0.5;
  border-color: #0284c7;
}
.surveillance-item-card.used {
  opacity: 0.5;
  pointer-events: none;
  border-style: solid;
  border-color: #10b981;
  background: #ecfdf5;
}
.surveillance-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.surveillance-item-info strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.surveillance-item-info small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

/* Cyber Home Stage (Large & Prominent) */
.home-cyber-stage {
  background: radial-gradient(circle at center, #1e1b4b 0%, #090d16 100%);
  border-radius: 18px;
  padding: 24px;
  border: 2px solid rgba(56, 189, 248, 0.3);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  min-height: 400px;
}
.home-cyber-stage.drop-hover {
  border-color: #38bdf8;
  box-shadow: 0 0 45px rgba(56, 189, 248, 0.6);
}

.cyber-home-canvas {
  width: 100%;
  max-width: 480px;
  height: 270px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}
.cyber-home-canvas svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
}

.home-drop-instructions {
  background: rgba(15, 23, 42, 0.85);
  border: 1px dashed rgba(56, 189, 248, 0.4);
  border-radius: 10px;
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-drop-instructions strong {
  color: #38bdf8;
}

/* Fullscreen Brainstorming Animation */
.fullscreen-brainstorm-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #1e1b4b 0%, #030712 100%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  padding: 24px;
  text-align: center;
  animation: fadeIn 0.35s ease-out;
}
.brainstorm-big-core {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, #38bdf8, #818cf8, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  margin-bottom: 20px;
  box-shadow: 0 0 80px rgba(56, 189, 248, 0.8), 0 0 130px rgba(236, 72, 153, 0.5);
  animation: core-spin 3s ease-in-out infinite;
}
@keyframes core-spin {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.12) rotate(180deg); }
}

/* Active AI Dashboard: 2-Column Layout (Big Home Left + Vertical Cards Right) */
.surveillance-active-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .surveillance-active-layout {
    grid-template-columns: 1fr;
  }
}

.surveillance-vertical-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}

.dashboard-header-banner {
  background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
  padding: 14px 20px;
  border-radius: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.25);
  margin-bottom: 14px;
}
.dashboard-header-banner h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-status-pill {
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid #10b981;
  color: #6ee7b7;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.live-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse-dot 1.2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.4); }
}

.surveillance-feature-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  border-left: 4px solid #0284c7;
}
.surveillance-feature-card.card-theft {
  border-left-color: #ef4444;
}
.surveillance-feature-card.card-sound {
  border-left-color: #f59e0b;
}
.surveillance-feature-card.card-report {
  border-left-color: #10b981;
}

.feature-top-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.surveillance-feature-card h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}
.surveillance-feature-card p {
  margin: 0 0 10px;
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
}

.feature-action-box {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-theft .feature-action-box {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.card-sound .feature-action-box {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}
.card-report .feature-action-box {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

/* ==========================================
   GRADUATION & CELEBRATION BANNER
   ========================================== */
.graduation-celebration-banner {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  border: 2px solid #fbbf24;
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 20px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(251, 191, 36, 0.25), 0 0 20px rgba(99, 102, 241, 0.3);
  animation: banner-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes banner-entrance {
  0% { transform: scale(0.94) translateY(-10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.graduation-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  margin-bottom: 8px;
}

.graduation-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.graduation-subtitle {
  margin: 0;
  font-size: 14px;
  color: #c7d2fe;
  line-height: 1.5;
  max-width: 680px;
}
.graduation-subtitle strong {
  color: #fbbf24;
}

/* Floating Confetti Particle Emitters */
.confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.confetti-piece {
  position: absolute;
  font-size: 22px;
  animation: confetti-drift 3.5s linear infinite;
}
@keyframes confetti-drift {
  0% { transform: translateY(-30px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(180px) rotate(360deg); opacity: 0; }
}

/* ==========================================
   CREATOR LAB 2.0: SELF DRIVING CAR STYLES
   ========================================== */
.creator-subtabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.6);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: fit-content;
}
.creator-subtab {
  padding: 8px 18px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.creator-subtab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}
.creator-subtab.active {
  background: linear-gradient(135deg, #0284c7, #4f46e5);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.car-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .car-mode-grid { grid-template-columns: 1fr; }
}

.car-mode-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.car-mode-card:hover {
  transform: translateY(-4px);
  border-color: #0284c7;
  box-shadow: 0 12px 32px rgba(2, 132, 199, 0.15);
}
.car-mode-card.ai-card {
  background: linear-gradient(160deg, #0f172a, #1e1b4b);
  border-color: rgba(56, 189, 248, 0.4);
  color: #ffffff;
}
.car-mode-card.ai-card:hover {
  border-color: #38bdf8;
  box-shadow: 0 12px 40px rgba(56, 189, 248, 0.3);
}

.mode-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 12px;
}
.mode-badge.manual-badge {
  background: #e0f2fe;
  color: #0284c7;
}
.mode-badge.ai-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.highway-stage {
  width: 100%;
  max-width: 580px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  background: #0f172a;
  border-radius: 18px;
  border: 3px solid rgba(56, 189, 248, 0.4);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}

.road-surface {
  position: absolute;
  inset: 0;
  background: #1e293b;
  display: flex;
  justify-content: space-evenly;
}

.road-lane-line {
  width: 4px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    #fbbf24 0px,
    #fbbf24 24px,
    transparent 24px,
    transparent 48px
  );
  animation: road-lines-scroll 0.6s linear infinite;
}
@keyframes road-lines-scroll {
  from { background-position-y: 0px; }
  to { background-position-y: 48px; }
}

.road-vehicle {
  position: absolute;
  width: 70px;
  height: 110px;
  transition: left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}

.traffic-vehicle {
  position: absolute;
  width: 60px;
  height: 95px;
  z-index: 4;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.driving-hud {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
}
.telemetry-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.telemetry-pill.manual-pill {
  background: rgba(2, 132, 199, 0.2);
  color: #38bdf8;
  border: 1px solid #0284c7;
}
.telemetry-pill.ai-pill {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border: 1px solid #f59e0b;
}

.keyboard-keys-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
}
.key-cap {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: monospace;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}

/* ==========================================
   CREATOR LAB 3.0: ROBOTIC PARCEL SORTER
   ========================================== */
.conveyor-stage {
  width: 100%;
  max-width: 720px;
  height: 380px;
  margin: 0 auto;
  position: relative;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  border-radius: 18px;
  border: 3px solid rgba(56, 189, 248, 0.4);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

.sorting-bins-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  z-index: 2;
}

.sorting-bin {
  flex: 1;
  background: rgba(15, 23, 42, 0.85);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  color: #ffffff;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
.sorting-bin.bin-small {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}
.sorting-bin.bin-big {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
}
.sorting-bin.active-sort {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.6);
}

.bin-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 6px;
}
.bin-small .bin-badge {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
.bin-big .bin-badge {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.conveyor-belt-track {
  width: 100%;
  height: 60px;
  background: #334155;
  border-radius: 12px;
  border: 2px solid #475569;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.5);
  margin-top: auto;
}

.conveyor-roller-strip {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    #1e293b 0px,
    #1e293b 16px,
    #475569 16px,
    #475569 32px
  );
  animation: roller-move 0.8s linear infinite;
}
@keyframes roller-move {
  from { background-position-x: 0px; }
  to { background-position-x: 32px; }
}

.conveyor-parcel {
  position: absolute;
  bottom: 62px;
  left: 0%;
  transform: translateX(-50%);
  transition: left 1.2s linear, bottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.parcel-box-graphic {
  background: linear-gradient(135deg, #d97706, #b45309);
  border: 2.5px solid #f59e0b;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  position: relative;
}
.parcel-box-graphic.small-box {
  width: 58px;
  height: 54px;
  font-size: 26px;
}
.parcel-box-graphic.big-box {
  width: 106px;
  height: 98px;
  font-size: 56px;
  background: linear-gradient(135deg, #b45309, #78350f);
  border: 3px solid #fbbf24;
}

.parcel-label-tag {
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
  margin-top: 6px;
  background: rgba(15, 23, 42, 0.85);
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.robotic-arm-overlay {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 240px;
  z-index: 8;
  pointer-events: none;
}

/* ====== CYBERNETIC ROBOT BRAIN ====== */
.robot-brain-core {
  width: 190px !important;
  height: 190px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 48%, rgba(220, 252, 231, 0.25) 0%, rgba(14, 165, 233, 0.2) 35%, rgba(15, 23, 42, 0.95) 70%) !important;
  border: 2px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.25), inset 0 0 25px rgba(56, 189, 248, 0.15) !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.cyber-halo-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(56, 189, 248, 0.5);
  pointer-events: none;
}
.cyber-halo-ring.ring-1 {
  width: 170px;
  height: 170px;
  animation: brain-orbit 10s linear infinite;
}
.cyber-halo-ring.ring-2 {
  width: 145px;
  height: 145px;
  border-color: rgba(245, 158, 11, 0.4);
  animation: brain-orbit 6s linear infinite reverse;
}
.robot-brain-shell {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 46% 48% 44% 45%;
  background: radial-gradient(circle at 35% 25%, #0f172a 0%, #1e293b 45%, #0284c7 90%, #0369a1 100%);
  border: 2px solid #38bdf8;
  box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.6), 0 0 25px rgba(56, 189, 248, 0.4);
  animation: brain-think 2.5s ease-in-out infinite;
}
.robot-optic-visor {
  position: absolute;
  top: 18px;
  width: 68px;
  height: 22px;
  border-radius: 12px;
  background: #090d16;
  border: 1px solid #38bdf8;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
  box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.8);
}
.optic-lens {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 12px #38bdf8, 0 0 4px #fff;
  animation: opticPulse 1.5s ease-in-out infinite alternate;
}
.optic-lens.lens-right {
  animation-delay: 0.75s;
}
.laser-scanner-beam {
  position: absolute;
  bottom: -4px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: laserScan 1.2s linear infinite alternate;
}
@keyframes opticPulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1; }
}
@keyframes laserScan {
  0% { opacity: 0.3; transform: scaleX(0.4); }
  100% { opacity: 1; transform: scaleX(1.1); }
}

/* ====== BRAIN SPEECH BUBBLE ====== */
.brain-speech-bubble {
  position: relative;
  text-align: center;
  margin: 0 auto 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1.5px solid rgba(105, 221, 255, 0.35);
  border-radius: 16px;
  max-width: 260px;
  box-shadow: 0 4px 20px rgba(105, 221, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}
.brain-speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #0f172a;
  filter: drop-shadow(0 1px 0 rgba(105, 221, 255, 0.35));
}
.brain-speech-bubble span {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: #69ddff;
  letter-spacing: 0.03em;
}
.bubble-pop-in {
  animation: bubblePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes bubblePopIn {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ====== BRAIN ABSORBING ANIMATION ====== */
.thinking-core.absorbing {
  animation: brainAbsorb 0.6s ease-in-out infinite alternate !important;
}
.thinking-core.absorbing .robot-brain-shell {
  box-shadow: 0 0 40px rgba(56, 189, 248, 0.8), 0 0 80px rgba(56, 189, 248, 0.4) !important;
  border-color: #7eedff !important;
}
@keyframes brainAbsorb {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.08); filter: brightness(1.3); }
}

/* ====== DISSOLVE FLY ITEMS ====== */
.dissolve-fly-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.4), 0 10px 30px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

/* ====== FULLSCREEN EUREKA POPUP ====== */
.eureka-fullscreen-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(255, 207, 105, 0.2), rgba(7, 11, 27, 0.97) 70%);
  backdrop-filter: blur(14px);
  animation: eurekaFadeIn 0.4s ease forwards;
}
.eureka-fullscreen-popup .eureka-icon {
  font-size: 90px;
  animation: eurekaBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 30px rgba(255, 207, 105, 0.8));
}
.eureka-big-title {
  font-family: var(--display);
  font-size: clamp(52px, 8vw, 96px) !important;
  font-weight: 900;
  letter-spacing: -2px;
  color: #fff;
  margin: 0;
  text-align: center;
  text-shadow: 0 0 50px rgba(255, 207, 105, 0.7), 0 0 100px rgba(255, 207, 105, 0.3);
  animation: eurekaTextPop 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.eureka-big-title em {
  font-style: normal;
  background: linear-gradient(90deg, #ffcf69, #ff8cb8, #69ddff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.eureka-fullscreen-popup .eureka-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.eureka-fullscreen-popup .eureka-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffcf69;
  box-shadow: 0 0 10px #ffcf69;
  animation: sparkleFloat 2s ease-out forwards;
}
@keyframes eurekaFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes eurekaBounce {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes eurekaTextPop {
  0% { transform: translateY(20px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes sparkleFloat {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-200px) scale(0); opacity: 0; }
}
.eureka-fullscreen-popup.eureka-fade-out {
  animation: eurekaFadeOut 0.4s ease forwards;
}
@keyframes eurekaFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== VISUAL QUALITY PASS: NOVA + LEARNING STAGES ===== */
.robo-assembly-stage,
.untrained-robo-stage {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 38%, rgba(80, 129, 255, .32), transparent 28%),
    radial-gradient(circle at 12% 82%, rgba(251, 125, 188, .18), transparent 27%),
    linear-gradient(145deg, #070d20 0%, #0c1b43 48%, #101044 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 24px 50px rgba(4, 9, 30, .27);
}
.robo-stage-backdrop::before,
.robo-stage-backdrop::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.robo-stage-backdrop::before {
  width: 520px; height: 520px; left: 50%; top: 45%; transform: translate(-50%, -50%);
  background: conic-gradient(from 20deg, transparent 0 9%, rgba(136, 243, 255, .3) 10% 11%, transparent 12% 25%, rgba(255, 175, 221, .22) 26% 28%, transparent 29% 100%);
  -webkit-mask: radial-gradient(transparent 0 49%, #000 50% 51%, transparent 52%);
  mask: radial-gradient(transparent 0 49%, #000 50% 51%, transparent 52%);
  animation: mission-ring 22s linear infinite;
}
.robo-stage-backdrop::after {
  inset: 0;
  opacity: .45;
  background-image: linear-gradient(rgba(155, 227, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 227, 255, .12) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent);
}
@keyframes mission-ring { to { transform: translate(-50%, -50%) rotate(360deg); } }
.robo-assembly-area { z-index: 1; }
.robo-slot {
  border-color: rgba(150, 240, 255, .38);
  background: linear-gradient(135deg, rgba(92, 218, 255, .11), rgba(131, 97, 255, .08));
  box-shadow: inset 0 0 18px rgba(75, 208, 255, .08);
}
.robo-slot:not(.placed)::before { content: "DROP"; font: 800 8px/1 var(--display); letter-spacing: .14em; color: #b9f5ff; position: absolute; bottom: 7px; opacity: .65; }
.slot-label { opacity: .72; filter: none; }
.robo-slot.placed { overflow: visible; }
.robo-slot.placed svg { overflow: visible; filter: drop-shadow(0 10px 11px rgba(0,0,0,.4)); }
.robo-progress-hud { z-index: 5; background: rgba(7, 16, 42, .8); backdrop-filter: blur(12px); }
.robo-parts-tray { border-color: rgba(93, 154, 225, .24); box-shadow: 0 22px 50px rgba(32, 76, 134, .12); }
.robo-part-card { background: linear-gradient(135deg, #fff, #edf6ff); border-color: #d8e8fa; }
.part-preview { background: radial-gradient(circle at 32% 26%, #344d8f, #0a1435 70%); box-shadow: inset 0 1px rgba(255,255,255,.2); }
.robo-complete-reveal { width: 315px; height: 420px; }
.robo-assembly-area.assembly-complete { display: grid; place-items: center; }
.robo-identity-reveal { position: relative; width: 300px; height: 405px; }
.robo-identity-reveal .robo-avatar-svg { width: 278px; height: 350px; margin: 0 auto; }
.robo-identity-label {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 12px; border: 1px solid rgba(133, 239, 255, .48); border-radius: 999px;
  color: #b8f6ff; background: rgba(6, 16, 47, .77); box-shadow: 0 6px 22px rgba(0,0,0,.3);
  font: 800 10px/1 var(--display); letter-spacing: .1em; backdrop-filter: blur(10px);
}
.robo-identity-label i { width: 7px; height: 7px; border-radius: 50%; background: #78ffe2; box-shadow: 0 0 9px #78ffe2; animation: signal-ping 1.4s ease-in-out infinite; }
.nova-training-pod {
  width: min(100%, 260px) !important;
  height: 250px !important;
  margin: 14px auto 10px !important;
  display: grid !important;
  place-items: center;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.nova-training-pod::before, .nova-training-pod::after { display: none; }
.nova-training-avatar { position: relative; z-index: 3; width: 190px; height: 226px; }
.nova-training-avatar .robo-avatar-svg { width: 100%; height: 100%; }
.nova-training-ring { position: absolute; left: 50%; top: 48%; border-radius: 50%; pointer-events: none; }
.nova-training-ring.ring-one { width: 218px; height: 218px; border: 1px dashed rgba(40, 177, 220, .55); transform: translate(-50%, -50%); animation: orbit-turn 14s linear infinite; }
.nova-training-ring.ring-two { width: 164px; height: 164px; border: 2px solid rgba(255, 174, 216, .35); transform: translate(-50%, -50%); animation: orbit-turn 8s linear infinite reverse; }
.nova-data-particle { position: absolute; z-index: 4; width: 10px; height: 10px; border-radius: 50%; background: #fef7ae; box-shadow: 0 0 12px currentColor; animation: nova-particle 2.4s ease-in-out infinite; }
.particle-one { color: #fef7ae; top: 29px; right: 26px; }.particle-two { color: #8effef; bottom: 43px; left: 19px; animation-delay: .8s; }.particle-three { color: #ecb5ff; top: 72px; left: 20px; width: 7px; height: 7px; animation-delay: 1.4s; }
.nova-training-tag { position: absolute; z-index: 5; bottom: -1px; padding: 5px 9px; border-radius: 999px; color: #137c9c; background: rgba(241, 255, 255, .76); border: 1px solid rgba(44, 190, 205, .42); font: 800 9px/1 var(--display); letter-spacing: .1em; white-space: nowrap; }
.nova-training-pod.absorbing .nova-training-avatar { animation: nova-learning-charge .62s ease-in-out infinite alternate; }
.nova-training-pod.absorbing .robo-core { filter: brightness(1.35); }
@keyframes nova-particle { 50% { transform: translateY(-16px) scale(1.45); opacity: .45; } }
@keyframes nova-learning-charge { to { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(106, 249, 255, .9)); } }
.nova-thinking-stage {
  position: relative; width: 190px; height: 158px; margin: 0 auto 8px;
  display: grid; place-items: center; overflow: visible;
}
.nova-thinking-avatar { position: relative; z-index: 3; width: 112px; height: 137px; }
.nova-thinking-avatar .robo-avatar-svg { width: 100%; height: 100%; animation: nova-think-bob 1.75s ease-in-out infinite; }
.nova-think-orbit { position: absolute; left: 50%; top: 46%; border: 1px dashed rgba(50, 176, 207, .48); border-radius: 50%; transform: translate(-50%, -50%); }
.nova-think-orbit.orbit-a { width: 155px; height: 118px; animation: orbit-turn 6s linear infinite; }
.nova-think-orbit.orbit-b { width: 126px; height: 142px; border-color: rgba(185, 119, 238, .42); animation: orbit-turn 8.5s linear infinite reverse; }
.nova-think-dot { position: absolute; z-index: 4; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; animation: nova-think-particle 1.2s ease-in-out infinite alternate; }
.nova-think-dot.dot-a { top: 30px; right: 26px; color: #9effee; background: #9effee; }.nova-think-dot.dot-b { bottom: 39px; left: 22px; color: #ffcf69; background: #ffcf69; animation-delay: .36s; }.nova-think-dot.dot-c { top: 66px; left: 17px; width: 5px; height: 5px; color: #e5b4ff; background: #e5b4ff; animation-delay: .7s; }
.nova-thinking-status { position: absolute; z-index: 5; bottom: -4px; padding: 5px 8px; border: 1px solid rgba(48, 185, 204, .37); border-radius: 999px; background: rgba(246, 255, 255, .8); color: #197d9c; font: 800 8px/1 var(--display); letter-spacing: .1em; white-space: nowrap; }
.nova-thinking-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #51e6cf; box-shadow: 0 0 8px #51e6cf; animation: signal-ping 1s ease-in-out infinite; }
@keyframes nova-think-bob { 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes nova-think-particle { to { transform: scale(1.5) translateY(-8px); opacity: .35; } }
.robo-avatar-svg { display: block; width: 100%; height: 100%; overflow: visible; animation: nova-hover 4.8s ease-in-out infinite; }
.robo-avatar-svg .robo-core { transform-origin: 180px 269px; animation: core-breathe 1.8s ease-in-out infinite; }
.robo-avatar-svg .robo-signal { transform-origin: 180px 17px; animation: signal-ping 1.7s ease-in-out infinite; }
.robo-avatar-svg .robo-eyes { animation: eyes-blink 5s infinite; transform-origin: center; }
.robo-avatar-svg .robo-orbit { transform-origin: 180px 239px; animation: orbit-turn 13s linear infinite; }
.robo-avatar-svg .robo-sparkles { animation: sparkle-breath 2.3s ease-in-out infinite alternate; }
@keyframes nova-hover { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-13px) rotate(1.5deg); } }
@keyframes core-breathe { 50% { transform: scale(1.13); } }
@keyframes signal-ping { 50% { transform: scale(1.2); opacity: .68; } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes sparkle-breath { to { opacity: .32; transform: scale(.85); } }
@keyframes eyes-blink { 0%, 45%, 49%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.09); } }
.untrained-robo-avatar-box { width: 285px; height: 320px; margin-top: -8px; }
.untrained-robo-stage .cyber-energy-ring { width: 390px; height: 390px; border-color: rgba(124, 231, 255, .34); }
.untrained-robo-stage .robo-speech-bubble-box { background: linear-gradient(125deg, rgba(14, 32, 74, .93), rgba(16, 22, 61, .86)); backdrop-filter: blur(12px); border-color: rgba(119, 225, 255, .72); box-shadow: 0 12px 35px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.13); }
.untrained-drop-zone { background: rgba(9, 24, 57, .66); backdrop-filter: blur(10px); }
@media (prefers-reduced-motion: reduce) {
  .robo-avatar-svg, .robo-avatar-svg *, .robo-stage-backdrop::before { animation: none !important; }
}

/* Shared lesson motion: understated enough for learning, rich enough to feel alive. */
.view-header > *,
.mission-card,
.chapter-card,
.learning-card,
.lesson-panel,
.app-detail-card,
.hero-stage-highend {
  animation: academy-rise .56s cubic-bezier(.16, 1, .3, 1) both;
}
.mission-card:nth-child(2), .chapter-card:nth-child(2n), .learning-card:nth-child(2n) { animation-delay: .06s; }
.mission-card:nth-child(3), .chapter-card:nth-child(3n), .learning-card:nth-child(3n) { animation-delay: .12s; }
@keyframes academy-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.chapter-card,
.mission-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}
.chapter-card::before,
.mission-card::before {
  content: "";
  position: absolute;
  width: 150px; height: 150px;
  left: -75px; top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--chapter-color, #59dcff) 25%, transparent), transparent 70%);
  pointer-events: none;
  transition: transform .45s ease, opacity .45s ease;
  opacity: .7;
}
.chapter-card:hover::before,
.mission-card:hover::before { transform: scale(1.6); opacity: 1; }
.chapter-card:hover,
.mission-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(20, 48, 102, .16); }
.world-node { transition: transform .3s cubic-bezier(.16, 1, .3, 1), filter .3s ease; }
.world-node:hover { transform: translateY(-6px) scale(1.035); filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) {
  .view-header > *, .mission-card, .chapter-card, .learning-card, .lesson-panel, .app-detail-card, .hero-stage-highend { animation: none !important; }
  .chapter-card:hover, .mission-card:hover, .world-node:hover { transform: none; }
}

/* Keep Nova upgrades side-by-side and inside the viewport at every screen size. */
.hero-upgrade-backdrop { align-items: center !important; overflow: auto; }
.nova-upgrade-card {
  width: min(760px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 28px);
  padding: 18px 20px !important;
  overflow: auto;
}
.nova-upgrade-card .nova-transformation-stage {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) 86px minmax(150px, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100%;
}
.nova-upgrade-card .nova-transform-box {
  min-width: 0;
  min-height: 195px !important;
  height: 205px;
  padding: 9px !important;
}
.nova-upgrade-card .nova-upgrade-avatar {
  width: 132px !important;
  height: 158px !important;
  min-width: 0;
  flex: 0 0 auto;
}
.nova-upgrade-card .nova-upgrade-avatar .robo-avatar-svg {
  width: 132px !important;
  height: 158px !important;
  max-width: 100%;
  max-height: 100%;
}
.nova-upgrade-card .nova-transform-energy { min-height: 150px !important; }
.nova-upgrade-card .energy-beam-pulse { height: 122px; }
.nova-upgrade-card .upgrade-powers-list { margin-bottom: 0 !important; }
@media (max-width: 600px) {
  .nova-upgrade-card .nova-transformation-stage { grid-template-columns: minmax(118px, 1fr) 58px minmax(118px, 1fr) !important; gap: 4px !important; }
  .nova-upgrade-card .nova-transform-box { min-height: 175px !important; height: 180px; padding: 6px !important; }
  .nova-upgrade-card .nova-upgrade-avatar, .nova-upgrade-card .nova-upgrade-avatar .robo-avatar-svg { width: 105px !important; height: 130px !important; }
  .nova-upgrade-card .nova-transform-energy { min-height: 120px !important; }
  .nova-upgrade-card .energy-beam-pulse { height: 94px; }
  .nova-upgrade-card .morph-arrow-badge { font-size: 7px; }
}

/* Intelligence extraction: Mega Nova transfers every learned skill into one reusable core. */
.intelligence-extraction-stage { position: relative; min-height: 380px; overflow: hidden; display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; gap: 10px; padding: 28px; border: 1px solid rgba(142, 111, 255, .4); border-radius: 20px; background: radial-gradient(circle at 50% 50%, rgba(174, 103, 255, .25), transparent 25%), linear-gradient(140deg, #080d25, #17225c); box-shadow: 0 20px 46px rgba(19, 22, 78, .28); }
.extract-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(147, 237, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 237, 255, .16) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.intelligence-data-stream { position: absolute; z-index: 3; left: 18%; right: 18%; top: 50%; height: 86px; transform: translateY(-50%); pointer-events: none; opacity: 0; }
.intelligence-data-stream i { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(204, 255, 244, .85); border-radius: 50%; background: rgba(25, 47, 119, .92); color: #fff6aa; font-style: normal; font-size: 14px; box-shadow: 0 0 16px rgba(118, 255, 226, .9); opacity: 0; }
.intelligence-data-stream i:nth-child(2){top:10%;animation-delay:.16s}.intelligence-data-stream i:nth-child(3){top:76%;animation-delay:.32s}.intelligence-data-stream i:nth-child(4){top:28%;animation-delay:.48s}.intelligence-data-stream i:nth-child(5){top:70%;animation-delay:.64s}.intelligence-data-stream i:nth-child(6){top:46%;animation-delay:.8s}
.extract-nova-wrap, .intelligence-core-unit, .extract-beam { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.extract-nova-wrap .robo-avatar-svg { width: 220px; height: 270px; max-width: 100%; }
.extract-label { margin-top: -7px; padding: 6px 10px; border: 1px solid rgba(255, 221, 116, .45); border-radius: 99px; background: rgba(8, 15, 44, .78); color: #fff0a3; font: 800 9px/1 var(--display); letter-spacing: .1em; white-space: nowrap; }
.extract-beam { height: 140px; gap: 10px; color: #bffeff; font: 800 9px/1 var(--display); letter-spacing: .08em; text-align: center; }.extract-beam span { width: 100%; height: 5px; border-radius: 999px; background: linear-gradient(90deg, transparent, #8efdec, #fff, #b879ff, transparent); box-shadow: 0 0 18px #7eeedc; }
.intelligence-core-unit { min-height: 236px; text-align: center; color: #e8e4ff; }.core-shell { width: 128px; height: 128px; padding: 10px; border: 2px solid #d6c5ff; border-radius: 36px; background: linear-gradient(145deg, #24346f, #0a1031); box-shadow: inset 0 0 25px rgba(183, 123, 255, .45), 0 0 22px rgba(163, 101, 255, .35); transform: rotate(45deg); }.core-light { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 24px; background: radial-gradient(circle, #fff 0 8%, #98fff0 11% 27%, #6b62ef 42%, #1a1e63 70%); color: #fff; font-size: 42px; box-shadow: 0 0 25px #9effee; transform: rotate(-45deg); }.intelligence-core-unit strong { margin-top: 25px; font: 800 12px/1.2 var(--display); letter-spacing: .08em; }.intelligence-core-unit small { margin-top: 7px; color: #9ffbe8; font-size: 10px; letter-spacing: .08em; }
.extract-skill-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0; }.extract-skill-list span { padding: 7px 11px; border-radius: 99px; background: #eff9ff; border: 1px solid #b6e6fc; color: #24577c; font-size: 12px; font-weight: 700; }.extract-button, .extract-continue { display: flex; width: min(520px, 100%); margin: 12px auto; justify-content: center; }.extract-continue { margin-top: 6px; }
.intelligence-extraction-stage.extracting .extract-nova-wrap { animation: nova-drain 1.2s ease-in-out infinite alternate; }.intelligence-extraction-stage.extracting .extract-beam span { animation: core-transfer .45s linear infinite; }.intelligence-extraction-stage.extract-stream .intelligence-data-stream { opacity: 1; }.intelligence-extraction-stage.extract-stream .intelligence-data-stream i { animation: intelligence-fly 1.55s cubic-bezier(.15,.8,.2,1) forwards; }.intelligence-extraction-stage.extract-lock .core-shell { animation: core-lock-in .8s cubic-bezier(.18,1.3,.35,1) forwards; }.intelligence-extraction-stage.extract-lock .core-light { animation: core-flash .65s ease-out 2; }.intelligence-extraction-stage.core-extracted .core-shell { box-shadow: inset 0 0 35px rgba(183, 123, 255, .7), 0 0 45px rgba(130, 255, 231, .85); }
@keyframes nova-drain { to { filter: brightness(.68); transform: scale(.96); } } @keyframes core-transfer { to { filter: brightness(1.45); transform: scaleX(1.1); } } @keyframes intelligence-fly { 0% { left: 0; opacity: 0; transform: scale(.4) rotate(-35deg); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 24px); top: 50%; opacity: 0; transform: scale(.35) rotate(270deg); } } @keyframes core-lock-in { 0% { transform: rotate(45deg) scale(1); } 60% { transform: rotate(45deg) scale(1.3); filter: brightness(1.8); } 100% { transform: rotate(45deg) scale(1.08); filter: brightness(1.2); } } @keyframes core-flash { 50% { filter: brightness(2.3); box-shadow: 0 0 45px #fff; } }
@media (max-width: 700px) { .intelligence-extraction-stage { grid-template-columns: 1fr; }.extract-beam { height: 48px; }.extract-beam span { width: 150px; height: 4px; }.extract-nova-wrap .robo-avatar-svg { width: 160px; height: 195px; }.intelligence-core-unit { min-height: 190px; } }




/* ===================================================
   CHAPTER 02.5: WORLDWIDE IMAGE DATASET SIMULATION (SPLIT 50/50, NO-SCROLL)
   =================================================== */

.content-view.no-scroll {
  padding: 10px 24px 10px !important;
  height: calc(100vh - 72px) !important;
  max-height: calc(100vh - 72px) !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

.global-split-page {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Header */
.split-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.split-title-wrap h2 {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.split-title-wrap p {
  font-size: 11px;
  color: #94a3b8;
  margin: 2px 0 0;
}

.stage-nav-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 28, 54, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
}

.stage-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #8da4c4;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.stage-nav-pill:hover {
  color: #e0f2fe;
  background: rgba(56, 189, 248, 0.1);
}

.stage-nav-pill.active {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

/* Main Split Grid */
.split-main-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  overflow: hidden;
}

/* LEFT HALF: Nova Absorbing */
.left-nova-panel {
  background: radial-gradient(circle at 50% 45%, rgba(14, 165, 233, 0.18) 0%, rgba(15, 23, 42, 0.95) 75%), #090d1a;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.left-nova-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(56, 189, 248, 0.02) 0px, rgba(56, 189, 248, 0.02) 1px, transparent 1px, transparent 12px);
  pointer-events: none;
}

.nova-stage-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.nova-stage-header span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.absorbing-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.absorbing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: radar-pulse 1s infinite alternate;
}

/* Nova Avatar & Energy Absorption */
.nova-avatar-centerpiece {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.absorption-rings {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 1.5px dashed rgba(56, 189, 248, 0.45);
  animation: absorption-spin 12s linear infinite;
  pointer-events: none;
}

.absorption-rings::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1.5px dashed rgba(34, 197, 94, 0.45);
  animation: absorption-spin 8s linear infinite reverse;
}

@keyframes absorption-spin {
  to { transform: rotate(360deg); }
}

.nova-character-wrap {
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 3;
  animation: nova-gentle-hover 3s ease-in-out infinite alternate;
}

@keyframes nova-gentle-hover {
  0% { transform: translateY(-4px); }
  100% { transform: translateY(4px); }
}

.nova-character-wrap svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.5));
}

/* Floating Data Badges into Nova */
.data-particle-badge {
  position: absolute;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  color: #e0f2fe;
  background: rgba(14, 28, 54, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
  pointer-events: none;
  z-index: 3;
}

.dp-1 { top: 18px; left: 16px; animation: dp-drift-1 4s ease-in-out infinite alternate; }
.dp-2 { top: 22px; right: 16px; animation: dp-drift-2 4.5s ease-in-out infinite alternate; }
.dp-3 { bottom: 18px; left: 20px; animation: dp-drift-2 3.8s ease-in-out infinite alternate; }
.dp-4 { bottom: 22px; right: 20px; animation: dp-drift-1 4.2s ease-in-out infinite alternate; }

@keyframes dp-drift-1 {
  0% { transform: translateY(0); }
  100% { transform: translateY(-7px); }
}

@keyframes dp-drift-2 {
  0% { transform: translateY(-6px); }
  100% { transform: translateY(4px); }
}

/* Nova Speech Box in Left Half */
.nova-speech-card {
  width: 100%;
  background: rgba(14, 28, 54, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  margin-bottom: 8px;
}

.nova-speech-card p {
  margin: 0;
  font-size: 11px;
  color: #bae6fd;
  line-height: 1.35;
}

.left-actions-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 2;
}

/* RIGHT HALF: Vertical Waterfall Streams */
.right-stream-panel {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.85));
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.stream-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.stream-filter-scroll {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex: 1;
}

.stream-filter-scroll::-webkit-scrollbar {
  height: 3px;
}
.stream-filter-scroll::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.3);
  border-radius: 3px;
}

.cat-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.cat-filter-btn:hover {
  color: #e2e8f0;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
}

.cat-filter-btn.active {
  color: #ffffff;
  background: #0284c7;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* Vertical Waterfall Columns Wrapper */
.vertical-waterfall-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(10, 16, 28, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.15);
  padding: 0 6px;
}

.vertical-waterfall-stage::before,
.vertical-waterfall-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  z-index: 5;
  pointer-events: none;
}

.vertical-waterfall-stage::before {
  top: 0;
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.95), transparent);
}

.vertical-waterfall-stage::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(10, 16, 28, 0.95), transparent);
}

.vertical-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: max-content;
}

.vertical-column.scroll-up {
  animation: stream-scroll-vertical-up 36s linear infinite;
}

.vertical-column.scroll-down {
  animation: stream-scroll-vertical-down 34s linear infinite;
}

.vertical-column.scroll-up-2 {
  animation: stream-scroll-vertical-up 38s linear infinite;
}

.vertical-waterfall-stage:hover .vertical-column {
  animation-play-state: paused;
}

@keyframes stream-scroll-vertical-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes stream-scroll-vertical-down {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* Individual Vertical Card */
.vertical-item-card {
  width: 100%;
  height: 98px;
  flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(150deg, #1e293b, #0f172a);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.vertical-item-card:hover {
  transform: scale(1.04);
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4), 0 8px 18px rgba(0, 0, 0, 0.5);
  z-index: 6;
}

.vertical-card-top {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08) 0%, rgba(15, 23, 42, 0.8) 100%);
  overflow: hidden;
}

.vertical-card-emoji {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
  transition: transform 0.2s ease;
}

.vertical-item-card:hover .vertical-card-emoji {
  transform: scale(1.15);
}

.vertical-bounding-box {
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(56, 189, 248, 0.75);
  border-radius: 5px;
  pointer-events: none;
}

.vertical-bounding-box::before,
.vertical-bounding-box::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-color: #38bdf8;
  border-style: solid;
}

.vertical-bounding-box::before {
  top: -2px;
  left: -2px;
  border-width: 2px 0 0 2px;
}

.vertical-bounding-box::after {
  bottom: -2px;
  right: -2px;
  border-width: 0 2px 2px 0;
}

.vertical-scan-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
  animation: card-laser-sweep 1.6s ease-in-out infinite alternate;
}

@keyframes card-laser-sweep {
  0% { top: 6px; }
  100% { top: calc(100% - 6px); }
}

.vertical-badge-tag {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(2, 132, 199, 0.9);
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  padding: 1.5px 5px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

.vertical-card-bottom {
  padding: 4px 6px;
  background: rgba(10, 16, 28, 0.95);
  border-top: 1px solid rgba(56, 189, 248, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
}

.vertical-item-name {
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65px;
}

.vertical-item-loc {
  font-size: 8px;
  color: #7dd3fc;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

/* Card Inspect Modal */
.card-inspect-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.inspect-card-dialog {
  width: 100%;
  max-width: 520px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}


/* =========================================================
   CHAPTER 03 MODERN UNSUPERVISED LEARNING STYLES (IMPROVISED)
   ========================================================= */

/* Hero Banner */
.unsupervised-hero-banner {
  position: relative;
  overflow: hidden;
  margin: 0 0 20px;
  padding: 18px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(24, 28, 62, 0.9) 0%, rgba(30, 41, 89, 0.85) 50%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 24px rgba(168, 85, 247, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  backdrop-filter: blur(12px);
}
.unsupervised-hero-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.12) 0%, transparent 40%);
  pointer-events: none;
}
.banner-glow-orb {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
  top: -40px;
  left: 20px;
  filter: blur(20px);
  pointer-events: none;
}
.banner-left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.banner-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #c084fc;
  text-transform: uppercase;
}
.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 10px #a855f7, 0 0 20px #c084fc;
  animation: pulse-dot-glow 1.8s ease-in-out infinite alternate;
}
@keyframes pulse-dot-glow {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 1; }
}
.banner-headline {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.banner-subtext {
  margin: 0;
  font-size: 12px;
  color: #cbd5e1;
  max-width: 680px;
  line-height: 1.45;
}
.banner-actions {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.modern-recluster-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}
.modern-recluster-btn:hover {
  background: rgba(168, 85, 247, 0.25);
  border-color: #c084fc;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.3);
}
.modern-recluster-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.4s ease;
}
.modern-recluster-btn:hover svg {
  transform: rotate(180deg);
}

/* Modern Baskets Stage */
.modern-baskets-stage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 0 0 22px;
}
.modern-pod {
  position: relative;
  border-radius: 16px;
  padding: 20px;
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pod-high-freq {
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.12), transparent 60%), linear-gradient(160deg, rgba(14, 33, 62, 0.9) 0%, rgba(10, 18, 36, 0.95) 100%);
}
.pod-high-freq:hover {
  border-color: #38bdf8;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 28px rgba(56, 189, 248, 0.25);
}
.pod-low-freq {
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  background: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.12), transparent 60%), linear-gradient(160deg, rgba(46, 26, 60, 0.9) 0%, rgba(18, 12, 34, 0.95) 100%);
}
.pod-low-freq:hover {
  border-color: #f59e0b;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 28px rgba(245, 158, 11, 0.25);
}
.modern-pod.active-drop {
  transform: scale(1.025);
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.6), inset 0 0 20px rgba(56, 189, 248, 0.3);
}
.pod-low-freq.active-drop {
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.6), inset 0 0 20px rgba(245, 158, 11, 0.3);
}

.pod-header {
  margin-bottom: 16px;
  text-align: left;
}
.pod-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pod-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 6px;
}
.pod-high-freq .pod-badge {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.pod-low-freq .pod-badge {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.freq-tag {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  font-family: monospace;
}
.pod-icon-wrap {
  display: flex;
  align-items: center;
  margin: 6px 0 8px;
}
.waveform-mini-orb {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
}
.cyan-orb {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.amber-orb {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.orb-bar {
  width: 3px;
  border-radius: 3px;
  animation: orb-bar-bounce 1s ease-in-out infinite alternate;
}
.cyan-orb .orb-bar { background: #38bdf8; }
.amber-orb .orb-bar { background: #fbbf24; }
.orb-bar.bar-1 { height: 8px; animation-delay: 0.1s; }
.orb-bar.bar-2 { height: 16px; animation-delay: 0.3s; }
.orb-bar.bar-3 { height: 22px; animation-delay: 0.2s; }
.orb-bar.bar-4 { height: 12px; animation-delay: 0.4s; }
.orb-bar.bar-5 { height: 18px; animation-delay: 0.15s; }
@keyframes orb-bar-bounce {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

.pod-title {
  margin: 0 0 3px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}
.pod-desc {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
}

/* Pod Audio Chip Buttons */
.pod-contents {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modern-audio-chip {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}
.modern-audio-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.audio-chip-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.audio-play-disc {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.audio-play-disc svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
.pod-low-freq .audio-play-disc {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}
.audio-play-disc.gold-disc {
  background: rgba(234, 179, 8, 0.2);
  border-color: #eab308;
  color: #fef08a;
}
.modern-audio-chip:hover .audio-play-disc {
  transform: scale(1.1);
}
.audio-chip-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.audio-chip-title {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
}
.audio-chip-sub {
  font-size: 10px;
  color: #94a3b8;
}
.audio-chip-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.eq-bars span {
  width: 2.5px;
  height: 6px;
  background: #64748b;
  border-radius: 2px;
  transition: all 0.2s ease;
}
.tag-high-pitch {
  font-size: 10px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.tag-low-beat {
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.tag-match-score {
  font-size: 10px;
  font-weight: 700;
  color: #fef08a;
  background: rgba(234, 179, 8, 0.2);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(234, 179, 8, 0.4);
}

/* Playing Audio Active State */
.modern-audio-chip.playing-audio {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
}
.pod-low-freq .modern-audio-chip.playing-audio {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4) !important;
}
.modern-audio-chip.playing-audio .eq-bars span {
  background: #38bdf8;
  animation: eq-dance 0.45s ease-in-out infinite alternate;
}
.pod-low-freq .modern-audio-chip.playing-audio .eq-bars span {
  background: #fbbf24;
}
.eq-bars span:nth-child(1) { height: 12px; animation-delay: 0.1s; }
.eq-bars span:nth-child(2) { height: 7px; animation-delay: 0.3s; }
.eq-bars span:nth-child(3) { height: 14px; animation-delay: 0.2s; }
.eq-bars span:nth-child(4) { height: 9px; animation-delay: 0.4s; }
@keyframes eq-dance {
  0% { height: 4px; }
  100% { height: 14px; }
}

/* Mystery Item Dropped into Basket */
.modern-audio-chip.mystery-item {
  border-color: rgba(234, 179, 8, 0.5);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), rgba(245, 158, 11, 0.08));
  animation: dropInSmooth 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes dropInSmooth {
  0% { transform: translateY(-16px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Inspection Layout Refinement */
.modern-inspection-layout {
  display: grid;
  grid-template-columns: minmax(400px, 1.1fr) minmax(320px, 0.9fr);
  gap: 20px;
}
.modern-station-card,
.modern-analysis-card {
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 22px;
  backdrop-filter: blur(12px);
}
.modern-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.topline-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.station-icon-glow {
  color: #38bdf8;
  display: grid;
  place-items: center;
}
.station-icon-glow svg {
  width: 17px;
  height: 17px;
}
.station-heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #38bdf8;
}
.station-badge {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.station-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 16px;
  line-height: 1.45;
}
.station-desc strong {
  color: #f1f5f9;
}

/* Modern Mystery Cards Grid */
.modern-mystery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.modern-mystery-card {
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(24, 34, 64, 0.85) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1.5px solid rgba(148, 163, 184, 0.25);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.modern-mystery-card:hover {
  border-color: #38bdf8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.2);
  transform: translateY(-2px);
}
.modern-mystery-card.playing-audio {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.45) !important;
}
.modern-mystery-card.playing-audio .osc-bar {
  opacity: 1;
  animation: osc-flutter 0.35s ease-in-out infinite alternate !important;
}
.modern-mystery-card.placed {
  opacity: 0.6;
  border-style: dashed;
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.06);
}
.mystery-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.mystery-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mystery-badge-code {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #38bdf8;
  font-family: monospace;
}
.mystery-title {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
.unseen-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulse-dot-glow 1.5s infinite alternate;
}

/* Oscilloscope Track */
.mystery-visualizer-box {
  background: rgba(10, 15, 30, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.15);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.oscilloscope-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 4px;
}
.osc-bar {
  width: 3px;
  height: var(--h);
  background: linear-gradient(180deg, #38bdf8, #818cf8);
  border-radius: 3px;
  opacity: 0.7;
  transition: height 0.2s ease, opacity 0.2s ease;
}
.modern-mystery-card:hover .osc-bar {
  opacity: 1;
  animation: osc-flutter 0.8s ease-in-out infinite alternate;
}
@keyframes osc-flutter {
  0% { transform: scaleY(0.7); }
  100% { transform: scaleY(1.3); }
}
.osc-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #64748b;
  text-align: center;
  font-family: monospace;
}
.mystery-card-desc {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

/* Actions in Mystery Card */
.mystery-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.modern-listen-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modern-listen-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}
.modern-place-btn {
  flex: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0284c7, #6366f1);
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}
.modern-place-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0ea5e9, #4f46e5);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
  transform: translateY(-1px);
}
.modern-place-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* Right Analysis Card & Content */
.modern-analysis-card {
  display: flex;
  flex-direction: column;
}
.analysis-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.modern-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #c084fc;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ai-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #10b981;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

/* Initial Empty State in Insight Panel */
.modern-insight-empty {
  background: linear-gradient(160deg, rgba(24, 30, 60, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px dashed rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.empty-sparkle-orb {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.empty-sparkle-orb svg {
  width: 48px;
  height: 48px;
}
.modern-insight-empty h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}
.modern-insight-empty p {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  max-width: 280px;
}
.empty-instruction-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  color: #bae6fd;
  font-size: 11px;
  text-align: left;
  line-height: 1.4;
}
.empty-instruction-chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #38bdf8;
}

/* Placed Result Box */
.modern-result-box {
  background: linear-gradient(160deg, rgba(20, 28, 56, 0.9) 0%, rgba(12, 18, 38, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.modern-prediction-banner {
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.35) 0%, rgba(99, 102, 241, 0.35) 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.banner-chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7eedff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.banner-basket-name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}
.banner-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid rgba(234, 179, 8, 0.35);
  font-size: 11px;
  font-weight: 700;
  color: #fef08a;
  width: fit-content;
}
.result-details-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reasons-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modern-reason-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modern-reason-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.4;
}
.reason-check {
  color: #38bdf8;
  display: flex;
  margin-top: 1px;
  flex-shrink: 0;
}
.reason-check svg {
  width: 14px;
  height: 14px;
}
.modern-finding {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fef3c7;
  font-size: 11px;
  line-height: 1.45;
}
.finding-icon-wrap {
  color: #fbbf24;
  flex-shrink: 0;
  margin-top: 2px;
}
.finding-icon-wrap svg {
  width: 16px;
  height: 16px;
}
.modern-proceed-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.modern-proceed-btn:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
}

/* Modern Unsupervised Learning Button */
.modern-unsupervised-btn {
  margin-top: auto;
  border-radius: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
  border: 1px solid rgba(168, 85, 247, 0.35);
  transition: all 0.25s ease;
  width: 100%;
}
.modern-unsupervised-btn:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(99, 102, 241, 0.25) 100%);
  border-color: #c084fc;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.25);
}


/* =========================================================
   CHAPTER 04 GENERATIVE AI: BOOKS SCANNING & 4-SENTENCE STORY
   ========================================================= */

.genai-pretrain-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1.25fr) minmax(320px, 0.75fr);
  gap: 20px;
  margin-top: 16px;
}
.genai-library-section {
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 22px;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
}

/* Books Grid & Scanner Stage */
.genai-books-stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 10%, rgba(56, 189, 248, 0.08), transparent 70%), rgba(10, 15, 30, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 18px;
  margin: 14px 0;
}
.genai-books-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.genai-book-card {
  position: relative;
  border-radius: 12px;
  background: var(--book-bg);
  border: 1.5px solid var(--book-border);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.genai-book-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.2);
}
.book-spine-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.book-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.book-card-emoji {
  font-size: 22px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.book-word-pill {
  font-size: 9px;
  font-weight: 700;
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: monospace;
}
.book-card-title {
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}
.book-card-author {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.2;
}
.book-card-desc {
  margin: 2px 0 6px;
  font-size: 10.5px;
  color: #cbd5e1;
  line-height: 1.35;
  flex-grow: 1;
}
.book-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.book-topic-tag {
  font-size: 8.5px;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.07);
  padding: 2px 5px;
  border-radius: 4px;
}

/* Sky Blue Laser Scanner */
.book-scanner-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.4) 15%, #38bdf8 50%, rgba(56, 189, 248, 0.4) 85%, transparent 100%);
  box-shadow: 0 0 12px #38bdf8, 0 0 28px rgba(56, 189, 248, 0.9), 0 0 45px rgba(14, 165, 233, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.2s ease;
}
.book-scanner-laser.laser-active {
  opacity: 1;
  animation: book-scanner-sweep 1.4s ease-in-out infinite alternate;
}
@keyframes book-scanner-sweep {
  0% { top: 12px; }
  100% { top: calc(100% - 16px); }
}
.genai-books-stage.scanning-active .genai-book-card {
  animation: book-scan-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes book-scan-pulse {
  0% { opacity: 0.85; }
  100% { opacity: 1; filter: brightness(1.12); }
}

/* Action Bar */
.genai-action-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.genai-scan-btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #6366f1 100%);
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
}
.genai-scan-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0ea5e9 0%, #4f46e5 100%);
  box-shadow: 0 8px 26px rgba(14, 165, 233, 0.5);
  transform: translateY(-2px);
}
.genai-scan-caption {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
}

/* Right Status Panel */
.genai-status-panel {
  display: flex;
  flex-direction: column;
}
.genai-books-result {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.books-empty-state {
  min-height: 360px;
}

/* Telemetry Ingestion View */
.books-scanning-telemetry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 18px;
  border-radius: 14px;
  background: rgba(10, 15, 30, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.telemetry-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.telemetry-avatar-wrap svg {
  width: 56px;
  height: 56px;
}
.scanning-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #38bdf8;
  animation: pulse-ring-expand 1.2s ease-out infinite;
}
@keyframes pulse-ring-expand {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.telemetry-title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}
.telemetry-sub {
  margin: 0 0 16px;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.45;
  max-width: 280px;
}
.telemetry-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 8px;
}
.telemetry-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 8px;
  transition: width 0.4s ease;
  box-shadow: 0 0 12px #38bdf8;
}
.telemetry-words-count {
  font-size: 10px;
  font-weight: 700;
  color: #38bdf8;
  font-family: monospace;
  margin-bottom: 14px;
}
.floating-token-stream {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.token-chip {
  font-size: 9.5px;
  font-weight: 600;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  animation: token-glow 1.5s ease-in-out infinite alternate;
}
.chip-1 { animation-delay: 0.1s; }
.chip-2 { animation-delay: 0.3s; }
.chip-3 { animation-delay: 0.2s; }
.chip-4 { animation-delay: 0.4s; }
.chip-5 { animation-delay: 0.15s; }
@keyframes token-glow {
  0% { transform: translateY(0); opacity: 0.7; }
  100% { transform: translateY(-3px); opacity: 1; }
}

/* Completion Card */
.books-complete-card {
  padding: 22px 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(20, 36, 60, 0.9) 0%, rgba(10, 20, 42, 0.95) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(56, 189, 248, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.complete-badge-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent 70%);
  border: 2px solid #10b981;
  display: grid;
  place-items: center;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}
.complete-emoji {
  font-size: 26px;
}
.complete-heading {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
}
.complete-copy {
  margin: 0;
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.45;
  max-width: 300px;
}
.learned-capabilities-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  margin: 4px 0 8px;
}
.cap-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #e2e8f0;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cap-item strong {
  color: #38bdf8;
}
.goto-prompt-wrap {
  width: 100%;
}
.proceed-prompt-btn {
  width: 100%;
  padding: 11px 16px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  border-radius: 10px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.25s ease;
}
.proceed-prompt-btn:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.6);
}

.genai-pedagogy-tip {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: #e9d5ff;
  font-size: 11px;
  line-height: 1.45;
}
.genai-pedagogy-tip .tip-icon {
  color: #c084fc;
  flex-shrink: 0;
  margin-top: 2px;
}
.genai-pedagogy-tip strong {
  color: #ffffff;
}

/* Top Knowledge Banner in Prompt Stage */
.genai-knowledge-banner {
  margin: 0 0 16px;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(56, 189, 248, 0.15) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.knowledge-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6ee7b7;
}
.back-books-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.back-books-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: #38bdf8;
}

/* Modern Point Item for 4 Sentences */
.modern-point-item {
  position: relative;
  background: linear-gradient(150deg, #f8fcff, #eef6ff);
  border: 1.5px solid rgba(67, 119, 183, 0.22);
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: 0 6px 16px rgba(42, 101, 161, 0.08);
  transition: all 0.25s ease;
}
.modern-point-item:hover {
  transform: translateY(-2px);
  border-color: #0284c7;
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.16);
}
.prompt-badge-check {
  color: #10b981;
  margin-left: auto;
  align-self: center;
  display: flex;
}
.prompt-badge-check svg {
  width: 16px;
  height: 16px;
}
.genai-story-action-btn {
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
}

/* Modern Story Output Showcase */
.modern-story-output {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.story-output-header {
  border-bottom: 1px solid rgba(67, 119, 183, 0.2);
  padding-bottom: 12px;
}
.story-title {
  margin: 6px 0 4px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  color: #1e3a8a;
}
.story-attribution {
  margin: 0;
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}
.story-paragraphs-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.story-paragraph-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(240, 249, 255, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.paragraph-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #0284c7;
  font-family: monospace;
}
.created-story-text {
  margin: 0;
  font-size: 12.5px;
  color: #1e293b;
  line-height: 1.55;
}
.story-synthesis-breakdown {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(245, 243, 255, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.breakdown-title {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b21a8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.breakdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.breakdown-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #334155;
  line-height: 1.4;
}
.b-icon {
  font-size: 13px;
  flex-shrink: 0;
}


/* Big Bunch of Books Display */
.big-books-bunch-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  min-height: 280px;
  position: relative;
  z-index: 2;
}
.books-bunch-cluster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}
.big-book-emoji {
  display: inline-block;
  user-select: none;
  transition: transform 0.3s ease;
}
.big-book-emoji.b-main {
  font-size: 96px;
  z-index: 5;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
  animation: book-float-main 3s ease-in-out infinite alternate;
}
.big-book-emoji.b-orbit {
  position: absolute;
  font-size: 46px;
  opacity: 0.9;
}
.big-book-emoji.b-1 {
  left: -70px;
  top: 10px;
  transform: rotate(-15deg);
  animation: book-float-orbit 2.6s ease-in-out infinite alternate;
}
.big-book-emoji.b-2 {
  left: -40px;
  bottom: -15px;
  transform: rotate(-8deg);
  animation: book-float-orbit 2.9s 0.3s ease-in-out infinite alternate;
}
.big-book-emoji.b-3 {
  right: -70px;
  top: 10px;
  transform: rotate(15deg);
  animation: book-float-orbit 2.7s 0.2s ease-in-out infinite alternate;
}
.big-book-emoji.b-4 {
  right: -40px;
  bottom: -15px;
  transform: rotate(10deg);
  animation: book-float-orbit 3.1s 0.5s ease-in-out infinite alternate;
}
.big-book-emoji.b-5 {
  top: -30px;
  font-size: 42px;
  transform: rotate(5deg);
  animation: book-float-orbit 2.5s 0.4s ease-in-out infinite alternate;
}

@keyframes book-float-main {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.03); }
}
@keyframes book-float-orbit {
  0% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  100% { transform: translateY(-6px) rotate(var(--rot, 0deg)); }
}

.genai-books-stage.scanning-active .big-book-emoji.b-main {
  animation: book-scan-shake 0.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 30px rgba(56, 189, 248, 0.8)) brightness(1.2);
}
.genai-books-stage.scanning-active .big-book-emoji.b-orbit {
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.6)) brightness(1.15);
}
@keyframes book-scan-shake {
  0% { transform: translateY(-4px) rotate(-2deg) scale(1.04); }
  100% { transform: translateY(-6px) rotate(2deg) scale(1.06); }
}

.books-bunch-caption {
  text-align: center;
  margin-top: 10px;
}
.bunch-title {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.bunch-subtitle {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  max-width: 380px;
  line-height: 1.45;
}


/* Single-Card Story Output (No Scroll) */
.modern-story-output.no-scroll-story {
  padding: 14px 16px !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
}
.no-scroll-story .story-output-header {
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
  padding-bottom: 6px;
  margin-bottom: 0;
}
.no-scroll-story .output-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0284c7;
  display: flex;
  align-items: center;
  gap: 5px;
}
.no-scroll-story .story-title {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}
.story-single-card {
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(240, 249, 255, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.story-paragraph {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.48;
  color: #1e293b;
  font-weight: 500;
}
.no-scroll-story .story-proceed-wrap {
  margin-top: 2px;
  padding-top: 0;
  border-top: none;
}
.no-scroll-story .modern-proceed-btn {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
}


/* =========================================================
   CHAPTER 07: TOP-NOTCH INTELLIGENCE EXTRACTION & EXPLOSION
   ========================================================= */

.modern-extract-stage {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 140px 1.2fr;
  align-items: center;
  gap: 14px;
  padding: 30px;
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.2), transparent 45%), linear-gradient(145deg, #070c24 0%, #111a4a 100%);
  box-shadow: 0 20px 50px rgba(7, 12, 36, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Shockwave Burst Flash Overlay */
.shockwave-burst-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 75% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(56, 189, 248, 0.6) 30%, rgba(168, 85, 247, 0.3) 60%, transparent 80%);
  opacity: 0;
  z-index: 20;
  transition: opacity 0.15s ease-out;
}
.shockwave-burst-overlay.shockwave-active {
  animation: shockwave-flash-expand 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes shockwave-flash-expand {
  0% { opacity: 0; transform: scale(0.3); }
  20% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* Nova Avatar Wrapper & Transitions */
.extract-nova-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.nova-avatar-frame {
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}
.nova-avatar-frame.transition-to-base {
  animation: base-return-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes base-return-pop {
  0% { transform: scale(1.15); filter: brightness(2) drop-shadow(0 0 30px #38bdf8); }
  50% { transform: scale(0.92); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4)); }
}
.extract-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #c084fc;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: all 0.3s ease;
}
.base-label-highlight {
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  background: rgba(56, 189, 248, 0.12) !important;
}

/* Skill Transfer Beam */
.modern-extract-beam {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.beam-glow-line {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.beam-glow-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #38bdf8, #c084fc, transparent);
  animation: beam-idle-flow 2s linear infinite;
}
@keyframes beam-idle-flow {
  0% { left: -40%; }
  100% { left: 100%; }
}
.modern-extract-beam b {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #94a3b8;
}
.beam-surging .beam-glow-line {
  height: 6px;
  background: #38bdf8;
  box-shadow: 0 0 16px #38bdf8, 0 0 32px #c084fc;
}
.beam-surging .beam-glow-line::after {
  width: 100%;
  animation: beam-surge-rush 0.3s linear infinite;
}
@keyframes beam-surge-rush {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Small Dormant Core Receptacle (Before Click) */
.dormant-core-idle .core-display-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}
.core-shell-compact {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(145deg, #18224a 0%, #0d1330 100%);
  border: 1.5px solid rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  transition: all 0.3s ease;
}
.compact-core-inner {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(30, 41, 75, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.2);
  display: grid;
  place-items: center;
}
.compact-core-light {
  color: #64748b;
  font-size: 16px;
  transform: rotate(-45deg);
  transition: all 0.3s ease;
}

/* Core Charging Shake Animation */
.core-charging-shake {
  animation: core-pre-blast-shake 0.15s ease-in-out infinite alternate !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 30px #38bdf8, inset 0 0 20px #c084fc !important;
}
.core-charging-shake .compact-core-light {
  color: #ffffff;
  text-shadow: 0 0 14px #38bdf8;
  animation: light-surge 0.2s infinite alternate;
}
@keyframes core-pre-blast-shake {
  0% { transform: rotate(43deg) scale(0.95); }
  100% { transform: rotate(47deg) scale(1.15); }
}
@keyframes light-surge {
  0% { opacity: 0.6; }
  100% { opacity: 1; filter: brightness(2); }
}

/* Massive Exploded Mega Core (After Click / Extracted) */
.mega-core-active .core-display-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 10px;
}
.core-shell-mega {
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
}
.core-shell-mega.exploding-blast {
  animation: mega-blast-in 0.9s cubic-bezier(0.16, 1.4, 0.3, 1) forwards;
}
@keyframes mega-blast-in {
  0% { transform: scale(0.2) rotate(-90deg); opacity: 0; filter: brightness(4); }
  60% { transform: scale(1.18) rotate(15deg); opacity: 1; filter: brightness(2); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
}

/* Concentric Rings of the Mega Core */
.mega-shockwave-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.mega-shockwave-ring.ring-1 {
  inset: -15px;
  border: 2px dashed rgba(56, 189, 248, 0.5);
  animation: ring-rotate-cw 12s linear infinite;
}
.mega-shockwave-ring.ring-2 {
  inset: -28px;
  border: 1.5px dotted rgba(168, 85, 247, 0.4);
  animation: ring-rotate-ccw 16s linear infinite;
}
.mega-orbit-ring {
  position: absolute;
  border-radius: 38%;
  border: 2px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}
.mega-orbit-ring.orbit-a {
  inset: 12px;
  transform: rotate(45deg);
  animation: ring-pulsate 3s ease-in-out infinite alternate;
}
.mega-orbit-ring.orbit-b {
  inset: 12px;
  transform: rotate(-45deg);
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
  animation: ring-pulsate 3s 0.6s ease-in-out infinite alternate;
}
@keyframes ring-rotate-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ring-rotate-ccw {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes ring-pulsate {
  0% { transform: scale(0.94) rotate(45deg); }
  100% { transform: scale(1.04) rotate(45deg); }
}

/* Luminous Glowing Nucleus */
.mega-core-orb {
  position: relative;
  z-index: 5;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #38bdf8 30%, #6366f1 65%, #1e1b4b 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 0 45px #38bdf8, 0 0 80px rgba(168, 85, 247, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.8);
  animation: core-orb-breathe 2.4s ease-in-out infinite alternate;
}
@keyframes core-orb-breathe {
  0% { box-shadow: 0 0 35px #38bdf8, 0 0 60px rgba(168, 85, 247, 0.6); transform: scale(0.96); }
  100% { box-shadow: 0 0 55px #38bdf8, 0 0 95px rgba(168, 85, 247, 0.95); transform: scale(1.05); }
}
.core-inner-glow {
  color: #ffffff;
  font-size: 36px;
  text-shadow: 0 0 20px #ffffff, 0 0 40px #38bdf8;
  animation: star-spin-subtle 4s ease-in-out infinite alternate;
}
@keyframes star-spin-subtle {
  0% { transform: rotate(0deg) scale(0.9); }
  100% { transform: rotate(45deg) scale(1.15); }
}

/* Floating Skill Badges Orbiting the Mega Core */
.floating-core-skills {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  z-index: 8;
}
.core-skill-badge {
  position: absolute;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  color: #ffffff;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.core-skill-badge.s-1 {
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 165, 233, 0.85);
  border: 1px solid #38bdf8;
  animation: skill-bob 2.6s ease-in-out infinite alternate;
}
.core-skill-badge.s-2 {
  bottom: 0px;
  left: -16px;
  background: rgba(245, 158, 11, 0.85);
  border: 1px solid #fbbf24;
  animation: skill-bob 2.9s 0.3s ease-in-out infinite alternate;
}
.core-skill-badge.s-3 {
  bottom: 0px;
  right: -16px;
  background: rgba(168, 85, 247, 0.85);
  border: 1px solid #c084fc;
  animation: skill-bob 2.7s 0.6s ease-in-out infinite alternate;
}
@keyframes skill-bob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* Core Title & Subtitle Styling */
.core-title-text {
  margin-top: 14px;
  font: 800 12px/1.3 var(--display);
  letter-spacing: 0.08em;
  color: #cbd5e1;
  text-align: center;
  transition: all 0.3s ease;
}
.core-title-text.mega-title {
  color: #ffffff !important;
  font-size: 13px !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}
.core-status-text {
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 700;
  text-align: center;
  transition: all 0.3s ease;
}
.core-status-text.mega-status {
  color: #6ee7b7 !important;
  text-shadow: 0 0 10px rgba(110, 231, 183, 0.5);
}

.extract-action-row {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.extract-action-row .button {
  flex: 1;
}


/* Extracted Nova Core Icon in Creator Lab */
.nova-core-item-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: visible !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.45));
}
.creator-nova-core-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.25s ease;
}
.surveillance-item-card:hover .creator-nova-core-badge {
  transform: scale(1.1);
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.7));
}