| :root { color-scheme: light dark; --bg:#f5f6f1; --surface:#fff; --ink:#20251e; --muted:#697063; --line:#d7ded0; --accent:#c5ff7a; --error:#a63725; font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } |
| * { box-sizing:border-box; } |
| body { margin:0; background:var(--bg); color:var(--ink); min-width:280px; } |
| header { padding:23px 22px 19px; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:center; justify-content:space-between; } |
| header img { object-fit:contain; } |
| .version { font-size:9px; font-weight:650; letter-spacing:.08em; text-align:right; } |
| main { max-width:560px; margin:auto; padding:0 22px; } |
| .intro { padding:30px 0 24px; } |
| .eyebrow { font-size:10px; font-weight:700; letter-spacing:.12em; } |
| h1 { font-size:clamp(26px,7.8vw,38px); line-height:1.1; font-weight:620; letter-spacing:-.04em; margin:14px 0; } |
| p { margin:10px 0; } |
| .intro>p:last-child, .model>p { color:var(--muted); font-size:13px; } |
| .model { background:var(--surface); padding:18px; border:1px solid var(--line); border-radius:12px; } |
| .section-title { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:13px; } |
| h2 { margin:0; font-size:11px; font-weight:450; white-space:nowrap; color:var(--muted); } |
| h2 span { color:var(--ink); font-size:13px; font-weight:650; margin-left:9px; } |
| .badge { background:var(--bg); border:1px solid var(--line); border-radius:4px; font-size:10px; padding:3px 7px; white-space:nowrap; } |
| button,input,textarea,select { font:inherit; } |
| button,a,.file-button,summary { -webkit-tap-highlight-color:transparent; } |
| button,.file-button { cursor:pointer; } |
| a { color:inherit; text-underline-offset:3px; } |
| button:disabled { opacity:.45; cursor:not-allowed; } |
| button { border:1px solid var(--line); border-radius:6px; padding:10px 13px; background:var(--surface); color:var(--ink); } |
| .file-button { display:flex; justify-content:space-between; background:var(--ink); color:var(--surface); padding:11px 13px; border-radius:6px; font-weight:600; margin:16px 0 12px; } |
| .remember { display:flex; gap:8px; align-items:center; font-size:11px; color:var(--muted); } |
| .remember input { accent-color:#537c29; margin:0; } |
| .model-actions { display:flex; gap:14px; align-items:center; justify-content:space-between; margin-top:10px; font-size:11px; } |
| .text-button { border:0; padding:3px 0; background:none; text-decoration:underline; text-underline-offset:3px; font-size:11px; } |
| form { padding:27px 0 20px; } |
| form>label { display:block; margin:17px 0 6px; font-size:12px; font-weight:650; } |
| .hint { color:var(--muted); font-size:11px; font-weight:400; } |
| label .hint { float:right; } |
| textarea,form>input,select { width:100%; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); padding:11px 12px; } |
| textarea { resize:vertical; min-height:70px; } |
| textarea::placeholder,input::placeholder { color:#818879; } |
| :focus-visible { outline:2px solid #679827; outline-offset:3px; } |
| details { border-top:1px solid var(--line); margin-top:17px; padding:12px 0 0; font-size:12px; } |
| summary { cursor:pointer; color:var(--muted); } |
| details label { display:block; margin:10px 0 5px; } |
| .run-actions { display:flex; gap:10px; margin-top:19px; } |
| #run { flex:1; background:var(--accent); color:#1e2915; font-weight:650; border-color:transparent; display:flex; justify-content:space-between; } |
| #status { font-size:12px; color:var(--muted); overflow-wrap:anywhere; } |
| #status[data-error="true"] { color:var(--error); } |
| .result { border-top:2px solid var(--ink); padding:23px 0; } |
| .result h3 { font-size:24px; line-height:1.25; margin:9px 0; overflow-wrap:anywhere; } |
| #reason { color:var(--muted); font-size:12px; } |
| ol { list-style:none; padding:0; margin:18px 0; } |
| li { margin:12px 0; } |
| .rank-label { display:flex; justify-content:space-between; gap:15px; font-size:12px; overflow-wrap:anywhere; } |
| progress { width:100%; height:5px; border:0; display:block; margin-top:7px; accent-color:#709b42; } |
| progress::-webkit-progress-bar { background:var(--line); border-radius:4px; } |
| progress::-webkit-progress-value { background:#709b42; border-radius:4px; } |
| .boundary { font-size:11px; background:var(--surface); border-left:3px solid #a5b592; padding:9px 12px; } |
| pre { font:10px/1.6 ui-monospace,monospace; overflow:auto; max-height:240px; white-space:pre-wrap; overflow-wrap:anywhere; } |
| footer { border-top:1px solid var(--line); padding:16px 0 25px; color:var(--muted); font-size:10px; } |
| footer p:first-child { color:var(--ink); font-weight:650; } |
| nav { display:flex; gap:18px; margin-top:15px; } |
| [hidden] { display:none!important; } |
| .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } |
| .file-button:has(+input:focus-visible) { outline:2px solid #679827; outline-offset:3px; } |
| @media(prefers-color-scheme:dark) { :root { --bg:#1d221c; --surface:#252c23; --ink:#edf4e8; --muted:#a5b09e; --line:#434e3d; --error:#ffb09c; } header img { background:#f5f6f1; border-radius:2px; } } |
|
|
