/* Dimensional surfaces stay anchored; their details respond to interaction. */
:root {
  --depth-edge:#05150c;
  --depth-light:inset 0 1px 0 #ffffff30;
  --depth-ease:cubic-bezier(.2,.75,.25,1);
}
/* Match the complete wordmark's aspect ratio, including the smile beneath it. */
.brand .wm { height:auto;min-height:36px;padding:5px 10px; }
.brand .wm img { display:block;width:110px;height:auto;object-fit:contain;flex-shrink:0; }
.rd-brand img:not(.rd-mk) { display:block;width:112px;height:auto;object-fit:contain;flex-shrink:0; }
.ix-brand img.wm { display:block;width:110px;height:auto;object-fit:contain;flex-shrink:0; }
.slide,.slide.back { animation:depth-page-in .32s ease-out both; }
@keyframes depth-page-in { from { opacity:.45; } to { opacity:1; } }
.ix-surface {
  border-color:#e2eddf;
  box-shadow:inset 0 1px 0 #fff,0 5px 0 #a1b2a0,0 6px 0 #304538,0 22px 45px -15px #0009;
  background:linear-gradient(145deg,#fffefa,#f0f4e9);
}
.ix-surface.dark {
  border-color:#406b50;
  background:radial-gradient(ellipse at 10% 0%,#224936,#0c261b 70%);
  box-shadow:var(--depth-light),0 5px 0 #071c12,0 6px 0 #315340,0 22px 45px -15px #0009;
}
.rd-device {
  border-color:#6b8475;
  box-shadow:inset 1px 1px 0 #d6e7d155,inset -2px -2px 0 #000,
    3px 5px 0 #213b2c,4px 6px 0 #56715d,0 28px 46px -20px #000c;
}
.rd-device-bar { background:#fffefa; }
.rd-content { background:linear-gradient(150deg,#fffefa,#f0f4e9);animation:none; }
.ix-ticket,.rd-ticket {
  background:linear-gradient(130deg,#fff,#fafff8);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #d7e2d1,0 6px 12px -6px #16352425;
}
.ix-product,.rd-products button {
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #c1d2bc,0 7px 12px -7px #0a2d1b50;
}
.mini-card,.plain,.fee-card,.scale-card,.calc-controls,.calc-output {
  border-color:#345b43;
  box-shadow:var(--depth-light),0 5px 0 #05180e,0 6px 0 #214a32,0 16px 26px -16px #000b;
}
.mini-card {
  background:linear-gradient(140deg,#214a32,#0c2b1c 80%);
  padding:20px;border-radius:18px;
}
.mini-card b { color:#deefce; }
.plain { border-left:3px solid #7fa845; }
.rd-note {
  padding:14px 16px;border:1px solid #315742;border-left:3px solid var(--teal);
  border-radius:0 12px 12px 0;background:linear-gradient(135deg,#123b29,#0a2419);
  box-shadow:inset 0 1px 0 #ffffff12,0 4px 0 #04180e;
}
.ix-explanation { transform-origin:50% 0; }
.copy > .lead,.rd-copy > .lead,.copy > h2,.rd-copy > h2 { transform-origin:50% 25%; }
.ix-status.good,.rd-success {
  background:linear-gradient(120deg,#effadf,#d7efdf);
  box-shadow:inset 0 1px 0 #fff9,0 3px 0 #b2cead;
}
.dark .ix-status.good { background:linear-gradient(120deg,#183d28,#11372b);box-shadow:var(--depth-light),0 3px 0 #071c12; }
.rd-checkmark {
  background:radial-gradient(circle at 30% 20%,#f3ffe9,#b3e58c 80%);
  border:2px solid #e6ffd7;
  box-shadow:2px 4px 0 #699b52,0 9px 18px -6px #375d4055;
}
.rd-reward-mark { text-shadow:0 2px 0 #d5e8c4;gap:10px;font-size:56px; }
.rd-reward-mark::before {
  content:'$';display:grid;place-items:center;align-self:center;flex-shrink:0;
  width:46px;height:46px;border-radius:50%;font:600 26px var(--sans);
  color:white;border:3px solid #b6e7ff;background:radial-gradient(circle at 30% 20%,#7ccaff,#2673ce 75%);
  text-shadow:0 1px 0 #1652a0;box-shadow:2px 4px 0 #15467d,0 9px 16px -5px #164d8050;
  animation:depth-coin-turn .9s var(--depth-ease) both;
}
@keyframes depth-coin-turn {
  from { transform:perspective(600px) rotateY(-100deg); }
  to { transform:perspective(600px) rotateY(0deg); }
}
.ix-progress i,.rd-progress i,.node-button i {
  box-shadow:inset 0 1px 0 #ffffff20,0 3px 0 #082114;
}
.ix-progress [aria-current] i,.rd-progress [aria-current] i,.node-button.selected i {
  box-shadow:inset 0 1px 0 #f5ffc9,0 3px 0 #698828,0 7px 18px -7px #b3ed5480;
}
/* Separate properties compose with entrance transforms. No pointer tracking or
   geometry reads: a hover cannot chase its own changing position. */
:is(.ctl,.ix-button,.rd-action,.rd-launch,.rd-products button,.preset,.rd-tools button,.local-scene-nav button) {
  --button-edge:var(--depth-edge);
  position:relative;translate:0 0;rotate:x 0deg;transform-origin:center;
  background-image:linear-gradient(160deg,#ffffff0d,transparent 60%);
  box-shadow:var(--depth-light),0 4px 0 var(--button-edge),0 9px 16px -9px #0009;
  transition:translate .18s var(--depth-ease),rotate .22s var(--depth-ease),
    box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.ix-surface:not(.dark) .ix-button,.rd-action,.rd-products button { --button-edge:#082214; }
.ix-button.secondary,.rd-action.secondary,.rd-products button { --button-edge:#b9cbb3; }
.dark .ix-button.secondary,.ix-button.quiet { --button-edge:#04180e; }
.rd-launch,.ctl.primary,.ix-button.selected,.dark .ix-button:not(.secondary):not(.node-button) { --button-edge:#658727; }
.ix-button.small { box-shadow:var(--depth-light),0 2px 0 var(--button-edge); }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  :is(.ctl,.ix-button,.rd-action,.rd-launch,.rd-products button,.preset,.rd-tools button,.local-scene-nav button):hover:not(:disabled) {
    translate:0 -2px;rotate:x 5deg;
    box-shadow:var(--depth-light),0 6px 0 var(--button-edge),0 16px 24px -12px #0009;
  }
}
:is(.ctl,.ix-button,.rd-action,.rd-launch,.rd-products button,.preset,.rd-tools button,.local-scene-nav button):active:not(:disabled) {
  translate:0 3px;rotate:x -3deg;
  box-shadow:inset 0 2px 5px #0002,0 1px 0 var(--button-edge);transition-duration:.06s;
}
.ix-button:disabled,.ctl:disabled { box-shadow:none; }
.ix-event-track { perspective:700px; }
.ix-token {
  border:1px solid #a1fff1;background:linear-gradient(130deg,#8affdf,#2bceaa);
  box-shadow:var(--depth-light),0 3px 0 #12725d,0 8px 16px -7px #0008;
}
@keyframes ix-deliver {
  0% { left:0;opacity:.5;transform:rotateY(-50deg) translateZ(-20px); }
  60% { opacity:1;transform:rotateY(10deg) translateZ(12px); }
  100% { left:calc(100% - 80px);opacity:1;transform:none; }
}
.rd-transfer i {
  border:1px solid #b1ddbd;border-radius:20px;padding:7px 8px;
  background:linear-gradient(130deg,#eaffda,#c5ecd1);
  box-shadow:inset 0 1px 0 white,0 3px 0 #a1c1a3;
}
.rd-dialog[open] { animation:depth-dialog-in .38s var(--depth-ease); }
@keyframes depth-dialog-in {
  from { opacity:.4;transform:perspective(1200px) translate3d(0,12px,-25px) rotateX(-8deg); }
  to { opacity:1;transform:none; }
}
@media(max-width:640px) {
  .brand .wm { min-height:29px;padding:5px 7px; }
  .brand .wm img { width:78px;height:auto; }
  .mini-card { padding:14px; }
  .rd-note { padding:11px 13px; }
}
@media(max-width:380px) {
  header { padding:0 10px;gap:8px; }
  .brand .mk img { width:26px;height:26px; }
  .brand .wm { min-height:26px;padding:4px 6px; }
  .brand .wm img { width:68px; }
  .controls { gap:4px; }
  .controls .ctl { height:32px;min-width:30px;padding:0 7px;font-size:11px; }
  .count { font-size:9px;padding:0 2px; }
}
@media(prefers-reduced-motion:reduce) {
  .slide,.slide.back,.rd-dialog[open],.rd-reward-mark::before { animation:none; }
  :is(.ctl,.ix-button,.rd-action,.rd-launch,.rd-products button,.preset,.rd-tools button,.local-scene-nav button),
  :is(.ctl,.ix-button,.rd-action,.rd-launch,.rd-products button,.preset,.rd-tools button,.local-scene-nav button):active:not(:disabled) {
    translate:none;rotate:none;transition:none;
  }
}