/* A small order story for the concept-cafe edition. */
.concafe-demo-section {
  --concafe-accent: var(--vertical-accent, #8a68ce);
  --concafe-soft: var(--vertical-soft, #f0e7ff);
  --concafe-ink: var(--vertical-ink, #40325f);
  background: radial-gradient(circle at 94% 4%, #efdfff 0, transparent 28%), #faf8ff;
}
.concafe-demo-section h2 { line-height: 1.5; }
.concafe-demo-section .section-lead { color: #5a5a78; }
.concafe-demo {
  position: relative;
  isolation: isolate;
  margin-top: 27px;
  min-width: 0;
  overflow: hidden;
  border: 2px solid #183e77;
  border-radius: 20px;
  background: #fffcf8;
  color: #193b70;
  box-shadow: 5px 7px 0 #263e7314;
}
.concafe-demo *, .concafe-demo-links * { min-width: 0; }
.concafe-demo button, .concafe-demo-links a { min-height: 44px; touch-action: manipulation; }
.concafe-demo button:focus-visible, .concafe-demo-links a:focus-visible { outline: 3px solid #d39d2a; outline-offset: 3px; }
.concafe-demo-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; background: linear-gradient(115deg, #153d8e, #102b5a); color: #fff; }
.concafe-demo-brand { font: 800 15px/1.3 var(--display, sans-serif); letter-spacing: .1px; }
.concafe-demo-brand i { margin: 0 5px; color: #efc765; font-style: normal; }
.concafe-demo-topbar > span:last-child { font-size: 9px; font-weight: 700; color: #ecd28b; white-space: nowrap; }
.concafe-demo-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 8px 16px; border-bottom: 1px solid #e9e2ef; color: #77708d; font-size: 9px; }
.concafe-demo-context strong { font: 800 10px/1.7 var(--display, sans-serif); letter-spacing: 1.3px; color: #5c5682; }
.concafe-demo-intro { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 24px 12px 20px; }
.concafe-demo-intro p { font-size: 18px; font-weight: 800; line-height: 1.6; letter-spacing: -.3px; }
.concafe-demo-intro p strong { color: var(--concafe-ink); background: linear-gradient(transparent 63%, #efc7655e 63%, #efc7655e 92%, transparent 92%); }
.concafe-demo-intro > div > span { display: block; margin-top: 5px; font-size: 10px; color: #716d88; }
.concafe-demo-stamp { position: relative; display: grid; place-content: center; width: 78px; height: 78px; flex: none; border: 2px solid var(--concafe-accent); border-radius: 50%; outline: 1px dashed var(--concafe-accent); outline-offset: -7px; background: var(--concafe-soft); color: var(--concafe-ink); font: 900 10px/1.25 var(--display, sans-serif); text-align: center; letter-spacing: 1.3px; transform: rotate(-12deg); }
.concafe-demo-stamp > span { position: absolute; right: -7px; top: -7px; color: #bd8b22; font-size: 29px; }
.concafe-demo-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0 16px; }
.concafe-demo-steps button { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 9px 2px 12px; border: 1px solid #dcd6e8; border-radius: 9px; background: #f5f2fa; color: #79728e; overflow: hidden; transition: background .25s, color .25s, border-color .25s; }
.concafe-demo-steps button > span { font: 800 10px/1 var(--display, sans-serif); letter-spacing: 1px; }
.concafe-demo-steps button > strong { font-size: 10px; font-weight: 800; line-height: 1.4; }
.concafe-demo-steps button[aria-pressed="true"] { border-color: #244f99; background: #1c4999; color: #fff; }
.concafe-demo-steps button[aria-pressed="true"] > span { color: #f5d98f; }
.concafe-demo-steps button > i { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #25355c12; }
.concafe-demo-steps button > i > b { display: block; width: 100%; height: 100%; background: #ecc769; transform: scaleX(0); transform-origin: left; }
.concafe-demo-caption { min-height: 42px; display: grid; place-items: center; padding: 10px 13px 6px; color: #5a517d; text-align: center; font-size: 10px; font-weight: 700; line-height: 1.6; }
.concafe-demo-workbench { position: relative; padding: 0 16px 18px; overflow: hidden; }
.concafe-demo-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 9px; }
.concafe-demo-label > span { font: 800 9px/1.4 var(--display, sans-serif); letter-spacing: 1.3px; color: #8a7f9f; }
.concafe-demo-label > strong { font-size: 11px; color: #4b5070; }
.concafe-demo-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.concafe-demo-product { position: relative; display: flex; flex-direction: column; align-items: center; padding: 11px 4px 10px; border: 1px solid #ddd5e9; border-radius: 13px; background: white; color: #234375; transition: border-color .25s, background .25s, box-shadow .25s; }
.concafe-demo-product:hover { border-color: var(--concafe-accent); }
.concafe-demo-product[aria-pressed="true"] { border-color: var(--concafe-accent); background: var(--concafe-soft); box-shadow: 0 3px 0 #76569c33; }
.concafe-demo-product > strong { margin-top: 6px; font-size: 12px; font-weight: 800; }
.concafe-demo-product > span:not(.concafe-demo-product-art) { margin-top: 2px; font: 700 12px/1.4 var(--display, sans-serif); letter-spacing: .2px; color: #77708d; }
.concafe-demo-product-art { position: relative; display: block; width: 66px; height: 75px; }
.concafe-demo-product-art > b { position: absolute; left: 0; right: 0; bottom: 0; font: italic 700 8px/1.2 Georgia, serif; text-align: center; letter-spacing: .4px; color: #7a648e; }
.concafe-demo-art-cheki { width: 59px; height: 73px; border: 1px solid #cfbfdc; background: #fff; box-shadow: 2px 3px 0 #d7bfd64d; transform: rotate(-7deg); padding: 5px 5px 17px; }
.concafe-demo-art-cheki > i { display: grid; place-items: center; height: 100%; background: radial-gradient(circle at 65% 32%, #fff7e7 0 15%, transparent 16%), linear-gradient(145deg, #ded6f8, #c2cbee); color: #8d72bc; font-size: 31px; font-style: normal; }
.concafe-demo-art-cheki > b { bottom: 5px; }
.concafe-demo-art-cocktail svg, .concafe-demo-art-goods svg { display: block; width: 66px; height: 65px; overflow: visible; }
.concafe-demo-art-cocktail svg path:first-child { fill: #f6bad6; stroke: #9b618c; stroke-width: 2; stroke-linejoin: round; }
.concafe-demo-art-cocktail svg path:not(:first-child) { fill: none; stroke: #8b5b88; stroke-width: 2; stroke-linecap: round; }
.concafe-demo-art-cocktail svg circle { fill: #f8df9d; stroke: #b78a42; stroke-width: 1.5; }
.concafe-demo-art-goods svg path:first-child { fill: #e5dcfc; stroke: #8063aa; stroke-width: 2; stroke-linejoin: round; }
.concafe-demo-art-goods svg path:nth-child(2) { fill: none; stroke: #8063aa; stroke-width: 2; }
.concafe-demo-art-goods svg path:last-child { fill: #f0d17c; stroke: #c5a24a; stroke-width: 1; stroke-linejoin: round; }
.concafe-demo-selected { position: absolute; display: grid; place-items: center; top: 5px; right: 5px; width: 17px; height: 17px; border-radius: 50%; background: #274e9c; color: white; font-size: 10px; font-style: normal; opacity: 0; }
.concafe-demo-product[aria-pressed="true"] .concafe-demo-selected { opacity: 1; }
.concafe-demo-cast-area { margin-top: 16px; }
.concafe-demo-casts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.concafe-demo-casts button { position: relative; padding: 4px 3px 7px; border: 1px solid #d9dfeb; border-radius: 11px; background: #f6f8fc; color: #486084; transition: background .25s, border-color .25s, box-shadow .25s; }
.concafe-demo-casts button[aria-pressed="true"] { border-color: #be9b46; background: #fff3d1; box-shadow: 0 3px 0 #b78b2d30; }
.concafe-demo-casts button > strong { display: block; margin-top: 2px; font-size: 11px; font-weight: 800; }
.concafe-demo-portrait { display: block; width: 100%; max-width: 75px; margin: auto; border-radius: 7px; aspect-ratio: 1; }
.concafe-demo-casts button > i { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #bd9237; color: white; font-size: 9px; font-style: normal; opacity: 0; }
.concafe-demo-casts button[aria-pressed="true"] > i { opacity: 1; }
.concafe-demo-connector { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 43px; color: #9c89b8; }
.concafe-demo-connector > i { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed #ccbedd; }
.concafe-demo-connector > span { position: relative; padding: 2px 6px; background: #fffcf8; font-size: 9px; font-weight: 700; }
.concafe-demo-connector > b { position: relative; font: 700 16px/1 var(--display, sans-serif); background: #fffcf8; color: #bd9339; }
.concafe-demo-ticket { position: relative; padding: 14px 15px 12px; border: 1px solid #ded8ca; border-radius: 3px 3px 10px 10px; background: #fff; box-shadow: 0 4px 10px #173d7910; transition: border-color .35s, box-shadow .35s; }
.concafe-demo-ticket::before { position: absolute; top: -3px; left: 6px; right: 6px; content: ""; height: 5px; background: radial-gradient(circle at 5px 0, #fffcf8 0 3px, transparent 3.5px) repeat-x; background-size: 11px 5px; }
.concafe-demo-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed #d9d6df; }
.concafe-demo-ticket-top > div { display: flex; align-items: center; gap: 10px; }
.concafe-demo-ticket-top > div > span { font: 800 9px/1.2 var(--display, sans-serif); color: #857c92; letter-spacing: 1px; }
.concafe-demo-ticket-top > div > strong { font: 800 27px/1 var(--display, sans-serif); color: #254a84; }
.concafe-demo-ticket-top > div > strong > span { font: 700 10px/1.3 var(--sans, sans-serif); margin-left: 2px; }
.concafe-demo-ticket-tag { padding: 3px 6px; border: 1px solid #dad6e6; border-radius: 4px; font-size: 9px; color: #8d819b; }
.concafe-demo-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0 9px; }
.concafe-demo-ticket-row > div > strong { display: block; font-size: 14px; font-weight: 800; }
.concafe-demo-ticket-row small { color: #817892; font: 600 10px/1.5 var(--display, sans-serif); }
.concafe-demo-ticket-row > div > span { display: block; margin-top: 2px; font-size: 10px; color: #837690; }
.concafe-demo-ticket-row > div > span > b { font-weight: 700; color: #67577c; }
.concafe-demo-ticket-row > strong { font: 800 22px/1.3 var(--display, sans-serif); color: #244c97; letter-spacing: -.5px; }
.concafe-demo-ticket > p { font-size: 9px; color: #8b8299; }
.concafe-demo-ticket-spark { position: absolute; top: -12px; right: 4px; color: #d4ab50; font-size: 23px; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s; }
.concafe-demo-ticket[data-concafe-ready="true"] { border-color: #bea053; box-shadow: 0 4px 0 #dfc4702b, 0 10px 18px #b2913820; }
.concafe-demo-ticket[data-concafe-ready="true"] .concafe-demo-ticket-tag { background: #fff4d6; color: #8c6c22; border-color: #d9bb69; }
.concafe-demo-ticket[data-concafe-ready="true"] .concafe-demo-ticket-spark { opacity: 1; transform: scale(1) rotate(8deg); }
.concafe-demo-connector-record { height: 37px; }
.concafe-demo-ledger { padding: 13px 13px 0; border: 1px solid #d6c9e7; border-radius: 15px; overflow: hidden; background: #f7f2ff; transition: border-color .35s, box-shadow .35s; }
.concafe-demo-ledger-person { display: flex; align-items: center; gap: 10px; }
.concafe-demo-ledger-portrait { width: 52px; height: 52px; flex: none; border: 2px solid white; border-radius: 12px; background-color: #e3d5f4; box-shadow: 0 2px 0 #b79bcc33; }
.concafe-demo-ledger-person > div { flex: 1; }
.concafe-demo-ledger-person > div > span { color: #9a7cb4; font: 800 8px/1.3 var(--display, sans-serif); letter-spacing: 1px; }
.concafe-demo-ledger-person h3 { margin-top: 3px; color: var(--concafe-ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.concafe-demo-ledger-person h3 > b { font-weight: 900; }
.concafe-demo-ledger-person p { margin-top: 3px; color: #8a7a9b; font-size: 9px; line-height: 1.5; }
.concafe-demo-record-check { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border: 1px solid #c7b2dc; border-radius: 50%; color: #bba5cf; font-size: 13px; font-weight: 900; }
.concafe-demo-totals { display: grid; grid-template-columns: 1fr .65fr 1.2fr; gap: 5px; margin: 14px 0 12px; padding: 10px 0; border-top: 1px solid #dfd4ec; }
.concafe-demo-totals > div { text-align: center; padding: 0 3px; }
.concafe-demo-totals > div + div { border-left: 1px solid #dfd4ec; }
.concafe-demo-totals dt { color: #8e7c9e; font-size: 9px; }
.concafe-demo-totals dd { margin: 4px 0 0; color: var(--concafe-ink); font-size: 13px; font-weight: 800; }
.concafe-demo-totals > div:not(:first-child) dd { font: 800 20px/1.3 var(--display, sans-serif); }
.concafe-demo-totals dd > span { margin-left: 2px; font: 600 10px/1.3 var(--sans, sans-serif); }
.concafe-demo-back-note { margin: 0 -13px; padding: 10px 7px; background: #ece0fb; color: #70508e; text-align: center; font-size: 10px; font-weight: 800; }
.concafe-demo-back-note > span { display: inline-block; color: #ad8229; margin-right: 2px; }
.concafe-demo-ledger[data-concafe-ready="true"] { border-color: var(--concafe-accent); box-shadow: 0 4px 0 #8b66b724, 0 10px 20px #8c66bb16; }
.concafe-demo-ledger[data-concafe-ready="true"] .concafe-demo-record-check { background: #8b68b9; border-color: #8b68b9; color: #fff; }
.concafe-demo-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #e5ddec; background: #f5f1fa; }
.concafe-demo-controls > p { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #756883; }
.concafe-demo-control-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: #b6a8c7; }
.concafe-demo[data-concafe-playback="playing"] .concafe-demo-control-dot { background: #a57b2a; box-shadow: 0 0 0 3px #e9d49c4d; }
.concafe-demo-controls button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #c9badc; border-radius: 9px; background: #fff; color: #5c4880; font-size: 10px; font-weight: 800; }
.concafe-demo-controls button > span:first-child { font: 800 14px/1 var(--display, sans-serif); }
.concafe-demo-controls button:disabled { color: #8d809d; border-color: #d8cfe1; background: #ede7f4; }
.concafe-demo-manual-hint { padding: 0 15px 12px; background: #f5f1fa; color: #8e809f; text-align: center; font-size: 9px; line-height: 1.7; }
.concafe-demo-flying-card { position: absolute; top: 0; left: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; width: 143px; height: 56px; padding: 8px 11px; border: 1px solid #a584c7; border-radius: 9px; background: #fffaf1; box-shadow: 0 8px 16px #3d225a26; pointer-events: none; will-change: transform, opacity; }
.concafe-demo-flying-card > strong { color: #5a3c78; font-size: 12px; font-weight: 800; }
.concafe-demo-flying-card > span { color: #927b9f; font-size: 9px; }
.concafe-demo-links { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }
.concafe-demo-links a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #dcd3e7; color: #4e4378; font-size: 11px; font-weight: 800; }
.concafe-demo-links a > span { color: #9b7730; font: 700 19px/1 var(--display, sans-serif); }
.concafe-demo-links a:last-child { color: #1d4b9c; }
.concafe-demo[data-concafe-motion="still"] *, body.motion-off .concafe-demo *, html[data-motion="off"] .concafe-demo * { transition: none !important; animation: none !important; }
@media (max-width: 380px) {
  .concafe-demo-topbar { padding: 12px 11px; }
  .concafe-demo-brand { font-size: 13px; }
  .concafe-demo-topbar > span:last-child { font-size: 8px; }
  .concafe-demo-context { padding: 8px 11px; }
  .concafe-demo-context strong { font-size: 9px; letter-spacing: .7px; }
  .concafe-demo-context > span { font-size: 8px; }
  .concafe-demo-intro { gap: 14px; padding: 21px 10px 18px; }
  .concafe-demo-intro p { font-size: 16px; }
  .concafe-demo-intro > div > span { font-size: 9px; }
  .concafe-demo-stamp { width: 66px; height: 66px; font-size: 9px; }
  .concafe-demo-steps { margin: 0 10px; gap: 4px; }
  .concafe-demo-steps button > strong { font-size: 9px; }
  .concafe-demo-workbench { padding: 0 10px 15px; }
  .concafe-demo-products { gap: 6px; }
  .concafe-demo-product { padding: 10px 3px 9px; }
  .concafe-demo-product-art { transform-origin: center; width: 54px; height: 64px; }
  .concafe-demo-art-cheki { width: 48px; height: 62px; padding: 4px 4px 15px; }
  .concafe-demo-art-cheki > b { font-size: 7px; }
  .concafe-demo-art-cocktail svg, .concafe-demo-art-goods svg { width: 54px; height: 55px; }
  .concafe-demo-product > strong { font-size: 11px; }
  .concafe-demo-product > span:not(.concafe-demo-product-art) { font-size: 11px; }
  .concafe-demo-selected { width: 14px; height: 14px; top: 4px; right: 4px; font-size: 8px; }
  .concafe-demo-casts { gap: 5px; }
  .concafe-demo-casts button > strong { font-size: 10px; }
  .concafe-demo-ticket { padding: 12px 10px 10px; }
  .concafe-demo-ticket-top > div { gap: 6px; }
  .concafe-demo-ticket-top > div > span { font-size: 8px; letter-spacing: .4px; }
  .concafe-demo-ticket-top > div > strong { font-size: 24px; }
  .concafe-demo-ticket-tag { font-size: 8px; padding: 3px 4px; }
  .concafe-demo-ticket-row > strong { font-size: 21px; }
  .concafe-demo-ledger { padding: 11px 9px 0; }
  .concafe-demo-ledger-portrait { width: 42px; height: 42px; }
  .concafe-demo-ledger-person { gap: 8px; }
  .concafe-demo-ledger-person h3 { font-size: 12px; }
  .concafe-demo-ledger-person p { font-size: 8px; }
  .concafe-demo-record-check { width: 21px; height: 21px; font-size: 11px; }
  .concafe-demo-totals > div:not(:first-child) dd { font-size: 18px; }
  .concafe-demo-back-note { margin: 0 -9px; font-size: 9px; }
  .concafe-demo-controls { padding: 10px; gap: 7px; }
  .concafe-demo-controls > p { font-size: 8px; }
  .concafe-demo-controls button { padding: 7px 8px; font-size: 9px; }
  .concafe-demo-manual-hint { font-size: 8px; padding: 0 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .concafe-demo *, .concafe-demo *::before, .concafe-demo *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* A single visible counter keeps the order, cast and result in the same shot. */
.concafe-demo-intro { justify-content:flex-start; padding:15px 16px 12px; }
.concafe-demo-intro p { font-size:14px; line-height:1.7; letter-spacing:0; }
.concafe-demo-intro>div>span { margin-top:2px; font-size:10px; }
.concafe-story-stage { position:relative; isolation:isolate; height:326px; margin:0 12px; overflow:hidden; border:1px solid #d0afdc; border-radius:17px; background:#f4dfed; color:#603c78; box-shadow:inset 0 0 0 5px #fff8; }
.concafe-story-stage::before { content:""; position:absolute; inset:38px 18px 36px; z-index:-1; border:1px solid #c49bd13b; border-radius:48% 48% 4px 4px; background:linear-gradient(180deg,#fffdf8,#faf0f6); box-shadow:inset 0 0 0 7px #fff7; }
.concafe-story-stage::after { content:""; position:absolute; inset:auto 0 0; height:64px; z-index:-1; background:repeating-linear-gradient(90deg,#b797c70f 0 1px,transparent 1px 35px),#e6d3ed; transform:perspective(160px) rotateX(10deg); transform-origin:bottom; }
.concafe-story-awning { display:flex; align-items:center; justify-content:center; gap:9px; height:28px; border-bottom:1px solid #b888c2; background:repeating-linear-gradient(90deg,#e1c2e6 0 22px,#fff4f8 22px 44px); }
.concafe-story-awning>span { padding:3px 12px; border:1px solid #b888c2; border-radius:12px; background:#fff8fa; color:#795389; font:800 8px/1.4 var(--display,sans-serif); letter-spacing:.12em; }
.concafe-story-awning>i { width:5px; height:5px; border:1px solid #b482b7; border-radius:50%; background:#f4d293; }
.concafe-story-table { position:absolute; top:42px; left:11px; display:grid; gap:1px; text-align:center; color:#9b7da9; font:700 6px/1.3 var(--display,sans-serif); letter-spacing:.08em; }
.concafe-story-table>b { font-size:24px; letter-spacing:-.03em; color:#a16e9a; }
.concafe-story-speech { position:absolute; top:39px; right:14px; left:54px; display:grid; place-items:center; min-height:38px; padding:8px 10px; border:1px solid #c19bce; border-radius:12px 12px 12px 2px; background:#fffdf8; color:#6f447e; text-align:center; font-size:11px; line-height:1.65; font-weight:800; box-shadow:2px 3px 0 #c8a3cd23; }
.concafe-story-guide { position:absolute; left:-23px; bottom:40px; width:181px; z-index:2; transform-origin:50% 88%; transition:left .95s cubic-bezier(.2,.8,.2,1),bottom .95s cubic-bezier(.2,.8,.2,1),width .95s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.2,.8,.2,1); }
.concafe-story-guide>.crew-sprite { width:100%; filter:drop-shadow(0 5px 2px #7545862b); transform-origin:50% 88%; }
.concafe-story-guide>i { position:absolute; bottom:1px; left:31%; width:38%; height:9px; z-index:-1; border-radius:50%; background:#7149851c; }
.concafe-story-product { position:absolute; top:94px; right:28px; width:108px; z-index:3; transform-origin:center 75%; transition:opacity .7s,transform 1s cubic-bezier(.2,.8,.2,1); }
.concafe-story-prop { display:grid; place-items:center; height:114px; }
.concafe-story-cheki { display:block; width:83px; height:109px; padding:6px 6px 19px; border:1px solid #cbb4d5; background:#fffdf7; box-shadow:5px 7px 0 #ad83ba28; transform:rotate(-8deg); }
.concafe-story-cheki>i { width:100%; border:1px solid #e3cedf; background-color:#ead9ed; }
.concafe-story-cheki>b { display:block; margin-top:4px; text-align:center; color:#a17aaa; font:italic 700 8px/1.2 Georgia,serif; }
.concafe-story-prop>svg { width:100px; height:110px; overflow:visible; }
.concafe-story-prop>svg path:first-child { stroke:#9864a6; stroke-width:2; stroke-linejoin:round; fill:#f0c3dd; }
.concafe-story-prop>svg path:not(:first-child) { stroke:#9864a6; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; fill:none; }
.concafe-story-prop>svg circle { fill:#fae1a2; stroke:#bb954a; stroke-width:1.5; }
.concafe-story-prop[data-concafe-story-prop="goods"]>svg path:first-child { fill:#e4d3f2; }
.concafe-story-prop[data-concafe-story-prop="goods"]>svg path:last-child { fill:#f5d894; stroke:#c19f56; }
.concafe-story-product-label { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:3px 7px; margin-top:5px; padding:4px; border-radius:5px; background:#fff8; font-size:11px; line-height:1.4; }
.concafe-story-product-label small { color:#94749e; font:700 10px/1.5 var(--display,sans-serif); }
.concafe-story-owner { position:absolute; top:216px; right:10px; z-index:4; display:flex; align-items:center; gap:7px; width:173px; padding:7px; border:1px solid #c88bab; border-radius:9px; background:#fff6f9; box-shadow:3px 4px 0 #d8aec52c; opacity:0; transform:translate(20px,10px) scale(.8); transition:opacity .6s,transform .85s cubic-bezier(.17,.8,.25,1); }
.concafe-story-owner>.cast-portrait { width:36px; border-radius:6px; }
.concafe-story-owner>div { flex:1; }
.concafe-story-owner small { display:block; color:#ac7b9d; font-size:8px; line-height:1.5; }
.concafe-story-owner b { display:block; color:#785080; font-size:12px; line-height:1.5; }
.concafe-story-owner>i { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#fff; background:#bd87aa; font-size:12px; font-style:normal; }
.concafe-story-pos { position:absolute; top:105px; right:10px; width:191px; z-index:3; padding:10px 12px 11px; border:6px solid #4c3a5b; border-radius:13px; background:#fffcf5; box-shadow:0 4px 0 #392b44,0 11px 18px #74458224; opacity:0; transform:translateY(24px) scale(.78); transform-origin:center bottom; transition:opacity .65s,transform .95s cubic-bezier(.2,.85,.2,1); }
.concafe-story-pos::after { content:""; position:absolute; left:36%; bottom:-23px; width:28%; height:18px; border-bottom:4px solid #6f5b80; background:#bca7c9; clip-path:polygon(25% 0,75% 0,85% 80%,100% 80%,100% 100%,0 100%,0 80%,15% 80%); }
.concafe-story-pos-top { display:flex; align-items:center; justify-content:space-between; gap:5px; padding-bottom:7px; border-bottom:1px dashed #d8bfdc; }
.concafe-story-pos-top>b { color:#86558f; font:800 24px/1 var(--display,sans-serif); }
.concafe-story-pos-top small { font:700 9px/1 var(--sans,sans-serif); }
.concafe-story-pos-top>span { font-size:8px; color:#9c82aa; }
.concafe-story-pos-line { display:grid; gap:3px; padding:9px 0 7px; }
.concafe-story-pos-line>strong { color:#664377; font-size:12px; line-height:1.5; }
.concafe-story-pos-line>span { color:#a485aa; font-size:9px; line-height:1.5; }
.concafe-story-pos-line>b { color:#835791; font:800 23px/1.2 var(--display,sans-serif); }
.concafe-story-pos-check { display:block; padding:3px 6px; border-radius:4px; background:#ead8f1; color:#9267a0; text-align:center; font-size:9px; font-style:normal; font-weight:800; }
.concafe-story-record { position:absolute; left:14px; top:107px; z-index:4; width:198px; padding:13px 12px 10px; border:1px solid #b38ac7; border-radius:11px 11px 3px 3px; background:#fffdf9; box-shadow:0 5px 0 #d9bbdf,0 13px 22px #79508b22; opacity:0; transform:translateY(24px) scale(.8) rotate(-5deg); transform-origin:center bottom; transition:opacity .65s,transform 1s cubic-bezier(.2,.8,.2,1); }
.concafe-story-record::before { content:""; position:absolute; top:-5px; left:calc(50% - 21px); width:42px; height:10px; background:#d8c2ebaf; transform:rotate(-3deg); }
.concafe-story-record-head { display:flex; align-items:center; gap:7px; }
.concafe-story-record-head>.cast-portrait { width:40px; border-radius:7px; }
.concafe-story-record-head>div { flex:1; }
.concafe-story-record-head small { display:block; color:#a288af; font-size:8px; line-height:1.4; }
.concafe-story-record-head strong { display:block; color:#775388; font-size:15px; line-height:1.6; }
.concafe-story-record-head>b { align-self:flex-start; color:#ba80a6; font-size:15px; }
.concafe-story-record-line { display:grid; gap:4px; padding-top:9px; margin-top:9px; border-top:1px dashed #d8c5e0; }
.concafe-story-record-line>span { color:#a183ac; font-size:9px; line-height:1.5; }
.concafe-story-record-line>strong { color:#815194; font:800 28px/1.15 var(--display,sans-serif); }
.concafe-story-record-track { display:block; height:5px; margin-top:7px; overflow:hidden; border-radius:4px; background:#f0e6f4; }
.concafe-story-record-track>i { display:block; width:100%; height:100%; border-radius:4px; background:#bc8dbb; transform-origin:left center; }
.concafe-story-record>p { color:#aa8bb3; font-size:8px; line-height:1.5; margin-top:6px; }
.concafe-story-counter { position:absolute; bottom:17px; left:8px; right:8px; height:33px; z-index:1; border:1px solid #c7a5d4; border-top:5px solid #aa82ba; border-radius:5px 5px 9px 9px; background:#eddcef; box-shadow:0 5px 0 #d4badf; }
.concafe-story-counter>span { position:absolute; right:10px; bottom:5px; color:#ac8cb5; font-size:8px; line-height:1.5; }
.concafe-story-arrival { position:absolute; bottom:22px; left:16px; z-index:5; padding:4px 8px; border:1px solid #c5a3d2; border-radius:5px; background:#fffdf5; color:#9b73aa; font-size:9px; line-height:1.4; transform-origin:left bottom; }
.concafe-demo[data-concafe-step="1"] .concafe-story-guide { transform:translate(12px,-5px) rotate(3deg); }
.concafe-demo[data-concafe-step="1"] .concafe-story-product { transform:translate(0,-5px) rotate(4deg); }
.concafe-demo[data-concafe-step="1"] .concafe-story-owner { opacity:1; transform:none; }
.concafe-demo[data-concafe-step="2"] .concafe-story-guide { transform:translate(-5px,5px) rotate(-3deg); }
.concafe-demo[data-concafe-step="2"] .concafe-story-product { opacity:.15; transform:translate(-2px,48px) scale(.54); }
.concafe-demo[data-concafe-step="2"] .concafe-story-owner { opacity:0; transform:translate(-45px,-40px) scale(.65); }
.concafe-demo[data-concafe-step="2"] .concafe-story-pos { opacity:1; transform:none; }
.concafe-demo[data-concafe-step="3"] .concafe-story-guide { left:calc(68% - 12px); bottom:40px; width:min(32%,142px); transform:none; }
.concafe-demo[data-concafe-step="3"] .concafe-story-product { opacity:0; transform:translate(-26px,70px) scale(.4); }
.concafe-demo[data-concafe-step="3"] .concafe-story-pos { opacity:.12; transform:translate(-25px,15px) scale(.88); }
.concafe-demo[data-concafe-step="3"] .concafe-story-record { max-width:59%; opacity:1; transform:none; }
.concafe-demo[data-concafe-step="3"] .concafe-story-arrival { border-color:#b380bb; background:#f5e7f2; color:#8e5a9c; }
.concafe-story-flight { position:absolute; top:0; left:0; z-index:8; width:132px; min-height:57px; padding:9px 10px; border:1px solid #b38bbd; border-radius:10px; background:#fff9f1; box-shadow:0 7px 18px #73508030; color:#70447c; pointer-events:none; opacity:0; }
.concafe-story-flight>strong { display:block; font-size:12px; line-height:1.5; }
.concafe-story-flight>span { display:block; margin-top:2px; color:#a581af; font-size:9px; line-height:1.5; }
.concafe-demo-caption { min-height:42px; padding:8px 13px; font-size:10px; }
.concafe-demo-controls { margin-top:12px; padding:9px 13px 7px; }
.concafe-demo-manual-hint { padding-bottom:9px; }
.concafe-demo-workbench { padding-top:9px; }
.concafe-demo-workbench .concafe-demo-product { padding:8px 3px; }
.concafe-demo-workbench .concafe-demo-product-art { width:40px; height:42px; }
.concafe-demo-workbench .concafe-demo-art-cheki { width:32px; height:42px; padding:3px 3px 10px; }
.concafe-demo-workbench .concafe-demo-art-cheki>i { font-size:19px; }
.concafe-demo-workbench .concafe-demo-product-art>b { font-size:5px; bottom:2px; }
.concafe-demo-workbench .concafe-demo-art-cocktail svg,.concafe-demo-workbench .concafe-demo-art-goods svg { width:40px; height:40px; }
.concafe-demo-workbench .concafe-demo-casts button { display:flex; align-items:center; flex-direction:column; gap:2px; padding:5px 3px; }
.concafe-demo-workbench .concafe-demo-portrait { width:43px; }
.concafe-demo-workbench .concafe-demo-casts button>strong { margin:0; }
.concafe-demo-records { margin-top:17px; border-top:1px solid #ddcde6; }
.concafe-demo-records>summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:47px; padding:10px 0; color:#896696; font-size:10px; line-height:1.5; font-weight:800; list-style:none; cursor:pointer; }
.concafe-demo-records>summary::-webkit-details-marker { display:none; }
.concafe-demo-records>summary>span { color:#ad84b7; font-size:17px; }
.concafe-demo-records[open]>summary>span { transform:rotate(45deg); }
@media(max-width:380px) {
  .concafe-demo-intro { padding:12px 11px 10px; }
  .concafe-demo-intro p { font-size:11px; }
  .concafe-demo-intro>div>span { font-size:9px; }
  .concafe-story-stage { height:306px; margin:0 8px; }
  .concafe-story-speech { left:46px; right:8px; top:39px; padding:6px; font-size:10px; }
  .concafe-story-table { left:9px; }
  .concafe-story-table>b { font-size:21px; }
  .concafe-story-guide { left:-28px; bottom:29px; width:142px; }
  .concafe-story-product { top:96px; right:17px; width:94px; }
  .concafe-story-prop { height:99px; }
  .concafe-story-cheki { width:70px; height:94px; padding:5px 5px 16px; }
  .concafe-story-prop>svg { width:87px; height:96px; }
  .concafe-story-owner { top:211px; right:8px; width:150px; gap:5px; padding:6px; }
  .concafe-story-owner>.cast-portrait { width:30px; }
  .concafe-story-owner b { font-size:11px; }
  .concafe-story-owner>i { width:18px; height:18px; font-size:10px; }
  .concafe-story-pos { top:111px; right:7px; width:153px; padding:8px 9px; border-width:5px; }
  .concafe-story-pos-top>b { font-size:20px; }
  .concafe-story-pos-top>span { font-size:7px; }
  .concafe-story-pos-line>strong { font-size:10px; }
  .concafe-story-pos-line>span { font-size:8px; }
  .concafe-story-pos-line>b { font-size:22px; }
  .concafe-story-record { left:9px; top:106px; width:159px; padding:11px 9px 9px; }
  .concafe-story-record-head { gap:5px; }
  .concafe-story-record-head>.cast-portrait { width:34px; }
  .concafe-story-record-head small { font-size:7px; }
  .concafe-story-record-head strong { font-size:13px; }
  .concafe-story-record-line>strong { font-size:26px; }
  .concafe-story-record>p { font-size:7px; }
  .concafe-story-counter>span { display:none; }
  .concafe-story-arrival { left:13px; bottom:22px; font-size:8px; }
  .concafe-demo-caption { min-height:45px; padding:8px 10px; font-size:9px; }
  .concafe-demo-controls { margin-top:9px; }
}