#kc-arr{
  position:fixed; inset:0; z-index:999;
  display:none;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    radial-gradient(140% 120% at 50% 115%, rgba(166,100,114,.28), rgba(166,100,114,0) 58%),
    linear-gradient(180deg, #fddbe2 0%, #f6c3cf 100%);
  color:var(--kc-espresso, #432524);
  font-family:var(--kc-text, 'Trocchi', Georgia, serif);
  overflow:hidden;
}
html.kc-arr-on #kc-arr{display:grid}
html.kc-arr-lock{overflow:hidden}
#kc-arr::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(67,37,36,.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
  mix-blend-mode:multiply;
}
#kc-arr{
  --kbw:352px; --kbd:254px; --kbh:154px;
  grid-template-rows:1fr auto;
  justify-items:center;
  padding:clamp(10px,2.6vh,36px) 20px calc(clamp(20px,3.6vh,44px) + env(safe-area-inset-bottom));
  opacity:1; transition:opacity .55s ease, transform .6s cubic-bezier(.5,.1,.4,1);
}
#kc-arr.karr-melt{opacity:0; transform:scale(1.035); pointer-events:none}

.karr-counter{
  position:relative;
  width:min(720px,94vw);
  display:grid; place-items:center;
  align-self:center;
  min-height:min(50svh,460px);
}
.karr-pool{
  position:absolute; left:50%; top:56%;
  width:min(620px,92vw); height:56%;
  transform:translate(-50%,-38%);
  background:radial-gradient(closest-side, rgba(255,251,244,.85), rgba(255,251,244,0) 72%);
  filter:blur(2px); pointer-events:none;
}
.karr-shadow{
  position:absolute; left:50%; top:76.5%;
  width:calc(var(--kbw)*1.28); height:56px;
  transform:translate(-50%,-50%) scaleX(.82);
  background:radial-gradient(closest-side, rgba(67,37,36,.34), rgba(67,37,36,0) 70%);
  filter:blur(3px); opacity:.7;
  transition:transform .5s cubic-bezier(.4,.9,.3,1), opacity .5s;
}
.karr-st-close .karr-shadow{transform:translate(-50%,-50%) scaleX(1); opacity:1}
.karr-open .karr-shadow{opacity:0; transition:.4s}

.karr-boxbtn{
  position:relative;
  appearance:none; border:0; background:none; cursor:pointer;
  padding:30px 30px 8px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  font:inherit; color:inherit;
}
.karr-boxbtn:focus-visible{outline:3px solid #8d4f5e; outline-offset:10px; border-radius:22px}
.karr-world{
  width:var(--kbw); height:calc(var(--kbh) + 175px);
  perspective:1250px; perspective-origin:50% 34%;
}
.karr-boxwrap{
  position:absolute; left:50%; bottom:20px;
  width:var(--kbw); height:var(--kbh);
  transform:translateX(-50%);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.5,0,.8,.4);
}
.karr-open .karr-boxwrap{transform:translateX(-50%) translateY(330px)}
.karr-box3{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(-20deg) rotateY(-14deg) rotateZ(-1.1deg);
}
.karr-face{position:absolute; display:block}
.karr-world,.karr-boxwrap,.karr-box3,.karr-hinge,.karr-lid,.karr-ltop,.karr-ltuck,.karr-slice,.karr-seal{display:block}
.karr-front,.karr-back,.karr-inback{width:var(--kbw); height:var(--kbh); left:0; top:0}
.karr-front{
  transform:translateZ(calc(var(--kbd)/2));
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 38%),
    repeating-linear-gradient(90deg, rgba(67,37,36,.012) 0 2px, transparent 2px 7px),
    #fbf5ee;
  box-shadow:inset 0 0 0 1px rgba(67,37,36,.10), inset 0 -2px 0 rgba(67,37,36,.06);
  backface-visibility:hidden;
}
.karr-back{transform:rotateY(180deg) translateZ(calc(var(--kbd)/2)); background:#e2d2c2; backface-visibility:hidden}
.karr-inback{
  transform:translateZ(calc(var(--kbd)/2 * -1 + 1px));
  background:linear-gradient(180deg, #f3e9dd, #eee2d6);
  backface-visibility:hidden;
}
.karr-left,.karr-right{width:var(--kbd); height:var(--kbh); left:calc((var(--kbw) - var(--kbd))/2); top:0}
.karr-left{
  transform:rotateY(-90deg) translateZ(calc(var(--kbw)/2));
  background:repeating-linear-gradient(90deg, rgba(67,37,36,.02) 0 2px, transparent 2px 6px), #eee2d6;
  box-shadow:inset 0 0 0 1px rgba(67,37,36,.08);
  backface-visibility:hidden;
}
.karr-right{
  transform:rotateY(90deg) translateZ(calc(var(--kbw)/2));
  background:#e2d2c2;
  box-shadow:inset 0 0 0 1px rgba(67,37,36,.10);
  backface-visibility:hidden;
}
.karr-bottom{
  width:var(--kbw); height:var(--kbd); left:0; top:calc((var(--kbh) - var(--kbd))/2);
  transform:rotateX(90deg) translateZ(calc(var(--kbh)/2 * -1));
  background:#f3e9dd;
  backface-visibility:visible;
}
.karr-hinge{
  position:absolute; left:-4px; top:0; width:calc(var(--kbw) + 8px); height:0;
  transform:translateZ(calc(var(--kbd)/-2));
  transform-style:preserve-3d;
}
.karr-lid{
  position:absolute; left:0; top:0;
  width:100%; height:calc(var(--kbd) + 6px);
  transform-origin:50% 0;
  transform:rotateX(156deg);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.9,.3,1.04);
  will-change:transform;
}
.karr-st-close .karr-lid{transform:rotateX(90deg)}
.karr-open .karr-lid{transform:rotateX(285deg); transition-duration:.38s}
.karr-ltop{
  position:absolute; inset:0;
  background:
    radial-gradient(150% 130% at 30% 8%, rgba(255,255,255,.6), rgba(255,255,255,0) 62%),
    repeating-linear-gradient(0deg, rgba(67,37,36,.012) 0 2px, transparent 2px 7px),
    #fbf5ee;
  box-shadow:inset 0 0 0 1px rgba(67,37,36,.12);
  backface-visibility:visible;
}
.karr-ltuck{
  position:absolute; left:3px; top:100%;
  width:calc(100% - 6px); height:26px;
  transform-origin:50% 0;
  transform:rotateX(-90deg) translateZ(1px);
  background:linear-gradient(180deg, #fbf5ee 0%, #eee2d6 100%);
  box-shadow:inset 0 0 0 1px rgba(67,37,36,.12);
  border-radius:0 0 7px 7px;
  backface-visibility:visible;
}
.karr-seal{
  position:absolute; right:11%; top:46%;
  width:34%; aspect-ratio:1;
  transform:rotate(-12deg) scale(1.6);
  opacity:0;
  filter:drop-shadow(0 4px 7px rgba(67,37,36,.28));
  pointer-events:none;
}
.karr-seal img{width:100%; height:auto; display:block}
.karr-st-seal .karr-seal{opacity:1; transform:rotate(-5deg) scale(1); transition:transform .34s cubic-bezier(.3,1.6,.4,1), opacity .12s}
.karr-slice{
  position:absolute; left:50%; top:0;
  width:calc(var(--kbw)*.5);
  transform:translate(-50%, calc(var(--kbh)*-1.62)) rotate(-5deg);
  transition:transform .82s cubic-bezier(.34,.75,.3,1.02);
  pointer-events:none;
}
.karr-slice img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 16px 14px rgba(67,37,36,.35));
}
.karr-st-drop .karr-slice{transform:translate(-50%, calc(var(--kbh)*.05)) rotate(1.4deg)}
.karr-open .karr-slice{transform:translate(-50%, calc(var(--kbh)*-1.3)) rotate(-2deg) scale(.9); opacity:0; transition:transform .6s ease .05s, opacity .45s ease .15s}
.karr-st-drop .karr-boxwrap{animation:karrsquash .34s cubic-bezier(.35,1.5,.45,1) .74s}
@keyframes karrsquash{0%{transform:translateX(-50%) scaleY(1)}45%{transform:translateX(-50%) scaleY(.975) scaleX(1.012)}100%{transform:translateX(-50%) scaleY(1)}}
.karr-st-seal .karr-boxwrap{animation:karrdip .3s ease-out}
@keyframes karrdip{40%{transform:translateX(-50%) translateY(3px)}100%{transform:translateX(-50%)}}

.karr-tag{
  position:absolute; right:6%; bottom:4%;
  transform:rotate(7deg);
  pointer-events:none;
  opacity:0; transition:opacity .5s ease .28s;
}
.karr-st-rise .karr-tag{opacity:1}
.karr-open .karr-tag{opacity:0; transition:.2s}
.karr-tag::before{
  content:""; position:absolute; right:96%; bottom:78%;
  width:42px; height:26px;
  border:2px solid #8d4f5e; border-color:transparent transparent #8d4f5e #8d4f5e;
  border-radius:0 0 0 26px;
  transform:rotate(12deg);
}
.karr-tag i{
  display:block; font-style:normal;
  background:#fdf8f3;
  border:1px solid rgba(67,37,36,.22);
  border-radius:10px 14px 14px 10px;
  padding:9px 16px 10px 20px;
  box-shadow:0 5px 10px rgba(67,37,36,.18);
  position:relative;
}
.karr-tag i::before{
  content:""; position:absolute; left:7px; top:50%;
  width:7px; height:7px; border-radius:50%;
  transform:translateY(-50%);
  background:#fddbe2; box-shadow:inset 0 0 0 1.5px rgba(67,37,36,.35);
}
.karr-tag b{font-family:var(--kc-script,'Norican',cursive); font-weight:400; font-size:1.35rem; color:#8d4f5e; display:block; line-height:1}
.karr-tag small{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#432524; opacity:.75; display:block; margin-top:3px}

.karr-fly{
  position:absolute; left:50%; top:60%;
  width:var(--kfw,150px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.22);
  filter:drop-shadow(0 18px 16px rgba(67,37,36,.3));
  pointer-events:none;
}
.karr-fly img{width:100%; height:auto; display:block}
.karr-open .karr-fly{
  animation:karrburst .72s cubic-bezier(.3,.72,.32,1) var(--kfd,0s) both;
}
@keyframes karrburst{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.22)}
  12%{opacity:1}
  58%{transform:translate(-50%,-50%) var(--kover) scale(1.07)}
  86%{opacity:1}
  100%{opacity:0; transform:translate(-50%,-50%) var(--kland) translateY(-26px) scale(1)}
}
.karr-f1{--kland:translate(-198%,-64%) rotate(-6deg);  --kover:translate(-220%,-76%) rotate(-11deg)}
.karr-f2{--kland:translate(104%,-66%) rotate(5deg);    --kover:translate(120%,-78%) rotate(10deg);  --kfd:.05s}
.karr-f3{--kland:translate(-150%,-140%) rotate(-4deg); --kover:translate(-166%,-158%) rotate(-9deg);--kfd:.1s}
.karr-f4{--kland:translate(64%,-142%) rotate(4deg);    --kover:translate(74%,-160%) rotate(9deg);   --kfd:.15s}
.karr-f5{--kland:translate(-46%,-146%) rotate(-2deg);  --kover:translate(-46%,-166%) rotate(-6deg); --kfd:.2s}

.karr-below{
  position:relative;
  text-align:center;
  max-width:680px;
  display:grid; justify-items:center;
  gap:13px;
}
.karr-below > *{opacity:0; transform:translateY(14px); transition:opacity .46s ease, transform .46s cubic-bezier(.3,.9,.3,1)}
.karr-below > *:nth-child(2){transition-delay:.09s}
.karr-below > *:nth-child(3){transition-delay:.18s}
.karr-st-rise .karr-below > *{opacity:1; transform:translateY(0)}
.karr-open .karr-below > *{opacity:0; transform:translateY(16px); transition:opacity .3s ease, transform .3s ease}
.karr-title{
  font-weight:400;
  font-size:clamp(1.6rem,4.4vw,2.4rem);
  line-height:1.16;
}
.karr-title .karr-script{
  font-family:var(--kc-script,'Norican',cursive); font-weight:400;
  color:#8d4f5e;
  font-size:1.12em;
}
.karr-sub{font-size:clamp(.96rem,2.3vw,1.06rem); opacity:.85; max-width:46ch}
.karr-doors{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px; margin-top:8px;
}
.karr-door{
  position:relative;
  min-height:48px;
  display:inline-flex; align-items:center;
  font-size:1rem;
  color:#fdf8f3;
  background:#432524;
  text-decoration:none;
  padding:0 24px 0 32px;
  border-radius:3px 12px 12px 3px;
  box-shadow:0 6px 14px rgba(67,37,36,.28);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.karr-door::before{
  content:""; position:absolute; left:11px; top:50%;
  width:8px; height:8px; border-radius:50%;
  transform:translateY(-50%);
  background:#fddbe2;
  box-shadow:inset 0 0 0 5px #432524, 0 0 0 1.4px rgba(253,219,226,.55);
}
.karr-door::after{
  content:""; position:absolute; inset:3px;
  border:1px dashed rgba(253,219,226,.4);
  border-radius:2px 10px 10px 2px;
  pointer-events:none;
}
.karr-door:hover{transform:translateY(-2px); box-shadow:0 10px 18px rgba(67,37,36,.34); background:#5e2430}
.karr-door:focus-visible{outline:3px solid #8d4f5e; outline-offset:4px}

@media (max-width:700px){
  #kc-arr{--kbw:min(62vw,246px); --kbd:calc(var(--kbw)*.72); --kbh:calc(var(--kbw)*.46)}
  .karr-counter{min-height:44svh}
  .karr-world{perspective:1100px; height:calc(var(--kbh) + 150px)}
  .karr-fly{--kfw:112px}
  .karr-doors{gap:10px}
  .karr-door{padding:0 18px 0 28px; font-size:.96rem}
  .karr-f1{--kland:translate(-128%,-70%) rotate(-6deg); --kover:translate(-142%,-82%) rotate(-11deg)}
  .karr-f2{--kland:translate(40%,-72%) rotate(5deg); --kover:translate(48%,-84%) rotate(10deg)}
  .karr-f3{--kland:translate(-118%,-160%) rotate(-4deg); --kover:translate(-130%,-178%) rotate(-9deg)}
  .karr-f4{--kland:translate(30%,-162%) rotate(4deg); --kover:translate(36%,-180%) rotate(9deg)}
  .karr-f5{--kland:translate(-46%,-190%) rotate(-2deg); --kover:translate(-46%,-210%) rotate(-6deg)}
}
@media (max-width:700px) and (max-height:790px){
  #kc-arr{--kbw:min(54vw,208px)}
  .karr-counter{min-height:37svh}
  .karr-world{height:calc(var(--kbh) + 125px)}
  .karr-below{gap:8px}
  .karr-title{font-size:1.45rem}
  .karr-sub{font-size:.9rem}
  .karr-door{min-height:46px; font-size:.92rem}
  .karr-tag b{font-size:1.15rem}
  .karr-tag small{font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  html.kc-arr-on #kc-arr{display:none}
}