/* Hero demo: the extension's real Solve button + answer card on a Canvas practice quiz.
   A fixed 600x375 stage (420x640 on narrow screens) scaled to its box by hero-demo.js.
   Colors and sizes of .sz-solve / .sz-answer mirror content.js. */
.sz-box { position: relative; width: 100%; aspect-ratio: 600 / 375; overflow: hidden; background: #fff; }
.sz-stage { position: absolute; left: 0; top: 0; width: 600px; height: 375px; transform-origin: 0 0; font-family: Lato, "Helvetica Neue", Arial, sans-serif; color: #2d3b45; }
.sz-stage.sz-narrow { width: 420px; height: 640px; }
.sz-title { position: absolute; left: 26px; top: 18px; font-weight: 700; font-size: 20px; }
.sz-started { position: absolute; left: 26px; top: 46px; font-size: 12px; }
.sz-q { position: absolute; left: 26px; top: 76px; width: 384px; border: 1px solid #c7cdd1; background: #fff; }
.sz-narrow .sz-q { width: 368px; }
.sz-h { display: flex; align-items: center; background: #f5f5f5; border-bottom: 1px solid #c7cdd1; padding: 10px 12px; font-weight: 700; font-size: 15px; }
.sz-h .sz-pts { margin-left: auto; }
.sz-body { padding: 14px 16px 6px; font-size: 14px; }
.sz-body p { margin: 0 0 16px; line-height: 1.45; }
.sz-a { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-top: 1px solid #c7cdd1; font-size: 14px; }
.sz-a i { width: 13px; height: 13px; border: 1.5px solid #8b969e; border-radius: 50%; flex-shrink: 0; }
.sz-solve { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin: 0 9px; border-radius: 999px; font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.2; white-space: nowrap; background: rgba(6, 182, 212, 0.1); color: #0e7490; border: 1px solid rgba(6, 182, 212, 0.45); transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease; }
.sz-solve .sz-ic { font-size: 10px; }
.sz-solve.sz-hover { background: #06b6d4; color: #0f172a; border-color: #06b6d4; }
.sz-solve.sz-down { transform: scale(0.94); }
.sz-ripple { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #06b6d4; opacity: 0; pointer-events: none; }
.sz-ripple.sz-go { animation: sz-ripple 600ms ease-out; }
@keyframes sz-ripple { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
.sz-answer { position: absolute; left: 326px; top: 160px; width: 262px; box-sizing: border-box; background: #172b30; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 15px 17px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f4f5f7; transform-origin: 20% 0; transition: opacity 260ms ease, transform 520ms cubic-bezier(.2, .9, .25, 1.35); }
.sz-narrow .sz-answer { left: 132px; top: 420px; }
.sz-answer.sz-hide { opacity: 0; transform: translateY(10px) scale(0.92); }
.sz-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 11px; background: #06b6d4; color: #0f172a; font-size: 15px; font-weight: 700; border-radius: 10px; margin-bottom: 9px; }
.sz-answer p { margin: 0 0 11px; font-size: 12.5px; line-height: 1.5; color: #cbd5e1; }
.sz-row { display: flex; align-items: center; }
.sz-more { padding: 5px 11px; background: rgba(6, 182, 212, 0.15); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.35); border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.sz-x { margin-left: auto; color: #94a3b8; font-size: 13px; }
.sz-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 30px; z-index: 5; transition: transform 770ms cubic-bezier(.45, .05, .2, 1); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }

/* ---- Carousel: three stages in a track, hard swipe between them ---- */
.sz-box { touch-action: pan-y; outline: none; user-select: none; cursor: grab; }
.sz-box:active { cursor: grabbing; }
.sz-track { position: absolute; inset: 0; display: flex; transition: transform 600ms cubic-bezier(.83, 0, .17, 1); }
.sz-slide { position: relative; flex: 0 0 100%; overflow: hidden; transition: transform 360ms cubic-bezier(.4, 0, .2, 1); }
.sz-moving .sz-slide { transform: scale(0.95); }
.sz-tabs { position: absolute; left: 50%; bottom: 10px; z-index: 10; display: flex; gap: 3px; padding: 3px; transform: translateX(-50%); background: rgba(15, 23, 42, 0.78); backdrop-filter: blur(6px); border-radius: 999px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25); }
.sz-tab { padding: 5px 11px; border: 0; border-radius: 999px; background: transparent; color: #cbd5e1; font: 600 11px Inter, -apple-system, sans-serif; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.sz-tab:hover { color: #fff; }
.sz-tab.on { background: #06b6d4; color: #0f172a; }
.sz-box:focus-visible { box-shadow: inset 0 0 0 2px #06b6d4; }
.sz-stage .sz-hide { opacity: 0; pointer-events: none; }
.sz-cursor, .sz-cross { transition: transform 770ms cubic-bezier(.45, .05, .2, 1), opacity 120ms ease; }
.sz-cross { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 6; }

/* ---- Headline verb (index.html #hero-word) ---- */
.hero-word { display: inline-block; color: #0891b2; transition: transform 300ms cubic-bezier(.6, 0, .2, 1), opacity 300ms ease, filter 300ms ease; }
.hero-word.out { transform: translateY(-45%); opacity: 0; filter: blur(6px); }
.hero-word.in { transition: none; transform: translateY(45%); opacity: 0; filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .hero-word { transition: none; } }

/* ---- 2. Highlight: study-guide page, selection, tooltip (content.js colors) ---- */
.sz-doc { position: absolute; left: 26px; top: 82px; width: 300px; font-size: 13.5px; line-height: 1.5; }
.sz-narrow .sz-doc { width: 368px; }
.sz-doc p { margin: 0 0 7px; }
.sz-doc .sz-muted { color: #5b6a75; margin-bottom: 12px; }
.sz-doc .sz-opt { margin: 0 0 4px 14px; }
.sz-mark { background: linear-gradient(rgba(6, 182, 212, 0.3), rgba(6, 182, 212, 0.3)) no-repeat 0 0 / 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 1px 0; }
.sz-tip { position: absolute; z-index: 4; display: flex; gap: 6px; padding: 6px; background: #172b30; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); transition: opacity 180ms ease, transform 220ms ease; }
.sz-tip.sz-hide { transform: translateY(4px); }
.sz-pill { padding: 5px 12px; border: 1px solid rgba(6, 182, 212, 0.35); background: rgba(6, 182, 212, 0.15); color: #06b6d4; border-radius: 999px; font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; transition: background 150ms ease, color 150ms ease; }
.sz-pill.sz-hover { background: #06b6d4; color: #0f172a; }
.sz-answer.sz-hl-answer { left: 330px; top: 96px; }
.sz-narrow .sz-answer.sz-hl-answer { left: 132px; top: 420px; }

/* ---- 3. Snip: PDF homework, screenshot overlay (content.css), chat (floating-chat.css) ---- */
.sz-pdf { position: absolute; inset: 0; background: #525659; }
.sz-sheet { position: absolute; left: 30px; top: 18px; width: 320px; height: 360px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); padding: 22px 24px; box-sizing: border-box; font-family: Georgia, "Times New Roman", serif; color: #1f2933; }
.sz-narrow .sz-sheet { left: 26px; width: 368px; height: 300px; }
.sz-sheet-h { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7780; border-bottom: 1px solid #d9dee2; padding-bottom: 8px; margin-bottom: 14px; }
.sz-sheet-q { font-size: 13.5px; line-height: 1.5; background: #fff; }
.sz-sheet-q ol { margin: 8px 0 0; padding-left: 26px; list-style: upper-alpha; }
.sz-sheet-q li { margin: 2px 0; }
.sz-sheet-lines { margin-top: 20px; display: grid; gap: 9px; }
.sz-sheet-lines i { display: block; height: 7px; border-radius: 4px; background: #eef1f3; }
.sz-sheet-lines i:nth-child(2n) { width: 80%; }
.sz-shade { position: absolute; inset: 0; z-index: 3; background: rgba(23, 43, 48, 0.28); transition: opacity 200ms ease; }
.sz-sel { position: absolute; z-index: 4; display: none; border: 1.5px solid #06b6d4; box-shadow: 0 0 0 9999px rgba(23, 43, 48, 0.6), 0 0 0 4px rgba(6, 182, 212, 0.25), 0 0 32px rgba(6, 182, 212, 0.45); }
.sz-instr { position: absolute; left: 50%; top: 12px; z-index: 5; transform: translateX(-50%); white-space: nowrap; background: rgba(23, 43, 48, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); color: #f4f5f7; padding: 8px 12px; border-radius: 12px; font: 500 11.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: opacity 300ms ease; }
.sz-flash { position: absolute; inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }
.sz-flash.sz-go { animation: sz-flash 380ms ease-out; }
@keyframes sz-flash { from { opacity: 0.75; } to { opacity: 0; } }
.sz-chat { position: absolute; left: 368px; top: 12px; width: 220px; height: 351px; z-index: 6; display: flex; flex-direction: column; overflow: hidden; background: #f8fafb; border: 1px solid #1f3a40; border-radius: 14px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: transform 560ms cubic-bezier(.2, .9, .25, 1.15), opacity 240ms ease; }
.sz-narrow .sz-chat { left: 26px; top: 330px; width: 368px; height: 296px; }
.sz-chat.sz-chat-off { transform: translateX(260px); opacity: 0; }
.sz-narrow .sz-chat.sz-chat-off { transform: translateY(320px); }
.sz-chat-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #172b30; color: #fff; font-size: 13px; font-weight: 600; }
.sz-chat-logo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #06b6d4; font-size: 12px; }
.sz-chat-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; overflow: hidden; }
.sz-msg-user { align-self: flex-end; max-width: 88%; padding: 8px; background: #172b30; color: #fff; border-radius: 14px 14px 6px 14px; font-size: 11.5px; line-height: 1.4; }
.sz-thumb { width: 150px; height: 84px; margin-bottom: 6px; overflow: hidden; border-radius: 8px; background: #fff; }
.sz-thumb > * { transform-origin: 0 0; padding: 6px 8px; color: #1f2933; }
.sz-msg-ai { max-width: 94%; padding: 9px 11px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px 14px 14px 6px; color: #0f172a; font-size: 11.5px; line-height: 1.5; transition: opacity 200ms ease; }
.sz-ai-head { color: #0f172a; }
.sz-chat-logo { background: transparent; overflow: hidden; }
.sz-chat-logo img { display: block; width: 100%; height: 100%; }