*{box-sizing:border-box}body{min-width:320px}:root{--bg: #0b0d10;--card: #0b0d10;--text: #e8eef6;--muted: #9aa7b2;--accent: #6ae3ff;--accent-2: #b388ff;--glow: 0 10px 40px rgba(106, 227, 255, .12), 0 0 0 1px rgba(106, 227, 255, .08);--top-gap: 12px;--explain-w: 120px;--top-h: 44px}html,body,#root{height:100%}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial}.site{width:100%;max-width:1200px;margin:0 auto;padding:28px 20px 100px;line-height:1.65;scroll-snap-align:start}.period-badge{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));background:#ffffff14;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 16px;font-weight:700;letter-spacing:.2px;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 8px 32px #0000001f,0 4px 16px #00000014,inset 0 1px #ffffff1a;z-index:50;transition:all .3s cubic-bezier(.25,.46,.45,.94);display:flex;align-items:center;gap:8px;height:var(--top-h)}.period-text{white-space:nowrap;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.explain-bar{display:none;align-items:center;margin-left:8px;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.explain-btn-mobile{background:#ffffffe6;color:#1a1a1a;border:none;border-radius:6px;padding:6px 10px;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #00000040;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.1)}.explain-btn-mobile:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.explain-btn-mobile:active{transform:translateY(0)}.article{display:grid;grid-template-columns:min(760px,70vw) 1fr;gap:28px}.content{grid-column:1;scroll-snap-align:start}.paragraph,.period-heading,.headline,.subhead{scroll-snap-align:start;scroll-margin-top:20px}.headline{margin:6px 0;opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.25,.46,.45,.94)}.subhead{margin:0 0 18px;color:var(--muted);opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.25,.46,.45,.94)}.paragraph{margin:14px 0;color:var(--text);opacity:1;transform:translateY(0);transition:all .8s cubic-bezier(.25,.46,.45,.94)}.period-heading{margin:24px 0 8px;color:var(--accent);letter-spacing:.2px;opacity:1;transform:translateY(0);transition:all .8s cubic-bezier(.25,.46,.45,.94)}.headline.revealed,.subhead.revealed,.paragraph.revealed,.period-heading.revealed{opacity:1;transform:translateY(0)}.tooltip{position:fixed;transform:translate(-50%,-100%);background:linear-gradient(135deg,#6ae3ff59,#b388ff59);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:8px 16px;box-shadow:0 8px 32px #0000004d;z-index:40;cursor:pointer;color:#fff;font-weight:700;text-align:center;min-width:80px;-webkit-user-select:none;user-select:none}.explain-btn{background:none;color:red;border:none;padding:0;margin:0;font-weight:700;cursor:pointer;box-shadow:none;width:auto;height:auto;display:inline;font-size:inherit}.explain-panel{position:fixed;right:20px;bottom:20px;width:min(420px,90vw);background:#111418;border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:var(--glow);overflow:hidden;z-index:100}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}.panel-body{padding:12px 14px;color:var(--text);white-space:pre-wrap}.close{background:transparent;color:var(--muted);border:none;font-size:18px;cursor:pointer}.mobile-explain-button-oval{position:fixed!important;top:calc(env(safe-area-inset-top) + 20px)!important;right:calc(env(safe-area-inset-right) + 20px)!important;background:linear-gradient(135deg,#6ae3ff59,#b388ff59)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:20px!important;padding:8px 16px!important;box-shadow:0 8px 32px #0000004d!important;z-index:40!important;cursor:pointer!important;color:#fff!important;font-weight:700!important;text-align:center!important;min-width:80px!important;-webkit-user-select:none!important;user-select:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:all .3s cubic-bezier(.25,.46,.45,.94)!important;transform:translate(100px)!important;opacity:0!important;height:var(--top-h)!important;min-width:var(--explain-w)!important}.site-footer{margin-top:32px;color:var(--muted);text-align:center}.onboarding-overlay{position:fixed;inset:0;background:#000000e6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .6s ease-out forwards;padding:5px;box-sizing:border-box}.onboarding-card{background:#111418;border:1px solid rgba(255,255,255,.15);border-radius:20px;box-shadow:0 20px 60px #00000080;padding:30px;text-align:center;max-width:600px;width:90vw;display:flex;flex-direction:column;align-items:center;gap:25px;box-sizing:border-box}.onboarding-card p{margin:0;font-size:1.2rem;color:var(--text);line-height:1.5}.onboarding-image{max-width:100%;width:100%;height:auto;border-radius:12px;box-shadow:0 8px 25px #0000004d}.onboarding-continue{background:#ffffff0f;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:25px;padding:15px 35px;font-size:1.2rem;font-weight:700;cursor:pointer;margin-top:10px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 32px #0000001f,0 4px 16px #00000014,inset 0 1px #ffffff1a;transition:all .3s ease}.onboarding-continue:hover{background:#ffffff14;border-color:#ffffff26;transform:translateY(-2px);box-shadow:0 10px 40px #00000026,0 6px 20px #0000001a,inset 0 1px #ffffff26}.onboarding-continue:active{transform:translateY(0)}@media (max-width: 768px){.onboarding-card{padding:20px 15px;max-width:85vw;width:85vw;margin:15px;border-radius:16px;gap:20px}.onboarding-card h2{font-size:1.8rem}.onboarding-card p{font-size:1rem}.onboarding-image{max-width:100%;height:auto;border-radius:8px}.onboarding-continue{padding:12px 30px;font-size:1.1rem;width:100%;max-width:250px}}@media (max-width: 480px){.intro-text{max-width:80vw;padding:0 15px}.intro-line{font-size:1.2rem;line-height:1.3}.onboarding-card{padding:15px 12px;max-width:80vw;width:80vw;margin:12px;border-radius:12px;gap:15px}.onboarding-card p{font-size:.95rem;line-height:1.4}.onboarding-image{max-width:100%;height:auto;border-radius:6px}.onboarding-continue{padding:10px 25px;font-size:1rem;width:100%;max-width:200px}}@media (max-width: 360px){.onboarding-card{padding:12px 10px;max-width:75vw;width:75vw;margin:8px;border-radius:10px;gap:12px}.onboarding-card p{font-size:.9rem}.onboarding-continue{padding:8px 20px;font-size:.95rem}}@media (max-height: 500px) and (orientation: landscape){.onboarding-overlay{padding:5px;align-items:flex-start;overflow-y:auto}.onboarding-card{padding:15px 20px;margin:10px;max-height:90vh;overflow-y:auto}.onboarding-image{max-height:40vh;width:auto;max-width:60vw}.onboarding-card p{font-size:.9rem;margin-bottom:10px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}60%{transform:translateY(-4px)}}.loading-dots{display:inline-flex;align-items:center;gap:4px}.loading-dots .dot{width:6px;height:6px;background:currentColor;border-radius:50%;animation:bounce 1.4s ease-in-out infinite both}.loading-dots .dot:nth-child(1){animation-delay:-.32s}.loading-dots .dot:nth-child(2){animation-delay:-.16s}.loading-dots .dot:nth-child(3){animation-delay:0s}@media (max-width: 900px){.article{grid-template-columns:1fr min(680px,92vw)}}@media (max-width: 480px){.period-badge{top:calc(env(safe-area-inset-top) + 10px);left:calc(env(safe-area-inset-left) + 10px);right:calc(env(safe-area-inset-right) + 10px);width:auto;padding:8px 16px;border-radius:25px;justify-content:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 32px #0000001f,0 4px 16px #00000014,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.period-badge.has-explain{left:calc(env(safe-area-inset-left) + 10px)!important;right:calc(env(safe-area-inset-right) + var(--explain-w) + var(--top-gap))!important;width:auto!important;transition:all .3s cubic-bezier(.25,.46,.45,.94);transform:translate(0)!important;opacity:1!important}.mobile-explain-button-oval{top:calc(env(safe-area-inset-top) + 10px)!important;left:auto!important;right:calc(env(safe-area-inset-right) + 10px)!important;padding:8px 16px!important;border-radius:24px!important;background:linear-gradient(135deg,#6ae3ff59,#b388ff59)!important;border:1px solid rgba(255,255,255,.25)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;color:#fff!important;z-index:60!important;min-width:var(--explain-w)!important;height:var(--top-h)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;transition:all .3s cubic-bezier(.25,.46,.45,.94)!important;transform:translate(0)!important;opacity:1!important}.explain-bar{position:fixed!important;top:calc(env(safe-area-inset-top) + 10px)!important;right:calc(env(safe-area-inset-right) + 10px)!important;width:20%!important;min-width:80px!important;background:#ffffff40!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:25px!important;padding:8px 16px!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;box-shadow:0 12px 40px #0003,0 6px 20px #00000026,inset 0 1px #fff3!important;z-index:60!important;opacity:1!important;transform:translate(0)!important;transition:all .3s cubic-bezier(.25,.46,.45,.94)!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;left:auto!important}.article{grid-template-columns:1fr 1fr}.content{grid-column:1 / -1;padding-right:8px}.explain-panel{right:10px;bottom:10px;width:calc(100vw - 20px);max-width:none;background:#111418;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px #0000004d}}@media (max-width: 480px){.period-badge{top:calc(env(safe-area-inset-top) + 8px);left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);padding:12px 20px;font-size:.9rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 32px #0000001f,0 4px 16px #00000014,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.period-badge.has-explain{left:calc(env(safe-area-inset-left) + 8px)!important;right:calc(env(safe-area-inset-right) + var(--explain-w) + var(--top-gap))!important;width:auto!important}.mobile-landscape .period-badge.has-explain{right:calc(env(safe-area-inset-right) + 300px + var(--explain-w) + var(--top-gap))!important}.mobile-explain-button-oval{top:calc(env(safe-area-inset-top) + 8px)!important;right:calc(env(safe-area-inset-right) + 8px)!important;padding:8px 16px!important;border-radius:22px!important;background:linear-gradient(135deg,#6ae3ff59,#b388ff59)!important;color:#fff!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;height:var(--top-h)!important;min-width:var(--explain-w)!important;transition:all .3s cubic-bezier(.25,.46,.45,.94)!important}.mobile-landscape .mobile-explain-button-oval{right:calc(env(safe-area-inset-right) + 300px)!important}.explain-btn-mobile{padding:8px 12px;font-size:.8rem}.explain-panel{right:8px;bottom:8px;width:calc(100vw - 16px)}.site{padding:20px 12px 80px}}.mobile-landscape{grid-template-columns:1fr 280px!important;gap:20px!important;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.mobile-side-panel{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:16px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);height:fit-content;position:sticky;top:20px;overflow:hidden;animation:slideInRight .3s cubic-bezier(.25,.46,.45,.94)}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.side-panel-content{padding:20px}.side-panel-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.side-panel-header h3{margin:0 0 12px;font-size:1.1rem;font-weight:600;color:var(--text)}.current-period-display{display:flex;flex-direction:column;gap:4px}.period-label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.period-value{font-size:.9rem;font-weight:600;color:var(--accent)}.side-panel-sections{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.side-nav-item{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;color:var(--text);font-size:.85rem;text-align:left;cursor:pointer;transition:all .2s ease;font-family:inherit}.side-nav-item:hover{background:#ffffff14;border-color:#ffffff26;transform:translateY(-1px)}.side-nav-item:active{transform:translateY(0)}.side-panel-explanation{background:#6ae3ff0d;border:1px solid rgba(106,227,255,.15);border-radius:12px;padding:16px;position:relative}.side-panel-explanation h4{margin:0 0 12px;font-size:1rem;font-weight:600;color:var(--accent)}.explanation-content{font-size:.85rem;line-height:1.5;color:var(--text);margin-bottom:12px}.close-explanation{position:absolute;top:8px;right:8px;background:#ffffff1a;border:none;border-radius:50%;width:24px;height:24px;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s ease}.close-explanation:hover{background:#fff3}@media (max-width: 480px){.mobile-landscape .content{padding-right:0}.mobile-landscape{gap:16px!important}.mobile-side-panel{border-radius:12px}.side-panel-content{padding:16px}.side-panel-header h3{font-size:1rem}.side-nav-item{padding:8px 10px;font-size:.8rem}}@media (max-width: 480px) and (orientation: landscape){.mobile-landscape{grid-template-columns:1fr 240px!important;gap:12px!important}.mobile-side-panel{top:12px}.side-panel-content{padding:12px}.side-panel-header{margin-bottom:16px;padding-bottom:12px}.side-panel-header h3{font-size:.9rem;margin-bottom:8px}.side-nav-item{padding:6px 8px;font-size:.75rem}.side-panel-explanation{padding:12px}.side-panel-explanation h4{font-size:.9rem;margin-bottom:8px}.explanation-content{font-size:.8rem;margin-bottom:8px}}.landing-page{min-height:100vh;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.landing-content{display:grid;grid-template-columns:1fr auto;gap:60px;max-width:1200px;width:100%;align-items:center}.landing-left{max-width:600px}.landing-title{font-size:2.8rem;font-weight:700;color:var(--accent);margin:0 0 24px;line-height:1.2;letter-spacing:-.02em}.landing-subtitle{font-size:1.4rem;color:var(--text);margin:0 0 32px;line-height:1.4;font-weight:500}.landing-description{font-size:1.1rem;color:var(--muted);margin:0;line-height:1.6;max-width:500px}.landing-right{display:flex;align-items:center;justify-content:center}.landing-continue-btn{background:#ffffff14;color:var(--text);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:20px 40px;font-size:1.3rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.25,.46,.45,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 32px #0000001f,0 4px 16px #00000014,inset 0 1px #ffffff1a;white-space:nowrap}.landing-continue-btn:hover{background:#ffffff1f;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 40px #6ae3ff26,0 8px 24px #0000001f,inset 0 1px #ffffff26}.landing-continue-btn:active{transform:translateY(0)}@media (max-width: 768px){.landing-content{grid-template-columns:1fr;gap:40px;text-align:center}.landing-left{max-width:100%}.landing-title{font-size:2.2rem;margin-bottom:20px}.landing-subtitle{font-size:1.2rem;margin-bottom:24px}.landing-description{font-size:1rem;margin:0 auto}.landing-continue-btn{padding:18px 36px;font-size:1.2rem;width:100%;max-width:280px}}@media (max-width: 480px){.landing-page{padding:16px}.landing-content{gap:32px}.landing-title{font-size:1.8rem;margin-bottom:16px}.landing-subtitle{font-size:1.1rem;margin-bottom:20px}.landing-description{font-size:.95rem}.landing-continue-btn{padding:16px 32px;font-size:1.1rem;max-width:260px}}