@font-face{font-family:Comic Neue;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/comic-neue-latin-400-normal.woff2) format("woff2")}@font-face{font-family:Comic Neue;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/comic-neue-latin-700-normal.woff2) format("woff2")}:root{--bg: #f7f4ef;--ink: #27262b;--muted: #bdb5a9;--node: #e8e2d6;--active: #f4b55f;--green: #2daa62;--blue: #3f69f6;--panel: rgba(255, 255, 255, .92);--shadow: 0 14px 40px rgba(65, 44, 15, .12);--node-active: var(--active);--line: var(--node);--line-active: var(--active);--gold: var(--active);--accent: var(--blue);--accent-2: var(--green)}*{box-sizing:border-box}button,a,[role=button]{touch-action:manipulation}body{margin:0;min-height:100vh;font-family:Trebuchet MS,Avenir Next,sans-serif;color:var(--ink);-webkit-user-select:none;-webkit-touch-callout:none;user-select:none}input,textarea{-webkit-user-select:text;user-select:text}.app{width:min(100%,780px);margin:0 auto;padding:24px 20px 36px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.icon{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fffdf9;color:var(--ink);font-family:inherit;font-size:26px;line-height:1;text-decoration:none;cursor:pointer;box-shadow:0 2px #412c0f1f,0 6px 14px #412c0f17;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.icon:hover,.icon:focus-visible{background:#fff;transform:translateY(-2px);box-shadow:0 4px #412c0f1f,0 10px 20px #412c0f1c}.icon:active{transform:translateY(1px);box-shadow:0 1px #412c0f1f,0 3px 8px #412c0f17}.icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.9)}70%{transform:translateY(-2px) scale(1.03)}}.topbar>a.icon:first-child,.topbar>#help-open{position:relative}.topbar>a.icon:first-child>svg{opacity:0}.topbar>#help-open{color:transparent;font-size:0}.topbar>a.icon:first-child:after,.topbar>#help-open:after{content:"";position:absolute;left:50%;top:50%;width:25px;height:25px;background:center / contain no-repeat;transform:translate(-50%,-50%);pointer-events:none}.topbar>a.icon:first-child:after{background-image:url(../assets/zanagrams-concept/nav-back-handdrawn-v2.webp)}.topbar>#help-open:after{background-image:url(../assets/zanagrams-concept/nav-help-handdrawn.webp)}@media(max-width:640px){.topbar>a.icon:first-child:after,.topbar>#help-open:after{width:23px;height:23px}}#level-nav{display:inline-flex;align-items:center;gap:8px}.nav-btn{border:0;background:#fffdf9;color:#27262b;font-family:inherit;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 2px #412c0f1f;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.nav-btn:hover,.nav-btn:focus-visible{background:#fff;transform:translateY(-1px);box-shadow:0 3px #412c0f1f}.nav-btn:active{transform:translateY(1px);box-shadow:0 0 #412c0f1f}#nav-prev,#nav-next{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;font-size:18px}.nav-pos{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;min-width:90px;padding:0 18px;border-radius:999px;font-size:16px;letter-spacing:.02em}.nav-pos.done{background:#d8f4df;color:#176c3c;box-shadow:0 2px #2daa6238}.nav-pos.done:hover,.nav-pos.done:focus-visible{background:#cdefd6;box-shadow:0 3px #2daa6238}.nav-sub{font-size:12px;font-weight:800;opacity:.55}.nav-num,.nav-pos .nav-sub{display:inline-block;transform:translateY(1px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.doodle-quest .hint-control{position:relative;display:inline-grid;place-items:center;flex:0 0 48px;width:48px!important;min-width:48px!important;height:48px!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent url(../../assets/zanagrams-concept/doodle-round-button.webp) center / contain no-repeat!important;color:var(--ink);box-shadow:none!important;filter:drop-shadow(2px 4px 3px rgba(48,35,18,.2));cursor:pointer;transition:transform .12s ease,filter .12s ease}body.doodle-quest .corner-tool.hint-control{position:absolute}body.doodle-quest .hint-control:before{content:"";width:25px;height:25px;background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M8.5 14.5C7 13.4 6 11.6 6 9.5a6 6 0 0 1 12 0c0 2.1-1 3.9-2.5 5-.9.7-1.3 1.5-1.3 2.5H9.8c0-1-.4-1.8-1.3-2.5Z'/%3E%3Cpath d='M12 1V0M4.5 3.5l-1-1M19.5 3.5l1-1M3 10H1M23 10h-2'/%3E%3C/svg%3E");transform:translateY(-1px) rotate(-3deg)}body.doodle-quest .hint-control--target:before{width:24px;height:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 1v3M12 20v3M1 12h3M20 12h3'/%3E%3C/svg%3E")}body.doodle-quest .hint-control:hover,body.doodle-quest .hint-control:focus-visible{background:transparent url(../../assets/zanagrams-concept/doodle-round-button.webp) center / contain no-repeat!important;transform:translateY(-2px) rotate(-2deg);filter:drop-shadow(3px 6px 4px rgba(48,35,18,.24));outline:3px solid rgba(247,201,40,.5);outline-offset:2px}body.doodle-quest .hint-control:active{transform:translateY(1px) rotate(1deg);filter:drop-shadow(1px 2px 2px rgba(48,35,18,.18))}body.doodle-quest .hint-control.active{transform:rotate(-3deg) scale(1.08);filter:drop-shadow(0 0 6px var(--dq-yellow, var(--yellow, #f7c928)))}body.doodle-quest .hint-control:disabled{opacity:.42;filter:grayscale(.5);cursor:not-allowed;transform:none}body.doodle-quest .hint-control .hint-count{position:absolute;right:-2px;top:-2px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border:2px solid var(--ink);border-radius:999px;background:var(--dq-yellow, var(--yellow, #f7c928));color:var(--ink);box-shadow:1px 2px #0a0a0a2e;font-family:inherit;font-size:11px;font-weight:900;line-height:1}@media(max-width:640px){body.doodle-quest .hint-control{flex-basis:43px;width:43px!important;min-width:43px!important;height:43px!important}body.doodle-quest .hint-control:before{width:22px;height:22px}}