: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)}}