@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=DM+Sans:wght@300;400;500;600&display=swap";.navbar[data-v-321a147d]{width:100%;height:calc(var(--nav-height) + var(--safe-bottom));padding-bottom:var(--safe-bottom);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:100;background:#0d0f14eb;align-items:flex-start;padding-top:8px;display:flex;position:absolute;bottom:0;left:0}.nav-item[data-v-321a147d]{color:var(--text-muted);transition:all var(--transition-fast);flex-direction:column;flex:1;align-items:center;gap:3px;padding:6px 0;text-decoration:none;display:flex}.nav-item.active[data-v-321a147d]{color:var(--text-primary)}.nav-icon[data-v-321a147d]{transition:transform var(--transition-spring);font-size:1.25rem;line-height:1}.nav-item.active .nav-icon[data-v-321a147d]{transform:scale(1.15)}.nav-label[data-v-321a147d]{letter-spacing:.06em;text-transform:uppercase;font-size:.65rem;font-weight:500}:root{--bg-base:#0d0f14;--bg-surface:#13161e;--bg-card:#1a1e2a;--bg-elevated:#222636;--accent-easy:#4ade80;--accent-hard:#f87171;--accent-detail:#60a5fa;--accent-skip:#a78bfa;--accent-amber:#fbbf24;--text-primary:#f0f2f7;--text-secondary:#8b91a8;--text-muted:#4b5168;--border:#ffffff0f;--border-hover:#ffffff1f;--glass-bg:#ffffff0a;--glass-blur:blur(20px);--radius-sm:10px;--radius-md:18px;--radius-lg:28px;--radius-xl:40px;--shadow-card:0 24px 64px #0009, 0 4px 16px #0006;--shadow-soft:0 4px 24px #0000004d;--font-display:"Playfair Display", Georgia, serif;--font-body:"DM Sans", system-ui, sans-serif;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-med:.3s cubic-bezier(.4, 0, .2, 1);--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1);--nav-height:64px;--safe-bottom:env(safe-area-inset-bottom,16px)}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;height:100%;font-size:16px}body{background:var(--bg-base);height:100%;color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.6;overflow-x:hidden}#app{flex-direction:column;max-width:480px;height:100%;margin:0 auto;display:flex;position:relative}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;font-weight:700;line-height:1.2}h1{font-size:clamp(2rem,8vw,2.8rem)}h2{font-size:clamp(1.4rem,5vw,1.8rem)}h3{font-size:1.2rem}p{color:var(--text-secondary)}.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:var(--radius-lg)}.btn{border-radius:var(--radius-md);font-family:var(--font-body);letter-spacing:.01em;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;border:none;justify-content:center;align-items:center;gap:8px;padding:14px 28px;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--text-primary);color:var(--bg-base)}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-ghost{background:var(--glass-bg);color:var(--text-primary);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--border-hover);background:#ffffff12}.btn-icon{border-radius:50%;width:52px;height:52px;padding:0;font-size:1.3rem}.swipe-hint{border-radius:var(--radius-lg);pointer-events:none;opacity:0;transition:opacity var(--transition-fast);position:absolute;inset:0}.swipe-hint.easy{background:radial-gradient(circle at 70%,#4ade8040,#0000 60%)}.swipe-hint.hard{background:radial-gradient(circle at 30%,#f8717140,#0000 60%)}.swipe-hint.detail{background:radial-gradient(circle at 50% 20%,#60a5fa40,#0000 60%)}.swipe-hint.skip{background:radial-gradient(circle at 50% 80%,#a78bfa40,#0000 60%)}.tag{letter-spacing:.05em;text-transform:uppercase;background:var(--glass-bg);border:1px solid var(--border);color:var(--text-secondary);border-radius:100px;padding:4px 12px;font-size:.75rem;font-weight:500;display:inline-block}.page{padding:24px 20px;padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 16px);flex:1;overflow:hidden auto}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse-ring{0%{opacity:.6;transform:scale(1)}50%{opacity:.3;transform:scale(1.05)}to{opacity:.6;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}.anim-fade-up{animation:fadeUp .5s var(--transition-med) both}.skeleton{background:linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card) 50%, var(--bg-elevated) 75%);border-radius:var(--radius-sm);background-size:200%;animation:1.5s infinite shimmer}.slide-enter-active,.slide-leave-active{transition:all .28s cubic-bezier(.4,0,.2,1)}.slide-enter-from{opacity:0;transform:translate(24px)}.slide-leave-to{opacity:0;transform:translate(-24px)}::-webkit-scrollbar{width:0}body:before{content:"";pointer-events:none;z-index:9999;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");position:fixed;inset:0}.practice-hint-illustration-container{background:var(--bg-elevated);border:1px dashed var(--border);border-radius:var(--radius-md);box-sizing:border-box;flex-direction:column;align-self:center;align-items:center;gap:6px;width:100%;max-width:320px;margin:12px 0 4px;padding:12px;display:flex}.practice-hint-illustration-container .hint-label{text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;align-self:flex-start;font-size:.72rem;font-weight:600}.practice-hint-illustration{object-fit:contain;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;max-width:100%;max-height:140px}@media (height<=700px){.exercise-container{padding:16px!important}.practice-header{margin-bottom:12px!important}.practice-hint-illustration-container{margin:8px 0 2px!important;padding:8px!important}.practice-hint-illustration{max-height:90px!important}}