:root{
    --bg-top:#1a3021;
    --bg-bot:#0c1610;
    --herb:#5c8a54;
    --cream:#fff3e2;
    --muted:#b9cbb4;
    --tomato-hi:#ff8a6b;
    --tomato-mid:#ef4b39;
    --tomato-shade:#d62a1e;
    --tomato-deep:#a81a12;
    --stripes:repeating-conic-gradient(from 8deg,
      rgba(120,15,8,0) 0deg 26deg,
      rgba(120,15,8,.16) 30deg 34deg,
      rgba(120,15,8,0) 38deg);
    --stripe-blend:multiply;
    --shadow-dark:rgba(120,10,6,.55);
    --shadow-light:rgba(255,190,160,.38);
    --leaf:#4a9a41;
    --leaf-deep:#2c6a29;
    --ring:#ffe1a8;
    --ring-track:rgba(255,240,220,.14);
    --hand:#20321f;
    --hand-tip:#ffe1a8;
    --pip-on:#ef4b39;
    --pip-off:rgba(255,255,255,.14);
  }

  /* Green Zebra — green body with yellow-green stripes */
  body[data-variety="green"]{
    --tomato-hi:#e6f18c;
    --tomato-mid:#8fbf46;
    --tomato-shade:#5f9130;
    --tomato-deep:#39631d;
    --stripes:repeating-conic-gradient(from 8deg,
      rgba(210,238,110,0) 0deg 22deg,
      rgba(210,238,110,.9) 27deg 33deg,
      rgba(210,238,110,0) 38deg);
    --stripe-blend:overlay;
    --shadow-dark:rgba(38,66,16,.55);
    --shadow-light:rgba(232,246,170,.42);
    --pip-on:#8fbf46;
  }

  /* Black Krim — dusky purple with hints of red */
  body[data-variety="krim"]{
    --tomato-hi:#b07690;
    --tomato-mid:#6e3a5a;
    --tomato-shade:#4c2640;
    --tomato-deep:#2f172c;
    --stripes:repeating-conic-gradient(from 8deg,
      rgba(198,52,46,0) 0deg 22deg,
      rgba(198,52,46,.6) 27deg 34deg,
      rgba(198,52,46,0) 38deg);
    --stripe-blend:soft-light;
    --shadow-dark:rgba(38,14,36,.6);
    --shadow-light:rgba(214,172,202,.34);
    --pip-on:#9c4763;
  }

  *{box-sizing:border-box;margin:0;padding:0}

  html,body{height:100%}

  body{
    min-height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(20px,4vh,40px);
    padding:32px 20px;
    font-family:"Georgia","Iowan Old Style",serif;
    color:var(--cream);
    background:
      radial-gradient(120% 90% at 50% -10%, #244430 0%, transparent 55%),
      linear-gradient(180deg, var(--bg-top), var(--bg-bot));
    background-attachment:fixed;
  }

  .brand{
    text-align:center;
    line-height:1;
  }
  .brand .kicker{
    font-family:ui-sans-serif,system-ui,sans-serif;
    text-transform:uppercase;
    letter-spacing:.42em;
    font-size:.66rem;
    font-weight:600;
    color:var(--herb);
    padding-left:.42em;
  }
  .brand h1{
    font-size:clamp(1.9rem,5vw,2.7rem);
    font-weight:400;
    font-style:italic;
    margin-top:.35em;
    color:var(--cream);
  }

  /* ---- mode switch ---- */
  .modes{
    display:flex;
    gap:6px;
    padding:5px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;
  }
  .modes button{
    font-family:ui-sans-serif,system-ui,sans-serif;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--muted);
    background:transparent;
    border:none;
    padding:9px 16px;
    border-radius:999px;
    cursor:pointer;
    transition:color .2s, background .25s;
  }
  .modes button:hover{color:var(--cream)}
  .modes button[aria-pressed="true"]{
    color:#2a1207;
    background:var(--ring);
  }

  /* stack the two switcher rows tightly as one unit */
  .switches{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  /* ---- tomato variety switch ---- */
  .varieties{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    padding:5px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;
  }
  .varieties button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:ui-sans-serif,system-ui,sans-serif;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--muted);
    background:transparent;
    border:none;
    padding:9px 16px;
    border-radius:999px;
    cursor:pointer;
    transition:color .2s, background .25s;
  }
  .varieties button:hover{color:var(--cream)}
  .varieties button[aria-pressed="true"]{
    color:#2a1207;
    background:var(--ring);
  }
  .swatch{
    width:13px;
    height:13px;
    flex:none;
    border-radius:50% 50% 50% 50% / 55% 55% 45% 45%;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);
  }
  .swatch.beefsteak{background:radial-gradient(circle at 35% 30%,#ff8a6b,#c62216)}
  .swatch.green{background:radial-gradient(circle at 35% 30%,#e6f18c,#5f9130)}
  .swatch.krim{background:radial-gradient(circle at 35% 30%,#b07690,#3a1c34)}

  /* ---- the tomato timer ---- */
  .stage{
    --size:clamp(240px,74vw,360px);
    position:relative;
    width:var(--size);
    height:var(--size);
    display:grid;
    place-items:center;
  }

  .tomato{
    position:absolute;
    inset:6%;
    border-radius:50%;
    background:
      var(--stripes),
      radial-gradient(circle at 37% 30%,
        var(--tomato-hi) 0%, var(--tomato-mid) 27%,
        var(--tomato-shade) 56%, var(--tomato-deep) 100%);
    background-blend-mode:var(--stripe-blend), normal;
    box-shadow:
      inset -20px -24px 44px var(--shadow-dark),
      inset 16px 18px 34px var(--shadow-light),
      0 26px 54px rgba(0,0,0,.5);
    transition:background .4s ease, box-shadow .4s ease;
  }
  /* glossy specular highlight */
  .tomato::after{
    content:"";
    position:absolute;
    left:22%; top:16%;
    width:34%; height:26%;
    border-radius:50%;
    background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.72), rgba(255,255,255,0) 70%);
    filter:blur(1px);
  }

  /* leafy calyx + stem on the crown */
  .leaf{
    position:absolute;
    top:-2%;
    left:50%;
    width:34%;
    height:34%;
    transform:translateX(-50%);
    z-index:4;
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.35));
  }

  /* svg overlay: track, progress ring, ticks, sweeping hand */
  .dial{
    position:absolute;
    inset:6%;
    z-index:3;
    overflow:visible;
  }
  .track{fill:none;stroke:var(--ring-track);stroke-width:7}
  .progress{
    fill:none;
    stroke:var(--ring);
    stroke-width:7;
    stroke-linecap:round;
    transform:rotate(-90deg);
    transform-origin:150px 150px;
    filter:drop-shadow(0 0 4px rgba(255,225,168,.5));
  }
  .tick{stroke:rgba(255,235,215,.55);stroke-width:2}
  .tick.major{stroke:rgba(255,235,215,.9);stroke-width:3}
  .hand-group{transform-origin:150px 150px}
  .hand{stroke:var(--hand);stroke-width:5;stroke-linecap:round}
  .hand-tip{stroke:var(--hand-tip);stroke-width:5;stroke-linecap:round}
  .hub{fill:var(--hand);stroke:var(--hand-tip);stroke-width:2}

  /* center readout sits above the dial */
  .readout{
    position:relative;
    z-index:3;
    text-align:center;
    pointer-events:none;
    text-shadow:0 2px 6px rgba(80,6,2,.6);
  }
  .time{
    font-family:ui-sans-serif,system-ui,sans-serif;
    font-variant-numeric:tabular-nums;
    font-weight:700;
    font-size:clamp(2.6rem,12vw,3.9rem);
    letter-spacing:.01em;
    line-height:1;
    color:var(--cream);
  }
  .phase{
    font-family:ui-sans-serif,system-ui,sans-serif;
    text-transform:uppercase;
    letter-spacing:.34em;
    font-size:.66rem;
    font-weight:600;
    margin-top:.7em;
    padding-left:.34em;
    color:#ffdcc7;
  }

  .stage.done .tomato{animation:wobble .6s ease}
  @keyframes wobble{
    0%,100%{transform:rotate(0) scale(1)}
    20%{transform:rotate(-4deg) scale(1.04)}
    45%{transform:rotate(3deg) scale(.98)}
    70%{transform:rotate(-2deg) scale(1.02)}
  }

  /* ---- controls ---- */
  .controls{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .btn{
    font-family:ui-sans-serif,system-ui,sans-serif;
    cursor:pointer;
    border:none;
    transition:transform .12s ease, background .2s, color .2s, box-shadow .2s;
  }
  .btn:active{transform:translateY(1px)}
  .btn.primary{
    font-size:1rem;
    font-weight:700;
    letter-spacing:.04em;
    color:#2a1207;
    background:var(--ring);
    padding:14px 40px;
    border-radius:999px;
    box-shadow:0 8px 22px rgba(255,225,168,.28);
  }
  .btn.primary:hover{box-shadow:0 10px 28px rgba(255,225,168,.4)}
  .btn.ghost{
    font-size:.82rem;
    font-weight:600;
    color:var(--muted);
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    padding:13px 22px;
    border-radius:999px;
  }
  .btn.ghost:hover{color:var(--cream);background:rgba(255,255,255,.1)}

  /* completed-session pips */
  .harvest{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:16px;
  }
  .harvest .label{
    font-family:ui-sans-serif,system-ui,sans-serif;
    font-size:.66rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--herb);
    margin-right:2px;
  }
  .pip{
    width:12px;height:12px;border-radius:50% 50% 50% 50% / 55% 55% 45% 45%;
    background:var(--pip-off);
    transition:background .3s, transform .3s;
  }
  .pip.on{background:var(--pip-on);transform:scale(1.05)}

  :focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:6px}

  @media (prefers-reduced-motion:reduce){
    .stage.done .tomato{animation:none}
    .btn{transition:none}
  }