:root{color-scheme:dark;--bg:#0c0c0c;--text:#e6e6e6;--muted:#8e8e8e;--line:#262626;--field:#141414;--accent:#c89a75;--danger:#e0a29c;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
main{max-width:600px;margin:0 auto;padding:32px 20px 56px}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.6}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono,code{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:13px}
.header{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.header img{display:block}
h1{margin:40px 0 24px;font-size:24px;font-weight:600;line-height:1.25}
h2{margin:36px 0 8px;font-size:15px;font-weight:600}
p{margin:0}
label{display:block;margin-bottom:6px;font-size:13px;color:var(--muted)}
.note{margin-top:10px;color:var(--muted);font-size:13px}
.link{padding:0;border:0;background:none;color:var(--accent);font-size:13px;white-space:nowrap}
.link:hover{text-decoration:underline}

.input-row{display:flex;gap:8px}
.key-input{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--field)}
.key-input:focus-within{border-color:#4a4a4a}
.key-input input{flex:1;width:100%;min-width:0;padding:0;border:0;outline:0;background:none;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:13px}
.key-input input::placeholder{color:#6b6b6b}
.primary{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:6px;background:var(--text);color:#111;font-size:14px;font-weight:500}
.primary:hover{background:#fff}
.spinner{display:none;width:13px;height:13px;border:2px solid #1113;border-top-color:#111;border-radius:50%;animation:spin .8s linear infinite}
.primary[aria-busy=true] .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.error{margin:16px 0 0;padding:10px 12px;border-left:2px solid var(--danger);background:#1b1413;color:var(--danger);font-size:14px}

.key-line{display:flex;align-items:center;gap:12px;color:var(--muted)}
.key-line .link{margin-left:auto}
.state{font-size:13px;color:var(--muted)}
.state.empty{color:var(--danger)}
.remaining{margin-top:24px;overflow-wrap:anywhere}
#remaining{font-size:32px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.unit{color:var(--muted)}
progress{display:block;width:100%;height:4px;margin-top:12px;border:0;border-radius:2px;overflow:hidden;appearance:none;-webkit-appearance:none;background:var(--line);color:var(--text)}
progress::-webkit-progress-bar{background:var(--line)}
progress::-webkit-progress-value{background:var(--text)}
progress::-moz-progress-bar{background:var(--text)}
.progress-caption{margin-top:6px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

.facts{margin:20px 0 0;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:14px}
.facts dt label{margin:0;font-size:14px}
.facts dd{margin:0;min-width:0;font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.problems>div{grid-template-columns:96px 1fr}
#model-count:empty{display:none}
#models{margin:0;padding:0;list-style:none;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:13px}
.update-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:4px}
.update-row.stale #updated{color:var(--accent)}

.guide{margin-top:44px}
.guide>p:first-of-type{color:var(--muted);font-size:14px}
.copy-url{display:flex;align-items:center;gap:12px}
.copy-url input{flex:1;width:100%;min-width:0;padding:0;border:0;outline-offset:3px;background:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript{text-align:center;color:var(--danger);padding:20px}

@media(max-width:480px){
  main{padding-top:20px}
  h1{margin-top:28px}
  .input-row{flex-direction:column}
  .key-input{flex:none}
  .primary{justify-content:center}
  .facts>div,.problems>div{grid-template-columns:1fr;gap:0}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}