/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body{margin:0;background:#0c0e18}
a{color:#ffc94a}a:hover{color:#ffe08f}
.hp{--bg:#0c0e18;--fg:#f2eee4;--muted:#9c9ebc;--line:#f2eee4;--soft:rgba(242,238,228,.08);--dim:rgba(242,238,228,.3);--field:#05060c;--rim:#f2eee4;--star:#f2eee4;--sky:.5;--moon:#f0eee6;--metal:#4a4f7e;--metal2:#2c3058;--acc:#ffc94a;--acc-work:#ffc94a}
.hp.theme-light{--bg:#f2eee4;--fg:#12131f;--muted:#55577a;--line:#12131f;--soft:rgba(18,19,31,.06);--dim:rgba(18,19,31,.28);--field:#0c0e18;--rim:#12131f;--star:#12131f;--sky:.22;--moon:#d6a72c}
.hp.ph-short{--acc:#8ea2ec}
.hp.ph-long{--acc:#78dc82}
.hp button,.hp input{font-family:inherit}
.hp button:focus-visible,.hp input:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.hp input[type=number]::-webkit-inner-spin-button,.hp input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.hp input[type=number]{-moz-appearance:textfield;appearance:textfield}
.hp .hp-ic{cursor:pointer;transition:background-color .15s ease,transform .15s ease}
.hp .hp-ic:hover{background-color:var(--soft)}
.hp .hp-ic:active{transform:scale(.94)}
.hp .hp-go{cursor:pointer;transition:transform .15s ease,filter .15s ease}
.hp .hp-go:hover{filter:brightness(1.07)}
.hp .hp-go:active{transform:scale(.95)}
.hp .sky{background-image:radial-gradient(1.3px 1.3px at 20px 30px,var(--star) 50%,transparent 60%),radial-gradient(1px 1px at 33px 110px,var(--star) 50%,transparent 60%),radial-gradient(1px 1px at 120px 80px,var(--star) 50%,transparent 60%),radial-gradient(1.5px 1.5px at 60px 150px,var(--star) 50%,transparent 60%),radial-gradient(1px 1px at 200px 40px,var(--star) 50%,transparent 60%),radial-gradient(1px 1px at 90px 260px,var(--star) 50%,transparent 60%),radial-gradient(1.2px 1.2px at 250px 300px,var(--star) 50%,transparent 60%),radial-gradient(1.8px 1.8px at 300px 210px,var(--star) 50%,transparent 60%);background-size:180px 180px,150px 150px,230px 230px,290px 290px,330px 330px,390px 390px,410px 410px,470px 470px;opacity:var(--sky)}
.hp .f-field{fill:var(--field)}
.hp .s-rim{stroke:var(--rim)}
.hp .f-acc{fill:var(--acc)}
.hp .s-acc{stroke:var(--acc)}
.hp .f-moon{fill:var(--moon)}
.hp .f-metal{fill:var(--metal)}
.hp .f-metal2{fill:var(--metal2)}
.hp .s-legs{stroke:var(--muted)}
.hp .obj{display:none}
.hp.ph-work .obj-work,.hp.ph-short .obj-short,.hp.ph-long .obj-long{display:inline}
.hp.pose-awake .pz{display:none}
.hp.pose-asleep .pa{display:none}
.hp .eyes-shut{opacity:0}
.hp .slit-narrow{opacity:0}
.hp .bub{opacity:0}
.hp .pa-dog,.hp .pa-cat,.hp .pz-dog,.hp .pz-cat{transition:transform .25s ease}
.hp.kiss .pa-dog{transform:translateX(2px)}
.hp.kiss .pa-cat{transform:translateX(-2px)}
.hp.kiss .pz-dog{transform:translateX(3px)}
.hp.kiss .pz-cat{transform:translateX(-3px)}
.hp.kiss .eyes-shut{opacity:1 !important;animation:none !important}
.hp.kiss .bub-a{animation:hpBubA 1.1s linear forwards}
.hp.kiss .bub-z{animation:hpBubZ .7s linear forwards}
.hp.kiss .bub1{animation-delay:.28s}
.hp.kiss .bub2{animation-delay:.445s}
.hp.kiss .bub3{animation-delay:.61s}
.hp .tube{transform-box:view-box;transition:transform 1.2s cubic-bezier(.5,0,.2,1)}
.hp .sct{transform-origin:100px 74px;transform:rotate(-38deg)}
.hp .ref{transform-origin:98px 104px;transform:rotate(30deg)}
.hp.pose-asleep .sct{transform:rotate(-10deg)}
.hp.pose-asleep .ref{transform:rotate(8deg)}
.hp .paw *{fill:none;stroke:var(--dim);stroke-width:1.5}
.hp .paw.done *{fill:var(--acc-work);stroke:var(--line)}
.hp .paw.cur *{fill:none;stroke:var(--acc);stroke-width:2.2}
.hp .paw{transform-origin:center}
@keyframes hpLid{0%,91.9%{opacity:0}92%,93.8%{opacity:1}93.9%,95.6%{opacity:0}95.7%,97.4%{opacity:1}97.5%,100%{opacity:0}}
@keyframes hpGazeDog{0%,79.9%{transform:translateX(0)}80%,88.9%{transform:translateX(1px)}89%,100%{transform:translateX(0)}}
@keyframes hpGazeCat{0%,79.9%{transform:translateX(0)}80%,88.9%{transform:translateX(-1px)}89%,100%{transform:translateX(0)}}
@keyframes hpNarrowOn{0%,79.9%{opacity:0}80%,88.9%{opacity:1}89%,100%{opacity:0}}
@keyframes hpNarrowOff{0%,79.9%{opacity:1}80%,88.9%{opacity:0}89%,100%{opacity:1}}
@keyframes hpBeat{0%,86%{transform:scale(1)}89%{transform:scale(1.16)}93%,100%{transform:scale(1)}}
@keyframes hpBubA{0%{opacity:1;transform:translateY(0);fill:#e84c70}55%{fill:#e84c70}56%{fill:#8c344a}98%{opacity:1;transform:translateY(-19px);fill:#8c344a}100%{opacity:0;transform:translateY(-19px);fill:#8c344a}}
@keyframes hpBubZ{0%{opacity:1;transform:translateY(0);fill:#e84c70}40%{fill:#e84c70}41%{fill:#8c344a}97%{opacity:1;transform:translateY(-11px);fill:#8c344a}100%{opacity:0;transform:translateY(-11px);fill:#8c344a}}
@keyframes hpTw{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes hpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.anim .eyes-shut{animation:hpLid 7.3s infinite}
.anim .dog-glint{animation:hpGazeDog 15s infinite}
.anim .cat-slits{animation:hpGazeCat 15s infinite}
.anim .slit-narrow{animation:hpNarrowOn 15s infinite}
.anim .slit-thin{animation:hpNarrowOff 15s infinite}
.anim .heart-a{transform-box:view-box;transform-origin:59.5px 22.5px;animation:hpBeat 4.2s infinite}
.anim .heart-z{transform-box:view-box;transform-origin:94.5px 14.5px;animation:hpBeat 4.2s infinite}
.anim .tw{animation:hpTw 3.8s ease-in-out infinite}
.anim.running .paw.cur{animation:hpPulse 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hp *{animation:none !important;transition:none !important}}

/* Layout. --dial drives the dial, the clock text and the scene around it. */
.hp{--dial:min(440px,80vw)}
.hp-root{position:relative;box-sizing:border-box;min-height:100vh;min-height:100svh;padding:20px clamp(16px,4vw,40px) 56px;overflow:hidden}
.hp-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:980px;margin:0 auto}
.hp-main{position:relative;width:100%;max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hp-scene{position:relative;width:100%;display:flex;justify-content:center;margin-top:12px}
.hp-dial{position:relative;z-index:1;width:var(--dial);margin-top:calc(var(--dial) * .227)}
.hp-side{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.hp-ctrl{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:32px}

/* Settings: one row per value, label left, big -/+ stepper right */
.hp-set{display:flex;flex-direction:column;gap:6px;width:100%;max-width:380px;margin-top:40px}
.hp-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:8px}
.hp-row-l{display:flex;flex-direction:column;line-height:1.2}
.hp-row-n{font-size:16px;font-weight:700}
.hp-row-u{font-size:13px;color:var(--muted)}
.hp .hp-step{width:48px;height:48px;border-radius:50%;border:2px solid var(--dim);background:transparent;color:var(--fg);display:flex;align-items:center;justify-content:center;padding:0}
.hp .hp-step svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.hp .hp-num{width:72px;height:48px;box-sizing:border-box;border:0;border-bottom:2px solid var(--dim);border-radius:0;background:transparent;color:var(--fg);font-size:32px;font-weight:800;line-height:1;text-align:center;padding:0;font-variant-numeric:tabular-nums}
@media (pointer:coarse){.hp .hp-step{width:56px;height:56px}.hp-row{gap:10px}}

/* Landscape: dial left, controls + settings right, sized to fit the viewport without scrolling */
@media (min-width:720px) and (orientation:landscape){
  .hp{--dial:min(460px,(100vw - 460px) / 1.4,(100vh - 130px) / 1.25);--dial:min(460px,(100vw - 460px) / 1.4,(100svh - 130px) / 1.25)}
  .hp-root{display:flex;flex-direction:column;padding-bottom:20px}
  .hp-head{max-width:calc(var(--dial) * 1.4 + 360px)}
  .hp-main{flex:1;display:grid;grid-template-columns:auto 320px;column-gap:40px;align-items:center;justify-content:center;max-width:calc(var(--dial) * 1.4 + 360px)}
  .hp-scene{width:calc(var(--dial) * 1.4);margin-top:0}
  .hp-ctrl{margin-top:0}
  .hp-set{margin-top:28px}
}
/* Short landscape screens (phones on their side): tighter steppers, columns aligned to the top */
@media (min-width:720px) and (orientation:landscape) and (max-height:500px){
  .hp-main{align-items:start}
  .hp .hp-step{width:44px;height:44px}
  .hp .hp-num{height:44px;font-size:26px}
  .hp-set{gap:2px;margin-top:16px}
}