body{font-family:'Helvetica Neue', Helvetica, Arial;font-size:14px;color:#3e3e3e;background-color:#f7f8fc;background:linear-gradient(to top left, #f7f8fc, rgba(0,151,230,0.2) 500%);margin:0px;padding-left:2rem;padding-right:2rem}@font-face{font-family:Gaegu;src:url(/fonts/Gaegu-Regular.ttf)}@font-face{font-family:Lato;src:url(/fonts/Lato-Regular.ttf)}@font-face{font-family:Monoton;src:url(/fonts/Monoton-Regular.ttf)}.container{display:flex;flex-flow:row wrap;text-align:center}.container>*{padding:10px;flex:1 100%}.main{text-align:left;flex:3 0px;margin-left:254px;color:#3e3e3e}.header{margin-left:254px}.header h1{color:deepskyblue;box-shadow:hotpink 10px 10px;font-size:4rem;margin:auto;margin-bottom:3rem}.aside{background:deepskyblue;color:white;position:fixed;min-height:100%;max-height:100%;width:200px;font-family:monospace;line-height:2rem;text-align:left;border-right:lightblue solid 2px;border-left:lightblue solid 2px;overflow:auto}.aside img{background:url("./favicon.ico"),white;border-radius:50%;z-index:3;width:128px;height:128px;transform:scale(0.7);margin-left:15%}.aside ul{list-style-type:none;margin-top:0px}.aside ul li:hover{color:grey;cursor:pointer}.aside ul li.selected{color:hotpink}.aside .give-credit{font-size:12px;position:absolute;bottom:10px}@media all and (max-width: 800px){body{padding:0px}.header{margin-left:0px}.file-reader-container{min-width:100% !important;max-width:100% !important}.aside{flex:1 100%;position:relative;text-align:center;border:none;margin-left:0px}.aside img{display:none}.aside ul{margin-top:1rem;margin-bottom:3rem}.aside ul li.selected{color:white;background-color:hotpink}.aside .give-credit{text-align:center}.main{flex:1 100%;padding-left:10px;margin-left:0px}}.glyphs{font-family:initial;font-size:48px;word-wrap:break-word;display:flex;flex-wrap:wrap;cursor:default;justify-content:center}.glyphs .glyph{flex:1;min-width:96px;max-width:96px;min-height:96px;max-height:96px;cursor:default;border:1px solid black;line-height:2em;text-align:center}.details{border:1px solid black;visibility:hidden;position:absolute;z-index:10;cursor:default;background-color:#f7f8fc;text-align:center;padding:15px}.details .char{font-size:75px}.details.trans{transform:scale(1.05)}.file-reader-container{width:100%;display:inline-block}.file-reader-container .file-reader-wrapper{position:relative;padding-top:25px;padding-bottom:85px;padding-left:7vw;padding-right:7vw;border:2px black dotted}.file-reader-container .file-reader-wrapper .file-reader{opacity:0;width:100%;height:100%;position:absolute;top:0px;right:0px}.file-reader-container .file-reader-wrapper .file-reader:hover{cursor:pointer}.file-reader-container .file-reader-wrapper .file-reader+label{display:inline-block;width:100%;min-height:100px;max-height:100px;font-size:30px}.file-reader-container .file-reader-wrapper:hover button{top:128px}.file-reader-container .file-reader-wrapper:active button{top:132px}.file-reader-container button{width:175px;left:calc(50% - 80px);position:absolute;top:130px;z-index:-1;border:none;box-shadow:rgba(0,0,0,0.24) 3px 6px;background:deepskyblue;color:white;height:54px;font-size:18px}.url-input input{font-size:38px;color:#3e3e3e;border:#f7f8fc solid 1px;background-color:white;border-radius:0.2rem;padding:1rem;padding-left:2rem;max-width:calc(100% - 3rem);width:calc(100% - 3rem);display:block;outline:none;margin-bottom:30px}

/* ---- accessibility & polish overrides (contrast, focus, decorative avatar) ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Darker blue palette so text meets WCAG AA contrast */
.header h1 { color: #0369a1; }
.aside { background: #0b3d5c; color: #ffffff; }
.aside a { color: #bfe3ff; }
.aside ul li:hover { color: #9ad4f5; }
.aside ul li.selected { color: #ff9ecb; }

/* Decorative avatar (replaces the old empty <img>) */
.aside .avatar {
  background: url("./favicon.ico"), #ffffff;
  background-size: cover;
  border-radius: 50%;
  width: 96px; height: 96px;
  margin: 0.5rem auto 0;
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.file-reader:focus-visible + label,
.fonts .font:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 2px;
}

@media all and (max-width: 800px) {
  .aside .avatar { display: none; }
  .aside ul li.selected { color: #ffffff; background-color: #b3115a; }
}