:root { --bg:#f8f8f9; --surface:#fff; --border:#e7e7e9; --text:#18181b; --muted:#52525b; --faint:#8d8d98; --danger:#a33f36; --success:#16794a; --warning:#9b661a; --radius:10px; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.browser-page { width:min(960px,calc(100% - 40px)); margin:0 auto; padding:88px 0 72px; }.browser-intro { display:flex; gap:18px; align-items:flex-start; margin-bottom:44px; }.browser-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--text); color:#fff; font:bold 16px ui-monospace,SFMono-Regular,Menlo,monospace; }.browser-kicker { margin:0 0 8px; color:var(--faint); font-size:11px; font-weight:700; letter-spacing:.12em; }h1,h2,p { margin-top:0; }h1 { margin-bottom:10px; font-size:32px; letter-spacing:-.045em; }h2 { margin-bottom:7px; font-size:19px; letter-spacing:-.025em; }.browser-subtitle { margin-bottom:0; color:var(--muted); font-size:15px; }
.browser-form { margin-bottom:24px; }.field-label { display:block; margin-bottom:7px; font-size:13px; font-weight:600; }.form-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }input { width:100%; height:42px; border:1px solid var(--border); border-radius:7px; padding:0 12px; background:var(--surface); color:var(--text); font:14px inherit; outline:none; }input:focus { border-color:#55555a; box-shadow:0 0 0 3px #e8e8ea; }button { height:42px; border:0; border-radius:7px; padding:0 17px; background:var(--text); color:#fff; cursor:pointer; font:600 14px inherit; }button:hover { background:#303035; }button:focus-visible { outline:3px solid #c7c7ca; outline-offset:2px; }button:disabled { opacity:.6; cursor:wait; }.field-help { margin:7px 0 0; color:var(--muted); font-size:12px; }
.empty-card,.loading-card,.notice { border:1px solid var(--border); border-radius:12px; background:var(--surface); }.empty-card { display:flex; align-items:center; gap:18px; min-height:170px; padding:24px; }.empty-icon { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border:1px solid var(--border); border-radius:9px; color:var(--muted); font:21px ui-monospace,SFMono-Regular,Menlo,monospace; }.empty-card h2 { margin-bottom:6px; }.empty-card p,.result-note { margin-bottom:0; color:var(--muted); font-size:14px; line-height:1.55; }.loading-card { display:flex; align-items:center; gap:10px; min-height:112px; padding:24px; color:var(--muted); font-size:14px; }.loading-card span { width:8px; height:8px; border-radius:50%; background:var(--text); }.notice { display:flex; flex-direction:column; gap:4px; margin-bottom:20px; padding:14px 16px; color:var(--danger); font-size:14px; }.notice span { color:var(--muted); }
.browser-result { margin-top:32px; }.result-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:14px; }.result-head h2 { margin-bottom:5px; }.result-head a { color:var(--muted); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }.badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; padding-top:2px; }.badge { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:var(--surface); font-size:12px; }.badge.ok { border-color:#b8ddc7; color:var(--success); }.badge.warn { border-color:#e4caab; color:var(--warning); }pre { max-height:530px; margin:0; overflow:auto; border:1px solid var(--border); border-radius:12px; padding:24px; background:#fbfbfc; color:#303036; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }.result-note { margin:10px 2px 0; }
@media(max-width:620px) { .browser-page { width:min(100% - 28px,960px); padding-top:42px; }.form-row { grid-template-columns:1fr; }.form-row button { width:100%; }.result-head { flex-direction:column; }.badges { justify-content:flex-start; }.empty-card { align-items:flex-start; } }