:root{--bg:#000;--fg:#fff;--mute:#3a3a3a;--dim:#8a8a8a;--line:#2a2a2a;--font:"Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;--eye-w:100px;--eye-h:160px;--eye-gap:80px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body,#app{height:100%}body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;overflow:hidden}.stage{touch-action:none;-webkit-touch-callout:none;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;height:100%;padding-inline:16px;display:flex;position:relative}.eyes{gap:var(--eye-gap);touch-action:none;--t:.4s;--lidL:0;--lidR:0;--lidb:0;--px:0;--py:0;--ps:1;--sx:1;--sy:1;--ox:0px;--oy:0px;--rot:0deg;--tiltL:0deg;--tiltR:0deg;--gapk:1;transform:translate(var(--ox), var(--oy)) rotate(var(--rot));transition:transform var(--t) cubic-bezier(.3, .9, .3, 1.1);margin-top:-30px;display:flex;position:relative}.pair{gap:calc(var(--eye-gap) * var(--gapk));transition:gap var(--t) ease;display:flex}.eye{width:var(--eye-w);height:var(--eye-h);background:var(--fg);transform-origin:50%;transform:rotate(var(--tiltL)) scale(var(--sx), var(--sy));clip-path:inset(calc(var(--lidL) * 100%) 0 calc(var(--lidb) * 100%) 0);transition:transform var(--t) ease, clip-path var(--t) ease, background .15s ease;border-radius:50%;position:relative;overflow:hidden}.eye:last-child{clip-path:inset(calc(var(--lidR) * 100%) 0 calc(var(--lidb) * 100%) 0);transform:rotate(var(--tiltR)) scale(var(--sx), var(--sy))}.pupil{background:var(--bg);width:40%;height:35%;transform:translate(calc(var(--px) * var(--eye-w) * .28), calc(var(--py) * var(--eye-h) * .25)) scale(var(--ps));transition:transform var(--t) cubic-bezier(.2, .8, .2, 1);pointer-events:none;border-radius:50%;position:absolute;top:35%;left:30%}.eyes.blink .eye{transform:rotate(var(--tiltL)) scale(var(--sx), .06);transition:transform .12s}.eyes.blink .eye:last-child,.eyes.wink .eye:last-child{transform:rotate(var(--tiltR)) scale(var(--sx), .06);transition:transform .12s}.eyes.shape-happy .eye,.eyes.shape-sad .eye,.eyes.shape-cross .eye,.eyes.shape-sparkle .eye,.eyes.shape-heart .eye,.eyes.shape-shut .eye,.eyes.shape-smirk .eye:first-child{clip-path:none;background:0 0;overflow:visible}.eyes.shape-happy .pupil,.eyes.shape-sad .pupil,.eyes.shape-cross .pupil,.eyes.shape-sparkle .pupil,.eyes.shape-heart .pupil,.eyes.shape-shut .pupil,.eyes.shape-smirk .eye:first-child .pupil{visibility:hidden}.eyes.shape-smirk .eye:first-child .arc{opacity:1}.star,.heart{opacity:0;pointer-events:none;width:108%;height:auto;transition:opacity .15s,transform .3s;position:absolute;top:50%;left:-4%;transform:translateY(-50%)}.eyes.shape-sparkle .star,.eyes.shape-heart .heart{opacity:1}.arc{opacity:0;pointer-events:none;width:100%;height:auto;transition:opacity .15s;position:absolute;top:50%;left:0;transform:translateY(-50%)}.eyes.shape-happy .arc,.eyes.shape-sad .arc{opacity:1}.eyes.shape-sad .arc{transform:translateY(-50%)rotate(180deg)}.eyes.shape-shut .arc{opacity:1;transform:translateY(-30%)rotate(180deg)scaleY(.5)}.cross{opacity:0;pointer-events:none;width:100%;height:auto;transition:opacity .12s;position:absolute;top:50%;left:0;transform:translateY(-50%)}.eyes.shape-cross .cross{opacity:1}.swirl-mark{width:64px;height:64px;color:var(--dim);opacity:0;pointer-events:none;margin-left:-32px;transition:opacity .2s;animation:1.6s linear infinite paused swirl;position:absolute;top:-34px;left:50%}.eyes.swirl .swirl-mark{opacity:1;animation-play-state:running}@keyframes swirl{to{transform:rotate(360deg)}}@keyframes pupil-spin{0%{transform:translate(calc(1 * var(--eye-w) * .28), calc(0 * var(--eye-h) * .25)) scale(var(--ps))}8.3%{transform:translate(calc(.866 * var(--eye-w) * .28), calc(.5 * var(--eye-h) * .25)) scale(var(--ps))}16.7%{transform:translate(calc(.5 * var(--eye-w) * .28), calc(.866 * var(--eye-h) * .25)) scale(var(--ps))}25%{transform:translate(calc(0 * var(--eye-w) * .28), calc(1 * var(--eye-h) * .25)) scale(var(--ps))}33.3%{transform:translate(calc(-.5 * var(--eye-w) * .28), calc(.866 * var(--eye-h) * .25)) scale(var(--ps))}41.7%{transform:translate(calc(-.866 * var(--eye-w) * .28), calc(.5 * var(--eye-h) * .25)) scale(var(--ps))}50%{transform:translate(calc(-1 * var(--eye-w) * .28), calc(0 * var(--eye-h) * .25)) scale(var(--ps))}58.3%{transform:translate(calc(-.866 * var(--eye-w) * .28), calc(-.5 * var(--eye-h) * .25)) scale(var(--ps))}66.7%{transform:translate(calc(-.5 * var(--eye-w) * .28), calc(-.866 * var(--eye-h) * .25)) scale(var(--ps))}75%{transform:translate(calc(0 * var(--eye-w) * .28), calc(-1 * var(--eye-h) * .25)) scale(var(--ps))}83.3%{transform:translate(calc(.5 * var(--eye-w) * .28), calc(-.866 * var(--eye-h) * .25)) scale(var(--ps))}91.7%{transform:translate(calc(.866 * var(--eye-w) * .28), calc(-.5 * var(--eye-h) * .25)) scale(var(--ps))}to{transform:translate(calc(1 * var(--eye-w) * .28), calc(0 * var(--eye-h) * .25)) scale(var(--ps))}}.eyes.spin .pupil{transition:none;animation:.45s linear infinite pupil-spin}.mumble{white-space:nowrap;letter-spacing:.2em;color:var(--dim);opacity:0;font-size:15px;transition:opacity .3s;position:absolute;top:-2.4em;left:50%;transform:translate(-50%)}.mumble.on{opacity:1}.bubble{width:150px;color:var(--fg);opacity:0;transform-origin:10% 100%;pointer-events:none;transition:opacity .25s,transform .25s;position:absolute;top:-92px;left:calc(100% + 22px);transform:translateY(6px)scale(.96)}.bubble.on{opacity:1;transform:none}.bubble svg{width:100%;height:auto;display:block}.line{left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));letter-spacing:.06em;text-align:center;text-wrap:balance;opacity:0;min-height:1.6em;margin:0;font-size:clamp(16px,2.6vw,22px);font-weight:500;transition:opacity .4s;position:absolute}.line.on{opacity:1}.actions{left:16px;right:16px;bottom:calc(22px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;justify-content:center;gap:14px;min-height:44px;display:flex;position:absolute}button{font:inherit;border:1px solid var(--mute);height:44px;color:var(--dim);cursor:pointer;background:0 0;border-radius:22px;padding:0 22px;font-size:14px}button.primary{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:500}button:focus-visible{outline:2px solid var(--fg);outline-offset:3px}.foot{padding:0 24px calc(14px + env(safe-area-inset-bottom,0px));letter-spacing:.3em;color:var(--mute);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:12px;transition:color .4s;display:flex;position:absolute;bottom:0;left:0;right:0}.gear{top:calc(6px + env(safe-area-inset-top,0px));width:44px;height:44px;color:var(--mute);letter-spacing:.2em;border:0;border-radius:22px;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;transition:color .4s;display:inline-flex;position:absolute;right:12px}.brand{top:calc(14px + env(safe-area-inset-top,0px));left:calc(20px + env(safe-area-inset-left,0px));color:var(--fg);opacity:.9;line-height:0;display:block;position:absolute}.wm{display:block}@keyframes wm-blink{0%,93%,to{transform:scaleY(1)}96%{transform:scaleY(.08)}}.wm-eye{transform-box:fill-box;transform-origin:50%;animation:5s ease-in-out infinite wm-blink}@media (prefers-reduced-motion:reduce){.wm-eye{animation:none}}.stage.off .gear,.stage.off .foot{color:var(--dim)}dialog{color:var(--fg);width:100vw;max-width:none;height:100svh;max-height:none;padding:calc(20px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-sizing:border-box;background:#0a0a0a;border:0;border-radius:0;margin:0;overflow:auto}dialog::backdrop{background:#000000b3}dialog h2{letter-spacing:.2em;color:var(--dim);justify-content:space-between;align-items:baseline;margin:0 0 14px;font-size:15px;font-weight:500;display:flex}.ver{letter-spacing:.1em;color:var(--dim);font-variant-numeric:tabular-nums;font-size:12px}dialog form,.cols{flex-direction:column;gap:14px;display:flex}.col{flex-direction:column;gap:14px;min-width:0;display:flex}.preview{justify-content:center;align-items:center;display:flex}.pv-device{aspect-ratio:860/406;box-sizing:border-box;background:#0b0b0d;border-radius:12px;width:100%;max-width:240px;padding:3px;position:relative;box-shadow:inset 0 0 0 1px #4a4a50,0 10px 24px #0009}.pv-island{z-index:2;background:#000;border-radius:2px;width:3px;height:28px;margin-top:-14px;position:absolute;top:50%;left:7px;box-shadow:0 0 0 1px #151515}.pv-screen{background:#000;border-radius:9px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.pv-pair{gap:var(--eye-gap);display:flex;transform:scale(.34)}.pv-eye{width:var(--eye-w);height:var(--eye-h);background:var(--fg);border-radius:50%;position:relative;overflow:hidden}.pv-eye i{background:#000;border-radius:50%;width:40%;height:35%;position:absolute;top:35%;left:30%}.fields{gap:16px;display:flex}.fields label{flex:1 1 0}.fields input[type=number]{box-sizing:border-box;width:100%}@media (width>=640px) and (height<=520px){dialog{padding:calc(14px + env(safe-area-inset-top,0px)) calc(28px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(28px + env(safe-area-inset-left,0px))}dialog h2{margin-bottom:14px;padding-right:300px}dialog form{gap:12px;height:100%;position:relative}.cols{flex-direction:row;flex:1;gap:48px}.col{flex:1 1 0;gap:16px}dialog label{gap:5px;font-size:13px}dialog label.inline{gap:10px}dialog input[type=number]{height:34px}dialog select{height:34px;font-size:13px}dialog input[type=range]{height:18px;margin:0}.hint{display:none}.row{margin:0;position:absolute;top:-4px;right:0}.row button{height:36px;padding:0 16px;font-size:13px}.preview{flex:1;justify-content:center;align-items:center;min-height:0}.pv-device{max-width:220px}.pv-pair{transform:scale(.3)}dialog h2{justify-content:flex-start;gap:12px}.ver{position:static}}dialog label{color:var(--dim);flex-direction:column;gap:6px;font-size:13px;display:flex}dialog label.inline{flex-direction:row;align-items:center;gap:10px}dialog input[type=number]{width:90px;height:36px;color:var(--fg);border:1px solid var(--mute);font:inherit;background:#000;border-radius:8px;padding:0 10px}dialog input[type=range]{accent-color:var(--fg)}dialog select{height:36px;color:var(--fg);border:1px solid var(--mute);font:inherit;background:#000;border-radius:8px;padding:0 10px;font-size:13px}.row{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:6px;display:flex}.row button{height:40px;font-size:13px}.hint{color:var(--mute);letter-spacing:.1em;text-align:center;margin:0;font-size:11px}body.demo{touch-action:none;-webkit-touch-callout:none;cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M10 2a3 3 0 0 1 3 3v9h1V11a3 3 0 0 1 6 0v3h1v-1a3 3 0 0 1 6 0v8c0 5-4 10-10 10h-3c-3 0-5-1-7-3l-5-6a3 3 0 0 1 4-4l1 1V5a3 3 0 0 1 3-3z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 10 2,pointer}body.demo button{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M10 2a3 3 0 0 1 3 3v9h1V11a3 3 0 0 1 6 0v3h1v-1a3 3 0 0 1 6 0v8c0 5-4 10-10 10h-3c-3 0-5-1-7-3l-5-6a3 3 0 0 1 4-4l1 1V5a3 3 0 0 1 3-3z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 10 2,pointer}.ripple{pointer-events:none;z-index:20;background:#ffffff14;border:2px solid #ffffff8c;border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px;animation:.55s ease-out forwards ripple;position:fixed}.ripple.hold{transition:transform 3s ease-out;animation:none;transform:scale(.9)}.ripple.hold.on{transform:scale(1.6)}@keyframes ripple{0%{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.8)}}@media (prefers-reduced-motion:reduce){.eye,.pupil,.arc{transition:none}}
