:root {
  --blue: #0027F6;
  --floor: #C7B8F3;
  --hand: "Mansalva", cursive;
  --sys: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
  /* light comes from the top-left, like Bernie's product photos */
  --shadow: drop-shadow(1px 2px 1px rgba(40, 20, 100, .35)) drop-shadow(8px 14px 14px rgba(50, 25, 120, .28));
  --lift: drop-shadow(2px 4px 2px rgba(40, 20, 100, .25)) drop-shadow(22px 34px 26px rgba(50, 25, 120, .32));
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--floor); overflow: hidden; user-select: none; -webkit-user-select: none; font-family: var(--sys); color: #111; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }

/* the phone is a window onto the table */
.view { position: fixed; inset: 0; overflow: auto; scrollbar-width: none; overscroll-behavior: none; }
.view::-webkit-scrollbar { display: none; }
.table {
  position: relative;
  /* Bernie's photo-set floor, seen from above: one light, falling off to the edges */
  background:
    radial-gradient(ellipse 70% 55% at 38% 34%, rgba(255, 255, 255, .38), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(60, 30, 140, .18)),
    var(--floor);
}

.obj { position: absolute; padding: 0; border: 0; background: none; touch-action: none; user-select: none; -webkit-user-select: none; filter: var(--shadow); transition: filter .25s, transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.obj.drag { filter: var(--lift); transition: filter .2s; z-index: 30; cursor: grabbing; }
.obj.up { filter: var(--lift); z-index: 25; }
.obj:focus-visible { outline: 2px dashed var(--blue); outline-offset: 6px; }
.obj.wiggle { animation: wiggle .5s cubic-bezier(.3, 1.5, .5, 1) 2; }
@keyframes wiggle { 25% { translate: 0 -8px; } 75% { translate: 0 4px; } }
[data-pos] { position: absolute; }

/* marks */
.ring { width: 150px; height: 150px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(90, 60, 180, .08); pointer-events: none; }
.ring--sm { width: 96px; height: 96px; border-width: 2px; border-color: rgba(255, 255, 255, .16); }
.dust { width: 90px; height: 70px; pointer-events: none; background:
  radial-gradient(circle at 20% 30%, rgba(141, 179, 58, .55) 0 2px, transparent 3px),
  radial-gradient(circle at 34% 55%, rgba(141, 179, 58, .45) 0 3px, transparent 4px),
  radial-gradient(circle at 52% 40%, rgba(141, 179, 58, .35) 0 1.5px, transparent 2.5px),
  radial-gradient(circle at 66% 70%, rgba(141, 179, 58, .5) 0 2px, transparent 3px),
  radial-gradient(circle at 80% 48%, rgba(141, 179, 58, .3) 0 1px, transparent 2px),
  radial-gradient(ellipse at 40% 50%, rgba(141, 179, 58, .18), transparent 60%); }
.dust--sm { width: 50px; height: 40px; }

/* the grey stone from every product photo */
.slab { width: 270px; height: 258px; border-radius: 4px; pointer-events: none;
  background-color: #9a9ca3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .25 0 0 0 0 .3 0 0 0 1.3 -.35'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .95 0 0 0 1.6 -1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23m)'/%3E%3C/svg%3E");
  box-shadow: 1px 2px 0 #6d6f76, 3px 5px 0 #5c5e65, 12px 18px 22px rgba(50, 25, 120, .3); }

/* tin, from above: brushed lid + the face sticker */
.tin { width: 150px; height: 150px; border-radius: 50%; }
.tin__body, .tin__lid { position: absolute; inset: 0; border-radius: 50%; }
.tin__body { background: conic-gradient(from 30deg, #e8e9ee, #b6b9c3, #f5f6f8, #a8acb6, #e3e5ea, #c3c6ce, #e8e9ee); }
.tin__powder { position: absolute; inset: 9px; border-radius: 50%; background: url(../_shared/img/polvo.jpg) center / 180% no-repeat; box-shadow: inset 0 0 0 2px #9da1ab, inset 4px 6px 12px rgba(0, 0, 0, .35); }
.tin__lid { background: conic-gradient(from 200deg, #eeeff3, #b2b5bf, #fafbfc, #a3a7b2, #e6e8ec, #bfc2ca, #eeeff3); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .45), inset 0 0 0 7px #a9adb7; transition: transform .55s cubic-bezier(.3, 1.2, .4, 1), box-shadow .3s; display: grid; place-items: center; }
.tin__lid img { width: 76%; height: 76%; border-radius: 50%; }
.tin.open .tin__lid { transform: translate(98px, -54px) rotate(38deg); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .45), inset 0 0 0 7px #a9adb7, 10px 16px 16px rgba(50, 25, 120, .3); }

/* chawan, from above, already in use */
.chawan { width: 212px; height: 212px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fff 0 30%, #f1f1ee 55%, #dcdcd8 78%, #f7f7f4 92%, #e2e2de 100%); }
.chawan::after { content: ""; position: absolute; right: -15px; top: 92px; width: 34px; height: 30px; border-radius: 40% 60% 60% 40% / 50%; background: radial-gradient(circle at 30% 40%, #fff, #e4e4e0 80%); z-index: -1; }
.chawan__inner { position: absolute; inset: 13px; border-radius: 50%; background: radial-gradient(circle at 62% 66%, #fdfdfb 0 20%, #e7e7e3 60%, #c9c9c4 100%); box-shadow: inset 6px 9px 14px rgba(0, 0, 0, .14); }
.chawan__tea { position: absolute; inset: 26px; border-radius: 50%; transition: inset .5s;
  background:
    radial-gradient(circle at 30% 40%, rgba(230, 240, 180, .9) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 30%, rgba(230, 240, 180, .8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 60% 52%, rgba(230, 240, 180, .8) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 40% 64%, rgba(230, 240, 180, .7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 36%, rgba(230, 240, 180, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 44%, #c4da77 0, #a9c853 45%, #8DB33A 80%, #6f9128 100%);
  box-shadow: inset 3px 5px 10px rgba(40, 60, 0, .35); }
.chawan.up .chawan__tea { inset: 30px; }

.soporte { width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff 0 18%, #ececea 48%, #cfcfcb 78%, #f3f3f0 100%); }
.soporte span { position: absolute; inset: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #fff, #dadad6 85%); box-shadow: 2px 3px 5px rgba(0, 0, 0, .15); }

.chasen { width: 270px; height: 90px; }
.chasen svg, .scoop svg { width: 100%; height: 100%; display: block; }
.scoop { width: 240px; height: 34px; }

/* paper */
.note { width: 168px; height: 156px; padding: 14px 14px 10px; background: #fffef7; color: var(--blue); font: 20px/1.15 var(--hand); text-align: left; display: flex; flex-direction: column; gap: 2px; box-shadow: inset 0 -18px 18px -18px rgba(0, 0, 0, .12); }
.note small { margin-top: auto; align-self: flex-end; font: 10px var(--sys); color: #888; letter-spacing: .08em; }
.receipt { width: 132px; }
.receipt__paper { display: block; background: #fbfbf8; padding: 10px 10px 18px; font: 10px/1.35 var(--mono); color: #222; text-align: left; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 93% 100%, 86% calc(100% - 6px), 79% 100%, 72% calc(100% - 6px), 65% 100%, 58% calc(100% - 6px), 51% 100%, 44% calc(100% - 6px), 37% 100%, 30% calc(100% - 6px), 23% 100%, 16% calc(100% - 6px), 9% 100%, 0 calc(100% - 6px)); }
.receipt__paper b { display: block; text-align: center; font-weight: 700; }
.receipt__paper hr { border: 0; border-top: 1px dashed #999; margin: 5px 0; }
.receipt__paper .ln b { display: inline; }
.receipt__paper .ln { display: flex; justify-content: space-between; gap: 4px; }
.receipt__paper .ln span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.receipt__paper .new { animation: print .6s steps(4); }
@keyframes print { from { clip-path: inset(0 0 100% 0); } }
.card { width: 184px; height: 106px; background: #fff; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: 1fr auto; column-gap: 10px; padding: 12px; text-align: left; align-items: center; }
.card img { width: 48px; height: 48px; grid-row: 1 / span 2; }
.card__name { font: 17px/1 var(--hand); color: var(--blue); letter-spacing: .04em; }
.card__small { font-size: 9px; color: #555; align-self: start; }
.phone { width: 128px; height: 262px; border-radius: 22px; background: #1b1b1f; padding: 7px; box-shadow: inset 0 0 0 1.5px #3a3a40; }
.phone__screen { display: block; height: 100%; border-radius: 16px; background: linear-gradient(160deg, #0d0d12, #1a1a22 60%, #121218); position: relative; }
.phone__screen::before { content: ""; position: absolute; top: 7px; left: 50%; width: 34px; height: 9px; margin-left: -17px; border-radius: 6px; background: #000; }
.phone__screen::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(115deg, rgba(255, 255, 255, .1) 0 30%, transparent 31%); }

.kitspot { width: 230px; height: 150px; border-radius: 6px; filter: none; background: radial-gradient(ellipse at center, rgba(120, 95, 200, .22) 40%, rgba(120, 95, 200, 0) 72%); }
.kitspot::before { content: ""; position: absolute; inset: 22px; border-radius: 2px; background: rgba(214, 204, 250, .55); filter: blur(3px); }
.kitspot__tag { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -4deg; background: #fffef7; color: var(--blue); font: 17px/1 var(--hand); padding: 8px 10px; white-space: nowrap; filter: var(--shadow); }

/* product slip — a small paper slip, not a panel */
.slip { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-height: 62svh; overflow: auto; background: #fffef9; padding: 12px 14px 14px; box-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 18px 40px rgba(40, 20, 100, .35); font-size: 14px; line-height: 1.4; animation: slipin .35s cubic-bezier(.3, 1.3, .5, 1); rotate: -.6deg; }
.slip[hidden] { display: none; }
@keyframes slipin { from { transform: translateY(40px); opacity: 0; } }
.slip__x { position: absolute; right: 4px; top: 0; border: 0; background: none; font-size: 28px; line-height: 1; padding: 6px 10px; color: #555; }
.slip__photos { display: flex; gap: 6px; overflow-x: auto; margin: 0 26px 8px 0; scrollbar-width: none; }
.slip__photos img { height: 74px; width: auto; flex: none; }
.slip__name { margin: 0; font: 24px/1.05 var(--hand); color: var(--blue); }
.slip__meta { margin: 2px 0 6px; font-size: 13px; color: #333; font-variant-numeric: tabular-nums; }
.slip__meta .out { color: #c00; font-weight: 700; }
.slip__desc p { margin: 0 0 6px; }
.slip__buy { display: flex; gap: 10px; align-items: stretch; margin-top: 8px; }
.qty { display: inline-flex; align-items: center; border: 1px solid #222; }
.qty button { width: 38px; height: 38px; border: 0; background: none; font-size: 18px; }
.qty b { min-width: 22px; text-align: center; font-weight: 600; }
.slip__add { flex: 1; border: 0; background: var(--blue); color: #fff; font-weight: 700; letter-spacing: .12em; font-size: 15px; }
.slip__add:disabled { background: #bbb; }

/* something picked up off the table */
.pick { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.pick[hidden] { display: none; }
.pick__scrim { position: absolute; inset: 0; background: rgba(40, 20, 110, .28); }
.pick__thing { position: relative; animation: pickup .4s cubic-bezier(.3, 1.3, .5, 1); filter: var(--lift); max-height: calc(100svh - 40px); overflow: auto; }
@keyframes pickup { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.big-note { width: min(320px, 86vw); background: #fffef7; color: var(--blue); padding: 22px 22px 16px; font: 25px/1.25 var(--hand); rotate: -2deg; }
.big-note ol { margin: 6px 0 10px; padding-left: 24px; }
.big-note li { margin-bottom: 4px; }
.big-note button { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; text-decoration: underline; }
.big-note small { display: block; font: 11px/1.4 var(--sys); color: #777; }
.big-receipt { width: min(300px, 86vw); background: #fbfbf8; padding: 18px 16px 26px; font: 13px/1.5 var(--mono); color: #222; rotate: 1deg; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 95% 100%, 90% calc(100% - 8px), 85% 100%, 80% calc(100% - 8px), 75% 100%, 70% calc(100% - 8px), 65% 100%, 60% calc(100% - 8px), 55% 100%, 50% calc(100% - 8px), 45% 100%, 40% calc(100% - 8px), 35% 100%, 30% calc(100% - 8px), 25% 100%, 20% calc(100% - 8px), 15% 100%, 10% calc(100% - 8px), 5% 100%, 0 calc(100% - 8px)); }
.big-receipt .c { text-align: center; margin: 0 0 8px; }
.big-receipt .row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 4px 0; border-bottom: 1px dashed #bbb; }
.big-receipt .row .q { grid-column: 1 / -1; font-size: 12px; color: #555; }
.big-receipt .q button { width: 26px; height: 24px; border: 1px solid #888; background: #eee; font: 700 14px/1 var(--mono); }
.big-receipt .tot { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; margin: 10px 0; }
.big-receipt .pay { display: block; width: 100%; padding: 10px; border: 0; background: var(--blue); color: #fff; font: 700 14px/1 var(--sys); letter-spacing: .12em; }
.big-receipt .pay:disabled { background: #bbb; }
.big-receipt .demo { font-size: 11px; color: #555; margin: 8px 0 0; }
.big-card { width: min(340px, 88vw); aspect-ratio: 184 / 106; perspective: 900px; rotate: -2deg; }
.big-card__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.2, .4, 1); }
.big-card.flip .big-card__in { transform: rotateY(180deg); }
.big-card__f, .big-card__b { position: absolute; inset: 0; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 14px 16px; }
.big-card__f { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 14px; }
.big-card__f img { width: 74px; }
.big-card__f b { font: 28px/1 var(--hand); font-weight: 400; color: var(--blue); }
.big-card__f span { font-size: 11px; color: #666; grid-column: 2; }
.big-card__b { transform: rotateY(180deg); font-size: 11.5px; line-height: 1.35; overflow: auto; }
.big-card__b p { margin: 0 0 6px; }
.big-card__b a { color: var(--blue); }
.big-card .turn { position: absolute; left: 0; right: 0; bottom: -28px; text-align: center; font-size: 12px; color: #fff; }
.big-phone { width: 220px; height: 450px; border-radius: 36px; background: #1b1b1f; padding: 11px; rotate: 3deg; box-shadow: inset 0 0 0 2px #3a3a40; }
.big-phone__screen { height: 100%; border-radius: 27px; background: #fff; padding: 44px 18px 18px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.big-phone__screen a { color: var(--blue); }
.big-phone__screen small { margin-top: auto; color: #888; font-size: 11px; }

.credit { position: fixed; z-index: 5; right: 10px; top: calc(8px + env(safe-area-inset-top)); text-align: right; margin: 0; font: 9px/1.3 var(--sys); color: rgba(40, 20, 110, .55); letter-spacing: .04em; pointer-events: none; max-width: 70vw; }

@media (min-width: 900px) {
  .slip { left: 24px; right: auto; bottom: 24px; width: 360px; max-height: calc(100vh - 48px); }
  .credit { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }