/* What this is: original floating lantern and moon-seed story worlds and their readable controls for Wonder Kitties families. */
@media screen {
 .math-story-entry { margin:30px 0;padding:24px;border:1px solid var(--scene-border,var(--line));border-radius:24px;background:var(--scene-panel,var(--deep));color:var(--ice); }
 .math-story-entry h2 { margin-bottom:10px; }
 .math-story-cards { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px; }
 .math-story-card { flex-direction:column;text-align:left;align-items:flex-start!important;min-width:0;min-height:110px;padding:18px!important;background:var(--scene-control,var(--deep))!important;color:var(--ice)!important;border-color:var(--scene-border,var(--line))!important; }
 .math-story-card:before { content:"";display:block;width:40px;height:12px;border-radius:50%;background:linear-gradient(90deg,#e8b784,#b8dbe9);box-shadow:0 5px 0 #909cd34d; }
 .math-story-card:nth-child(2):before { background:linear-gradient(90deg,#b5e1e9,#caabe3); }
 #storiesDialog { width:calc(100% - 32px);max-width:1120px;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;scroll-padding-block-start:100px;padding:28px;border:2px solid var(--line);border-radius:25px;background:var(--paper);color:var(--ink); }
 #storiesDialog .dialog-heading h2 { font-family:var(--studio-font,inherit);font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:var(--ink); }
 #storiesDialog .dialog-heading>div { min-width:0; }
 #storiesDialog .eyebrow { color:var(--ink); }
 #storiesDialog :is(button,p,h3,h4,figure) { max-width:100%;overflow-wrap:anywhere; }
 #storiesDialog button { min-width:44px;min-height:48px;background:var(--control);color:var(--ink);border:1px solid var(--line);white-space:normal; }
 #storiesDialog button:hover { background:color-mix(in srgb,var(--ink) 7%,var(--paper)); }
 #storiesDialog button[aria-pressed=true],#storiesDialog button[aria-checked=true] { border:2px solid var(--ink);box-shadow:inset 0 0 0 2px var(--paper);background:color-mix(in srgb,var(--ink) 10%,var(--paper));color:var(--ink); }
 #storiesDialog button.primary { background:var(--ink);border-color:var(--ink);color:var(--paper); }
 #storiesDialog :is(button,[tabindex]):focus-visible { outline:3px solid var(--ink);outline-offset:4px; }
 #storiesDialog [lang] { display:block; }
 #storiesDialog [lang=th] { margin-top:.25em;letter-spacing:normal!important;word-spacing:normal!important; }
 #storiesDialog button { flex-direction:column; }
 #storiesDialog .story-choices { display:flex;gap:12px;flex-wrap:wrap;margin:18px 0; }
 .story-choices button { flex:1 1 250px;text-align:start; }
 #storiesDialog>p { max-width:65ch; }
 .story-reading { padding:22px;border:1px solid var(--line);border-radius:18px;margin:20px 0;background:color-mix(in srgb,var(--ink) 3%,var(--paper)); }
 #storyStep { font-size:.85rem;font-weight:600; }
 #storyNarrative,#storyMath { max-width:65ch; }
 #storyMath { border-inline-start:4px solid var(--ink);padding-inline-start:14px; }
 .story-equation { font-size:1.4rem;font-weight:750;font-variant-numeric:tabular-nums;margin-bottom:0; }
 .story-scene { position:relative;isolation:isolate;padding:24px;border:2px solid #718bad;border-radius:26px;background:radial-gradient(ellipse at 80% 0,#78558f80,transparent 48%),linear-gradient(150deg,#13203a,#29365b 60%,#1a2845);color:#f0f7ff;overflow:hidden;margin:22px 0; }
 #storiesDialog .story-scene h3 { font-size:1rem;position:relative;z-index:2;color:#f0f7ff; }
 #storiesDialog[data-story=seeds] .story-scene { background:radial-gradient(ellipse at 10% 0,#426a8b88,transparent 42%),linear-gradient(135deg,#132d3c,#344264 55%,#202c47); }
 .story-moons { position:absolute;width:115px;height:115px;border-radius:50%;right:28px;top:38px;background:radial-gradient(circle at 35% 30%,#e5c8ed,#9d7ea9 60%,#65527f);opacity:.55;z-index:-1;box-shadow:-130px 20px 0 -42px #a7c7e5; }
 .story-moons:after { content:"";position:absolute;inset:-50px -100px;border:1px solid #c5caeb66;border-radius:50%;transform:rotate(-24deg); }
 #storiesDialog[data-story=seeds] .story-moons { background:radial-gradient(circle at 35% 30%,#dcf1fb,#7cb1bf 60%,#4d6e8d);right:auto;left:28px; }
 .story-cast { display:flex;justify-content:space-around;align-items:flex-end;gap:14px;margin:15px 0 20px;position:relative; }
 .story-cast figure { margin:0;text-align:center;min-width:0;flex:1 1 120px; }
 .story-cast img { display:block;width:100%;max-width:245px;height:170px;object-fit:contain;margin:auto;filter:drop-shadow(0 12px 8px #070b2540); }
 .story-cast figcaption { font-size:.85rem;line-height:1.4;background:#111a31d9;border:1px solid #768cad;border-radius:12px;display:inline-block;padding:5px 12px; }
 .story-floating-dock { position:relative;background:linear-gradient(135deg,#273856,#1d2c48);border:2px solid #9bb4d0;border-radius:18px 18px 30px 30px;padding:18px 18px 28px;box-shadow:0 12px 0 -6px #5f799e,0 24px 24px -17px #070c2a; }
 .story-floating-dock:after { content:"";position:absolute;bottom:-14px;left:40%;right:40%;height:12px;background:#7fa4c5;clip-path:polygon(0 0,100% 0,50% 100%); }
 #storiesDialog .story-floating-dock h4,#storiesDialog .story-transfer h4 { margin:0 0 12px;color:#f0f7ff;font-size:.92rem; }
 .story-count { margin:6px 0 17px!important;text-align:center;font-size:1.3rem;font-weight:750;font-variant-numeric:tabular-nums;color:#fff; }
 .story-current-groups,.story-transfer-groups { display:grid;gap:17px;min-width:0; }
 .story-tens,.story-ones { display:flex;justify-content:center;flex-wrap:wrap;gap:10px;min-width:0; }
 .story-quantity-item { position:relative;flex:none;display:inline-grid; }
 .story-ten { grid-template-columns:repeat(2,12px);gap:4px;padding:9px 8px 24px;border:2px solid #e7c591;border-radius:10px;background:linear-gradient(135deg,#5e4c49,#2c3b56);box-shadow:3px 4px 0 #080e2966; }
 .story-ten b { position:absolute;bottom:2px;left:0;right:0;text-align:center;font:700 13px/1.2 system-ui,sans-serif;color:#fff5d9; }
 .story-grain { display:block;width:12px;height:15px;border:1px solid #f8e9c6;border-radius:3px;background:linear-gradient(135deg,#fff2bd,#e8b971 60%,#c78c61);box-shadow:inset -2px -2px 0 #9a634655; }
 .story-one { padding:4px; }
 .story-one .story-grain { width:19px;height:23px; }
 #storiesDialog[data-story=seeds] .story-grain { border-color:#d4f2ff;border-radius:50% 50% 50% 8%;transform:rotate(-25deg);background:linear-gradient(135deg,#eaf9fa,#98cfd4 60%,#6497ad); }
 #storiesDialog[data-story=seeds] .story-ten { border-color:#a5dbe6; }
 .story-transfer { margin:28px 0 0;padding:16px 30px;border:1px dashed #a8bad2;border-radius:18px;background:#152b48; }
 .story-transfer-groups { padding-inline:24px; }
 .story-exchange-equation { margin:14px 0 0!important;text-align:center;font-weight:700; }
 .story-rail-panel { padding:20px;border:1px solid var(--line);border-radius:18px;margin:24px 0; }
 .story-rail { position:relative;height:100px;margin:10px 18px 0; }
 .story-rail-axis { position:absolute;left:0;right:0;top:50px;height:3px;background:var(--ink); }
 .story-rail-tick { position:absolute;left:var(--tick);top:67px;transform:translateX(-50%);font-size:.72rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal; }
 .story-tick-0 { --tick:0%; }.story-tick-10 { --tick:20%; }.story-tick-20 { --tick:40%; }.story-tick-30 { --tick:60%; }.story-tick-40 { --tick:80%; }.story-tick-50 { --tick:100%; }
 .story-rail-tick:before { content:"";position:absolute;left:50%;top:-22px;width:2px;height:13px;background:var(--ink); }
 .story-rail-marker { position:absolute;top:4px;transform:translateX(-50%);min-width:35px;text-align:center;background:var(--ink);color:var(--paper);padding:5px 6px;border-radius:9px;font-size:.85rem;font-weight:700;white-space:nowrap;overflow-wrap:normal; }
 .story-rail-marker:after { content:"";position:absolute;left:calc(50% - 5px);bottom:-8px;border:5px solid transparent;border-bottom:0;border-top:8px solid var(--ink); }
 #storyRailText { font-weight:650;margin-bottom:0; }
 .story-controls { display:flex;flex-wrap:wrap;gap:12px; }
 .story-controls button { flex:1 1 200px; }
 .story-quick-controls { position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 0;background:var(--paper);border-bottom:1px solid var(--line); }
 #storiesDialog .story-quick-controls button { min-width:0;min-height:48px;padding:7px 3px;gap:1px;font-size:15px;line-height:1.25; }
 #storiesDialog .story-quick-controls button [lang] { font-size:15px;line-height:1.25;letter-spacing:normal!important;word-spacing:normal!important;white-space:nowrap;overflow-wrap:normal; }
 #storiesDialog .story-quick-controls button [lang=th] { margin-top:2px; }
 .story-action-stage { display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:12px;margin-bottom:10px;scroll-margin-top:80px; }
 #storyActor { margin:0;text-align:center; }
 #storyActor img { display:block;width:68px;height:64px;object-fit:contain; }
 #storyActor figcaption { font:600 13px/1.25 system-ui,sans-serif;letter-spacing:normal; }
 #storiesDialog #storyActionAmount { margin:0 0 7px;font-size:15px;line-height:1.3; }
 #storyActionAmount [lang] { line-height:1.3;letter-spacing:normal!important;word-spacing:normal!important; }
 #storyActionCargo { display:flex;gap:5px;align-items:center;flex-wrap:wrap;min-height:0; }
 #storyActionCargo .story-ten { grid-template-columns:repeat(5,7px);gap:2px;padding:5px 5px 18px; }
 #storyActionCargo .story-ten .story-grain { width:7px;height:10px; }
 #storyActionCargo .story-one { padding:2px; }
 #storyActionCargo .story-one .story-grain { width:13px;height:17px; }
 #storiesDialog #storyNow { margin:0 0 4px;font-size:15px;line-height:1.3; }
 #storiesDialog #storyNow [lang] { font-size:15px;line-height:1.3; }
 #storiesDialog #storyCount { margin:4px 0 12px!important;font-size:18px;line-height:1.3;letter-spacing:normal;word-spacing:normal; }
 .story-floating-dock .story-cast { margin:0 0 14px; }
 .story-floating-dock .story-cast img { height:110px; }
 /* Existing story leads and quieter support keep their authored actions and separate quantities. */
 #storyCast { align-items:start;gap:clamp(10px,3vw,24px); }
 #storyCast figure { --story-size:115px;padding:10px 8px 12px;border-radius:16px;background:#9fbbe20c; }
 #storyCast [data-scene-role=lead] { --story-size:175px;background:#9fbbe219;box-shadow:inset 0 0 0 1px #cbdcf240; }
 #storiesDialog #storyCast .character-stage { width:var(--story-size);max-width:100%;height:auto;margin:0 auto 12px; }
 #storiesDialog #storyCast :is(.rig-svg,.character-media) { height:var(--story-size); }
 #storiesDialog #storyCast .character-media>img,#storiesDialog #storyCast .character-media>video { width:100%;height:100%;max-width:none;margin:0;filter:none;border-radius:12px; }
 #storyCast figcaption { white-space:nowrap;overflow-wrap:normal; }
 #storyStatus { margin:20px 0 0;padding:15px;border:1px solid var(--line);border-radius:12px; }
 :root[data-studio-line-width=comfortable] #storiesDialog :is(#storyNarrative,#storyMath) { max-width:38ch; }
 :root[data-reading-size=largest] .math-story-cards { grid-template-columns:1fr; }
 @media(max-width:720px) { .math-story-cards { grid-template-columns:1fr; }.math-story-entry { padding:18px; }#storiesDialog { width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:17px 12px;border-radius:17px; }.story-reading,.story-rail-panel { padding:16px 12px; }.story-scene { padding:16px 10px; }.story-floating-dock { padding:15px 10px 25px; }.story-floating-dock .story-cast img { height:70px; }.story-cast figcaption { font-size:.8rem;padding:4px 7px; }.story-transfer { padding:14px 10px; }.story-transfer-groups { padding-inline:22px; }.story-equation { font-size:1.15rem; }.story-count { font-size:1rem; }.story-rail { margin-inline:15px; } }
 @media(max-width:600px) { #storyCast figure { padding:6px 4px 8px; }#storyCast [data-scene-role=lead] { --story-size:115px; } }
 @media(max-width:420px) { :root[data-reading-size=largest] #storyCast { flex-direction:column;align-items:stretch; }:root[data-reading-size=largest] #storyCast figure { flex-basis:auto; } }
 @media(max-width:420px) and (max-height:700px) {
  #storyGroups { gap:12px; }
  #storyGroups :is(.story-tens,.story-ones) { gap:6px; }
  #storyGroups .story-ten { grid-template-columns:repeat(2,9px);gap:3px;padding:6px 6px 20px; }
  #storyGroups .story-ten .story-grain { width:9px;height:11px; }
  #storyGroups .story-one { padding:3px; }
  #storyGroups .story-one .story-grain { width:15px;height:19px; }
 }
 @media(forced-colors:active) { #storiesDialog,.story-reading,.story-scene,.story-floating-dock,.story-transfer,.story-rail-panel,#storyStatus { background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none; }.story-moons,.story-floating-dock:after { display:none; }.story-cast figcaption { background:Canvas;color:CanvasText;border-color:CanvasText; }.story-ten,.story-grain { background:Canvas!important;color:CanvasText!important;border-color:CanvasText!important;box-shadow:none!important; }.story-ten b { color:CanvasText; }#storiesDialog .story-scene :is(h3,h4,p) { color:CanvasText; }.story-rail-axis,.story-rail-tick:before { background:CanvasText; }.story-rail-marker { background:CanvasText;color:Canvas; }.story-rail-marker:after { border-top-color:CanvasText; }#storiesDialog button[aria-pressed=true],#storiesDialog button[aria-checked=true] { outline:2px solid Highlight;outline-offset:2px; } }
 @media(forced-colors:active) { #storyCast figure { background:Canvas; }#storyCast [data-scene-role=lead] { box-shadow:none;border:1px solid CanvasText; } }
}
@media print { #storiesDialog,.math-story-entry { display:none!important; } }