@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap");:root{--font-serif:"Georgia","Times New Roman",serif;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--font-size-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);--font-size-sm:clamp(0.875rem,0.8rem + 0.375vw,1rem);--font-size-base:clamp(1rem,0.925rem + 0.375vw,1.125rem);--font-size-lg:clamp(1.125rem,1rem + 0.625vw,1.25rem);--font-size-xl:clamp(1.25rem,1.1rem + 0.75vw,1.5rem);--color-bg-elevated:#ffffff;--color-border:rgba(26,25,24,0.08);--color-text-primary:#1a1918;--color-text-secondary:#5c5956;--color-text-muted:#8b8680;--color-a1:#e8f5e8;--color-a2:#d4ead4;--color-b1:#fff4d6;--color-b2:#ffe8b3;--color-c1:#ffd4d4;--color-c2:#ffb3b3;--space-xs:clamp(0.25rem,0.225rem + 0.125vw,0.375rem);--space-sm:clamp(0.5rem,0.45rem + 0.25vw,0.75rem);--space-md:clamp(1rem,0.9rem + 0.5vw,1.5rem);--space-lg:clamp(1.5rem,1.35rem + 0.75vw,2.25rem);--space-xl:clamp(2rem,1.8rem + 1vw,3rem);--shadow-md:0 4px 6px rgba(26,25,24,0.04),0 2px 4px rgba(26,25,24,0.06);--shadow-xl:0 20px 25px rgba(26,25,24,0.04),0 10px 10px rgba(26,25,24,0.08);--transition-base:200ms ease;--line-height-relaxed:1.8}.story-content-enhanced{font-family:var(--font-serif)!important;font-size:var(--font-size-lg);color:var(--color-text-primary);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:var(--space-xl);max-width:800px;margin:0 auto;overflow-x:hidden}.story-content-enhanced,.story-sentence-wrapper{line-height:var(--line-height-relaxed);width:100%;box-sizing:border-box}.story-sentence-wrapper{margin-bottom:var(--space-lg);overflow:visible;padding-bottom:var(--space-xs)}.german-text{font-size:var(--font-size-lg)!important;line-height:var(--line-height-relaxed)!important;color:var(--color-text-primary)!important;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:var(--space-xs);width:100%;overflow-wrap:break-word;word-wrap:break-word;word-break:normal;box-sizing:border-box}.german-text,.translation-text-enhanced{font-family:var(--font-serif)!important;font-weight:400!important}.translation-text-enhanced{font-size:calc(var(--font-size-base) * .9)!important;color:var(--color-text-secondary)!important;line-height:1.5;margin-top:var(--space-xs);padding:0;font-style:normal!important}.clickable-word{cursor:pointer;transition:all var(--transition-base);border-radius:3px;padding:1px 2px;margin:0 1px;display:inline;position:relative;border-bottom:1px dotted rgba(59,130,246,.2);color:inherit;word-break:keep-all;white-space:nowrap}.clickable-word[data-pinned=true]{background-color:rgba(59,130,246,.25);transform:translateY(-1px);box-shadow:0 3px 6px rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.3)}.vocab-highlight{position:relative;padding:3px 8px;border-radius:6px;cursor:pointer;transition:all var(--transition-base);display:inline-block;margin:1px}.vocab-highlight.a1{background:var(--color-a1);border-bottom:2px solid #90c890}.vocab-highlight.a2{background:var(--color-a2);border-bottom:2px solid #7ab87a}.vocab-highlight.b1{background:var(--color-b1);border-bottom:2px solid #f0c674}.vocab-highlight.b2{background:var(--color-b2);border-bottom:2px solid #e5a843}.vocab-highlight.c1{background:var(--color-c1);border-bottom:2px solid #ff9999}.vocab-highlight.c2{background:var(--color-c2);border-bottom:2px solid #cc6666}@media (max-width:768px){.story-content-enhanced{padding:var(--space-md);font-size:var(--font-size-lg)}.german-text{font-size:var(--font-size-lg)!important;line-height:1.7!important}.translation-text-enhanced{font-size:var(--font-size-sm);line-height:1.5;margin-top:var(--space-sm)}.clickable-word,.vocab-highlight{padding:6px 8px;margin:4px 3px;min-height:36px;min-width:36px;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:rgba(59,130,246,.2);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:visible;text-overflow:ellipsis}.clickable-word[data-pinned=true] .inline-tooltip{min-width:280px;max-width:calc(100vw - 32px);bottom:calc(100% + 16px);padding:var(--space-lg);font-size:var(--font-size-base);left:50%;transform:translateX(-50%) scale(1)}.clickable-word[data-pinned=true]:first-child .inline-tooltip,.clickable-word[data-pinned=true]:nth-child(-n+2) .inline-tooltip{left:0;transform:translateX(0) scale(1)}.clickable-word[data-pinned=true]:last-child .inline-tooltip,.clickable-word[data-pinned=true]:nth-last-child(-n+2) .inline-tooltip{right:0;left:auto;transform:translateX(0) scale(1)}.inline-tooltip .tooltip-word{font-size:var(--font-size-xl)}.inline-tooltip .tooltip-translation{font-size:var(--font-size-lg)}.inline-tooltip .vocab-add-btn{width:36px;height:36px;font-size:20px;top:var(--space-md);right:var(--space-md)}}@media (max-width:600px){.story-content-enhanced{padding:var(--space-lg) var(--space-md)}.german-text{font-size:var(--font-size-base)!important;line-height:1.8!important;word-spacing:.1em;letter-spacing:.01em}.clickable-word,.vocab-highlight{padding:4px 6px;margin:3px 4px;font-size:var(--font-size-base);min-height:36px;min-width:auto;white-space:nowrap;word-break:keep-all}.clickable-word.long-word{white-space:normal;word-break:break-word}.story-sentence-wrapper{margin-bottom:var(--space-lg);padding:0 var(--space-xs)}}@media (max-width:412px){.story-content-enhanced{padding:var(--space-md)}.clickable-word,.vocab-highlight{padding:5px 7px;margin:3px 2px;font-size:var(--font-size-base);min-height:34px;min-width:34px}.clickable-word[data-pinned=true] .inline-tooltip{min-width:280px;max-width:calc(100vw - 32px);left:50%;transform:translateX(-50%) scale(1)}}@media (max-width:375px){.story-content-enhanced{padding:var(--space-sm)}.german-text{font-size:var(--font-size-base)!important;line-height:1.8!important}.translation-text-enhanced{font-size:var(--font-size-xs)}.clickable-word,.vocab-highlight{padding:4px 6px;margin:2px 1px;font-size:var(--font-size-sm);min-height:32px;min-width:32px}.clickable-word[data-pinned=true] .inline-tooltip{min-width:260px;max-width:calc(100vw - 24px);left:50%;transform:translateX(-50%) scale(1)}}@media (max-width:360px){.story-content-enhanced{padding:var(--space-sm)}.clickable-word,.vocab-highlight{padding:3px 5px;margin:1px;font-size:var(--font-size-sm);min-height:30px;min-width:30px;white-space:normal;word-break:break-word}.clickable-word[data-pinned=true] .inline-tooltip{min-width:240px;max-width:calc(100vw - 16px);left:8px;right:8px;transform:none;margin:0}}.clickable-word:focus,.vocab-highlight:focus{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.1);border-radius:4px}.clickable-word:focus-visible,.vocab-highlight:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.15)}.clickable-word.clicking,.vocab-highlight.clicking{transform:scale(1.02);transition:all .1s ease}.inline-tooltip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) scale(.95);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:12px;padding:var(--space-md);box-shadow:var(--shadow-xl);min-width:240px;max-width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 100px);opacity:0;visibility:hidden;transition:all var(--transition-base);z-index:1000;pointer-events:none;word-wrap:break-word;overflow-wrap:break-word;contain:layout}.clickable-word[data-pinned=true] .inline-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) scale(1);pointer-events:auto;border:2px solid rgba(59,130,246,.3)}.inline-tooltip[data-position=bottom]{top:calc(100% + 12px);bottom:auto}.inline-tooltip[data-position=left]{right:calc(100% + 12px);left:auto;bottom:50%;transform:translateY(50%) scale(.95)}.inline-tooltip[data-position=left][data-pinned=true]{transform:translateY(50%) scale(1)}.inline-tooltip[data-position=right]{left:calc(100% + 12px);right:auto;bottom:50%;transform:translateY(50%) scale(.95)}.inline-tooltip[data-position=right][data-pinned=true]{transform:translateY(50%) scale(1)}.clickable-word[data-pinned=true]:first-child .inline-tooltip:not([data-position]),.clickable-word[data-pinned=true]:nth-child(-n+3) .inline-tooltip:not([data-position]){left:16px;transform:translateX(0) scale(1)}.clickable-word[data-pinned=true]:last-child .inline-tooltip:not([data-position]),.clickable-word[data-pinned=true]:nth-last-child(-n+3) .inline-tooltip:not([data-position]){right:16px;left:auto;transform:translateX(0) scale(1)}.inline-tooltip .tooltip-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-sm);gap:var(--space-sm);flex-wrap:nowrap}.inline-tooltip .tooltip-word{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);flex:1;margin-right:var(--space-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inline-tooltip .tooltip-level{font-size:10px;padding:3px 7px;border-radius:4px;font-weight:600;flex-shrink:0;white-space:nowrap;margin-left:auto}.inline-tooltip .tooltip-level.a1{background:var(--color-a1);color:#4a7c4a}.inline-tooltip .tooltip-level.a2{background:var(--color-a2);color:#3a6b3a}.inline-tooltip .tooltip-level.b1{background:var(--color-b1);color:#8b6914}.inline-tooltip .tooltip-level.b2{background:var(--color-b2);color:#7a5812}.inline-tooltip .tooltip-level.c1{background:var(--color-c1);color:#c53030}.inline-tooltip .tooltip-level.c2{background:var(--color-c2);color:#a53030}.inline-tooltip .tooltip-type{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-xs)}.inline-tooltip .tooltip-translation{font-size:var(--font-size-base);color:var(--color-text-secondary);padding-top:var(--space-xs);border-top:1px solid var(--color-border)}.inline-tooltip .loading-text{color:var(--color-text-muted);font-style:italic;animation:pulse 1.5s ease-in-out infinite}.inline-tooltip .error-text{color:#dc2626;font-style:italic}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.inline-tooltip .vocab-add-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:6px;background:var(--color-accent,#22c55e);color:white;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;font-weight:600;transition:all var(--transition-base);pointer-events:auto;z-index:200;flex-shrink:0;margin-left:var(--space-sm)}.inline-tooltip .vocab-add-btn:hover{background:var(--color-accent-hover,#16a34a);transform:scale(1.1);box-shadow:var(--shadow-md)}.inline-tooltip .vocab-add-btn:active{transform:scale(.95)}.inline-tooltip .vocab-add-btn.added{background:#22c55e;animation:success-pulse .5s ease}@keyframes success-pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}