*,*:before,*:after{box-sizing:inherit;margin:0;padding:0}*{--brand-hue: 30;--brand-saturation: 50%;--brand-lightness: 97%;--light-basic: hsl(var(--brand-hue) 0% 100%);--light-background: hsl( var(--brand-hue) var(--brand-saturation) var(--brand-lightness) );--light-title: hsl(var(--brand-hue) 0% 10%);--light-text: hsl(var(--brand-hue) 0% 30%);--light-text-hover: hsl(var(--brand-hue) 0% 90%);--light-button: hsl(140deg 100% 38%);--light-button-hover: hsl(140deg 100% 28%);--light-button-text: hsl(var(--brand-hue) 0% 100%);--dark-basic: hsl(var(--brand-hue) 0% 0%);--dark-background: hsl( var(--brand-hue) calc(var(--brand-saturation) / 50) calc(var(--brand-lightness) / 10) );--dark-title: hsl(var(--brand-hue) 0% 90%);--dark-text: hsl(var(--brand-hue) 0% 70%);--dark-text-hover: hsl(var(--brand-hue) 0% 20%);--dark-button: hsl(140deg 85% 30%);--dark-button-hover: hsl(140deg 100% 20%);--dark-button-text: hsl(var(--brand-hue) 0% 0%)}:root{--background: var(--light-background);--basic: var(--light-basic);--title: var(--light-title);--text: var(--light-text);--text-hover: var(--light-text-hover);--button: var(--light-button);--button-hover: var(--light-button-hover);--button-text: var(--light-button-text)}@media (prefers-color-scheme: dark){:root{--background: var(--dark-background);--basic: var(--dark-basic);--title: var(--dark-title);--text: var(--dark-text);--text-hover: var(--dark-text-hover);--button: var(--dark-button);--button-hover: var(--dark-button-hover);--button-text: var(--dark-button-text)}}[data-theme=light]{--background: var(--light-background);--basic: var(--light-basic);--title: var(--light-title);--text: var(--light-text);--text-hover: var(--light-text-hover);--button: var(--light-button);--button-hover: var(--light-button-hover);--button-text: var(--light-button-text)}[data-theme=dark]{--background: var(--dark-background);--basic: var(--dark-basic);--title: var(--dark-title);--text: var(--dark-text);--text-hover: var(--dark-text-hover);--button: var(--dark-button);--button-hover: var(--dark-button-hover);--button-text: var(--dark-button-text)}html{box-sizing:border-box;height:100%;font-size:62.5%}body{height:100%;margin:0;background-color:var(--background);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1.6rem;font-weight:400;line-height:1.7}button{display:inline-block;padding:.3rem 1.3rem;transition:.3s;border:none;outline:none;background:none;background-color:var(--button);color:var(--button-text);font:inherit;cursor:pointer}button:hover{background-color:var(--button-hover)}#app{max-width:1170px;min-height:100vh;margin:0 auto;background-color:var(--basic)}@media only screen and (max-width : 1200px){#app{max-width:980px}}@media only screen and (max-width : 992px){#app{max-width:730px}}@media only screen and (max-width : 768px){#app{max-width:650px}}@media only screen and (max-width : 650px){#app{flex:1}}.container{padding:1.5em;text-align:center}.hide{display:none}.small{display:block;max-width:600px;margin:1rem auto;color:var(--text);font-size:90%;line-height:1.5}.switch-column{text-align:right}.switch-column .switch{display:inline-block;position:relative;flex:0 0 70px;width:70px;height:30px}.switch-column .switch input{width:0;height:0;opacity:0%}.switch-column .switch input+.slider:after{content:"Night";position:absolute;top:.4rem;right:.6rem;font-size:13px;text-align:right}.switch-column .switch .slider{position:absolute;top:0;right:0;bottom:0;left:0;transition:.4s;border-radius:30px;background-color:#fb0;cursor:pointer}.switch-column .switch .slider:before{content:"";position:absolute;bottom:4px;left:4px;width:23px;height:23px;transition:.4s;border-radius:50%;background-color:#fff}.switch-column .switch input:checked+.slider{background-color:#4d4d4d}.switch-column .switch input:checked+.slider:after{content:"Dark";position:absolute;top:.4rem;left:1rem;font-size:13px;text-align:left}.switch-column .switch input:checked+.slider:before{transform:translate(39px)}.title{margin-bottom:2rem;color:var(--title)}.file{margin-bottom:8rem}.file .file-upload{display:flex;align-items:center;justify-content:center;max-width:600px;height:100px;margin:auto;border:2px dashed gray;color:gray;font-size:2.2rem;cursor:pointer}.content{display:flex;flex-wrap:wrap}.content .content-left,.content .content-right{flex:0 0 50%}@media only screen and (max-width : 992px){.content .content-left,.content .content-right{flex:0 0 100%;padding:0}}.content .content-left{padding-right:1.5rem}@media only screen and (max-width : 992px){.content .content-left{padding:0}}.content .content-right{padding-left:1.5rem}@media only screen and (max-width : 992px){.content .content-right{padding:0}}.download-booklist,.booklist,.highlight-preview{position:relative;padding:3.2rem 0 2rem;border:1px solid var(--title);color:var(--title)}.download-booklist:before,.booklist:before,.highlight-preview:before{position:absolute;top:-1.8rem;left:1.5rem;padding:0 15px;background-color:var(--basic);font-size:2rem}.highlight-preview:before{content:"Highlight Preview"}.download-booklist{margin-bottom:3em}.download-booklist:before{content:"Export Book List"}.download-booklist button{margin:0 1rem}@media only screen and (max-width : 650px){.download-booklist button{width:calc(100% - 2.5rem);margin:.5rem 0}}.booklist{min-height:574px;max-height:calc(100vh - 474px);padding-left:1.5rem;text-align:left}.booklist:before{content:"Export Highlight"}@media only screen and (max-width : 992px){.booklist{margin-bottom:3em}}.booklist .booklist-scroll{min-height:523px;max-height:calc(100vh - 423px);padding-right:1.3rem;overflow-y:scroll}.booklist .book-title{padding:.5rem;border-bottom:1px solid var(--dark-text);cursor:pointer}.booklist .book-title:hover{background-color:var(--text-hover)}.highlight-preview{min-height:708px;max-height:calc(100vh - 608px);padding:3.2rem 1.5rem 2rem}.highlight-preview .highlight-details{display:flex;align-items:center;height:33px;margin-bottom:1em}.highlight-preview .highlight-details .highlight-title{flex:1;overflow:hidden;text-align:left}.highlight-preview .highlight-textarea{width:100%;min-height:608px;max-height:calc(100vh - 508px);padding:1rem;background-color:var(--basic);color:var(--title);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.7}footer{display:block;margin-top:3rem;color:gray;font-size:85%;line-height:1.5}footer a{color:var(--text)}