:root {
      --bg: #F5FAF8;
      --surface: rgba(255,255,255,.94);
      --surface-solid: #FFFFFF;
      --surface-2: #EAF5F1;
      --ink: #10201F;
      --muted: #60716E;
      --line: #DCE9E5;
      --accent: #0D7F63;
      --accent-2: #08634E;
      --accent-soft: #DDF7EE;
      --ok: #0D7F63;
      --danger: #A53B35;
      --shadow: 0 18px 60px rgba(7, 23, 22, .09);
      --shadow-sm: 0 8px 26px rgba(7, 23, 22, .07);
      --radius: 24px;
      --max: 1180px;
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg:#071716;--surface:rgba(16,35,33,.94);--surface-solid:#102321;--surface-2:#15302D;
        --ink:#F5FAF8;--muted:#AFC5BF;--line:#264440;--accent:#66F2C2;--accent-2:#9FF7E1;
        --accent-soft:#163D34;--ok:#66F2C2;--danger:#FFAAA3;--shadow:0 18px 60px rgba(0,0,0,.30);--shadow-sm:0 8px 26px rgba(0,0,0,.24)
      }
    }
    :root[data-theme="dark"] {
      --bg:#101113;--surface:rgba(25,26,29,.86);--surface-solid:#191a1d;--surface-2:#24201d;
      --ink:#f7f3ef;--muted:#b6ada5;--line:#34302d;--accent:#ff812e;--accent-2:#ff9959;
      --accent-soft:#3b271b;--ok:#61c38b;--danger:#ff8c82;--shadow:0 18px 60px rgba(0,0,0,.28);--shadow-sm:0 8px 26px rgba(0,0,0,.24)
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--bg);overflow-x:clip;
      color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
    button,input,select{font:inherit}
    button{color:inherit}
    a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
    .skip{position:absolute;left:-9999px;top:auto}.skip:focus{left:16px;top:16px;z-index:9999;background:var(--surface-solid);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-sm)}
    .wrap{width:min(calc(100% - 32px),var(--max));margin-inline:auto}
    header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
    .nav{height:68px;display:flex;align-items:center;gap:18px}
    .brand{display:inline-flex;align-items:center;gap:6px;font-weight:900;letter-spacing:-.025em;text-decoration:none;white-space:nowrap;font-size:1.08rem}
    .brand-bq{color:var(--accent)}.brand-product{color:#9A722A}:root[data-theme="dark"] .brand-product{color:#E6C36A}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-product{color:#E6C36A}}
    nav{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
    nav a,.icon-btn{border:0;background:transparent;padding:9px 11px;border-radius:11px;text-decoration:none;color:var(--muted);font-weight:750;cursor:pointer}
    nav a:hover,.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
    .icon-btn{display:inline-grid;place-items:center;min-width:42px;min-height:42px}
    .mobile-hide{display:inline}
    main{padding:40px 0 70px}
    .hero{text-align:center;max-width:830px;margin:12px auto 24px}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);font-size:.82rem;font-weight:850;letter-spacing:.02em}
    h1{font-size:clamp(2rem,5vw,4.25rem);line-height:1.02;letter-spacing:-.055em;margin:16px 0 12px}
    .hero p{font-size:clamp(1rem,2vw,1.16rem);color:var(--muted);max-width:680px;margin:0 auto}
    .app-shell{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:22px;align-items:start}
    .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
    .timer-card{padding:clamp(18px,3vw,32px)}
    .mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--surface-2);padding:5px;border-radius:14px;margin-bottom:26px}
    .mode-tab{border:0;background:transparent;border-radius:10px;padding:10px 12px;font-weight:850;cursor:pointer;color:var(--muted)}
    .mode-tab[aria-selected="true"]{background:var(--surface-solid);color:var(--ink);box-shadow:var(--shadow-sm)}
    .timer-stage{display:grid;place-items:center;min-height:360px;position:relative}
    .ring{--progress:0deg;width:min(320px,72vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--accent) var(--progress),var(--line) 0);transition:background .2s linear}
    .ring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--surface-solid);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
    .time-face{position:relative;z-index:1;text-align:center;padding:20px}
    .time-display{font-variant-numeric:tabular-nums;font-size:clamp(3.3rem,9vw,6.4rem);line-height:.95;letter-spacing:-.055em;font-weight:900;white-space:nowrap}
    .timer-status{min-height:24px;margin-top:14px;color:var(--muted);font-weight:750}
    .timer-status.done{color:var(--danger)}
    .end-time{font-size:.86rem;color:var(--muted);margin-top:4px;min-height:21px}
    .controls{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:10px;margin-top:24px}
    .btn{border:1px solid var(--line);background:var(--surface-solid);padding:13px 16px;border-radius:14px;font-weight:850;cursor:pointer;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s ease,border-color .12s ease,background .12s ease}
    .btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
    .btn:active{transform:translateY(0)}
    .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 9px 20px rgba(13,127,99,.18)}
    .btn.primary:hover{background:var(--accent-2)}
    .btn.secondary{background:var(--surface-2)}
    .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
    .preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;justify-content:center}
    .preset{border:1px solid var(--line);background:var(--surface-solid);padding:8px 12px;border-radius:999px;font-weight:800;cursor:pointer;color:var(--muted)}
    .preset:hover,.preset.active{color:var(--accent-2);border-color:var(--accent);background:var(--accent-soft)}
    .custom-box{margin-top:20px;border-top:1px solid var(--line);padding-top:20px;display:grid;grid-template-columns:1fr auto;gap:10px}
    .input-wrap{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:14px;background:var(--surface-solid);padding:0 13px;min-height:50px}
    .input-wrap:focus-within{outline:3px solid color-mix(in srgb,var(--accent) 20%,transparent);border-color:var(--accent)}
    .input-wrap input{min-width:0;width:100%;background:transparent;border:0;outline:0;color:var(--ink)}
    .input-wrap input::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
    .side{display:grid;gap:18px}
    .side-card{padding:22px}
    .side-card h2{margin:0 0 4px;font-size:1.06rem;letter-spacing:-.02em}
    .side-card p{margin:0;color:var(--muted);font-size:.91rem}
    .switch-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
    .switch-row:last-child{border-bottom:0;padding-bottom:0}
    .switch-row:first-of-type{margin-top:10px}
    .switch-copy{min-width:0;flex:1}
    .switch-copy strong{display:block;font-size:.93rem}.switch-copy span{display:block;font-size:.8rem;color:var(--muted);margin-top:1px}
    .switch{width:46px;height:27px;border:0;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:0 0 auto}
    .switch::after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 2px 7px rgba(0,0,0,.22);transition:transform .18s ease}
    .switch[aria-checked="true"]{background:var(--accent)}.switch[aria-checked="true"]::after{transform:translateX(19px)}
    .shortcut-grid{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin-top:14px;font-size:.88rem;align-items:center}
    kbd{background:var(--surface-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;padding:3px 7px;font:700 .76rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
    .utility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
    .utility-card{padding:20px;box-shadow:var(--shadow-sm)}
    .utility-card h3{font-size:1rem;margin:0 0 5px}.utility-card p{font-size:.86rem;color:var(--muted);margin:0 0 13px}
    .mini-display{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:900;letter-spacing:-.04em;margin:12px 0}
    .mini-controls{display:flex;gap:8px}.mini-controls .btn{min-height:42px;padding:9px 12px;font-size:.87rem;flex:1}
    .pomo-settings{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.pomo-settings label{font-size:.75rem;color:var(--muted);font-weight:800}.pomo-settings input{width:100%;margin-top:5px;border:1px solid var(--line);background:var(--surface-solid);color:var(--ink);border-radius:10px;padding:9px}
    .content{margin-top:56px}
    .content-head{max-width:760px;margin-bottom:22px}.content-head h2{font-size:clamp(1.6rem,3vw,2.35rem);letter-spacing:-.035em;margin:0 0 7px}.content-head p{color:var(--muted);margin:0}
    .popular{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .popular a{display:block;text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);font-weight:850}
    .popular a span{display:block;color:var(--accent-2);font-size:1.45rem;line-height:1;margin-bottom:8px}.popular a small{display:block;color:var(--muted);font-weight:650}
    .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.info-card{padding:24px}.info-card h3{margin:0 0 8px;font-size:1.1rem}.info-card p,.info-card li{color:var(--muted)}.info-card ul{padding-left:20px;margin-bottom:0}
    .faq{margin-top:18px}.faq details{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:0 18px;margin:9px 0}.faq summary{cursor:pointer;font-weight:850;padding:17px 0}.faq p{color:var(--muted);margin:0;padding:0 0 17px}
    footer{border-top:1px solid var(--line);padding:28px 0 42px;color:var(--muted);font-size:.88rem}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.footer-links{display:flex;gap:14px;flex-wrap:wrap}.footer-links a{text-decoration:none}.privacy-note{font-size:.8rem}
    .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:12px;font-size:.88rem;font-weight:750;z-index:100;transition:.2s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
    .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
    .fullscreen .app-shell{grid-template-columns:1fr}.fullscreen .side,.fullscreen .utility-grid,.fullscreen .hero,.fullscreen .content{display:none}.fullscreen main{padding:12px 0}.fullscreen .timer-card{min-height:calc(100vh - 94px);display:flex;flex-direction:column;justify-content:center}.fullscreen .timer-stage{min-height:0;flex:1}.fullscreen .ring{width:min(62vh,72vw)}
    @media (max-width:900px){.app-shell{grid-template-columns:1fr}.side{grid-template-columns:1fr 1fr}.popular{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:680px){.wrap{width:min(calc(100% - 20px),var(--max))}.mobile-hide{display:none}nav{gap:2px}.nav{height:62px}main{padding-top:24px}.hero{margin-top:3px}.app-shell{gap:14px}.timer-card{border-radius:20px}.timer-stage{min-height:310px}.controls{grid-template-columns:1fr 1fr}.controls .primary{grid-column:1/-1;order:-1}.custom-box{grid-template-columns:1fr}.custom-box .btn{width:100%}.side{grid-template-columns:1fr}.utility-grid{grid-template-columns:1fr}.popular{grid-template-columns:1fr 1fr}.info-grid{grid-template-columns:1fr}.side-card{padding:18px}.content{margin-top:40px}}
    @media (max-width:390px){.time-display{font-size:3.15rem}.ring{width:min(286px,82vw)}.popular{grid-template-columns:1fr}.mode-tab{padding-inline:8px;font-size:.86rem}}
    @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
    @media print{header,.hero,.side,.utility-grid,.controls,.preset-row,.custom-box,.content,footer{display:none!important}.app-shell{display:block}.timer-card{box-shadow:none;border:0}.ring{background:none!important}.ring::after{border:2px solid #aaa}.time-display{color:#000}}

    :where(a,button,input,select,summary):focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 42%,transparent);outline-offset:3px}
    nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-2)}
    .mode-tab,.preset,.icon-btn{min-height:44px}
    .switch{width:52px;height:44px;background:transparent;border:0;position:relative;cursor:pointer;flex:0 0 auto}
    .switch::before{content:"";position:absolute;width:46px;height:27px;border-radius:999px;background:var(--line);left:3px;top:8.5px;transition:background .15s ease}
    .switch::after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;left:6px;top:11.5px;box-shadow:0 2px 7px rgba(0,0,0,.14);transition:transform .15s ease}
    .switch[aria-checked="true"]::before{background:var(--accent)}
    .switch[aria-checked="true"]::after{transform:translateX(19px)}
    .laps{max-height:180px;overflow:auto;color:var(--muted);font-variant-numeric:tabular-nums}
    .browser-side{font-size:1.7rem}
    .route-intro{margin-top:28px}.route-intro .info-card{max-width:860px;margin-inline:auto}
    .brand-footer{font-weight:900;letter-spacing:-.02em}.brand-footer .brand-bq{color:var(--accent)}.brand-footer .brand-product{color:#9A722A}
    :root[data-theme="dark"] .brand-footer .brand-product{color:#E6C36A}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-footer .brand-product{color:#E6C36A}}
    .legal-main{max-width:860px;margin-inline:auto}.legal-main h1{font-size:clamp(2rem,5vw,3.5rem)}.legal-main h2{margin-top:2rem;font-size:1.35rem}.legal-main p,.legal-main li{color:var(--muted)}.legal-main a{color:var(--accent-2)}
    .utility-card,.info-card,.popular a,.card{contain:layout paint}
    [dir="rtl"] .info-card ul{padding-left:0;padding-right:20px}
    @media (max-width:680px){nav a{padding-inline:8px}.footer-row{align-items:flex-start}.footer-links{row-gap:10px}}

.language-picker{display:inline-flex;align-items:center}
.language-select{min-height:44px;max-width:132px;border:1px solid var(--line);border-radius:11px;background:var(--surface-solid);color:var(--ink);padding:0 30px 0 10px;font-weight:750;cursor:pointer}
[dir="rtl"] .language-select{padding:0 10px 0 30px}
[dir="rtl"] .skip{left:auto;right:-9999px}[dir="rtl"] .skip:focus{left:auto;right:16px}
[dir="rtl"] .switch::before{left:auto;right:3px}[dir="rtl"] .switch::after{left:auto;right:6px}[dir="rtl"] .switch[aria-checked="true"]::after{transform:translateX(-19px)}
[dir="rtl"] .shortcut-grid{grid-template-columns:1fr auto}
.legal-hero{max-width:850px}.legal-content{max-width:950px;margin-inline:auto}
@media (max-width:680px){.language-select{max-width:106px;padding-inline:8px;font-size:.82rem}.nav{gap:8px}.icon-btn{min-width:40px;padding-inline:8px}}