/* Story screens follow their available content width, including a narrow
   app panel on a wide monitor. Other app sections retain their own width. */
.app.is-story-open{max-width:1040px;min-width:0}
.story-page{
  --mint:#a5ecdb;
  container:lumira-story / inline-size;
  width:100%;min-width:0;margin:0 auto;padding:12px 0 32px;
  color:#edf4ff;text-align:start;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.6;word-break:normal;overflow-wrap:normal;
}
.story-page *{box-sizing:border-box;min-width:0}
.story-page button,.story-page select{font-family:inherit}
.story-page button{cursor:pointer;touch-action:manipulation}
.story-page button:disabled{opacity:.48;cursor:default}
.story-page :focus-visible{outline:3px solid #c1f1e3;outline-offset:4px}
.story-page [hidden]{display:none!important}
.story-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px}
.story-back,.story-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;max-width:100%;padding:8px 0;
  border:0;background:transparent;color:#b9dfd7;
  font-size:13px;line-height:1.6;white-space:normal;text-align:start;
}
.story-eyebrow{font-size:10px;line-height:1.7;letter-spacing:.14em;color:var(--mint);font-weight:750}
.story-page:lang(ar) .story-eyebrow{letter-spacing:0}
.story-hero{
  position:relative;margin-bottom:20px;padding:24px 20px;
  border:1px solid #395166;border-radius:24px;
  background:radial-gradient(ellipse at 100% 0,#23636655,transparent 65%),#131e2f;
}
.story-hero>.story-eyebrow{display:block;padding-inline-end:48px}
.story-hero h1{
  max-width:28ch;margin:12px 0;font-size:26px;line-height:1.3;
  font-weight:750;letter-spacing:-.025em;text-wrap:balance;
}
.story-hero p{max-width:65ch;margin:0;font-size:14px;line-height:1.8;color:#bfccdf}
.story-butterfly{position:absolute;inset-inline-end:20px;top:22px;display:inline-flex;width:34px;height:28px}
.story-butterfly svg{width:100%;height:100%}
.story-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:20px}
.story-panel{padding:20px;background:#111a2b;border:1px solid #293b50;border-radius:22px}
.story-label{display:block;margin:28px 0 12px;font-size:15px;font-weight:700;line-height:1.6;letter-spacing:0}
.story-label:first-child{margin-top:0}
.story-select{
  display:block;width:100%;max-width:100%;min-height:50px;padding:12px 36px 12px 14px;
  border:1px solid #42506a;border-radius:13px;background:#1b253a;color:#edf4ff;
  font-size:15px;line-height:1.5;
}
.story-page[dir=rtl] .story-select{padding:12px 14px 12px 36px}
.story-choices{
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:stretch;gap:10px;
}
.story-page .story-choice{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:80px;width:100%;padding:12px 8px;
  border:1px solid #3d4b65;border-radius:14px;background:#182236;color:#c9d5e6;
  font-size:13px;font-weight:550;line-height:1.55;text-align:center;
  white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:none;
}
.story-choice span{display:block;width:100%;max-width:100%;line-height:1.55}
.story-choice[aria-pressed=true]{background:#1d3b40;border-color:#8cddc9;color:#e2fff5;box-shadow:inset 0 0 0 1px #8cddc933}
.story-choice i{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:26px;font-style:normal;font-size:22px;line-height:1}
.story-choice i svg{display:block;width:25px;height:25px}
.story-page .story-four .story-choice{min-height:64px;font-size:13px}
.story-help{margin:12px 0;color:#aebdd2;font-size:13px;line-height:1.8}
.story-primary{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;margin-top:18px;padding:14px 18px;
  border:0;border-radius:14px;background:var(--mint);color:#102830;
  font-size:15px;font-weight:750;line-height:1.5;white-space:normal;
}
.story-pool{margin:20px 0 0;padding:12px 14px;border:1px solid #376b60;border-radius:13px;background:#14332f;color:#c0f5df;font-size:13px;line-height:1.7}
.story-alert{margin:16px 0;padding:14px;border:1px solid #72513a;border-radius:13px;background:#3a2920;color:#f3cfb4;font-size:13px;line-height:1.8}
.story-preview{order:-1;align-self:start;padding:12px}
.story-art{
  position:relative;display:grid;place-items:center;min-height:170px;overflow:hidden;
  border:1px solid #ffffff21;border-radius:17px;
  background:linear-gradient(145deg,#456385,#1c3849 70%,#2d6960);
}
.story-art::before{content:'';position:absolute;top:-40px;inset-inline-end:-20px;width:160px;height:160px;border-radius:50%;background:#d7e9d61c}
.story-art[data-style=anime]{background:linear-gradient(145deg,#806ba6,#446e89,#73a69c)}
.story-art[data-style=dream]{background:radial-gradient(ellipse at 60% 20%,#8b7ba6,#31465f 65%)}
.story-art[data-style=fantasy]{background:linear-gradient(125deg,#325a55,#263357 60%,#6c5382)}
.story-art[data-style=minimal]{background:#213b43}
.story-art[data-style=watercolor]{background:radial-gradient(ellipse at 20% 30%,#b1c5b8,#729bae 60%,#8b89a5)}
.story-art svg{position:relative;width:100%;max-width:270px;height:165px}
.story-art small{position:absolute;bottom:10px;inset-inline-start:10px;max-width:calc(100% - 20px);padding:5px 10px;border:1px solid #bfe4dd44;border-radius:20px;background:#0b1d29e6;color:#ddf5ec;font-size:11px;line-height:1.5}
.story-preview-note{display:none;margin:14px 0 4px;color:#b8cada;font-size:13px;line-height:1.7;text-align:center}
.story-history{margin-top:30px}
.story-history h2{margin:0 0 14px;font-size:19px;line-height:1.5}
.story-history-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.story-history-grid button{min-height:130px;padding:18px;border:1px solid #3d4b65;border-radius:17px;background:#141e31;color:#eef6ff;text-align:start;font-size:14px;line-height:1.6;overflow-wrap:break-word}
.story-history-grid strong{display:block;margin:8px 0;font-size:15px;font-weight:650;line-height:1.5}
.story-history-grid small{color:#afbed3;font-size:12px;line-height:1.6}
.story-reading-head{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:20px;margin-bottom:20px}
.story-reading-head h1{margin:8px 0;font-size:28px;line-height:1.4;text-wrap:balance;overflow-wrap:break-word}
.story-meta{margin:10px 0;color:#b8cce0;font-size:13px;line-height:1.9}
.story-reader{margin-top:22px;padding:12px;border:1px solid #344b60;border-radius:22px;background:#111a2b;font-size:18px;line-height:2}
.story-sentence{margin-bottom:10px;padding:14px 10px;border:1px solid transparent;border-radius:13px;scroll-margin-top:90px;overflow-wrap:break-word}
.story-sentence.is-speaking{background:#1d3738;border-color:#589a88}
.story-word{display:inline;max-width:100%;padding:0 1px;border:0;border-radius:4px;background:transparent;color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:underline;text-decoration-color:#a5ecdb40;text-underline-offset:5px;vertical-align:baseline;white-space:normal;word-break:normal;overflow-wrap:break-word}
.story-word:hover{background:#a5ecdb18}
.story-translation{margin:12px 0 0;padding-inline-start:14px;border-inline-start:2px solid #8bd6be;color:#b5c9df;font-size:15px;line-height:1.9;overflow-wrap:break-word}
.story-sentence-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 20px;margin-top:8px}
.story-sentence-actions button{min-height:44px;padding:8px 0;border:0;background:transparent;color:#a8e8d5;font-size:13px;line-height:1.6;white-space:normal;text-align:start}
.story-word-popup{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px;background:#020714d9;overflow:auto}
.story-word-card{box-sizing:border-box;width:min(380px,100%);max-height:calc(100dvh - 40px);padding:26px;border:1px solid #4a6678;border-radius:22px;background:#162335;color:#f0f6ff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.7;text-align:center;overflow:auto}
.story-word-card h2{margin:12px 0;line-height:1.5;overflow-wrap:break-word}
.story-word-card p{color:#b8cbdc;line-height:1.8;overflow-wrap:break-word}
.story-word-card button{font-family:inherit}
.story-word-card{position:relative;padding-top:44px}.story-word-favorite{position:absolute;top:12px;inset-inline-end:14px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #d8bd6555;border-radius:14px;background:#d9ac2f12;color:#ffdc7a;font-size:28px;line-height:1;cursor:pointer}.story-word-favorite[aria-pressed=true]{background:#8d6c2640;border-color:#ffe6a0}.story-word-favorite:disabled{opacity:.4}.story-word-meaning{font-size:18px;font-weight:600}
.story-loading{display:grid;place-content:center;min-height:280px;padding:32px;text-align:center}
.story-loading>span{font-size:52px;line-height:1}
.story-loading>span svg{width:72px;height:54px}
@container lumira-story (min-width:580px){
  .story-hero{padding:30px}
  .story-hero h1{font-size:34px}
  .story-butterfly{inset-inline-end:28px;top:28px;width:44px;height:34px}
  .story-panel{padding:26px}
  .story-preview{padding:14px}
  .story-art{min-height:210px}
  .story-art svg{height:200px}
  .story-reading-head{grid-template-columns:minmax(210px,.75fr) minmax(0,1.25fr);gap:28px}
  .story-reader{padding:24px;font-size:20px}
  .story-sentence{padding:16px}
}
@container lumira-story (min-width:800px){
  .story-layout{grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:24px}
  .story-preview{order:0;position:sticky;top:24px}
  .story-preview-note{display:block}
  .story-preview .story-art{min-height:270px}
  .story-preview .story-art svg{height:245px}
  .story-hero h1{font-size:38px}
}
@media(max-width:360px){
  .story-hero{padding:22px 18px}
  .story-hero h1{font-size:25px}
  .story-panel{padding:16px}
  .story-preview{padding:10px}
}
@media(prefers-reduced-motion:no-preference){
  .story-choice{transition:background-color .16s,border-color .16s,box-shadow .16s}
}
@media(forced-colors:active){
  .story-choice[aria-pressed=true]{outline:2px solid Highlight}
  .story-primary{border:1px solid ButtonText}
}

@container lumira-options (max-width:289px){.story-page .story-choice{flex-direction:row;min-height:56px;gap:12px}.story-choice span{width:auto}.story-page .story-four .story-choice{min-height:56px}}
/* A dismissed splash must not contribute an invisible horizontal scrollbar. */
#splash.hidden{overflow:hidden}

.story-options{container:lumira-options / inline-size}
@container lumira-options (min-width:290px){.story-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container lumira-options (min-width:480px){.story-choices:not(.story-four){grid-template-columns:repeat(3,minmax(0,1fr))}}
#splash.hidden .splash-content{box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden}

/* Match the app's cyan/violet cards while preserving the responsive layout. */
.story-page{--mint:var(--cyan-soft,#91eaff)}
.story-hero{border-color:#4fe8ff42;background:radial-gradient(ellipse at 100% 0,#7557b52e,transparent 65%),linear-gradient(135deg,#101a31ed,#10152bea)}
.story-panel{border-color:#4fe8ff30;background:linear-gradient(140deg,#11192feb,#0c1326eb);box-shadow:0 14px 34px #0002}
.story-page .story-choice{border-color:#7b91b54a;background:#141e35de;color:#cbd8ed}
.story-choice[aria-pressed=true]{border-color:#72ddef;background:linear-gradient(135deg,#21465a,#302c50);color:#e5fbff;box-shadow:inset 0 0 0 1px #4fe8ff21,0 0 14px #4fe8ff0b}
.story-primary{background:linear-gradient(100deg,#67dff3,#ae9af6);color:#07182b;box-shadow:0 6px 22px #4fe8ff16}
.story-pool{border-color:#4fe8ff3d;background:#143346a8;color:#b9effb}
.story-history-grid button{border-color:#4fe8ff34;background:#111a30e8}
.story-reader{border-color:#4fe8ff42;background:#10192fed}
.story-sentence.is-speaking{background:#24425b91;border-color:#69d3e782}
.story-word-popup .story-word-card{border-color:#4fe8ff55;background:linear-gradient(145deg,#15243a,#151b32)}
body.story-focus #fg-desk{display:none!important}

.story-method{display:inline-block;padding:5px 10px;border:1px solid #4fe8ff35;border-radius:16px;color:#bcdfef;background:#152c426e;font-size:12px;line-height:1.7}
.story-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;align-items:stretch}
.story-toolbar .story-primary{margin:0}
.story-secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:12px;padding:12px 16px;border:1px solid #7cc8e66b;border-radius:14px;background:#173049a6;color:#d1effb;font:inherit;font-size:14px;line-height:1.6;text-align:center;white-space:normal}
.story-toolbar .story-secondary{margin:0}
.story-focus-words{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.story-focus-words>.story-help{flex-basis:100%;margin-bottom:2px}
.story-focus-chip{padding:4px 10px;border:1px solid #94defb48;border-radius:12px;background:#54d9ec12;color:#bfeaf9;font-size:13px;line-height:1.6}
.story-word{text-decoration-color:#c8d4e02c;text-decoration-style:dotted}
.story-word.is-known{background:#74dff31e;color:#bef4ff;text-decoration-color:#8ee5f4;text-decoration-style:solid;font-weight:650;border-radius:5px}
.story-word:focus-visible{outline-offset:1px}
.story-popup-context{border-top:1px solid #9abfd12b;padding-top:14px;font-size:14px}
.story-quiz{margin-top:28px;padding:22px 18px;border:1px solid #97a7f267;border-radius:22px;background:linear-gradient(135deg,#19263ee8,#211c3ce8);scroll-margin-top:90px}
.story-quiz h2{margin:10px 0 16px;font-size:20px;line-height:1.6;overflow-wrap:break-word}
.story-quiz-progress{margin:8px 0;color:#b4c3dd;font-size:13px}
.story-quiz-quote{margin:0 0 18px;padding:14px;border-inline-start:3px solid #a49df0;background:#050e1e45;border-radius:8px;font-size:17px;line-height:1.9;overflow-wrap:break-word}
.story-quiz-choices{display:grid;gap:10px}
.story-page .story-quiz-choice{width:100%;min-height:52px;padding:14px 16px;border:1px solid #7f92b55e;border-radius:13px;background:#132039d9;color:#e0eafb;font-size:15px;line-height:1.7;text-align:start;white-space:normal}
.story-page .story-quiz-choice:disabled{opacity:1}
.story-quiz-choice.is-correct{border-color:#8ce2b9!important;background:#163f35!important;color:#ceffe8!important}
.story-quiz-choice.is-incorrect{border-color:#dca087!important;background:#482c2a!important;color:#ffe3d4!important}
.story-quiz-feedback{margin-top:16px;padding:16px;border:1px solid #abbbd82e;border-radius:14px;background:#0b14268a;line-height:1.8}
.story-quiz-feedback p{color:#bdcde2;font-size:14px}
.story-languages{margin-bottom:8px}
@media(max-width:360px){.story-quiz{padding:18px 13px}.story-quiz h2{font-size:18px}}

.story-art{display:block;width:100%;max-width:100%;min-height:0!important;aspect-ratio:3/2;isolation:isolate}.story-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;object-fit:cover}.story-art>small{position:absolute;bottom:14px;inset-inline-start:14px}.story-preview{overflow:hidden}

.story-style-thumb{display:block;width:100%;aspect-ratio:3/2;height:auto;border-radius:10px;object-fit:cover;margin-bottom:8px}.story-choices[data-story-choices=style] .story-choice{padding:9px;gap:5px;overflow:hidden}

.story-popup-context p{margin:.65rem 0;line-height:1.65;overflow-wrap:anywhere}.story-popup-context p:first-child{color:var(--text,#e8f1ff);font-size:.94rem}.story-word-card[aria-busy=true] .story-word-favorite{opacity:.45}

.story-art-v2{isolation:isolate;aspect-ratio:3/2;background:#111b2d}.story-art-v2::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(6,12,24,.8),transparent 45%);pointer-events:none}.story-art-v2>small{z-index:4;background:rgba(11,20,36,.82);padding:7px 12px;border:1px solid #ffffff26;border-radius:99px;max-width:calc(100% - clamp(84px,24%,132px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.story-art-v2 .story-art-symbol{position:absolute;z-index:3;inset-inline-end:14px;bottom:14px;width:clamp(45px,19%,100px);height:auto;padding:10px;box-sizing:border-box;color:var(--story-art-accent);background:#101a30e8;border:1px solid #ffffff32;border-radius:24%;pointer-events:none}.story-art-orbit{position:absolute;inset-inline-end:20px;top:14px;z-index:3;color:var(--story-art-accent);font-size:28px;line-height:1;pointer-events:none}.story-art-v2[data-style=anime]::after{background:linear-gradient(0deg,#242247aa,transparent 65%),linear-gradient(120deg,#d7b9ff22,#c5eafa15)}.story-art-v2[data-style=dream]::after{background:linear-gradient(0deg,#0e1939c9,transparent 70%),linear-gradient(110deg,#13214d55,#58428225)}.story-art-v2[data-style=fantasy]::after{background:radial-gradient(ellipse at 80% 0,#d9bbff35,transparent 70%),linear-gradient(0deg,#1d163fbb,transparent 60%)}.story-art-v2[data-style=minimal] .story-art-symbol{background:#111b2dfa;color:#d5e6ec}.story-art-v2[data-style=minimal]::after{background:linear-gradient(0deg,#071423d9,transparent 80%)}.story-art-v2[data-style=watercolor]::after{background:linear-gradient(0deg,#332738aa,transparent 70%),linear-gradient(140deg,#ffc19526,#c3f2e51c)}

.story-choice[data-story-style=anime] .story-style-thumb{filter:saturate(.7) brightness(1.08)}.story-choice[data-story-style=dream] .story-style-thumb{filter:brightness(.65) saturate(.7)}.story-choice[data-story-style=fantasy] .story-style-thumb{filter:hue-rotate(15deg) saturate(1.15)}.story-choice[data-story-style=minimal] .story-style-thumb{filter:saturate(.35)}.story-choice[data-story-style=watercolor] .story-style-thumb{filter:sepia(.2) saturate(.9)}

/* Reader preferences: text size scales the story text only; speed buttons sit beside it. */
.story-reader{font-size:calc(18px*var(--story-scale,1))}
@container lumira-story (min-width:580px){.story-reader{font-size:calc(20px*var(--story-scale,1))}}
.story-reader-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:14px 0 2px}
.story-tool-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.story-tool-label{margin-inline-end:4px;color:#b4c3dd;font-size:12.5px}
.story-page .story-tool{min-width:44px;min-height:40px;padding:6px 10px;border:1px solid #7cc8e66b;border-radius:11px;background:#173049a6;color:#d1effb;font:inherit;font-size:13px;line-height:1.4;cursor:pointer}
.story-page .story-tool[aria-pressed=true]{border-color:#72ddef;background:linear-gradient(135deg,#21465a,#302c50);color:#e5fbff;font-weight:700}
.story-page .story-tool:disabled{opacity:.45;cursor:default}
button.story-focus-chip{font:inherit;font-size:13px;cursor:pointer}
button.story-focus-chip:hover{background:#54d9ec26}
.story-focus-words>.story-focus-hint{margin:2px 0 0}
.story-word.is-flash{background:#74dff355;box-shadow:0 0 0 2px #8ee5f4}
.story-quiz-xp{margin:4px 0 12px;color:#ffe08a;font-weight:700}