:root{--page-bg:#e9e6e6;--board-bg:#92613d;--ink:#000;--muted:#555;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--ease-out-quart:cubic-bezier(.25, 1, .5, 1);--dur-fast:.14s;--dur-normal:.26s;--dur-slow:.46s;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--page-bg);min-height:100dvh;color:var(--ink);font-family:DM Sans,system-ui,-apple-system,sans-serif;overflow-x:hidden}#root{min-height:100dvh}button{font-family:inherit}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.title--animated{animation:none}.title__ink{display:inline}.title-word{white-space:nowrap;display:inline-block}.title-space{display:inline-block}.title-letter{animation:titleLetterIn .56s var(--ease-spring,cubic-bezier(.34, 1.56, .64, 1)) backwards;animation-delay:calc(var(--i) * 36ms + .18s);display:inline-block}.title-letter__inner{will-change:transform;display:inline-block}.title--animated:hover .title-letter__inner{animation:titleLetterWave .7s var(--ease-spring,cubic-bezier(.34, 1.56, .64, 1));animation-delay:calc(var(--i) * 28ms)}@keyframes titleLetterIn{0%{opacity:0;transform:translateY(.42em)rotate(-9deg)scale(.82)}60%{opacity:1}to{opacity:1;transform:translateY(0)rotate(0)scale(1)}}@keyframes titleLetterWave{0%{transform:translateY(0)}35%{transform:translateY(-.2em)rotate(-3deg)}65%{transform:translateY(.04em)rotate(1.5deg)}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.title-letter,.title--animated:hover .title-letter__inner{animation:none}}.page{max-width:1484px;margin:0 auto;padding:64px 22px 48px}.masthead{text-align:center;animation:riseIn .64s var(--ease-out-expo) both;flex-direction:column;align-items:center;gap:18px;margin-bottom:44px;display:flex}.title{color:var(--ink);letter-spacing:.5px;margin:0;font-family:Caveat,cursive;font-size:clamp(38px,5.2vw,60px);font-weight:700;line-height:1}.subtitle{color:var(--muted);opacity:0;animation:subtitleIn .52s var(--ease-out-expo) .9s both;margin:0;font-family:DM Sans,sans-serif;font-size:clamp(17px,2vw,24px);font-weight:400;line-height:1.2}@keyframes subtitleIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.subtitle{opacity:1;animation-delay:0s}}.stage{touch-action:pan-y;width:100%;position:relative}.board{transform-origin:top;touch-action:pan-y;position:absolute;top:0;left:50%;overflow:visible}.board__surface{background:var(--board-bg);touch-action:pan-y;border-radius:20px;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 1px #ffffff14,0 30px 60px -28px #462c168c,0 10px 24px -16px #462c1666}.board__texture{opacity:.5;pointer-events:none;mix-blend-mode:multiply;background-image:url(/photos/mosaic.png);background-position:0 0;background-repeat:repeat;background-size:355px 288px;position:absolute;inset:0}.board__spotlight{filter:blur(40px);pointer-events:none;opacity:0;z-index:0;width:350px;height:350px;transition:opacity .6s var(--ease-out-quart);will-change:transform;background:radial-gradient(circle,#ffffdc0f 0%,#0000 70%);border-radius:50%;margin:-175px 0 0 -175px;position:absolute;top:0;left:0}.board__spotlight.is-on{opacity:1}.card-anchor{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;animation:cardIn .6s var(--ease-out-expo) both;animation-delay:var(--enter-delay,0s);position:absolute;transform:translate(-50%,-50%)}.card-anchor.is-dragging{cursor:grabbing}.card-zoom{transform:scale(var(--zoom,1));transform-origin:50%;will-change:transform}.card-phys{will-change:transform;perspective:900px;transform:translate(0,0)}.card-swing{transform-origin:top;will-change:transform;transform:rotate(0)}.card-rotor{transform:rotate(var(--rot,0deg));transition:transform var(--dur-normal) var(--ease-spring), filter var(--dur-normal) var(--ease-out-quart), opacity var(--dur-slow) var(--ease-out-quart);will-change:transform;position:relative}.card-anchor:not(.is-dragging):not(.is-rotating) .card-rotor:hover{transform:rotate(var(--rot,0deg)) translateY(-9px) scale(1.035);filter:brightness(1.08)saturate(1.03)}.board:not(:has(.card-anchor.is-dragging)):not(:has(.card-anchor.is-rotating)):has(.card-anchor:hover) .card-anchor:not(:hover) .card-rotor{transform:rotate(var(--rot,0deg)) scale(.98);opacity:.85}.card-anchor.is-dragging .card-rotor{transform:rotate(calc(var(--rot,0deg) * .12)) translateY(-3px) scale(1.06);filter:saturate(1.04)}.card-anchor.is-flipping .card-rotor{animation:cardFlip .7s var(--ease-out-quart) both;transition:none}@keyframes cardFlip{0%{transform:rotate(var(--rot,0deg)) rotateX(0deg)}43%{transform:rotate(var(--rot,0deg)) rotateX(8deg) translateY(-2px)}70%{transform:rotate(var(--rot,0deg)) rotateX(-2.5deg)}to{transform:rotate(var(--rot,0deg)) rotateX(0deg)}}.card-anchor.is-rotating .card-rotor{transform:rotate(var(--rot,0deg)) scale(1.04);filter:saturate(1.04);transition:none}.rotate-handle{color:#6b4a2a;cursor:grab;opacity:0;pointer-events:none;touch-action:none;width:30px;height:30px;transition:opacity var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease;background:#fff;border:none;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:-36px;left:50%;transform:translate(-50%)scale(.8);box-shadow:0 4px 10px -3px #28160873,inset 0 0 0 1px #0000000a}.rotate-handle:after{content:"";background:#ffffffd9;border-radius:2px;width:2px;height:8px;position:absolute;top:28px;left:50%;transform:translate(-50%)}.card-anchor:hover .rotate-handle,.card-anchor:focus-within .rotate-handle,.card-anchor.is-rotating .rotate-handle{opacity:1;pointer-events:auto;transform:translate(-50%)scale(1)}.rotate-handle:hover{background:#fff7ea;transform:translate(-50%)scale(1.12)}.rotate-handle:active,.card-anchor.is-rotating .rotate-handle{cursor:grabbing;background:#ffeccb;transform:translate(-50%)scale(1.06)}.card-anchor:focus-visible{outline:none}.card-anchor:focus-visible .polaroid{box-shadow:0 0 0 3px #ffffffe6, 0 0 0 6px #92613de6, var(--shadow-rest)}.polaroid{--shadow-rest:0 10px 18px -10px #28160880, 0 4px 8px -4px #28160859;--shadow-hover:0 22px 34px -16px #2816088c, 0 8px 14px -8px #28160866;--shadow-drag:0 40px 60px -22px #1e100699, 0 16px 26px -12px #1e100673;width:206px;box-shadow:var(--shadow-rest);transition:box-shadow var(--dur-normal) var(--ease-out-quart);border:4px solid #fff;border-radius:16px;flex-direction:column;gap:24px;padding:7px 7px 24px;display:flex}.card-anchor:not(.is-dragging) .polaroid:hover{box-shadow:var(--shadow-hover)}.card-anchor.is-dragging .polaroid{box-shadow:var(--shadow-drag)}.polaroid__frame{background:#0000000f;border-radius:10px;height:168px;overflow:hidden}.polaroid__img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.polaroid__caption{text-align:center;word-break:break-word;margin:0;font-family:Caveat,cursive;font-size:18px;font-weight:700;line-height:24px}@keyframes cardIn{0%{opacity:0;transform:translate(-50%,-50%)translateY(-20px)scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes riseIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.polaroid.is-invite{animation:invite 1.7s var(--ease-out-quart) .6s 2}@keyframes invite{0%,to{transform:rotate(0)}20%{transform:rotate(-2.4deg)}60%{transform:rotate(2.4deg)}}.overlay{z-index:1000;-webkit-backdrop-filter:blur(8px);animation:overlayIn .35s var(--ease-out-quart) both;background:#2214096b;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.overlay.is-closing{animation:.25s ease-in both overlayOut}.dialog{width:min(420px,100%);animation:dialogIn .35s var(--ease-spring) both;background:#fffdf7;border-radius:22px;padding:22px;box-shadow:0 30px 70px -24px #28160880,0 10px 24px -12px #28160859}.dialog.is-closing{animation:.25s ease-in both dialogOut}.dialog__head{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.dialog__title{color:#1c1306;margin:0;font-family:Caveat,cursive;font-size:30px;font-weight:700;line-height:1}.dialog__close{color:#5b4a36;cursor:pointer;width:32px;height:32px;transition:background var(--dur-fast) ease, transform var(--dur-fast) ease;background:#0000000d;border:none;border-radius:50%;place-items:center;display:grid}.dialog__close:hover{background:#0000001a}.dialog__close:active{transform:scale(.92)}.field-label{letter-spacing:.02em;color:#8a795f;margin:0 0 7px;font-family:DM Sans,sans-serif;font-size:13px;font-weight:500;display:block}.text-field{color:#1c1306;width:100%;transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;background:#fff;border:1.5px solid #e6ddca;border-radius:12px;margin-bottom:18px;padding:11px 13px;font-family:DM Sans,sans-serif;font-size:16px}.text-field::placeholder{color:#b6a98e}.text-field:focus{border-color:#c9a36a;outline:none;box-shadow:0 0 0 3px #c9a36a40}.uploader{cursor:pointer;height:168px;transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;background:#f6f1e6;border:2px dashed #d8cbb1;border-radius:14px;margin-bottom:18px;display:block;position:relative;overflow:hidden}.uploader.is-over{border-color:#c9a36a;transform:scale(1.01)}.uploader__preview{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.uploader__overlay{text-align:center;color:#fff;opacity:0;transition:opacity var(--dur-fast) ease;background:linear-gradient(#140c0426,#140c048c);flex-direction:column;justify-content:center;align-items:center;gap:4px;font-family:DM Sans,sans-serif;font-size:14px;font-weight:500;display:flex;position:absolute;inset:0}.uploader:hover .uploader__overlay,.uploader:focus-within .uploader__overlay,.uploader.is-over .uploader__overlay{opacity:1}.uploader__overlay small{opacity:.85;font-size:12px;font-weight:400}.uploader__input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.dialog__actions{gap:10px;margin-top:22px;display:flex}.btn{cursor:pointer;transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;border:none;border-radius:12px;flex:1;padding:12px 16px;font-family:DM Sans,sans-serif;font-size:15px;font-weight:600}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{cursor:not-allowed}.btn--ghost{color:#6b5b43;background:0 0;flex:none}.btn--ghost:hover:not(:disabled){background:#0000000d}.btn--primary{color:#1a1306;box-shadow:0 6px 14px -6px #28160880}.btn--primary:hover:not(:disabled){filter:brightness(1.03);box-shadow:0 10px 20px -8px #2816088c}.btn--primary:disabled{color:#b3a890;box-shadow:none;background:#ece6d8!important}.rotate-row{align-items:center;gap:12px;margin-bottom:2px;display:flex}.rot-preview{flex:none;place-items:center;width:60px;height:60px;display:grid}.rot-preview__rotor{transition:transform 90ms linear}.rot-preview__card{border:3px solid #fff;border-radius:8px;width:42px;height:42px;overflow:hidden;box-shadow:0 4px 9px -4px #28160880}.rot-preview__card img{object-fit:cover;width:100%;height:100%;display:block}.slider{accent-color:#c9a36a;cursor:pointer;flex:1;height:4px}.rot-readout{text-align:right;font-variant-numeric:tabular-nums;color:#6b5b43;flex:none;width:42px;font-family:DM Sans,sans-serif;font-size:13px}.rot-zero{color:#6b5b43;cursor:pointer;transition:background var(--dur-fast) ease, transform var(--dur-fast) ease, opacity var(--dur-fast) ease;background:#0000000d;border:none;border-radius:8px;flex:none;padding:6px 10px;font-family:DM Sans,sans-serif;font-size:12px;font-weight:600}.rot-zero:hover:not(:disabled){background:#0000001a}.rot-zero:active:not(:disabled){transform:scale(.94)}.rot-zero:disabled{opacity:.4;cursor:not-allowed}.hint{z-index:900;color:#fff7e9;-webkit-backdrop-filter:blur(8px);max-width:calc(100vw - 28px);animation:hintIn .46s var(--ease-spring) .7s both;background:#1c1306eb;border-radius:16px;align-items:center;gap:14px;padding:14px 14px 14px 18px;display:flex;position:fixed;bottom:26px;left:50%;transform:translate(-50%);box-shadow:0 18px 40px -16px #0000008c}.hint__pulse{background:#ffd479;border-radius:50%;flex:none;width:10px;height:10px;position:relative}.hint__pulse:after{content:"";animation:pulseRing 1.8s var(--ease-out-quart) infinite;border:2px solid #ffd479;border-radius:50%;position:absolute;inset:-6px}.hint__body{min-width:0}.hint__title{margin:0 0 3px;font-family:DM Sans,sans-serif;font-size:14px;font-weight:600}.hint__text{color:#fff7e9cc;margin:0;font-family:DM Sans,sans-serif;font-size:13px;line-height:1.4}.hint__text strong{color:#ffe6b8;font-weight:600}.hint__close{color:#fff;cursor:pointer;transition:background var(--dur-fast) ease, transform var(--dur-fast) ease;background:#ffffff1f;border:none;border-radius:11px;flex:none;align-self:stretch;padding:0 16px;font-family:DM Sans,sans-serif;font-size:13px;font-weight:600}.hint__close:hover{background:#fff3}.hint__close:active{transform:scale(.95)}@keyframes overlayIn{0%{opacity:0;-webkit-backdrop-filter:blur()}to{opacity:1;-webkit-backdrop-filter:blur(8px)}}@keyframes overlayOut{to{opacity:0;-webkit-backdrop-filter:blur()}}@keyframes dialogIn{0%{opacity:0;transform:translateY(12px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes dialogOut{to{opacity:0;transform:translateY(0)scale(.95)}}@keyframes hintIn{0%{opacity:0;transform:translate(-50%)translateY(16px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes pulseRing{0%{opacity:.9;transform:scale(.7)}to{opacity:0;transform:scale(1.7)}}@media (width<=640px){.page{padding:40px 14px 32px}.hint{flex-wrap:wrap;bottom:14px}.hint__close{align-self:auto;padding:9px 14px}}
