/* The lab intentionally uses system typefaces: no external font or telemetry calls. */
:root { font-family:'Segoe UI',system-ui,sans-serif; color:#dce5df; background:#151b18; color-scheme:dark; font-size:14px; line-height:1.55; }
* { box-sizing:border-box; } body { margin:0; display:block; } button,input,select,textarea { font:inherit; } button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { opacity:.45; cursor:wait; } a { color:inherit; text-decoration:none; } :focus-visible { outline:2px solid #b7cf83; outline-offset:4px; } .hidden { display:none!important; }
.sidebar { width:218px; background:#111713; position:fixed; inset:0 auto 0 0; padding:32px 20px; border-right:1px solid #29332b; display:flex; flex-direction:column; } .brand { display:flex; align-items:center; font-size:27px; font-family:Georgia,serif; gap:9px; padding:0 8px; letter-spacing:-1px; } .brand-mark { display:grid; place-items:center; background:#b6ce85; color:#18221a; border-radius:50% 50% 50% 10%; width:28px; height:28px; font-style:italic; font-size:25px; padding-bottom:6px; } .alpha { margin-left:auto; font:9px 'Segoe UI',sans-serif; letter-spacing:1.5px; color:#99a48f; border:1px solid #3b4937; border-radius:3px; padding:3px 5px; }
.nav-label { margin:55px 12px 13px; font-size:9px; letter-spacing:1.8px; color:#778579; } .nav { display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; background:transparent; padding:12px 10px; color:#758576; font-size:10px; border-radius:4px; margin-bottom:5px; } .nav span { color:#b1bdb2; font-size:12px; } .nav.active { background:#253023; color:#bed68f; } .nav.active span { color:#d1dfc7; } .nav .count { font-size:9px; margin-left:auto; color:#8da37e; } .sidebar-bottom { margin-top:auto; font-size:10px; color:#acbba9; line-height:2; padding:10px; } .sidebar-bottom small { color:#748373; font-size:10px; } .sidebar-bottom a { display:block; margin-top:14px; color:#aabca3; } .live-dot { display:inline-block; background:#b6ce85; width:6px; height:6px; border-radius:50%; margin-right:6px; box-shadow:0 0 0 4px #b6ce850b; }
body>main { margin-left:218px; max-width:none; padding:0; } .topbar { height:64px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #29332b; padding:0 42px; background:transparent; font-size:9px; letter-spacing:1.2px; color:#819082; } .topbar b { font-weight:500; color:#bbc7b9; } .export { letter-spacing:0; color:#b9c5b4; font-size:11px; } .page { padding:38px 42px 20px; max-width:1560px; margin:0 auto; } .eyebrow { font-size:9px; letter-spacing:1.8px; color:#aabd9a; margin-bottom:15px; } .page-title { display:flex; align-items:center; justify-content:space-between; gap:25px; } h1 { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-1.7px; line-height:1.08; font-size:clamp(36px,3.8vw,57px); margin:0 0 17px; color:#e7ece4; max-width:none; } h1 em { font-weight:normal; color:#bad191; } .lede { color:#91a08f; font-size:12px; line-height:1.7; margin:0 0 25px; } .version { font-size:8px; letter-spacing:1.8px; line-height:2.1; color:#778971; border-left:1px solid #414d36; padding-left:18px; } .scope-note { font-size:11px; color:#9ca998; border:1px solid #344032; border-left:2px solid #91a871; background:#1b241c; padding:12px 16px; border-radius:0 4px 4px 0; margin:0 0 26px; max-width:none; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:stretch; } .panel { border:1px solid #344033; border-radius:7px; background:#1a221b; overflow:hidden; } .panel-head { min-height:51px; padding:13px 18px; border-bottom:1px solid #344033; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; font-weight:500; color:#c6d2be; } .panel-head>span { display:flex; align-items:center; gap:8px; } .step { font-size:9px; height:18px; width:18px; display:inline-grid; place-items:center; border:1px solid #526144; border-radius:50%; color:#b6c99e; margin-right:3px; } .panel-body { padding:18px; } .control-stack { display:flex; flex-direction:column; gap:18px; } .tag { display:inline-block; border:1px solid #4b583f; padding:3px 7px; border-radius:4px; color:#c0d19f; font-size:8px; font-weight:500; letter-spacing:.5px; white-space:nowrap; } .tag.success { border-color:#476047; color:#c0d9a2; background:#a3bf7612; } .tag.danger { border-color:#89664b; color:#e4b58c; background:#e4b58c0a; } .tag.muted { color:#96a48e; border-color:#3c4936; } .subtle { font-size:9px; color:#8c9d85; } .variant-bar { padding:12px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px; background:#222d22; } .variant-bar label { color:#9aab90; font-weight:normal; font-size:9px; } .variant-bar select { max-width:220px; padding:5px 9px; font-size:10px; background:#1b241c; } iframe { display:block; width:100%; min-height:685px; height:calc(100% - 110px); border:0; background:#f7f8f4; }
.hint { font-size:10px; line-height:1.7; color:#95a48b; margin:0 0 14px; } .hint.mini { margin:13px 0 0; font-size:9px; } .operation-name { display:block; color:#c1d49f; font:11px/1.7 Consolas,monospace; background:#101811; border:1px solid #34432e; padding:10px 12px; border-radius:4px; margin-bottom:18px; } label { display:grid; gap:6px; font-size:10px; font-weight:400; color:#bac6b0; margin-bottom:13px; } input,textarea,select { background:#131c15; border:1px solid #3b4a35; border-radius:4px; color:#d3dfc8; width:100%; padding:9px 10px; font-size:11px; } textarea { min-height:66px; resize:vertical; } .input-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .primary,.secondary,.stop { border-radius:4px; padding:10px 14px; font-size:11px; font-weight:600; transition:background .15s; border:1px solid transparent; } .primary { background:#bdd58e; color:#1d2b17; flex:1; display:flex; justify-content:space-between; } .primary:hover { background:#d0e6a8; } .secondary { background:#2b3827; color:#ccddbc; border-color:#526343; } .secondary:hover { background:#35462c; } .full { width:100%; } .stop { background:transparent; color:#bca085; border-color:#5f4b36; } .button-row { display:flex; gap:9px; } details { margin-top:12px; } summary { color:#9aab8d; cursor:pointer; font-size:9px; } pre { font:10px/1.7 Consolas,'Courier New',monospace; color:#b9caaa; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; max-height:370px; margin:12px 0 0; } #model { border-top:1px solid #344033; padding-top:12px; }
.latest { margin-top:22px; } .empty { padding:24px; font-size:11px; color:#91a187; } .result-summary { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; } .result-summary strong { font-size:14px; font-weight:500; } .result-summary>span { font-size:9px; color:#9cae8f; } .assertions { display:flex; gap:7px 20px; flex-wrap:wrap; margin-bottom:15px; } .assertions span { font-size:10px; } .passed { color:#b8ce99; } .not-passed { color:#e1af89; } .failure-message { color:#d9b08e; font-size:11px; } .text-button { background:none; border:0; color:#c0d5a5; font-size:10px; padding:0; } .notice { margin-top:16px; padding:12px 15px; border:1px solid #4b5b3e; border-radius:4px; color:#c4d7af; font-size:11px; background:#23301e; } .notice.error { border-color:#765c42; color:#e2be98; background:#30281e; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #3a4933; border-bottom:1px solid #3a4933; margin:25px 0; padding:20px 0; } .stat { border-right:1px solid #3a4933; padding:0 22px; display:flex; flex-direction:column; gap:6px; } .stat:first-child { padding-left:0; } .stat:last-child { border:0; } .stat strong { font:28px Georgia,serif; color:#cedebb; } .stat span { font-size:10px; color:#97a78c; } .evidence-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; } #runs { max-height:500px; overflow:auto; } .run-row { width:100%; display:flex; flex-wrap:wrap; gap:10px; align-items:center; text-align:left; border:0; border-bottom:1px solid #344033; border-radius:0; background:transparent; padding:16px 18px; color:#c3d0b8; } .run-row small { width:100%; color:#879a7b; font-size:9px; margin-left:0; } .run-row strong { font-size:11px; font-weight:500; } .run-row.selected,.run-row:hover { background:#293824; } #receipt-view { padding:20px; margin:0; max-height:500px; } .feedback { margin-top:22px; } .feedback .secondary { margin-right:12px; } #feedback-status { color:#bbce9e; font-size:11px; } .progress-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:20px 0; } .checklist { list-style:none; padding:10px 20px; margin:0; } .checklist li { display:flex; gap:13px; padding:13px 0; border-bottom:1px solid #33402e; } .checklist li:last-child { border:0; } .check { color:#6c8060; font-size:16px; } .done .check { color:#bdd58e; } .checklist strong { color:#aab99b; font-size:11px; font-weight:500; } .done strong { color:#d1e0bd; } .checklist p { color:#8b9d7c; font-size:10px; margin:3px 0 0; } .prose p { font-size:12px; line-height:1.9; color:#a8b99a; margin-top:0; margin-bottom:22px; } code { color:#c5d9a8; } .milestone { display:flex; align-items:center; gap:20px; padding:22px; border-bottom:1px solid #344033; } .milestone:last-child { border:0; } .milestone-num { font:11px Consolas,monospace; width:48px; flex-shrink:0; color:#93a97e; } .milestone h3 { font-size:12px; font-weight:500; color:#cadab9; margin:0 0 6px; } .milestone p { font-size:10px; color:#8e9f80; margin:0; } .milestone>.tag { margin-left:auto; } .source-links { font-size:10px; color:#829775; line-height:2; margin-top:20px; } .source-links a { color:#bfd1a5; } footer { font-size:9px; color:#6f8265; border-top:1px solid #2d3a28; padding:24px 42px; display:flex; justify-content:space-between; margin-top:28px; }
@media(min-width:1550px) { .page { padding-top:45px; } iframe { min-height:700px; } }
@media(max-width:1150px) { .sidebar { width:182px; padding:26px 12px; } body>main { margin-left:182px; } .page { padding:28px 24px 16px; } .topbar { padding:0 24px; } .workspace { gap:16px; } .panel-head { padding:12px; } .panel-body { padding:14px; } .version { display:none; } .evidence-grid { grid-template-columns:240px minmax(0,1fr); } .result-summary { align-items:flex-start; flex-direction:column; } }
@media(max-width:800px) { .sidebar { position:static; width:100%; padding:17px 20px; border-right:0; border-bottom:1px solid #344033; } .brand { font-size:25px; padding:0; } .alpha { margin-left:8px; } .nav-label,.sidebar-bottom { display:none; } nav { display:flex; gap:6px; margin-top:18px; } .nav { margin:0; font-size:8px; padding:9px; width:auto; } .nav span { font-size:10px; } body>main { margin:0; } .topbar { height:48px; padding:0 20px; } .page { padding:28px 20px 15px; } h1 { font-size:40px; } .workspace,.evidence-grid,.progress-grid { grid-template-columns:1fr; } iframe { min-height:660px; height:660px; } .panel-body { padding:18px; } .stats { grid-template-columns:1fr 1fr; row-gap:22px; } .stat { padding:0 15px; } .stat:nth-child(odd) { padding-left:0; } .stat:nth-child(even) { border:0; } footer { padding:22px 20px; flex-direction:column; gap:8px; } .milestone { gap:12px; padding:18px 15px; } .milestone-num { width:40px; } .milestone .tag { font-size:7px; } }