/* Research workbench. The legacy viewer and its dialogs keep their own styles. */
body.workbench-mode{
  --wb-paper:#f4f3ef;
  --wb-panel:#fafaf6;
  --wb-white:#fff;
  --wb-ink:#24302e;
  --wb-muted:#758078;
  --wb-green:#365747;
  --wb-green-soft:#e8eee7;
  --wb-line:#d6ddd4;
  --wb-line-dark:#b6c3b7;
  --wb-section-title-size:16px;
  --wb-title-size:15px;
  --wb-sub-size:12px;
  margin:0;
  overflow:hidden;
  background:var(--wb-paper);
  color:var(--wb-ink);
  font:15px/1.6 system-ui,"Microsoft YaHei",sans-serif;
}
body.workbench-mode #legacy-content[hidden],
#workbench [hidden]{display:none!important}
#workbench{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100dvh;
  min-height:0;
  padding:0 32px 24px;
}
#workbench *{box-sizing:border-box}
#workbench h1,#workbench h2,#workbench h3,#workbench h4,#workbench p{margin:0}
#workbench button,#workbench input,#workbench select{font:inherit}
#workbench button{
  color:var(--wb-ink);
  background:transparent;
  border:1px solid var(--wb-line);
  border-radius:3px;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
#workbench button:hover{background:var(--wb-green-soft);border-color:var(--wb-line-dark)}
#workbench button:focus-visible,#workbench input:focus-visible,#workbench select:focus-visible,
#workbench a:focus-visible{outline:2px solid #668d78;outline-offset:3px}
#workbench button:disabled{opacity:.4;cursor:default}
#workbench input:not([type=checkbox]):not([type=range]),#workbench select{
  min-height:38px;
  padding:8px 11px;
  border:1px solid var(--wb-line-dark);
  border-radius:3px;
  color:var(--wb-ink);
  background:var(--wb-white);
  min-width:0;
  max-width:100%;
}
#workbench input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--wb-green);flex:none}
#workbench input[type=range]{padding:0;accent-color:var(--wb-green);cursor:pointer}
#workbench .wb-header{
  display:flex;
  align-items:center;
  gap:30px;
  min-height:80px;
  flex:none;
  border-bottom:1px solid var(--wb-line-dark);
  margin-bottom:10px;
}
#workbench .wb-brand{display:flex;align-items:baseline;gap:18px;white-space:nowrap}
#workbench .wb-brand h1{font-size:26px;line-height:1.2;font-weight:650;letter-spacing:.03em}
#workbench .wb-brand>span,#workbench .wb-brand small{font-size:11px;letter-spacing:.16em;color:var(--wb-muted)}
#workbench .wb-legacy{margin-left:auto;padding:7px 0 7px 16px;color:var(--wb-green);text-decoration:none;font-size:12px;white-space:nowrap}
#workbench .wb-legacy:hover{text-decoration:underline}
#workbench .wb-layout{
  display:grid;
  grid-template-columns:340px 420px minmax(0,1fr);
  gap:20px;
  min-width:0;
  min-height:0;
  flex:1;
}
#workbench .wb-library,#workbench .wb-inspector,#workbench .wb-main{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--wb-line);
  background:var(--wb-panel);
}
#workbench .wb-language-tabs{display:flex;gap:7px;flex:none;padding:14px;border-bottom:1px solid var(--wb-line);background:var(--wb-panel)}
#workbench .wb-language-tabs button{flex:1;padding:9px 12px;border:1px solid var(--wb-line-dark);border-radius:0;font-size:16px;font-weight:600;line-height:1.4}
#workbench .wb-language-tabs button[aria-pressed=true]{background:var(--wb-green);border-color:var(--wb-green);color:#fff}
#workbench .wb-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  padding:17px 18px 13px;
  flex:none;
}
#workbench .wb-panel-header h2,#workbench .wb-panel-header strong{font-size:var(--wb-section-title-size);font-weight:650;letter-spacing:.03em}
#workbench .wb-panel-header span,#workbench .wb-panel-header small{color:var(--wb-muted);font-size:11px}
#workbench .wb-font-filter{padding:0 14px 14px;border-bottom:1px solid var(--wb-line);flex:none}
#workbench #wb-font-search{display:block;width:100%;font-size:13px;background:#f4f5f0;min-height:35px}
#workbench .wb-library-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px;
  min-height:0;
  flex:1;
}
#workbench .wb-family-list,#workbench .wb-weight-list{
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#bec8be transparent;
}
#workbench .wb-family-list{padding:6px 8px}
#workbench .wb-weight-list{padding:6px 7px;border-left:1px solid var(--wb-line);background:#f0f3ed}
#workbench .wb-family{
  display:block;
  width:100%;
  text-align:left;
  padding:11px 12px;
  border:1px solid transparent;
  border-radius:0;
  margin-bottom:4px;
}
#workbench .wb-family.is-active{background:var(--wb-green-soft);border-color:var(--wb-green)}
#workbench .wb-family-name{display:block;font-size:var(--wb-title-size);font-weight:560;line-height:1.4;overflow-wrap:anywhere}
#workbench .wb-family-note{display:block;color:var(--wb-muted);font-size:10px;line-height:1.5;margin-top:4px;overflow-wrap:anywhere}
#workbench .wb-family.is-active .wb-family-name{color:var(--wb-green);font-weight:680}
#workbench .wb-weight{
  position:relative;
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  align-items:center;
  column-gap:7px;
  width:100%;
  padding:12px 6px;
  text-align:left;
  border:1px solid transparent;
  border-radius:0;
  margin-bottom:3px;
}
#workbench .wb-weight.is-active{background:white;border-color:var(--wb-line-dark)}
#workbench .wb-weight strong{font-size:var(--wb-sub-size);font-weight:600;line-height:1.3}
#workbench .wb-weight small{grid-column:2;font-size:10px;color:var(--wb-muted);overflow-wrap:anywhere;margin-top:2px;line-height:1.3}
#workbench .wb-weight .wb-swatch{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--wb-weight-color,#365747)}
#workbench .wb-weight:not(.is-active) .wb-swatch{opacity:.3}
#workbench .wb-weight:has(input) strong{color:var(--wb-weight-color)}
#workbench .wb-weight input[type=checkbox]{accent-color:var(--wb-weight-color)}
#workbench .wb-weight-actions{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;border-top:1px solid var(--wb-line);flex:none}
#workbench .wb-weight-actions button{font-size:11px;padding:5px 9px}
#workbench #wb-selection-summary{font-size:11px;color:var(--wb-muted);padding:0 14px 12px;line-height:1.6}
#workbench .wb-study-tabs,#workbench .wb-view-tabs{display:flex;flex:none;min-width:0;align-items:stretch;gap:6px}
#workbench .wb-study-tabs{padding:14px 18px 8px}
#workbench .wb-study-tabs button{
  flex:1;
  min-width:0;
  border:1px solid transparent;
  border-radius:0;
  padding:8px 6px;
  background:transparent;
  color:var(--wb-ink);
  font-size:var(--wb-title-size);
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
}
#workbench .wb-view-tabs{padding:0 18px 14px;border-bottom:1px solid var(--wb-line)}
#workbench .wb-view-tabs button{
  flex:1;
  min-width:0;
  border:1px solid transparent;
  border-radius:0;
  padding:7px 5px;
  background:transparent;
  color:var(--wb-ink);
  font-size:var(--wb-sub-size);
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
}
#workbench .wb-control-scroll{overflow:auto;min-height:0;flex:1;padding:20px 22px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bec8be transparent}
#workbench .wb-field{margin-bottom:20px;min-width:0}
#workbench .wb-field>label,#workbench .wb-field>span,#workbench .wb-field>h3,
#workbench .wb-field>strong{display:block;font-size:12px;color:var(--wb-muted);font-weight:500;margin-bottom:8px;letter-spacing:.03em}
#workbench .wb-field>select,#workbench .wb-field>input:not([type=checkbox]):not([type=range]){width:100%;font-size:12px}
#workbench .wb-field>label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px;color:var(--wb-ink);margin-bottom:8px;font-size:13px;letter-spacing:0}
#workbench .wb-segment{display:flex;border:1px solid var(--wb-line-dark);border-radius:3px;overflow:hidden;min-width:0}
#workbench .wb-segment button{min-width:0;flex:1;padding:9px 7px;border:0;border-left:1px solid var(--wb-line-dark);border-radius:0;font-size:13px;line-height:1.4}
#workbench .wb-segment button:first-child{border-left:0}
#workbench .wb-segment button[aria-pressed=true],#workbench .wb-segment button.is-active{background:var(--wb-green);color:white}
#workbench .wb-control-note{font-size:11px;line-height:1.75;color:var(--wb-muted);margin:10px 0 18px}
#workbench .wb-control-note a{color:var(--wb-green)}
#workbench .wb-explanation{margin-top:20px;border-top:1px solid var(--wb-line);padding-top:14px;font-size:12px}
#workbench .wb-explanation summary{color:var(--wb-green);cursor:pointer}
#workbench .wb-explanation p{font-size:11px;color:var(--wb-muted);line-height:1.85;margin-top:10px}
#workbench #wb-data{margin-top:24px;padding-top:20px;border-top:1px solid var(--wb-line-dark)}
#workbench #wb-data:empty{display:none}
#workbench #wb-data h3{font-size:15px;font-weight:600;margin-bottom:12px}
#workbench #wb-data h4{font-size:12px;color:var(--wb-green);font-weight:600;margin:18px 0 8px}
#workbench #wb-data .metric-list{border-top:0}
#workbench #wb-data .metric-row{font-size:12px;gap:16px;line-height:1.6;padding:8px 0;border-bottom:1px solid #e2e7df}
#workbench #wb-data .metric-row dt{color:var(--wb-muted);min-width:0;flex:1}
#workbench #wb-data .metric-row dd{max-width:62%;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#workbench #wb-data .metric-row.emphasis dd{color:#b92934}
#workbench #wb-data .data-note{font-size:11px;line-height:1.8;margin:13px 0}
#workbench #wb-data .data-warning{font-size:11px;border-radius:2px;padding:10px 12px}
#workbench .wb-main{background:var(--wb-white);position:relative}
#workbench .wb-querybar{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:18px 22px;border-bottom:1px solid var(--wb-line);min-height:80px}
#workbench .wb-querybar #query{width:210px;flex:none;font-size:14px;height:38px}
#workbench .wb-querybar #search{padding:8px 14px;background:var(--wb-green);border-color:var(--wb-green);color:white;font-size:13px;height:38px;white-space:nowrap}
#workbench .wb-querybar #search:hover{background:#466b55}
#workbench .wb-querybar #quick-query,#workbench .wb-querybar #wb-extra-query{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0}
#workbench #quick-query .small,#workbench #quick-query>span{display:none}
#workbench #quick-query button,#workbench #wb-extra-query button{width:34px;height:34px;display:grid;place-items:center;padding:0;background:#f7f8f3;border-color:#dce2d8;border-radius:3px;font-size:17px}
#workbench #quick-query button.active,#workbench #quick-query button.is-active,
#workbench #wb-extra-query button.active,#workbench #wb-extra-query button.is-active{background:var(--wb-green-soft);border-color:#789580;color:var(--wb-green);font-weight:650}
#workbench #wb-extra-query{padding-left:10px;border-left:1px solid var(--wb-line)}
#workbench #wb-extra-query button{font-family:Georgia,serif;font-size:19px}
#workbench .wb-main-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:18px 24px 14px;min-width:0}
#workbench .wb-main-head>div:first-child{min-width:0}
#workbench #wb-view-title{font-size:19px;line-height:1.5;font-weight:600}
#workbench #wb-view-subtitle{font-size:11px;color:var(--wb-muted);margin-top:3px;line-height:1.5;overflow-wrap:anywhere}
#workbench .wb-main-actions{display:flex;gap:7px;flex:none}
#workbench .wb-main-actions button{padding:6px 11px;font-size:11px;white-space:nowrap}
#workbench .wb-viewport{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  flex:1;
  overflow:hidden;
  margin:0 22px;
  border:1px solid var(--wb-line);
  background:#fdfdfa;
}
#workbench #wb-glyph-stage{
  position:relative;
  box-sizing:border-box;
  width:min(calc(100% - 36px),calc((100dvh - 332px) * var(--stage-aspect,1)));
  max-height:calc(100% - 36px);
  aspect-ratio:var(--stage-aspect,1);
  flex:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:white;
  overflow:hidden;
  touch-action:none;
}
#workbench #wb-glyph-stage.wb-context-ready .wb-glyph-layer{visibility:hidden}
#workbench #wb-context-preview{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;object-fit:fill}
#workbench #wb-glyph-stage.wb-context-ready #wb-context-preview{display:block}
#workbench #wb-context-note{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;padding:5px 8px;background:#ffffffdf;color:#555;font-size:11px;line-height:1.45;text-align:center;pointer-events:none}
#workbench #wb-context-note:empty{display:none}
#workbench .wb-glyph-layer{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
#workbench #wb-glyph-image,#workbench #wb-glyph-guides{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0;display:block;object-fit:contain}
#workbench #wb-glyph-guides{overflow:visible}
#workbench #wb-average-view{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;padding:18px}
#workbench #wb-average-image{display:block;width:100%;height:100%;object-fit:contain;min-width:0;min-height:0}
#workbench #wb-centroid-host{position:relative;width:min(calc(100% - 36px),calc(100dvh - 332px));max-height:calc(100% - 36px);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:0}
#workbench #wb-centroid-host .centroid-detail-stage{width:100%;max-height:100%;min-height:0}
#workbench #wb-centroid-host #centroid-detail-image{width:100%;height:auto;max-height:calc(100dvh - 338px);object-fit:contain;border:0;border-radius:0}
#workbench #wb-centroid-host #centroid-detail-status{font-size:12px;padding:9px 12px;width:100%;border-radius:2px}
#workbench #wb-chart-host{display:flex;align-items:stretch;justify-content:center;width:100%;height:100%;min-height:0;min-width:0;padding:10px}
#workbench #wb-chart-host #scz-canvas{display:block;width:100%;height:100%;max-width:100%;border:0;border-radius:0;object-fit:contain;background:transparent}
#workbench #wb-gray-canvas{display:block;max-width:calc(100% - 36px);max-height:calc(100% - 36px);object-fit:contain;background:white}
#workbench #wb-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;text-align:center;background:#fdfdfa;color:var(--wb-muted);font-size:13px}
#workbench #wb-empty strong{font-size:18px;font-weight:500;color:var(--wb-green)}
#workbench .wb-view-footer{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;flex:none;padding:15px 23px 17px;min-height:62px;font-size:11px;color:var(--wb-muted)}
#workbench #wb-legend{display:flex;align-items:center;flex-wrap:wrap;gap:7px 15px;min-width:0;flex:1;line-height:1.7}
#workbench #wb-legend span{white-space:nowrap}
#workbench #wb-view-status{font-size:11px;color:var(--wb-muted);font-variant-numeric:tabular-nums}
#workbench .wb-view-footer>label{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:11px}
#workbench #wb-zoom{width:112px;min-width:70px}
#workbench #wb-zoom-value{font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
#workbench .wb-view-footer output{font-variant-numeric:tabular-nums}
#workbench .wb-main.is-expanded{position:fixed;inset:24px;z-index:20;box-shadow:0 0 0 40px #24302e66}
#workbench .wb-main.is-expanded #wb-glyph-stage{width:min(calc(100% - 36px),calc((100dvh - 280px) * var(--stage-aspect,1)))}
#workbench .wb-main.is-expanded #wb-centroid-host{width:min(calc(100% - 36px),calc(100dvh - 280px))}
#workbench .wb-main.is-expanded #wb-centroid-host #centroid-detail-image{max-height:calc(100dvh - 284px)}
@media(min-width:2100px){
  #workbench{padding:0 44px 32px}
  #workbench .wb-header{min-height:88px;margin-bottom:10px}
  #workbench .wb-brand h1{font-size:29px}
  #workbench .wb-layout{grid-template-columns:380px 480px minmax(0,1fr);gap:24px}
  #workbench .wb-library-body{grid-template-columns:minmax(0,1fr) 124px}
  body.workbench-mode{--wb-title-size:16px;--wb-sub-size:13px}
  #workbench .wb-family{padding-top:13px;padding-bottom:13px}
  #workbench .wb-family-note{font-size:11px}
  #workbench .wb-weight{padding:15px 7px}
  #workbench .wb-control-scroll{padding:25px 28px}
  #workbench .wb-field{margin-bottom:24px}
  #workbench .wb-segment button{padding:12px 8px;font-size:14px}
  #workbench #wb-data .metric-row{font-size:13px;padding:10px 0}
  #workbench .wb-main-head{padding-top:21px;padding-bottom:19px}
  #workbench #wb-view-title{font-size:22px}
  #workbench .wb-querybar{padding-top:21px;padding-bottom:21px;gap:10px}
  #workbench .wb-querybar #query{width:242px;height:42px}
  #workbench .wb-querybar #search{height:42px}
  #workbench #quick-query button,#workbench #wb-extra-query button{width:40px;height:40px;font-size:20px}
  #workbench #wb-glyph-stage{width:min(calc(100% - 44px),calc((100dvh - 380px) * var(--stage-aspect,1)));max-height:calc(100% - 44px)}
  #workbench #wb-centroid-host{width:min(calc(100% - 44px),calc(100dvh - 380px));max-height:calc(100% - 44px)}
  #workbench #wb-centroid-host #centroid-detail-image{max-height:calc(100dvh - 382px)}
  #workbench .wb-view-footer{padding-top:18px;padding-bottom:20px;font-size:12px;min-height:70px}
  #workbench #wb-view-status{font-size:12px}
}
@media(max-width:1650px){
  #workbench{padding:0 20px 18px}
  #workbench .wb-header{min-height:72px;margin-bottom:10px;gap:18px}
  #workbench .wb-brand h1{font-size:23px}
  #workbench .wb-brand{gap:12px}
  #workbench .wb-layout{grid-template-columns:280px 330px minmax(0,1fr);gap:14px}
  #workbench .wb-library-body{grid-template-columns:minmax(0,1fr) 94px}
  body.workbench-mode{--wb-title-size:13px;--wb-sub-size:11px}
  #workbench .wb-family{padding:10px}
  #workbench .wb-family-note{font-size:10px}
  #workbench .wb-weight{padding:11px 4px;column-gap:5px}
  #workbench .wb-weight small{font-size:9px}
  #workbench .wb-control-scroll{padding:18px 17px}
  #workbench .wb-study-tabs{padding-left:12px;padding-right:12px}
  #workbench .wb-view-tabs{padding-left:12px;padding-right:12px}
  #workbench .wb-querybar{padding:13px 16px;gap:7px}
  #workbench .wb-querybar #query{width:185px;font-size:12px}
  #workbench .wb-querybar #search{font-size:12px;padding:8px 10px}
  #workbench #quick-query button,#workbench #wb-extra-query button{width:30px;height:30px;font-size:16px}
  #workbench #wb-extra-query{padding-left:7px}
  #workbench .wb-main-head{padding:14px 17px}
  #workbench #wb-view-title{font-size:17px}
  #workbench .wb-viewport{margin:0 16px}
  #workbench .wb-view-footer{padding:12px 17px;font-size:10px}
}
@media(max-width:1280px) and (min-width:1001px){
  #workbench{padding:0 14px 14px}
  #workbench .wb-layout{grid-template-columns:235px 285px minmax(0,1fr);gap:10px}
  #workbench .wb-library-body{grid-template-columns:minmax(0,1fr) 85px}
  #workbench .wb-panel-header{padding-left:13px;padding-right:11px}
  #workbench .wb-font-filter{padding-left:10px;padding-right:10px}
  body.workbench-mode{--wb-title-size:12px}
  #workbench .wb-family-note{font-size:9px}
  #workbench .wb-control-scroll{padding:16px 14px}
  #workbench .wb-querybar #query{width:150px}
  #workbench #wb-extra-query{padding-left:0;border:0}
  #workbench .wb-brand>span,#workbench .wb-brand small{display:none}
  #workbench .wb-main-actions button{padding:5px 7px;font-size:10px}
}
@media(max-height:850px) and (min-width:1001px){
  #workbench .wb-header{min-height:62px;margin-bottom:8px}
  #workbench .wb-querybar{padding-top:12px;padding-bottom:12px;min-height:64px}
  #workbench .wb-main-head{padding-top:12px;padding-bottom:12px}
  #workbench .wb-view-footer{padding-top:10px;padding-bottom:10px;min-height:48px}
  #workbench #wb-glyph-stage{width:min(calc(100% - 22px),calc((100dvh - 300px) * var(--stage-aspect,1)));max-height:calc(100% - 22px)}
  #workbench #wb-centroid-host{width:min(calc(100% - 22px),calc(100dvh - 300px));max-height:calc(100% - 22px)}
  #workbench #wb-centroid-host #centroid-detail-image{max-height:calc(100dvh - 306px)}
}
@media(max-width:1000px){
  body.workbench-mode{overflow:auto}
  #workbench{height:auto;min-height:100dvh;padding:0 16px 20px}
  #workbench .wb-header{min-height:78px;flex-wrap:wrap;gap:5px 15px;padding:15px 0;margin-bottom:14px}
  #workbench .wb-brand{flex:1}
  #workbench .wb-brand h1{font-size:22px}
  #workbench .wb-brand>span,#workbench .wb-brand small{display:none}
  #workbench .wb-layout{grid-template-columns:minmax(0,1fr);gap:14px}
  #workbench .wb-library{height:300px}
  #workbench .wb-library-body{grid-template-columns:minmax(0,1fr) 140px}
  #workbench .wb-family-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:0 6px}
  body.workbench-mode{--wb-title-size:13px}
  #workbench .wb-family{padding:9px 11px}
  #workbench .wb-weight-actions{padding:8px 14px}
  #workbench #wb-selection-summary{padding-bottom:8px}
  #workbench .wb-inspector{max-height:570px}
  #workbench .wb-control-scroll{max-height:450px}
  #workbench .wb-main{height:800px;min-height:560px}
  #workbench .wb-querybar{padding:14px 16px}
  #workbench .wb-main-head{padding:13px 16px}
  #workbench .wb-viewport{margin:0 16px}
  #workbench #wb-glyph-stage{width:min(calc(100% - 30px),calc(510px * var(--stage-aspect,1)));max-height:calc(100% - 30px)}
  #workbench #wb-centroid-host{width:min(calc(100% - 30px),510px);max-height:calc(100% - 30px)}
  #workbench #wb-centroid-host #centroid-detail-image{max-height:510px}
  #workbench .wb-main.is-expanded{inset:12px;height:auto;min-height:0}
}
@media(max-width:550px){
  #workbench{padding-left:10px;padding-right:10px}
  #workbench .wb-library-body{grid-template-columns:minmax(0,1fr) 100px}
  #workbench .wb-family-list{grid-template-columns:minmax(0,1fr)}
  #workbench .wb-main{height:700px}
  #workbench .wb-querybar{gap:7px;padding:12px}
  #workbench .wb-querybar #query{width:calc(100% - 92px);flex:1}
  #workbench .wb-querybar #quick-query{width:100%;gap:5px}
  #workbench .wb-querybar #wb-extra-query{border:0;padding-left:0}
  #workbench .wb-main-head{padding:12px}
  #workbench #wb-view-title{font-size:16px}
  #workbench .wb-main-actions{gap:4px}
  #workbench .wb-main-actions button{padding:5px 7px;font-size:10px}
  #workbench .wb-viewport{margin:0 10px}
  #workbench .wb-view-footer{padding:11px 13px;gap:7px 12px}
  #workbench #wb-legend{flex-basis:100%;font-size:10px;gap:4px 10px}
  #workbench .wb-brand h1{font-size:20px}
}
/* Size against the actual viewport, including toolbars that wrap at smaller widths. */
@supports(height:1cqh){
  #workbench .wb-viewport{container-type:size}
  #workbench #wb-glyph-stage,
  #workbench .wb-main.is-expanded #wb-glyph-stage{
    width:min(calc(100cqw - 36px),calc((100cqh - 36px) * var(--stage-aspect,1)));
    max-height:none;
  }
  #workbench #wb-centroid-host,
  #workbench .wb-main.is-expanded #wb-centroid-host{
    width:min(calc(100cqw - 36px),calc(100cqh - 36px));
    max-height:none;
  }
  #workbench #wb-centroid-host #centroid-detail-image,
  #workbench .wb-main.is-expanded #wb-centroid-host #centroid-detail-image{max-height:calc(100cqh - 36px)}
}
@media(prefers-reduced-motion:reduce){#workbench button{transition:none}}

/* Minimal monochrome shell: the research data keeps its semantic chart colors. */
body.workbench-mode{
  --wb-paper:#050505;
  --wb-panel:#ffffff;
  --wb-white:#ffffff;
  --wb-ink:#111111;
  --wb-muted:#666666;
  --wb-green:#111111;
  --wb-green-soft:#eeeeee;
  --wb-line:#d8d8d8;
  --wb-line-dark:#111111;
  background:#050505;
  color:#ffffff;
}
#workbench{background:#050505}
#workbench .wb-header{
  border-bottom-color:#3a3a3a;
}
#workbench .wb-brand h1,
#workbench .wb-brand>span,
#workbench .wb-brand small,
#workbench .wb-legacy{color:#ffffff}
#workbench .wb-brand>span,
#workbench .wb-brand small{opacity:.68}
#workbench .wb-legacy:hover{opacity:1;text-decoration:underline}
#workbench .wb-library,
#workbench .wb-inspector,
#workbench .wb-main{
  background:#ffffff;
  color:#111111;
  border-color:#ffffff;
}
#workbench .wb-library-body,
#workbench .wb-family-list,
#workbench .wb-weight-list,
#workbench .wb-control-scroll{
  background:#ffffff;
}
#workbench .wb-family-list,
#workbench .wb-weight-list,
#workbench .wb-control-scroll{scrollbar-color:#999999 transparent}
#workbench button,
#workbench input:not([type=checkbox]):not([type=range]),
#workbench select{
  color:#111111;
  border-color:#cfcfcf;
  background:#ffffff;
}
#workbench button:hover,
#workbench .wb-querybar #quick-query button:not(.active):not(.is-active):hover,
#workbench .wb-querybar #wb-extra-query button:not(.active):not(.is-active):hover{
  background:#eeeeee;
  border-color:#111111;
}
#workbench button:focus-visible,
#workbench input:focus-visible,
#workbench select:focus-visible,
#workbench a:focus-visible,
#workbench summary:focus-visible,
#workbench #wb-glyph-stage:focus-visible{outline:2px solid #111111;outline-offset:3px}
#workbench a{color:#111111}
#workbench .wb-header a:focus-visible{outline-color:#ffffff}
#workbench .marker:focus-visible .hit{stroke:#111111}
#workbench input[type=checkbox]{accent-color:#111111}
#workbench input[type=range]{accent-color:#111111}
#workbench .wb-font-filter,
#workbench .wb-study-tabs,
#workbench .wb-view-tabs,
#workbench #wb-data,
#workbench .wb-explanation,
#workbench .wb-weight-actions{border-color:#d8d8d8}
#workbench #wb-font-search{background:#ffffff}
#workbench .wb-weight-list{border-left-color:#d8d8d8}
#workbench .wb-family.is-active,
#workbench .wb-weight.is-active,
#workbench .wb-study-tabs button[aria-pressed=true],
#workbench .wb-view-tabs button[aria-pressed=true],
#workbench .wb-segment button[aria-pressed=true],
#workbench #quick-query button.active,
#workbench #quick-query button.is-active,
#workbench #wb-extra-query button.active,
#workbench #wb-extra-query button.is-active{
  background:#111111;
  border-color:#111111;
  color:#ffffff;
}
#workbench .wb-family.is-active .wb-family-name{color:#ffffff}
#workbench .wb-family.is-active .wb-family-note{color:#dddddd}
#workbench .wb-view-tabs button:disabled{background:transparent;border-color:transparent;color:#999999}
#workbench .wb-family-note,
#workbench .wb-panel-header span,
#workbench .wb-panel-header small,
#workbench .wb-control-note,
#workbench .wb-explanation p,
#workbench #wb-selection-summary,
#workbench #wb-view-subtitle,
#workbench #wb-view-status,
#workbench .wb-view-footer,
#workbench .wb-field>label,
#workbench .wb-field>span,
#workbench .wb-field>h3,
#workbench .wb-field>strong{color:#666666}
#workbench .wb-weight strong,
#workbench .wb-weight small{color:#111111}
#workbench .wb-weight.is-active strong,
#workbench .wb-weight.is-active small{color:#ffffff}
#workbench .wb-weight .wb-swatch{background:var(--wb-weight-color,#111111);flex:none}
#workbench .wb-weight:not(.is-active) .wb-swatch{opacity:.42}
#workbench .wb-weight:has(input){grid-template-columns:15px minmax(0,1fr);cursor:pointer}
#workbench .wb-weight:has(input) strong{display:flex;align-items:center;gap:6px}
#workbench .wb-weight:has(input:focus-visible){outline:2px solid #111111;outline-offset:2px}
#workbench .wb-weight input:focus-visible{outline:none}
#workbench .wb-weight:has(input) strong{color:#111111}
#workbench .wb-weight:has(input:checked) strong,
#workbench .wb-weight:has(input:checked) small{color:#ffffff}
#workbench .wb-family:not(.is-active):hover,
#workbench .wb-weight:not(.is-active):not(:has(input:checked)):hover{background:#eeeeee}
#workbench .wb-weight:has(input:checked){
  background:#111111;
  border-color:#111111;
}
#workbench .wb-weight input[type=checkbox]{accent-color:#ffffff}
#workbench .wb-querybar #search{
  background:#ffffff;
  border-color:#cfcfcf;
  color:#111111;
}
#workbench .wb-querybar #search:hover{background:#eeeeee;border-color:#111111}
#workbench #quick-query button:not(.active):not(.is-active),
#workbench #wb-extra-query button:not(.active):not(.is-active){background:#ffffff;border-color:#d8d8d8}
#workbench #wb-extra-query{border-left-color:#d8d8d8}
#workbench .wb-segment button[aria-pressed=true],
#workbench .wb-segment button.is-active{background:#111111;color:#ffffff}
#workbench .wb-main .wb-viewport{border-color:#d8d8d8;background:#ffffff}
#workbench #wb-empty{background:#ffffff;color:#666666}
#workbench #wb-empty strong{color:#111111}
#workbench #wb-data .metric-row{border-bottom-color:#e5e5e5}
#workbench #wb-data .data-note{color:#666666}
#workbench #wb-data h4,
#workbench .wb-explanation summary,
#workbench .wb-control-note a{color:#111111}
#workbench .wb-main.is-expanded{box-shadow:0 0 0 40px #000000cc}
#workbench .wb-main-actions button{background:#ffffff}
#workbench .wb-main-actions button:hover{background:#eeeeee}
#workbench button:disabled,
#workbench input:disabled,
#workbench select:disabled{background:#f5f5f5;color:#999999;border-color:#dddddd;opacity:1;cursor:default}
#workbench .wb-weight-actions button{background:#ffffff}
#workbench .wb-weight-actions button:hover{background:#eeeeee}
#workbench .wb-legacy{background:transparent;border-color:transparent}
#workbench .centroid-point-tip,
#workbench #marker-tip{
  z-index:1000;
  border:1px solid #111111;
  border-radius:3px;
  background:#111111;
  color:#ffffff;
  box-shadow:0 4px 16px #00000026;
}
#workbench .centroid-point-tip .point-glyph img{border-radius:0}
#workbench #centroid-detail-status,
#workbench #wb-data .data-warning{
  background:#f5f5f5;
  color:#666666;
  border:1px solid #d8d8d8;
}

/* Layout refinements: details belong to the main (third) panel, beside the
   rendered glyph/chart.  The inspector remains reserved for controls. */
body.workbench-mode{
  /* Google Material dark surface 900, softened very slightly by a quiet grid. */
  background-color:#202124;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:32px 32px;
  background-attachment:fixed;
}
#workbench{background:transparent}
#workbench .wb-header{border-bottom:0;margin-bottom:10px}
#workbench .wb-main-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,310px);
  gap:0;
  flex:1;
  min-width:0;
  min-height:0;
}
#workbench .wb-main-content .wb-viewport{
  margin:0;
  border:1px solid #d8d8d8;
  border-right:0;
  min-width:0;
  min-height:0;
}
#workbench #wb-main-data{
  min-width:0;
  min-height:0;
  overflow:auto;
  padding:20px 22px;
  border:1px solid #d8d8d8;
  border-left:1px solid #d8d8d8;
  background:#ffffff;
}
#workbench #wb-main-data #wb-data{margin:0;padding:0;border-top:0}
#workbench #wb-main-data:empty{display:none}
/* Match the reference's 4px outlined scrollbars, with a neutral grey border. */
#workbench :is(.wb-family-list,.wb-weight-list,.wb-control-scroll,#wb-main-data){
  scrollbar-width:auto;
  scrollbar-color:auto;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
#workbench :is(.wb-family-list,.wb-weight-list,.wb-control-scroll,#wb-main-data)::-webkit-scrollbar{width:4px;height:4px;background:transparent}
#workbench :is(.wb-family-list,.wb-weight-list,.wb-control-scroll,#wb-main-data)::-webkit-scrollbar-track,
#workbench :is(.wb-family-list,.wb-weight-list,.wb-control-scroll,#wb-main-data)::-webkit-scrollbar-corner{background:transparent}
#workbench :is(.wb-family-list,.wb-weight-list,.wb-control-scroll,#wb-main-data)::-webkit-scrollbar-thumb{min-height:24px;background:transparent;border:1px solid #777;border-radius:0}
#workbench :is(.wb-family-list,.wb-weight-list,.wb-control-scroll,#wb-main-data)::-webkit-scrollbar-button{display:none;width:0;height:0;appearance:none;-webkit-appearance:none}
@supports not selector(::-webkit-scrollbar){
  #workbench :is(.wb-family-list,.wb-weight-list,.wb-control-scroll,#wb-main-data){scrollbar-width:thin;scrollbar-color:#777 transparent}
}
@media(max-height:850px) and (min-width:1001px){#workbench .wb-header{margin-bottom:8px}}
@media(max-width:1000px){
  #workbench .wb-main-content{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(360px,1fr) auto}
  #workbench .wb-main-content .wb-viewport{border-right:1px solid #d8d8d8}
  #workbench #wb-main-data{max-height:360px;border-top:0;border-left:1px solid #d8d8d8;padding:16px}
}
@media(max-width:550px){
  #workbench .wb-main-content{grid-template-rows:minmax(300px,1fr) auto}
  #workbench #wb-main-data{max-height:320px;padding:14px}
}