@font-face{font-family:'Filson Pro';src:url('/assets/pomodoro/fonts/filson-pro-black.woff') format('woff');font-weight:900;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/pomodoro/fonts/dm-sans-400.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/pomodoro/fonts/dm-sans-500.woff') format('woff');font-weight:500;font-display:swap}
:root{--cream:#F0E8DC;--red:#BB0404;--gutter:3.8vw;color-scheme:light}
*{box-sizing:border-box}
html{overflow:clip;background:var(--cream);color:var(--red);font-family:'DM Sans',sans-serif}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;padding:0 var(--gutter)}
::selection{color:var(--cream);background:var(--red)}
/* Share the exact main-site header; escape this page's artwork gutters. */
.pg-construction-header{--pg-cream:var(--cream);--pg-red:var(--red);margin-inline:calc(-1 * var(--gutter));width:calc(100% + 2 * var(--gutter))}
.edition{font-size:13px;letter-spacing:.06em;font-weight:500;text-align:right}
main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(70px,8.5vw,145px) 0 45px}
.poster{position:relative;isolation:isolate}
h1{font-family:'Filson Pro',sans-serif;font-size:15.4vw;font-weight:900;line-height:.94;letter-spacing:-.035em;margin:0 0 0 -.012em}
h1 span{display:block}
.tomato{position:absolute;z-index:1;width:32vw;aspect-ratio:1;right:3vw;top:-15vw;pointer-events:none}
.message{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:40px}
.message p{margin:0;font-size:clamp(22px,2.2vw,36px);line-height:1.16;letter-spacing:-.035em;font-weight:500}
.message .aside{font-size:16px;line-height:1.45;font-weight:400;letter-spacing:0;max-width:260px}
footer{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px;font-weight:500;letter-spacing:.055em}
.motion-toggle{font:inherit;font-weight:400;letter-spacing:0;color:inherit;background:none;border:0;padding:12px 2px;cursor:pointer}
.motion-toggle span{margin-left:8px}
.motion-toggle:hover{text-decoration:underline;text-underline-offset:4px}
.motion-toggle:focus-visible{outline:2px solid var(--red);outline-offset:4px}
[hidden]{display:none!important}
@media(min-width:1800px){body{--gutter:max(68px,calc((100vw - 1664px)/2))}h1{font-size:277px}.tomato{width:576px;top:-270px;right:54px}main{padding-top:153px}}
@media(max-width:700px){
  :root{--gutter:22px}
  .edition{font-size:11px;line-height:1.45;max-width:126px;margin-top:5px;letter-spacing:.035em}
  main{padding:195px 0 32px;justify-content:center}
  h1{font-size:15vw;line-height:1;letter-spacing:-.035em}
  .tomato{width:72vw;right:0;top:-62vw}
  .message{margin-top:30px;display:block}
  .message p{font-size:25px}
  .message .aside{margin-top:20px;font-size:14px;line-height:1.5}
  footer{min-height:88px;flex-wrap:wrap;column-gap:12px;row-gap:0;padding:15px 0;font-size:10px}
  .motion-toggle{font-size:12px;margin-left:auto}
  .soon{width:100%;font-size:10px}
}

/* The real 3D ball and letter collision field share viewport coordinates. */
/* The 44px grab area may extend beyond the floor; it must not scroll the scene. */
body{overflow:clip}
.poster{isolation:auto}
.tomato{z-index:3;padding:0;border:0;background:none;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.tomato:active{cursor:grabbing}
.tomato:focus-visible{outline:1px dashed var(--red);outline-offset:5px;border-radius:50%}
.tomato img{pointer-events:none;-webkit-user-drag:none}
.scene-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0}
body[data-3d='ready'] .scene-canvas{opacity:1}
footer{position:relative;z-index:4}

body[data-material='ball'] .tomato{width:calc(clamp(98px,11vw,170px) * var(--tomato-scale,.5));border-radius:50%}

/* Reveal only the current live model, never a legacy material render. */
body:not([data-3d='ready']) .tomato{visibility:hidden}

/* Keep the poster and controls in view on short landscape screens. */
@media(orientation:landscape) and (max-height:600px){
  main{padding:24px 0 16px}
  h1{font-size:min(15vw,max(32px,calc((100svh - var(--pg-header-height,73px) - 104px)/2)))}
  .tomato{width:min(32vw,62svh);right:3vw;top:calc(-1 * min(15vw,23svh))}
  footer{min-height:64px;flex-wrap:nowrap;padding:8px 0;gap:16px}
  .motion-toggle{margin-left:auto}
  .soon{width:auto;white-space:nowrap}
}


body[data-3d='ready'] h1{opacity:0}
.launch-guide{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:hidden}
.launch-guide[hidden]{display:none}
.aim-dots circle{fill:var(--red);stroke:var(--cream);stroke-width:1.8}
.aim-dots .aim-impact{fill:none;stroke:var(--red);stroke-width:1.5}
.aim-tether{fill:none;stroke:var(--red);stroke-width:1.3;opacity:.4;stroke-dasharray:3 5}
.aim-tether circle{fill:var(--cream);stroke-dasharray:none}
.launch-hint{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Let the ball remain visible and grabbable across the entire viewport.
   Only actual navigation and controls intercept input above the scene. */
header.pg-construction-header[data-header-stick]{background:transparent!important;pointer-events:none}
.pg-construction-header a{pointer-events:auto}
footer{pointer-events:none}
.motion-toggle{pointer-events:auto}

/* A stationary tomato invites the first pull; only the small hand demonstrates it. */
.pull-cue{position:fixed;z-index:4;width:112px;height:68px;pointer-events:none;color:var(--red);font-size:12px;line-height:1.45;letter-spacing:.055em;font-weight:500}
.pull-cue svg{display:block;width:100%;height:32px;overflow:visible;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.pull-cue span{display:block}
.pull-cue span:last-child{opacity:.7;font-size:10px}
.cue-arrow{stroke-dasharray:3 4;opacity:.45}
.cue-grip{fill:var(--cream);animation:demonstrate-pull 2.8s ease-in-out infinite}
.pull-cue[data-side='left']{text-align:right}
.pull-cue[data-side='left'] svg{transform:scaleX(-1)}
@keyframes demonstrate-pull{0%,15%{transform:translateX(0);opacity:1}55%,70%{transform:translateX(47px);opacity:1}82%,100%{transform:translateX(47px);opacity:0}}
.aim-dots .aim-contact{fill:none;stroke:var(--red);stroke-width:1;stroke-dasharray:3 5;opacity:.45}
@media(prefers-reduced-motion:reduce){.cue-grip{animation:none;transform:translateX(24px)}}

@media(max-width:700px){.pull-cue{font-size:10px}.pull-cue span:last-child{font-size:9px}}

/* Size shares the existing footer controls; its native range keeps touch and
   keyboard adjustment, while the painted label remains part of the playground. */
footer{display:grid;grid-template-columns:1fr auto 1fr}
.scene-controls{display:flex;align-items:center;gap:24px;justify-self:center}
.size-control{display:flex;align-items:center;gap:10px;pointer-events:auto;font-size:10px;letter-spacing:.03em;white-space:nowrap;cursor:pointer}
.size-control span{display:inline-block;width:61px}
.size-control output{font-variant-numeric:tabular-nums}
.size-control input{width:96px;height:28px;margin:0;padding:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:pan-y;accent-color:var(--red)}
.size-control input::-webkit-slider-runnable-track{height:2px;background:var(--red);border-radius:2px}
.size-control input::-moz-range-track{height:2px;background:var(--red);border-radius:2px}
.size-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;background:var(--red);border:0;border-radius:50%;margin-top:-5px}
.size-control input::-moz-range-thumb{width:12px;height:12px;background:var(--red);border:0;border-radius:50%}
.size-control input:focus-visible{outline:1px dashed var(--red);outline-offset:3px;border-radius:4px}
.size-control input:disabled{opacity:.35;cursor:default}
footer .soon{justify-self:end}
@media(max-width:700px) and (orientation:portrait){
  footer{grid-template-columns:1fr auto;row-gap:4px}
  footer .launch-hint{grid-column:1;grid-row:1}
  footer .soon{grid-column:2;grid-row:1;width:auto}
  .scene-controls{grid-column:1 / -1;grid-row:2;justify-content:space-between;justify-self:stretch}
  .scene-controls .motion-toggle{margin-left:0}
}
@media(orientation:landscape) and (max-height:600px){footer{column-gap:12px}.scene-controls{gap:14px}.size-control{gap:6px}.size-control input{width:78px}}

/* The smallest body stays easy to pick up without inflating its geometry. */
.tomato::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%);border-radius:50%}
.size-control input{width:128px}
@media(max-width:700px) and (orientation:portrait){.size-control input{width:116px}}
@media(orientation:landscape) and (max-height:600px){.size-control input{width:96px}}


/* The target is a sensor, not an obstacle. Game overlays never catch a drag. */
.scoreboard{position:fixed;top:20px;right:var(--gutter);z-index:4;pointer-events:none;text-align:right;color:var(--red)}
.scoreboard,.game-target span{text-shadow:-1px -1px 0 var(--cream),0 -1px 0 var(--cream),1px -1px 0 var(--cream),1px 0 0 var(--cream),1px 1px 0 var(--cream),0 1px 0 var(--cream),-1px 1px 0 var(--cream),-1px 0 0 var(--cream)}
.score-total{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;line-height:1}
.score-total output{font-family:'Filson Pro',sans-serif;font-size:38px;font-weight:900;font-variant-numeric:tabular-nums;min-width:2ch}
.score-total span{font-size:10px;font-weight:500;letter-spacing:.06em}
.shot-combo{font-size:10px;letter-spacing:.04em;line-height:1.4;margin-top:8px;min-width:180px}
.game-target{position:fixed;width:64px;height:82px;margin:-32px 0 0 -32px;z-index:3;pointer-events:none;color:var(--red);text-align:center;transition:opacity .2s}
.game-target svg{display:block;width:64px;height:64px;stroke:currentColor;stroke-width:1.5;overflow:visible}
.game-target svg{filter:drop-shadow(1px 0 0 var(--cream)) drop-shadow(-1px 0 0 var(--cream)) drop-shadow(0 1px 0 var(--cream)) drop-shadow(0 -1px 0 var(--cream))}
.game-target .target-center{fill:currentColor;stroke:none}
.game-target span{display:block;width:90px;margin:1px 0 0 -13px;font-size:9px;line-height:14px;font-weight:500;letter-spacing:.1em;white-space:nowrap}
.game-target[data-waiting='true']{opacity:.42}
.score-pop{position:fixed;z-index:5;pointer-events:none;font-family:'Filson Pro',sans-serif;font-size:34px;line-height:1;color:var(--red);text-shadow:0 1px 0 var(--cream),1px 0 0 var(--cream),-1px 0 0 var(--cream);opacity:0;transform:translate(-50%,-50%)}
.score-pop.is-visible{animation:score-rise 1.4s ease-out both}
@keyframes score-rise{0%{opacity:0;transform:translate(-50%,-25%)}12%,65%{opacity:1}100%{opacity:0;transform:translate(-50%,-145%)}}
@media(max-width:700px) and (orientation:portrait){.scoreboard{top:66px}.score-total output{font-size:32px}.shot-combo{font-size:9px;min-width:162px}}
@media(orientation:landscape) and (max-height:600px){.scoreboard{top:13px}.score-total output{font-size:28px}.shot-combo{font-size:9px;min-width:162px;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.game-target{transition:none}.score-pop.is-visible{animation:none;opacity:1}}

.miss-status{font-size:9px;letter-spacing:.035em;line-height:1.4;margin-top:4px;white-space:nowrap}
.scoreboard{min-width:190px}
.score-pop{will-change:transform,opacity}
@media(max-width:700px){.miss-status{font-size:8px}}