/* Calm Timers — pixel hourglass under a night sky */
:root{
  --bg:#12111F; --bg2:#1A1830; --fg:#ECE8F6; --muted:#8E89AC; --line:#2E2B4A;
  --accent:#E8BC6E; --surface:rgba(255,255,255,.035);
  --pixel:"Pixelify Sans","Courier New",monospace;
  --tiny:"Silkscreen","Courier New",monospace;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}

body{background:radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg) 70%) fixed,var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 0;overflow-x:hidden;margin:0}
.app{max-width:1040px;margin:0 auto;min-height:calc(100svh - 64px);display:grid;gap:8px 44px;align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.app{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.stage{height:min(82vh,720px);min-height:380px;position:relative}
@media (max-width:819px){.stage{height:min(58vh,560px);min-height:320px}}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.panel{display:flex;flex-direction:column;gap:22px;min-width:0;transition:opacity .6s ease}
.app.focus .panel{opacity:0;pointer-events:none}
.app.focus.peek .panel{opacity:1;pointer-events:auto}
.eyebrow{font-family:var(--tiny);font-size:.72rem;letter-spacing:.06em;color:var(--muted);margin:0;text-transform:uppercase}
.time{font-family:var(--pixel);font-weight:400;font-size:clamp(4rem,10.5vw,6.6rem);line-height:.95;margin:6px 0 0;
  font-variant-numeric:tabular-nums;transition:color .8s,opacity .4s}
.time.done{color:var(--accent)}
.time.veiled{opacity:0}
.status{color:var(--muted);margin:8px 0 0;font-size:.95rem;min-height:1.4em}
.group{display:flex;flex-direction:column;gap:10px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button{font:inherit;font-weight:500;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:7px 13px;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
button:hover:not(:disabled){border-color:var(--muted)}
button:disabled{opacity:.35;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.primary{background:var(--accent);color:#1B1526;border-color:var(--accent);padding:10px 24px;font-weight:600;box-shadow:0 3px 0 #9C7B3F}
.primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #9C7B3F}
.custom{display:flex;align-items:center;gap:8px}
.custom input{font:inherit;width:84px;padding:7px 10px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
.custom label{color:var(--muted);font-size:.9rem}
.swatch{width:30px;height:30px;padding:0;border-radius:3px;border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);image-rendering:pixelated}
.swatch[aria-pressed="true"]{border-color:var(--fg)}
.keys{font-size:.82rem;color:var(--muted);margin:0}
.toast{font-size:.85rem;color:var(--accent);opacity:0;transition:opacity .3s}
.toast.show{opacity:1}
kbd{font-family:var(--body);font-size:.75rem;border:1px solid var(--line);border-radius:3px;padding:0 5px}
body.pip{padding:0!important;margin:0;height:100vh;overflow:hidden;background:var(--bg)}
.pip-wrap{display:flex;flex-direction:column;height:100%}
#pipcv{position:static;flex:1;min-height:0;width:100%;height:auto;cursor:pointer}
.pip-bar{display:flex;gap:6px;align-items:center;padding:6px 10px 10px}
.pip-time{font-family:var(--pixel);font-size:1.7rem;flex:1;font-variant-numeric:tabular-nums}
.pip-time.done{color:var(--accent)}
.pip-bar button{padding:5px 10px;font-size:.85rem}
@media (prefers-reduced-motion:reduce){.panel,button,.time{transition:none}}

*{box-sizing:border-box}
a{color:var(--accent)}
.site-head{max-width:1040px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--pixel);font-size:1.35rem;color:var(--fg);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand img{width:26px;height:26px;image-rendering:pixelated}
.site-head nav{display:flex;gap:18px;flex-wrap:wrap}
.brand{white-space:nowrap}
@media (max-width:560px){.site-head nav a:nth-child(2),.site-head nav a:nth-child(3){display:none}.brand{font-size:1.15rem}.site-head nav{gap:14px}}
.site-head nav a{color:var(--muted);text-decoration:none;font-size:.95rem}
.site-head nav a:hover,.site-head nav a[aria-current="page"]{color:var(--fg)}
h1.eyebrow{font-weight:400}
.content{max-width:760px;margin:48px auto 0;display:flex;flex-direction:column;gap:40px}
.content h2{font-family:var(--pixel);font-weight:400;font-size:1.7rem;margin:0 0 12px;text-wrap:balance}
.content h3{font-size:1.05rem;margin:0 0 6px}
.content p,.content li{color:#C9C4DE;font-size:1.02rem;line-height:1.65;max-width:68ch}
.content p{margin:0 0 12px}
.content ul{margin:0;padding-left:20px;display:grid;gap:6px}
.timer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;list-style:none;padding:0!important}
.timer-grid a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--fg);text-decoration:none}
.timer-grid a:hover{border-color:var(--muted)}
.timer-grid a[aria-current="page"]{border-color:var(--accent)}
.timer-grid b{display:block;font-family:var(--pixel);font-weight:400;font-size:1.35rem}
.timer-grid span{color:var(--muted);font-size:.85rem}
details{border-top:1px solid var(--line);padding:14px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:1.02rem;color:var(--fg)}
details p{margin:10px 0 0}
.site-foot{max-width:1040px;margin:64px auto 0;padding-block:28px 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;color:var(--muted);font-size:.9rem}
.site-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.site-foot a{color:var(--muted)}
.prose{max-width:720px;margin:40px auto 0;min-height:60vh}
.prose h1{font-family:var(--pixel);font-weight:400;font-size:2.4rem;margin:0 0 18px}
.prose p,.prose li{color:#C9C4DE;font-size:1.05rem;line-height:1.7}
.app.focus~*{opacity:.08;transition:opacity .6s}