@import"https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bungee&family=Caveat:wght@600&family=DM+Serif+Display:ital@0;1&family=Sora:wght@400;500;700&family=Syne:wght@500;700;800&display=swap";:root{--bg: #f4ecde;--paper: #fffaf1;--ink: #2d2419;--muted: #5f5343;--accent: #c9774c;--accent-2: #f0c18f;--line: #ddcdb8;--shadow: 0 22px 46px -28px rgba(80, 55, 27, .35)}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%}#app{position:relative;isolation:isolate}body{font-family:Sora,sans-serif;color:var(--ink);background:linear-gradient(160deg,#f8f0e3 0%,var(--bg) 55%,#efe3d0 100%);overflow-x:hidden}.bg-layers{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.bg-layers:before,.bg-layers:after{content:"";position:absolute;top:-10%;right:-10%;bottom:-10%;left:-10%}.bg-layers:before{background:radial-gradient(48rem 34rem at 14% 22%,#fff3dd 0%,transparent 72%),radial-gradient(42rem 30rem at 86% 78%,#eed7bd 0%,transparent 72%);opacity:.7;animation:breathe 24s ease-in-out infinite}.bg-layers:after{background:radial-gradient(36rem 24rem at 72% 24%,#f8e8d4 0%,transparent 74%);opacity:.48;animation:drift 34s ease-in-out infinite}.word-cloud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:1}.float-word{position:absolute;left:0;top:0;white-space:nowrap;-webkit-user-select:none;user-select:none;transform:translateZ(0);will-change:transform,opacity;mix-blend-mode:multiply}.canvas{min-height:100vh;display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem);position:relative;isolation:isolate;z-index:2}.card{width:min(980px,100%);background:var(--paper);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);overflow:hidden;animation:appear .5s ease-out both}.inner{padding:clamp(1.2rem,2.8vw,2.8rem);position:relative}.tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.34rem .62rem;border:1px solid #d8b996;border-radius:999px;background:#fff6e9;color:#8b6b47;font-weight:700}h1{margin:.75rem 0 .9rem;font-family:Syne,sans-serif;font-size:clamp(3rem,10vw,6.5rem);line-height:.92;letter-spacing:-.03em;text-transform:lowercase;text-rendering:geometricPrecision}.subtitle{margin:0;max-width:42ch;color:var(--muted);font-size:clamp(.98rem,2.1vw,1.1rem);line-height:1.75}.join-wrap{margin-top:1.1rem;position:relative;min-height:5.3rem}.puddle-btn{position:relative;border:1px solid #b27c55;background:radial-gradient(circle at 30% 25%,#f6d7b4,#de9f6d 58%,#be7546);color:#2f1f12;font-family:Syne,sans-serif;font-size:clamp(.9rem,2vw,1rem);font-weight:700;letter-spacing:.02em;padding:.95rem 1.65rem;min-width:13.8rem;border-radius:56% 44% 60% 40%/44% 56% 48% 52%;box-shadow:0 9px 24px -12px #69401fb3,inset 0 1px 1px #fff8ebcc;cursor:pointer;transition:transform .26s ease,box-shadow .26s ease,opacity .36s ease,border-radius .38s ease}.puddle-btn:before,.puddle-btn:after{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f3d5b4,#c57e4e);pointer-events:none;opacity:.55}.puddle-btn:before{width:20px;height:13px;left:13%;bottom:-6px}.puddle-btn:after{width:18px;height:12px;right:16%;top:-5px}.puddle-btn:hover{transform:translateY(-1px) scale(1.02);border-radius:52% 48% 46% 54%/53% 47% 57% 43%}.puddle-btn:active{transform:scale(.98)}.join-form{position:absolute;left:0;top:0;width:min(560px,100%);opacity:0;transform:translate(28px) scale(.98);pointer-events:none;transition:transform .36s ease,opacity .32s ease}.join-label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#7f6041;margin-bottom:.36rem;font-family:Syne,sans-serif}.join-row{display:flex;gap:.55rem;align-items:center}.join-row input{flex:1;min-width:0;border:1px solid #d1b99f;border-radius:999px;background:#fff7eb;color:#3e3124;padding:.72rem .95rem;font:inherit}.join-row input:focus{outline:2px solid #dca476;outline-offset:1px}.join-submit{border:1px solid #b9855a;border-radius:999px;padding:.72rem 1rem;font:inherit;font-weight:600;background:#f0c79f;color:#38261a;cursor:pointer}.join-note{margin:.4rem 0 0;font-size:.86rem;color:#745d47}.join-wrap.is-joining .puddle-btn{transform:translate(-26px) scale(.85);opacity:0;pointer-events:none}.join-wrap.is-joining .join-form{opacity:1;transform:translate(0) scale(1);pointer-events:auto}.join-wrap .droplet{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f7dfc4,#b86f40);transform:translateZ(0) scale(.85);opacity:0;pointer-events:none}.join-wrap.is-splashing .droplet{animation:splash-out .62s cubic-bezier(.18,.75,.23,1) forwards}.grid{margin-top:clamp(1rem,2vw,1.6rem);display:grid;gap:.8rem;grid-template-columns:1fr}.block{border:1px solid #e3d6c5;background:#fff8ed;border-radius:18px;padding:.95rem 1rem}.label{margin:0 0 .4rem;font-family:Syne,sans-serif;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:#7f6041}.text{margin:0;color:#4f4437;line-height:1.7;font-size:clamp(.95rem,2vw,1.02rem)}.quote{margin:.45rem 0 0;padding:.55rem .75rem;border-left:3px solid var(--accent);background:linear-gradient(90deg,#fce6d3,#fce6d300);border-radius:8px;font-weight:500;display:block}.splash{position:absolute;right:clamp(.6rem,2vw,1.3rem);top:clamp(.7rem,2vw,1.2rem);width:72px;height:72px;border-radius:52% 48% 55% 45%;background:radial-gradient(circle at 35% 35%,var(--accent-2) 0%,#e6a36e 100%);opacity:.2;animation:wobble 10s ease-in-out infinite;pointer-events:none}@keyframes splash-out{0%{opacity:0;transform:translate3d(var(--sx, 0),var(--sy, 0),0) scale(.55)}20%{opacity:.82}to{opacity:0;transform:translate3d(var(--tx, 0),var(--ty, 0),0) scale(1.15)}}@keyframes appear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes wobble{0%,to{border-radius:52% 48% 55% 45%}50%{border-radius:45% 55% 46% 54%}}@keyframes breathe{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.03) translateY(-6px)}}@keyframes drift{0%,to{transform:translate(0) translateY(0)}50%{transform:translate(-14px) translateY(8px)}}@media (max-width: 640px){.join-wrap{min-height:7.6rem}.join-row{flex-direction:column;align-items:stretch}}@media (min-width: 800px){.grid{grid-template-columns:1.15fr .85fr}.block.sitater{grid-column:span 2}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}