.crypto-shell {
  --wide-page-measure: 82rem;
}

/* The shell and typography come from the active blog skin. The explorer only
   defines hierarchy and controls, using the same color and font tokens. */
.crypto-panel {
  padding: clamp(1rem, 2.5vw, 2rem);
}

.crypto-explorer {
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.62;
}

.crypto-explorer .tools {
  position: sticky;
  z-index: 5;
  top: .5rem;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  gap: .55rem;
  align-items: stretch;
  margin: 0 0 1.5rem;
  padding: .65rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid var(--rule);
  border-radius: .45rem;
  box-shadow: 0 .25rem .8rem color-mix(in srgb, var(--navy) 14%, transparent);
  backdrop-filter: blur(.45rem);
}

.crypto-explorer input,
.crypto-explorer button {
  min-height: 2.65rem;
  border: 2px solid var(--navy);
  border-radius: .3rem;
}

.crypto-explorer input {
  min-width: 0;
  padding: .5rem .7rem;
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rule) 35%, transparent);
}

.crypto-explorer input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.crypto-explorer button {
  padding: .45rem .75rem;
  color: #fff;
  background: var(--navy);
  font-family: var(--keys);
  font-size: 1rem;
  line-height: 1.15;
  cursor: pointer;
}

.crypto-explorer button:hover {
  color: var(--navy);
  background: var(--orange);
}

.crypto-explorer #empty {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  color: var(--ink);
  background: var(--paper-low);
  border-left: .3rem solid var(--orange);
}

.crypto-explorer #outline {
  display: grid;
  gap: 1rem;
}

.crypto-explorer details {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  scroll-margin-top: 6rem;
}

.crypto-explorer summary {
  position: relative;
  display: block;
  padding: .58rem .7rem .58rem 1.75rem;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.crypto-explorer summary::-webkit-details-marker {
  display: none;
}

.crypto-explorer summary::before {
  position: absolute;
  top: .84em;
  left: .55rem;
  width: .48rem;
  height: .48rem;
  content: "";
  border-right: .14rem solid var(--orange);
  border-bottom: .14rem solid var(--orange);
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform 120ms ease;
}

.crypto-explorer details[open] > summary::before {
  transform: rotate(45deg);
}

.crypto-explorer summary:hover {
  background: color-mix(in srgb, var(--paper-low) 76%, transparent) !important;
}

/* Major branches read like section dividers rather than nested cards. */
.crypto-explorer #outline > details.topic {
  border-top: 3px solid var(--navy);
}

.crypto-explorer #outline > details.topic > summary {
  padding-block: .8rem;
  padding-left: 2rem;
  background: var(--paper-low) !important;
  border-bottom: 1px solid transparent;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2vw, 1.55rem) !important;
  font-weight: 800;
}

.crypto-explorer #outline > details.topic > summary::before {
  top: 1.15em;
  left: .7rem;
}

.crypto-explorer #outline > details.topic[open] > summary {
  border-bottom-color: var(--rule);
}

/* Topic depth is shown with spacing and one short rule per immediate branch.
   This avoids the dense stack of full-height rails from the prototype. */
.crypto-explorer details.topic > .body {
  padding: .15rem 0 .35rem clamp(.55rem, 1.5vw, 1rem);
}

.crypto-explorer details.topic details.topic {
  margin-top: .35rem;
  margin-left: clamp(.2rem, 1.3vw, .9rem);
  border-left: 2px solid var(--rule);
}

.crypto-explorer details.topic details.topic > summary {
  background: var(--paper) !important;
  font-size: 1.14rem !important;
}

.crypto-explorer details.topic details.topic[open] > summary {
  color: var(--link) !important;
}

/* Concepts are compact index rows when closed and reading panels when open. */
.crypto-explorer details.concept {
  margin: .4rem 0 .4rem clamp(.2rem, 1.3vw, .9rem);
  border: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
  border-left: .25rem solid var(--orange);
  border-radius: .3rem;
}

.crypto-explorer details.concept > summary {
  padding-block: .52rem;
  background: color-mix(in srgb, var(--paper-low) 58%, var(--paper)) !important;
  font-size: 1.07rem !important;
  font-weight: 650;
}

.crypto-explorer details.concept[open] {
  background: var(--paper);
  border-color: var(--rule);
  border-left-color: var(--orange);
}

.crypto-explorer details.concept[open] > summary {
  background: var(--paper-low) !important;
  border-bottom: 1px solid var(--rule);
}

.crypto-explorer details.concept > .body {
  margin: .55rem;
  padding: clamp(.75rem, 1.8vw, 1.1rem);
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, var(--paper-low));
  border: 1px solid color-mix(in srgb, var(--rule) 68%, transparent);
  border-radius: .22rem;
  box-shadow: inset .2rem 0 0 color-mix(in srgb, var(--orange) 72%, transparent);
}

.crypto-explorer .body {
  padding: .1rem clamp(.75rem, 2vw, 1.15rem) .85rem;
}

.crypto-explorer .body p,
.crypto-explorer .body ul,
.crypto-explorer .body ol {
  margin-block: .7rem;
}

.crypto-explorer details.concept > .body > :first-child {
  margin-top: 0;
}

.crypto-explorer details.concept > .body > :last-child {
  margin-bottom: 0;
}

.crypto-explorer .body ul,
.crypto-explorer .body ol {
  padding-left: 1.45rem;
}

.crypto-explorer .body li + li {
  margin-top: .32rem;
}

.crypto-explorer .body h3 {
  margin: 1rem 0 .25rem;
  color: var(--muted);
  font-family: var(--keys);
  font-size: .88rem;
  line-height: 1.3;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.crypto-explorer .body h3:has(+ .papers) {
  font-size: .74rem;
}

.crypto-explorer .topic-description {
  max-width: 72ch;
  color: var(--muted);
}

.crypto-explorer .papers {
  font-size: .94rem;
}

.crypto-explorer .permalink {
  display: inline-block;
  margin-top: .25rem;
  font-family: var(--keys);
  font-size: .76rem;
}

.crypto-explorer a {
  overflow-wrap: anywhere;
}

@media (max-width: 42rem) {
  .crypto-panel {
    padding: .75rem;
  }

  .crypto-explorer .tools {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .crypto-explorer .tools input {
    grid-column: 1 / -1;
  }

  .crypto-explorer button {
    width: 100%;
  }

  .crypto-explorer #outline {
    gap: .8rem;
  }

  .crypto-explorer #outline > details.topic > summary {
    font-size: 1.28rem !important;
  }

  .crypto-explorer details.topic > .body {
    padding-left: .2rem;
  }

  .crypto-explorer details.topic details.topic,
  .crypto-explorer details.concept {
    margin-left: .15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crypto-explorer summary::before {
    transition: none;
  }
}