@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

 :root {
     --bg: #14181f;
     --ink: #cdd5e0;
     --dim: #77839a;
     --line: #090b10;
     --recess: #0d1017;
     --edge: rgba(255, 255, 255, .06);
     --accent: #4f92dd;
 }

 * {
     box-sizing: border-box;
     border-radius: 0 !important;
 }

 body {
     margin: 0;
     padding: 3.5rem 1rem 4rem;
     font-family: "Arimo", system-ui, sans-serif;
     font-size: 15px;
     line-height: 1.55;
     color: var(--ink);
     background: var(--bg);
 }

 main {
     max-width: 620px;
     margin: 0 auto;
 }

 h1 {
     margin: 0 0 1.25rem;
     font-size: 1.5rem;
     font-weight: 600;
     letter-spacing: .01em;
     /* faint engrave — the one skeuomorphic touch on type */
     text-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 -1px 0 rgba(0, 0, 0, .6);
     padding-bottom: .9rem;
     border-bottom: 1px solid var(--line);
     box-shadow: 0 1px 0 var(--edge);
     /* grooved rule */
 }

 p {
     margin: 0 0 .9rem;
 }

 .note {
     color: var(--dim);
     font-size: .9rem;
 }

 a {
     color: var(--accent);
     text-decoration: none;
     border-bottom: 1px solid rgba(77, 159, 255, .4);
 }

 a:hover {
     border-bottom-color: var(--accent);
 }

 a:focus-visible,
 input:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 2px;
 }

 code {
     font-family: monospace;
     font-size: .84em;
     background: var(--recess);
     border: 1px solid var(--line);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55);
     padding: .1em .4em;
     overflow-wrap: anywhere;
 }

 /* inset file well */
 .well {
     margin: 1.5rem 0 1rem;
     padding: 1rem;
     background: var(--recess);
     border: 1px solid var(--line);
     box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 255, 255, .04);
 }

 input[type="file"] {
     width: 100%;
     font-family: "Arimo", sans-serif;
     font-size: .85rem;
     color: var(--dim);
     cursor: pointer;
 }

 input[type="file"]::file-selector-button {
     font-family: "Arimo", sans-serif;
     font-weight: 600;
     font-size: .85rem;
     color: #0a1524;
     background: linear-gradient(180deg, #6cb1ff, var(--accent) 45%, #2f7fe0);
     border: 1px solid #1c4a85;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .5);
     padding: .5rem 1rem;
     margin-right: 1rem;
     cursor: pointer;
 }

 input[type="file"]::file-selector-button:active {
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
     transform: translateY(1px);
 }

 input[type="file"]:disabled {
     cursor: not-allowed;
     opacity: .5;
 }

 input[type="file"]:disabled::file-selector-button {
     cursor: not-allowed;
     background: linear-gradient(180deg, #2b3140, #222734);
     color: #5c6678;
     border-color: var(--line);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
 }

 #status {
     margin: 0;
     padding: .85rem 1rem;
     font-family: monospace;
     font-size: .85rem;
     color: var(--dim);
     background: var(--recess);
     border: 1px solid var(--line);
     box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     min-height: 2.6rem;
 }

 #results {
     margin: 1rem 0 0;
     padding: 0;
     list-style: none;
 }

 #results:empty {
     display: none;
 }

 #results li {
     font-family: "Arimo", sans-serif;
     font-size: .85rem;
     padding: .65rem 1rem;
     overflow-wrap: anywhere;
 }

 #results li+li {
     margin-top: .4rem;
 }