:root{--bg: #f3f4f6;--ink: #16181d;--muted: #8b919a;--card: #ffffff;--card-top: #ffffff;--card-bottom: #f6f7f8;--groove: rgba(15, 23, 42, .1);--shadow: 0 16px 40px rgba(17, 24, 39, .08);--panel: #ffffff;--line: #e6e8ee;--soft: #eef0f3;--accent: #e23d3d;--accent-ink: #ffffff;--blue: #3b82f6;--header: #1f2430;--danger: #c2412d;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility}[data-theme=dark]{--bg: #14161b;--ink: #f4f6f8;--muted: #8d949e;--card: #23262d;--card-top: #2a2e36;--card-bottom: #1c1f25;--groove: rgba(0, 0, 0, .45);--shadow: 0 16px 40px rgba(0, 0, 0, .35);--panel: #1c1f26;--line: #313640;--soft: #2a2e36;--header: #f4f6f8}[data-theme=midnight]{--bg: #070b14;--ink: #e7eefc;--muted: #8491ab;--card: #121a2b;--card-top: #1a2640;--card-bottom: #0d1422;--groove: rgba(0, 0, 0, .55);--shadow: 0 18px 48px rgba(0, 0, 0, .45);--panel: #10182a;--line: #26344d;--soft: #182338;--header: #e7eefc;--blue: #7aa2ff}[data-theme=sand]{--bg: #efe4d2;--ink: #3a2c22;--muted: #9b846c;--card: #fbf6ee;--card-top: #fffaf3;--card-bottom: #f3e8d8;--groove: rgba(80, 52, 28, .14);--shadow: 0 16px 40px rgba(90, 60, 30, .12);--panel: #f8f1e6;--line: #e5d4be;--soft: #efe3d0;--header: #3a2c22;--accent: #c2412d}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}h2,h3,p{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.app{min-height:100vh}html.is-pseudo-fs,html.is-pseudo-fs body{height:100%;overflow:hidden}html.is-pseudo-fs .app{position:fixed;inset:0;z-index:40;width:100%;height:100dvh;overflow:auto;background:var(--bg)}main{width:min(920px,calc(100% - 280px));margin:0 auto;padding:0 0 40px}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 22px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--header)}.brand-mark svg,.icon-btn svg,.mode-switch svg,.today-line svg{width:22px;height:22px;display:block}.brand-mark{color:var(--blue);display:grid;place-items:center}.top-actions{display:flex;gap:6px}.icon-btn,.round-btn,.text-btn,.ghost-btn,.add-btn,.choice-row button,.range-toggle button,.phase-pills button{border:0;background:transparent;color:var(--header)}.icon-btn{width:38px;height:38px;border-radius:999px;display:grid;place-items:center}.icon-btn:hover,.round-btn:hover{background:var(--soft)}.clock-page,.study-page{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:-18px}.live-clock{display:flex;justify-content:center;width:100%}.date-line{color:var(--muted);font-weight:600}.digital-clock{display:flex;align-items:center;justify-content:center;min-height:min(220px,42vw)}.live-clock .digital-clock{min-height:calc(min(220px,42vw) * var(--clock-scale, 1))}.digital-digits{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.045em;line-height:.9;font-size:min(148px,16vw)}.live-clock .digital-digits{font-size:calc(min(148px,16vw) * var(--clock-scale, 1))}.digital-clock.has-seconds .digital-digits{font-size:min(108px,12vw)}.live-clock .digital-clock.has-seconds .digital-digits{font-size:calc(min(108px,12vw) * var(--clock-scale, 1))}.digital-colon{color:var(--muted);padding:0 .04em}.digital-seconds{font-size:.62em}.analog-clock{width:min(380px,100%);border-radius:50%;background:var(--card);box-shadow:var(--shadow);color:var(--ink);overflow:hidden}.live-clock .analog-clock{width:min(100%,calc(380px * var(--clock-scale, 1)))}.analog-clock svg{display:block;width:100%;height:auto}.analog-face{color:var(--line)}.analog-tick{color:var(--muted)}.analog-tick.major,.analog-numeral,.analog-hand.hour,.analog-hand.minute{color:var(--ink)}.analog-hand.second,.analog-cap{color:var(--accent)}.analog-numeral{font-family:Inter,system-ui,sans-serif}.phase-label{text-align:center;font-weight:700;margin-bottom:10px}.flip-clock{display:flex;align-items:center;justify-content:center;gap:14px}.flip-clock.size-large{--card-w: min(300px, calc((100vw - 280px) / 2.25));--card-h: min(330px, calc((100vw - 280px)/2) );--digit: min(188px, calc((100vw - 280px) / 3.5));--radius: 28px;gap:18px}.live-clock .flip-clock.size-large{--card-w: calc(min(300px, (100vw - 280px) / 2.25) * var(--clock-scale, 1));--card-h: calc(min(330px, (100vw - 280px) / 2) * var(--clock-scale, 1));--digit: calc(min(188px, (100vw - 280px) / 3.5) * var(--clock-scale, 1));--radius: calc(28px * var(--clock-scale, 1));gap:calc(18px * var(--clock-scale, 1))}.size-large .colon{gap:22px}.live-clock .size-large .colon{gap:calc(22px * var(--clock-scale, 1))}.size-large .colon span{width:16px;height:16px}.live-clock .size-large .colon span{width:calc(16px * var(--clock-scale, 1));height:calc(16px * var(--clock-scale, 1))}.live-clock .seconds-pair{--card-w: calc(86px * var(--clock-scale, 1));--card-h: calc(104px * var(--clock-scale, 1));--digit: calc(48px * var(--clock-scale, 1))}.flip-clock.size-small{--card-w: calc(min(168px, 28vw) * var(--timer-scale, 1));--card-h: calc(min(188px, 32vw) * var(--timer-scale, 1));--digit: calc(min(104px, 17vw) * var(--timer-scale, 1));--radius: 20px;gap:calc(14px * var(--timer-scale, 1))}.seconds-pair{--card-w: 86px;--card-h: 104px;--digit: 48px}.colon{display:flex;flex-direction:column;gap:16px}.size-small .colon{gap:14px}.colon span{width:12px;height:12px;border-radius:50%;background:var(--muted)}.size-small .colon span{width:11px;height:11px}.flip-card{position:relative;width:var(--card-w);height:var(--card-h);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);perspective:900px}.half,.leaf{position:absolute;left:0;width:100%;height:50%;overflow:hidden}.half.top,.leaf.leaf-top{top:0;background:var(--card-top);border-radius:var(--radius) var(--radius) 0 0}.half.bottom,.leaf.leaf-bottom{bottom:0;background:var(--card-bottom);border-radius:0 0 var(--radius) var(--radius)}.half span,.leaf span{position:absolute;left:0;width:100%;height:var(--card-h);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--digit);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}.half.top span,.leaf.leaf-top span{top:0}.half.bottom span,.leaf.leaf-bottom span{bottom:0}.groove{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:var(--groove);z-index:5;pointer-events:none}.leaf{z-index:3;backface-visibility:hidden}.leaf-top{transform-origin:center bottom;animation:flipDown .32s ease-in forwards}.leaf-bottom{z-index:2;transform-origin:center top;transform:rotateX(90deg);animation:flipUp .32s ease-out .32s forwards}.style-simple.is-anim span{animation:fadeDigit .35s ease}.style-standard.is-anim{animation:cardFlip .5s ease}@keyframes flipDown{to{transform:rotateX(-90deg)}}@keyframes flipUp{to{transform:rotateX(0)}}@keyframes fadeDigit{0%{opacity:.15}to{opacity:1}}@keyframes cardFlip{0%{transform:rotateX(0)}40%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@media(prefers-reduced-motion:reduce){.leaf,.style-simple.is-anim span,.style-standard.is-anim{animation:none}}.study-timer{margin-top:8px}.timer-with-action{position:relative;display:flex;justify-content:center}.timer-actions{position:absolute;top:50%;right:calc(100% + 18px);transform:translateY(-63px);display:flex;flex-direction:column;align-items:center;gap:10px}.study-timer.layout-vertical .flip-clock{flex-direction:column}@media(max-width:720px){.study-timer.layout-auto .flip-clock{flex-direction:column}.flip-clock.size-large{--card-w: min(158px, calc((100vw - 200px)/2) );--card-h: min(176px, calc((100vw - 200px)*.56) );--digit: min(100px, calc((100vw - 200px)*.3) );gap:10px}.live-clock .flip-clock.size-large{--card-w: calc(min(158px, (100vw - 200px) / 2) * var(--clock-scale, 1));--card-h: calc(min(176px, (100vw - 200px) * .56) * var(--clock-scale, 1));--digit: calc(min(100px, (100vw - 200px) * .3) * var(--clock-scale, 1));gap:calc(10px * var(--clock-scale, 1))}.size-large .colon span{width:10px;height:10px}.live-clock .size-large .colon span{width:calc(10px * var(--clock-scale, 1));height:calc(10px * var(--clock-scale, 1))}.seconds-pair{--card-w: 62px;--card-h: 76px;--digit: 34px}.live-clock .seconds-pair{--card-w: calc(62px * var(--clock-scale, 1));--card-h: calc(76px * var(--clock-scale, 1));--digit: calc(34px * var(--clock-scale, 1))}.colon span{width:8px;height:8px}.digital-digits{font-size:min(92px,18vw)}.live-clock .digital-digits{font-size:calc(min(92px,18vw) * var(--clock-scale, 1))}.digital-clock.has-seconds .digital-digits{font-size:min(64px,13vw)}.live-clock .digital-clock.has-seconds .digital-digits{font-size:calc(min(64px,13vw) * var(--clock-scale, 1))}.analog-clock{width:min(260px,100%)}.live-clock .analog-clock{width:min(100%,calc(260px * var(--clock-scale, 1)))}}.phase-pills{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.phase-pills button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:104px;border-radius:18px;padding:12px 8px;text-align:center;line-height:1.15;font-size:13px;font-weight:650;color:var(--muted)}.phase-pills button svg{width:16px;height:16px}.phase-pills button.active{background:var(--soft);color:var(--accent);box-shadow:none}.phase-pills button:disabled{cursor:default}.session-dots{display:flex;gap:8px}.session-dots span{width:8px;height:8px;border-radius:50%;background:#d5d8de}.session-dots span.done{background:#f0a3a3}.session-dots span.current{background:var(--accent)}.timer-controls{display:flex;align-items:center;justify-content:center;gap:10px}.round-btn{width:46px;height:46px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--muted)}.round-btn svg{width:18px;height:18px}.start-btn{border:0;background:var(--accent);color:var(--accent-ink);width:126px;height:126px;min-width:126px;border-radius:50%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:750;font-size:16px;line-height:1.1;box-shadow:0 10px 24px #e23d3d47}.start-btn svg{width:36px;height:36px}.today-line{display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:650;font-size:14px}.today-line svg{width:16px;height:16px}.panel{width:min(760px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}.panel-head,.history-actions,.task-form,.switch-row,.stepper,.field{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head{margin-bottom:12px}.panel h2,.drawer h2{font-size:18px}.panel h3,.drawer h3{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}.text-btn{color:var(--blue);font-weight:650}.task-form input[type=text],.task-form input:not([type=number]),.field select,.estimate input,.task-form input[placeholder]{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.task-form input[placeholder],.task-form input:first-child{flex:1;min-width:0}.estimate{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px}.estimate input{width:72px}.add-btn,.ghost-btn{background:var(--soft);border-radius:12px;padding:10px 14px;font-weight:700}.ghost-btn.danger{color:var(--danger)}.empty,.footnote{color:var(--muted);font-size:14px}.empty{margin-top:12px}.task-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.task-list li{display:grid;grid-template-columns:auto auto auto 1fr auto;gap:10px;align-items:center;padding:8px 4px;border-top:1px solid var(--line)}.task-list li.done .task-title{text-decoration:line-through;color:var(--muted)}.task-index{color:var(--muted);font-weight:700}.task-count{font-variant-numeric:tabular-nums;font-weight:700}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-grid.six{grid-template-columns:repeat(3,1fr);margin-bottom:16px}.stat-grid article{background:var(--soft);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px}.stat-grid strong{font-size:22px}.stat-grid span{color:var(--muted);font-size:13px}.bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:10px}.bars.compact{height:88px}.bars.dense{gap:2px}.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}.bar span{width:100%;max-width:28px;background:var(--blue);border-radius:8px 8px 4px 4px;display:block}.bar small{color:var(--muted);font-size:11px}.history-actions{margin-top:16px}.footnote{margin-top:10px}.mode-switch{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--panel);border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line);z-index:20}.mode-switch button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:88px;padding:12px 8px;border-radius:18px;color:var(--muted);font-weight:700;line-height:1.15}.mode-switch button.active{background:var(--soft);color:var(--blue)}.mode-switch.is-clock{inset:auto auto 18px 50%;transform:translate(-50%);flex-direction:row}.clock-page{padding-bottom:96px}.drawer-backdrop{position:fixed;inset:0;background:#0f121c59;z-index:30;display:flex;justify-content:flex-end}.drawer{width:min(420px,100%);height:100%;overflow:auto;background:var(--panel);padding:18px 18px 32px;box-shadow:var(--shadow)}.choice-row{display:flex;gap:8px}.choice-row.wrap{flex-wrap:wrap}.choice-row button,.range-toggle button{background:var(--soft);border-radius:999px;padding:8px 12px;font-weight:650}.choice-row button.active,.range-toggle button.active{background:var(--ink);color:var(--bg)}.range-toggle{display:flex;gap:6px}.stepper{padding:8px 0;border-bottom:1px solid var(--line)}.stepper div{display:flex;align-items:center;gap:8px}.stepper button{width:32px;height:32px;border:0;border-radius:10px;background:var(--soft)}.stepper strong{min-width:28px;text-align:center}.switch-row{padding:8px 0}.field{flex-direction:column;align-items:stretch;margin:8px 0}.field select,.field input[type=range]{width:100%}.field select{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--soft)}@media(max-width:860px){main{width:min(920px,calc(100% - 180px))}.phase-pills{left:8px}.mode-switch{right:8px}.mode-switch.is-clock{right:auto;left:50%}.phase-pills button,.mode-switch button{width:68px;font-size:11px;padding:10px 4px}}@media(max-width:640px){.stat-grid,.stat-grid.six{grid-template-columns:1fr}.task-form{flex-wrap:wrap}}