.flip-app{--flip-light: #f4be45;--flip-light-pale: #fff1a9;--flip-light-deep: #a86710;--flip-panel: #25282b;--flip-panel-edge: #121416;--lp-accent: var(--flip-light);--lp-accent-deep: var(--flip-light-deep)}.flip-stage{margin:0 auto;max-width:31rem;transition:max-width .36s cubic-bezier(.2,.8,.2,1)}.flip-app[data-flip-size="3"] .flip-stage{max-width:21rem}.flip-app[data-flip-size="4"] .flip-stage{max-width:25rem}.flip-app[data-flip-size="5"] .flip-stage,.flip-app[data-flip-size="8"] .flip-stage{max-width:31rem}.flip-board-frame{background:radial-gradient(circle at 50% 0%,rgb(255 255 255 / .08),transparent 44%),linear-gradient(145deg,#34383c,var(--flip-panel));border:1px solid color-mix(in srgb,var(--flip-panel-edge) 85%,white);border-radius:1.1rem;box-shadow:0 2px 0 var(--flip-panel-edge),0 16px 34px #00000029,inset 0 1px #ffffff1f;overflow:hidden;padding:clamp(.42rem,2vw,.72rem);perspective:800px;position:relative;transform:rotateX(1.2deg);transform-origin:bottom center;transition:box-shadow .28s ease,transform .28s ease}.flip-board-frame:before,.flip-board-frame:after{background:#111315;border:1px solid rgb(255 255 255 / .13);border-radius:50%;box-shadow:inset 0 1px 1px #000;content:"";height:.3rem;position:absolute;top:.34rem;width:.3rem;z-index:2}.flip-board-frame:before{left:.36rem}.flip-board-frame:after{right:.36rem}.flip-frame-light{background:radial-gradient(circle,rgb(244 190 69 / .42),transparent 67%);height:70%;left:15%;opacity:var(--flip-frame-glow, .12);pointer-events:none;position:absolute;top:12%;transform:scale(var(--flip-frame-scale, .85));transition:opacity .45s ease,transform .45s ease;width:70%}.flip-board-frame.is-pulsing{transform:rotateX(1.2deg) translateY(1px) scale(.997)}.flip-board-frame.is-complete{--flip-frame-glow: .7;--flip-frame-scale: 1.2;box-shadow:0 2px 0 var(--flip-panel-edge),0 18px 42px #f4be453d,inset 0 1px #ffffff1f}.flip-board{aspect-ratio:1;display:grid;gap:clamp(.24rem,1.3vw,.46rem);grid-template-columns:repeat(var(--flip-n),1fr);isolation:isolate;overflow:clip;position:relative}.flip-app[data-flip-density=compact] .flip-board{gap:clamp(.12rem,.65vw,.28rem)}.flip-app[data-flip-density=compact] .flip-board-frame{padding:clamp(.34rem,1.4vw,.58rem)}.flip-app[data-flip-density=tiny] .flip-board{gap:clamp(.08rem,.4vw,.16rem)}.flip-app[data-flip-density=tiny] .flip-board-frame{padding:clamp(.28rem,1.1vw,.45rem)}.flip-cell{aspect-ratio:1;border:1px solid transparent;border-radius:clamp(.42rem,1.4vw,.68rem);color:#c6cbd0;min-width:0;overflow:hidden;position:relative;transform:translateZ(0);transition:background .26s ease,border-color .26s ease,box-shadow .28s ease,color .26s ease,transform .16s ease}.flip-cell.is-off{background:linear-gradient(145deg,#34383c,#292c30);border-color:#ffffff13;box-shadow:inset 0 1px #ffffff0e,0 2px 3px #00000042}.flip-cell.is-on{background:radial-gradient(circle at 46% 37%,var(--flip-light-pale) 0 8%,transparent 40%),linear-gradient(145deg,#ffdf7b,var(--flip-light));border-color:#ffe8a1;box-shadow:inset 0 1px #ffffffc2,inset 0 -5px 12px #a55c0829,0 2px 4px #00000047,0 0 12px #f4be452e;color:#67420a}.flip-cell:not(:disabled):hover{transform:translateY(-2px) translateZ(8px)}.flip-cell:not(:disabled):active{transform:translateY(1px) scale(.965)}.flip-cell:disabled{cursor:default}.flip-cell:focus-visible{outline-color:#fff;outline-offset:-3px;z-index:5}.flip-bloom{background:radial-gradient(circle,rgb(255 246 184 / .95),rgb(244 190 69 / .35) 38%,transparent 68%);inset:-30%;opacity:0;pointer-events:none;position:absolute;transform:scale(.25)}.flip-switch-map{height:clamp(1.15rem,55%,2.55rem);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:clamp(1.15rem,55%,2.55rem)}.flip-app[data-flip-density=compact] .flip-cell{border-radius:clamp(.22rem,.75vw,.46rem)}.flip-app[data-flip-density=compact] .flip-switch-map{height:57%;width:57%}.flip-app[data-flip-density=tiny] .flip-cell{border-radius:clamp(.14rem,.5vw,.3rem)}.flip-app[data-flip-density=tiny] .flip-switch-map{height:64%;width:64%}.flip-map-center,.flip-map-node{background:currentColor;border:1px solid color-mix(in srgb,currentColor 72%,transparent);box-shadow:inset 0 1px #ffffff47;display:block;height:24%;position:absolute;width:24%;z-index:2}.flip-map-center{border-radius:24%;left:38%;top:38%}.flip-map-node{border-radius:33%}.flip-map-node:after{background:currentColor;content:"";opacity:.56;position:absolute;z-index:-1}.flip-map-node.is-up{left:38%;top:0}.flip-map-node.is-up:after{height:72%;left:43%;top:100%;width:14%}.flip-map-node.is-right{right:0;top:38%}.flip-map-node.is-right:after{height:14%;right:100%;top:43%;width:72%}.flip-map-node.is-down{bottom:0;left:38%}.flip-map-node.is-down:after{bottom:100%;height:72%;left:43%;width:14%}.flip-map-node.is-left{left:0;top:38%}.flip-map-node.is-left:after{height:14%;left:100%;top:43%;width:72%}.flip-map-node.is-hidden{display:none}.flip-hint-ring{border:2px solid #fff;border-radius:50%;inset:11%;opacity:0;pointer-events:none;position:absolute;transform:scale(.68)}.flip-cell.is-hinted .flip-hint-ring{animation:flip-hint-pulse 1.25s ease-in-out infinite;opacity:1}.flip-cell.is-hinted{z-index:4}.flip-cell.is-source:after{border:2px solid rgb(255 255 255 / .82);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute;animation:flip-source-ring .42s ease-out both}.flip-cell[data-flip-animate=on]{animation:flip-light-on .46s cubic-bezier(.18,.82,.2,1) var(--flip-delay, 0ms) both}.flip-cell[data-flip-animate=off]{animation:flip-light-off .38s cubic-bezier(.4,0,.3,1) var(--flip-delay, 0ms) both}.flip-cell[data-flip-animate=on] .flip-bloom{animation:flip-bloom .58s ease-out var(--flip-delay, 0ms) both}.flip-board.is-complete .flip-cell{animation:flip-finish-wave .72s cubic-bezier(.16,.8,.25,1) calc(var(--flip-wave) * 48ms) both}.flip-app[data-flip-density=tiny] .flip-board.is-complete .flip-cell{animation-delay:calc(var(--flip-wave) * 22ms)}.flip-board.is-entering .flip-cell{animation:flip-cell-enter .42s cubic-bezier(.16,.82,.25,1) calc(var(--flip-wave) * 18ms) both}.flip-app[data-flip-density=tiny] .flip-board.is-entering .flip-cell{animation-delay:calc(var(--flip-wave) * 8ms)}.flip-result{max-width:31rem}.flip-result .word{letter-spacing:.03em}.flip-card-dialog{background:var(--card);border:1px solid var(--line);border-radius:1rem;box-shadow:0 18px 50px #00000047;color:var(--ink);max-height:calc(100vh - 1.5rem);max-width:min(25rem,92vw);overflow:auto;padding:.875rem}.flip-card-dialog::backdrop{background:#00000085}.flip-card-dialog img{background:#f7f5ee;border:1px solid var(--line);border-radius:.625rem;display:block;width:100%}.flip-card-hint{color:var(--muted);font-size:.75rem;margin:.625rem 0 0}.flip-card-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;margin-top:.75rem}.flip-demo-wrap{align-items:center;background:color-mix(in srgb,var(--flip-light) 8%,var(--soft));border:1px solid color-mix(in srgb,var(--flip-light) 25%,var(--line));border-radius:.8rem;display:grid;gap:.9rem;grid-template-columns:6rem 1fr;margin:0 0 .9rem;padding:.75rem}.flip-demo-wrap>div{display:grid;gap:.15rem}.flip-demo-wrap>div b{font-size:.84rem}.flip-demo-wrap>div span{color:var(--muted);font-size:.75rem;line-height:1.4}.flip-demo{background:var(--flip-panel);border-radius:.55rem;display:grid;gap:.18rem;grid-template-columns:repeat(3,1fr);padding:.35rem;width:6rem}.flip-demo-cell{aspect-ratio:1;background:#34383c;border:1px solid rgb(255 255 255 / .08);border-radius:.2rem;display:block;transition:background .28s ease,box-shadow .28s ease,transform .28s ease}.flip-demo-cell.is-demo-on{background:var(--flip-light);box-shadow:0 0 8px #f4be4580;transform:scale(.92)}.flip-demo-cell:nth-child(5):after{color:#fff;content:"●";display:grid;font-size:.45rem;height:100%;place-items:center}@keyframes flip-light-on{0%{filter:brightness(.72);transform:scale(.93) rotateX(7deg)}58%{filter:brightness(1.2);transform:scale(1.045) rotateX(-2deg)}to{filter:brightness(1);transform:scale(1)}}@keyframes flip-light-off{0%{filter:brightness(1.15);transform:scale(1.03)}to{filter:brightness(1);transform:scale(.985)}}@keyframes flip-bloom{0%{opacity:0;transform:scale(.18)}34%{opacity:.9}to{opacity:0;transform:scale(1.05)}}@keyframes flip-source-ring{0%{opacity:.9;transform:scale(.76)}to{opacity:0;transform:scale(1.06)}}@keyframes flip-hint-pulse{0%,to{box-shadow:0 0 #fff0;opacity:.75;transform:scale(.8)}50%{box-shadow:0 0 0 5px #ffffff24;opacity:1;transform:scale(1)}}@keyframes flip-finish-wave{0%{filter:brightness(1);transform:translateY(0) scale(1)}42%{filter:brightness(1.28);transform:translateY(-5px) scale(1.04)}to{filter:brightness(1);transform:translateY(0) scale(1)}}@keyframes flip-cell-enter{0%{opacity:0;transform:translateY(7px) rotateX(8deg) scale(.94)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .flip-app{--flip-light-deep: #e7ad3f;--lp-accent-deep: #e7ad3f}}:root[data-theme=dark] .flip-app{--flip-light-deep: #e7ad3f;--lp-accent-deep: #e7ad3f}:root[data-contrast] .flip-app{--flip-light: var(--maybe);--flip-light-pale: color-mix(in srgb, var(--maybe) 58%, white);--flip-light-deep: var(--maybe);--lp-accent: var(--maybe);--lp-accent-deep: var(--maybe)}@media(max-width:34rem){.flip-stage{max-width:min(100%,29rem)}}@media(max-width:24rem){.flip-board-frame{border-radius:.85rem}}@media(max-width:22rem){.flip-demo-wrap{grid-template-columns:5.2rem 1fr}.flip-demo{width:5.2rem}}@media(prefers-reduced-motion:reduce){.flip-app *,.flip-app *:before,.flip-app *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
