*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%;width:100%}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{line-height:1.5;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:300}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}p,li{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}button{cursor:pointer;border:none;background:none}ul,ol{list-style:none}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--color-primary: #FFC800;--color-primary-hover: #E6B400;--color-secondary: #7fd7bc;--color-secondary-hover: #047857;--color-accent: #EA580C;--color-danger: #DC2626;--bg-app: #FAFAFA;--bg-surface: #FFFFFF;--bg-muted: #F5F5F5;--bg-hover: #F0F0F0;--bg-active: #E5E5E5;--text: #1F2937;--text-muted: #4B5563;--text-subtle: #9CA3AF;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--border: #E5E7EB;--border-muted: rgba(0, 0, 0, .06);--shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);--shadow-lg: 0 4px 24px rgba(0, 0, 0, .08), 0 8px 48px rgba(0, 0, 0, .05);--transition: .15s ease;--font-main: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-title: "Pally", sans-serif;--font-editor: "Zilla Slab", serif;--font-mono: "JetBrains Mono", monospace;--radius: .5rem;--radius-lg: .75rem;--radius-full: 999px;--space-xxs: .125rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem;--breakpoint-sm: 640px;--breakpoint-md: 1024px;--breakpoint-lg: 1280px}::-webkit-scrollbar-corner{background:transparent}header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-lg)}.logo-title{display:flex;align-items:center;gap:var(--space-sm)}.logo{height:2rem;width:auto}.toolbar,.toolbar-right{display:flex;align-items:center;gap:var(--space-xs)}.toolbar-separator{width:1px;height:var(--space-xl);margin:0 var(--space-xs)}.statusbar{display:flex;align-items:center;justify-content:center;padding:var(--space-lg);padding-top:0;padding-bottom:var(--space-sm);position:relative}.status-icons{position:absolute;right:var(--space-lg);display:flex;align-items:center;gap:var(--space-md)}.status-icons a,.status-icons .copyright{display:flex;align-items:center;gap:var(--space-xs)}.status-icons svg{width:var(--space-lg);height:var(--space-lg)}.panels{gap:var(--space-sm);padding:var(--space-sm)}.panel{flex-shrink:0;width:300px;display:flex;flex-direction:column}.panel.center{flex:1;width:auto}.panel-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md)}.panel-header .actions{display:flex;align-items:center;gap:var(--space-xxs)}.content{flex:1;min-height:0;overflow-y:auto;padding:0 var(--space-sm) var(--space-sm);display:flex;flex-direction:column;gap:var(--space-sm)}label{display:flex;flex-direction:column;gap:var(--space-xs)}.dropzone{width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.dropzone img{width:100%;height:100%;object-fit:cover}.dropzone p{margin:0;text-align:center;padding:var(--space-md);font-size:var(--text-sm)}.dialog-overlay{position:fixed;inset:0;z-index:100}.dialog-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.dialog-preview{width:90vw;max-width:900px;height:85vh}.dialog-title{margin:0;padding:var(--space-lg) var(--space-xl)}.dialog-close{position:sticky;top:var(--space-md);float:right;margin-right:var(--space-md);padding:var(--space-sm);display:flex;align-items:center;justify-content:center;z-index:10}.overflow-menu{position:absolute;right:var(--space-xs);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;z-index:10}.overflow-btn{padding:var(--space-xs);display:flex;align-items:center;justify-content:center}.overflow-btn svg{width:var(--space-lg);height:var(--space-lg)}.context-menu-content{min-width:8rem;padding:var(--space-xs);z-index:50}.menu-header{padding:var(--space-sm) var(--space-sm) var(--space-xs) var(--space-sm);margin-bottom:var(--space-xs)}.context-menu-item{display:flex;align-items:flex-start;gap:var(--space-md);width:100%;padding:var(--space-xs) var(--space-sm)}.menu-icon{width:var(--space-lg);height:var(--space-lg);margin-top:var(--space-xxs);flex-shrink:0}.menu-item-content{display:flex;flex-direction:column;gap:var(--space-xxs)}.context-menu-separator{height:1px;margin:var(--space-xs) 0}.context-menu-item svg{width:var(--space-md);height:var(--space-md)}.view-toggle{display:flex;padding:var(--space-xs);gap:var(--space-xxs)}.view-toggle-item{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md)}.callout{display:flex;align-items:flex-start;gap:var(--space-lg);padding:var(--space-lg) var(--space-xl)}.callout svg{flex-shrink:0}body{background-color:var(--bg-app);font-family:var(--font-main);font-weight:var(--weight-normal)}.main-content{padding:var(--space-sm) 0}.panels{gap:var(--space-lg);padding:0 var(--space-lg)}h1,h2,h3,h4,h5,h6{font-family:var(--font-title)}header h1{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin:0;color:var(--text)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0000001a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#0003}.panel{border-radius:var(--radius-lg);background-color:transparent}.surface{border-radius:var(--radius-lg);background-color:var(--bg-surface);box-shadow:var(--shadow-lg)}.panel-header h2{margin:0;font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;padding:var(--space-sm) 0}.statusbar{font-size:var(--text-xs);color:var(--text-subtle)}.status-text{font-size:var(--text-xs)}.status-icons a,.status-icons .copyright{color:var(--text-subtle);text-decoration:none;transition:color var(--transition)}.status-icons a:hover{color:var(--text)}.toolbar-separator{background-color:var(--border-muted);width:1px;height:var(--space-lg);margin:0 var(--space-xs)}.toolbar-btn{border-radius:var(--radius);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition);border:none;background:transparent;color:var(--text-muted);display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);min-height:36px;line-height:1}.toolbar-btn svg{width:var(--space-lg);height:var(--space-lg);opacity:.7}.toolbar-btn:hover{color:var(--text)}.toolbar-btn:hover svg{opacity:1}.toolbar-btn.icon-only{padding:var(--space-sm) var(--space-md);border-radius:var(--radius)}.toolbar-btn.icon-only:hover,.toolbar-btn.tertiary:hover{background-color:var(--bg-muted)}.toolbar-btn.secondary{background-color:transparent;color:var(--text-muted);border:1px solid var(--border)}.toolbar-btn.secondary:hover{background-color:var(--bg-muted);color:var(--text)}.toolbar-btn.primary{background-color:var(--color-primary);color:var(--text);font-weight:var(--weight-semibold)}.toolbar-btn.primary:hover{filter:brightness(1.05)}.toolbar-btn:active{transform:scale(.98)}.tooltip{background-color:var(--text);color:var(--bg-surface);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius);font-size:var(--text-xs);font-weight:var(--weight-medium);box-shadow:0 2px 8px #00000026;z-index:1000;animation:tooltip-fade .15s ease}@keyframes tooltip-fade{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.callout{border-radius:var(--radius-lg);color:var(--text);font-size:var(--text-sm);line-height:1.6;background-color:#00ff2214;border:1px solid rgb(165 255 0 / 15%)}.callout svg{color:var(--text-muted)}.format-item[data-state=open] .format-trigger{color:var(--text)!important;font-weight:var(--weight-semibold)}.format-item[data-state=open] .format-trigger svg{color:var(--color-secondary)}label{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em}input[type=text],input[type=file],input[type=number]{padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius);font-family:var(--font-main);font-size:var(--text-sm);font-weight:var(--weight-medium);transition:all var(--transition);background-color:var(--bg-hover);color:var(--text)}input[type=text]::placeholder,input[type=number]::placeholder{color:var(--text-subtle)}input[type=text]:hover,input[type=number]:hover{background-color:var(--bg-active)}input[type=text]:focus,input[type=number]:focus{outline:none;background-color:var(--bg-surface);box-shadow:0 0 0 2px var(--color-primary)}select{padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius);font-family:var(--font-main);font-size:var(--text-sm);font-weight:var(--weight-medium);transition:all var(--transition);background-color:var(--bg-hover);cursor:pointer;color:var(--text)}select:hover{background-color:var(--bg-active)}select:focus{outline:none;background-color:var(--bg-surface);box-shadow:0 0 0 2px var(--color-primary)}textarea{padding:var(--space-md);border:none;border-radius:var(--radius);font-family:var(--font-main);font-size:var(--text-sm);font-weight:var(--weight-medium);transition:all var(--transition);background-color:var(--bg-hover);resize:vertical;min-height:2.5rem;line-height:1.6;color:var(--text)}textarea:hover{background-color:var(--bg-active)}textarea:focus{outline:none;background-color:var(--bg-surface);box-shadow:0 0 0 2px var(--color-primary)}textarea::placeholder{color:var(--text-subtle)}textarea.expandable{min-height:2.5rem;resize:none;overflow:hidden;transition:min-height var(--transition),background-color var(--transition),box-shadow var(--transition)}textarea.expandable:focus{min-height:6rem;resize:vertical;overflow:auto}.label-with-hint{display:flex;align-items:center;gap:var(--space-xs)}.checkbox-inline{display:flex;flex-direction:row;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);font-weight:var(--weight-normal);color:var(--text);text-transform:none;letter-spacing:normal;cursor:pointer;margin-top:var(--space-sm);width:fit-content}.checkbox-inline input[type=checkbox]{appearance:auto;cursor:pointer;width:1.1em;height:1.1em;margin:0;display:inline-block}.hint-icon{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:help;color:var(--text-subtle);transition:color var(--transition)}.hint-icon:hover{color:var(--text-muted)}.dropzone{border:1px dashed var(--border);border-radius:var(--radius);transition:all var(--transition);background-color:transparent}.dropzone:hover,.dropzone.dragging{border-color:var(--color-primary);background-color:#66bb6a08}.dropzone p{font-size:var(--text-sm);color:var(--text-subtle)}.dropzone img{border-radius:var(--radius)}.dialog-overlay{background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade-in .2s ease}.dialog-content{background-color:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border-muted);box-shadow:0 8px 32px #0000001f;animation:dialog-slide .2s ease}.dialog-title{font-family:var(--font-main);font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text)}.dialog-close{border:none;background:transparent;border-radius:var(--radius);cursor:pointer;color:var(--text-subtle);transition:all var(--transition)}.dialog-close:hover{background-color:var(--bg-muted);color:var(--text)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes dialog-slide{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}.overflow-btn{opacity:0;pointer-events:none;transition:opacity var(--transition);background:transparent;border:none;border-radius:var(--radius);color:var(--text-subtle);cursor:pointer}.toc-item:hover .overflow-btn,.overflow-btn[data-state=open]{opacity:1;pointer-events:auto}.overflow-btn:hover,.overflow-btn[data-state=open]{background-color:var(--bg-muted);color:var(--text)}.context-menu-content{background-color:var(--bg-surface);border-radius:var(--radius);border:1px solid var(--border-muted);box-shadow:0 4px 16px #0000001a;animation:menu-fade .1s ease}.menu-header{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.context-menu-item{font-size:var(--text-sm);color:var(--text);border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition);-webkit-user-select:none;user-select:none;outline:none}.menu-icon{color:var(--text-subtle)}.context-menu-item:hover .menu-icon,.context-menu-item[data-highlighted] .menu-icon{color:var(--text)}.menu-item-label{font-weight:var(--weight-medium);color:var(--text)}.menu-item-desc{font-size:var(--text-xs);color:var(--text-subtle)}.context-menu-item:hover,.context-menu-item[data-highlighted]{background-color:var(--bg-muted)}.context-menu-item.danger{color:var(--color-danger)}.context-menu-item.danger:hover,.context-menu-item.danger[data-highlighted]{background-color:#d32f2f0f}.context-menu-separator{background-color:var(--border-muted)}@keyframes menu-fade{0%{opacity:0}to{opacity:1}}.view-toggle{background-color:var(--bg-surface);border-radius:99px;padding:5px;gap:4px;box-shadow:0 8px 20px -4px #00000014}.view-toggle-item{border-radius:99px;font-size:.8125rem;font-weight:var(--weight-bold);cursor:pointer;transition:all var(--transition);border:none;background:transparent;color:var(--text-muted);display:flex;align-items:center;gap:var(--space-sm);padding:8px 24px}.view-toggle-item:hover{color:var(--text)}.view-toggle-item[data-state=on]{background-color:var(--color-primary);color:#1a1a1a;box-shadow:0 3px 20px 1px #ffb40040}.format-content .toolbar-btn.primary{background-color:var(--color-secondary);color:var(--text)}.small-text{font-size:var(--text-xs);color:var(--text-subtle)}.toc-item{border-radius:var(--radius);transition:background-color var(--transition)}.toc-item:hover{background-color:var(--bg-muted)}.toc-item.active{background-color:#66bb6a1a}.toc-item.active .toc-text{color:var(--color-primary);font-weight:var(--weight-medium)}@keyframes accordion-open{0%{opacity:0;height:0}to{opacity:1;height:var(--bits-accordion-content-height)}}@keyframes accordion-close{0%{opacity:1;height:var(--bits-accordion-content-height)}to{opacity:0;height:0}}.panel.surface{background-color:var(--bg-surface)}
