/* Keep the same two mode controls in the desktop portfolio header. */
header.has-mode-switch{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(12px,2vw,28px)}
header.has-mode-switch .brand{flex:0 1 280px;min-width:180px}
header.has-mode-switch .header-nav{flex:0 0 auto;margin-left:auto;white-space:nowrap;gap:clamp(12px,1.5vw,22px)}
header.has-mode-switch .edition{display:none}
header .mode-actions{display:flex;align-items:center;flex:0 0 auto;gap:14px}
header .mode-actions button{font:500 13px/1.5 "Microsoft YaHei",system-ui,sans-serif;white-space:nowrap;padding:8px 0;color:#a66c4c;background:transparent;border:0;border-bottom:2px solid transparent}
header .mode-actions button:hover{color:#8b4c2e;background:transparent}
header .mode-actions button[aria-pressed=true]{color:#a45c35;border-bottom-color:#c97544;font-weight:600}
header .mode-actions button:focus-visible{outline:2px solid #c97544;outline-offset:4px}
/* The return controls stay inside each modal's top layer and scrollport. */
.dialog-return-bar{position:sticky;top:0;height:0;min-height:0;z-index:30;grid-column:1/-1;flex:none;width:100%;pointer-events:none}
.dialog-return-bar>.close{position:absolute;top:10px;right:12px;pointer-events:auto;background:#fffdf8;color:#925939;border:1px solid #c9a58e;box-shadow:0 3px 12px #32221820;min-height:38px}
#viewer>.dialog-return-bar{grid-row:1}
#viewer>.art-stage,#viewer>.art-info{grid-row:2}
#courseMain .view-head{position:sticky;top:0;z-index:10;background:var(--bg,#f2f4f1)}
@media(max-width:760px){.dialog-return-bar>.close{top:8px;right:9px;min-height:40px}}

/* Twelve dimensions wrap clearly instead of squeezing the sphere labels. */
#dimensionNav{display:flex;flex-wrap:wrap;gap:4px 6px;max-width:100%}#dimensionNav button{font-size:12px;padding:6px 8px;line-height:1.5;white-space:nowrap;min-height:32px}#dimensionNav button[aria-pressed=true]{color:#a45c35;background:#f4e8dc;border-color:#d8b69e}
@media(max-width:760px){#dimensionNav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;width:100%}#dimensionNav button{font-size:10px;padding:5px 2px;min-height:31px}.dimension-row{width:100%}}

/* Leave enough vertical room for moving labels on narrow screens. */
@media(max-width:760px){#portfolioMain #stage{height:clamp(420px,calc(100dvh - 260px),560px);min-height:420px}}

.sphere-path{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:100%}#sphereBack{font-size:12px;color:#a45c35;background:#fffaf5;border:1px solid #cfac96;padding:6px 10px;min-height:34px}#sphereLevel{font-size:12px}@media(max-width:760px){#sphereLevel{display:inline;font-size:11px}.sphere-path{gap:6px}#sphereBack{font-size:11px}}