*,*:before,*:after{box-sizing:border-box}html{overflow-x:hidden}body{margin:0;font-family:sans-serif;height:100dvh;overflow:hidden;display:flex;flex-direction:column;--highlight-color: #8C47FF;--color-bg-page: #ffffff;--color-bg-from: #d3d3d3;--color-bg-to: #b8b8b8;--color-bg-list: #ffffff;--color-btn-idle: #d3d3d3;--color-btn-idle-hover: #c0c0c0;--color-text: #000000;--color-shadow: darkgrey;--color-navbar: #ffffff;--color-navbar-border: rgba(0, 0, 0, .08);background-color:var(--color-bg-page);color:var(--color-text)}body.dark-mode{--color-bg-page: #1e1e1e;--color-bg-from: #2a2a2a;--color-bg-to: #222222;--color-bg-list: #2d2d2d;--color-btn-idle: #3a3a3a;--color-btn-idle-hover: #484848;--color-text: #e0e0e0;--color-shadow: rgba(0, 0, 0, .5);--color-navbar: #161616;--color-navbar-border: rgba(255, 255, 255, .06)}#file-input{display:none}#sticky-header{flex-shrink:0;z-index:50}#navbar{display:flex;align-items:center;justify-content:space-between;padding:.6em 1.2em;background-color:var(--color-navbar);border-bottom:1px solid var(--color-navbar-border);box-shadow:0 2px 8px #0000000f}#app-title{font-weight:700;font-size:1rem;color:var(--color-text);display:flex;align-items:baseline;gap:.5em;white-space:nowrap}#commit-id{font-size:.65rem;font-weight:400;color:var(--color-text);opacity:.4;text-decoration:none}#commit-id:hover{opacity:.7;text-decoration:underline}#nav-actions{display:flex;align-items:center;gap:.5em}#navbar button{font-size:.82rem;padding:.4em .9em;border:2px solid var(--highlight-color);border-radius:8px;background:transparent;color:var(--highlight-color);font-weight:600;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}#navbar button:hover{background:var(--highlight-color);color:#fff}#theme-wrapper{position:relative}#theme-panel{display:none;position:absolute;top:calc(100% + .6em);right:0;background-color:var(--color-bg-list);color:var(--color-text);border-radius:12px;padding:1em;box-shadow:0 8px 24px #0003;z-index:100;min-width:210px;flex-direction:column;gap:.7em}#theme-panel.open{display:flex}.theme-row{display:flex;align-items:center;justify-content:space-between;gap:1em;font-size:.9rem}.theme-row label{flex:1;font-weight:500;cursor:default}#accent-picker{width:40px;height:28px;border:none;border-radius:6px;padding:2px;cursor:pointer;background:none}#dark-mode-toggle{width:2.8em;height:1.5em;appearance:none;-webkit-appearance:none;background-color:var(--color-btn-idle);border-radius:1em;position:relative;cursor:pointer;transition:background-color .2s;flex-shrink:0}#dark-mode-toggle:after{content:"";position:absolute;top:.18em;left:.18em;width:1.1em;height:1.1em;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0000004d}#dark-mode-toggle:checked{background-color:var(--highlight-color)}#dark-mode-toggle:checked:after{transform:translate(1.3em)}#reset-theme{margin-top:.2em;font-size:.8rem!important;padding:6px 12px!important;width:100%!important;border:none!important;background-color:var(--color-btn-idle)!important;color:var(--color-text)!important;font-weight:400!important}#reset-theme:hover{background-color:var(--color-btn-idle-hover)!important;color:var(--color-text)!important}#file-area{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;width:100%;height:20vh;background-color:var(--highlight-color);color:#fff;text-align:center;cursor:pointer}#file-area h2,#file-area p{margin:5px}#tab-bar{display:none;background-color:var(--color-bg-from);border-bottom:2px solid var(--color-bg-to)}.tab{flex:1;padding:.8em;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;background:transparent;color:var(--color-text);font-size:1rem;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s}.tab.active{color:var(--highlight-color);border-bottom-color:var(--highlight-color);font-weight:700}#format-containers{display:flex;flex:1;min-height:0;overflow:hidden}.format-container{display:flex;flex-flow:column nowrap;align-items:center;width:50%;overflow:hidden;padding:.8em 7em 0}.format-container h2{text-align:center;margin-bottom:20px}#from-container{background-color:var(--color-bg-from)}#to-container{background-color:var(--color-bg-to)}.search{width:100%;text-align:center;margin-bottom:30px;padding:10px 20px;border:0;border-radius:5px;outline:none;box-shadow:0 5px 0 0 var(--color-shadow);background-color:var(--color-bg-list);color:var(--color-text)}.format-list{display:flex;flex-flow:column nowrap;flex:1;min-height:0;overflow-y:auto;width:100%;align-items:center;background-color:var(--color-bg-list);border-radius:10px 10px 0 0;padding:20px}.format-list button{width:80%;margin:5px 0;padding:10px;color:var(--color-text);background-color:var(--color-btn-idle);border:0;border-radius:10px;font-family:monospace;word-break:break-word;cursor:pointer;transition:background-color .1s}.format-list button:hover{background-color:var(--color-btn-idle-hover)}button.selected{background-color:var(--highlight-color);color:#fff;font-weight:700}#convert-button{position:fixed;left:50%;bottom:5%;transform:translate(-50%);font-size:1.5rem;padding:10px 20px;border:0;border-radius:10px;background-color:var(--highlight-color);color:#fff;cursor:pointer;z-index:10}.disabled{filter:grayscale(1);pointer-events:none}#popup-bg{position:fixed;left:0;top:0;width:100%;height:100%;background-color:#00000080;z-index:200}#popup{position:fixed;left:50%;top:50%;width:20vw;transform:translate(-50%,-50%);background-color:var(--color-bg-list);color:var(--color-text);padding:15px;border-radius:10px;text-align:center;z-index:201}#popup button{font-size:1rem;padding:7px 20px;border:0;border-radius:10px;background-color:var(--color-btn-idle);color:var(--color-text);cursor:pointer}@media only screen and (max-width:800px){#tab-bar{display:flex}#drop-hint-text{display:none}#app-title{font-size:.9rem}#commit-id{display:none}#navbar button{font-size:.75rem;padding:.35em .6em}#theme-panel{right:0;max-width:calc(100vw - 1.2em)}#format-containers{flex-flow:column nowrap}.format-container{display:none;width:100%;padding:.8em .8em 0}.format-container.tab-active{display:flex}.format-list{padding:12px}.format-list button{width:100%}#convert-button{position:relative;left:auto;right:auto;bottom:auto;width:100%;transform:none;border-radius:0;font-size:1.2rem;padding:1em;flex-shrink:0}#popup{width:80vw}}