@tailwind base;@tailwind components;@tailwind utilities;:root{--page-max-width: 1320px;--outer-radius: 28px;--inner-radius: 16px;--outer-border: 18px;--accent-1: #1f6f92;--accent-2: #4aa8cc;--muted: #365a66;--bg-light: #f2fbfd}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 520px at 90% 10%,#cbeef9 0%,rgba(255,255,255,.25) 20%,transparent 40%),radial-gradient(900px 420px at 6% 86%,#c2e5f7 0%,rgba(255,255,255,.12) 10%,transparent 30%),linear-gradient(180deg,#bfe7f7,#d7f2fb)}.app-shell{width:96%;max-width:var(--page-max-width);height:74vh;border-radius:var(--outer-radius);padding:calc(var(--outer-border));background:linear-gradient(180deg,#fffffffa,#f5fcfffa);box-shadow:0 40px 80px #092d421f;position:relative;overflow:hidden;border:0}.inner-panel{height:100%;border-radius:calc(var(--outer-radius) - 8px);padding:48px 72px;background:linear-gradient(180deg,#f5fffffa,#fafffffa);box-shadow:inset 0 12px 28px #ffffffbf,inset 0 -8px 20px #021e2808,0 12px 30px #08222e0a;display:flex;flex-direction:column}.title{font-family:Playfair Display,serif;font-size:64px;font-weight:700;color:#074960;text-align:center;margin:0;line-height:1;letter-spacing:.2px}.gradient-title{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}.subtitle-bubble{display:inline-block;margin:10px auto 18px;background:#fff;padding:8px 14px;border-radius:10px;box-shadow:0 8px 20px #0c3d4c0f;font-size:13px;color:var(--muted)}.progress-row{width:72%;margin:18px auto;display:flex;align-items:center;justify-content:center;gap:22px}.progress-track{height:6px;background:#0e3b4814;border-radius:8px;width:220px;position:relative}.progress-active{position:absolute;left:0;top:0;height:100%;width:84%;background:linear-gradient(90deg,#15343f,#6aa6bf);border-radius:8px;box-shadow:0 4px 12px #1144561f}.progress-separator{height:6px;width:220px;background:#0e3b480a;border-radius:8px;box-shadow:inset 0 2px 4px #fff9}.quiz-area{display:flex;flex:1;align-items:center;justify-content:center}.quiz-card{width:100%;max-width:760px;margin:0 auto}.question{background:linear-gradient(90deg,#0e98bd17,#0e98bd08);border-radius:10px;padding:14px 18px;text-align:center;color:#123e4a;font-weight:700;box-shadow:0 6px 12px #04141e0a}.options{margin-top:18px;display:flex;flex-direction:column;gap:12px}.option{padding:14px;border-radius:10px;background:#e8f9fdd9;border:1px solid rgba(22,98,118,.06);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;text-align:center;color:#0b3b47;font-weight:600;box-shadow:0 6px 18px #061e2b0a}.option:hover{transform:translateY(-3px);box-shadow:0 14px 36px #08242e1a}.option--active{background:linear-gradient(90deg,#d7f6fb,#e9fbff);border:1px solid rgba(33,120,140,.12)}.nav-arrows{position:absolute;right:56px;bottom:40px;display:flex;gap:12px}.nav-btn{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#ffffffd9;box-shadow:0 10px 20px #061e2b0f;border:1px solid rgba(8,36,46,.04);cursor:pointer}.nav-btn:active{transform:translateY(1px)}.paw-wrapper{position:absolute;left:30px;bottom:34px;display:flex;gap:12px;align-items:center;z-index:6}.speech{background:#fff;padding:8px 12px;border-radius:10px;font-size:13px;box-shadow:0 8px 20px #0f38440f;color:#123a44}.paw{width:98px;height:98px;display:block;transform:translateY(6px)}@media(max-width:1200px){.app-shell{height:auto;padding:14px}.inner-panel{padding:28px}.title{font-size:44px}.paw{width:70px;height:70px}}