@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}:root{--bg-primary:#0a0a0a;--bg-secondary:#141414;--bg-tertiary:#1f1f1f;--bg-elevated:#252525;--border:#2a2a2a;--border-hover:#3a3a3a;--border-focus:#4a4a4a;--text-primary:#f5f5f5;--text-secondary:#a0a0a0;--text-tertiary:#666;--text-inverse:#0a0a0a;--accent:#e0e0e0;--accent-hover:#fff;--accent-muted:#888;--success:#4ade80;--success-muted:#22543d;--error:#f87171;--error-muted:#7f1d1d;--warning:#fbbf24;--warning-muted:#78350f;--info:#60a5fa;--info-muted:#1e3a5f;--font-display:"Playfair Display",Georgia,serif;--font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"SF Mono","Fira Code","Fira Mono",Menlo,monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px #0006;--shadow-md:0 4px 6px #0006;--shadow-lg:0 10px 15px #00000080;--shadow-xl:0 20px 25px #00000080;--shadow-glow:0 0 20px #ffffff1a;--shadow-glow-sm:0 0 10px #ffffff0d;--transition-fast:.15s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--transition-spring:.3s cubic-bezier(.34,1.56,.64,1);--z-base:0;--z-dropdown:100;--z-sticky:200;--z-modal-backdrop:300;--z-modal:400;--z-toast:500;--sidebar-width:260px;--header-height:64px;--mobile-nav-height:72px;--max-content-width:1200px}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--text-primary);background-color:var(--bg-primary);overflow-x:hidden;min-height:100vh;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-primary);font-weight:600;line-height:1.2}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-4xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{color:var(--text-secondary);line-height:1.7}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-hover)}::selection{color:var(--text-primary);background-color:#fff3}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-success{color:var(--success)}.text-error{color:var(--error)}.text-warning{color:var(--warning)}.font-display{font-family:var(--font-display)}.font-body{font-family:var(--font-body)}.font-mono{font-family:var(--font-mono)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;-webkit-box-orient:vertical}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;overflow:hidden;-webkit-box-orient:vertical}.glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);background:#141414cc}.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all var(--transition-base)}.card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-glow-sm)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fadeIn{animation:fadeIn var(--transition-base)ease-out}.animate-fadeInUp{animation:fadeInUp var(--transition-slow)ease-out}.animate-slideInFromBottom{animation:slideInFromBottom var(--transition-slow)ease-out}.animate-pulse{animation:2s ease-in-out infinite pulse}.animate-spin{animation:1s linear infinite spin}.skeleton{background:linear-gradient(90deg,var(--bg-tertiary)0%,var(--bg-elevated)50%,var(--bg-tertiary)100%);animation:1.5s ease-in-out infinite shimmer;border-radius:var(--radius-md);background-size:200% 100%}@media (max-width:640px){:root{--text-5xl:2.25rem;--text-6xl:2.75rem}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}}@media (min-width:641px) and (max-width:1023px){:root{--sidebar-width:220px}}@media (min-width:1024px){:root{--sidebar-width:260px}}#root{min-height:100vh}.overlay{position:fixed;display:flex;backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items: center;padding:2rem;inset:0}.modal{display:flex;overflow:hidden;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);flex-direction:column;width:100%;max-height:calc(100dvh - 4rem)}.modal-sm{max-width:400px}.modal-md{max-width:500px}.modal-lg{max-width:640px}.modal-xl{max-width:900px}.modal-header{display:flex;border-bottom:1px solid var(--border);justify-content:space-between;align-items: center;padding:1.25rem 1.5rem}.modal-header h2{margin:0;font-size:1.25rem}.modal-body{overflow-y:auto;flex:1;padding:1.5rem}.icon-button{display:inline-flex;color:var(--text-tertiary);border-radius:var(--radius-md);cursor:pointer;background:0 0;border:0;justify-content:center;align-items: center;padding:.4rem}.icon-button:hover{background:var(--bg-tertiary);color:var(--text-primary)}.icon-button:focus-visible{background:var(--bg-tertiary);color:var(--text-primary)}.image-lightbox{background:#000000e6}.image-lightbox img{object-fit:contain;border-radius:var(--radius-lg);cursor:zoom-out;max-width:100%;max-height:100%}.lightbox-close{position:absolute;background:var(--bg-tertiary);top:1rem;right:1rem}.editor-stack{display:flex;flex-direction:column;gap:1rem}.editor-input{font:inherit;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;padding:.75rem}textarea.editor-input{resize:vertical;min-height:120px}.editor-input:focus{border-color:var(--border-focus)}.editor-actions{display:flex;border-top:1px solid var(--border);justify-content:flex-end;align-items: center;gap:.5rem;padding-top:.5rem}.editor-error{color:var(--error);white-space:pre-wrap;margin:0;font-size:.8125rem}.editor-hint{color:var(--text-tertiary);margin:0;font-size:.8125rem}.editor-section-title{margin:0;font-size:.875rem;font-weight:600}.image-previews{display:flex;flex-wrap:wrap;gap:.5rem}.image-preview{position:relative;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-tertiary);display:flex;justify-content:center;align-items: center;width:80px;height:80px}.image-preview img{object-fit:cover;border-radius:inherit;width:100%;height:100%}.image-preview .remove-image{position:absolute;background:var(--bg-secondary);border-radius:100%;top:2px;right:2px}.url-item{display:flex;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);align-items: center;gap:.5rem;padding:.5rem .75rem;font-size:.8125rem}.url-item a{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.bookmark-card{cursor:pointer;position:relative;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color var(--transition-fast);padding:1.25rem}.bookmark-card:hover,.bookmark-card:focus-within{border-color:var(--border-hover)}.bookmark-card-heading{display:flex;align-items: flex-start;gap:.75rem}.bookmark-open{color:var(--text-primary);text-align:left;font:inherit;cursor:pointer;background:0 0;border:0;flex:1;min-width:0;padding:0}.bookmark-open h3{font-family:var(--font-body);margin:0;font-size:1rem;line-height:1.4}.bookmark-actions{display:flex;flex-shrink:0;gap:.25rem}.bookmark-content{white-space:pre-wrap;overflow-wrap:anywhere;margin:.5rem 0 0;font-size:.875rem;line-height:1.6}.bookmark-images{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.bookmark-image{background:var(--bg-tertiary);border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1;cursor:zoom-in;border:0;width:calc(50% - .25rem);max-width:200px;padding:0}.bookmark-image:only-child{aspect-ratio:16/9;width:100%;max-width:400px}.bookmark-image img{object-fit:cover;width:100%;height:100%}.bookmark-urls{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;font-size:.75rem}.bookmark-urls a{background:var(--bg-tertiary);border-radius:var(--radius-sm);padding:.25rem .5rem}.overlay-drawer{justify-content:flex-end;padding:0}@media (max-width:640px){.overlay{padding:1rem}.modal{max-height:calc(100dvh - 2rem)}.modal-body{padding:1rem}.overlay-drawer{padding:0}}.app-main{margin-left:var(--sidebar-width);padding-bottom:0}.app-desktop-nav{display:flex}.app-mobile-nav{display:none}@media (max-width:1023px){.app-main{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));margin-left:0}.app-desktop-nav{display:none}.app-mobile-nav{display:flex}}@media (hover:hover){.button:not(:disabled):hover,.logo-hover:hover{transform:scale(1.02)}.feature-hover:hover{transform:translateY(-4px)}}.button:not(:disabled):active{transform:scale(.98)}.logo-hover{transition:transform .2s}.decorative-pulse{animation:2s ease-in-out infinite decorative-pulse}.scroll-bounce{animation:1.5s ease-in-out infinite scroll-bounce}.toast-enter{animation:.2s ease-out toast-enter}@keyframes decorative-pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:1}}@keyframes scroll-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}@keyframes toast-enter{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.button,.logo-hover,.feature-hover{transition:none!important}.button:not(:disabled):hover,.button:not(:disabled):active,.logo-hover:hover,.feature-hover:hover{transform:none}.decorative-pulse,.scroll-bounce,.toast-enter{animation:none}}
