:root{
  --bg:#05070d;--panel:rgba(9,13,22,.88);--line:rgba(255,255,255,.13);
  --text:#f7f8fb;--muted:#b2b8c7;--purple:#b34cff;--purple2:#7227e8;
  --gold:#ffd84d;--gold2:#ffb918;--green:#38d996;--amber:#ffc641;--red:#ff5363;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020408;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit}
body{min-height:100dvh}
.app-shell{width:min(100%,520px);min-height:100dvh;margin:0 auto;background:#060810;position:relative;overflow:hidden}
.screen{display:none;min-height:100dvh;position:relative}
.screen--active{display:block}
.visual-screen{background-image:linear-gradient(180deg,rgba(1,3,8,.06),rgba(1,3,8,.12)),var(--bg);background-size:cover;background-position:center}
.visual-screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.08) 64%,rgba(0,0,0,.25))}
.hotspot{position:absolute;border:0;background:transparent;z-index:5;cursor:pointer}
.hotspot--screen1{left:8%;right:8%;top:17%;bottom:14%}
.hotspot--english{left:8%;right:8%;top:26%;height:15%}
.hotspot--power{left:8%;right:8%;top:31%;height:24%}
.hotspot--show-poems{left:9%;right:9%;bottom:13%;height:10%}
.hotspot--start-mission{left:8%;right:8%;bottom:15%;height:12%}
.back-float,.back-circle{border:1px solid rgba(255,255,255,.18);background:rgba(4,7,14,.78);color:#fff;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font-size:21px;z-index:8;backdrop-filter:blur(10px)}
.back-float{position:absolute;left:16px;top:calc(16px + env(safe-area-inset-top))}
.floating-cta{position:absolute;z-index:8;left:7%;right:7%;bottom:calc(22px + env(safe-area-inset-bottom));height:58px;border:0;border-radius:16px;background:linear-gradient(#ffe15e,#ffba13);color:#171109;font-weight:950;letter-spacing:.02em;box-shadow:0 14px 34px rgba(255,186,19,.24);display:flex;align-items:center;justify-content:center;gap:14px}
.floating-cta--mission{bottom:calc(72px + env(safe-area-inset-bottom))}
.screen-caption{position:absolute;z-index:7;left:7%;right:7%;top:13%;padding:14px 16px;border:1px solid rgba(255,255,255,.13);background:rgba(3,6,13,.58);border-radius:16px;backdrop-filter:blur(10px)}
.screen-caption--low{top:auto;bottom:12%}
.kicker{font-size:13px;letter-spacing:.12em;color:#cf6aff;font-weight:900}
.caption-title{font-size:27px;line-height:1.05;font-weight:900;margin-top:4px}
.caption-note{font-size:13px;line-height:1.4;color:#c5cad4;margin-top:7px}
.dynamic-screen,.mission-screen{background:#05070d;overflow:hidden}
.dynamic-screen{background-image:var(--bg);background-size:cover;background-position:center}
.dynamic-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,12,.48),rgba(3,6,12,.90))}
.dynamic-overlay--purple{background:radial-gradient(circle at 50% 24%,rgba(126,42,220,.24),transparent 28%),linear-gradient(180deg,rgba(3,6,12,.52),rgba(3,6,12,.92))}
.content{position:relative;z-index:3;min-height:100dvh;padding:calc(18px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.content--center{justify-content:center;text-align:center}
.topline{min-height:48px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:8px}
.mini-brand{font-size:12px;letter-spacing:.10em;font-weight:900;color:#d7d9df}
.count,.xp-pill{font-size:12px;font-weight:900;color:#d9dce4;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(4,7,14,.62)}
.progress-track{height:6px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:6.67%;background:linear-gradient(90deg,#9544ff,#d864ff);box-shadow:0 0 15px rgba(191,81,255,.56);transition:width .22s ease}
.recognition-card{padding:12px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:rgba(7,10,18,.78);box-shadow:0 22px 45px rgba(0,0,0,.28)}
.recognition-art{height:235px;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(180deg,#fdaf39 0,#e57826 47%,#74411f 47%,#20151a 100%)}
.recognition-art:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 21%,rgba(255,239,184,.88),transparent 17%),linear-gradient(180deg,transparent 45%,rgba(0,0,0,.25))}
.desert-sun{position:absolute;width:56px;height:56px;border-radius:50%;right:27px;top:30px;background:#ffe3a0;box-shadow:0 0 42px rgba(255,213,135,.7)}
.stone-head{position:absolute;left:50%;bottom:17px;transform:translateX(-50%) rotate(-7deg);font-size:150px;line-height:1;color:#554235;text-shadow:8px 10px 0 rgba(34,24,20,.36)}
.poem-title{font-size:38px;line-height:1;margin:10px 0 0;letter-spacing:-.035em}
.question-heading{font-size:24px;line-height:1.12;text-align:center;margin:0}
.recognition-actions{display:grid;gap:10px}
.recognition-btn{min-height:58px;border-radius:14px;background:rgba(7,11,18,.84);color:#fff;text-align:left;padding:0 18px;font-weight:850;display:flex;align-items:center;gap:14px}
.recognition-btn span{font-size:20px}
.recognition-btn.know{border:1px solid var(--green)}
.recognition-btn.familiar{border:1px solid var(--amber)}
.recognition-btn.unknown{border:1px solid var(--red)}
.micro{font-size:12px;line-height:1.4;color:#8f96a6;text-align:center;margin:0}
.achievement-mark{width:108px;height:108px;margin:6px auto 0;border-radius:30px;display:grid;place-items:center;font-size:54px;background:linear-gradient(145deg,#b653ff,#4c167d);box-shadow:0 0 0 1px rgba(226,174,255,.25),0 0 46px rgba(151,63,255,.35);transform:rotate(45deg)}
.achievement-mark::first-letter{transform:rotate(-45deg)}
.achievement-mark--gold{background:linear-gradient(145deg,#ffe16b,#e79816);color:#3b2600;box-shadow:0 0 50px rgba(255,190,42,.32)}
.baseline-title,.selection-title,.mission-title{font-size:38px;line-height:1.03;letter-spacing:-.035em;margin:0}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.summary-card{padding:18px 8px;border-radius:15px;background:rgba(7,11,18,.78);border:1px solid rgba(255,255,255,.13);display:grid;gap:5px}
.summary-card strong{font-size:30px}
.summary-card span{font-size:12px;color:#9da3b0}
.summary-card--green{box-shadow:inset 0 0 0 1px rgba(56,217,150,.22)}
.summary-card--amber{box-shadow:inset 0 0 0 1px rgba(255,198,65,.20)}
.summary-card--red{box-shadow:inset 0 0 0 1px rgba(255,83,99,.20)}
.message-panel,.notice-panel{padding:17px;border:1px solid rgba(188,82,255,.42);border-radius:16px;background:rgba(20,11,31,.82);color:#d5d8e0;line-height:1.5}
.main-btn{width:100%;min-height:58px;border:0;border-radius:15px;font-weight:950;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:14px}
.main-btn--purple{background:linear-gradient(#a44dff,#7228e8);color:#fff;box-shadow:0 12px 28px rgba(122,44,232,.24)}
.main-btn--gold{background:linear-gradient(#ffe15e,#ffba13);color:#171109;box-shadow:0 12px 30px rgba(255,186,19,.22)}
.lead-copy{font-size:17px;line-height:1.5;color:#c9ced8;margin:0}
.poem-choice-list{display:grid;gap:10px}
.poem-choice{min-height:64px;border-radius:15px;border:1px solid rgba(180,82,255,.38);background:rgba(7,11,18,.82);color:#fff;padding:10px 14px;text-align:left;display:grid;grid-template-columns:1fr auto;align-items:center}
.poem-choice strong{display:block;font-size:17px}
.poem-choice small{display:block;color:#9ba2b0;margin-top:4px}
.poem-choice--available{border-color:rgba(255,201,59,.62);box-shadow:0 0 25px rgba(255,191,35,.10)}
.spacer{flex:1}
.mission-screen{background:#070a10}
.mission-backdrop{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.88}
.mission-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,12,.40),rgba(4,7,12,.92))}
.mission-backdrop--desert{background-image:linear-gradient(180deg,#f5a83c 0,#bd5c24 45%,#392319 45%,#0a0b10 100%)}
.mission-backdrop--quiz{background-image:radial-gradient(circle at 70% 20%,rgba(205,103,37,.42),transparent 28%),linear-gradient(180deg,#241916,#080b11 55%,#04060a)}
.mission-backdrop--results{background-image:radial-gradient(circle at 50% 20%,rgba(130,48,219,.36),transparent 30%),linear-gradient(180deg,#181026,#060810 60%)}
.video-frame{border:1px solid rgba(255,255,255,.15);border-radius:18px;overflow:hidden;background:#000;box-shadow:0 20px 42px rgba(0,0,0,.34)}
.video-frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.notice-panel{display:flex;gap:12px;text-align:left}
.notice-panel span{font-size:26px}
.notice-panel p{margin:4px 0 0;color:#aeb4c0}
.difficulty-pill{align-self:flex-start;padding:8px 10px;border-radius:999px;background:rgba(145,69,255,.16);border:1px solid rgba(181,86,255,.38);font-size:11px;font-weight:900;letter-spacing:.08em;color:#d391ff}
.quiz-card{padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:rgba(7,11,18,.88);box-shadow:0 18px 42px rgba(0,0,0,.28)}
.quiz-prompt{font-size:24px;font-weight:900;line-height:1.18;margin-bottom:17px}
.quiz-options{display:grid;gap:10px}
.quiz-option{min-height:58px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:#0d131d;color:#fff;text-align:left;padding:13px 15px;line-height:1.35}
.quiz-option:hover,.quiz-option:focus{border-color:#aa53ff}
.quiz-option.is-correct{border-color:var(--green);background:rgba(29,119,82,.23)}
.quiz-option.is-wrong{border-color:var(--red);background:rgba(122,31,42,.23)}
.quiz-option:disabled{cursor:default}
.feedback-panel{padding:16px;border:1px solid rgba(178,82,255,.34);border-radius:18px;background:rgba(13,10,20,.93)}
.feedback-heading{font-size:20px;font-weight:900;margin-bottom:7px}
.feedback-text{font-size:15px;line-height:1.5;color:#cbd0d9;margin-bottom:14px}
.result-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.result-panel div{padding:18px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.13);background:rgba(7,11,18,.82);display:grid}
.result-panel strong{font-size:34px}
.result-panel span{font-size:12px;color:#9ca3b1}
.xp-earned{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;border:1px solid rgba(255,208,64,.40);background:rgba(55,38,8,.52);text-align:left}
.xp-earned>span{font-size:30px}
.xp-earned strong{font-size:22px;display:block;color:#ffd84c}
.xp-earned small{color:#b7bdc8}
.text-btn{border:0;background:transparent;color:#b9bfcb;padding:10px;font-weight:800}
@media(min-width:700px){
  body{padding:22px}
  .app-shell{border:1px solid #22283a;border-radius:28px;box-shadow:0 40px 110px rgba(0,0,0,.55)}
}

/* v0.2.1 Ozymandias mission artwork + poet FAQ */
.mission-backdrop--desert{background-image:url('/assets/images/screens/LOS_Screen-09.png');}
.mission-backdrop--quiz{background-image:url('/assets/images/screens/LOS_Screen-11.png');}
.mission-backdrop--results{background-image:url('/assets/images/screens/LOS_Screen-14.png');}
.mission-backdrop--poet{background-image:url('/assets/images/screens/LOS_Screen-12.png');opacity:.45;}
.poet-hero{height:310px;border-radius:20px;background:url('/assets/images/screens/Poet-01.png') center 25%/cover no-repeat;border:1px solid rgba(255,255,255,.15);box-shadow:0 20px 44px rgba(0,0,0,.35)}
.faq-list{display:grid;gap:10px}
.faq-list details{border:1px solid rgba(180,82,255,.34);border-radius:15px;background:rgba(7,11,18,.88);overflow:hidden}
.faq-list summary{cursor:pointer;padding:15px 16px;font-weight:850;line-height:1.3;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';float:right;color:#c86cff;font-size:20px}
.faq-list details[open] summary:after{content:'−'}
.faq-list p{margin:0;padding:0 16px 16px;color:#c7ccd6;line-height:1.55;font-size:15px}


/* v0.2.4 screen-by-screen learner guidance */
.journey-guide{padding:13px 15px;border-radius:15px;border:1px solid rgba(255,216,77,.34);background:rgba(7,11,18,.86);display:grid;gap:4px;text-align:left;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.journey-guide strong{font-size:13px;letter-spacing:.05em;color:#ffd84d;text-transform:uppercase}
.journey-guide span{font-size:14px;line-height:1.45;color:#d5d9e2}
.visual-instruction--welcome{bottom:98px}
.home-float{display:none}
.app-shell:has(.screen[data-screen="2"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="3"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="4"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="5"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="6"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="7"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="8"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="9"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="10"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="11"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="12"].screen--active) .home-float{display:grid}



/* =========================================================
   Learning OS v0.2.6 — Action Panels
   One clear rule for visual decision screens:
   what this screen is + what to do + one obvious action.
   ========================================================= */

.home-float{
  position:absolute;
  z-index:50;
  top:18px;
  right:18px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(5,8,14,.86);
  color:#fff;
  font-size:23px;
  display:none;
  place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}

.app-shell:has(.screen[data-screen="2"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="3"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="4"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="5"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="6"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="7"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="8"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="9"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="10"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="11"].screen--active) .home-float,
.app-shell:has(.screen[data-screen="12"].screen--active) .home-float{
  display:grid;
}

.action-panel{
  position:absolute;
  z-index:20;
  left:7%;
  right:7%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  padding:17px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(7,9,17,.84),rgba(5,7,14,.94));
  box-shadow:0 18px 46px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-align:left;
}

.action-panel--welcome{
  bottom:calc(28px + env(safe-area-inset-bottom));
}

.action-panel--decision{
  top:12%;
  bottom:auto;
}

.action-panel--low{
  bottom:calc(28px + env(safe-area-inset-bottom));
}

.action-panel__eyebrow{
  margin-bottom:6px;
  color:#d75cff;
  font-size:12px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.action-panel__title{
  margin-bottom:7px;
  color:#fff;
  font-size:clamp(22px,5vw,30px);
  line-height:1.06;
  font-weight:950;
}

.action-panel__text{
  color:#d6d9e2;
  font-size:15px;
  line-height:1.45;
  max-width:42ch;
}

.action-panel__button{
  width:100%;
  min-height:58px;
  margin-top:14px;
  padding:13px 18px;
  border:0;
  border-radius:15px;
  background:linear-gradient(#ffe15e,#ffba13);
  color:#171109;
  font-size:16px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.025em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  box-shadow:0 12px 28px rgba(255,186,19,.22);
  cursor:pointer;
}

.action-panel__button--purple{
  background:linear-gradient(135deg,#b742ff,#7623ef);
  color:#fff;
  box-shadow:0 12px 28px rgba(144,47,255,.24);
}

/* The whole artwork can still be tapped, but the visible action is never hidden. */
.screen[data-screen="1"] .hotspot,
.screen[data-screen="2"] .hotspot,
.screen[data-screen="3"] .hotspot,
.screen[data-screen="4"] .hotspot{
  z-index:4;
}

/* Do not allow legacy floating controls to compete with the v0.2.6 panels. */
.screen[data-screen="1"] > .floating-cta,
.screen[data-screen="2"] > .floating-cta,
.screen[data-screen="3"] > .floating-cta,
.screen[data-screen="4"] > .floating-cta,
.screen[data-screen="1"] > .visual-instruction,
.screen[data-screen="2"] > .screen-caption,
.screen[data-screen="3"] > .screen-caption,
.screen[data-screen="4"] > .visual-instruction{
  display:none !important;
}

@media (max-height:760px){
  .action-panel{
    padding:13px 14px;
    border-radius:16px;
  }
  .action-panel--decision{
    top:10%;
  }
  .action-panel__title{
    font-size:21px;
  }
  .action-panel__text{
    font-size:14px;
  }
  .action-panel__button{
    min-height:52px;
    margin-top:10px;
    font-size:14px;
  }
}

@media (max-width:390px){
  .action-panel{
    left:5%;
    right:5%;
  }
}

/* =========================================================
   Learning OS v0.3.0 — Foundation Flow
   Screens 1–7 rebuilt around function rather than artwork.
   ========================================================= */

.welcome-card{position:absolute;z-index:20;left:7%;right:7%;top:10%;max-width:520px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(7,9,17,.76),rgba(5,7,14,.88));backdrop-filter:blur(10px);box-shadow:0 18px 46px rgba(0,0,0,.28)}
.welcome-card .action-panel__button{max-width:310px}

.subject-title-card{position:absolute;z-index:20;left:7%;right:7%;top:8%;padding:14px 16px;border-radius:18px;background:rgba(5,7,14,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.subject-map{position:absolute;z-index:21;inset:0;pointer-events:none}
.subject-node{position:absolute;pointer-events:auto;min-width:132px;max-width:180px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.25);background:rgba(5,8,15,.84);color:#fff;text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.subject-node strong{display:block;font-size:14px;line-height:1.1}.subject-node span{display:block;margin-top:4px;font-size:10px;color:#c7cbd6}.subject-node.is-live{border-color:#b64cff;box-shadow:0 0 22px rgba(176,72,255,.34)}
.subject-node--english{top:31%;left:50%;transform:translateX(-50%)}
.subject-node--maths{top:47%;left:5%}.subject-node--science{top:47%;right:5%}
.subject-node--history{top:63%;left:5%}.subject-node--re{top:63%;right:5%}
.subject-node--classics{top:78%;left:5%}.subject-node--care{top:78%;right:5%}
.route-notice{position:absolute;z-index:30;left:9%;right:9%;bottom:4%;padding:12px 14px;border-radius:14px;background:rgba(5,8,15,.94);border:1px solid rgba(255,255,255,.2);color:#fff;text-align:center;font-weight:700}

.literature-title-card{position:absolute;z-index:20;left:7%;right:7%;top:11%;max-width:520px;padding:14px 16px;border-radius:18px;background:rgba(5,7,14,.76);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.literature-routes{position:absolute;z-index:20;left:7%;right:7%;bottom:5%;display:grid;gap:10px}
.literature-route{padding:15px 16px;border-radius:18px;background:rgba(5,8,15,.9);border:1px solid rgba(255,255,255,.16);color:#fff;text-align:left;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.literature-route strong{font-size:18px}.literature-route span{grid-column:1;color:#b9beca;font-size:12px}.literature-route b{grid-column:2;grid-row:1 / span 2;font-size:11px;color:#d25cff}.literature-route.is-live{border-color:#a94cff;box-shadow:0 0 22px rgba(157,53,255,.22)}.literature-route.is-locked{opacity:.66}

.poetry-intro-card{position:absolute;z-index:20;left:6%;width:54%;top:12%;padding:15px 16px;border-radius:18px;background:rgba(5,7,14,.80);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.poetry-intro-card .action-panel__title{font-size:clamp(21px,4.8vw,29px)}.poetry-intro-card .action-panel__button{margin-top:12px;min-height:52px;font-size:14px}

.anthology-content{padding-bottom:135px}.anthology-hero{padding:4px 2px 12px}.poem-overview{display:grid;gap:9px}
.poem-overview-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"num main listen" "num marks listen";gap:8px 10px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(5,8,15,.86)}
.poem-overview-row.is-live{border-color:rgba(255,194,33,.6)}.poem-overview-number{grid-area:num;font-size:12px;color:#8f96a6}.poem-overview-main{grid-area:main;min-width:0}.poem-overview-main strong{display:block;font-size:15px;line-height:1.15}.poem-status{display:block;margin-top:3px;font-size:11px;color:#aab0bd}
.poem-recognition-group{grid-area:marks;display:flex;gap:6px;flex-wrap:wrap}.poem-recognition-group button{min-width:58px;padding:7px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#0d131d;color:#fff;font-weight:900}.poem-recognition-group button small{display:block;font-size:8px;font-weight:700;color:#aeb4c0}.poem-recognition-group button.is-selected{border-color:#b64cff;background:rgba(133,42,210,.28);box-shadow:0 0 12px rgba(166,67,255,.2)}
.listen-link{grid-area:listen;align-self:stretch;min-width:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;border-radius:12px;border:1px solid rgba(255,198,44,.32);background:rgba(255,190,25,.08);color:#ffd24b;text-decoration:none;font-weight:900;font-size:14px}.listen-link span{font-size:9px}
.sticky-action{position:sticky;bottom:0;z-index:25;margin-top:16px;padding:12px;border-radius:18px;background:rgba(4,7,12,.95);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px)}.recognition-summary{text-align:center;color:#c7ccd7;font-size:12px;margin-bottom:8px}.sticky-action .main-btn{margin:0}

.progress-content{padding-bottom:32px}.poem-progress-list{display:grid;gap:10px;margin:12px 0 18px}.poem-progress-row{padding:12px 13px;border-radius:15px;border:1px solid rgba(255,255,255,.13);background:rgba(5,8,15,.86)}.poem-progress-row.is-live{border-color:#b64cff;cursor:pointer;box-shadow:0 0 20px rgba(166,67,255,.14)}.poem-progress-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.poem-progress-head strong{font-size:14px}.poem-progress-head span{font-size:12px;color:#d65cff;font-weight:900}.poem-progress-track{height:7px;margin:9px 0;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}.poem-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7f2cff,#d15dff)}.poem-progress-meta{display:flex;gap:8px;flex-wrap:wrap;color:#aeb5c2;font-size:9px}.poem-progress-meta span{padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.06)}

.mission-overview-screen{background-image:var(--bg);background-size:cover;background-position:center;overflow:hidden}.mission-overview-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,11,.35),rgba(4,6,11,.93))}.mission-overview-content{position:relative;z-index:3}.mission-overview-title{font-size:44px;line-height:1;margin:0 0 8px}.mission-checklist{display:grid;gap:8px;margin:14px 0}.mission-checklist>div{display:grid;grid-template-columns:36px 1fr;gap:1px 10px;padding:10px 12px;border-radius:14px;background:rgba(5,8,15,.84);border:1px solid rgba(255,255,255,.12)}.mission-checklist>div>span{grid-row:1 / span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(168,66,255,.2);border:1px solid rgba(182,76,255,.55);font-weight:900;color:#df8bff}.mission-checklist strong{font-size:14px}.mission-checklist small{color:#abb2bf;line-height:1.3}.mission-note{padding:11px 13px;margin:10px 0 14px;border-radius:14px;background:rgba(255,191,25,.08);border:1px solid rgba(255,195,35,.32);color:#d9dce3;font-size:12px;line-height:1.4}

@media (max-width:420px){.subject-node{min-width:112px;max-width:148px;padding:8px 9px}.subject-node strong{font-size:12px}.poetry-intro-card{width:60%}.poem-overview-row{grid-template-columns:28px minmax(0,1fr) 58px}.poem-recognition-group button{min-width:50px;padding:6px}.mission-overview-title{font-size:38px}}
@media (max-height:760px){.subject-title-card{top:7%}.subject-node--english{top:28%}.subject-node--maths,.subject-node--science{top:43%}.subject-node--history,.subject-node--re{top:58%}.subject-node--classics,.subject-node--care{top:72%}.mission-checklist{gap:5px}.mission-checklist>div{padding:7px 9px}.mission-note{font-size:11px}}


/* =========================================================
   Learning OS v0.3.1 — Poem Carousel
   ========================================================= */

.screen--poem-dashboard{
  position:relative;
  overflow:hidden;
}

.screen--poem-dashboard .screen-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.96;
}

.poem-dashboard-shell{
  position:relative;
  z-index:8;
  min-height:100%;
  padding:28px 28px 34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg,rgba(3,6,13,.28),rgba(3,6,13,.08) 34%,rgba(3,6,13,.22));
}

.poem-dashboard-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:12px 10px 0;
}

.poem-dashboard-head h1{
  margin:4px 0 8px;
  color:#fff;
  font-size:clamp(30px,7vw,48px);
  line-height:1.02;
}

.poem-dashboard-head p{
  margin:0;
  max-width:38ch;
  color:#e7e9ef;
  font-size:16px;
  line-height:1.45;
}

.home-mini{
  width:48px;
  height:48px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(5,8,14,.84);
  color:#fff;
  font-size:22px;
  display:grid;
  place-items:center;
}

.poem-carousel{
  margin-top:auto;
  margin-bottom:16px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(7,9,17,.82);
  box-shadow:0 20px 48px rgba(0,0,0,.34);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.poem-carousel__viewport{
  overflow:hidden;
}

.poem-carousel__track{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.poem-card{
  min-height:230px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(8,12,21,.95),rgba(7,9,16,.88));
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

.poem-card__index{
  font-size:11px;
  letter-spacing:.12em;
  color:#9ca4b5;
}

.poem-card__title{
  color:#fff;
  font-size:18px;
  line-height:1.15;
  font-weight:900;
}

.poem-card__status{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:auto;
}

.poem-state{
  min-height:52px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#0e1520;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.poem-state.is-selected[data-state="know"]{
  border-color:#30dc83;
  background:rgba(19,104,62,.34);
}

.poem-state.is-selected[data-state="familiar"]{
  border-color:#ffbf2d;
  background:rgba(122,83,8,.34);
}

.poem-state.is-selected[data-state="new"]{
  border-color:#ff5c6c;
  background:rgba(125,24,38,.32);
}

.poem-listen{
  min-height:46px;
  border-radius:12px;
  border:1px solid rgba(255,204,42,.45);
  background:rgba(43,34,7,.72);
  color:#ffd13d;
  font-size:13px;
  font-weight:900;
}

.poem-carousel__nav{
  margin-top:14px;
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:center;
  gap:10px;
}

.poem-nav{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:#0b111a;
  color:#fff;
  font-size:30px;
  line-height:1;
}

.poem-nav:disabled{
  opacity:.3;
}

.poem-carousel__count{
  text-align:center;
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
}

.poem-carousel__hint{
  margin-top:7px;
  text-align:center;
  color:#aeb5c3;
  font-size:12px;
}

.poem-progress-cta{
  min-height:58px;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,#ae43ff,#7224ee);
  color:#fff;
  font-weight:950;
  font-size:16px;
}

.listen-modal[hidden]{
  display:none;
}

.listen-modal{
  position:absolute;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:20px;
}

.listen-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}

.listen-modal__panel{
  position:relative;
  z-index:2;
  width:min(100%,620px);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background:#070b12;
  padding:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.52);
}

.listen-modal__top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}

.listen-modal__title{
  color:#fff;
  font-size:24px;
  font-weight:950;
}

.listen-modal__close{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:#111823;
  color:#fff;
  font-size:28px;
}

.listen-modal__video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:15px;
  background:#000;
}

.listen-modal__video iframe{
  width:100%;
  height:100%;
  border:0;
}

.listen-modal__note{
  margin:12px 2px 0;
  color:#cfd3dc;
  font-size:13px;
}

@media (max-width:760px){
  .poem-dashboard-shell{
    padding:20px 16px 24px;
  }
  .poem-carousel{
    padding:14px;
  }
  .poem-carousel__track{
    grid-template-columns:1fr;
  }
  .poem-card{
    min-height:auto;
  }
  .poem-card__status{
    grid-template-columns:repeat(3,1fr);
  }
}


/* =========================================================
   Learning OS v0.3.2 — mobile poem dashboard refinement
   ========================================================= */

/* One Home control only: the global top-right Home button. */
.screen--poem-dashboard .home-mini{display:none}

/* Keep the lighthouse and learner visible instead of covering the image. */
.poem-dashboard-shell{
  justify-content:flex-start;
  padding:22px 24px 26px;
  background:linear-gradient(180deg,rgba(3,6,13,.22),rgba(3,6,13,.02) 34%,rgba(3,6,13,.16));
}
.poem-dashboard-head{
  max-width:72%;
  padding:14px 10px 0;
}
.poem-dashboard-head h1{
  font-size:clamp(30px,6.2vw,44px);
}
.poem-carousel{
  margin-top:auto;
  margin-bottom:12px;
  padding:14px;
  border-radius:22px;
  background:rgba(7,9,17,.76);
}
.poem-card{
  min-height:198px;
  padding:13px;
  gap:8px;
}
.poem-card__title{
  font-size:16px;
  min-height:38px;
}
.poem-card__status{
  gap:5px;
}
.poem-state{
  min-height:43px;
  padding:5px 3px;
  font-size:10px;
}
.poem-listen{
  min-height:40px;
  font-size:12px;
}
.poem-carousel__nav{
  margin-top:10px;
}
.poem-carousel__hint{
  margin-top:4px;
}
.poem-progress-cta{
  min-height:52px;
}

/* Progress rows now visibly communicate the action. */
.poem-progress-row{
  position:relative;
  padding-right:92px;
}
.poem-progress-open{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  color:#8e96a6;
}
.poem-progress-row.is-live .poem-progress-open{
  color:#dc75ff;
}
.poem-progress-row.is-live:hover,
.poem-progress-row.is-live:focus{
  border-color:#d15dff;
  background:rgba(18,10,28,.92);
}

/* Phone: three compact poems remain visible together. */
@media (max-width:760px){
  .poem-dashboard-shell{
    padding:14px 12px 16px;
  }
  .poem-dashboard-head{
    max-width:86%;
    padding:4px 32px 0 8px;
  }
  .poem-dashboard-head h1{
    margin:2px 0 5px;
    font-size:28px;
  }
  .poem-dashboard-head p{
    font-size:13px;
    line-height:1.35;
  }
  .poem-carousel{
    margin-top:12px;
    padding:10px;
    border-radius:18px;
  }
  .poem-carousel__track{
    grid-template-columns:1fr;
    gap:7px;
  }
  .poem-card{
    min-height:0;
    padding:10px 11px;
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    grid-template-areas:
      "index title"
      "status status"
      "listen listen";
    gap:7px 8px;
  }
  .poem-card__index{
    grid-area:index;
    align-self:center;
  }
  .poem-card__title{
    grid-area:title;
    min-height:0;
    font-size:15px;
    align-self:center;
  }
  .poem-card__status{
    grid-area:status;
    margin-top:0;
  }
  .poem-state{
    min-height:36px;
    font-size:10px;
  }
  .poem-listen{
    grid-area:listen;
    min-height:34px;
    font-size:11px;
  }
  .poem-carousel__nav{
    grid-template-columns:38px 1fr 38px;
    margin-top:8px;
  }
  .poem-nav{
    width:38px;
    height:38px;
    font-size:24px;
  }
  .poem-carousel__count{
    font-size:12px;
  }
  .poem-carousel__hint{
    font-size:10px;
  }
  .poem-progress-cta{
    min-height:48px;
    font-size:13px;
  }
  .poem-progress-row{
    padding-right:84px;
  }
  .poem-progress-open{
    right:10px;
    font-size:9px;
  }
}

@media (max-height:760px) and (max-width:760px){
  .poem-dashboard-head h1{font-size:24px}
  .poem-dashboard-head p{font-size:12px}
  .poem-card{padding:7px 9px;gap:5px}
  .poem-state{min-height:31px}
  .poem-listen{min-height:30px}
  .poem-carousel__hint{display:none}
  .poem-progress-cta{min-height:44px}
}

/* Learning OS v0.3.3 — world-first first-quiz flow */
.action-panel--welcome{left:8%;right:auto;width:min(500px,56%);top:10%;bottom:auto;background:rgba(7,9,17,.68)}
.poem-dashboard-head{max-width:54%}
.poem-carousel{width:min(720px,74%);margin-left:auto;margin-right:auto;padding:9px 11px;background:rgba(7,9,17,.48);border-color:rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.poem-carousel__track{gap:7px}
.poem-card{min-height:0;padding:8px 9px;gap:5px;background:rgba(7,10,17,.62);transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.poem-card:hover{transform:scale(1.025);background:rgba(8,12,21,.86);box-shadow:0 0 24px rgba(180,60,255,.18)}
.poem-card__title-row{display:flex;align-items:center;justify-content:space-between;gap:7px}
.poem-card__title{min-height:0;font-size:14px}
.first-mission-chip{border:1px solid rgba(220,105,255,.5);border-radius:999px;background:rgba(96,28,132,.48);color:#f2c8ff;padding:5px 7px;font-size:8px;font-weight:950;white-space:nowrap;transition:.16s}
.first-mission-chip:hover,.first-mission-chip:focus{transform:scale(1.1);box-shadow:0 0 18px rgba(203,79,255,.38)}
.poem-card__status{gap:4px}
.poem-state{min-height:29px;padding:3px 4px;border-radius:8px;font-size:8px;transition:.16s}
.poem-state:hover,.poem-state:focus{transform:scale(1.1);box-shadow:0 0 15px rgba(255,255,255,.12)}
.poem-state.is-selected{transform:scale(1.06)}
.poem-listen{min-height:28px;border-radius:8px;font-size:9px;transition:.16s}
.poem-listen:hover,.poem-listen:focus{transform:scale(1.06);box-shadow:0 0 16px rgba(255,209,61,.25)}
.poem-carousel__nav{margin-top:5px}.poem-nav{width:32px;height:32px;font-size:20px;transition:.16s}
.poem-nav:hover,.poem-nav:focus{transform:scale(1.16);box-shadow:0 0 18px rgba(194,76,255,.3)}
.poem-carousel__hint{display:none}
.poem-progress-cta{width:min(720px,74%);margin:0 auto;min-height:42px;font-size:11px;background:rgba(88,28,142,.72)}
.listen-modal{align-items:end;padding:16px}.listen-modal__backdrop{background:rgba(0,0,0,.34)}
.listen-modal__panel{width:min(680px,90%);padding:11px;background:rgba(6,9,15,.88)}
.listen-modal__video{max-height:30vh}
@media(max-width:760px){
.action-panel--welcome{left:5%;right:5%;width:auto;top:7%}
.poem-dashboard-head{max-width:76%}.poem-dashboard-head h1{font-size:24px}
.poem-carousel{width:90%;padding:7px}.poem-card{padding:6px 7px;gap:4px}
.poem-card__title{font-size:12px}.poem-state{min-height:27px;font-size:8px}.poem-listen{min-height:26px;font-size:8px}
.poem-progress-cta{width:90%;min-height:40px}
}