@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap";:root{color:var(--cream);background:var(--ink);font-synthesis:none;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{touch-action:none;width:100vw;height:100vh;display:block}header,aside,nav,footer{z-index:2;position:fixed}header{pointer-events:none;top:30px;left:40px}.eyebrow{letter-spacing:3px;opacity:.7;margin:0 0 10px;font-size:10px}h1{letter-spacing:-2px;text-shadow:0 2px 20px #24262255;margin:0;font-family:Fraunces,Georgia,serif;font-size:44px}h1 span{letter-spacing:.3px;opacity:.8;margin-top:8px;font:400 13px DM Sans,sans-serif;display:block}aside{background:color-mix(in srgb, var(--dark) 53.3%, transparent);border:1px solid color-mix(in srgb, var(--cream) 13.3%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;align-items:center;gap:22px;padding:13px 20px;display:flex;top:35px;right:40px}#score{letter-spacing:5px;color:var(--accent);font-size:28px}aside strong{font-size:30px;font-weight:500}small{letter-spacing:1.5px;font-size:9px}aside small{font-size:8px;display:block}nav{gap:5px;display:flex;top:142px;left:40px}nav a{color:inherit;border:1px solid color-mix(in srgb, var(--cream) 26.7%, transparent);background:color-mix(in srgb, var(--dark) 26.7%, transparent);border-radius:20px;padding:9px 13px;font-size:11px;text-decoration:none}nav a.active{background:var(--cream);color:var(--wood)}footer{text-align:center;white-space:nowrap;background:color-mix(in srgb, var(--dark) 66.7%, transparent);border:1px solid color-mix(in srgb, var(--cream) 13.3%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:15px;padding:16px 25px;bottom:25px;left:50%;transform:translate(-50%)}footer b{font-family:Fraunces,Georgia,serif;font-size:19px}footer p{opacity:.8;margin:8px 0 12px;font-size:11px}.meter{background:color-mix(in srgb, var(--cream) 20%, transparent);border-radius:4px;width:240px;height:4px;margin:0 auto 8px;overflow:hidden}.meter i{background:var(--accent);width:0;height:100%;display:block}#message{text-align:center;text-shadow:0 2px 8px #222;font:600 30px Fraunces,Georgia,serif;position:fixed;top:25%;left:50%;transform:translate(-50%)}#message:empty{display:none}#restart{background:var(--cream);color:var(--wood);cursor:pointer;border:0;border-radius:24px;padding:12px 25px;position:fixed;top:36%;left:50%;transform:translate(-50%)}#stick,#touchThrow{display:none}@media (pointer:coarse){#stick,#touchThrow{background:color-mix(in srgb, var(--cream) 20%, transparent);border:1px solid color-mix(in srgb, var(--cream) 46.7%, transparent);width:88px;height:88px;color:inherit;touch-action:none;border-radius:50%;place-items:center;display:grid;position:fixed;bottom:155px}#stick{font-size:30px;left:25px}#touchThrow{font-size:11px;right:25px}}@media (width<=700px){header{top:20px;left:20px}h1{font-size:30px}aside{gap:8px;padding:8px;top:20px;right:16px}#score{letter-spacing:0;font-size:18px}nav{top:115px;left:20px}footer{white-space:normal;width:calc(100% - 24px);padding:12px;bottom:12px}footer p{line-height:1.6}}.inspection header,.inspection aside,.inspection nav,.inspection footer,.inspection #message,.inspection #stick,.inspection #touchThrow{display:none}body[data-direction=lantern] header{top:34px}body[data-direction=lantern] .eyebrow{color:var(--accent);opacity:1;letter-spacing:3.4px}body[data-direction=lantern] h1{letter-spacing:-1.8px;font-size:48px;font-weight:600}body[data-direction=lantern] h1 span{opacity:.6}body[data-direction=lantern] nav a{background:color-mix(in srgb, var(--ink) 65%, transparent);border-color:color-mix(in srgb, var(--cream) 15%, transparent);border-radius:5px}body[data-direction=lantern] nav a.active{background:var(--cream);color:var(--ink)}body[data-direction=lantern] aside{border-color:color-mix(in srgb, var(--accent) 30%, transparent);border-radius:6px}body[data-direction=lantern] footer{background:color-mix(in srgb, var(--ink) 82%, transparent);border-color:color-mix(in srgb, var(--accent) 25%, transparent);border-radius:6px}body[data-direction=lantern] footer b{color:var(--cream);font-weight:500}@media (width<=700px){body[data-direction=lantern] h1{font-size:30px}nav{gap:4px}nav a{padding:8px;font-size:10px}}body[data-direction=paper]{color:var(--dark)}body[data-direction=paper] .eyebrow{color:var(--accent);opacity:1}body[data-direction=paper] h1{color:var(--dark);text-shadow:2px 3px 0 var(--cream)}body[data-direction=paper] h1 span{opacity:.75}body[data-direction=paper] nav a{background:color-mix(in srgb, var(--cream) 88%, transparent);border:1px solid color-mix(in srgb, var(--kraft) 60%, transparent);box-shadow:2px 2px 0 color-mix(in srgb, var(--kraft) 55%, transparent);color:var(--dark);border-radius:3px}body[data-direction=paper] nav a.active{background:var(--accent);color:var(--cream);border-color:var(--accent)}body[data-direction=paper] aside,body[data-direction=paper] footer{background:color-mix(in srgb, var(--cream) 90%, transparent);border:1px solid color-mix(in srgb, var(--kraft) 60%, transparent);box-shadow:3px 4px 0 color-mix(in srgb, var(--kraft) 55%, transparent);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--dark);border-radius:4px}body[data-direction=paper] aside{transform:rotate(1.2deg)}body[data-direction=paper] footer{transform:translate(-50%)rotate(-.6deg)}body[data-direction=paper] footer b{color:var(--accent)}body[data-direction=paper] .meter{background:color-mix(in srgb, var(--kraft) 40%, transparent)}body[data-direction=paper] #message{color:var(--cream);text-shadow:2px 2px 0 var(--accent), 0 2px 12px #0006}body[data-direction=paper] #restart{background:var(--accent);color:var(--cream);box-shadow:3px 3px 0 var(--dark)}body[data-direction=toy]{color:var(--dark)}body[data-direction=toy] .eyebrow{color:var(--dark);opacity:1;font-weight:700}body[data-direction=toy] h1{color:var(--cream);text-shadow:3px 3px 0 var(--dark), 0 4px 18px #0004;font-weight:700}body[data-direction=toy] h1 span{color:var(--dark);opacity:.9;text-shadow:none;font-weight:600}body[data-direction=toy] nav a{background:var(--cream);border:2px solid var(--dark);box-shadow:0 3px 0 var(--dark);color:var(--dark);border-radius:999px;font-weight:600}body[data-direction=toy] nav a.active{background:var(--pop);color:var(--dark)}body[data-direction=toy] aside,body[data-direction=toy] footer{background:var(--cream);border:2px solid var(--dark);box-shadow:0 5px 0 var(--dark);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--dark);border-radius:22px}body[data-direction=toy] #score,body[data-direction=toy] footer b{color:var(--accent)}body[data-direction=toy] .meter{background:color-mix(in srgb, var(--dark) 15%, transparent)}body[data-direction=toy] .meter i{background:var(--pop)}body[data-direction=toy] #message{color:var(--pop);text-shadow:3px 3px 0 var(--dark), 0 2px 12px #0006}body[data-direction=toy] #restart{background:var(--pop);color:var(--dark);border:2px solid var(--dark);box-shadow:0 4px 0 var(--dark);font-weight:700}