:root{--bg-color:#f7f7f5;--text-color:#2d2d2d;--primary-color:#8b9d83;--glow-color:#0000000f}[data-theme=dark]{--bg-color:#1a1a1a;--text-color:#e8e8e6;--primary-color:#a4b49c;--glow-color:#ffffff14}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);justify-content:center;align-items:center;width:100vw;height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:background-color 1.5s,color 1.5s;display:flex;overflow:hidden}#root{width:100%;height:100%}.app-container{background-color:var(--bg-color);width:100%;min-height:100vh;color:var(--text-color);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;transition:background-color .8s,color .8s;display:flex;position:relative;overflow:hidden}.app-container:before{content:"";background:radial-gradient(circle at center, var(--glow-color) 0%, transparent 60%);opacity:0;pointer-events:none;z-index:0;position:absolute;inset:0}.app-container.breathing-bg:before{animation:14s ease-in-out infinite breathe}@keyframes breathe{0%{opacity:0}28.57%{opacity:1;transform:scale(1.1)}57.14%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1)}}.timer-display,.guidance-text,.hint,.controls-hitbox{z-index:1;position:relative}.timer-display{letter-spacing:-.05em;font-variant-numeric:tabular-nums;opacity:1;-webkit-user-select:none;user-select:none;font-size:25vmin;font-weight:100;transition:opacity 1s,transform 1s;transform:scale(1.1)}.hint{letter-spacing:.1em;opacity:0;pointer-events:none;font-size:1rem;font-weight:300;transition:opacity .5s;position:absolute;top:75%}.guidance-text{letter-spacing:.15em;opacity:0;pointer-events:none;text-align:center;max-width:80%;color:var(--text-color);font-size:1.2rem;font-weight:300;transition:opacity 3s ease-in-out;position:absolute;top:65%}.guidance-text.visible{opacity:.7}.app-container:hover:not(.active) .hint{opacity:.4}.controls-panel{opacity:0;cursor:default;flex-direction:column;align-items:center;gap:1.5rem;width:100%;padding:2rem;transition:all .5s;display:flex;position:absolute;bottom:0;left:0;transform:translateY(20px)}.controls-hitbox{z-index:10;width:100%;height:150px;position:absolute;bottom:0;left:0}.controls-hitbox:hover .controls-panel,.controls-panel:hover{opacity:1;transform:translateY(0)}.controls-row{align-items:center;gap:2rem;display:flex}.icon-button{color:var(--text-color);cursor:pointer;opacity:.6;background:0 0;border:none;justify-content:center;align-items:center;padding:.5rem;transition:color .3s,transform .2s,opacity .3s;display:flex}.icon-button:hover{opacity:1;transform:scale(1.1)}.icon-active{color:var(--primary-color);opacity:1}.chip{color:var(--text-color);cursor:pointer;opacity:.5;background:0 0;border:none;font-size:1rem;font-weight:300;transition:all .3s}.chip:hover{opacity:.8}.chip.active{opacity:1;border-bottom:1px solid var(--text-color);font-weight:400}.volume-slider{-webkit-appearance:none;background:var(--text-color);opacity:.5;outline:none;width:100px;height:2px;transition:opacity .3s}.volume-slider:hover{opacity:1}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--text-color);cursor:pointer;border-radius:50%;width:12px;height:12px}