/* Forge: restrained experiment workspace. No remote fonts or decorative assets. */
:root { color-scheme: dark; --bg:#111315; --surface:#1a1d20; --text:#eceeef; --muted:#aeb4bb; --line:#454b52; --button:#e5e8eb; --ink:#15181b; --success:#a6d5bb; --warning:#e4c393; --error:#f0a69f; --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:ui-monospace,"SFMono-Regular",Consolas,monospace; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font:18px/1.55 var(--font); -webkit-font-smoothing:antialiased; } [hidden] { display:none!important; }
h1,h2,h3,p { margin:0; } h1,h2 { line-height:1.2; letter-spacing:-.025em; overflow-wrap:anywhere; } h1 { font-size:clamp(30px,4vw,38px); font-weight:650; } h2 { font-size:26px; font-weight:600; } h3 { font-size:20px; margin-bottom:12px; font-weight:550; }
a { color:var(--text); text-underline-offset:4px; } button,select,input { font:inherit; } button { min-height:48px; border-radius:5px; padding:10px 18px; cursor:pointer; border:1px solid var(--line); color:var(--text); background:var(--surface); } button:hover { border-color:var(--muted); } button:disabled { opacity:.5; cursor:default; } button.primary { background:var(--button); color:var(--ink); border-color:var(--button); font-weight:600; } button.quiet { background:none; } :focus-visible { outline:2px solid var(--text); outline-offset:4px; }
header { width:min(1040px,100%); padding:24px 32px; margin:auto; display:flex; align-items:center; justify-content:space-between; } .brand { font-size:30px; font-weight:700; letter-spacing:-.03em; text-decoration:none; } main { width:min(900px,100%); margin:32px auto 64px; padding:0 32px; } .intro { color:var(--muted); font-size:20px; margin:14px 0 32px; } .muted { color:var(--muted); font-size:16px; } label { display:block; margin-bottom:10px; font-weight:550; } .fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; } select,input { min-height:52px; min-width:0; width:100%; border:1px solid var(--line); border-radius:5px; padding:12px; background:var(--surface); color:var(--text); } #project-summary { margin-top:14px; } #compatibility { margin-top:6px; } .actions { display:flex; align-items:center; gap:20px; margin-top:24px; } #error,#access-error { color:var(--error); margin-top:20px; } #reconnect { margin-top:12px; }
#result { margin-top:36px; border-top:1px solid var(--line); padding-top:28px; } .result-heading { display:flex; justify-content:space-between; gap:16px; align-items:baseline; } #result-title[data-tone=success] { color:var(--success); } #result-title[data-tone=warning] { color:var(--warning); } #result-title[data-tone=error] { color:var(--error); } #result-description { margin-top:12px; } #phase { margin-top:10px; } #mismatch { margin-top:20px; } #timings { margin-top:24px; } table { width:100%; border-collapse:collapse; font-size:16px; } caption { text-align:left; color:var(--muted); padding-bottom:10px; } th,td { text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--line); } th { font-weight:550; } td:not(:first-child),th:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; } .table-scroll { overflow:auto; }
details { border-top:1px solid var(--line); padding-top:18px; margin-top:28px; } summary { cursor:pointer; font-weight:500; min-height:40px; } details>p { margin-top:14px; } #run-id { overflow-wrap:anywhere; } pre { font:16px/1.55 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; margin:18px 0; padding:16px; background:var(--surface); border-radius:5px; max-height:360px; overflow:auto; } .artifacts { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:18px; } .artifacts button { font-size:16px; text-align:left; white-space:normal; overflow-wrap:anywhere; } .history-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:16px 0 8px; } .history-row { width:100%; display:flex; justify-content:space-between; gap:16px; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:16px 0; text-align:left; } .history-row small { display:block; font-size:16px; color:var(--muted); } .history-row b { font-weight:500; font-size:16px; } .scope { color:var(--muted); font-size:16px; margin-top:32px; }
dialog { width:min(480px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--line); border-radius:8px; padding:28px; background:var(--surface); color:var(--text); } dialog::backdrop { background:#0009; } dialog p { margin:16px 0; } dialog label { margin-top:24px; } .dialog-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; } #clear-token { margin-top:20px; } .skip-link { position:fixed; top:-80px; left:16px; padding:12px; background:var(--button); color:var(--ink); z-index:10; } .skip-link:focus { top:16px; }
@media(max-width:600px) { header { padding:20px; } main { padding:0 20px; margin-top:20px; } .fields { grid-template-columns:minmax(0,1fr); } .actions,.result-heading,.history-row { flex-direction:column; align-items:stretch; gap:10px; } .history-heading { align-items:flex-start; } .actions button { width:100%; } dialog { padding:24px; } }