:root{--bg-color:#d0d8e0;--device-color:linear-gradient(135deg,#f8fcfc 0%,#e8eef0 100%);--device-solid:#f5f5f7;--lcd-outer-bg:#e6ecee;--lcd-bg:#9da8a8;--lcd-text:#181818;--shadow-dark:#00000026;--shadow-light:#fffc;--font-pixel:"DotGothic16",monospace}.pocket-station-container{background:var(--device-color);-webkit-user-select:none;user-select:none;z-index:0;pointer-events:auto;-webkit-app-region:drag;width:300px;height:490px;transform-style:preserve-3d;border-radius:50px;flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:-20px 40px 80px -10px #6e0f05b3,-10px 20px 40px -5px #0006,inset 0 0 0 1px #fff9,inset -4px -8px 20px #0000001a}.pocket-station-container.ghost-active{opacity:.5;filter:grayscale(.3);pointer-events:none}.device-top-loop{z-index:20;background:#eef4f6;border-bottom:1px solid silver;border-radius:0 0 20px 20px;flex-direction:column;justify-content:flex-start;align-items:center;width:140px;height:42px;display:flex;position:absolute;top:0;overflow:hidden;box-shadow:0 2px 4px #0000001a}.loop-hole{background:#ccd;border:1px solid #bbb;border-radius:8px;width:50px;height:12px;margin-top:6px;box-shadow:inset 1px 1px 3px #0000004d}.device-top-loop:after{content:"";background:linear-gradient(#444,#222);border:1px solid #111;border-radius:4px;width:80px;height:12px;margin-top:6px;transition:background .5s,border-color .5s;box-shadow:inset 0 1px 2px #fff3}.mode-work:not(.led-alert) .device-top-loop:after{background:linear-gradient(#fb8c00,#ef6c00);border-color:#e65100}.mode-break:not(.led-alert) .device-top-loop:after{background:linear-gradient(#388e3c,#1b5e20);border-color:#004d40}.mode-long-break:not(.led-alert) .device-top-loop:after{background:linear-gradient(#1976d2,#0d47a1);border-color:#0d47a1}@keyframes led-blink{0%{background:linear-gradient(#444,#222);border-color:#111;box-shadow:inset 0 1px 2px #fff3}50%{background:linear-gradient(#f55,#c00);border-color:red;box-shadow:0 0 15px #f00c,inset 0 1px 2px #ffffff80}to{background:linear-gradient(#444,#222);border-color:#111;box-shadow:inset 0 1px 2px #fff3}}.pocket-station-container.led-alert .device-top-loop:after{animation:.8s ease-in-out infinite alternate led-blink}.lid-seam{opacity:.5;background:linear-gradient(90deg,#0000,#ccc,#0000);width:100%;height:2px;position:absolute;top:160px}.lcd-container{z-index:10;width:100%;margin-top:48px;padding:0 20px}.lcd-frame{aspect-ratio:1;background:var(--lcd-outer-bg);-webkit-app-region:no-drag;border:1px solid #ddd;border-radius:24px;justify-content:center;align-items:center;width:100%;padding:12px;display:flex;box-shadow:inset 2px 2px 5px #0000000d,inset -2px -2px 5px #ffffffb3,0 1px 2px #0000001a}.lcd-inner-frame{background:var(--lcd-bg);border-radius:16px;width:100%;height:100%;padding:2px;box-shadow:inset 2px 2px 4px #0003}.lcd-inner-frame>.branding{z-index:10;pointer-events:none;justify-content:center;width:100%;display:flex;position:absolute;bottom:160px}.brand-text{letter-spacing:.15em;color:#8a9aa8;opacity:.7;text-shadow:0 1px 1px #ffffffe6;font-family:Arial Narrow,Arial,sans-serif;font-size:16px;font-weight:700;transform:scaleX(.9)}.memory-card-label{pointer-events:none;opacity:.2;justify-content:center;width:100%;display:flex;position:absolute;top:38%}.memory-card-label span{letter-spacing:.2em;color:#555;font-family:sans-serif;font-size:10px;font-weight:700;transform:scaleX(1.1)}.controls-area{z-index:20;pointer-events:none;width:100%;height:140px;padding:0 20px;display:block;position:absolute;bottom:20px}.controls-area-compact{display:block}.d-pad{pointer-events:auto;-webkit-app-region:no-drag;width:120px;height:80px;position:absolute;top:10px;left:24px}.d-pad-btn{cursor:pointer;background:linear-gradient(#fff,#f0f0f0);border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:all .1s;display:flex;position:absolute;box-shadow:2px 3px 5px #00000026,inset 1px 1px 2px #ffffffe6}.d-pad-btn:active{box-shadow:inset 2px 2px 4px #0003}.d-pad-up{top:0;left:50%;transform:translate(-50%)}.d-pad-up:active{transform:translate(-50%)translateY(1px)}.d-pad-down{bottom:0;left:50%;transform:translate(-50%)}.d-pad-down:active{transform:translate(-50%)translateY(1px)}.d-pad-left{top:50%;left:0;transform:translateY(-50%)}.d-pad-left:active{transform:translateY(-50%)translateY(1px)}.d-pad-right{top:50%;right:0;transform:translateY(-50%)}.d-pad-right:active{transform:translateY(-50%)translateY(1px)}.center-buttons{pointer-events:auto;-webkit-app-region:no-drag;flex-direction:row;gap:20px;margin-bottom:0;display:flex;position:absolute;bottom:-12px;left:50%;transform:translate(-50%)}.small-btn-group{flex-direction:column;align-items:center;display:flex}.small-btn{cursor:pointer;background:linear-gradient(#fff,#f0f0f0);border:none;border-radius:4px;justify-content:center;align-items:center;width:40px;height:24px;transition:all .1s;display:flex;box-shadow:2px 2px 4px #00000026,inset 1px 1px 2px #ffffffe6}.small-btn:active{transform:translateY(1px);box-shadow:inset 2px 2px 4px #0003}.small-btn-line{background:#ccc;width:16px;height:2px}.small-btn-circle{opacity:.5;border:2px solid #ccc;border-radius:50%;width:16px;height:16px}.small-btn-pause{justify-content:center;align-items:center;gap:3px;display:flex}.small-btn-pause:before,.small-btn-pause:after{content:"";background:#ccc;border-radius:1px;width:3px;height:12px}.small-btn-cross{opacity:.5;width:12px;height:12px;position:relative}.small-btn-cross:before,.small-btn-cross:after{content:"";background:#888;width:100%;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.small-btn-cross:after{transform:translate(-50%,-50%)rotate(-45deg)}.btn-label{color:#888;letter-spacing:1px;margin-top:4px;font-size:10px;font-weight:700}.dial-container{pointer-events:auto;-webkit-app-region:no-drag;flex-direction:column;align-items:center;display:flex;position:absolute;top:5px;right:18px}.start-stop-dial{cursor:pointer;background:linear-gradient(#fff,#f0f0f0);border:none;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;transition:all .1s;display:flex;box-shadow:5px 8px 15px #00000026,inset 2px 2px 4px #ffffffe6,inset -1px -1px 3px #0000000d}.start-stop-dial:active{transform:translateY(1px);box-shadow:inset 3px 4px 8px #00000026}.dial-inner{background:#f0f0f0;border-radius:50%;width:60%;height:60%;transition:background .3s;box-shadow:inset 1px 1px 3px #0000001a}.start-stop-dial.active .dial-inner{background:#ffe0e0}.dial-label{color:#888;letter-spacing:1px;margin-top:8px;font-size:9px;font-weight:700}.side-grip{opacity:.6;background:#ddd;width:4px;height:40px;position:absolute;top:170px}.left-grip{border-radius:0 4px 4px 0;left:0}.right-grip{border-radius:4px 0 0 4px;right:0}.top-right-buttons{z-index:30;-webkit-app-region:no-drag;gap:8px;display:flex;position:absolute;top:16px;right:16px}.device-quit-btn,.device-size-btn{cursor:pointer;background:linear-gradient(#fff,#f0f0f0);border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex;box-shadow:1px 2px 3px #0000001a,inset 1px 1px 2px #ffffffe6}.device-quit-btn:active,.device-size-btn:active{transform:translateY(1px);box-shadow:inset 1px 1px 3px #0003}.device-quit-btn .small-btn-cross{width:10px;height:10px}.icon-minimize{opacity:.5;box-sizing:border-box;border:2px solid #888;border-radius:2px;width:10px;height:10px}.icon-maximize{opacity:.5;box-sizing:border-box;border:2px solid #888;border-radius:2px;width:12px;height:12px;position:relative}.icon-maximize:after{content:"";background:#888;width:4px;height:4px;position:absolute;top:1px;right:1px}.pocket-station-container.compact-mode{border-radius:30px;width:180px;height:310px}.compact-mode .lid-seam,.compact-mode .branding,.compact-mode .memory-card-label,.compact-mode .side-grip{display:none}.compact-mode .device-top-loop{z-index:20;border-radius:0 0 15px 15px;width:100px;height:20px}.compact-mode .loop-hole{display:none}.compact-mode .device-top-loop:after{width:70px;height:8px;margin-top:5px}.compact-mode .lcd-container{margin-top:24px;padding:0 12px}.compact-mode .lcd-frame{border-radius:16px;padding:8px}.compact-mode .lcd-inner-frame{border-radius:12px}.compact-mode .top-right-buttons{gap:8px;top:10px;right:12px}.compact-mode .device-quit-btn,.compact-mode .device-size-btn{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(#fff,#f0f0f0);border:none;width:20px;height:20px;transition:none;box-shadow:1px 2px 3px #0000001a,inset 1px 1px 2px #ffffffe6}.compact-mode .device-quit-btn:active,.compact-mode .device-size-btn:active{background:linear-gradient(#fff,#f0f0f0);transform:translateY(1px);box-shadow:inset 1px 1px 3px #0003}.compact-mode .device-quit-btn .small-btn-cross{opacity:.5;border:none;width:8px;height:8px}.compact-mode .icon-minimize,.compact-mode .icon-maximize{opacity:.5;border-width:1.5px;width:8px;height:8px}.compact-mode .icon-maximize:after{width:3px;height:3px}.pause-btn{border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;padding:0;display:flex}.compact-mode .controls-area{height:100px;padding:0;display:block;bottom:16px}.compact-mode .d-pad{transform-origin:0 0;pointer-events:auto;width:90px;height:80px;margin:0;position:absolute;top:0;left:8px;transform:scale(.65)}.compact-mode .center-buttons{transform-origin:bottom;pointer-events:auto;z-index:30;gap:12px;margin:0;position:absolute;bottom:0;left:50%;transform:translate(-50%)scale(.85)}.compact-mode .dial-container{transform-origin:100% 0;flex-direction:column;align-items:center;margin:0;display:flex;position:absolute;top:0;right:6px;transform:scale(.8)}.compact-mode .start-stop-dial{width:48px;height:48px}.compact-mode .dial-label{margin-top:4px;font-size:8px}.pause-container{z-index:10;flex-direction:column;align-items:center;display:flex;position:absolute;top:55px;left:-20px;transform:scale(.9)}.pause-btn{width:32px;height:32px;padding:0;border-radius:50%!important}.compact-mode .pause-container{z-index:20;flex-direction:column;align-items:center;margin-top:0;display:flex;position:absolute;top:42px;left:-24px;transform:none}.compact-mode .small-btn-group{flex-direction:column;align-items:center;display:flex}.compact-mode .small-btn{width:32px;height:20px}.compact-mode .small-btn-line{width:12px}.compact-mode .small-btn-circle{width:12px;height:12px}.compact-mode .small-btn-pause{gap:2px}.compact-mode .small-btn-pause:before,.compact-mode .small-btn-pause:after{width:2px;height:10px}.compact-mode .btn-label{font-size:8px;transform:scale(.9)}.compact-mode .pause-btn{border-radius:50%;width:24px;height:24px}.lcd-screen-inner{background:#c8d4d4;border:1px solid #aab9b4;border-radius:2px;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:inset 2px 2px 5px #0000001a,inset -1px -1px 3px #ffffff4d}.lcd-grid-overlay{z-index:5;pointer-events:none;opacity:.4;background-image:radial-gradient(#aab9b499 15%,#0000 16%),radial-gradient(#aab9b499 15%,#0000 16%);background-position:0 0,2px 2px;background-size:4px 4px;position:absolute;inset:0}.lcd-display-content{z-index:0;color:#181818;flex-direction:column;justify-content:space-between;align-items:center;height:100%;padding:0;display:flex;position:relative}.lcd-top-area{text-align:center;z-index:20;justify-content:center;align-items:center;width:100%;height:40%;line-height:1;display:flex}.timer-display{flex-direction:column;align-items:center;display:flex}.timer-mode-label{text-transform:uppercase;letter-spacing:4px;opacity:.7;margin-bottom:4px;font-size:10px}.timer-progress{opacity:.8;letter-spacing:1px;margin-bottom:-2px;font-family:DotGothic16,monospace;font-size:10px}.timer-time{letter-spacing:0;font-family:DotGothic16,monospace;font-size:48px;font-weight:700;line-height:1}.message-line-container{display:none}.menu-list{letter-spacing:.5px;flex-direction:column;width:100%;max-height:100%;padding:4px;font-size:11px;font-weight:700;display:flex;overflow-y:hidden}.menu-item{white-space:nowrap;text-overflow:ellipsis;z-index:10;padding:1px 2px;position:relative;overflow:hidden}.menu-item.selected{color:#c8d4d4;background:#181818}.chat-text{white-space:pre-wrap;word-break:break-word;width:100%;margin:0;font-size:10px;font-weight:700;line-height:1.1}.lcd-character-area{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;width:100%;padding-bottom:48px;display:flex;position:relative}.paused-indicator{z-index:5;font-size:10px;animation:1s infinite pulse;position:absolute;top:0}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.cat-sprite-container{width:80px;height:70px;image-rendering:pixelated;transform-origin:bottom;flex-shrink:0;transform:scale(1.25)}.message-overlay{z-index:4;background:#c8d4d4d9;border-bottom:1px dashed #181818;width:100%;max-height:40px;padding:2px;position:absolute;top:0;left:0;overflow:hidden}.message-text{white-space:pre-wrap;text-overflow:ellipsis;margin:0;font-size:10px;font-weight:700;line-height:1.1}.lcd-screen-inner.celebrating{animation:.3s ease-in-out 3 celebration-flash}@keyframes celebration-flash{0%,to{background:#c8d4d4}25%{background:#ffeb9e}50%{background:#b8f0d4}75%{background:#c4e0ff}}.confetti-container{pointer-events:none;z-index:100;position:absolute;inset:0;overflow:hidden}.confetti{opacity:.9;width:6px;height:6px;animation:2s ease-in-out forwards confetti-fall;position:absolute;top:-10px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(180px)rotate(720deg)}}.compact-mode .message-overlay{padding-top:4px;padding-left:6px;padding-right:4px}.compact-mode .message-text{font-size:9px;line-height:1.25}.compact-mode .lcd-top-area{padding-top:0}.compact-mode .message-line-container{height:14px;margin-bottom:2px;padding:0 4px}.compact-mode .message-line-text{transform-origin:0 100%;font-size:8px;transform:scale(.9)}.compact-mode .cat-sprite-container{transform-origin:bottom;margin-bottom:4px;transform:scale(.95)}.compact-mode .lcd-character-area{padding-bottom:0}.compact-mode .lcd-top-area{flex:none;min-height:0;margin-bottom:0;padding-top:0;height:auto!important}.compact-mode .timer-time{margin-top:-6px;margin-bottom:0;font-size:32px}.compact-mode .lcd-character-area{justify-content:center;margin-top:-10px;padding-bottom:0}.cat-sprite-mock{width:80px;height:70px;image-rendering:pixelated;background-image:url(/images/mewmodoro/splite-sheet.png);background-position:0 0;background-repeat:no-repeat;background-size:320px 70px}.cat-anim-idle{animation:.8s steps(4,end) infinite cat-idle-anim}.cat-anim-wave{animation:.7s steps(4,end) infinite cat-wave-anim}.cat-anim-dance{animation:.5s steps(4,end) infinite cat-dance-anim}@keyframes cat-idle-anim{0%{background-position:0 0}to{background-position:-320px 0}}@keyframes cat-wave-anim{0%{background-position:0 0}to{background-position:-320px 0}}@keyframes cat-dance-anim{0%{background-position:0 0}to{background-position:-320px 0}}
