:root{--bg:#151515;--card:#1e1e1e;--line:#333;--fg:#ececec;--mute:#9a9a9a;--bad:#ff6b6b;--acc:#7cb7ff;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.top{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.top h1{margin:0;font-size:1.15rem;font-weight:600}
.back{color:var(--mute);font-size:.9rem;text-decoration:none}.back:hover{color:var(--fg)}
.ctl{margin-left:auto;display:flex;flex-wrap:wrap;gap:.5rem}
button,select{font:inherit;font-size:.9rem;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.4rem .8rem;cursor:pointer}
button:hover:not(:disabled),select:hover{border-color:var(--mute)}
button:disabled{opacity:.4;cursor:default}
main{flex:1;width:100%;max-width:60rem;margin:0 auto;padding:1rem}
.wrap{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px}
.wrap:focus-within{border-color:var(--acc)}
/* The textarea sits on top of an identical, invisible copy of the text that draws the underlines */
.txt{font:18px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif;padding:1.1rem 1.25rem;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;tab-size:4;letter-spacing:normal;margin:0;border:0}
#backdrop{position:absolute;inset:0;overflow:hidden;color:transparent;pointer-events:none;border-radius:12px}
#ta{position:relative;display:block;width:100%;min-height:60dvh;resize:none;overflow:hidden;background:transparent;color:var(--fg);caret-color:var(--fg);outline:none;border-radius:12px}
#ta::placeholder{color:var(--mute)}
mark{background:none;color:transparent;text-decoration:underline wavy var(--bad);text-decoration-thickness:1.5px;text-decoration-skip-ink:none;text-underline-offset:4px}
.bar{position:sticky;bottom:0;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);font-size:.9rem;color:var(--mute)}
.bar .sp{flex:1}
#status.bad{color:var(--bad)}#status.ok{color:#7ddc9a}
#pop{position:absolute;z-index:10;width:min(92vw,300px);padding:.4rem;background:#262626;border:1px solid #444;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.55)}
#pop[hidden]{display:none}
#pop .t{padding:.3rem .6rem .4rem;font-size:.8rem;color:var(--mute);border-bottom:1px solid var(--line);margin-bottom:.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pop .t b{color:var(--bad);font-weight:600}
#pop button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:.5rem .6rem;font-size:1rem}
#pop button:hover,#pop button:focus-visible{background:#3a3a3a;outline:none}
#pop button.best{font-weight:600;color:var(--acc)}
#pop .sep{height:1px;background:var(--line);margin:.3rem 0}
#pop .act{font-size:.9rem;color:var(--mute)}
#pop .none{padding:.4rem .6rem;color:var(--mute)}
@media (max-width:600px){.txt{font-size:17px;padding:.9rem 1rem}.hint{display:none}}