.dimension-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px}.sphere-path{width:auto}.version-link{margin-left:auto;font-size:11px;color:#a66c4c;white-space:nowrap}#dimensionNav{display:flex;flex-wrap:wrap;flex-basis:100%;gap:5px 7px}#dimensionNav button{color:var(--dimension-color);background:transparent;border:1px solid transparent;border-radius:4px;font-size:12px;line-height:1.5;padding:4px 7px;min-height:30px}#dimensionNav button::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:middle}#dimensionNav button:hover,#dimensionNav button[aria-pressed=true]{color:var(--dimension-color);border-color:currentColor;background:#fff9}#dimensionNav button[aria-pressed=true]{font-weight:700}#dimensionNav button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.dimension-tools #dimensionNote{font-size:11px;margin:5px 0}.dimension-tools{padding-bottom:4px}#sphereLevel{color:#a66c4c}#portfolioMain #stage{min-height:480px;height:calc(100dvh - 250px)}@media(max-width:760px){#portfolioMain #stage{min-height:440px;height:calc(100dvh - 315px)}.version-link{font-size:10px}#dimensionNav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}#dimensionNav button{font-size:10px;padding:4px 1px;min-height:30px}#dimensionNav button::before{width:4px;height:4px;margin-right:3px}}
/* Desktop hierarchy: works 23px > exploration 20px > categories 18px > rail 15px. */
@media(min-width:761px){
 .dimension-tools .dimension-row{position:relative;justify-content:center;row-gap:10px}
 .dimension-tools .sphere-path{position:relative;justify-content:center;width:100%;min-height:36px;padding:0 180px}
 #sphereLevel{font-size:20px;font-weight:600;line-height:1.5;text-align:center}
 .dimension-tools #sphereBack{position:absolute;left:0;font-size:12px}
 .dimension-tools .version-link{position:absolute;right:0;top:10px;margin:0}
 #dimensionNav{justify-content:center;flex-basis:100%;gap:6px 10px;margin:0 auto}
 #dimensionNav button{font-size:18px;font-weight:500;padding:5px 9px;min-height:38px;line-height:1.5}
 #dimensionNav button[aria-pressed=true]{font-weight:700}
 .dimension-tools #dimensionNote{text-align:center;margin:8px 0 3px}
}
/* Give the three primary destinations more room, away from the right edge. */
@media(min-width:761px){
 header .header-nav,header.has-mode-switch .header-nav{gap:clamp(24px,3vw,48px);margin-left:auto;margin-right:clamp(24px,4vw,72px);white-space:nowrap}
 header .header-nav button{padding:12px 0;line-height:1.5}
}
@media(min-width:761px) and (max-width:1100px){
 header.has-mode-switch{gap:14px}
 header.has-mode-switch .brand{flex-basis:240px;min-width:180px}
 header.has-mode-switch .header-nav{gap:24px;margin-right:24px}
}
/* Primary navigation stays prominent and centered between brand and mode switch. */
@media(min-width:761px){
 header,header.has-mode-switch{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(150px,1fr);gap:20px;padding-left:24px;padding-right:24px}
 header .brand,header.has-mode-switch .brand{min-width:0;width:min(100%,260px)}
 header .header-nav,header.has-mode-switch .header-nav{justify-self:center;margin:0;gap:clamp(24px,2.5vw,40px)}
 header .header-nav button,header .header-nav #aboutHeader{font-size:clamp(18px,1.5vw,20px);font-weight:600;padding:12px 0;line-height:1.5}
 header .header-nav i{font-size:11px;margin-right:5px}
 header .mode-actions{justify-self:end;gap:16px}
 header .mode-actions button{font-size:16px;padding:10px 2px;min-height:42px}
 header .edition{justify-self:end}
}
@media(max-width:760px){
 header .header-nav{width:100%;justify-content:space-between;gap:12px}
 header .header-nav button,header .header-nav #aboutHeader{font-size:15px;font-weight:600;padding:10px 0}
 header .header-nav i{font-size:9px;margin-right:4px}
}

/* A separate return control beside the sphere, outside the dimension legend. */
#portfolioMain .sphere-return{grid-column:2;grid-row:3;align-self:center;justify-self:start;z-index:2;width:96px;margin:8px 0 0 18px;padding:12px 10px;border:1px solid #b7896b;border-radius:10px;background:#fff9f1;color:#975b36;font-size:14px;font-weight:600;line-height:1.65;box-shadow:0 3px 12px #8b62451a;cursor:pointer;white-space:normal}
#portfolioMain .sphere-return[hidden]{display:none}
#portfolioMain .sphere-return:hover{background:#f2e3d4;border-color:#975b36}
#portfolioMain .sphere-return:focus-visible{outline:2px solid #975b36;outline-offset:4px}
#portfolioMain .sphere-return:not([hidden])+#stage{margin-left:126px}
@media(max-width:760px){
 #portfolioMain .sphere-return{grid-column:1;grid-row:4;width:65px;margin-left:7px;padding:10px 6px;font-size:11px;line-height:1.6;min-height:64px}
 #portfolioMain .sphere-return:not([hidden])+#stage{margin-left:80px}
}