:root{--sky: #6fbdf0;--sky-deep: #3f97d8;--goo: #8fd62a;--goo-light: #c8f45c;--goo-dark: #5a9a12;--olive: #2f4a0b;--olive-soft: #4b6b17;--cream: #fff4d6;--ink: #1d2a07;--radius: 22px;--font: "Pixelify Sans", ui-monospace, "Courier New", monospace;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font);color:var(--ink);background-color:var(--sky);background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.5px),linear-gradient(180deg,#5fb1ec,#8fd0f6);background-size:6px 6px,100% 100%;background-attachment:fixed;text-transform:lowercase;-webkit-font-smoothing:antialiased;overflow-x:hidden}button,input{font:inherit;text-transform:lowercase}kbd{font-family:var(--font);font-size:.78em;display:inline-block;padding:0 .35em;margin:0 .1em;border:2px solid currentColor;border-radius:5px;line-height:1.25;background:#ffffff59}:focus-visible{outline:3px solid var(--cream);outline-offset:2px;box-shadow:0 0 0 7px var(--olive)}.app{max-width:1320px;margin:0 auto;padding:12px 16px 24px;display:flex;flex-direction:column;gap:12px;min-height:100dvh}.top{display:flex;align-items:center;justify-content:space-between;gap:12px}.logo{margin:0;font-family:"Rubik Wet Paint",var(--font);font-weight:400;font-size:clamp(30px,5vw,46px);line-height:1;color:var(--goo);letter-spacing:.02em;text-shadow:3px 0 0 var(--olive),-3px 0 0 var(--olive),0 3px 0 var(--olive),0 -3px 0 var(--olive),2px 2px 0 var(--olive),-2px 2px 0 var(--olive),2px -2px 0 var(--olive),-2px -2px 0 var(--olive),0 7px 0 var(--olive)}.top-actions{display:flex;gap:8px}.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:3px solid var(--olive);border-radius:12px;background:var(--cream);color:var(--ink);font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 4px 0 var(--olive);transition:transform .08s,box-shadow .08s}.icon-chip{padding:7px 11px;text-decoration:none}.icon-chip:hover{background:var(--goo-light)}.chip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--olive)}.chip[aria-pressed=true],.chip[aria-expanded=true]{background:var(--goo-light)}.spk{width:12px;height:12px;background:var(--olive);clip-path:polygon(0 30%,35% 30%,75% 0,75% 100%,35% 70%,0 70%);opacity:.45}.spk.on{opacity:1}.ca-bar{display:flex;align-items:center;gap:8px;min-width:0;width:fit-content;max-width:100%;margin:0 auto;padding:5px 6px 5px 12px;background:var(--cream);border:3px solid var(--olive);border-radius:14px;box-shadow:0 4px 0 var(--olive)}.ca-label{flex:none;padding:1px 7px;border-radius:6px;background:var(--goo);border:2px solid var(--olive);font-weight:700;font-size:14px}.ca-value{display:flex;flex:1;min-width:0;padding:4px 2px;border:0;background:none;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;text-transform:none;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:copy;border-radius:6px}.ca-head{min-width:0;overflow:hidden;text-overflow:ellipsis}.ca-tail{flex:none}.ca-value:hover{background:#8fd62a40}.ca-copy{flex:none;min-width:72px;padding:5px 12px;border:3px solid var(--olive);border-radius:10px;background:var(--goo-light);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 3px 0 var(--olive);transition:transform .08s,box-shadow .08s}.ca-copy:active{transform:translateY(2px);box-shadow:0 1px 0 var(--olive)}.ca-copy.done{background:var(--goo)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.goo-panel{position:relative;background:var(--goo);border:3px solid var(--olive);border-radius:var(--radius);box-shadow:inset 0 4px #ffffff59,inset 0 -6px #2f4a0b40,0 6px 0 var(--olive);background-image:radial-gradient(circle at 18% 12%,rgba(240,255,196,.55) 0 6px,transparent 7px),radial-gradient(circle at 26% 22%,rgba(240,255,196,.4) 0 3px,transparent 4px),linear-gradient(180deg,var(--goo-light),var(--goo) 40%)}.goo-panel:after{content:"";position:absolute;left:14%;bottom:-18px;width:70%;height:22px;pointer-events:none;background:radial-gradient(circle at 8% 70%,var(--goo) 0 6px,transparent 6.5px),radial-gradient(circle at 46% 80%,var(--goo) 0 5px,transparent 5.5px),radial-gradient(circle at 88% 60%,var(--goo) 0 7px,transparent 7.5px),linear-gradient(var(--goo),var(--goo)) 6.5% 0 / 9px 14px no-repeat,linear-gradient(var(--goo),var(--goo)) 45.5% 0 / 7px 16px no-repeat,linear-gradient(var(--goo),var(--goo)) 87.5% 0 / 11px 10px no-repeat;filter:drop-shadow(0 2px 0 var(--olive)) drop-shadow(2px 0 0 var(--olive)) drop-shadow(-2px 0 0 var(--olive))}.about{display:flex;gap:14px;align-items:center;padding:12px 16px;margin-bottom:8px}.about[hidden]{display:none}.about.open{animation:ooze .35s cubic-bezier(.3,1.6,.5,1)}.about img{width:72px;height:72px;border:3px solid var(--olive);border-radius:14px;image-rendering:pixelated;flex:none}.about-lede{margin:0 0 6px;font-size:19px;font-weight:700}.keys{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px}@keyframes ooze{0%{transform:scaleY(.6);opacity:0}to{transform:scaleY(1);opacity:1}}.main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;flex:1}.stage-wrap{min-width:0}.stage{position:relative;width:100%;aspect-ratio:16 / 10;max-height:calc(100dvh - 120px);min-height:320px;border:4px solid var(--olive);border-radius:26px;overflow:hidden;background:var(--sky);box-shadow:0 7px 0 var(--olive)}.stage.is-focused{box-shadow:0 7px 0 var(--olive),0 0 0 4px var(--cream),0 0 0 8px var(--olive)}.stage-canvas{display:block;width:100%;height:100%;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;outline:none;box-shadow:none}.stage-canvas:focus-visible{outline:none;box-shadow:none}.bubble{position:absolute;left:0;top:0;max-width:220px;padding:6px 12px 7px;background:var(--cream);border:3px solid var(--olive);border-radius:14px;font-size:16px;font-weight:700;white-space:nowrap;pointer-events:none;box-shadow:0 3px 0 var(--olive);will-change:transform}.bubble:after{content:"";position:absolute;left:50%;bottom:-11px;width:14px;height:14px;background:var(--cream);border-right:3px solid var(--olive);border-bottom:3px solid var(--olive);transform:translate(-50%) rotate(45deg)}.focus-hint{position:absolute;left:50%;top:14px;transform:translate(-50%);padding:6px 14px;border:3px solid var(--olive);border-radius:12px;background:var(--goo-light);color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 3px 0 var(--olive);animation:bob 1.6s ease-in-out infinite}@keyframes bob{50%{transform:translate(-50%,3px)}}.touch{display:none;position:absolute;left:10px;right:10px;bottom:10px;justify-content:space-between;align-items:flex-end;pointer-events:none}.touch-move{display:flex;gap:10px}.touch-btn{pointer-events:auto;width:58px;height:58px;border:3px solid var(--olive);border-radius:16px;background:#fff4d6d9;color:var(--olive);font-size:20px;font-weight:700;box-shadow:0 4px 0 var(--olive);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.touch-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--olive);background:var(--goo-light)}.touch-btn.jump{width:76px}@media (pointer: coarse){.touch{display:flex}.focus-hint{display:none}}.panel{padding:16px;display:flex;flex-direction:column;gap:14px}.readout{background:var(--cream);border:3px solid var(--olive);border-radius:14px;padding:8px 12px;font-size:15px}.meter-row{display:flex;align-items:center;gap:8px}.meter{flex:1;height:14px;border:2px solid var(--olive);border-radius:6px;background:repeating-linear-gradient(90deg,#e8dcb9 0,#e8dcb9 6px,#f2e8cb 6px,#f2e8cb 12px);overflow:hidden}.meter-fill{height:100%;background:repeating-linear-gradient(90deg,var(--goo) 0 6px,var(--goo-light) 6px 8px);transition:width .2s linear}.num{width:3.4em;text-align:right;font-weight:700}.mood{margin-top:4px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pix-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 11px 8px;border:3px solid var(--olive);border-radius:10px;background:var(--cream);color:var(--ink);cursor:pointer;text-align:left;box-shadow:inset -3px -3px #2f4a0b2e,inset 3px 3px #ffffffb3,0 5px 0 var(--olive);transition:transform .08s,box-shadow .08s,background .15s}.pix-btn:hover:not(.blocked){background:#fffbe9}.pix-btn:active:not(.blocked){transform:translateY(4px);box-shadow:inset -3px -3px #2f4a0b2e,inset 3px 3px #ffffffb3,0 1px 0 var(--olive)}.pix-label{font-size:18px;font-weight:700;line-height:1.1}.pix-sub{font-size:13px;opacity:.8;min-height:1.3em}.pix-btn.secondary{background:#f1e3bd}.pix-btn.blocked{cursor:not-allowed;color:#1d2a078c;background:repeating-linear-gradient(135deg,#efe5c6 0,#efe5c6 6px,#e4d8b2 6px,#e4d8b2 12px)}.pix-btn.running{background:var(--goo-light);color:var(--ink);animation:wobble .5s ease-in-out infinite}.pix-btn.pop{animation:pop .22s ease-out}.pix-btn.nope{animation:nope .4s ease-in-out}@keyframes wobble{0%,to{border-radius:10px}50%{border-radius:16px 8px 14px 9px}}@keyframes pop{50%{transform:scale(1.06,.92)}}@keyframes nope{20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.sliders{display:flex;flex-direction:column;gap:12px;background:#fff4d680;border:3px solid var(--olive);border-radius:14px;padding:10px 12px 12px}.slider{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}.slider-head{display:flex;justify-content:space-between}.slider output{font-weight:700}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:10px;border:2px solid var(--olive);border-radius:6px;background:repeating-linear-gradient(90deg,var(--goo-dark) 0 6px,var(--olive-soft) 6px 8px)}input[type=range]::-moz-range-track{height:6px;border:2px solid var(--olive);border-radius:6px;background:repeating-linear-gradient(90deg,var(--goo-dark) 0 6px,var(--olive-soft) 6px 8px)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border:3px solid var(--olive);border-radius:6px;background:var(--cream);box-shadow:0 3px 0 var(--olive)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--olive);border-radius:6px;background:var(--cream);box-shadow:0 3px 0 var(--olive)}input[type=range]:focus-visible{outline:3px solid var(--cream);outline-offset:3px;box-shadow:none;border-radius:6px}.hint{margin:0;font-size:13px;text-align:center;opacity:.85}@media (max-width: 960px){.main{grid-template-columns:minmax(0,1fr)}.stage{max-height:72dvh}.actions{grid-template-columns:repeat(3,1fr)}}@media (max-width: 640px){.app{padding:10px 12px 28px}.stage{aspect-ratio:4 / 5;border-radius:20px}.actions{grid-template-columns:1fr 1fr}.chip{padding:6px 10px;font-size:15px}.logo{white-space:nowrap;font-size:30px}.top-actions{gap:6px}}@media (max-width: 480px){.chip-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.chip .spk{width:16px;height:16px}.about img{width:56px;height:56px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}