:root{color-scheme:light;--paper:#f7f5ed;--ink:#453a30;--muted:#8c8274;--accent:#be4a32}*{box-sizing:border-box}body{overflow-x:clip;margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}.page{padding:0 4%;margin:auto}header{height:110px;display:flex;justify-content:space-between;align-items:center}.brand{color:var(--ink);display:block;transform:rotate(-6deg)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}.share{border:0;background:none;font-size:12px;padding:14px 0 14px 18px}.share span{padding-left:10px;color:var(--accent)}main{min-height:calc(100svh - 110px);display:flex;flex-direction:column;justify-content:center;padding:15px 0 38px}.intro{text-align:center}h1{font-size:16px;font-weight:400;margin:0 0 9px;letter-spacing:-.3px}.intro p{font-size:12px;color:var(--muted);margin:0}.playground{width:100vw;margin:60px 0 0 calc(50% - 50vw)}#dog{width:100%;height:255px;display:block;border:0;background:none;padding:0;touch-action:manipulation}#drawing{display:block;width:100%;height:100%;overflow:visible}#dog-note{text-align:left;margin:13px 0 0 73px;font-size:11px;color:var(--muted);height:18px}.controls{width:240px;max-width:80%;margin:44px auto 0}.slider-title{display:flex;justify-content:space-between;font-size:11px}.slider-title output{color:var(--muted)}.slider-row{display:flex;gap:16px;align-items:center;margin-top:22px;color:var(--muted);font-size:15px}input[type=range]{appearance:none;width:100%;height:2px;background:#cfc5b7;cursor:ew-resize;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:24px;border-radius:7px;background:var(--ink);border:3px solid var(--paper)}input[type=range]::-moz-range-thumb{width:10px;height:18px;border-radius:5px;background:var(--ink);border:3px solid var(--paper)}footer{text-align:center;font-size:10px;color:#a69c8f;padding:22px 0 28px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,12px);opacity:0;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:12px;max-width:90%;text-align:center;pointer-events:none;transition:opacity .15s,transform .15s}.toast.show{opacity:1;transform:translate(-50%,0)}:focus-visible{outline:2px solid var(--accent);outline-offset:6px}#head{transform-origin:30px 125px}#tail{transform-box:view-box}#ear{transform-origin:27px 77px}.wagging #tail{animation:wag .17s ease-in-out 9 alternate}.wagging #ear{animation:ear .28s ease-in-out 5 alternate}.wagging #heart{opacity:1}#heart{opacity:0;transition:opacity .2s}@keyframes wag{from{transform:rotate(-12deg)}to{transform:rotate(19deg)}}@keyframes ear{to{transform:rotate(-9deg)}}@media(max-width:650px){header{height:90px}.brand svg{width:82px}.share{font-size:11px}main{min-height:calc(100svh - 90px);padding-top:15px}.playground{margin-top:38px}#dog-note{margin-left:30px}.controls{margin-top:38px}footer{font-size:9px;padding:20px 0 25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.good-boy{text-align:center;margin:22px 0 0;color:var(--muted);font-size:10px;letter-spacing:.2px}

.credit{font-size:10px;color:var(--muted);padding:16px 0 22px}.credit a{color:var(--ink);text-underline-offset:3px}main{min-height:calc(100svh - 160px)}@media(max-width:650px){main{min-height:calc(100svh - 140px)}}

/* Quiet resting movements. Each paw stays planted. */
#torso{transform-origin:0 173px;animation:breathe 4.8s ease-in-out infinite}
#eyes{transform-origin:9px 85px;animation:blink 7.4s infinite}
@keyframes breathe{50%{transform:scaleY(1.035)}}
@keyframes blink{0%,42%,45%,87%,90%,100%{transform:scaleY(1)}43%,44%,88%,89%{transform:scaleY(.08)}}
.head-pat #eyes{animation:none;transform:scaleY(.08)}
.head-pat #ear{animation:ear .4s ease-in-out 4 alternate}
#dog{touch-action:none;cursor:grab;user-select:none}
#dog.dragging{cursor:grabbing;touch-action:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-height:750px){header{height:78px}main{min-height:calc(100svh - 128px);padding:8px 0 18px}.playground{margin-top:16px}.controls{margin-top:18px}.good-boy{margin-top:15px}}
@media(prefers-reduced-motion:reduce){#torso,#eyes{animation:none!important}}

/* Leave room above and below the tube for its arc. */
.playground{margin-top:82px;margin-bottom:75px}
#dog-note{position:relative;top:65px}
@media(max-height:750px){.playground{margin-top:65px;margin-bottom:55px}#dog-note{top:45px}}

#pose-note{margin:0;text-align:center;min-height:14px;font-size:10px;color:var(--muted)}
.front-leg{transform-box:view-box}


@keyframes frontstep{from{transform:rotate(-13deg) translateX(-3px)}to{transform:rotate(13deg) translateX(3px)}}
@media(max-height:480px){header{height:54px}.brand svg{height:38px}.intro{padding-top:5px}main{min-height:calc(100svh - 100px);padding:0 0 5px;justify-content:flex-start}.playground{margin-top:0;margin-bottom:12px}#dog{height:255px}#dog-note{top:0;margin-top:0;font-size:10px}.controls{margin-top:14px;width:220px}.slider-row{margin-top:12px}.good-boy{margin-top:14px}.credit{padding:12px 0}#pose-note{margin:3px 0}}

@media(max-height:480px){#dog{height:175px}.controls{margin-top:8px}.good-boy{margin-top:8px}.intro h1{font-size:14px}.credit{padding:9px 0}}

/* Keep all copy below the animation, including during phone rotation. */
.intro{margin:20px 0 18px;position:relative}
.playground{margin-top:110px;margin-bottom:95px}
@media(max-height:750px){.playground{margin-top:100px;margin-bottom:80px}}
@media(max-height:480px){.playground{margin-top:20px;margin-bottom:20px}.intro{margin:12px 0}.controls{margin-top:12px}#dog-note{top:0}}

.bark{display:block;margin:20px auto 0;padding:10px 15px;border:1px solid #d8d0c3;background:none;border-radius:20px;font-size:11px;min-height:40px}.bark span{margin-left:8px;color:var(--accent)}
.sleepy #eyes{animation:none;transform:scaleY(.4)}
.tilting #head{animation:happytilt 1.8s ease-in-out;transform-origin:30px 125px}
@keyframes happytilt{0%,100%{transform:rotate(0)}25%,70%{transform:rotate(-7deg)}}
@media(max-height:480px){.bark{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.tilting #head{animation:none}}

.playground{position:relative}
.toast{position:absolute;top:var(--reaction-top,0px);bottom:auto;z-index:2;max-width:min(320px,85vw);width:max-content;border-radius:13px;transform:translate(-50%,6px)}
.toast.show{transform:translate(-50%,0)}
.toast:after{content:'';position:absolute;bottom:-5px;left:50%;width:10px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
#shadow{filter:blur(1px)}

/* Small expressions, triggered by a pat. */
#pose-note:empty{min-height:0;margin:0}
#nose{transform-origin:-47px 95px}
.nose-twitch #nose{animation:nosetwitch .18s ease-in-out 4 alternate}
@keyframes nosetwitch{to{transform:translateY(-1.5px) rotate(-4deg)}}
@keyframes happytilt{0%,100%{transform:rotate(0)}20%,65%{transform:rotate(-9deg)}80%{transform:rotate(2deg)}}
.sleepy #eyes{transform:scaleY(.3)}
.sleepy #head{transform:rotate(-3deg)}
@media(prefers-reduced-motion:reduce){.nose-twitch #nose{animation:none}.sleepy #head{transform:none}}

/* Keep the standing dog visible on short phone screens. */
@media(max-height:480px){#dog{height:255px}.playground{margin-top:0;margin-bottom:20px}}

/* The length control is the first content below Otto. */
.playground{margin-bottom:0;padding-bottom:var(--bend-room,0px)}
.controls{margin:14px auto 0}
.intro{margin:30px auto 0;padding:0 18px;text-align:center}
.intro h1,.intro .good-boy{font-size:16px;font-weight:400;line-height:1.5;letter-spacing:-.2px;color:var(--ink)}
.intro h1{margin:0}.intro .good-boy{margin:5px 0 0}
#dog-note{position:static;top:auto;text-align:center;height:auto;min-height:17px;margin:14px 15px 0;font-size:11px}
.bark{margin-top:16px}
@media(max-width:650px){.intro h1,.intro .good-boy{font-size:14px}.intro{margin-top:26px}}
@media(max-height:480px){header{height:46px}.playground{margin-top:0;margin-bottom:0}.controls{margin-top:8px}.slider-row{margin-top:12px}.intro{margin-top:22px}.intro h1,.intro .good-boy{font-size:14px}#dog-note{margin-top:12px}.bark{margin-top:12px}}

.coat-picker{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:22px 12px 0}
.coat-picker button{display:flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:20px;background:none;padding:10px 12px;font-size:11px;min-height:44px}
.coat-picker button[aria-pressed=true]{border-color:#b3a592;background:#eee9de}
.swatch{width:14px;height:14px;border-radius:50%;border:1px solid #0002;flex-shrink:0}
.swatch.red{background:#965335}.swatch.black-tan{background:linear-gradient(135deg,#302d2a 55%,#bf8951 55%)}.swatch.chocolate-tan{background:linear-gradient(135deg,#65412f 55%,#c8945c 55%)}
@media(max-height:480px){.coat-picker{margin-top:16px}}