.liquid{z-index:10;color:#fff;background:#00000073;border-radius:4px;gap:4px;padding:5px 7px;font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;display:grid;position:fixed;top:12px;left:12px}.liquid .row{gap:4px;display:flex}.liquid button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:1px solid #ffffff59;border-radius:3px;padding:1px 5px}.liquid button.on{background:#ffffff40}@property --ink{syntax:"<color>";inherits:true;initial-value:#fff}*{box-sizing:border-box}html,body,#app{overscroll-behavior:none;touch-action:none;background:#000;width:100%;height:100%;margin:0;overflow:hidden}body{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Noto Sans SC,sans-serif}main{--page-height:100vh;width:100%;height:var(--page-height);color:var(--ink);cursor:text;isolation:isolate;transition:--ink 1.2s;position:relative;overflow:hidden}@supports (height:100svh){main{--page-height:100svh}}main[data-phase=thinking],main[data-phase=reveal]{cursor:progress}main:not(.fallback),main:not(.fallback) textarea{cursor:none}.canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;display:block;position:absolute;inset:0}.fallback .canvas{visibility:hidden}button:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}.stage{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.words{width:min(84vw,1100px);font-family:var(--serif);font-feature-settings:"palt";letter-spacing:.05em;text-align:center;font-size:clamp(20px,10vw,84px);font-weight:380;position:relative}.mirror,textarea{white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;text-wrap:wrap}.mirror{color:#0000}.fallback .mirror{color:var(--ink);transition:opacity var(--cancel-duration) ease, filter var(--cancel-duration) ease}.fallback .cancelled .mirror{opacity:0;filter:blur(6px)}.dissolved .mirror{opacity:0}.fallback .mirror .ch{animation:.7s cubic-bezier(.2,.7,.1,1) both ink;position:relative}textarea{resize:none;width:100%;height:100%;font:inherit;letter-spacing:inherit;text-align:inherit;color:#0000;-webkit-text-fill-color:transparent;text-shadow:none;pointer-events:auto;background:0 0;border:0;outline:0;margin:0;padding:0;position:absolute;inset:0;overflow:hidden}textarea:disabled{caret-color:#0000}textarea::selection{background:0 0}.fallback textarea::selection{background:var(--selection)}.invite{font:300 clamp(19px, 1.9vw, 24px) / 1 var(--serif);font-feature-settings:"palt";letter-spacing:.24em;text-indent:.24em;white-space:nowrap;color:#0000;pointer-events:none;place-items:center;margin:0;display:grid;position:absolute;inset:0}html:not([lang=zh-CN]):not([lang=ja]):not([lang=ko]) .invite{letter-spacing:.04em;text-indent:.04em;padding-inline:20px;font-size:clamp(15px,4vw,24px)}html[lang=ja] .invite,html[lang=ko] .invite{letter-spacing:.08em;text-indent:.08em;padding-inline:20px;font-size:clamp(16px,4.2vw,24px)}.fallback .invite{color:#fff;mix-blend-mode:difference;opacity:.6;transition:opacity 1.2s 1.6s,filter 1.2s 1.6s;animation:2.4s 1.1s both arrive}.fallback .invite.hidden{opacity:0;filter:blur(6px);transition-duration:.4s;transition-delay:0s}footer{max-width:min(44vw,420px);padding:0 26px calc(max(24px, env(safe-area-inset-bottom)) + max(0px, var(--page-height) - var(--viewport-bottom,var(--page-height))));cursor:default;flex-direction:column;align-items:flex-start;gap:12px;display:flex;position:absolute;inset:auto auto 0 0}footer.quiet .strip{opacity:.3}main[data-phase=thinking] .strip,main[data-phase=reveal] .strip{width:0;transform:translateX(calc(var(--n) * 30px));pointer-events:none;transition:width calc(var(--n) * 70ms + .25s) cubic-bezier(.55, 0, .75, .3), transform calc(var(--n) * 70ms + .25s) cubic-bezier(.55, 0, .75, .3), opacity .15s ease calc(var(--n) * 70ms + .15s);opacity:0;justify-content:flex-end}.caption{text-align:left;cursor:pointer;font:400 15px/1.6 var(--serif);font-feature-settings:"palt";letter-spacing:.08em;color:#0000;-webkit-line-clamp:2;background:0 0;border:0;-webkit-box-orient:vertical;margin:0;padding:0;display:-webkit-box;overflow:hidden}.caption:disabled{cursor:default}.fallback .caption{color:var(--ink)}.strip{width:calc(var(--n) * 30px);isolation:isolate;height:12px;animation:grow calc(var(--n) * 90ms + .35s) cubic-bezier(.3, .6, .2, 1) 1.3s backwards;border-radius:6px;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1),border-radius .6s cubic-bezier(.2,.8,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 10px 24px -12px #00000073}.strip:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 .5px #fff3,inset 0 1px 1px #ffffff29,inset 0 -1px 1px #0000001a}.strip:hover,.strip:focus-within,.strip.active{width:calc(var(--n) * 30px + 92px);border-radius:15px;height:30px}.swatch{min-width:var(--swatch-width,30px);color:var(--fg);background:var(--c);box-shadow:1px 0 0 var(--c);cursor:copy;animation:tint .5s ease calc(1.3s + var(--i) * 80ms) backwards;border:0;border-radius:0;flex:1 1 0;place-items:center;margin:0;padding:0;transition:flex-grow .6s cubic-bezier(.2,.8,.2,1);display:grid;position:relative}.swatch:hover,.swatch:focus-visible,.swatch.copied{flex-grow:4}.strip:is(:hover,:focus-within,.active) .swatch{min-width:30px}.swatch:focus-visible{box-shadow:inset 0 0 0 1.5px var(--fg), 1px 0 0 var(--c);outline:none}.hex,.tick{opacity:0;grid-area:1/1;transition:opacity .25s}.hex{font-variant-numeric:tabular-nums;letter-spacing:.06em;white-space:nowrap;font-size:11px;font-weight:500}html:is([lang=zh-CN],[lang=ja],[lang=ko]) .hex{font-family:"Geist UI", var(--serif)}.swatch:is(:hover,:focus-visible) .hex{opacity:.85;transition-delay:.2s}.tick{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14px;width:15px;height:15px}.swatch.copied .hex{opacity:0;transition-delay:0s}.swatch.copied .tick{opacity:1;animation:.45s cubic-bezier(.3,.7,.3,1) 50ms forwards tick}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@keyframes grow{0%{width:0}}@keyframes tint{0%{opacity:.4;filter:saturate(.5)brightness(1.12)}}@keyframes tick{to{stroke-dashoffset:0}}@keyframes arrive{0%{opacity:0;filter:blur(12px);transform:translateY(10px)}}@keyframes ink{0%{color:#0000;text-shadow:0 0 .45em var(--ink);top:.32em}55%{text-shadow:0 0 .1em var(--ink)}}@media (pointer:coarse){.stage{inset-block-end:50%}}@media (max-width:600px){footer{max-width:72vw;padding-inline:18px}.caption{font-size:14px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}
