:root{--bg-color: #05080f;--ambient: #4ade80;--chill: #38bdf8;--energy: #f97316;--epic: #fbbf24;--flow: #f43f5e;--meditation: #a855f7;--sleep: #818cf8;--synthwave: #e879f9}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:#fff;overflow:hidden;user-select:none;-webkit-user-select:none}.app-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;position:relative;background:radial-gradient(circle at 50% 50%,#0a0f1d,#020408);transition:background-color 1s ease}.background-glow{position:absolute;top:50%;left:50%;width:150vw;height:150vw;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 50%,var(--glow-color) 0%,transparent 60%);opacity:.25;pointer-events:none;transition:all 1s ease;z-index:0}.background-glow.pulse{animation:pulse 4s infinite alternate}@keyframes pulse{0%{opacity:.15;transform:translate(-50%,-50%) scale(.95)}to{opacity:.35;transform:translate(-50%,-50%) scale(1.05)}}.glass-overlay{position:absolute;top:0;left:0;width:100vw;height:100vh;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);pointer-events:none;z-index:1}.octagon-container{position:relative;width:320px;height:320px;z-index:10;filter:drop-shadow(0 20px 40px rgba(0,0,0,.9))}.octagon-base{position:absolute;top:0;left:0;width:320px;height:320px;background:radial-gradient(circle at 160px 160px,#2a2f3a,#11141a);clip-path:polygon(29.29% 0%,70.71% 0%,100% 29.29%,100% 70.71%,70.71% 100%,29.29% 100%,0% 70.71%,0% 29.29%);box-shadow:inset 0 2px 4px #ffffff1a,inset 0 -4px 10px #0009}.octagon-lines{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(22.5deg,transparent calc(50% - 1.5px),rgba(0,0,0,.9) calc(50% - 1.5px),rgba(0,0,0,.9) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(67.5deg,transparent calc(50% - 1.5px),rgba(0,0,0,.9) calc(50% - 1.5px),rgba(0,0,0,.9) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(-22.5deg,transparent calc(50% - 1.5px),rgba(0,0,0,.9) calc(50% - 1.5px),rgba(0,0,0,.9) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(-67.5deg,transparent calc(50% - 1.5px),rgba(0,0,0,.9) calc(50% - 1.5px),rgba(0,0,0,.9) calc(50% + 1.5px),transparent calc(50% + 1.5px));pointer-events:none;z-index:5}.wedge{position:absolute;top:0;left:0;width:320px;height:320px;clip-path:polygon(94px 0px,226px 0px,160px 160px);transform-origin:160px 160px;cursor:pointer;z-index:10}.wedge-content{position:absolute;left:160px;top:45px;display:flex;flex-direction:column;align-items:center;transition:all .3s ease;width:80px}.wedge-icon{margin-bottom:6px;color:var(--btn-color);opacity:.6;filter:drop-shadow(0 0 4px rgba(var(--btn-color-raw),.2));transition:all .3s ease}.wedge.active .wedge-icon,.wedge:hover .wedge-icon{opacity:1;filter:drop-shadow(0 0 12px var(--btn-color))}.wedge-icon svg{width:28px;height:28px;stroke-width:1.5}.wedge-text{font-size:9px;font-weight:500;letter-spacing:1.2px;color:#8f9ba8;text-transform:uppercase;transition:all .3s ease}.wedge.active .wedge-text,.wedge:hover .wedge-text{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.4)}.center-glass{position:absolute;top:90px;left:90px;width:140px;height:140px;background:radial-gradient(circle at 70px 70px,#141820cc,#0a0c12f2);clip-path:polygon(29.29% 0%,70.71% 0%,100% 29.29%,100% 70.71%,70.71% 100%,29.29% 100%,0% 70.71%,0% 29.29%);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:20;box-shadow:inset 0 4px 12px #000c,inset 0 1px 2px #000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.timer-section{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;position:relative}.timer-display{font-size:42px;font-weight:200;letter-spacing:2px;color:#fff;line-height:1;margin-bottom:6px;display:flex;justify-content:center;align-items:center;height:48px;text-shadow:0 0 15px rgba(255,255,255,.5),0 0 30px rgba(255,255,255,.2)}.timer-display svg{margin-top:-6px;filter:drop-shadow(0 0 10px rgba(255,255,255,.4))}.timer-controls{display:flex;align-items:center;gap:12px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}.timer-btn{background:none;border:none;color:#475569;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;padding:4px;transition:all .3s ease;letter-spacing:1px}.timer-btn:hover{color:#94a3b8;text-shadow:0 0 8px rgba(148,163,184,.6)}.timer-btn.active{color:#f8fafc;text-shadow:0 0 12px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.4);transform:scale(1.1)}