.hourglassPanel{display:grid;justify-items:center;gap:24px;overflow:hidden;text-align:center}.focusIntro{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;text-align:left}.focusIntro h2,.xpProgress h2{margin:4px 0 0;font-family:Manrope,Inter,sans-serif;letter-spacing:-.035em}.xpBadge{display:grid;justify-items:end;flex:0 0 auto;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--accent-wash)}.xpBadge strong{color:var(--accent-bright);font-family:Manrope,Inter,sans-serif}.xpBadge span{color:var(--text-faint);font-size:.72rem}.timerDisplay{color:var(--accent-bright);font-family:Manrope,Inter,sans-serif;font-size:clamp(3.8rem,16vw,7.6rem);font-variant-numeric:tabular-nums;font-weight:800;line-height:.9;letter-spacing:-.07em}.hourglassStage{display:grid;place-items:center;width:min(72vw,270px);aspect-ratio:1;border:1px solid var(--line-strong);border-radius:50%;background:var(--bg);box-shadow:inset 0 0 42px var(--accent-wash)}.hourglassFrame{position:relative;display:grid;grid-template-rows:16px 78px 78px 16px;justify-items:center;width:118px;transform-origin:center}.frameBar{z-index:2;display:block;width:116px;height:12px;border:2px solid var(--accent);border-radius:var(--radius-full);background:var(--surface)}.glassChamber{position:relative;width:88px;overflow:hidden;border:2px solid var(--line-strong);background:var(--surface-2)}.glassTop{clip-path:polygon(0 0,100% 0,57% 100%,43% 100%)}.glassBottom{clip-path:polygon(43% 0,57% 0,100% 100%,0 100%)}.sand{position:absolute;right:0;bottom:0;left:0;display:block;background:var(--text-faint);transition:height .2s linear}.hourglassStage[data-level=operator] .sand,.hourglassStage[data-level=operator] .sandStream{background:var(--accent)}.hourglassStage[data-level=master] .sand,.hourglassStage[data-level=master] .sandStream{background:var(--accent-bright)}.hourglassStage[data-level=architect] .sand,.hourglassStage[data-level=architect] .sandStream{background:var(--text)}.sandStream{position:absolute;z-index:3;top:92px;width:3px;height:70px;background:var(--text-faint);transform-origin:top;animation:sandPulse .9s ease-in-out infinite}.sandStream[hidden]{display:none}.focusStatus{min-height:1.7em;margin:0;color:var(--text-soft);font-weight:600}.focusActions{justify-content:center;width:100%}.focusActions .playToolButton{min-width:112px}.focusActions .playToolButton:disabled{opacity:.45;cursor:not-allowed;transform:none}.xpProgress{display:grid;gap:12px;width:100%;padding-top:24px;border-top:1px solid var(--line);text-align:left}.xpProgressHeader{display:flex;align-items:baseline;justify-content:space-between;gap:16px}.xpProgressHeader span{color:var(--text-faint);font-size:.8rem}.xpTrack{height:8px;overflow:hidden;border-radius:var(--radius-full);background:var(--bg)}.xpTrack span{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent-bright);transition:width .4s ease}.levelList{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.levelList li{display:grid;gap:2px;padding:9px;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text-faint);font-size:.75rem}.levelList li.unlocked{border-color:var(--line-strong);background:var(--accent-wash);color:var(--text)}.levelList small{color:var(--text-faint);font-size:.65rem}.focusPromise{margin:0;color:var(--text-faint);font-size:.78rem}.hourglassPanel.sessionComplete{animation:sessionFlash .9s ease-out}.hourglassPanel.sessionComplete .hourglassFrame{animation:hourglassTurn .7s ease-in-out}@keyframes sandPulse{50%{transform:scaleY(.72);opacity:.7}}@keyframes sessionFlash{35%{box-shadow:0 0 0 5px var(--accent-wash),var(--shadow)}}@keyframes hourglassTurn{50%{transform:rotate(180deg)}}@media(max-width:560px){.focusIntro,.xpProgressHeader{align-items:flex-start}.focusIntro{display:grid}.xpBadge{justify-items:start}.focusActions{display:grid;grid-template-columns:1fr 1fr}.focusActions .playToolButton{min-width:0}.focusActions #resetTimer{grid-column:1 / -1}.levelList{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.sand,.xpTrack span,.sandStream,.hourglassPanel.sessionComplete,.hourglassPanel.sessionComplete .hourglassFrame{animation:none;transition:none}}
