/* Layout: single-column app shell — 6 moving category tiles → preset list → full-screen timer stage */
:root{
  --bg:#EEF1F5; --surface:#FFFFFF; --ink:#13161C; --muted:#596171; --line:#D9DEE6; --track:#DCE1E9;
  --ink-fixed:#13161C; --white:#FFFFFF;
  --c-daily:#F2B705; --c-fit:#E2431F; --c-cook:#23894C; --c-focus:#2F5FE8; --c-rest:#7B55DF; --c-play:#D9387F;
  --f-display:"Do Hyeon","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-num:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --radius:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0E1014; --surface:#181B21; --ink:#EDF0F5; --muted:#9BA3B1; --line:#2A2F38; --track:#272B34; color-scheme:dark }
}
:root[data-theme="dark"]{ --bg:#0E1014; --surface:#181B21; --ink:#EDF0F5; --muted:#9BA3B1; --line:#2A2F38; --track:#272B34; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px}
.wrap{max-width:960px;margin:0 auto;padding-inline:16px;padding-block:14px 40px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:6px 18px}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0}
.brand svg{width:34px;height:34px}
.brand b{font-family:var(--f-num);font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand b i{font-style:normal;color:var(--c-fit)}
.now{font-family:var(--f-num);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* hero */
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,8vw,56px);line-height:1.05;margin:0 0 8px;text-wrap:balance;letter-spacing:-.01em}
.hero p{margin:0 0 20px;color:var(--muted);max-width:40ch}
.recent{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.recent span{font-size:12px;color:var(--muted);align-self:center;letter-spacing:.04em}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--cc)}

/* category tiles */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:720px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.tile{position:relative;border:0;border-radius:var(--radius);background:var(--cc);color:var(--on);padding:14px 16px 16px;text-align:left;display:flex;flex-direction:column;gap:2px;aspect-ratio:1/1.08;overflow:hidden;transition:transform .18s ease}
.tile:hover{transform:translateY(-3px)}
.tile:active{transform:scale(.97)}
.tile .mg{flex:1;min-height:0;width:78%;align-self:center;margin-bottom:4px}
.tile strong{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.1}
.tile small{font-size:12.5px;font-weight:600;opacity:.85}
.tile .en{position:absolute;top:12px;right:14px;font-family:var(--f-num);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}

/* category page */
.back{border:0;background:none;padding:6px 0;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px;margin-bottom:10px}
.band{background:var(--cc);color:var(--on);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:14px;margin-bottom:18px}
.band .mg{width:92px;height:92px;flex:none}
.band h2{font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1.05;margin:0}
.band p{margin:4px 0 0;font-size:13.5px;font-weight:600;opacity:.88}
.list{display:grid;gap:10px}
@media (min-width:720px){.list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 14px 14px 16px;text-align:left;transition:border-color .15s,transform .15s}
.row:hover{border-color:var(--cc)}
.row:active{transform:scale(.985)}
.row .txt{flex:1;min-width:0}
.row .txt b{display:block;font-size:16.5px;font-weight:800}
.row .txt span{display:block;font-size:13px;color:var(--muted)}
.row .len{font-family:var(--f-num);font-size:13px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .go{width:38px;height:38px;border-radius:50%;background:var(--cc);color:var(--on);display:grid;place-items:center;flex:none}
.row .go svg{width:14px;height:14px}
.custom{margin-top:16px;background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.custom label{font-weight:800;flex-basis:100%}
.custom output{font-family:var(--f-num);font-size:22px;font-weight:700;min-width:5ch;font-variant-numeric:tabular-nums}
.step{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:7px 10px;font-size:13px;font-weight:700}
.startbtn{margin-left:auto;border:0;background:var(--cc);color:var(--on);border-radius:999px;padding:10px 18px;font-weight:800}
.foot{margin-top:28px;color:var(--muted);font-size:12.5px;max-width:52ch}

/* stage */
.stage{position:fixed;inset:0;z-index:10;background:color-mix(in srgb,var(--cc) 12%,var(--bg));display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 18px);overflow-y:auto}
.stagebar{width:100%;max-width:560px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;height:40px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px}
.icon-btn svg{width:16px;height:16px}
.stagehead{text-align:center;margin-top:10px}
.stagehead .mg{width:56px;height:56px;color:var(--cc)}
.stagehead h3{font-family:var(--f-display);font-weight:400;font-size:28px;margin:2px 0 0;line-height:1.15}
.stagehead p{margin:2px 0 0;color:var(--muted);font-size:13px}
.dial{position:relative;width:min(78vw,44vh,360px);aspect-ratio:1;max-width:100%;margin:14px 0 10px}
.dial svg{width:100%;height:100%;display:block}
.dial .track{stroke:var(--track)}
.dial .prog{stroke:var(--cc);transition:stroke .3s}
.dial .prog.rest{stroke:var(--muted)}
.dial .breath{fill:var(--cc);opacity:.16}
.readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none}
.phase{font-family:var(--f-display);font-size:clamp(18px,5vw,24px);min-height:1.2em}
.digits{font-family:var(--f-num);font-weight:700;font-size:clamp(40px,12.5vw,68px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.digits.sm{font-size:clamp(32px,10vw,54px)}
.round{font-family:var(--f-num);font-size:13px;color:var(--muted);min-height:1.3em}
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:420px}
.primary{flex:1 1 100%;border:0;background:var(--cc);color:var(--on);border-radius:999px;height:58px;font-size:19px;font-weight:800}
.ghost{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:999px;height:46px;font-weight:700}
.laps{width:100%;max-width:420px;margin-top:14px;display:grid;gap:4px;font-family:var(--f-num);font-size:13.5px;font-variant-numeric:tabular-nums}
.laps div{display:flex;justify-content:space-between;padding:6px 4px;border-bottom:1px solid var(--line)}
.stage.is-done .digits{animation:blink .7s steps(2,start) 6}
.stage.is-done .dial{animation:pop .5s ease 3}
.stage:not(.is-running) .stagehead .mg *{animation-play-state:paused}
@keyframes blink{to{visibility:hidden}}
@keyframes pop{50%{transform:scale(1.04)}}

/* motion graphics */
.mg{display:block;overflow:visible}
.mg *{transform-box:view-box}
.mg .s{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mg .f{fill:currentColor}
.mg-daily .rays{transform-origin:60px 60px;animation:spin 14s linear infinite}
.mg-daily .hand{transform-origin:60px 60px;animation:spin 3s linear infinite}
.mg-fit .bell{animation:lift 1s ease-in-out infinite alternate}
.mg-fit .shadow{transform-origin:60px 100px;animation:shadow 1s ease-in-out infinite alternate}
.mg-cook .lid{transform-origin:60px 52px;animation:lid 2.2s ease-in-out infinite}
.mg-cook .steam{animation:steam 2.4s ease-in-out infinite;opacity:0}
.mg-cook .steam.b{animation-delay:.8s}.mg-cook .steam.c{animation-delay:1.6s}
.mg-focus .w{stroke-dasharray:1 1;stroke-dashoffset:1;animation:write 4.5s ease-in-out infinite}
.mg-focus .w2{animation-name:write2}.mg-focus .w3{animation-name:write3}
.mg-focus .pencil{transform-origin:80px 60px;animation:jot .45s ease-in-out infinite alternate}
.mg-rest .b{transform-origin:60px 60px;animation:breathe 4s ease-in-out infinite alternate}
.mg-rest .b1{opacity:.35;animation-delay:.3s}.mg-rest .b2{opacity:.65;animation-delay:.15s}
.mg-play .die{transform-origin:60px 54px;animation:roll 1.6s cubic-bezier(.5,0,.5,1) infinite}
.mg-play .shadow{transform-origin:60px 100px;animation:shadow2 1.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes lift{from{transform:translateY(6px)}to{transform:translateY(-12px)}}
@keyframes shadow{from{transform:scaleX(1);opacity:.35}to{transform:scaleX(.62);opacity:.18}}
@keyframes lid{0%,55%,100%{transform:none}65%{transform:translateY(-5px) rotate(-5deg)}75%{transform:none}85%{transform:translateY(-3px) rotate(4deg)}}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}35%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
@keyframes write{0%{stroke-dashoffset:1}22%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes write2{0%,22%{stroke-dashoffset:1}44%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes write3{0%,44%{stroke-dashoffset:1}62%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes jot{from{transform:translate(-3px,2px) rotate(-3deg)}to{transform:translate(2px,-1px) rotate(2deg)}}
@keyframes breathe{from{transform:scale(.62)}to{transform:scale(1)}}
@keyframes roll{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-22px) rotate(55deg)}80%,100%{transform:translateY(0) rotate(90deg)}}
@keyframes shadow2{0%,80%,100%{transform:scaleX(1);opacity:.35}45%{transform:scaleX(.55);opacity:.15}}
@media (prefers-reduced-motion: reduce){
  .mg *,.stage.is-done .digits,.stage.is-done .dial{animation:none!important}
  .mg-focus .w{stroke-dashoffset:0}.mg-cook .steam{opacity:.7}
  .tile,.row{transition:none}
}

/* ---- split-site additions ---- */
a{color:inherit}
.brand{text-decoration:none;color:inherit}
.tile,.row,.chip{text-decoration:none}
.row,.chip{color:var(--ink)}
.band h1{font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1.05;margin:0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted);margin:0 0 12px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs i{font-style:normal;opacity:.6}
.stage.inline{position:relative;inset:auto;z-index:auto;overflow:visible;border-radius:22px;padding:14px 16px 22px;margin-bottom:8px}
.stage.inline .dial{width:min(78vw,40vh,340px)}
.stagehead h1,.stagehead h2{font-family:var(--f-display);font-weight:400;font-size:30px;margin:2px 0 0;line-height:1.15;text-wrap:balance}
.icon-btn{text-decoration:none;color:var(--ink)}
.doc{margin-top:28px;max-width:68ch}
.doc h1{font-family:var(--f-display);font-weight:400;font-size:32px;margin:0 0 10px}
.doc h2{font-size:18px;font-weight:800;margin:26px 0 8px;text-wrap:balance}
.doc p,.doc li{line-height:1.7}
.doc p{margin:0 0 10px}
.doc ul{margin:0;padding-left:1.2em;display:grid;gap:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.alltimers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
@media (min-width:720px){.alltimers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.alltimers h3{font-size:15px;margin:0 0 6px}
.alltimers h3 a{text-decoration:none}
.alltimers ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.alltimers li a{display:flex;justify-content:space-between;gap:8px;text-decoration:none;font-size:14px;padding:5px 0;border-bottom:1px solid var(--line)}
.alltimers li span{color:var(--muted);font-family:var(--f-num);font-size:11.5px;white-space:nowrap}
.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);padding-block:16px 28px;margin-top:32px;font-size:13px;color:var(--muted)}
.site-foot nav{display:flex;gap:16px}
.site-foot a{color:var(--muted)}
.site-foot p{margin:0}