:root{--ink:#17352d;--muted:#62716b;--paper:#f5f8f5;--card:rgba(255,255,255,.88);--line:#d7e1da;--green:#1f765e;--green-dark:#14533f;--mint:#dcece3;--warm:#d99a57;--shadow:0 18px 70px rgba(36,76,61,.08)}
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",Arial,sans-serif}button,input{font:inherit}button{color:inherit}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hidden{display:none!important}
.app-shell{min-height:100vh;padding:42px clamp(20px,5vw,72px) 56px;position:relative;overflow:hidden;background:radial-gradient(circle at 84% 6%,rgba(120,180,148,.22),transparent 31%),linear-gradient(145deg,#f8faf7 0%,#edf4ef 100%);transition:background .5s ease}.app-shell:before{content:"";position:fixed;width:360px;height:360px;border-radius:50%;border:1px solid rgba(31,118,94,.11);left:-170px;bottom:-160px;box-shadow:0 0 0 48px rgba(31,118,94,.025),0 0 0 96px rgba(31,118,94,.02);pointer-events:none}.app-shell.is-break{background:radial-gradient(circle at 84% 6%,rgba(226,172,106,.22),transparent 31%),linear-gradient(145deg,#faf8f3 0%,#f2eee4 100%)}
.topbar{max-width:1180px;margin:0 auto 34px;display:flex;align-items:center;justify-content:space-between}.eyebrow,.card-kicker{margin:0 0 7px;color:var(--green);font-size:.72rem;font-weight:750;letter-spacing:.14em}.topbar h1{margin:0;font-family:"STSong","Songti SC","Noto Serif CJK SC",Georgia,serif;font-weight:500;font-size:clamp(1.45rem,2.5vw,2.05rem);letter-spacing:-.02em}
.workspace{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.8fr);gap:22px;align-items:stretch}.timer-card,.eye-card,.notification-card,.settings-panel{border:1px solid rgba(180,198,187,.72);background:var(--card);box-shadow:var(--shadow);backdrop-filter:blur(14px)}.timer-card{min-height:560px;border-radius:32px;padding:clamp(28px,5vw,58px);display:flex;flex-direction:column;justify-content:center}.phase-row{display:flex;align-items:center;gap:10px;color:var(--green-dark);font-size:.9rem;font-weight:700}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(31,118,94,.1)}.is-break .status-dot{background:var(--warm);box-shadow:0 0 0 6px rgba(217,154,87,.12)}.cycle-count{margin-left:auto;color:var(--muted);font-weight:500}.timer{margin:48px 0 10px;font-variant-numeric:tabular-nums;font-weight:300;font-size:clamp(5.4rem,13vw,9.4rem);line-height:.9;letter-spacing:-.075em;color:#143f33}.timer-guidance{max-width:540px;min-height:52px;margin:20px 0 34px;font-size:.98rem;line-height:1.75;color:var(--muted)}.progress{height:7px;overflow:hidden;border-radius:999px;background:#e0e9e3}.progress span{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .5s linear}
.primary-actions{margin-top:36px;display:flex;gap:10px;align-items:center}.primary-button,.secondary-button,.icon-button,.text-button{border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary-button{min-width:180px;height:48px;color:#fff;border-color:var(--green);background:var(--green);font-weight:700}.primary-button:hover{background:var(--green-dark)}.secondary-button:hover,.icon-button:hover,.text-button:hover{background:#edf3ef}.icon-button{width:48px;padding:0;font-size:1.5rem}.settings-button{border-radius:999px;background:rgba(255,255,255,.7)}.text-button{border:0;background:transparent}.button-icon{font-size:.9rem}.primary-button:focus-visible,.secondary-button:focus-visible,.icon-button:focus-visible,.text-button:focus-visible,input:focus-visible{outline:3px solid rgba(31,118,94,.25);outline-offset:2px}
.side-stack{display:grid;grid-template-rows:1fr auto;gap:22px}.eye-card{border-radius:28px;padding:34px;display:flex;flex-direction:column;align-items:flex-start;transition:border-color .25s,transform .25s}.eye-card.eye-active{border-color:#6ca88f;transform:translateY(-2px)}.icon-disc{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:var(--green);background:var(--mint);margin-bottom:auto}.eye-card h2,.notification-card h2,.settings-panel h2{margin:0;font-family:"STSong","Songti SC","Noto Serif CJK SC",Georgia,serif;font-size:1.45rem;font-weight:500}.eye-card p:not(.card-kicker),.notification-card p{margin:13px 0 22px;color:var(--muted);line-height:1.72;font-size:.9rem}.notification-card{border-radius:24px;padding:24px;display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center}.notification-card>svg{color:var(--green)}.notification-card h2{font-size:1.02rem;font-family:inherit;font-weight:700}.notification-card p{margin:5px 0 0;line-height:1.45;font-size:.78rem}.notification-card .secondary-button{white-space:nowrap}
.settings-panel{max-width:1180px;margin:22px auto 0;border-radius:26px;padding:28px;animation:reveal .25s ease-out}.settings-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.number-grid label{border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--muted);font-size:.82rem;display:flex;align-items:center;justify-content:space-between}.number-grid span{color:var(--ink)}.number-grid input{width:58px;border:0;border-bottom:1px solid var(--line);color:var(--ink);background:transparent;text-align:center;outline:none}.switch-row{padding:18px 3px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;cursor:pointer}.switch-row strong,.switch-row small{display:block}.switch-row small{margin-top:4px;font-size:.78rem;color:var(--muted)}.switch-row input{position:absolute;opacity:0;pointer-events:none}.switch-row i{position:relative;width:42px;height:24px;border-radius:20px;background:#ccd8d0;transition:.2s}.switch-row i:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s}.switch-row input:checked+i{background:var(--green)}.switch-row input:checked+i:after{transform:translateX(18px)}.switch-row input:focus-visible+i{outline:3px solid rgba(31,118,94,.25);outline-offset:2px}.settings-note{margin:18px 0 0;color:var(--muted);font-size:.8rem}@keyframes reveal{from{opacity:0;transform:translateY(-8px)}}
noscript{position:fixed;inset:auto 16px 16px;padding:12px 16px;background:#fff4e6;border:1px solid #d99a57;border-radius:12px}
@media(max-width:820px){.app-shell{padding:24px 16px 40px}.workspace{grid-template-columns:1fr}.timer-card{min-height:475px;padding:28px 24px}.timer{font-size:clamp(5rem,25vw,7.2rem);margin-top:44px}.side-stack{grid-template-rows:auto}.icon-disc{margin-bottom:32px}.number-grid{grid-template-columns:1fr}}
@media(max-width:480px){.timer{font-size:4.8rem}.cycle-count{font-size:.72rem}.notification-card{grid-template-columns:auto 1fr}.notification-card button{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}