:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;line-height:1.4;color:#241013;background:#fff0d9;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #241013;--ink-soft: #6e4e4f;--paper: #fff3de;--paper-2: #ffe7bf;--pink: #f7569b;--pink-2: #ff8fbc;--yellow: #ffc824;--mint: #9ee6c6;--blue: #6171ff;--danger: #c9244e;--ok: #167a50;--border: #241013;--shadow: 5px 5px 0 #241013;--shadow-sm: 3px 3px 0 #241013;--radius: 8px;--control-height: 70px}*{box-sizing:border-box}html,body,#root{min-height:100vh}body{margin:0;background:radial-gradient(circle at 1px 1px,rgba(36,16,19,.13) 1px,transparent 0) 0 0 / 12px 12px,linear-gradient(135deg,#fff4dd,#ffd0ac 46%,#ff8fbc);color:var(--ink)}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1{max-width:820px;font-size:clamp(2rem,3vw,3.6rem);line-height:.95;letter-spacing:0}h2{font-size:1.35rem;line-height:1}h3{font-size:1rem;line-height:1.15}.app-shell{width:min(1260px,calc(100% - 28px));margin:0 auto;padding:12px 0 56px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;border:2px solid var(--border);background:#fff3deeb;box-shadow:var(--shadow-sm);padding:10px 14px;position:sticky;top:10px;z-index:20}.brand-mark{display:inline-flex;align-items:center;gap:8px;min-width:max-content}.brand-dot{width:18px;height:18px;border:2px solid var(--border);background:conic-gradient(from 20deg,var(--pink),var(--yellow),var(--pink));border-radius:50%;box-shadow:2px 2px 0 var(--border)}.brand-mark strong{font-weight:900}.brand-mark em{font-style:normal;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--pink)}.main-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.main-nav button,.main-nav a,.primary-button,.secondary-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;border:2px solid var(--border);border-radius:4px;background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--border);font-weight:850;font-size:.82rem;line-height:1;cursor:pointer}.main-nav button,.main-nav a{padding:8px 10px}.main-nav button.active,.primary-button{background:var(--pink)}.secondary-button{background:var(--yellow);padding:8px 10px}.icon-button{width:36px;padding:0;background:var(--paper)}button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none;transform:none}button:not(:disabled):active,.main-nav a:active{transform:translate(2px,2px);box-shadow:none}.capability-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0}.capability-strip span,.eyebrow-tag,.mini-label,.status-pill{display:inline-flex;align-items:center;width:fit-content;border:2px solid var(--border);border-radius:3px;background:var(--yellow);color:var(--ink);padding:3px 7px;font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.capability-strip span{background:var(--paper)}.capability-strip span.ok{background:var(--mint)}.capability-strip span.warn,.status-pill.error{background:var(--pink-2)}.system-warning,.error-banner{display:flex;align-items:flex-start;gap:10px;border:2px solid var(--border);border-radius:var(--radius);background:var(--yellow);box-shadow:var(--shadow-sm);padding:12px;margin-bottom:18px}.system-warning div,.error-banner{color:var(--ink)}.system-warning strong,.system-warning span{display:block}.system-warning span{color:var(--ink-soft);margin-top:2px}.view-stack{display:grid;gap:20px}.tool-panel,.engine-card,.winner-card,.headline-kpi-card,.metric-chart-card,.result-table-wrap{border:2px solid var(--border);border-radius:var(--radius);background:#fff3def5;box-shadow:var(--shadow)}.tool-panel{padding:18px}.loading-panel{min-height:240px;display:grid;place-items:center;font-weight:900}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.panel-heading p{color:var(--ink-soft);max-width:720px;margin-top:8px}.compact-heading{align-items:center;margin-bottom:12px}.panel-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.composer-grid{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:14px;align-items:start}label{display:grid;gap:7px;color:var(--ink);font-weight:850}label>span,.model-select-field>span,.prompt-preview-field>span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}select,input,textarea{width:100%;border:2px solid var(--border);border-radius:4px;background:#fffaf0;color:var(--ink);padding:10px 11px;outline:none;box-shadow:2px 2px #24101359}textarea{height:var(--control-height);min-height:var(--control-height);resize:vertical}select:focus,input:focus,textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px #f7569b38,2px 2px 0 var(--border)}.prompt-field{min-width:0}.model-select-field,.prompt-preview-field{display:grid;gap:7px;min-width:0;color:var(--ink);font-weight:850}.model-select{position:relative;min-width:0}.model-select-trigger{width:100%;min-height:var(--control-height);display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px solid var(--border);border-radius:4px;background:#fffaf0;color:var(--ink);padding:0 10px 0 11px;outline:none;box-shadow:2px 2px #24101359;font-weight:850;line-height:1.1;text-align:left;cursor:pointer}.model-select-trigger span,.model-select-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model-select-trigger svg{flex:0 0 auto;transition:transform .14s ease}.model-select.open .model-select-trigger svg{transform:rotate(180deg)}.model-select-trigger:focus-visible,.model-select.open .model-select-trigger{border-color:var(--pink);box-shadow:0 0 0 3px #f7569b38,2px 2px 0 var(--border)}.model-select-trigger:not(:disabled):active{transform:none;box-shadow:0 0 0 3px #f7569b38,2px 2px 0 var(--border)}.model-select-menu{position:absolute;z-index:30;top:calc(100% + 6px);right:0;left:0;display:grid;gap:3px;max-height:min(260px,60vh);overflow:auto;border:2px solid var(--border);border-radius:4px;background:#fffaf0;box-shadow:var(--shadow-sm);padding:4px}.model-select-option{width:100%;min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:3px;background:transparent;color:var(--ink);padding:8px 9px;box-shadow:none;font-weight:850;line-height:1.1;text-align:left;cursor:pointer}.model-select-option.active{background:var(--yellow)}.model-select-option.selected{background:var(--pink)}.model-select-option.selected.active{background:var(--pink-2)}.model-select-option:not(:disabled):active{transform:none;box-shadow:none}.advanced-drawer{margin-top:14px;border:2px dashed rgba(36,16,19,.55);border-radius:var(--radius);background:#ffffff4d}.advanced-drawer summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 12px;font-weight:900;list-style:none}.advanced-drawer summary::-webkit-details-marker{display:none}.advanced-drawer summary span{margin-left:auto;color:var(--ink-soft);font-size:.78rem;font-weight:750;text-align:right}.advanced-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(120px,.45fr) minmax(180px,.75fr);gap:12px;padding:0 12px 12px}.check-row{display:flex;align-items:center;align-self:end;gap:8px;min-height:42px;border:2px solid var(--border);border-radius:4px;background:#fffaf0;padding:8px 10px;box-shadow:2px 2px #24101359}.check-row input{width:auto;box-shadow:none}.check-row span{color:var(--ink);text-transform:none;letter-spacing:0;font-size:.9rem}.run-note{margin-top:12px;color:var(--ink-soft);font-weight:750}.engine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.engine-card{min-width:0;display:flex;flex-direction:column;padding:14px;overflow:hidden}.engine-card.sipp{background:#ffd7e8}.engine-card.webllm{background:#d7f5e7}.engine-card.transformersjs{background:#dde1ff}.engine-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}.engine-card-top h3{margin-top:6px;overflow-wrap:anywhere}.status-pill{flex:0 0 auto;background:var(--paper)}.status-pill.loading,.status-pill.warming,.status-pill.generating{background:var(--yellow)}.status-pill.complete{background:var(--mint)}.output-text{height:300px;overflow:auto;border:2px solid var(--border);border-radius:4px;background:#1b0c12;color:#fff3de;padding:12px;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,SF Mono,Consolas,monospace;font-size:.86rem;line-height:1.55}.output-text.placeholder{color:#caaeb3}.engine-note{min-height:38px;margin:10px 0;color:var(--ink-soft);font-weight:700;overflow-wrap:anywhere}.engine-note.error{color:var(--danger)}.metric-grid{display:grid;gap:8px}.metric-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid div,.winner-card{min-width:0;border:2px solid var(--border);border-radius:4px;background:#fffaf0e0;padding:8px}.metric-grid span,.winner-card span{display:block;color:var(--ink-soft);font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.metric-grid strong,.winner-card strong{display:block;margin-top:3px;font-size:1.05rem;overflow-wrap:anywhere}.benchmark-control-row{display:grid;grid-template-columns:minmax(220px,310px) minmax(0,1fr);gap:14px;align-items:start}.prompt-preview{height:var(--control-height);min-height:var(--control-height);display:flex;align-items:center;min-width:0;overflow:hidden;border:2px solid var(--border);border-radius:4px;background:#fffaf0;padding:0 11px;box-shadow:2px 2px #24101359}.prompt-preview p{min-width:0;color:var(--ink);overflow:hidden}.benchmark-monitor{display:grid;gap:14px}.benchmark-monitor .compact-heading{margin-bottom:0}.monitor-active-engine{display:inline-flex;align-items:center;gap:8px;min-width:0;border:2px solid var(--border);border-radius:4px;background:var(--mint);box-shadow:var(--shadow-sm);padding:8px 10px;font-size:.82rem;font-weight:900}.monitor-active-engine span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.benchmark-status-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.benchmark-status-card{min-width:0;min-height:118px;display:grid;grid-template-rows:auto 1fr auto;gap:8px;border:2px solid var(--border);border-radius:4px;background:#fffaf0;box-shadow:2px 2px #24101359;padding:10px}.benchmark-status-card.sipp{background:#ffd7e8}.benchmark-status-card.webllm{background:#d7f5e7}.benchmark-status-card.transformersjs{background:#dde1ff}.benchmark-status-card.downloading,.benchmark-status-card.loading,.benchmark-status-card.warming,.benchmark-status-card.running{outline:3px solid rgba(255,200,36,.55)}.benchmark-status-card.complete{outline:3px solid rgba(158,230,198,.75)}.benchmark-status-card.error{outline:3px solid rgba(247,86,155,.65)}.benchmark-status-card>div{display:flex;align-items:center;gap:7px;min-width:0}.benchmark-status-card strong,.benchmark-status-card em{min-width:0}.benchmark-status-card strong{font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.benchmark-status-card em{margin-left:auto;border:2px solid var(--border);border-radius:3px;background:var(--paper);padding:2px 5px;font-size:.65rem;font-style:normal;font-weight:950;text-transform:uppercase;white-space:nowrap}.benchmark-status-card p{color:var(--ink-soft);font-size:.82rem;font-weight:750;overflow-wrap:anywhere}.engine-dot{width:11px;height:11px;flex:0 0 auto;border:2px solid var(--border);border-radius:50%;background:var(--paper);box-shadow:1px 1px 0 var(--border)}.engine-dot.sipp{background:var(--pink)}.engine-dot.webllm{background:var(--mint)}.engine-dot.transformersjs{background:var(--blue)}.benchmark-progress{height:12px;overflow:hidden;border:2px solid var(--border);border-radius:999px;background:#fffaf0cc}.benchmark-progress span{display:block;height:100%;min-width:4px;background:repeating-linear-gradient(-45deg,var(--yellow),var(--yellow) 6px,var(--pink-2) 6px,var(--pink-2) 12px)}.benchmark-console{height:150px;margin:0;overflow:auto;border:2px solid var(--border);border-radius:4px;background:#1b0c12;color:#fff3de;box-shadow:inset 0 0 0 3px #ffc8241f;padding:13px;white-space:pre-wrap;-webkit-user-select:none;user-select:none;font-family:ui-monospace,SFMono-Regular,SF Mono,Consolas,monospace;font-size:.87rem;line-height:1.55;scrollbar-width:thin;scrollbar-color:transparent transparent}.benchmark-console.placeholder{color:#caaeb3}.benchmark-console:hover{scrollbar-color:var(--pink) transparent}.benchmark-console::-webkit-scrollbar{width:12px}.benchmark-console::-webkit-scrollbar-track{background:transparent}.benchmark-console::-webkit-scrollbar-thumb{min-height:36px;border:2px solid transparent;border-radius:999px;background:transparent;background-clip:padding-box}.benchmark-console:hover::-webkit-scrollbar-thumb{border-color:var(--border);background:var(--pink);box-shadow:inset 0 0 0 2px var(--yellow)}.benchmark-results{display:grid;grid-template-columns:1fr;gap:20px}.benchmark-comparison-dashboard{display:grid;gap:20px}.benchmark-empty-comparison{min-height:172px;display:grid;place-items:center}.benchmark-empty-comparison p{border:2px dashed rgba(36,16,19,.45);border-radius:var(--radius);padding:16px 18px;color:var(--ink-soft);text-align:center;font-weight:750}.headline-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.headline-kpi-card{min-width:0;display:grid;gap:12px;padding:14px;overflow:hidden}.headline-kpi-card.metric-ttft{background:#ffd7e8}.headline-kpi-card.metric-decode{background:#d7f5e7}.headline-kpi-card.metric-latency{background:#dde1ff}.kpi-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.kpi-card-top span{color:var(--ink);font-size:.78rem;font-weight:950;text-transform:uppercase}.kpi-card-top em{color:var(--ink-soft);font-size:.64rem;font-style:normal;font-weight:850;letter-spacing:.06em;text-align:right;text-transform:uppercase}.kpi-baseline-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:7px;border-bottom:2px dashed rgba(36,16,19,.3);padding-bottom:11px}.kpi-baseline-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpi-baseline-row b{color:var(--ink);font-size:1.52rem;line-height:1}.kpi-baseline-row small{color:var(--ink-soft);font-size:.7rem;font-weight:850}.kpi-baseline-row i{border:2px solid var(--border);border-radius:3px;background:var(--yellow);padding:2px 5px;font-size:.62rem;font-style:normal;font-weight:950;text-transform:uppercase}.kpi-comparison-list{display:grid;gap:6px}.kpi-comparison-row{min-width:0;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px;min-height:34px;border:2px solid rgba(36,16,19,.75);border-radius:4px;background:#fffaf0ad;padding:6px 8px}.kpi-comparison-row strong{color:var(--ink);font-size:1rem;font-weight:950}.kpi-comparison-row em{min-width:0;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;font-style:normal;font-weight:850}.per-metric-panel{display:grid;gap:12px}.per-metric-panel .compact-heading{margin-bottom:0}.metric-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.metric-chart-card{min-width:0;min-height:362px;display:grid;grid-template-rows:auto 1fr;gap:10px;background:#fffaf0;box-shadow:var(--shadow-sm);padding:12px;overflow:hidden}.metric-chart-heading{display:grid;gap:5px}.metric-chart-heading p{color:var(--ink-soft);font-size:.75rem;font-weight:750}.metric-chart-plot{min-height:288px;display:grid;grid-template-rows:48px minmax(190px,1fr) 22px;gap:4px}.bar-value-row,.bar-label-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.bar-value-cell{min-width:0;display:grid;grid-template-rows:22px 22px;justify-items:center;align-items:end;gap:4px}.chart-bars-area{position:relative;min-height:0;border-left:2px solid rgba(36,16,19,.25);border-bottom:2px solid rgba(36,16,19,.55);background:repeating-linear-gradient(to top,rgba(36,16,19,.1) 0,rgba(36,16,19,.1) 1px,transparent 1px,transparent 56px)}.chart-baseline{position:absolute;right:0;left:0;z-index:2;border-top:2px dashed var(--pink);transform:translateY(2px)}.chart-baseline span{position:absolute;right:4px;top:-22px;border:2px solid var(--border);border-radius:3px;background:var(--pink);color:var(--ink);padding:1px 5px;font-size:.62rem;font-weight:950}.bar-columns{position:absolute;inset:0 8px;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px}.bar-column{--engine-color: var(--paper-2);min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}.bar-value-cell.sipp,.bar-column.sipp{--engine-color: var(--pink)}.bar-value-cell.webllm,.bar-column.webllm{--engine-color: var(--mint)}.bar-value-cell.transformersjs,.bar-column.transformersjs{--engine-color: var(--blue)}.bar-label-row{align-items:start}.bar-label-row em{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:.72rem;font-style:normal;font-weight:900;text-align:center}.bar-slot{width:min(68px,84%);height:100%;display:flex;align-items:flex-end;justify-content:center}.bar-multiplier{max-width:100%;border:2px solid var(--border);border-radius:3px;background:var(--yellow);padding:1px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;font-weight:950}.bar-multiplier.baseline-spacer{visibility:hidden}.bar-value-cell strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;font-weight:950}.metric-bar{width:100%;min-height:4px;border:2px solid var(--border);border-bottom:0;border-radius:5px 5px 0 0;background:var(--engine-color);box-shadow:3px 0 #2410132e}.winner-card{box-shadow:var(--shadow-sm)}.winner-card em{display:block;margin-top:4px;color:var(--ink-soft);font-size:.78rem;font-style:normal;font-weight:750}.result-table-wrap{grid-column:1 / -1;overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:880px}th,td{padding:11px 12px;border-bottom:2px solid var(--border);text-align:left;vertical-align:top}tr:last-child td{border-bottom:0}th{background:var(--yellow);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}td{background:#fff3deeb}td strong,td span{display:block}td span{color:var(--ink-soft);font-size:.82rem;margin-top:3px}.history-panel{background:#fff4dee6}.history-list{display:grid;gap:8px}.history-item{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;border:2px solid var(--border);border-radius:4px;background:#fffaf0;color:var(--ink);padding:10px;box-shadow:2px 2px #24101359;text-align:left;cursor:pointer}.history-item.active{background:#ffd7e8}.history-item strong,.history-item span,.history-item em{min-width:0}.history-item strong{display:block}.history-item span{color:var(--ink-soft);font-size:.86rem}.history-item em{color:var(--ink);font-style:normal;font-weight:850;white-space:nowrap}.delete-run{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--border);border-radius:4px;background:var(--pink-2)}.empty-note{border:2px dashed rgba(36,16,19,.45);border-radius:var(--radius);padding:16px;color:var(--ink-soft);text-align:center;font-weight:750}@media(max-width:980px){.topbar,.panel-heading{align-items:stretch;flex-direction:column}.main-nav,.panel-actions{justify-content:flex-start}.composer-grid,.advanced-grid,.benchmark-control-row,.engine-grid,.benchmark-status-strip,.headline-kpi-grid,.metric-chart-grid,.benchmark-results{grid-template-columns:1fr}}@media(max-width:640px){.app-shell{width:min(100% - 16px,1260px);padding-bottom:32px}.topbar{top:6px}.main-nav{display:grid;grid-template-columns:1fr 1fr;width:100%}.main-nav a{grid-column:1 / -1}.main-nav button,.main-nav a,.primary-button,.secondary-button{width:100%}h1{font-size:2rem}.tool-panel,.engine-card{padding:12px;box-shadow:var(--shadow-sm)}.monitor-active-engine,.kpi-card-top,.kpi-baseline-row{align-items:flex-start}.monitor-active-engine{width:100%}.kpi-card-top{flex-direction:column}.kpi-baseline-row{grid-template-columns:auto minmax(0,1fr) auto auto}.kpi-baseline-row i{grid-column:1 / -1;width:fit-content}.benchmark-console{height:150px}.metric-chart-card{min-height:330px}.metric-chart-plot{min-height:256px}.output-text{height:260px}.history-item{grid-template-columns:minmax(0,1fr) auto}.history-item em{grid-column:1}}