/* msdog: one sheet. Everything sits on the --u grid: 1920 wide on a desktop, 390 wide on a phone. */
@font-face{font-family:Gaegu;src:url(/font/gaegu-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Gaegu;src:url(/font/gaegu-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Figtree;src:url(/font/figtree-500.woff2) format("woff2");font-weight:500 700;font-display:swap}
:root{--u:calc(100vw/1920);--container:calc(1720*var(--u));--reading:calc(860*var(--u));--s1:calc(8*var(--u));--s2:calc(16*var(--u));--s3:calc(24*var(--u))}
html,body{margin:0;background:#FFFFFF;color:#000000;overflow-x:hidden}
body{position:relative;font:700 max(18px,calc(30*var(--u)))/1.25 Gaegu,cursive}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sheet{position:relative;width:100%;height:calc(1760*var(--u));overflow:hidden;background:#FFFFFF}
.sheet>*{position:absolute}
.contract{display:contents}
.contract>*{position:absolute}
.l img,.frame>img,.win>img,.win .alt img,.tongue>img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;user-select:none;-webkit-user-drag:none}
.f1,.f2{visibility:hidden}
.sheet[data-f="1"] .f0,.sheet[data-f="2"] .f0{visibility:hidden}
.sheet[data-f="1"] .f1,.sheet[data-f="2"] .f2{visibility:visible}
.l{pointer-events:none}
.grass,.grass2{aspect-ratio:13.9708}.grass2{display:none}
.sun{aspect-ratio:0.986}.sun>div{position:absolute;inset:0}.sun .shut{display:none}.sun.blink .open{display:none}.sun.blink .shut{display:block}
.l img.eye{inset:auto;height:auto;aspect-ratio:21/23}
.paint{z-index:5;touch-action:none;image-rendering:pixelated}
.tongue,.win,.frame,.pal,.hint{z-index:6}
.line{margin:0;font-size:max(18px,calc(44*var(--u)));line-height:1.15}
.hint{margin:0;font-size:max(16px,calc(34*var(--u)))}
.win-in{position:absolute;inset:9% 6% 9% 6%;display:flex;flex-direction:column;gap:var(--s1);align-items:flex-start;justify-content:center}
.win-label{margin:0;font-size:max(16px,calc(30*var(--u)))}
.addr{font:500 max(16px,calc(25*var(--u)))/1.25 Figtree,sans-serif;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;user-select:all;background:none;padding:0}
.win .alt{display:none}
.addr.is-off{opacity:1;color:#000000;cursor:auto}
.frame{display:block;position:relative;border:0;background:none;padding:0;font:inherit;color:#000000;text-decoration:none;cursor:pointer}
.frame>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.4em;white-space:nowrap}
.frame>span>span{display:inline}
.frame img[data-chart-mark],.frame>span img{position:static;width:1.2em;height:1.2em}
.sheet>.frame{position:absolute}
.copy{width:calc(170*var(--u));height:calc(66*var(--u));min-height:48px;min-width:96px}
.frame:hover{transform:translate(0,calc(-3*var(--u)))}
.frame:active{transform:translate(0,calc(3*var(--u)))}
.frame.is-off{opacity:.55}
.tongue{aspect-ratio:1.7789;display:block;color:#000000;text-decoration:none;transform-origin:50% 0;min-height:48px}
.lick{position:absolute;left:0;right:0;top:40%;bottom:12%;display:flex;align-items:center;justify-content:center;font-size:max(18px,calc(30*var(--u)));line-height:1.02;text-align:center;white-space:nowrap}
.lick img{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.18em}
.tongue:hover{animation:pant .34s steps(1) infinite}
.tongue:active{animation:none;transform:scaleY(.3)}
.tongue.is-off{opacity:1;filter:saturate(.75)}
@keyframes pant{0%{transform:scaleY(1)}50%{transform:scaleY(1.09)}}
.pal{display:grid;grid-template-columns:repeat(8,calc(62*var(--u)));grid-auto-rows:calc(62*var(--u));gap:0}
.blob{width:100%;height:100%;border:0;padding:0;margin:0;cursor:pointer;background:url(/img/l/blobs-0.webp) no-repeat;background-size:400% 400%;background-position:calc(var(--c)*33.333%) calc(var(--r)*33.333%)}
.sheet[data-f="1"] .blob{background-image:url(/img/l/blobs-1.webp)}
.sheet[data-f="2"] .blob{background-image:url(/img/l/blobs-2.webp)}
.blob:hover{transform:translate(0,calc(-4*var(--u)))}
.blob[aria-pressed="true"]{transform:translate(0,calc(-8*var(--u))) scale(1.14);z-index:1;position:relative}
.puddle{transform-origin:40% 50%;transform:scaleX(0);visibility:hidden}
.puddle.leak{visibility:visible;animation:leak 4.5s steps(1) forwards}
@keyframes leak{0%{transform:scaleX(.1)}15%{transform:scaleX(.3)}30%{transform:scaleX(.55)}45%{transform:scaleX(.8)}60%{transform:scaleX(1)}90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.tale{margin:0;font-size:max(30px,calc(64*var(--u)));line-height:1.1}
.risk{margin:calc(30*var(--u)) 0 0;font:500 max(16px,calc(24*var(--u)))/1.35 Figtree,sans-serif;color:#808080;max-width:var(--reading)}
.rub{position:absolute;left:0;top:0;width:100%;height:calc(1080*var(--u));z-index:9;pointer-events:none;image-rendering:pixelated;display:none}
a:focus-visible,button:focus-visible{outline:3px solid #0000FF;outline-offset:2px}
.grass{left:calc(-40*var(--u));top:calc(855*var(--u));width:calc(2000*var(--u));aspect-ratio:13.9708}
.dog{left:calc(-100*var(--u));top:calc(195*var(--u));width:calc(1420*var(--u));aspect-ratio:1.8119}
.cloud{left:calc(1010*var(--u));top:calc(20*var(--u));width:calc(240*var(--u));aspect-ratio:1.8254}
.sun{left:calc(1725*var(--u));top:calc(-130*var(--u));width:calc(300*var(--u));aspect-ratio:0.986}
.wordmark{left:calc(1300*var(--u));top:calc(70*var(--u));width:calc(520*var(--u));aspect-ratio:2.3164}
.ticker{left:calc(1340*var(--u));top:calc(290*var(--u));width:calc(290*var(--u));aspect-ratio:2.7077}
.line{left:calc(1290*var(--u));top:calc(410*var(--u));width:calc(600*var(--u))}
.win{left:calc(100*var(--u));top:calc(520*var(--u));width:calc(560*var(--u));height:calc(240*var(--u))}
.tongue{left:calc(815*var(--u));top:calc(560*var(--u));width:calc(310*var(--u));aspect-ratio:1.7789}
.x{left:calc(1180*var(--u));top:calc(545*var(--u));width:calc(225*var(--u));height:calc(92*var(--u))}
.chart{left:calc(1420*var(--u));top:calc(545*var(--u));width:calc(290*var(--u));height:calc(92*var(--u))}
.hint{left:calc(1180*var(--u));top:calc(640*var(--u));width:calc(600*var(--u))}
.pal{left:calc(1180*var(--u));top:calc(692*var(--u))}
.brush{left:calc(1690*var(--u));top:calc(690*var(--u));width:calc(210*var(--u));aspect-ratio:4.7451}
.over{left:calc(1180*var(--u));top:calc(824*var(--u));width:calc(170*var(--u));height:calc(76*var(--u))}
.save{left:calc(1360*var(--u));top:calc(824*var(--u));width:calc(170*var(--u));height:calc(76*var(--u))}
.house{left:calc(1540*var(--u));top:calc(825*var(--u));width:calc(140*var(--u));aspect-ratio:0.9753}
.tree{left:calc(1690*var(--u));top:calc(742*var(--u));width:calc(212*var(--u));aspect-ratio:0.8804}
.bone{left:calc(1160*var(--u));top:calc(906*var(--u));width:calc(110*var(--u));aspect-ratio:1.6152}
.puddle{left:calc(1400*var(--u));top:calc(952*var(--u));width:calc(330*var(--u));aspect-ratio:6.3536}
.paint{left:calc(0*var(--u));top:calc(0*var(--u));width:calc(1920*var(--u));height:calc(1080*var(--u))}
.lost{left:calc(80*var(--u));top:calc(1100*var(--u));width:calc(720*var(--u));aspect-ratio:1.7322}
.lore{left:calc(880*var(--u));top:calc(1110*var(--u));width:calc(980*var(--u))}
.prints{left:calc(1120*var(--u));top:calc(1550*var(--u));width:calc(800*var(--u));aspect-ratio:4.195}
@media (max-width:860px){
:root{--u:calc(100vw/390)}
body{font-size:calc(21*var(--u))}
.sheet{height:calc(1686*var(--u))}
.rub{height:calc(480*var(--u))}
.cloud,.brush{display:none}.grass2{display:block}
.line{font-size:calc(22*var(--u))}.hint{font-size:max(16px,calc(19*var(--u)))}
.win>img{display:none}.win .alt{display:block;position:absolute;inset:0}
.win-label,.addr{font-size:max(16px,calc(19*var(--u)))}
.win-in{inset:9% 7% 9% 7%}
.sheet>.frame{position:absolute}
.copy{width:calc(110*var(--u));height:calc(52*var(--u))}
.lick{font-size:max(16px,calc(19*var(--u)));top:40%;bottom:10%}
.pal{grid-template-columns:repeat(8,calc(45*var(--u)));grid-auto-rows:calc(45*var(--u))}
.tale{font-size:calc(34*var(--u))}.risk{font-size:max(16px,calc(17*var(--u)));margin-top:calc(16*var(--u))}
.frame>span{font-size:calc(21*var(--u))}
.grass{left:calc(-180*var(--u));top:calc(428*var(--u));width:calc(800*var(--u));aspect-ratio:13.9708}
.grass2{left:calc(-200*var(--u));top:calc(992*var(--u));width:calc(800*var(--u))}
.dog{left:calc(-210*var(--u));top:calc(158*var(--u));width:calc(560*var(--u));aspect-ratio:1.8119}
.sun{left:calc(300*var(--u));top:calc(-34*var(--u));width:calc(110*var(--u));aspect-ratio:0.986}
.wordmark{left:calc(10*var(--u));top:calc(8*var(--u));width:calc(220*var(--u));aspect-ratio:2.3164}
.ticker{left:calc(232*var(--u));top:calc(62*var(--u));width:calc(100*var(--u));aspect-ratio:2.7077}
.line{left:calc(14*var(--u));top:calc(104*var(--u));width:calc(362*var(--u))}
.win{left:calc(8*var(--u));top:calc(604*var(--u));width:calc(374*var(--u));height:calc(190*var(--u))}
.tongue{left:calc(122*var(--u));top:calc(302*var(--u));width:calc(180*var(--u));aspect-ratio:1.7789}
.x{left:calc(12*var(--u));top:calc(798*var(--u));width:calc(178*var(--u));height:calc(62*var(--u))}
.chart{left:calc(200*var(--u));top:calc(798*var(--u));width:calc(178*var(--u));height:calc(62*var(--u))}
.hint{left:calc(14*var(--u));top:calc(478*var(--u));width:calc(362*var(--u))}
.pal{left:calc(15*var(--u));top:calc(506*var(--u))}
.brush{left:calc(150*var(--u));top:calc(1000*var(--u));width:calc(0*var(--u));aspect-ratio:4.7451}
.over{left:calc(12*var(--u));top:calc(866*var(--u));width:calc(178*var(--u));height:calc(60*var(--u))}
.save{left:calc(200*var(--u));top:calc(866*var(--u));width:calc(178*var(--u));height:calc(60*var(--u))}
.house{left:calc(24*var(--u));top:calc(932*var(--u));width:calc(118*var(--u));aspect-ratio:0.9753}
.tree{left:calc(246*var(--u));top:calc(922*var(--u));width:calc(120*var(--u));aspect-ratio:0.8804}
.bone{left:calc(160*var(--u));top:calc(1002*var(--u));width:calc(70*var(--u));aspect-ratio:1.6152}
.puddle{left:calc(60*var(--u));top:calc(1050*var(--u));width:calc(170*var(--u));aspect-ratio:6.3536}
.paint{left:calc(0*var(--u));top:calc(158*var(--u));width:calc(390*var(--u));height:calc(320*var(--u))}
.lost{left:calc(15*var(--u));top:calc(1092*var(--u));width:calc(360*var(--u));aspect-ratio:1.7322}
.lore{left:calc(16*var(--u));top:calc(1314*var(--u));width:calc(358*var(--u))}
.prints{left:calc(-10*var(--u));top:calc(1566*var(--u));width:calc(420*var(--u));aspect-ratio:4.195}
}