:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#08120e;color:#edf6f0}*{box-sizing:border-box}body{margin:0;display:flex;min-height:100vh;background:radial-gradient(ellipse at top right,#163c2b 0%,#0c2017 42%,#08120e 80%)}aside{width:250px;padding:30px;background:linear-gradient(165deg,#153c2b,#0a1b13 65%,#07110c);position:sticky;top:0;height:100vh}aside img{width:75px;height:75px;object-fit:contain}aside p,small{color:#adc5b6}main{padding:40px;flex:1;min-width:0}h1{font-size:30px}h2{margin-top:0}button,.import{border:0;border-radius:8px;background:linear-gradient(135deg,#236344,#123e2a);color:white;padding:12px 18px;cursor:pointer;font:inherit}button:disabled{opacity:.4}button{margin:4px}input{display:block;padding:12px;margin:8px 0 20px;border:1px solid #395d49;border-radius:8px;background:#10251a;color:white;width:100%}form{max-width:500px}header{display:flex;align-items:center;justify-content:space-between;gap:20px}#books{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:24px}.book{background:linear-gradient(150deg,#193b2b,#10251b);border:1px solid #31533f;border-radius:12px;padding:22px}.book h3{overflow-wrap:anywhere}.book p{color:#bdd2c5}#page{display:block;max-width:100%;max-height:80vh;margin:20px auto}nav{text-align:center}#message{color:#b9e4c9} [hidden]{display:none!important}@media(max-width:700px){body{display:block}aside{width:100%;height:auto;position:static;padding:16px}aside img{width:45px;height:45px;float:left;margin-right:14px}aside h1{margin:0}main{padding:20px}header{flex-wrap:wrap}}

button:not(:disabled):hover,.import:hover{background:linear-gradient(135deg,#2c7752,#185137)}button:focus-visible,.import:focus-within,input:focus-visible{outline:2px solid #8bd5aa;outline-offset:3px}