:root{--color-primary: #431407;--color-secondary: #d8b4fe;--color-accent-1: #431407;--color-accent-2: #d8b4fe;--color-accent-3: #fff0df;--color-accent-4: #f5e5d5;--color-accent-5: #fffaf4;--color-neutral-1: #292524;--color-neutral-2: #1c1917;--color-neutral-3: #000000;--color-neutral-4: #d6d3d1;--color-neutral-5: #57534e;--font-primary: SF Pro;--font-secondary: SF Soft Time;--text-xs: 10px;--text-sm: 12px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--font-weight-1: 400;--font-weight-2: 500;--font-weight-3: 600;--font-weight-4: 700;--font-weight-5: 800;--space-0: 0px;--space-1: .5px;--space-2: 1px;--space-3: 2px;--space-4: 3px;--space-5: 4px;--space-6: 6px;--space-7: 8px;--space-8: 12px;--space-9: 16px;--space-10: 24px;--space-11: 32px;--space-12: 48px;--space-13: 64px;--shadow-sm: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(67, 20, 7, .25) 0px 20px 25px -5px, rgba(67, 20, 7, .25) 0px 8px 10px -6px;--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--radius: 12px;--border: 0px solid rgb(229, 231, 235)}.article-card{width:100%;position:relative;background:var(--bg-primary)}.card-bg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(80px) saturate(.35) brightness(1.1);opacity:0;transition:opacity 1.8s var(--ease-out);z-index:0;mix-blend-mode:multiply}.card-bg.loaded{opacity:.12}.card-overlay{position:absolute;inset:0;background:transparent;z-index:1}.card-content{position:relative;z-index:2;width:100%;padding:1.75rem 1.5rem;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:cardEntrance .5s var(--ease-out) both;transition:box-shadow .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}.card-content:hover{box-shadow:var(--shadow-xl, 0 8px 40px rgba(0,0,0,.12));transform:translateY(-2px)}@media(min-width:600px){.card-content.has-image{display:grid;grid-template-columns:140px 1fr;grid-template-rows:auto;column-gap:1.5rem;align-items:start}.card-content.has-image .card-image-wrapper{grid-row:1 / 4;grid-column:1;max-width:140px;aspect-ratio:1}.card-content.has-image .card-index,.card-content.has-image .card-description,.card-content.has-image .card-title,.card-content.has-image .card-extract,.card-content.has-image .card-actions{grid-column:2}.card-content.has-image .scroll-hint{display:none}}@keyframes cardEntrance{0%{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.card-index{display:flex;align-items:center;gap:.4rem;padding:.3rem .7rem;background:var(--bg-primary);color:var(--text-secondary);font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--radius-pill)}.card-emoji{font-size:.85rem;line-height:1}.card-number{font-weight:600;font-variant-numeric:tabular-nums}.card-image-wrapper{width:100%;max-width:400px;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);opacity:0;transform:translateY(6px);transition:all .5s var(--ease-out);flex-shrink:0;position:relative}.card-image-wrapper.loaded{opacity:1;transform:translateY(0)}.card-image{width:100%;height:100%;object-fit:cover;filter:grayscale(10%) contrast(1.02);transition:all .4s var(--ease-out)}.card-image-wrapper:hover .card-image{filter:grayscale(0%) contrast(1.05);transform:scale(1.03)}.card-description{font-family:var(--font-body);font-size:.72rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding-top:.4rem;border-top:1px solid var(--border-light);align-self:flex-start}.card-title{font-family:var(--font-display);font-size:2rem;font-weight:900;line-height:1.12;color:var(--text-primary);max-width:100%;letter-spacing:-.025em;text-wrap:balance;animation:clipReveal .6s var(--ease-out) .15s both}.card-extract{font-family:var(--font-body);font-size:.9rem;line-height:1.65;color:var(--text-secondary);max-width:100%;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;font-weight:400}.card-actions{margin-top:.5rem;padding-top:1.1rem;border-top:1px solid var(--border-light);width:100%;display:flex;gap:.75rem;align-items:center}.btn-like{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.4rem;background:var(--bg-primary);color:var(--text-secondary);text-decoration:none;font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.01em;border:1px solid var(--border-light);border-radius:var(--radius-pill);transition:all .3s var(--ease-out);cursor:pointer}.btn-like:hover{background:var(--bg-card);border-color:var(--accent);color:var(--accent);transform:scale(1.03)}.btn-like.liked{background:#000;border-color:#000;color:#fff}.btn-like.liked:hover{background:#222;border-color:#222;transform:scale(1.05)}.btn-like:active{transform:scale(.97);transition-duration:.1s}.btn-read-more{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.4rem;background:var(--text-primary);color:var(--bg-card);text-decoration:none;font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.01em;border:none;border-radius:var(--radius-pill);transition:all .3s var(--ease-out);cursor:pointer}.btn-read-more:hover{background:#222;color:#fff;transform:scale(1.03)}.btn-read-more:active{transform:scale(.97);transition-duration:.1s}.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.35rem;color:var(--text-muted);font-family:var(--font-body);font-size:.65rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500;animation:floatHint 2.8s ease-in-out infinite}@keyframes floatHint{0%,to{transform:translate(-50%) translateY(0);opacity:.35}50%{transform:translate(-50%) translateY(4px);opacity:.7}}@media(max-width:480px){.card-content{padding:2rem 1.5rem;margin:0 .75rem;width:calc(100% - 1.5rem);border-radius:var(--radius-md)}.card-title{font-size:1.6rem}.card-extract{font-size:.85rem;-webkit-line-clamp:4}.card-image-wrapper{max-width:150px}}@media(min-height:800px){.card-content{gap:1.25rem;padding:2.75rem 2.5rem}}.error-message{height:100vh;height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;background:var(--bg-primary)}.error-message-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1rem;padding:2.5rem 2.25rem;max-width:420px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:fadeUp .5s var(--ease-out) both}.error-emoji{font-size:2.5rem}.error-title{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--text-primary);letter-spacing:-.02em}.error-text{font-family:var(--font-body);font-size:.88rem;color:var(--text-secondary);line-height:1.6}.btn-retry{margin-top:.5rem;padding:.65rem 1.4rem;background:var(--text-primary);color:var(--bg-card);border:none;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:all .3s var(--ease-out)}.btn-retry:hover{background:#222;color:#fff;transform:scale(1.03)}.btn-retry:active{transform:scale(.97);transition-duration:.1s}.error-boundary{height:100vh;height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);color:var(--text-primary)}.error-boundary-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1rem;padding:2.5rem 2.25rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.error-boundary-content .error-icon{font-size:2.5rem}.error-boundary-content h2{font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em}.error-boundary-content p{font-family:var(--font-body);font-size:.88rem;color:var(--text-secondary);line-height:1.6}.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:2rem;height:100vh;height:100dvh;scroll-snap-align:start;background:var(--bg-primary)}.loader-fullscreen{background:var(--bg-primary);position:fixed;inset:0;z-index:100;animation:loaderFadeIn .4s var(--ease-out) both}@keyframes loaderFadeIn{0%{opacity:0}to{opacity:1}}.loader-spinner{width:36px;height:36px;position:relative}.spinner-ring{width:100%;height:100%;border:2.5px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;animation:spinSmooth .8s ease-in-out infinite}.spinner-ring:after{display:none}@keyframes spinSmooth{to{transform:rotate(360deg)}}.loader-text{display:flex;flex-direction:column;align-items:center;gap:.6rem;animation:fadeUp .5s var(--ease-out) .2s both}.loader-brand{font-family:var(--font-display);font-size:2.2rem;font-weight:700;letter-spacing:-.03em;color:var(--text-primary);position:relative}.loader-brand:after{content:"";position:absolute;bottom:-3px;left:50%;transform:translate(-50%);width:32px;height:2.5px;background:var(--accent);border-radius:2px}.loader-subtitle{font-family:var(--font-body);font-size:.78rem;color:var(--text-muted);letter-spacing:.02em;font-weight:500;margin-top:.5rem}.stats-overlay{position:fixed;inset:0;z-index:200;background:#00000080;display:flex;align-items:center;justify-content:center;padding:1rem;animation:overlayFadeIn .15s ease both}.stats-modal{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:440px;max-height:80vh;overflow-y:auto;padding:1.75rem;animation:modalSlideIn .2s var(--ease-out) both}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.stats-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.stats-title{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:var(--text-primary);letter-spacing:-.02em}.stats-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-light);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:all .2s var(--ease-out)}.stats-close:hover{border-color:var(--accent);color:var(--text-primary);transform:scale(1.05)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-light);border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden;margin-bottom:1.5rem}.stat-item{background:var(--bg-primary);padding:1.25rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}.stat-value{font-family:var(--font-display);font-size:1.6rem;font-weight:900;color:var(--text-primary);letter-spacing:-.03em;line-height:1}.stat-label{font-family:var(--font-body);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.stats-section-title{font-family:var(--font-body);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.75rem}.liked-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}.liked-item{display:flex}.liked-link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-body);font-size:.875rem;color:var(--text-primary);text-decoration:none;padding:.5rem 0;border-bottom:1px solid var(--border-light);width:100%;transition:color .15s ease}.liked-link:hover{color:var(--accent)}.liked-link svg{flex-shrink:0;margin-left:auto;opacity:.4}.liked-link:hover svg{opacity:.8}.stats-empty{font-family:var(--font-body);font-size:.875rem;color:var(--text-muted);text-align:center;padding:1rem 0}.image-viewer-overlay{position:fixed;inset:0;z-index:300;background:#000000eb;display:flex;align-items:center;justify-content:center;animation:overlayFadeIn .15s ease both}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.image-viewer-img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--radius-md);animation:imgZoomIn .2s var(--ease-out) both;-webkit-user-select:none;user-select:none}@keyframes imgZoomIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.image-viewer-close{position:fixed;top:1.25rem;right:1.25rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;color:#fff;cursor:pointer;transition:all .2s var(--ease-out);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.image-viewer-close:hover{background:#fff3;border-color:#fff6;transform:scale(1.05)}.app{width:100%;min-height:100vh;position:relative}.app-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:1rem 1.5rem;background:var(--bg-primary);border-bottom:1px solid var(--border-light);pointer-events:none;display:flex;align-items:center;justify-content:space-between}.app-logo{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:.5rem;letter-spacing:-.02em}.logo-icon{font-size:1.2rem;display:none}.app-logo:before{content:"¶";font-family:var(--font-display);font-size:1.3rem;color:var(--accent);font-weight:400;line-height:1}.scroll-container{max-width:680px;margin:0 auto;padding:80px 1rem 4rem;display:flex;flex-direction:column;gap:1.5rem}.auto-scroll-btn{position:fixed;bottom:2rem;right:1.5rem;z-index:50;width:48px;height:48px;border-radius:50%;border:none;background:var(--bg-card);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s var(--ease-out);box-shadow:var(--shadow-md);pointer-events:auto}.auto-scroll-btn:hover{transform:scale(1.06);box-shadow:var(--shadow-lg);color:var(--text-primary)}.auto-scroll-btn.active{background:#000;color:#fff;box-shadow:var(--shadow-md),0 0 0 4px #0000001a}.auto-scroll-btn.active:hover{background:#222}.auto-scroll-btn:active{transform:scale(.95);transition-duration:.1s}.random-btn{position:fixed;bottom:2rem;right:5rem;z-index:50;width:48px;height:48px;border-radius:50%;border:none;background:var(--bg-card);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s var(--ease-out);box-shadow:var(--shadow-md);pointer-events:auto;font-size:1.4rem}.random-btn:hover{transform:scale(1.06) rotate(20deg);box-shadow:var(--shadow-lg);color:var(--text-primary)}.random-btn:active{transform:scale(.95);transition-duration:.1s}.stats-btn{pointer-events:auto;background:none;border:none;color:var(--text-secondary);cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .2s ease,background .2s ease;flex-shrink:0}.stats-btn:hover{color:var(--text-primary);background:var(--border-light)}@supports (padding: env(safe-area-inset-top)){.app-header{padding-top:calc(1rem + env(safe-area-inset-top))}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-card: #ffffff;--bg-card-hover: #fafafa;--text-primary: #000000;--text-secondary: #666666;--text-muted: #999999;--accent: #000000;--accent-solid: #000000;--accent-light: #222222;--accent-glow: rgba(0, 0, 0, .1);--border-light: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .12);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 2px 8px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .04), 0 16px 40px rgba(0, 0, 0, .08);--font-display: "Playfair Display", Georgia, "Times New Roman", serif;--font-body: "Instrument Sans", -apple-system, "Helvetica Neue", sans-serif;--font: var(--font-body);--ease-out: cubic-bezier(.25, 1, .5, 1);--ease-spring: cubic-bezier(.34, 1.3, .64, 1);--radius-sm: 12px;--radius-md: 14px;--radius-lg: 16px;--radius-pill: 100px}body.dark-mode{--bg-primary: #000000;--bg-card: #000000;--bg-card-hover: #0a0a0a;--text-primary: #ffffff;--text-secondary: #999999;--text-muted: #666666;--accent: #ffffff;--accent-solid: #ffffff;--accent-light: #e5e5e5;--accent-glow: rgba(255, 255, 255, .1);--border-light: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .12)}html,body,#root{height:100%;width:100%;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{overscroll-behavior:none;-webkit-overflow-scrolling:touch;background:var(--bg-primary)}::-webkit-scrollbar{display:none}::selection{background:#000;color:#fff}body.dark-mode ::selection{background:#fff;color:#000}@keyframes glassReveal{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes clipReveal{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0% 0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}