:root{
  --upgrade-blue:#5f7cff;
  --upgrade-violet:#9b6dff;
  --upgrade-glow:0 14px 40px rgba(63,190,115,.16);
}

html{scroll-behavior:smooth}
body{padding-top:58px;padding-bottom:16px}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{
  outline:3px solid var(--accent,#3fbe73)!important;outline-offset:3px!important
}
.ras-skip{position:fixed;left:12px;top:-80px;z-index:10000;background:#fff;color:#152016;
  padding:10px 14px;border-radius:10px;font-weight:800;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.ras-skip:focus{top:10px}

.ras-quickbar{position:fixed;inset:0 0 auto;z-index:9998;display:flex;align-items:center;
  justify-content:center;gap:8px;padding:8px 12px;background:color-mix(in srgb,var(--page,#191631) 88%,transparent);
  border-bottom:1px solid var(--line,#3a3560);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ras-quickbar a,.ras-quickbar button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;border:1px solid var(--line,#3a3560);border-radius:999px;padding:6px 13px;background:var(--card,#221e3e);
  color:var(--ink,#f3ebda);font:700 .82rem/1 system-ui,sans-serif;text-decoration:none;cursor:pointer;box-shadow:none}
.ras-quickbar .primary{background:var(--accent,#3fbe73);color:var(--accent-ink,#102418);border-color:transparent}
.ras-quickbar .spacer{width:min(30vw,280px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--soft,#b9ae97);font:700 .78rem/1.2 system-ui,sans-serif}

.ras-dashboard{margin:0 auto 28px;max-width:880px;background:linear-gradient(135deg,
  color-mix(in srgb,var(--accent,#3fbe73) 13%,var(--card,#221e3e)),var(--card,#221e3e));
  border:1.5px solid color-mix(in srgb,var(--accent,#3fbe73) 45%,var(--line,#3a3560));
  border-radius:22px;padding:18px;box-shadow:var(--upgrade-glow)}
.ras-dashboard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ras-dashboard h2{font-size:1.05rem;margin:0 0 3px}.ras-dashboard p{margin:0;color:var(--soft,#b9ae97);font-size:.86rem}
.ras-continue{display:inline-flex;align-items:center;gap:7px;background:var(--accent,#3fbe73);color:var(--accent-ink,#102418)!important;
  padding:10px 15px;border-radius:12px;text-decoration:none;font-weight:850;white-space:nowrap}
.ras-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}
.ras-stat{background:color-mix(in srgb,var(--page,#191631) 46%,transparent);border:1px solid var(--line,#3a3560);
  border-radius:14px;padding:11px 12px}.ras-stat b{display:block;font-size:1.22rem;color:var(--accent,#3fbe73)}
.ras-stat span{color:var(--soft,#b9ae97);font-size:.74rem;font-weight:700}
.ras-masterbar{height:9px;border-radius:99px;background:var(--line,#3a3560);overflow:hidden;margin-top:14px}
.ras-masterbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent,#3fbe73),var(--upgrade-blue));border-radius:inherit}

.ras-hero-art{max-width:1080px;margin:0 auto 26px;position:relative;border-radius:26px;overflow:hidden;
  border:1.5px solid color-mix(in srgb,var(--accent,#3fbe73) 45%,var(--line,#3a3560));
  box-shadow:0 22px 60px rgba(10,8,30,.32);background:var(--card,#221e3e)}
.ras-hero-art img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ras-hero-art figcaption{position:absolute;right:12px;bottom:12px;max-width:46ch;padding:8px 12px;
  border-radius:12px;background:rgba(16,13,35,.78);color:#f3ebda;font:650 .76rem/1.35 system-ui,sans-serif;
  backdrop-filter:blur(10px)}

.ras-memory{margin:26px 0 30px;padding:20px;border-radius:22px;background:linear-gradient(145deg,
  color-mix(in srgb,var(--upgrade-blue) 8%,var(--card,#221e3e)),var(--card,#221e3e));
  border:1.5px solid var(--line,#3a3560);box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.15))}
.ras-memory-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px}
.ras-memory-badge{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(135deg,var(--accent,#3fbe73),var(--upgrade-blue));font-size:1.35rem}
.ras-memory h2{margin:0!important;font-size:1.2rem!important}.ras-memory-head p{margin:3px 0 0;color:var(--soft,#b9ae97);font-size:.84rem}
.ras-visual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ras-visual{min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;
  text-align:center;padding:14px 10px;border:1px solid var(--line,#3a3560);border-radius:16px;
  background:color-mix(in srgb,var(--page,#191631) 58%,var(--card,#221e3e));overflow:hidden}
.ras-visual strong{font-size:.88rem}.ras-visual small{color:var(--soft,#b9ae97);font-weight:650;line-height:1.35}
.ras-scene{display:flex;align-items:flex-end;justify-content:center;gap:7px;min-height:58px;font-size:2.2rem}
.ras-scene .tiny{font-size:1.15rem}.ras-scene .large{font-size:3rem}.ras-scene .ghost{opacity:.35}
.ras-arrow{font-size:1.3rem;color:var(--accent,#3fbe73);font-weight:900}
.ras-token{display:inline-block;padding:5px 8px;border-radius:8px;background:color-mix(in srgb,var(--accent,#3fbe73) 16%,transparent);
  color:var(--ink,#f3ebda);font-weight:850;font-size:.82rem}
.ras-token.amber{background:color-mix(in srgb,var(--amber,#f2b23e) 20%,transparent)}
.ras-timeline{width:92%;height:4px;border-radius:9px;background:linear-gradient(90deg,#8c86a6 0 33%,var(--accent,#3fbe73) 33% 66%,var(--amber,#f2b23e) 66%);position:relative;margin:18px 0 8px}
.ras-timeline::before,.ras-timeline::after{content:"";position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:currentColor;translate:0 -50%}
.ras-timeline::before{left:15%}.ras-timeline::after{right:15%}
.ras-bubble{position:relative;padding:8px 10px;border-radius:13px;background:var(--card,#221e3e);border:1px solid var(--line,#3a3560);font-weight:750;font-size:.78rem}
.ras-bubble::after{content:"";position:absolute;left:14px;bottom:-6px;width:10px;height:10px;background:inherit;border-right:1px solid var(--line,#3a3560);border-bottom:1px solid var(--line,#3a3560);rotate:45deg}
.ras-formula{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.ras-wordpair{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;align-items:center;width:100%;font-size:.78rem;font-weight:800}
.ras-wordpair span:first-child{color:var(--amber,#f2b23e)}.ras-wordpair span:last-child{color:var(--accent,#3fbe73)}
.ras-mark-map{display:flex;gap:5px;align-items:flex-end;height:62px}.ras-mark-map i{width:34px;border-radius:8px 8px 3px 3px;background:linear-gradient(var(--accent,#3fbe73),var(--upgrade-blue));display:grid;place-items:center;color:white;font:850 .7rem system-ui;font-style:normal}
.year-filter{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0 12px;color:var(--soft,#b9ae97);font-size:.8rem;font-weight:800}
.year-filter button{border:1px solid var(--line,#3a3560);border-radius:999px;padding:6px 11px;background:var(--card,#221e3e);color:var(--ink,#f3ebda);font:800 .78rem system-ui;cursor:pointer}
.year-filter button.on{background:var(--accent,#3fbe73);color:var(--accent-ink,#102418);border-color:transparent}

.lab,.card,.q,.scene,.paper{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.lab:hover,.lab:focus-visible,.card.click:hover,.card.click:focus-visible{
  border-color:color-mix(in srgb,var(--accent,#3fbe73) 70%,var(--line,#3a3560));box-shadow:var(--upgrade-glow)}
.card.click[role="button"],.fc[role="button"]{cursor:pointer}
.ras-nav-hint{margin:-10px 2px 12px;color:var(--soft,#b9ae97);font-size:.72rem;text-align:right}
.ras-source-note{display:block;margin-top:12px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--amber,#f2b23e) 10%,transparent);font-size:.78rem}
.ras-source-note a{font-weight:800}
.ras-offline{position:fixed;right:14px;bottom:14px;z-index:9999;padding:9px 13px;border-radius:999px;
  color:white;background:#9e4438;font:750 .78rem/1 system-ui;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.ras-offline[hidden]{display:none}

@media(max-width:640px){
  body{padding-top:0;padding-bottom:78px}
  .ras-quickbar{inset:auto 10px 10px;border:1px solid var(--line,#3a3560);border-radius:18px;
    justify-content:space-around;padding:7px;background:color-mix(in srgb,var(--page,#191631) 92%,transparent);
    box-shadow:0 10px 36px rgba(0,0,0,.32)}
  .ras-quickbar a,.ras-quickbar button{min-width:44px;min-height:44px;padding:6px 10px}
  .ras-quickbar .spacer{display:none}.ras-quickbar .label{display:none}
  .ras-dashboard{margin-inline:0}.ras-stats{grid-template-columns:repeat(3,1fr)}
  .ras-stat{padding:9px 8px}.ras-stat b{font-size:1.05rem}.ras-stat span{font-size:.67rem}
  .ras-hero-art{margin:12px 16px 22px;border-radius:18px}.ras-hero-art img{aspect-ratio:4/5;object-position:64% center}
  .ras-hero-art figcaption{position:static;max-width:none;border-radius:0;background:var(--card,#221e3e);color:var(--soft,#b9ae97)}
  .ras-memory{padding:16px 12px}.ras-visual-grid{grid-template-columns:1fr}.ras-visual{min-height:132px}
  nav.nv{scroll-snap-type:x proximity;padding-bottom:14px}
  nav.nv button{scroll-snap-align:start}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lab,.card,.q,.scene,.paper{transition:none}}

/* ================= RasVoice UI ================= */
#rasVoiceFlash{position:fixed;right:16px;bottom:92px;z-index:120;font-size:1.35rem;
  opacity:0;pointer-events:none}
#rasVoiceFlash.on{animation:rasVF 1s ease-out}
@keyframes rasVF{0%{opacity:0;transform:scale(.7)}20%{opacity:1;transform:scale(1.2)}
  100%{opacity:0;transform:scale(1)}}
.ras-voice-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;z-index:130;
  max-width:min(94vw,440px);background:var(--card,#fff);color:var(--ink,#222);
  border:2px solid var(--bad,#C94F3D);border-radius:16px;padding:14px 42px 14px 16px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);font-size:.9rem;line-height:1.45}
.ras-voice-banner b{display:block;margin-bottom:4px}
.ras-voice-banner span{color:var(--soft,#666)}
.ras-voice-banner .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ras-voice-banner a,.ras-voice-banner .row button{font:inherit;font-weight:700;border-radius:10px;
  padding:.45em .95em;border:1.5px solid var(--line,#ddd);background:var(--accent,#1E9E55);
  color:#fff;text-decoration:none;cursor:pointer}
.ras-voice-banner .row button{background:transparent;color:inherit}
.ras-voice-banner .x{position:absolute;top:6px;right:8px;border:0;background:none;
  padding:4px 6px;font-weight:800;cursor:pointer;color:inherit;font-size:1rem}
.speaking{outline:3px solid var(--accent,#1E9E55)!important;outline-offset:2px}

/* ================= Example strips ================= */
.ras-exwrap{margin:28px 0 8px}
.ras-exwrap h2{font-size:1.15rem;margin:0 0 10px}
.ras-exstrip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.ras-excard{flex:0 0 min(78vw,300px);scroll-snap-align:start;text-align:left;
  background:var(--card,#fff);border:1.5px solid var(--line,#ddd);border-radius:14px;
  padding:12px 14px;cursor:pointer;transition:transform .15s;font:inherit;color:var(--ink,#222);
  box-shadow:0 5px 14px rgba(0,0,0,.07)}
.ras-excard:hover{transform:translateY(-2px)}
.ras-excard:focus-visible{outline:3px solid var(--accent,#1E9E55);outline-offset:2px}
.ras-excard .en{font-weight:700;line-height:1.4}
.ras-excard .en b{color:var(--accent,#1E9E55)}
.ras-excard .hi{color:var(--soft,#666);font-size:.88rem;margin-top:3px}
.ras-excard .tag{display:inline-block;font-size:.68rem;font-weight:800;
  color:var(--accent,#1E9E55);margin-bottom:4px;letter-spacing:.04em}
.ras-excard .lsn{float:right;font-size:1rem}