@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--accent-strong: #F087B0;--accent-muted: #F5A8C4;--accent-surface: rgba(240, 135, 176, .1);--accent-border: rgba(240, 135, 176, .4);--accent-pink: #F087B0;--accent-coral-dark: #E06B94;--accent-glow: 0 0 20px rgba(240, 135, 176, .4);--gradient-accent: linear-gradient(135deg, var(--accent-coral-dark) 0%, var(--accent-pink) 50%, #F5A8C4 100%);--bg-app: #0A0C10;--bg-primary: #10131A;--bg-secondary: #0D1017;--bg-elevated: #161B26;--bg-glass: rgba(16, 19, 26, .85);--text-primary: #E5E7EB;--text-secondary: #D1D5DB;--text-muted: #9CA3AF;--text-prose: #D1D5DB;--border-neutral: rgba(255, 255, 255, .05);--border-subtle: rgba(255, 255, 255, .03);--shadow-elevated: 0 8px 60px rgba(0, 0, 0, .6), 0 2px 20px rgba(0, 0, 0, .4);--shadow-glass: 0 4px 30px rgba(0, 0, 0, .3);--radius-primary: 12px;--radius-secondary: 8px;--font-mono: "JetBrains Mono", "SF Mono", Monaco, monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-tertiary: var(--bg-elevated);--accent: var(--accent-strong);--accent-hover: var(--accent-muted);--border: var(--border-neutral);--success: #4ade80;--code-bg: var(--bg-secondary)}html,body,#root{height:100%}*{scrollbar-width:thin;scrollbar-color:transparent transparent}*:hover{scrollbar-color:rgba(255,255,255,.12) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:transparent;border-radius:5px;border:2px solid transparent;background-clip:content-box}*:hover::-webkit-scrollbar-thumb{background:#ffffff1f;border:2px solid transparent;background-clip:content-box}*::-webkit-scrollbar-thumb:hover{background:#fff3;border:2px solid transparent;background-clip:content-box}*::-webkit-scrollbar-corner{background:transparent}body{font-family:var(--font-sans);background:var(--bg-app);color:var(--text-primary);line-height:1.6}.app{height:100%;display:flex;flex-direction:column}.landing-page{max-width:700px;margin:0 auto;padding:4rem 2rem;overflow-x:hidden}.landing-page h1{font-size:2.75rem;font-weight:600;margin-bottom:.5rem;background:linear-gradient(135deg,#C4567F 0%,var(--accent-pink) 50%,#F5A0B8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.landing-page .tagline{color:var(--text-secondary);margin-bottom:2.5rem;font-size:1.1rem}.url-form{display:flex;gap:1rem}.url-form input{flex:1;padding:1rem 1.25rem;border:1px solid var(--border-neutral);border-radius:var(--radius-primary);background:var(--bg-primary);color:var(--text-primary);font-size:1rem;font-family:inherit;transition:border-color .3s ease,box-shadow .3s ease}.url-form input:focus{outline:none;border-color:var(--accent-strong);box-shadow:0 0 0 3px var(--accent-surface),var(--accent-glow)}.url-form input::placeholder{color:var(--text-muted)}.url-form button{padding:1rem 2rem;border:none;border-radius:var(--radius-primary);background:var(--gradient-accent);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap;box-shadow:var(--accent-glow)}.url-form button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 30px #f087b080}.url-form button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.format-hints{margin-top:2.5rem;padding:1.75rem;background:var(--bg-primary);border-radius:var(--radius-primary);border:1px solid var(--border-neutral)}.format-hints h3{font-size:.75rem;color:var(--text-muted);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}.format-hints ul{list-style:none}.format-hints li{margin-bottom:.875rem;color:var(--text-secondary);font-size:.9rem}.format-hints code{font-family:var(--font-mono);font-size:.8em;background:var(--bg-elevated);padding:.25em .5em;border-radius:4px;color:var(--accent-muted);overflow-wrap:anywhere}.local-stories,.recent-stories{margin-top:3rem}.local-stories h2,.recent-stories h2{font-size:1.25rem;margin-bottom:1rem;color:var(--text-secondary);font-weight:500}.local-stories ul,.recent-stories ul{list-style:none}.local-stories li,.recent-stories li{margin-bottom:.75rem}.local-stories button,.recent-stories button{width:100%;padding:1.25rem;border:1px solid var(--border-neutral);border-radius:var(--radius-primary);background:var(--bg-primary);color:var(--text-primary);text-align:left;cursor:pointer;transition:all .3s ease}.local-stories button:hover,.recent-stories button:hover{border-color:var(--accent-border);background:var(--accent-surface);transform:translate(4px)}.local-stories .story-title,.recent-stories .story-title{display:block;font-weight:500}.local-stories .story-meta,.recent-stories .story-meta{display:block;font-size:.875rem;color:var(--text-muted);margin-top:.375rem}.loading-view{display:flex;align-items:center;justify-content:center;height:100%;padding:2rem}.loading-content{text-align:center}.loading-content h1{font-size:1.5rem;margin-bottom:.5rem;font-weight:500}.loading-hint{color:var(--text-secondary)}.loading-spinner{width:48px;height:48px;border:2px solid var(--border-neutral);border-top-color:var(--accent-pink);border-radius:50%;margin:0 auto 1.5rem;animation:spin 1s linear infinite;box-shadow:var(--accent-glow)}@keyframes spin{to{transform:rotate(360deg)}}.error-view{display:flex;align-items:center;justify-content:center;height:100%;padding:2rem}.error-content{text-align:center;max-width:500px}.error-content h1{font-size:1.5rem;margin-bottom:1rem;color:#f87171;font-weight:500}.error-message{color:var(--text-secondary);margin-bottom:2rem;font-family:var(--font-mono);font-size:.9rem;background:var(--bg-primary);padding:1rem;border-radius:var(--radius-secondary);border:1px solid var(--border-neutral)}.error-actions{display:flex;gap:1rem;justify-content:center}.retry-button{padding:.75rem 1.5rem;border:none;border-radius:var(--radius-primary);background:var(--gradient-accent);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:var(--accent-glow)}.retry-button:hover{transform:translateY(-1px);box-shadow:0 0 30px #f087b080}.story-viewer{height:100%;display:flex;flex-direction:column}.story-header{display:flex;align-items:center;gap:1.5rem;padding:1rem 2rem;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-neutral);position:relative;z-index:10}.back-button{padding:.5rem 1rem;border:1px solid var(--border-neutral);border-radius:var(--radius-secondary);background:transparent;color:var(--text-muted);font-size:.875rem;cursor:pointer;transition:all .3s ease;flex-shrink:0}.back-button:hover{border-color:var(--accent-border);color:var(--accent-strong);background:var(--accent-surface)}.story-header h1{flex:1;font-size:1.375rem;font-weight:700;letter-spacing:-.02em;padding:0 1rem;background:linear-gradient(105deg,var(--accent-pink) 0%,#F5A8C4 35%,#F8FAFC 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.commit-hash{font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);background:var(--bg-elevated);padding:.375rem .75rem;border-radius:var(--radius-secondary);border:1px solid var(--border-subtle);flex-shrink:0}.story-body{flex:1;display:flex;overflow:hidden}.sidebar{width:240px;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-right:1px solid var(--border-neutral);overflow-y:auto;padding:1.5rem 0;flex-shrink:0}.sidebar h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);padding:0 1.25rem;margin-bottom:1rem;font-weight:600}.sidebar ul{list-style:none}.sidebar li{margin-bottom:.125rem;padding:.0625rem 0}.sidebar-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:1.1rem 1.25rem;border:none;border-left:3px solid transparent;background:transparent;color:var(--text-secondary);text-align:left;cursor:pointer;transition:all .2s ease;font-size:.9rem;font-family:inherit}.sidebar-item:hover{background:#ffffff0a;color:var(--text-primary);border-left-color:#f087b066}.sidebar-item.active{background:var(--accent-surface);color:var(--accent-strong);border-left-color:var(--accent-strong);font-weight:500;text-shadow:0 0 20px rgba(240,135,176,.3)}.sidebar-item .indicator{font-size:.625rem;opacity:.7;flex-shrink:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;line-height:1}.sidebar-item .label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.story-main{flex:1;overflow:hidden;display:flex;flex-direction:column;background:var(--bg-app)}.chapter-display{flex:1;display:flex;flex-direction:column;overflow:hidden}.chapter-content{flex:1;display:flex;overflow:hidden;position:relative}.code-panel{overflow-y:auto;padding:2rem;background:var(--bg-secondary)}.code-panel.empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem}.no-code{color:var(--text-muted);font-style:italic;font-size:.9rem}.code-panel.empty:has(.no-code):before{content:"</>";font-family:var(--font-mono);font-size:4rem;color:#ffffff08;position:absolute}.story-metadata{width:100%;max-width:480px;padding:2rem;background:var(--bg-elevated);border:1px solid var(--border-neutral);border-radius:var(--radius-primary)}.metadata-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:.375rem}.metadata-label:nth-of-type(n+2){margin-top:1.25rem}.metadata-value{color:var(--text-primary);font-size:.95rem;line-height:1.5}.metadata-repo{font-family:var(--font-mono);font-size:.875rem;color:var(--accent-strong)}.metadata-query{font-style:italic;color:var(--text-secondary)}.snippet{margin-bottom:2rem}.snippet:last-child{margin-bottom:0}.snippet-header{display:flex;justify-content:space-between;align-items:center;padding:.625rem 1rem;background:var(--bg-elevated);border-radius:var(--radius-primary) var(--radius-primary) 0 0;font-family:var(--font-mono);font-size:.8rem;border:1px solid var(--border-neutral);border-bottom:none}.file-path{color:var(--text-primary);background:var(--bg-primary);padding:.25rem .625rem;border-radius:var(--radius-secondary);font-weight:500}.line-range{color:var(--text-muted);font-size:.75rem}.snippet pre{margin:0;padding:1.25rem;border-radius:0 0 var(--radius-primary) var(--radius-primary);overflow-x:auto;font-size:.875rem;line-height:1.6;font-family:var(--font-mono);border:1px solid var(--border-neutral);border-top:none}.line-number{display:inline-block;width:3.5em;color:var(--text-muted);text-align:right;margin-right:1.25em;-webkit-user-select:none;user-select:none;opacity:.5;font-size:.8em}.explanation-panel{overflow-y:auto;padding:2.5rem 3rem;background:var(--bg-primary);max-width:none;box-shadow:var(--shadow-elevated);position:relative;z-index:1}.explanation-panel>*{max-width:65ch}.explanation-panel h1,.explanation-panel h2,.explanation-panel h3{font-family:var(--font-sans);margin-top:2rem;margin-bottom:1rem;color:var(--text-primary);letter-spacing:-.01em}.explanation-panel h1:first-child,.explanation-panel h2:first-child,.explanation-panel h3:first-child{margin-top:0}.explanation-panel h1{font-size:1.625rem;font-weight:600}.explanation-panel h2{font-size:1.375rem;font-weight:600}.explanation-panel h3{font-size:1.125rem;font-weight:600}.explanation-panel p{font-family:var(--font-sans);margin-bottom:1.125rem;line-height:1.6;color:var(--text-prose);font-size:1rem;font-weight:450;letter-spacing:.01em}.explanation-panel code{font-family:var(--font-mono);font-size:.875em;background:#f087b014;padding:.15em .4em;border-radius:4px;border:1px solid rgba(240,135,176,.12);color:var(--accent-strong);font-weight:450}.explanation-panel pre{background:var(--bg-secondary);padding:1.25rem;border-radius:var(--radius-primary);overflow-x:auto;margin-bottom:1.25rem;font-family:var(--font-mono);border:1px solid var(--border-neutral)}.explanation-panel pre code{background:none;padding:0;border:none;color:var(--text-secondary);font-weight:400}.explanation-panel ul,.explanation-panel ol{font-family:var(--font-sans);margin-bottom:1.125rem;padding-left:1.5rem;line-height:1.6;color:var(--text-prose);font-size:1rem;font-weight:450;letter-spacing:.01em}.explanation-panel li{margin-bottom:.5rem}.explanation-panel strong{color:var(--text-primary);font-weight:600}.explanation-panel a{color:var(--accent-strong);text-decoration:none;transition:all .2s ease;border-bottom:1px solid rgba(240,135,176,.4)}.explanation-panel a:hover{color:#f5c4d8;border-bottom-color:currentColor}.callout{background:var(--accent-surface);border-left:3px solid var(--accent-strong);border-radius:0 var(--radius-secondary) var(--radius-secondary) 0;padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:inset 0 0 30px #f087b00a}.callout-title{color:var(--accent-strong);font-family:var(--font-sans);font-weight:600;font-size:.8rem;margin-bottom:.625rem;text-transform:uppercase;letter-spacing:.05em}.callout p{font-family:var(--font-sans);font-size:.9375rem;font-weight:450;letter-spacing:.01em;line-height:1.6}.callout p:last-child{margin-bottom:0}.splitter{width:8px;background:var(--bg-app);cursor:col-resize;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s ease;position:relative;z-index:5}.splitter:hover{background:var(--bg-elevated)}.splitter-handle{width:3px;height:40px;background:var(--border-neutral);border-radius:2px;transition:all .3s ease}.splitter:hover .splitter-handle{background:var(--accent-border);height:60px}.splitter.dragging{background:var(--bg-elevated)}.splitter.dragging .splitter-handle{background:var(--accent-strong);box-shadow:var(--accent-glow);height:80px}.chapter-navigation{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 2rem;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border-neutral)}.nav-button{padding:.75rem 1.5rem;border:1px solid var(--border-neutral);border-radius:var(--radius-primary);background:transparent;color:var(--text-secondary);font-size:.9rem;font-family:inherit;font-weight:500;cursor:pointer;transition:all .3s ease}.nav-button:hover:not(:disabled){border-color:var(--accent-border);color:var(--accent-strong);background:var(--accent-surface)}.nav-button:disabled{opacity:.25;cursor:not-allowed}.nav-button.next{background:transparent;border:1.5px solid var(--accent-strong);color:var(--accent-strong);box-shadow:0 0 15px #f087b026}.nav-button.next:hover:not(:disabled){background:var(--accent-strong);color:var(--bg-app);border-color:var(--accent-strong);box-shadow:var(--accent-glow);transform:translate(2px)}.nav-button.next:disabled{border-color:var(--border-neutral);color:var(--text-muted);box-shadow:none}.chapter-counter{color:var(--text-muted);font-size:.875rem;font-family:var(--font-mono)}.mobile-tabs{display:flex;background:var(--bg-glass);border-bottom:1px solid var(--border-neutral);flex-shrink:0}.mobile-tab{flex:1;padding:.75rem 1rem;border:none;background:transparent;color:var(--text-muted);font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;border-bottom:2px solid transparent}.mobile-tab.active{color:var(--accent-strong);border-bottom-color:var(--accent-strong)}@media(max-width:768px){.sidebar,.splitter{display:none}.story-header{padding:.75rem 1rem;gap:.75rem}.story-header h1{font-size:1rem;padding:0 .5rem}.commit-hash{display:none}.explanation-panel{padding:1.5rem 1rem}.code-panel,.chapter-navigation{padding:1rem}.landing-page{padding:2rem 1rem}.landing-page h1{font-size:1.75rem}.url-form{flex-direction:column}}.diff-pre{margin:0;padding:.75rem 0;border-radius:0 0 var(--radius-primary) var(--radius-primary);overflow-x:auto;font-size:.875rem;line-height:1.6;font-family:var(--font-mono);border:1px solid var(--border-neutral);border-top:none;background:#282c34}.diff-line{display:flex;min-height:1.6em}.diff-line-added{background:#4ade801a}.diff-line-removed{background:#f871711a}.diff-line-context{background:transparent}.diff-gutter{display:inline-block;width:3.5em;text-align:right;padding-right:.5em;-webkit-user-select:none;user-select:none;opacity:.5;font-size:.8em;flex-shrink:0;line-height:1.6;padding-top:0;color:var(--text-muted)}.diff-gutter-old,.diff-gutter-new{color:var(--text-muted)}.diff-marker{display:inline-block;width:1.5em;text-align:center;-webkit-user-select:none;user-select:none;flex-shrink:0}.diff-line-added .diff-marker{color:#4ade80}.diff-line-removed .diff-marker{color:#f87171}.diff-line-context .diff-marker{color:var(--text-muted);opacity:.3}.diff-content{flex:1;white-space:pre;padding-right:1rem}.diff-line-added .diff-content{color:#86efac}.diff-line-removed .diff-content{color:#fca5a5}.diff-line-context .diff-content{color:var(--text-secondary)}.diff-badge{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.15rem .5rem;border-radius:9999px;background:#f087b026;color:var(--accent-strong);margin-left:.5rem}.pr-metadata{width:100%;max-width:480px;padding:2rem;background:var(--bg-elevated);border:1px solid var(--border-neutral);border-radius:var(--radius-primary)}.pr-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.pr-number{font-family:var(--font-mono);font-size:.875rem;color:var(--accent-strong);margin-right:.5rem}.pr-branch-info{font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);margin-top:.75rem;margin-bottom:.75rem}.pr-label{display:inline-block;font-size:.7rem;font-weight:500;padding:.15rem .5rem;border-radius:9999px;background:var(--accent-surface);color:var(--accent-muted);border:1px solid var(--accent-border);margin-right:.375rem;margin-bottom:.375rem}.pr-badge-link{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--accent-strong);background:var(--accent-surface);padding:.375rem .75rem;border-radius:var(--radius-secondary);border:1px solid var(--accent-border);text-decoration:none;flex-shrink:0;transition:all .2s ease}.pr-badge-link:hover{background:#f087b033;box-shadow:var(--accent-glow)}.callout-concern{border-left-color:#f87171;background:#f8717114;box-shadow:inset 0 0 30px #f871710a}.callout-concern .callout-title{color:#f87171}.callout-suggestion{border-left-color:#60a5fa;background:#60a5fa14;box-shadow:inset 0 0 30px #60a5fa0a}.callout-suggestion .callout-title{color:#60a5fa}.callout-question{border-left-color:#facc15;background:#facc1514;box-shadow:inset 0 0 30px #facc150a}.callout-question .callout-title{color:#facc15}