: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; } }


/* =================== LA MESA · AIRE (Frutiger Aero) ===================
   La misma mesa, ahora de vidrio, a las 8 de la mañana, con agua a 75°.
   El agua, el vapor, el polvo que se dispersa y la luz que pasa por el vidrio son la interfaz. */
:root {
  --sky: #9fd8ff; --sky2: #e6f6ff; --aqua: #c9f1ec; --leaf: #5cc36a; --deep: #0b5fa8;
  --air: "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --buoy: cubic-bezier(.22, 1, .36, 1);
  --shadow: drop-shadow(1px 2px 1px rgba(0, 60, 120, .22)) drop-shadow(10px 16px 16px rgba(0, 90, 170, .18));
  --lift: drop-shadow(2px 4px 2px rgba(0, 60, 120, .16)) drop-shadow(24px 36px 30px rgba(0, 90, 170, .22));
}
body { font-family: var(--air); background: var(--sky2); }
.table {
  background:
    radial-gradient(ellipse 60% 40% at 28% 18%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 85%, rgba(201, 241, 236, .9), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 60%, rgba(30, 120, 200, .16)),
    linear-gradient(165deg, #eef9ff, #cdebfc 45%, #b2ddf8);
}
/* light through water, moving very slowly across the glass */
.caustics { position: absolute; inset: 0; pointer-events: none; opacity: .3; mix-blend-mode: screen; filter: blur(3px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='.009 .013' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -34 2.1'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 780px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .008' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .97 0 0 0 0 1 0 0 0 -34 2'/%3E%3C/filter%3E%3Crect width='440' height='440' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 660px;
  animation: drift 70s linear infinite; }
@keyframes drift { to { background-position: 780px 390px, -660px 660px; } }

/* objects sit on glass: cooler shadows, a slow float like something resting on water */
.obj { animation: float 7s ease-in-out infinite; }
.obj:nth-of-type(2n) { animation-duration: 8.5s; animation-delay: -3s; }
.obj:nth-of-type(3n) { animation-duration: 9.5s; animation-delay: -5s; }
@keyframes float { 50% { translate: 0 -2px; } }
.obj.wiggle { animation: wiggle .7s var(--buoy) 2; }
.obj.drag { animation: none; }
.kitspot { animation: none; }
.slab { box-shadow: 1px 2px 0 #6d6f76, 3px 5px 0 #5c5e65, 14px 20px 26px rgba(0, 90, 170, .22); }
.ring { border-color: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(120, 200, 255, .25), 0 0 12px rgba(255, 255, 255, .4); }

/* dew on cold metal and ceramic */
.tin::after, .chawan::before { content: ""; position: absolute; pointer-events: none; z-index: 2; }
.tin::after { inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 22% 70%, rgba(255,255,255,.95) 0 1.5px, rgba(180,220,255,.5) 2.2px, transparent 3.2px),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.95) 0 1.2px, rgba(180,220,255,.5) 2px, transparent 3px),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.95) 0 2px, rgba(180,220,255,.45) 3px, transparent 4px),
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.9) 0 1px, transparent 2.2px);
  transition: opacity .3s; }
.tin.open::after { opacity: 0; }
.chawan::before { inset: 4px; border-radius: 50%;
  background:
    radial-gradient(circle at 14% 40%, rgba(255,255,255,1) 0 1.5px, rgba(170,215,255,.6) 2.4px, transparent 3.4px),
    radial-gradient(circle at 60% 6%, rgba(255,255,255,1) 0 1.2px, rgba(170,215,255,.6) 2px, transparent 3px),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,1) 0 1.8px, rgba(170,215,255,.6) 2.8px, transparent 3.8px); }

/* steam: the water is 75° */
.steam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.steam i { position: absolute; left: -26px; top: -40px; width: 52px; height: 80px; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, .95), rgba(225, 242, 255, .5) 45%, transparent 68%); filter: blur(4px) drop-shadow(0 0 6px rgba(120, 180, 230, .35)); opacity: 0; animation: steam 5.5s cubic-bezier(.3, 0, .5, 1) infinite; }
.steam i:nth-child(2) { left: -6px; animation-delay: -1.8s; animation-duration: 6.5s; }
.steam i:nth-child(3) { left: -42px; animation-delay: -3.6s; animation-duration: 6s; }
@keyframes steam { 0% { transform: translate(0, 10px) scale(.5); opacity: 0; } 25% { opacity: .75; } 100% { transform: translate(14px, -120px) scale(1.5); opacity: 0; } }

/* touching the surface */
.ripple { position: absolute; z-index: 1; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(120, 200, 255, .5), 0 0 18px rgba(160, 220, 255, .45);
  animation: ripple 1.2s cubic-bezier(.1, .6, .3, 1) forwards; }
.ripple--big { width: 260px; height: 260px; margin: -130px 0 0 -130px; z-index: 40; }
@keyframes ripple { from { transform: scale(.1); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.grain { position: fixed; left: 0; top: 0; z-index: 80; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #d8f0a0, #8db33a 60%, #6f9128); box-shadow: 0 0 6px rgba(141, 179, 58, .5); }

/* out-of-focus leaves in the foreground: the table is outside, near a window */
.leaf { position: fixed; z-index: 4; pointer-events: none; filter: blur(7px); opacity: .5; transform-origin: 0 50%; animation: sway 11s ease-in-out infinite; }
.leaf--a { width: 230px; right: -90px; top: -30px; rotate: 160deg; filter: blur(3px); }
.leaf--b { width: 180px; left: -80px; bottom: 120px; rotate: -20deg; animation-delay: -5s; opacity: .35; filter: blur(2.5px); }
@keyframes sway { 50% { transform: rotate(3deg) translateY(4px); } }

/* paper keeps being paper — just colder light */
.note { color: var(--deep); }
.kitspot { background: radial-gradient(ellipse at center, rgba(60, 150, 220, .14) 40%, transparent 72%); }
.kitspot::before { background: rgba(255, 255, 255, .45); }
.kitspot__tag { color: var(--deep); font-family: var(--hand); }

/* the slip becomes a sheet of glass rising out of the water */
.slip { rotate: 0deg; border-radius: 20px; padding: 14px 16px 16px; color: #08365e;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(228, 246, 255, .74));
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .7), 0 24px 50px rgba(0, 80, 160, .22), 0 2px 6px rgba(0, 80, 160, .08);
  animation: none; font: 400 14.5px/1.5 var(--air); }
.slip::before { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 38%; border-radius: 16px 16px 50% 50% / 16px 16px 26px 26px; background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); pointer-events: none; }
.slip__x { color: #3c7cb0; font-weight: 300; }
.slip__photos { gap: 8px; }
.slip__photos img { height: 82px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 80, 160, .15); }
.slip__name { font: 500 21px/1.15 var(--air); color: #062a4c; letter-spacing: -.005em; }
.slip__meta { color: #3b6f9a; font-size: 13px; font-weight: 400; }
.slip__meta .out { color: #d6455a; }
.slip__desc p { color: #12416b; }
.qty { border: 0; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(120, 190, 240, .45); overflow: hidden; }
.qty button { color: var(--deep); width: 40px; height: 42px; }
.qty b { display: inline-block; color: #062a4c; font-weight: 500; font-variant-numeric: tabular-nums; }
.slip__add { position: relative; overflow: hidden; border-radius: 12px; font: 500 15px/1 var(--air); letter-spacing: .04em;
  background: linear-gradient(180deg, #4aa8ff, var(--blue) 55%, #0a1fc7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px rgba(0, 60, 220, .3); transition: transform .25s var(--buoy); }
.slip__add::before { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 46%; border-radius: 10px 10px 40% 40%; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .05)); }
.slip__add:active { transform: scale(.97); }

/* picked-up things rise into clear air instead of a dark scrim */
.pick__scrim { background: rgba(225, 244, 255, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pick__thing { animation: rise .7s var(--buoy); }
@keyframes rise { from { transform: translateY(40px) scale(.94); opacity: 0; } 60% { transform: translateY(-4px); opacity: 1; } }
.big-note { color: var(--deep); }
.big-note button { color: var(--deep); }
.big-receipt .pay, .big-card__b a { font-family: var(--air); }
.big-receipt .pay { border-radius: 10px; background: linear-gradient(180deg, #4aa8ff, var(--blue) 55%, #0a1fc7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.big-phone__screen { background: linear-gradient(170deg, #f6fcff, #d6efff); font-family: var(--air); }
.big-card .turn { color: #2f6e9f; }

.credit { color: rgba(11, 95, 168, .55); font-family: var(--air); }

@media (min-width: 900px) {
  .slip { left: 32px; bottom: 32px; width: 380px; }
  .leaf--a { width: 520px; right: -160px; top: -90px; filter: blur(7px); }
  .leaf--b { width: 380px; left: -150px; bottom: 40px; filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) { .obj, .caustics, .steam i, .leaf { animation: none !important; } }


/* =================== 2B · AIRE OBJECT WORLD ===================
   Bright environmental light from the sky above; things rest on water-lit glass.
   Leaf, water, air, steam, powder — all drawn here in CSS/SVG (see ASSETS.md). */
[data-pos] { position: absolute; }

/* real products under open sky: cooler fill light, sky reflected on metal & ceramic */
.tin__lid { box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .5), inset 0 0 0 7px #9fb6c8, inset 0 -18px 24px -14px rgba(120, 200, 255, .55); }
.tin__body { background: conic-gradient(from 30deg, #eef6fb, #a9c4d8, #fbfdff, #9fb8cc, #e7f1f8, #bcd2e2, #eef6fb); }
.chawan { background: radial-gradient(circle at 36% 30%, #fff 0 32%, #f1f7fb 56%, #d4e4ef 78%, #fafdff 92%, #dce9f2 100%); }
.chawan__inner { background: radial-gradient(circle at 62% 66%, #fdfeff 0 20%, #e3eef5 60%, #c3d5e2 100%); }

/* a tea leaf as the coaster */
.leafmat svg { width: 100%; height: 100%; display: block; }
.leafmat { width: 300px; height: 300px; pointer-events: none; filter: drop-shadow(0 18px 22px rgba(0, 90, 170, .2)); }

/* air: one cloud, high up, with its shadow drifting across the glass */
.sky { width: 150px; height: 84px; z-index: 60; pointer-events: none; opacity: .92; filter: blur(.4px) drop-shadow(0 6px 10px rgba(120, 190, 240, .35)); animation: drift-x 28s ease-in-out infinite; }
.sky svg { width: 100%; height: 100%; display: block; }
.cloudshadow { width: 420px; height: 240px; border-radius: 50%; pointer-events: none; z-index: 50; background: radial-gradient(ellipse 40% 45% at 35% 50%, rgba(0, 70, 140, .09), transparent 70%), radial-gradient(ellipse 35% 40% at 62% 45%, rgba(0, 70, 140, .08), transparent 70%); filter: blur(14px); animation: drift-x 40s ease-in-out infinite; }
@keyframes drift-x { 50% { translate: 120px 40px; } }

.sprout { width: 96px; height: 96px; pointer-events: none; filter: drop-shadow(0 10px 10px rgba(0, 110, 60, .2)); animation: sway2 9s ease-in-out infinite; transform-origin: 50% 70%; }
.sprout svg { width: 100%; height: 100%; display: block; }
@keyframes sway2 { 50% { transform: rotate(4deg); } }

/* water: bubbles and condensation — few, and they move like they're in water */
.orbble { width: 40px; height: 40px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, #fff 0 10%, rgba(255, 255, 255, .3) 26%, rgba(160, 220, 255, .14) 60%, rgba(255, 255, 255, .75) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 8px 14px rgba(0, 90, 170, .1); animation: buoy 8s ease-in-out infinite; }
.orbble--sm { width: 24px; height: 24px; animation-duration: 10s; animation-delay: -3s; }
.orbble--xs { width: 14px; height: 14px; animation-duration: 7s; animation-delay: -5s; }
@keyframes buoy { 33% { translate: 3px -7px; } 66% { translate: -3px -3px; } }
.dew { width: 12px; height: 15px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; pointer-events: none;
  background: radial-gradient(circle at 36% 30%, #fff 0 20%, rgba(190, 230, 255, .6) 45%, rgba(80, 170, 230, .5) 100%);
  box-shadow: 1px 3px 3px rgba(0, 80, 150, .18); }
.dew--sm { width: 8px; height: 10px; } .dew--xs { width: 5px; height: 6px; }

/* kit = an empty lily pad */
.pad { width: 168px; height: 168px; filter: none; }
.pad svg { width: 100%; height: 100%; display: block; }
.pad__tag { position: absolute; left: 50%; top: 52%; translate: -50% -50%; rotate: -4deg; background: rgba(255, 255, 255, .88); color: #0b5fa8; font: 17px/1 var(--hand); padding: 7px 10px; border-radius: 4px; white-space: nowrap; box-shadow: 0 4px 8px rgba(0, 80, 150, .15); }

/* prep note → a water drop */
.drop { width: 120px; height: 160px; }
.drop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.drop__t { position: absolute; left: 0; right: 0; top: 74px; text-align: center; font: 300 36px/1 var(--air); color: #064a86; letter-spacing: -.02em; }
.drop__s { position: absolute; left: 0; right: 0; top: 114px; text-align: center; font: 500 11px/1 var(--air); color: #0b5fa8; }
.drop__ref { position: absolute; left: 0; right: 0; top: 130px; text-align: center; font: 600 8px/1 var(--air); color: #3c86c0; letter-spacing: .1em; }

/* receipt → a glass sphere of water that fills with matcha */
.orb { width: 150px; height: 150px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, rgba(220, 245, 255, .55), rgba(150, 215, 250, .3) 60%, rgba(90, 180, 240, .45) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9), inset 0 -14px 24px rgba(0, 90, 170, .2), inset 0 10px 18px rgba(255, 255, 255, .5); }
.orb__liquid { position: absolute; left: -10%; right: -10%; bottom: 0; height: 10%; transform-origin: 50% 100%;
  background: linear-gradient(rgba(190, 225, 110, .95), rgba(141, 179, 58, .9) 30%, rgba(105, 145, 40, .92));
  box-shadow: inset 0 3px 0 rgba(235, 250, 200, .9); transition: height 1.4s cubic-bezier(.22, 1, .36, 1); }
.orb__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; z-index: 2; color: #053766; }
.orb__in b { font: 300 40px/1 var(--air); }
.orb__in span { font: 500 12px/1 var(--air); font-variant-numeric: tabular-nums; }
.orb__gloss { position: absolute; z-index: 3; left: 18%; top: 8%; width: 48%; height: 26%; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); pointer-events: none; }

/* card → ceramic pebble */
.pebble { width: 150px; height: 112px; border-radius: 52% 48% 46% 54% / 56% 50% 50% 44%; padding: 0;
  background: radial-gradient(circle at 38% 30%, #fff 0, #f2f5f7 40%, #d7e0e6 100%); box-shadow: inset 0 -8px 14px rgba(0, 60, 110, .14); display: grid; place-items: center; }
.pebble img { width: 58px; height: 58px; border-radius: 50%; opacity: .92; }

.bird { width: 120px; height: 94px; }
.bird svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* objects resting on water rotate a hair as they float */
@keyframes float { 50% { translate: 0 -2px; transform: rotate(.8deg); } }

/* the orb opens as glass, not paper */
.big-receipt { clip-path: none; rotate: 0deg; border-radius: 22px; padding: 22px 20px 20px; font: 400 14px/1.5 var(--air); color: #08365e;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(226, 245, 255, .82));
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .7), 0 24px 50px rgba(0, 80, 160, .22); }
.big-receipt .c b { font: 500 16px/1.3 var(--air); color: #062a4c; }
.big-receipt .row { border-bottom: 1px solid rgba(80, 160, 220, .25); }
.big-receipt .row .q { color: #3b6f9a; }
.big-receipt .q button { border: 0; border-radius: 8px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(120, 190, 240, .5); color: #0b5fa8; font-family: var(--air); }
.big-receipt .tot { color: #062a4c; font-weight: 500; }
.big-receipt .demo { color: #3b6f9a; }