/*
 * XRP / XRPL / pDEX / Ripple role boundary.
 * This layer intentionally has no JavaScript dependency: the small ambient
 * movements are CSS-only and stop when reduced motion is requested.
 */

.xrp-role-map,
.xrp-ownership-boundary{
  --role-ink:#102b38;
  --role-blue:#175cff;
  --role-cyan:#0b91b5;
  --role-green:#078760;
  --role-violet:#7657b1;
  --role-amber:#aa7016;
  --role-line:#d5e3e9;
  box-sizing:border-box;
}
.xrp-role-map *,
.xrp-role-map *::before,
.xrp-role-map *::after,
.xrp-ownership-boundary *,
.xrp-ownership-boundary *::before,
.xrp-ownership-boundary *::after{box-sizing:border-box}
.xrp-role-map :is(div,article,aside,header),
.xrp-ownership-boundary :is(div,article,header){min-width:0}
.xrp-role-map :is(span,strong,small,p,b),
.xrp-ownership-boundary :is(span,strong,small,p,b){overflow-wrap:anywhere}

/* Four nouns, four roles. XRP is drawn as the vertical balance-sheet rail. */
.xrp-role-map{
  overflow:hidden;
  margin:0 8px 14px;
  border:1px solid #d1e0e7;
  border-radius:20px;
  background:#f7fafc;
  box-shadow:0 18px 44px rgba(26,69,91,.09);
}
.xrp-role-map-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid #dce7ec;
  background:linear-gradient(90deg,#fff,#f5f9fb 55%,#f0f8f5);
}
.xrp-role-map-head span{
  color:#687f8a;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  white-space:nowrap;
}
.xrp-role-map-head strong{
  color:var(--role-ink);
  font-size:14px;
  line-height:1.45;
  text-align:right;
}
.xrp-role-map-scene{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(250px,.78fr);
  grid-template-areas:
    "ripple pdex xrp"
    "xrpl xrpl xrp";
  gap:11px;
  padding:13px;
  background:
    linear-gradient(90deg,rgba(47,101,126,.045) 1px,transparent 1px),
    linear-gradient(rgba(47,101,126,.045) 1px,transparent 1px),
    linear-gradient(145deg,#f8fbfd,#f1f7fa 54%,#eef8f4);
  background-size:28px 28px,28px 28px,auto;
}
.xrp-role-card{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:13px;
  align-items:center;
  min-height:126px;
  padding:15px;
  border:1px solid #cedee6;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 28px rgba(25,68,89,.075);
}
.xrp-role-card span,
.xrp-role-card strong,
.xrp-role-card small{display:block}
.xrp-role-card span{
  color:#6c828d;
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
}
.xrp-role-card strong{
  margin-top:4px;
  color:#183845;
  font-size:17px;
  line-height:1.2;
}
.xrp-role-card p{
  margin:6px 0 7px;
  color:#536d79;
  font-size:9px;
  line-height:1.55;
}
.xrp-role-card small{
  justify-self:start;
  padding:4px 7px;
  border-radius:999px;
  background:#eef3f6;
  color:#607681;
  font-size:8px;
  font-weight:850;
}
.role-ripple{grid-area:ripple;border-color:#cfc7df;background:linear-gradient(145deg,#fff,#f8f5fc)}
.role-ripple span{color:var(--role-violet)}
.role-ripple small{background:#f0ebf8;color:#6f54a2}
.role-pdex{grid-area:pdex;border-color:#9dbdec;background:linear-gradient(145deg,#fff,#eff5ff)}
.role-pdex span{color:var(--role-blue)}
.role-pdex small{background:#e9f1ff;color:#275fb4}
.role-pdex::after{
  content:"XRPL上の一機能";
  position:absolute;
  z-index:3;
  right:14px;
  bottom:-17px;
  padding:3px 7px;
  border:1px solid #b8d5e0;
  border-radius:999px;
  background:#fff;
  color:#34758c;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
}
.role-xrpl{
  grid-area:xrpl;
  min-height:112px;
  border-color:#9bc9d8;
  background:linear-gradient(145deg,#fff,#edf9fb);
}
.role-xrpl span{color:var(--role-cyan)}
.role-xrpl small{background:#e5f5f8;color:#247a91}

.role-building,
.role-market-port,
.role-ledger-stack{
  position:relative;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border:1px solid #bfcfd8;
  background:#fff;
}
.role-building{
  border-color:#b8aad3;
  border-radius:10px 10px 5px 5px;
  box-shadow:7px 8px 0 #eee9f5;
}
.role-building::before{
  content:"";
  position:absolute;
  top:-10px;
  right:7px;
  left:7px;
  height:11px;
  border:1px solid #b8aad3;
  border-bottom:0;
  background:#f3eff8;
  transform:skewX(-28deg);
}
.role-building i{
  position:absolute;
  width:7px;
  height:8px;
  border-radius:2px;
  background:#c8bbe0;
  animation:roleWindow 3.2s ease-in-out infinite;
}
.role-building i:nth-child(1){top:13px;left:11px}
.role-building i:nth-child(2){top:13px;right:11px;animation-delay:-1.1s}
.role-building i:nth-child(3){right:11px;bottom:10px;animation-delay:-2.2s}
.role-building b{color:#684b9e;font-size:17px}
.role-market-port{
  overflow:hidden;
  border-color:#8db3eb;
  border-radius:50% 50% 13px 13px;
  background:linear-gradient(145deg,#f8fbff,#e5efff);
  box-shadow:7px 8px 0 #dce9fc;
}
.role-market-port::before,
.role-market-port::after{
  content:"";
  position:absolute;
  width:48px;
  height:48px;
  border:1px solid rgba(23,92,255,.18);
  border-radius:50%;
  animation:roleOrbit 11s linear infinite;
}
.role-market-port::after{width:34px;height:34px;animation-direction:reverse;animation-duration:8s}
.role-market-port i{
  position:absolute;
  z-index:1;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#175cff;
  box-shadow:0 0 8px rgba(23,92,255,.75);
  animation:rolePort 2.5s ease-in-out infinite;
}
.role-market-port i:nth-child(1){top:12px;left:17px}
.role-market-port i:nth-child(2){top:15px;right:15px;animation-delay:-.8s}
.role-market-port i:nth-child(3){right:25px;bottom:10px;animation-delay:-1.6s}
.role-market-port b{position:relative;z-index:2;color:#175cff;font-size:18px}
.role-ledger-stack{
  border:0;
  background:transparent;
}
.role-ledger-stack i{
  position:absolute;
  right:7px;
  left:7px;
  height:24px;
  border:1px solid #88bacb;
  border-radius:7px;
  background:#fff;
  box-shadow:0 5px 12px rgba(23,105,132,.09);
}
.role-ledger-stack i:nth-child(1){top:7px;transform:translateX(-5px)}
.role-ledger-stack i:nth-child(2){top:19px}
.role-ledger-stack i:nth-child(3){top:31px;transform:translateX(5px)}
.role-ledger-stack i:nth-child(3)::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:2px;
  background:#0b91b5;
  box-shadow:0 0 8px rgba(11,145,181,.55);
  animation:roleLedgerScan 2.8s ease-in-out infinite;
}
.role-ledger-stack b{position:relative;z-index:2;color:#08738f;font-size:15px}

.xrp-native-spine{
  position:relative;
  z-index:3;
  grid-area:xrp;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:249px;
  padding:16px;
  border:1px solid #195f69;
  border-radius:18px;
  background:
    radial-gradient(circle at 70% 12%,rgba(61,161,255,.28),transparent 25%),
    linear-gradient(165deg,#123248,#082c2c 62%,#064b3b);
  color:#fff;
  box-shadow:0 18px 38px rgba(4,61,59,.2),inset 0 0 0 1px rgba(255,255,255,.05);
}
.xrp-native-spine::after{
  content:"";
  position:absolute;
  right:-44px;
  bottom:-55px;
  width:165px;
  height:165px;
  border:1px solid rgba(77,219,173,.14);
  border-radius:50%;
  box-shadow:0 0 0 22px rgba(77,219,173,.045),0 0 0 44px rgba(77,219,173,.02);
}
.xrp-native-spine header{
  position:relative;
  z-index:2;
  padding:1px 4px 12px 38px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.xrp-native-spine header span,
.xrp-native-spine header strong,
.xrp-native-spine header small{display:block}
.xrp-native-spine header span{color:#87c9e8;font-size:8px;font-weight:900;letter-spacing:.13em}
.xrp-native-spine header strong{margin-top:4px;font-size:31px;line-height:1}
.xrp-native-spine header small{position:absolute;right:1px;bottom:12px;color:rgba(255,255,255,.56);font-size:8px;line-height:1.4;text-align:right}
.xrp-native-spine ol{
  position:relative;
  z-index:2;
  display:grid;
  gap:7px;
  margin:10px 0 9px;
  padding:0 0 0 38px;
  list-style:none;
}
.xrp-native-spine li{
  min-height:48px;
  padding:8px 9px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(5px);
}
.xrp-native-spine li b,
.xrp-native-spine li strong,
.xrp-native-spine li small{display:block}
.xrp-native-spine li b{color:#75d5b3;font-size:8px;letter-spacing:.1em}
.xrp-native-spine li strong{margin-top:3px;font-size:10px;line-height:1.3}
.xrp-native-spine li small{margin-top:2px;color:rgba(255,255,255,.55);font-size:8px}
.native-spine-track{
  position:absolute;
  z-index:3;
  top:61px;
  bottom:52px;
  left:31px;
  width:3px;
  border-radius:6px;
  background:linear-gradient(#5eb6ff,#2ecf9b);
  box-shadow:0 0 13px rgba(63,194,191,.5);
}
.native-spine-track::before,
.native-spine-track::after{
  content:"";
  position:absolute;
  left:50%;
  width:11px;
  height:11px;
  border:2px solid #7edfc2;
  border-radius:50%;
  background:#0b3d3e;
  transform:translateX(-50%);
}
.native-spine-track::before{top:1px}
.native-spine-track::after{bottom:1px}
.native-spine-track i{
  position:absolute;
  top:0;
  left:-3px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px #6be2bd;
  animation:roleSpineFlow 4.2s linear infinite;
}
.native-spine-track i:nth-child(2){animation-delay:-1.4s}
.native-spine-track i:nth-child(3){animation-delay:-2.8s}
.xrp-native-spine>p{
  position:relative;
  z-index:2;
  margin:auto 0 0;
  padding:9px 10px;
  border:1px solid rgba(245,201,102,.25);
  border-radius:10px;
  background:rgba(245,201,102,.09);
  color:rgba(255,255,255,.72);
  font-size:8px;
  line-height:1.55;
}
.xrp-native-spine>p b{color:#ffe29c}
.xrp-role-map-verdict{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:15px;
  align-items:center;
  padding:10px 15px;
  border-top:1px solid #d7e4e9;
  background:#fff;
}
.xrp-role-map-verdict span{color:var(--role-green);font-size:8px;font-weight:900;letter-spacing:.12em}
.xrp-role-map-verdict strong{color:#24434e;font-size:10px;line-height:1.5;text-align:right}

/* Four explicit shared-state ports. Confidential MPT is not native XRP. */
.shared-state-ports{grid-template-columns:repeat(4,minmax(0,1fr))}
.shared-state-ports article{grid-template-columns:38px minmax(0,1fr);padding:10px}
.shared-state-ports article>i{width:38px;height:38px;border-radius:11px;box-shadow:4px 5px 0 #dceef3}
.shared-state-ports .state-port-xrp{border-color:#9fcbdc;background:linear-gradient(145deg,#fff,#edf9fc)}
.shared-state-ports .state-port-xrp>i{border-color:#73a9c0;background:#e2f5fa;color:#086f8e}
.shared-state-ports .state-port-mpt{border-style:dashed;border-color:#b8a9dd;background:linear-gradient(145deg,#fff,#f6f2fc)}
.shared-state-ports .state-port-mpt>i{border-color:#9c84ca;background:#eee8f8;color:#704ea8;box-shadow:4px 5px 0 #e4dcf2}
.shared-state-ports .state-port-mpt span{color:#7657b1}
.shared-state-ports .state-port-loan{border-color:#a9d2c3;background:linear-gradient(145deg,#fff,#eff9f5)}
.shared-state-ports .state-port-loan>i{border-color:#7fb8a3;background:#e5f5ef;color:#08795a;box-shadow:4px 5px 0 #d9eee6}
.shared-state-ports .state-port-loan span{color:#078760}

/* Company inventory and a neutral external inventory market are not synonyms. */
.xrp-ownership-boundary{
  overflow:hidden;
  margin:30px 0 31px;
  border:1px solid #d5e2e8;
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 48px rgba(24,66,87,.085);
}
.xrp-ownership-boundary>header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding:13px 17px;
  border-bottom:1px solid #dce6eb;
  background:linear-gradient(90deg,#faf8fd,#fff 48%,#f1faf6);
}
.xrp-ownership-boundary>header span{color:#7457aa;font-size:8px;font-weight:900;letter-spacing:.13em;white-space:nowrap}
.xrp-ownership-boundary>header strong{color:#1b3844;font-size:14px;line-height:1.45;text-align:right}
.ownership-boundary-scene{
  display:grid;
  grid-template-columns:minmax(0,1fr) 135px minmax(0,1fr);
  gap:13px;
  align-items:stretch;
  padding:16px;
  background:
    radial-gradient(circle at 14% 50%,rgba(118,87,177,.07),transparent 24%),
    radial-gradient(circle at 87% 50%,rgba(7,135,96,.09),transparent 25%),
    #f7fafb;
}
.ownership-boundary-scene>article{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:15px;
  align-items:center;
  min-height:152px;
  padding:17px;
  border:1px solid #d3dfe5;
  border-radius:17px;
  background:#fff;
  box-shadow:0 12px 26px rgba(25,65,84,.065);
}
.ownership-boundary-scene article span,
.ownership-boundary-scene article strong,
.ownership-boundary-scene article small{display:block}
.ownership-boundary-scene article span{font-size:8px;font-weight:900;letter-spacing:.09em}
.ownership-boundary-scene article strong{margin-top:5px;color:#1a3945;font-size:15px}
.ownership-boundary-scene article p{margin:7px 0;color:#536c77;font-size:9px;line-height:1.6}
.ownership-boundary-scene article small{justify-self:start;padding:4px 7px;border-radius:999px;font-size:8px;font-weight:850}
.ownership-ripple{border-color:#c9bfdb!important;background:linear-gradient(145deg,#fff,#f9f6fc)!important}
.ownership-ripple span{color:#7457aa}
.ownership-ripple small{background:#eee8f7;color:#6b4e9d}
.ownership-market{border-color:#a4d0c0!important;background:linear-gradient(145deg,#fff,#f0faf6)!important}
.ownership-market span{color:#078760}
.ownership-market small{background:#e1f4ec;color:#087453}
.ownership-reservoir{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  width:88px;
  height:105px;
  border:2px solid #9b88bf;
  border-radius:13px 13px 37px 37px;
  background:linear-gradient(#fff 0 31%,#eae3f5 31%);
  box-shadow:7px 8px 0 #ece6f4,inset 0 0 18px rgba(118,87,177,.12);
}
.ownership-reservoir::before{
  content:"ESCROW";
  position:absolute;
  top:8px;
  color:#7759aa;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
}
.ownership-reservoir i{
  position:absolute;
  top:29%;
  right:-25%;
  left:-25%;
  height:13px;
  background:rgba(118,87,177,.18);
  animation:ownershipWater 4s ease-in-out infinite;
}
.ownership-reservoir b{position:relative;z-index:2;margin-top:25px;color:#65439b;font-size:22px}
.ownership-orbit{
  position:relative;
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  border:1px solid #60ac90;
  border-radius:50%;
  background:linear-gradient(145deg,#0e8e68,#07533f);
  box-shadow:0 13px 27px rgba(7,103,74,.22),0 0 0 9px rgba(7,135,96,.065);
}
.ownership-orbit::before,
.ownership-orbit::after{
  content:"";
  position:absolute;
  inset:-10px;
  border:1px dashed rgba(7,135,96,.35);
  border-radius:50%;
  animation:ownershipOrbit 15s linear infinite;
}
.ownership-orbit::after{inset:10px;border-style:solid;animation-direction:reverse;animation-duration:9s}
.ownership-orbit i{
  position:absolute;
  z-index:2;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#78e0ba;
  box-shadow:0 0 9px #78e0ba;
}
.ownership-orbit i:nth-child(1){top:-4px}
.ownership-orbit i:nth-child(2){right:-4px;bottom:21px}
.ownership-orbit i:nth-child(3){bottom:2px;left:9px}
.ownership-orbit b{position:relative;z-index:2;color:#fff;font-size:19px}
.ownership-not-equal{
  display:grid;
  grid-template-rows:1fr auto auto 1fr;
  gap:7px;
  place-items:center;
  min-height:152px;
  padding:4px;
  text-align:center;
}
.ownership-not-equal i{width:2px;height:100%;background:linear-gradient(transparent,#9db2bc)}
.ownership-not-equal i:last-child{background:linear-gradient(#9db2bc,transparent)}
.ownership-not-equal strong{
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border:1px solid #d8b46d;
  border-radius:50%;
  background:#fff9ec;
  color:#9f6710;
  font-size:20px;
  box-shadow:0 8px 20px rgba(135,91,23,.1);
}
.ownership-not-equal span{color:#6d7f88;font-size:8px;font-weight:850;line-height:1.55}
.xrp-ownership-boundary>p{
  margin:0;
  padding:12px 17px;
  border-top:1px solid #dce7eb;
  background:#fff;
  color:#5a717b;
  font-size:9px;
  line-height:1.65;
  text-align:center;
}
.xrp-ownership-boundary>p strong{color:#173946}

@keyframes roleWindow{0%,100%{opacity:.28}50%{opacity:1;background:#7657b1}}
@keyframes roleOrbit{to{transform:rotate(360deg)}}
@keyframes rolePort{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.18)}}
@keyframes roleLedgerScan{0%,100%{top:0;opacity:.25}50%{top:20px;opacity:1}}
@keyframes roleSpineFlow{0%{top:0;opacity:0}14%,86%{opacity:1}100%{top:calc(100% - 9px);opacity:0}}
@keyframes ownershipWater{50%{transform:translateY(5px) rotate(2deg)}}
@keyframes ownershipOrbit{to{transform:rotate(360deg)}}

@media(max-width:1000px){
  .xrp-role-map-scene{grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(215px,.72fr)}
  .xrp-role-card{grid-template-columns:52px 1fr;padding:13px}
  .role-building,.role-market-port,.role-ledger-stack{width:50px;height:50px}
  .role-building i:nth-child(1),.role-building i:nth-child(2){top:10px}.role-building i:nth-child(1){left:8px}.role-building i:nth-child(2){right:8px}.role-building i:nth-child(3){right:8px;bottom:8px}
  .role-market-port::before{width:40px;height:40px}.role-market-port::after{width:27px;height:27px}
  .role-ledger-stack i{right:4px;left:4px}.role-ledger-stack i:nth-child(1){top:2px}.role-ledger-stack i:nth-child(2){top:13px}.role-ledger-stack i:nth-child(3){top:24px}
  .shared-state-ports{grid-template-columns:1fr 1fr}
  .ownership-boundary-scene{grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr)}
  .ownership-boundary-scene>article{grid-template-columns:74px 1fr;padding:14px}
  .ownership-reservoir{width:70px;height:94px}.ownership-orbit{width:70px;height:70px}
}

/* On phones, XRP becomes a literal vertical spine beside the other three roles. */
@media(max-width:760px){
  .xrp-role-map{margin:0 4px 10px;border-radius:16px;box-shadow:0 14px 32px rgba(26,69,91,.08)}
  .xrp-role-map-head{display:block;padding:10px 11px}
  .xrp-role-map-head span{font-size:8px}
  .xrp-role-map-head strong{display:block;margin-top:4px;font-size:12px;text-align:left}
  .xrp-role-map-scene{
    grid-template-columns:104px minmax(0,1fr);
    grid-template-areas:
      "xrp ripple"
      "xrp pdex"
      "xrp xrpl";
    gap:7px;
    padding:8px;
    background-size:22px 22px,22px 22px,auto;
  }
  .xrp-role-card{grid-template-columns:40px minmax(0,1fr);gap:9px;min-height:118px;padding:11px 10px;border-radius:13px}
  .xrp-role-card span{font-size:8px;line-height:1.35}
  .xrp-role-card strong{font-size:15px}
  .xrp-role-card p{margin:5px 0 6px;font-size:9px;line-height:1.5}
  .xrp-role-card small{padding:3px 5px;font-size:8px;line-height:1.3}
  .role-building,.role-market-port,.role-ledger-stack{width:39px;height:43px;box-shadow:4px 5px 0 #e4edf2}
  .role-building::before{top:-7px;right:5px;left:5px;height:8px}
  .role-building i{width:5px;height:6px}.role-building i:nth-child(1){left:6px}.role-building i:nth-child(2),.role-building i:nth-child(3){right:6px}.role-building b{font-size:14px}
  .role-market-port::before{width:32px;height:32px}.role-market-port::after{width:21px;height:21px}.role-market-port i{width:4px;height:4px}.role-market-port i:nth-child(1){top:8px;left:10px}.role-market-port i:nth-child(2){top:10px;right:9px}.role-market-port i:nth-child(3){right:16px;bottom:6px}.role-market-port b{font-size:14px}
  .role-ledger-stack i{height:18px}.role-ledger-stack i:nth-child(1){top:0}.role-ledger-stack i:nth-child(2){top:9px}.role-ledger-stack i:nth-child(3){top:18px}.role-ledger-stack b{font-size:12px}
  .role-pdex::after{right:8px;bottom:-6px;padding:2px 5px;font-size:8px}
  .xrp-native-spine{min-height:368px;padding:10px 7px;border-radius:14px}
  .xrp-native-spine header{padding:4px 1px 10px;text-align:center}
  .xrp-native-spine header span,.xrp-native-spine header small{display:none}
  .xrp-native-spine header strong{font-size:25px}
  .xrp-native-spine ol{gap:18px;margin:25px 0 15px;padding:0;text-align:center}
  .xrp-native-spine li{display:grid;align-content:center;min-height:61px;padding:6px 3px;border-radius:9px;background:rgba(255,255,255,.09)}
  .xrp-native-spine li b{font-size:8px;letter-spacing:.04em}
  .xrp-native-spine li strong{font-size:9px;line-height:1.4}
  .xrp-native-spine li small{display:block;margin-top:3px;color:rgba(255,255,255,.72);font-size:8px;line-height:1.35}
  .native-spine-track{top:45px;bottom:61px;left:50%;z-index:1;opacity:.58;transform:translateX(-50%)}
  .xrp-native-spine li,.xrp-native-spine header,.xrp-native-spine>p{z-index:2}
  .xrp-native-spine>p{padding:7px 4px;font-size:8px;line-height:1.45;text-align:center}
  .xrp-native-spine>p br{display:none}
  .xrp-role-map-verdict{grid-template-columns:1fr;gap:3px;padding:9px 11px}
  .xrp-role-map-verdict span{font-size:8px}.xrp-role-map-verdict strong{font-size:10px;text-align:left}

  .shared-state-ports{grid-template-columns:1fr}
  .shared-state-ports article{grid-template-columns:36px minmax(0,1fr);padding:9px}
  .shared-state-ports article>i{width:36px;height:36px}

  .xrp-ownership-boundary{margin:23px -4px 25px;border-radius:17px}
  .xrp-ownership-boundary>header{display:block;padding:11px 12px}
  .xrp-ownership-boundary>header span{font-size:8px}
  .xrp-ownership-boundary>header strong{display:block;margin-top:5px;font-size:12px;text-align:left}
  .ownership-boundary-scene{grid-template-columns:1fr;gap:7px;padding:9px}
  .ownership-boundary-scene>article{grid-template-columns:70px minmax(0,1fr);min-height:132px;padding:13px 11px;border-radius:13px}
  .ownership-reservoir{width:66px;height:86px;border-radius:11px 11px 29px 29px;box-shadow:5px 6px 0 #ece6f4}
  .ownership-reservoir::before{font-size:8px}.ownership-reservoir b{font-size:18px}
  .ownership-orbit{width:65px;height:65px}.ownership-orbit b{font-size:15px}
  .ownership-boundary-scene article span{font-size:8px;line-height:1.35}
  .ownership-boundary-scene article strong{font-size:13px}
  .ownership-boundary-scene article p{margin:5px 0;font-size:9px;line-height:1.55}
  .ownership-boundary-scene article small{font-size:8px}
  .ownership-not-equal{grid-template-rows:auto;grid-template-columns:1fr auto minmax(118px,auto) 1fr;gap:7px;min-height:40px}
  .ownership-not-equal i{width:100%;height:2px;background:linear-gradient(90deg,transparent,#9db2bc)}
  .ownership-not-equal i:last-child{background:linear-gradient(90deg,#9db2bc,transparent)}
  .ownership-not-equal strong{width:32px;height:32px;font-size:16px}
  .ownership-not-equal span{font-size:8px;line-height:1.35}
  .ownership-not-equal span br{display:none}
  .xrp-ownership-boundary>p{padding:10px 12px;font-size:9px;text-align:left}
}

@media(max-width:380px){
  .xrp-role-map-scene{grid-template-columns:96px minmax(0,1fr);padding:6px}
  .xrp-role-card{grid-template-columns:1fr;gap:5px;min-height:126px}
  .role-building,.role-market-port,.role-ledger-stack{display:none}
  .xrp-native-spine{padding-inline:5px}
  .xrp-native-spine li strong{font-size:8.5px}
  .xrp-native-spine>p{font-size:8px}
  .ownership-boundary-scene>article{grid-template-columns:58px minmax(0,1fr);padding:11px 9px}
  .ownership-reservoir{width:54px;height:77px}.ownership-orbit{width:54px;height:54px}
}

@media(prefers-reduced-motion:reduce){
  .xrp-role-map *,
  .xrp-role-map *::before,
  .xrp-role-map *::after,
  .xrp-ownership-boundary *,
  .xrp-ownership-boundary *::before,
  .xrp-ownership-boundary *::after{animation:none!important}
}