:root{color-scheme:dark;--bg:#111820;--panel:#17212c;--raised:#1e2c39;--line:#2b3a49;--text:#e5edf3;--muted:#a6b5c5;--aqua:#75cedc;--amber:#e4b978;--mono:ui-monospace,'Cascadia Code','SFMono-Regular',Consolas,monospace;font-family:'Segoe UI',Helvetica,Arial,sans-serif;font-size:14px;background:var(--bg);color:var(--text)}

*{box-sizing:border-box}
body{margin:0}
h1,h2,p{margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{opacity:.45;cursor:default}
a{color:var(--aqua);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,a,input,select,summary,[tabindex]{outline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--aqua)}
input,select{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:8px 10px}
input::placeholder{color:#8fa1b3}
input[type=number]{font-family:var(--mono)}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--aqua);cursor:pointer;margin:0}
input[type=range]{accent-color:var(--aqua);padding:0;border:0;width:110px;height:3px;cursor:pointer}
h1{font-size:27px;font-weight:550;letter-spacing:-.7px}
h2{font-size:16px;font-weight:550}
p{color:var(--muted);line-height:1.6}
.topbar{height:64px;padding:0 max(24px,4vw);display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.4px;font-weight:650;color:var(--text)}
.brand svg{color:var(--aqua)}
.snapshot{margin-left:auto;font-size:11px}
main{max-width:1540px;padding:30px max(24px,4vw) 20px;margin:auto}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}
.amount-control{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.amount-control input[type=number]{width:64px;padding:7px 8px}
.amount-control input[type=range]{margin-left:10px}
.controls{margin-bottom:18px}
.toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:8px}
.tabs button{padding:12px 15px;color:var(--muted);border-bottom:2px solid transparent}
.tabs button:first-child{padding-left:0;padding-right:22px}
.tabs button[aria-pressed=true]{border-color:var(--aqua);color:var(--text)}
.tabs span{font:10px var(--mono);background:var(--raised);border-radius:3px;padding:3px 5px;margin-left:5px;color:var(--muted)}
.outline{border:1px solid var(--line);border-radius:4px;padding:7px 11px;font-size:12px}
.outline.active{border-color:var(--aqua);color:var(--aqua)}
#shortlist-count{display:inline-block;margin-left:6px;font-family:var(--mono)}
.filter-row{display:flex;align-items:center;gap:12px;padding-top:15px}
.search{flex:1;max-width:350px;min-width:130px}
.search input{width:100%;font-size:12px;padding:9px 11px}
select{font-size:12px;max-width:180px;min-height:35px}
.check{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px;color:var(--muted)}
.frontier-filter{margin-left:auto}
.filter-popover{position:relative;font-size:12px}
.filter-popover>summary{cursor:pointer;padding:8px 11px;border:1px solid var(--line);border-radius:4px;list-style:none;color:var(--muted);min-height:35px}
.filter-popover>summary::-webkit-details-marker{display:none}
.filter-popover>summary::after{content:'⌄';margin-left:8px}
.filter-popover[open]>summary{color:var(--aqua);border-color:var(--aqua)}
.filter-fields{position:absolute;z-index:10;background:var(--raised);border:1px solid var(--line);padding:18px;border-radius:5px;width:260px;top:44px;right:0;box-shadow:0 9px 25px #0005;display:grid;gap:17px}
.filter-fields>label:not(.check){display:grid;gap:7px;font-size:11px;color:var(--muted)}
.filter-fields input[type=number]{width:100%}
.filter-fields .check{font-size:11px;white-space:normal}
.text-button{color:var(--aqua);font-size:12px;padding:0;text-decoration:underline;text-underline-offset:3px;text-align:left}
.quiet{font-size:11px;color:var(--muted);padding:3px 0}
.quiet:hover{color:var(--aqua)}
.workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:24px;align-items:start}
.section-head{min-height:37px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);padding:0 2px 10px}
.table-wrap{border:1px solid var(--line);border-radius:5px;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:12px}
th{height:42px;padding:9px 11px;background:var(--panel);text-align:left;font-weight:500;color:var(--muted)}
th button{padding:0;font-size:10px;text-align:inherit;white-space:nowrap}
th i{font-style:normal}
th[aria-sort]:not([aria-sort=none]){color:var(--aqua)}
td{padding:14px 11px;border-top:1px solid #263542}
.numeric{text-align:right;font-family:var(--mono);white-space:nowrap}
.numeric th button{font-family:inherit}
.select-col{width:34px;padding-left:12px;padding-right:0}
.product-button{padding:0;display:flex;align-items:center;gap:10px;width:100%;text-align:left;line-height:1.4}
.product-button strong{font-weight:550;font-size:12px;display:block}
.chevron{width:13px;flex-shrink:0;color:var(--muted);font-size:17px;font-weight:400}
.product-sub{font-size:10px;color:var(--muted);display:block;line-height:1.5;margin-top:4px;max-width:260px}
.cost-value{color:var(--aqua);font-family:var(--mono)}
.calorie-value{color:var(--amber);font-family:var(--mono)}
.custom-label{display:block;color:var(--muted);font:9px 'Segoe UI',sans-serif;margin-top:5px;white-space:normal}
.frontier-badge{display:block;color:var(--aqua);font:9px 'Segoe UI',sans-serif;margin-top:5px}
tr.hovered,tr.selected{background:#1b2b39}
tr.selected{box-shadow:inset 2px 0 var(--aqua)}
.detail-row>td{padding:0;background:var(--panel);border-top:0}
.product-details{padding:18px 20px 21px 35px}
.detail-heading{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:var(--text);align-items:center;flex-wrap:wrap}
.type{color:var(--c);font-size:10px}
.detail-facts{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:10px;color:var(--muted);margin-top:12px}
.price-form{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:18px 0}
.price-form label{font-size:11px;color:var(--muted)}
.price-form input{width:95px;font-size:12px;padding:7px 8px}
.primary{color:var(--bg);background:var(--aqua);border-radius:4px;padding:8px 12px;font-size:11px;font-weight:600}
.detail-sources{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:11px}
.detail-sources>span{color:var(--muted);font-size:10px;margin-left:auto}
.detail-note,.offer-note{font-size:10px;line-height:1.6;margin-top:10px;max-width:65ch}
.offer-note{color:var(--amber)}
.plot-panel{position:sticky;top:20px;margin-top:37px;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:18px 16px}
.plot-head{display:flex;justify-content:space-between;align-items:center}
.explain{position:relative}
.explain>summary{list-style:none;cursor:pointer;border:1px solid #526375;border-radius:50%;color:var(--muted);font-size:11px;width:18px;height:18px;text-align:center;line-height:16px}
.explain>summary::-webkit-details-marker{display:none}
.explain>div{position:absolute;z-index:5;right:0;top:26px;background:var(--raised);border:1px solid var(--line);border-radius:4px;padding:14px;width:240px;font-size:12px;color:var(--muted);line-height:1.6}
.legend{display:flex;gap:11px;flex-wrap:wrap;margin:17px 0 12px}
.legend span{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:5px}
.legend i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.plot-area{position:relative}
#scatter svg{display:block;width:100%;height:auto;overflow:visible}
.grid-line{stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
.axis-text{fill:var(--muted);font:10px var(--mono)}
.axis-label{fill:var(--muted);font:10px 'Segoe UI',sans-serif}
.frontier-line{fill:none;stroke:var(--aqua);stroke-width:1.5;stroke-dasharray:5 4;opacity:.8}
.point{cursor:pointer;outline:none}
.point-core{stroke-width:0}
.frontier-ring{opacity:.3}
.point.hovered .point-core,.point.selected .point-core,.point:focus .point-core,.point.shortlisted .point-core{stroke:white;stroke-width:1.5}
.point.hovered .point-core,.point.selected .point-core,.point:focus .point-core{r:7}
.point:focus .point-hit{stroke:var(--aqua);stroke-width:1}
#plot-tooltip{position:absolute;left:40px;right:8px;top:0;background:var(--raised);border:1px solid #486071;border-radius:4px;padding:9px 11px;font-size:10px;pointer-events:none;line-height:1.5;box-shadow:0 4px 16px #0004}
#plot-tooltip strong{font-weight:600}
#plot-tooltip span{display:block;color:var(--aqua);font:10px var(--mono);margin-top:3px}
.plot-bottom{display:flex;justify-content:space-between;align-items:center;min-height:22px;gap:15px;margin-top:10px;font-size:10px;color:var(--muted)}
#plot-selection{border-top:1px solid var(--line);padding-top:16px;margin-top:13px}
#plot-selection>strong{font-size:13px;display:block;font-weight:550}
#plot-selection>span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.selection-numbers{display:flex;gap:22px;margin-top:13px;font:16px var(--mono)}
.selection-numbers b{font-weight:400;color:var(--aqua)}
.selection-numbers b:last-child{color:var(--amber)}
#plot-selection p{font-size:11px;margin:13px 0}
.empty{padding:30px 15px;text-align:center;color:var(--muted);font-size:13px}
.empty button{margin-top:12px}
.price-note{font-size:10px;margin-top:18px;line-height:1.7;color:var(--muted)}
.methods{border-top:1px solid var(--line);margin-top:30px;padding:18px 0}
.methods>summary{cursor:pointer;color:var(--muted);font-size:12px;width:fit-content}
.method-content{max-width:780px;padding-top:7px}
.method-content p{font-size:12px;margin-top:14px}
.method-actions{display:flex;gap:23px;flex-wrap:wrap;font-size:12px;margin-top:18px}
.compare-scroll{overflow:auto;border:1px solid var(--line);border-radius:5px}
.compare-table{width:max-content;min-width:100%}
.compare-table thead th{vertical-align:top;max-width:200px;min-width:155px;padding:16px 13px}
.compare-table thead th>strong{display:block;font-size:12px;color:var(--text);font-weight:550}
.compare-table thead th>span{display:block;font-size:10px;margin-top:7px;line-height:1.6;white-space:normal}
.compare-table thead th:first-child{min-width:125px}
.compare-table td{font-size:12px;vertical-align:top;line-height:1.8}
.compare-table tbody th{background:var(--bg);border-top:1px solid var(--line);font-size:10px;width:125px;white-space:normal}
.compare-table td a{font:11px 'Segoe UI',sans-serif}
.remove-pick{display:block;margin-bottom:12px;font-size:10px}
.skip{position:absolute;top:-100px;left:15px;padding:10px;background:var(--aqua);color:var(--bg);z-index:20}
.skip:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
#failure{padding:20px;border:1px solid #955950;color:#f0aa9c;margin-bottom:20px}
#failure button{color:var(--aqua)}

/* The app roadmap uses the same base type and spacing. */
.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.intro p{margin-top:10px;font-size:12px}
.methodology{border-top:1px solid var(--line);padding:24px 0}
.methodology h2{margin-bottom:20px}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.method-grid h3{font-size:14px}
.method-grid p{font-size:12px;margin-top:10px}

@media(max-width:1150px){.workspace{grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr);gap:18px}
main{padding-left:24px;padding-right:24px}
.product-sub{max-width:205px}
.product-button{gap:6px}
th,td{padding-left:9px;padding-right:9px}
.select-col{width:28px;padding-left:9px}
.plot-panel{padding:16px 10px}
}

@media(max-width:850px){.workspace{grid-template-columns:1fr}
.plot-panel{grid-row:1;position:static;margin-top:0;padding:16px}
.comparison{min-width:0}
.plot-area{max-width:650px;margin:auto}
.page-title{align-items:flex-start}
.amount-control input[type=range]{display:none}
.legend{font-size:10px}
#scatter svg{max-height:330px}
.plot-panel{margin-bottom:3px}
.price-note{margin-top:15px}
}

@media(max-width:550px){.topbar{height:55px;padding:0 17px;gap:15px}
.topbar>span:not(.snapshot){font-size:10px}
.snapshot{font-size:9px;max-width:100px;text-align:right;line-height:1.5}
main{padding:23px 15px 16px}
h1{font-size:23px}
.page-title{display:block;margin-bottom:17px}
.amount-control{margin-top:15px;font-size:11px}
.amount-control input[type=range]{display:block;flex:1;max-width:130px}
.amount-control input[type=number]{padding:5px 6px;width:55px}
.filter-row{gap:8px;flex-wrap:wrap}
.search{flex-basis:calc(60% - 8px);max-width:none}
.filter-row>label:nth-child(2){flex:1}
.filter-row select{width:100%;max-width:none;font-size:11px}
.filter-popover>summary{font-size:11px;padding:7px 9px;min-height:31px}
.frontier-filter{margin-left:4px;font-size:11px}
.filter-fields{left:0;right:auto}
.tabs{gap:3px}
.tabs button{padding:11px 10px;font-size:12px}
.tabs button:first-child{padding-right:13px}
.tabs span{font-size:9px;margin-left:3px}
.outline{font-size:11px}
.workspace{gap:16px}
.legend{gap:10px}
th,td{padding:12px 7px}
.select-col{width:25px;padding-left:8px;padding-right:0}
.product-sub{max-width:150px;font-size:9px}
.product-button strong{font-size:11px}
.chevron{font-size:15px;width:9px}
.product-button{gap:5px}
th button{white-space:normal;line-height:1.5;font-size:9px}
th.numeric{max-width:80px;width:22%}
td.numeric{font-size:12px}
.frontier-badge{font-size:8px}
.product-details{padding:15px 12px}
.detail-heading{gap:9px;font-size:10px}
.detail-facts{display:grid;gap:6px}
.price-form{gap:8px}
.price-form label{flex-basis:100%}
.price-form input{width:100px}
.detail-sources{gap:12px;font-size:10px}
.detail-sources>span{flex-basis:100%;margin-left:0}
.price-note{font-size:9px}
.methods{margin-top:20px}
.method-grid{grid-template-columns:1fr}
.intro{align-items:flex-start;gap:20px}
.compare-table thead th{min-width:145px}
.compare-table thead th:first-child{min-width:110px}
.compare-table tbody th{width:110px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}


#plot-toggle{padding:0;display:flex;align-items:center;gap:10px;font-size:16px;text-align:left;font-weight:550}
#frontier-badge-count{font:10px var(--mono);color:var(--aqua)}
#plot-toggle-icon{color:var(--muted);font-size:15px;margin-left:6px}

@media(max-width:550px){.search{flex:1 1 50%;min-width:140px}
.filter-row>label:nth-child(2){flex:1 1 35%;min-width:125px}
.filter-row select{min-width:125px}
}

.pack-size{font:10px var(--mono);color:var(--muted);font-weight:400;margin-left:5px;white-space:nowrap}.total-cost{color:var(--text);font-size:11px}#comparison th.numeric{width:17%}
@media(max-width:550px){#comparison th.numeric{width:19%;padding-left:5px;padding-right:5px}#comparison td.numeric{padding-left:5px;padding-right:5px;font-size:11px}.total-cost{font-size:10px!important}.pack-size{display:block;margin:3px 0 0;font-size:9px}.product-sub{max-width:120px}}