@import url('/fonts/fonts.css');
body{font-family:'Inter',system-ui,sans-serif!important}
.portfolio-lab-bar{display:flex;justify-content:space-between;align-items:center;width:100%;gap:18px;margin-bottom:12px;font-family:'Inter',system-ui,sans-serif}
.portfolio-lab-bar .portfolio-back{margin:0;color:#b4e7c7;padding:12px 0}
.portfolio-lab-bar button{display:flex;align-items:center;gap:8px;border:1px solid #41544a;background:#192321;color:#edf2e9;border-radius:99px;padding:11px 17px;font-size:12px;min-height:44px;cursor:pointer}
.portfolio-lab-bar button:focus-visible,.portfolio-back:focus-visible{outline:3px solid #b4e7c7;outline-offset:4px}
html[data-theme=light] body{background:#f6f7f3;background-image:none;color:#182b26}
html[data-theme=light] .portfolio-lab-bar .portfolio-back{color:#226650}
html[data-theme=light] .portfolio-lab-bar button{background:#fff;color:#182b26;border-color:#cdd8ce}
html[data-theme=light] h1{color:#226650;text-shadow:none}
html[data-theme=light] .subtitle,html[data-theme=light] .instructions,html[data-theme=light] .stat-row,html[data-theme=light] .legend,html[data-theme=light] .best-note{color:#52645a}
html[data-theme=light] .instructions,html[data-theme=light] .panel-box,html[data-theme=light] .stats,html[data-theme=light] .legend,html[data-theme=light] .timer-box,html[data-theme=light] .card-tray,html[data-theme=light] .tray-section h3,html[data-theme=light] .modal{background:#fff;border-color:#dce2d9;box-shadow:0 4px 25px #142c2008}
html[data-theme=light] .instructions h3,html[data-theme=light] .panel-box h3,html[data-theme=light] .stats h2,html[data-theme=light] .legend h3,html[data-theme=light] .tray-section h3{color:#226650}
html[data-theme=light] .timer-display,html[data-theme=light] .timer-label,html[data-theme=light] .timer-status{color:#226650}
html[data-theme=light] .size-tab,html[data-theme=light] .tab-btn,html[data-theme=light] .ctrl-btn,html[data-theme=light] .diff-btn{background:#eef1eb;color:#182b26;border-color:#dce2d9}
html[data-theme=light] .size-tab.active,html[data-theme=light] .tab-btn.active,html[data-theme=light] .diff-btn.active{background:#226650;color:#fff;border-color:#226650}
html[data-theme=light] .divider{border-color:#dce2d9}
@media(prefers-reduced-motion:reduce){.portfolio-lab-bar *{transition:none!important}}
/* Navigation, timer, and theme share one compact row. */
body{padding-top:16px!important;gap:12px!important}
.portfolio-lab-bar{justify-content:initial;margin-bottom:0;min-height:48px}
.portfolio-lab-bar .portfolio-back{margin-right:auto}
.portfolio-lab-bar .timer-box{display:flex;flex-direction:row;align-items:center;gap:8px;position:static;align-self:center;margin:0;padding:8px 12px;min-width:0;border-width:1px;box-shadow:none;border-radius:12px}
.portfolio-lab-bar .timer-label{font-size:9px;letter-spacing:.6px}.portfolio-lab-bar .timer-display{font-size:17px;line-height:1;letter-spacing:1px}.portfolio-lab-bar .timer-status{font-size:9px}
.page-wrap{gap:12px!important}
h1{font-size:clamp(25px,2.3vw,35px)!important;margin:4px 0 0!important;letter-spacing:1px!important;line-height:1.25!important}
.subtitle{margin:0!important;line-height:1.7!important;font-size:14px!important}
.instructions{padding:14px 20px!important}.instructions h3{margin-bottom:7px!important}
@media(max-width:600px){body{padding-top:10px!important;gap:10px!important}.portfolio-lab-bar{gap:8px;flex-wrap:wrap}.portfolio-lab-bar .portfolio-back{font-size:11px;padding:9px 0}.portfolio-lab-bar button{font-size:11px;padding:9px 12px}.portfolio-lab-bar .timer-box{padding:7px 9px;gap:5px}.portfolio-lab-bar .timer-label,.portfolio-lab-bar .timer-status{display:none}.portfolio-lab-bar .timer-display{font-size:15px}.instructions{padding:12px!important}.subtitle{font-size:12px!important}}