/* Hive Workshops craft signature "cafe" — counter illustration + order builder + flip cards. Everything visible without JS; html.cf-js gates the start states. */
.ca{max-width:560px;margin:0 auto}
.ca [hidden]{display:none!important}
.ca-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ca-stage{position:relative;aspect-ratio:7/5;border-radius:18px;overflow:hidden;background:var(--sig-bg)}
.ca-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ca-bub{position:absolute;max-width:58%;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 16px rgba(23,60,107,.12)}
.ca-bub::after{content:"";position:absolute;bottom:-6px;width:10px;height:10px;background:var(--paper);border:solid var(--line);transform:rotate(45deg)}
.ca-you{left:4%;top:6%;max-width:68%}.ca-you::after{left:18px;border-width:0 1px 1px 0}
.ca-them{right:3%;top:52%;max-width:41%}.ca-them::after{right:18px;border-width:0 1px 1px 0}
.ca-line{margin:0;font:600 clamp(18px,2.6vw,24px)/1.15 var(--f-hand);color:var(--ink)}
.ca-bub small{display:block;margin-top:4px;font:600 12.5px/1.3 var(--f-body);color:var(--mute)}
.ca-gloss{margin:10px 0 0;text-align:center;font-size:15px;color:var(--mute)}
.ca-q{margin:14px 0 8px;font:800 12px/1.3 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.ca-row{display:flex;flex-wrap:wrap;gap:8px}
.ca-tile{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:46px;padding:7px 14px;border:1.5px solid #C7D8EE;border-radius:12px;background:var(--paper);color:var(--ink);font:600 17px/1.1 var(--f-hand);cursor:pointer;transition:transform .15s ease,background-color .2s,border-color .2s}
.ca-tile small{font:600 11.5px/1.2 var(--f-body);color:var(--mute)}
.ca-none{justify-content:center;font:600 14px/1.1 var(--f-body)}
.ca-tile[aria-pressed=true]{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.ca-tile[aria-pressed=true] small{color:#DCE8F7}
.ca-tile:focus-visible,.ca-card:focus-visible,.ca-again:focus-visible,.ca-hear:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.ca-please{margin:14px 0 0;font-size:14.5px;color:var(--mute)}
.ca-please b{font:600 20px/1 var(--f-hand);color:var(--accent-ink);margin-right:8px}
.ca-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ca-again,.ca-hear{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:6px 16px;border:1.5px dashed #C7D8EE;border-radius:999px;background:var(--paper);color:var(--ink);font:600 15px/1 var(--f-body);cursor:pointer}
.ca-hear-note,.ca-cap{margin:10px 0 0;font-size:13.5px;color:var(--mute)}
.ca-cards-w{margin-top:26px}
.ca-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ca-card{position:relative;min-height:124px;padding:0;border:0;background:none;cursor:pointer;perspective:900px;-webkit-perspective:900px;text-align:left}
.ca-card-in{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.1,.2,1)}
.ca-card[aria-pressed=true] .ca-card-in{transform:rotateY(180deg)}
.ca-card-f,.ca-card-b{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);box-shadow:0 6px 16px rgba(23,60,107,.1);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(0deg) translateZ(1px);-webkit-transform:rotateY(0deg) translateZ(1px)}
.ca-card-f b{font:600 clamp(20px,2.4vw,24px)/1.1 var(--f-hand);color:var(--accent-ink)}
.ca-card-f small{font:600 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ca-card-b{transform:rotateY(180deg) translateZ(1px);-webkit-transform:rotateY(180deg) translateZ(1px);background:var(--pop3)}
.ca-card-f,.ca-card-b{transition:opacity 0s .3s}.ca-card-b{opacity:0}.ca-card[aria-pressed=true] .ca-card-b{opacity:1}.ca-card[aria-pressed=true] .ca-card-f{opacity:0}
.ca-card-b b{font:800 15px/1.2 var(--f-body);color:var(--ink)}
.ca-card-b small{font:500 12.5px/1.3 var(--f-body);color:var(--ink)}
/* motion: JS-armed only */
.cf-js .ca-cup{transform:translateX(150px);opacity:0;will-change:transform}
.cf-js .ca-go .ca-cup{transform:none;opacity:1;will-change:auto;transition:transform .7s cubic-bezier(.34,1.56,.64,1) .55s,opacity .3s ease .55s}
.cf-js .ca-them{opacity:0;transform:translateY(10px) scale(.92)}
.cf-js .ca-go .ca-them{opacity:1;transform:none;transition:opacity .4s ease .95s,transform .45s cubic-bezier(.34,1.56,.64,1) .95s}
.cf-js .ca-w{display:inline-block;opacity:0;transform:translateY(6px)}
.cf-js .ca-go .ca-w{opacity:1;transform:none;transition:opacity .3s ease calc(var(--i)*90ms),transform .35s ease calc(var(--i)*90ms)}
.ca-st{transform-box:fill-box}
.cf-js .ca-st{opacity:0}
.ca-live.ca-go .ca-st{animation:ca-steam 2.8s ease-in-out infinite}
.ca-live.ca-go .ca-st2{animation-delay:-.9s}.ca-live.ca-go .ca-st3{animation-delay:-1.8s}
@keyframes ca-steam{0%{opacity:0;transform:translateY(6px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-18px)}}
.ca-spark{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.ca-thanked .ca-spark{animation:ca-pop .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ca-pop{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.cf-js .ca-cup,.cf-js .ca-them,.cf-js .ca-w{transform:none!important;opacity:1!important;transition:none!important}.ca-st,.ca-spark{animation:none!important}.ca-card-in,.ca-card-f,.ca-card-b{transition:none!important}}
@media (max-width:420px){.ca-bub{padding:7px 10px}.ca-them{max-width:43%}.ca-line{font-size:16px}.ca-bub small{font-size:11.5px}}
html:lang(ja) .ca-q{text-transform:none;letter-spacing:.04em}
html:lang(ja) .ca-card-b b,html:lang(ja) .ca-card-b small,html:lang(ja) .ca-bub small{font-family:inherit}
html:lang(ja) .ca-tile{font-family:var(--f-hand)}
html:lang(ja) .ca-tile small{font-family:inherit}