:root{--bg:#f5f4f2;--fg:#1f2937;--muted:#5f6b7a;--card:#fff;--border:#11182714;--shadow:0 18px 40px #0f172a1f;--radius:16px;--accent:#355b8c;--accent-soft:#355b8c1f;--think-bg:#e9f1fb;--think-accent:#3f6fb7;--work-bg:#e9f7f0;--work-accent:#2f7b59;--worry-bg:#f1edf7;--worry-accent:#7a65a8}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:ArialRounded,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}.app{background:var(--bg);min-height:100vh;color:var(--fg);flex-direction:column;transition:background .3s;display:flex}.app[data-mode=think]{--bg:var(--think-bg);--accent:var(--think-accent);--accent-soft:#3f6fb724}.app[data-mode=work]{--bg:var(--work-bg);--accent:var(--work-accent);--accent-soft:#2f7b5924}.app[data-mode=worry]{--bg:var(--worry-bg);--accent:var(--worry-accent);--accent-soft:#7a65a829}.appHeader{letter-spacing:.02em;color:var(--muted);justify-content:space-between;padding:28px 48px 0;font-weight:600;display:flex}.appName{font-size:16px;font-weight:700}.appMain{flex:1;justify-content:center;align-items:flex-start;min-height:calc(100vh - 45px);padding:48px 24px 64px;display:flex}.panel{background:#fff;border-radius:2em;width:min(900px,100%);min-width:700px;padding:48px 0}.home{flex-direction:column;align-items:center;gap:12px;min-height:60vh;display:flex}.homeTitle{text-align:center;letter-spacing:.01em;font-size:clamp(28px,5vw,40px);font-weight:600}.modeButtons{flex-wrap:wrap;justify-content:center;gap:16px;width:100%;margin-top:32px;transition:gap .2s ease-out;display:flex}.sessionLog{color:var(--muted);opacity:.7;letter-spacing:.02em;text-align:center;flex-direction:column;gap:6px;font-size:12px;display:flex}.sessionLogItem{white-space:nowrap;border-bottom:1px solid #ccc;margin-bottom:.5em;padding-bottom:.5em}.logButton{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.55;margin-top:auto;padding-top:24px;font-size:12px;text-decoration:underline}.logButton:hover{opacity:.8}.modalOverlay{z-index:20;background:#0f172a29;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modalCard{background:var(--card);border:1px solid var(--border);border-radius:16px;width:min(420px,100%);padding:20px 22px 24px;box-shadow:0 24px 60px #0f172a2e}.modalHeader{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.modalHeader h2{font-size:16px;font-weight:600}.modalClose{opacity:.5;font-size:18px;line-height:1}.modalClose:hover{opacity:.85}.modalBody{flex-direction:column;gap:8px;max-height:60vh;display:flex;overflow:auto}.modalBody .sessionLog{opacity:1}.emptyState{color:var(--muted);opacity:.7;font-size:13px}.modeButton{background:var(--card);border:1px solid var(--border);aspect-ratio:1/.7;will-change:opacity,transform,max-width;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;width:auto;min-width:160px;padding:22px 26px;transition:opacity .2s ease-out,transform .2s ease-out,max-width .2s ease-out,padding .2s ease-out,margin .2s ease-out,border-width .2s ease-out,box-shadow .16s,border .16s;display:flex;box-shadow:0 8px 16px #0f172a14}.modeWrap{max-width:100%;margin-top:32px;position:relative}.modeList{opacity:1;justify-content:center;gap:12px;width:100%;transition:opacity .22s;display:flex}.modeList[data-has-mode=true]{opacity:0;pointer-events:none}.modeCenter{opacity:0;pointer-events:none;transition:opacity .22s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.modeCenter[data-has-mode=true]{opacity:1;pointer-events:none}.modeCenter .modeButton.isCenter{cursor:default}.modeCenter .modeButton.isCenter:hover,.modeCenter .modeButton.isCenter:active,.modeCenter .modeButton.isCenter:focus,.modeCenter .modeButton.isCenter:focus-visible{filter:none!important;box-shadow:none!important;outline:none!important;transform:none!important}.modeButton[data-mode=think]{background:var(--think-bg)}.modeButton[data-mode=work]{background:var(--work-bg)}.modeButton[data-mode=worry]{background:var(--worry-bg)}.modeButton span{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:12px}.modeButton strong{font-size:18px;font-weight:600}.modeButton:hover{border-color:#0f172a2e;transform:translateY(-2px);box-shadow:0 12px 22px #0f172a1f}.modeButton:active{transform:translateY(0)}.modeButton:disabled,.modeButton[aria-disabled=true]{cursor:default;pointer-events:none;box-shadow:none}.timerLayout{text-align:center;flex-direction:column;align-items:center;gap:18px;display:flex}.stateLabel{color:var(--accent);font-size:clamp(24px,4vw,32px);font-weight:600}.countdown{letter-spacing:.02em;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;color:var(--accent);font-size:clamp(48px,10vw,84px);font-weight:600}.timerOptions{opacity:0;pointer-events:none;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px;transition:opacity .2s ease-out,transform .2s ease-out;display:flex;transform:translateY(6px)}.timerOptions.isVisible{opacity:1;pointer-events:auto;transform:translateY(0)}.chooseAgain{color:var(--muted);opacity:.7;background:0 0;border:none;margin-top:18px;font-size:12px;text-decoration:underline}.chooseAgain:hover{opacity:1}.timerButton{background:var(--accent-soft);color:var(--accent);border:1px solid #0000;border-radius:999px;min-width:68px;padding:10px 16px;font-weight:600;transition:transform .14s,box-shadow .14s}.timerButton:hover{transform:translateY(-1px);box-shadow:0 6px 16px #0f172a1a}.timerButton[data-active=true]{background:var(--accent);color:#fff}.stopButton{color:var(--fg);letter-spacing:.08em;text-transform:uppercase;background:#11182714;border:1px solid #fff6;border-radius:999px;padding:12px 22px;font-weight:600}.controls{opacity:0;pointer-events:none;justify-content:center;align-items:center;gap:12px;margin-top:14px;transition:opacity .2s ease-out,transform .2s ease-out;display:flex;transform:translateY(6px)}.controls.isVisible{opacity:1;pointer-events:auto;transform:translateY(0)}.pauseButton{color:var(--fg);letter-spacing:.08em;text-transform:uppercase;background:#1118270a;border:1px solid #fff6;border-radius:999px;padding:12px 22px;font-weight:600}.pauseButton:hover{background:#1118271a}.stopButton:hover{background:#11182724}.finishMessage{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-size:12px}.about{border-top:1px solid var(--border);padding:64px 24px 96px}.aboutInner{max-width:720px;color:var(--fg);flex-direction:column;gap:12px;margin:0 auto;line-height:1.7;display:flex}.about h2{margin-top:12px;font-size:18px;font-weight:600}.about p{color:var(--muted);font-size:15px}.about ul{color:var(--muted);flex-direction:column;gap:6px;padding-left:20px;font-size:15px;list-style:outside;display:flex}.appFooter{justify-content:center;padding:24px 24px 40px;display:flex}.xLink{opacity:.5;align-items:center;gap:8px;display:inline-flex}.xLink:hover{opacity:.75}.xLogo{width:14px;height:14px}.xText{white-space:nowrap;font-size:12px}@media (max-width:600px){.panel{min-width:0}.modeWrap{width:90%;margin-left:auto;margin-right:auto}.modeButtons{gap:12px}.modeButton{flex:0 0 calc(33.3333% - 8px);min-width:0;padding:18px 10px}.appHeader{padding:24px 24px 0}.panel{padding:36px 0}}