:root{--color-black: #000000;--color-grey-0: #1b1b1d;--color-grey-1: #20242a;--color-grey-2: #353b45;--color-lt-grey-1: #434b5b;--color-lt-grey-2: #576175;--color-lt-grey-3: #69697d;--color-accent: #add8f5;--color-accent-light: #f5f5f5;--color-white: #ffffff;--color-red-1: #8c0000;--color-red-2: #8c0000;--color-red-3: #c80000;--color-header: var(--color-black);--color-text-primary: var(--color-white);--color-page-bg: var(--color-grey-0);--color-btn-bg: var(--color-lt-grey-1);--color-btn-hover: var(--color-lt-grey-2);--color-btn-border: var(--color-lt-grey-3);--color-dropdown-bg: var(--color-lt-grey-1);--color-tooltip-bg: var(--color-grey-1);--color-content-border: var(--color-lt-grey-3);--color-panel-bg: var(--color-grey-1);--color-panel-fore: var(--color-white);--color-nuke-border: var(--color-red-3);--color-nuke-background: var(--color-red-1);--color-nuke-background-hover: var(--color-red-2);--space-xs: 4px;--space-sm: 8px;--space-lg: 16px;--space-xl: 24px;--label-width-inline: 80px;--radius: 4px;--toolbar-gap: var(--space-sm);--toolbar-margin: 10px;--toolbar-padding: 10px;--toolbar-max-width: 700px;--font-sm: 13px;--font-md: 15px}html,body{color:var(--color-white);overflow-x:hidden;margin:0;padding:0;font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:1em;line-height:1.5em;background-color:var(--color-grey-0);overscroll-behavior-y:none}body{display:flex;flex-direction:column;height:100vh}h1,h2,h3,h4,h5,h6,p{font-size:1em;margin:0;padding:0;font-weight:400}p{margin:1em}a:link,a:visited,a:hover,a:active{color:var(--color-accent);text-decoration:none}img{border:none}button{padding:var(--toolbar-padding);color:var(--color-panel-fore)!important;background:var(--color-btn-bg);border:1px solid var(--color-btn-border);border-radius:0;flex:0 0 auto}button:hover{background:var(--color-btn-hover)}#menu-items>button,#menu-items>.button:not(.checkbox){display:inline-flex;align-items:center;justify-content:center;padding:var(--toolbar-padding, .5em 1em);color:var(--color-panel-fore);background-color:var(--color-btn-bg);border:1px solid var(--color-btn-border);border-radius:0;cursor:pointer;transition:background .2s,border-color .2s}#menu-items>button:hover,#menu-items>.button:not(.checkbox):hover{background-color:var(--color-btn-hover)}.button.checkbox+.button.checkbox{margin-left:var(--space-lg)}#menu-items>div{display:flex;align-items:center;gap:6px}.button.nuke{border-radius:0;border:1px solid var(--color-nuke-border)!important;background-color:var(--color-nuke-background)!important}.button.copy{padding:0 30px}.site-logo{height:36px;display:inline-block;vertical-align:middle;margin-right:var(--space-lg)}header,.toolbar.header,.toolbar.footer{display:flex;align-items:start;justify-content:space-between;width:100%;box-sizing:border-box;padding:var(--space-sm) var(--space-lg)}.toolbar.footer>.input-group{display:flex;flex:1 1 auto;gap:8px;min-width:0;align-items:center}.input-group{display:flex;align-items:center;gap:.75rem;width:100%}.input-group label{flex:0 0 var(--label-width-inline);text-align:right;color:var(--color-text-primary)}.input-group input{flex:1;padding:var(--space-sm) var(--space-sm);border:1px solid var(--color-btn-border);background:var(--color-grey-2);color:var(--color-panel-fore);font:inherit;box-sizing:border-box}.input-group input:focus{outline:2px solid var(--color-accent, #66aaff);outline-offset:1px}header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-lg);width:100%;background-color:var(--color-header);font-size:var(--font-md);color:var(--color-text-primary)}header a:link,header a:hover,header a:visited,header a:active{color:var(--color-text-primary)}header a:hover{text-decoration:underline}#menu-items{display:flex}#menu-items button{display:flex;align-items:center;gap:6px;padding:6px 12px;margin:0 var(--space-xs)}#reset-button,#copy-button{margin-left:16px}#sync-button{margin-left:var(--space-lg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#github{padding-right:32px}#github img,#github a{display:block;width:16px}footer{padding:8px;bottom:0;left:0;width:100%;background-color:var(--color-page-bg);color:var(--color-panel-fore);text-align:start;display:flex;align-items:center;gap:15px;border-top:1px solid var(--color-btn-border)}footer #github{margin-left:auto}#container{flex-grow:1;overflow:hidden;width:100%;display:flex}#editor-wrapper,#editor{height:100%}#preview-wrapper{padding:0 10px 10px}.column{width:50%;padding:0;margin:0;white-space:nowrap;vertical-align:top}#preview.column{overflow-y:scroll;white-space:normal}.split-container{display:flex;height:100%;width:100%}.editor-pane,.preview-pane{height:100%}.split-divider{width:5px;background:var(--color-btn-bg);cursor:col-resize;z-index:10;position:relative;transition:background-color .2s,box-shadow .2s,transform .2s;border-left:1px solid var(--color-btn-border);border-right:1px solid var(--color-btn-border)}.split-divider.hover{background:var(--color-accent);box-shadow:0 0 var(--space-xs) var(--color-accent);transform:scaleX(1.3)}.split-divider.active{background:var(--color-panel-fore);box-shadow:0 0 var(--space-xs) var(--color-accent)}.split-divider:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;background:repeating-linear-gradient(45deg,var(--color-btn-border),var(--color-btn-border) 2px,transparent 2px,transparent 4px);pointer-events:none}.split-container,#container{width:100%;max-width:100vw;overflow-x:hidden}.toolbar-buttons-pane{margin:10px;display:flex;gap:6px}.tooltip{position:relative;display:inline-block}.tooltip .tooltip-text{visibility:hidden;opacity:0;width:max-content;background-color:var(--color-tooltip-bg);color:var(--color-panel-fore);text-align:center;font-size:var(--font-sm);padding:var(--space-sm) var(--space-sm);border-radius:var(--radius);position:absolute;z-index:100;bottom:125%;left:50%;transform:translate(-50%);white-space:nowrap;transition:opacity .2s;border:1px solid var(--color-btn-border);pointer-events:none}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}#bold{font-weight:700}#italic{font-style:italic}#underline{text-decoration:underline}#strikethrough{text-decoration:line-through}.dropdown{content:"▾";position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0}.dropdown-content{display:none;position:absolute;top:calc(100% - 1px);left:0;background-color:var(--color-dropdown-bg);min-width:120px;box-shadow:0 2px 6px #0006;z-index:100;overflow-y:auto;max-height:300px;margin-top:0;flex-direction:column}.dropdown-content button{white-space:nowrap}.dropdown:hover .dropdown-content{display:flex}input{padding:var(--space-sm);border:1px solid var(--color-btn-border);background:var(--color-page-bg)}.toolbar{width:fit-content;margin:var(--space-sm);padding:var(--space-sm);background-color:var(--color-panel-bg);border:1px solid var(--color-btn-border);color:var(--color-panel-fore)}.toolbar.header,.toolbar.footer{display:flex;justify-content:space-between;align-items:center;margin:0;gap:var(--space-sm);border:0;border-top:1px solid var(--color-btn-border);padding:var(--space-sm) var(--space-lg);width:100%}.toolbar.header{border-top:0;border-bottom:1px solid var(--color-btn-border)}.toolbar input{flex:1 1 auto;min-width:0;padding:var(--space-sm);border:1px solid var(--color-btn-border);background:var(--color-page-bg)}.toolbar button{flex:0 0 auto}#toolbar-style-simple,#toolbar-style-menubar{display:flex;flex-wrap:wrap;gap:var(--toolbar-gap)}.toolbar-row{display:flex;gap:var(--space-xs);flex-wrap:nowrap}.toolbar-column{display:flex;flex-direction:column;color:var(--color-panel-fore)}@media (max-width: var(--toolbar-max-width)){#toolbar-style-simple{flex-direction:column}.toolbar-column{width:100%}}html,body{background-color:var(--color-grey-0);color-scheme:dark}.row-container{display:flex;align-items:center;gap:15px;height:60px;padding:0 10px}.row-text{white-space:nowrap}@media (max-width: 500px){.row-text{display:none}}#wiggleBtn{width:200px;height:auto;cursor:pointer;display:block;transition:transform .1s}#github img{width:32px;height:auto}@keyframes wigglePulse{0%{transform:rotate(0) scale(1)}15%{transform:rotate(5deg) scale(1.1)}30%{transform:rotate(-5deg) scale(1.05)}45%{transform:rotate(3deg) scale(1.08)}60%{transform:rotate(-3deg) scale(1.05)}75%{transform:rotate(2deg) scale(1.08)}to{transform:rotate(0) scale(1)}}.wiggling{animation:wigglePulse .6s ease-in-out}.button.checkbox{display:flex;align-items:center;gap:5px}*{scrollbar-width:thin;scrollbar-color:var(--color-lt-grey-3) var(--color-grey-0)}.fa-bbcode-container{background-color:var(--color-grey-0)}.fa-bbcode-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding:5px 10px 10px;color:var(--color-white);background-color:var(--color-grey-2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;line-height:1.5;word-wrap:break-word;scroll-behavior:auto;border:var(--color-lt-grey-3) 1px solid}.fa-bbcode-body .bbcode_h1,.fa-bbcode-body .bbcode_h2,.fa-bbcode-body .bbcode_h3,.fa-bbcode-body .bbcode_h4,.fa-bbcode-body .bbcode_h5{font-weight:400;color:var(--color-accent);margin:0;padding:0}.bbcode_h1{font-size:26px!important}.bbcode_h2{font-size:24px!important}.bbcode_h3{font-size:22px!important}.bbcode_h4{font-size:20px!important}.bbcode_h5{font-size:18px!important}.fa-bbcode-body .bbcode_b{font-weight:700}.fa-bbcode-body .bbcode_i{font-style:italic}.fa-bbcode-body .bbcode_u{text-decoration:underline}.fa-bbcode-body .bbcode_spoiler{color:#000;background-color:#000;transition:color .5s ease,background-color .3s ease;cursor:pointer}.fa-bbcode-body .bbcode_spoiler:hover{color:#fff;background-color:var(--color-grey-2)}.fa-bbcode-body .bbcode_left{text-align:left}.fa-bbcode-body .bbcode_center{text-align:center}.fa-bbcode-body .bbcode_right{text-align:right}.fa-bbcode-body .bbcode_quote{display:block;border-left:2px gray solid;font-style:italic;padding:5px;margin:5px}.fa-bbcode-body .bbcode_color{font-weight:400}#output a:not(.fa-username){color:var(--color-accent);border-bottom:1px dotted var(--color-accent)}#output a:not(.fa-username):hover{color:var(--color-accent-light);text-decoration:none}.fa-bbcode-body .fa-mention a.fa-username{color:var(--color-accent);text-decoration:none;border-bottom:none}.fa-bbcode-body .fa-mention a.fa-username:hover{text-decoration:none;color:#fff}.fa-bbcode-body .fa-mention.single a.fa-username,.fa-bbcode-body .fa-mention.single a.fa-username:hover{color:inherit;text-decoration:none}.fa-bbcode-body .fa-icon{width:50px;height:50px;display:inline-block;vertical-align:middle;object-fit:cover}.fa-bbcode-body .fa-mention.single{cursor:pointer;text-decoration:none}.fa-bbcode-body .youtubeWrapper{position:relative;width:100%;max-width:500px;height:315px;cursor:pointer;overflow:hidden;background-color:#000}.fa-bbcode-body .youtubeWrapper__thumbnailContainer{width:100%;height:100%;position:relative}.fa-bbcode-body .youtubeWrapper__thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.fa-bbcode-body .youtubeWrapper__playButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:url(/JournAffinity/assets/play-BGW6PqbI.png) no-repeat center center;background-size:contain;pointer-events:none}.fa-bbcode-body .youtubeWrapper__iframe{width:100%;height:100%;display:block;border:0}sup{vertical-align:super;font-size:smaller}sub{vertical-align:sub;font-size:smaller}.modal-container{flex:1;overflow-y:auto;padding:.5rem}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,30px);gap:2px}.color-swatch{width:100%;aspect-ratio:1 / 1;cursor:pointer;box-sizing:border-box;transition:transform .15s ease,border .15s ease}.color-swatch:hover{border:2px solid var(--color-black);transform:scale(1.5);z-index:2}.color-preview{width:120px;height:32px;border:1px solid var(--color-btn-border);background:var(--color-panel-bg);color:var(--color-text-primary);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;text-align:center;transition:background .15s ease,color .15s ease;overflow:hidden;white-space:nowrap}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);flex:1 1 auto}.option{display:flex;justify-content:center;align-items:center;height:80px;cursor:pointer;border:1px solid var(--color-btn-border);background:var(--color-grey-2);transition:transform .15s ease,outline-color .15s ease}.option:hover{outline:2px solid var(--color-accent);transform:scale(1.05)}.fa-mention{display:inline-flex;align-items:center;gap:6px}.fa-icon{width:48px;height:48px;object-fit:cover}.mention-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;width:100%}.mention-grid-container{flex:1 1 auto;overflow-y:auto;padding:1rem;display:flex;justify-content:center;align-items:flex-start}
