@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    *,:before,:after,::backdrop {
      --tw-rotate-x:initial;
      --tw-rotate-y:initial;
      --tw-rotate-z:initial;
      --tw-skew-x:initial;
      --tw-skew-y:initial;
      --tw-border-style:solid;
      --tw-font-weight:initial;
      --tw-ordinal:initial;
      --tw-slashed-zero:initial;
      --tw-numeric-figure:initial;
      --tw-numeric-spacing:initial;
      --tw-numeric-fraction:initial;
      --tw-shadow:0 0 #0000;
      --tw-shadow-color:initial;
      --tw-shadow-alpha:100%;
      --tw-inset-shadow:0 0 #0000;
      --tw-inset-shadow-color:initial;
      --tw-inset-shadow-alpha:100%;
      --tw-ring-color:initial;
      --tw-ring-shadow:0 0 #0000;
      --tw-inset-ring-color:initial;
      --tw-inset-ring-shadow:0 0 #0000;
      --tw-ring-inset:initial;
      --tw-ring-offset-width:0px;
      --tw-ring-offset-color:#fff;
      --tw-ring-offset-shadow:0 0 #0000;
      --tw-outline-style:solid;
      --tw-blur:initial;
      --tw-brightness:initial;
      --tw-contrast:initial;
      --tw-grayscale:initial;
      --tw-hue-rotate:initial;
      --tw-invert:initial;
      --tw-opacity:initial;
      --tw-saturate:initial;
      --tw-sepia:initial;
      --tw-drop-shadow:initial;
      --tw-drop-shadow-color:initial;
      --tw-drop-shadow-alpha:100%;
      --tw-drop-shadow-size:initial;
      --tw-ease:initial
    }
  }
}
@layer theme {
  :root,:host {
    /* THE LOT type system --------------------------------------------------
       Display is a didone because this presents like an auction catalogue and
       behaves like a claw machine, and that tension is the brand. Mono carries
       every figure: the data layer is the honest half.
       The first pick for these two slots was two faces on impeccable's 16-face
       ban list. The scanner missed them: its regex matches `font-family:` and
       these are custom-property values, so token indirection hid them from it.
       See README "Type". Candidates were rendered at 76px and 11px before this
       pick, not chosen by name. */
    --font-sans:"Schibsted Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --font-mono:"Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-display:"Bodoni Moda", "Times New Roman", Georgia, serif;
    --color-white:#fff;
    --spacing:.25rem;
    --container-xs:20rem;
    --font-weight-semibold:600;
    --ease-out:cubic-bezier(0, 0, .2, 1);
    --ease-in-out:cubic-bezier(.4, 0, .2, 1);
    --ease-lot:cubic-bezier(.16, 1, .3, 1);
    --default-transition-duration:.15s;
    --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
    --default-font-family:var(--font-sans);
    --default-mono-font-family:var(--font-mono);

    /* Ground. Truer black than the blue-grey it replaced, so the warm pools
       under the product renders stop fighting the page. */
    --color-surface:#0a0a0b;
    --color-surface-2:#101012;
    --color-surface-3:#17171a;
    --color-hairline:#232327;
    --color-chip:#2e2e34;
    --color-ink:#f4f1ea;
    --color-muted:#a0a0a8;
    --color-tertiary:#85858e;
    --color-log:#c2c2c8;

    --color-accent:#ccff00;
    --color-accent-bg:#161c05;
    --color-accent-border:#465416;
    --color-warning:#e8b45c;

    /* The ladder is monochrome until it matters: three greys, then gold, then
       the accent. A five-hue loot palette says "video game"; this says "ladder",
       and the top of it is the one colour the brand owns. */
    --rarity-common:#85858e;
    --rarity-uncommon:#9e9ea7;
    --rarity-rare:#c9c9d1;
    --rarity-immortal:#f0b94e;
    --rarity-legendary:#ccff00;

    --color-block-1:#151517;
    --color-block-2:#1c1c1f;
    --color-block-3:#232327;
    --color-block-4:#2b2b30;
  }
}
@layer base {
  *,:after,:before,::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  ::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  html,:host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }
  hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }
  abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }
  h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
  }
  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }
  b,strong {
    font-weight:bolder
  }
  code,kbd,samp,pre {
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }
  small {
    font-size:80%
  }
  sub,sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }
  sub {
    bottom:-.25em
  }
  sup {
    top:-.5em
  }
  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }
  :-moz-focusring:where(:not(iframe)) {
    outline:auto
  }
  progress {
    vertical-align:baseline
  }
  summary {
    display:list-item
  }
  ol,ul,menu {
    list-style:none
  }
  img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align:middle;
    display:block
  }
  img,video {
    max-width:100%;
    height:auto
  }
  button,input,select,optgroup,textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  ::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  :where(select:is([multiple],[size])) optgroup {
    font-weight:bolder
  }
  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px
  }
  ::file-selector-button {
    margin-inline-end:4px
  }
  ::placeholder {
    opacity:1
  }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor
    }
    @supports (color:color-mix(in lab,red,red)) {
      ::placeholder {
        color:color-mix(in oklab,currentcolor 50%,transparent)
      }
    }
  }
  textarea {
    resize:vertical
  }
  ::-webkit-search-decoration {
    -webkit-appearance:none
  }
  ::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit
  }
  ::-webkit-datetime-edit {
    display:inline-flex
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding:0
  }
  ::-webkit-datetime-edit {
    padding-block:0
  }
  ::-webkit-datetime-edit-year-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-month-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-day-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-second-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block:0
  }
  ::-webkit-calendar-picker-indicator {
    line-height:1
  }
  :-moz-ui-invalid {
    box-shadow:none
  }
  button,input:where([type=button],[type=reset],[type=submit]) {
    appearance:button
  }
  ::file-selector-button {
    appearance:button
  }
  ::-webkit-inner-spin-button {
    height:auto
  }
  ::-webkit-outer-spin-button {
    height:auto
  }
  [hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }
  html {
    background:var(--color-surface);
    color-scheme:dark
  }
  body {
    background:var(--color-surface);
    color:var(--color-ink);
    font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased;
    margin:0;
    font-size:15px;
    line-height:1.6
  }
  :not(.lossy-ds,.lossy-ds *),:not(.lossy-ds,.lossy-ds *):before,:not(.lossy-ds,.lossy-ds *):after {
    box-shadow:none!important;
    border-radius:0!important
  }
}
@layer components;
@layer utilities {
  .collapse {
    visibility:collapse
  }
  .invisible {
    visibility:hidden
  }
  .visible {
    visibility:visible
  }
  .absolute {
    position:absolute
  }
  .fixed {
    position:fixed
  }
  .relative {
    position:relative
  }
  .static {
    position:static
  }
  .sticky {
    position:sticky
  }
  .inset-0 {
    inset:0
  }
  .inset-x-3 {
    inset-inline:calc(var(--spacing) * 3)
  }
  .top-3 {
    top:calc(var(--spacing) * 3)
  }
  .top-\[64px\] {
    top:64px
  }
  .right-0 {
    right:0
  }
  .right-4 {
    right:calc(var(--spacing) * 4)
  }
  .left-0 {
    left:0
  }
  .isolate {
    isolation:isolate
  }
  .z-10 {
    z-index:10
  }
  .z-40 {
    z-index:40
  }
  .z-50 {
    z-index:50
  }
  .order-1 {
    order:1
  }
  .order-2 {
    order:2
  }
  .order-3 {
    order:3
  }
  .order-4 {
    order:4
  }
  .container {
    width:100%
  }
  @media(min-width:40rem) {
    .container {
      max-width:40rem
    }
  }
  @media(min-width:48rem) {
    .container {
      max-width:48rem
    }
  }
  @media(min-width:64rem) {
    .container {
      max-width:64rem
    }
  }
  @media(min-width:80rem) {
    .container {
      max-width:80rem
    }
  }
  @media(min-width:96rem) {
    .container {
      max-width:96rem
    }
  }
  .m-0 {
    margin:0
  }
  .-mx-5 {
    margin-inline:calc(var(--spacing) * -5)
  }
  .mx-auto {
    margin-inline:auto
  }
  .mt-0\.5 {
    margin-top:calc(var(--spacing) * .5)
  }
  .mt-1 {
    margin-top:var(--spacing)
  }
  .mt-1\.5 {
    margin-top:calc(var(--spacing) * 1.5)
  }
  .mt-2 {
    margin-top:calc(var(--spacing) * 2)
  }
  .mt-2\.5 {
    margin-top:calc(var(--spacing) * 2.5)
  }
  .mt-3 {
    margin-top:calc(var(--spacing) * 3)
  }
  .mt-3\.5 {
    margin-top:calc(var(--spacing) * 3.5)
  }
  .mt-4 {
    margin-top:calc(var(--spacing) * 4)
  }
  .mt-5 {
    margin-top:calc(var(--spacing) * 5)
  }
  .mt-6 {
    margin-top:calc(var(--spacing) * 6)
  }
  .mt-7 {
    margin-top:calc(var(--spacing) * 7)
  }
  .mt-8 {
    margin-top:calc(var(--spacing) * 8)
  }
  .-mb-5 {
    margin-bottom:calc(var(--spacing) * -5)
  }
  .mb-2 {
    margin-bottom:calc(var(--spacing) * 2)
  }
  .mb-3 {
    margin-bottom:calc(var(--spacing) * 3)
  }
  .ml-1\.5 {
    margin-left:calc(var(--spacing) * 1.5)
  }
  .ml-auto {
    margin-left:auto
  }
  .block {
    display:block
  }
  .contents {
    display:contents
  }
  .flex {
    display:flex
  }
  .grid {
    display:grid
  }
  .hidden {
    display:none
  }
  .inline {
    display:inline
  }
  .inline\! {
    display:inline!important
  }
  .inline-block {
    display:inline-block
  }
  .inline-flex {
    display:inline-flex
  }
  .table {
    display:table
  }
  .table\! {
    display:table!important
  }
  .h-6 {
    height:calc(var(--spacing) * 6)
  }
  .h-9 {
    height:calc(var(--spacing) * 9)
  }
  .h-14 {
    height:calc(var(--spacing) * 14)
  }
  .h-44 {
    height:calc(var(--spacing) * 44)
  }
  .h-full {
    height:100%
  }
  .max-h-8 {
    max-height:calc(var(--spacing) * 8)
  }
  .max-h-96 {
    max-height:calc(var(--spacing) * 96)
  }
  .min-h-0 {
    min-height:0
  }
  .min-h-\[320px\] {
    min-height:320px
  }
  .min-h-screen {
    min-height:100vh
  }
  .w-9 {
    width:calc(var(--spacing) * 9)
  }
  .w-14 {
    width:calc(var(--spacing) * 14)
  }
  .w-full {
    width:100%
  }
  .max-w-8 {
    max-width:calc(var(--spacing) * 8)
  }
  .max-w-xs {
    max-width:var(--container-xs)
  }
  .min-w-0 {
    min-width:0
  }
  .flex-1 {
    flex:1
  }
  .shrink {
    flex-shrink:1
  }
  .shrink-0 {
    flex-shrink:0
  }
  .grow {
    flex-grow:1
  }
  .transform {
    transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
  }
  .cursor-not-allowed {
    cursor:not-allowed
  }
  .resize {
    resize:both
  }
  .list-none {
    list-style-type:none
  }
  .grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .flex-col {
    flex-direction:column
  }
  .flex-wrap {
    flex-wrap:wrap
  }
  .items-baseline {
    align-items:baseline
  }
  .items-center {
    align-items:center
  }
  .items-end {
    align-items:flex-end
  }
  .items-start {
    align-items:flex-start
  }
  .justify-between {
    justify-content:space-between
  }
  .justify-center {
    justify-content:center
  }
  .gap-0 {
    gap:0
  }
  .gap-0\.5 {
    gap:calc(var(--spacing) * .5)
  }
  .gap-1 {
    gap:var(--spacing)
  }
  .gap-1\.5 {
    gap:calc(var(--spacing) * 1.5)
  }
  .gap-2 {
    gap:calc(var(--spacing) * 2)
  }
  .gap-2\.5 {
    gap:calc(var(--spacing) * 2.5)
  }
  .gap-3 {
    gap:calc(var(--spacing) * 3)
  }
  .gap-4 {
    gap:calc(var(--spacing) * 4)
  }
  .gap-5 {
    gap:calc(var(--spacing) * 5)
  }
  .gap-6 {
    gap:calc(var(--spacing) * 6)
  }
  .gap-8 {
    gap:calc(var(--spacing) * 8)
  }
  .gap-px {
    gap:1px
  }
  .gap-x-6 {
    column-gap:calc(var(--spacing) * 6)
  }
  .gap-y-2 {
    row-gap:calc(var(--spacing) * 2)
  }
  .self-center {
    align-self:center
  }
  .self-start {
    align-self:flex-start
  }
  .truncate {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden
  }
  .overflow-hidden {
    overflow:hidden
  }
  .overflow-x-auto {
    overflow-x:auto
  }
  .overflow-y-auto {
    overflow-y:auto
  }
  .rounded {
    border-radius:.25rem
  }
  .border {
    border-style:var(--tw-border-style);
    border-width:1px
  }
  .border-2 {
    border-style:var(--tw-border-style);
    border-width:2px
  }
  .border-t {
    border-top-style:var(--tw-border-style);
    border-top-width:1px
  }
  .border-t-2 {
    border-top-style:var(--tw-border-style);
    border-top-width:2px
  }
  .border-r {
    border-right-style:var(--tw-border-style);
    border-right-width:1px
  }
  .border-b {
    border-bottom-style:var(--tw-border-style);
    border-bottom-width:1px
  }
  .border-b-2 {
    border-bottom-style:var(--tw-border-style);
    border-bottom-width:2px
  }
  .border-l {
    border-left-style:var(--tw-border-style);
    border-left-width:1px
  }
  .border-l-2 {
    border-left-style:var(--tw-border-style);
    border-left-width:2px
  }
  .border-chip {
    border-color:var(--color-chip)
  }
  .border-hairline {
    border-color:var(--color-hairline)
  }
  .bg-ink {
    background-color:var(--color-ink)
  }
  .bg-surface {
    background-color:var(--color-surface)
  }
  .bg-surface-2 {
    background-color:var(--color-surface-2)
  }
  .bg-surface-3 {
    background-color:var(--color-surface-3)
  }
  .object-contain {
    object-fit:contain
  }
  .p-0 {
    padding:0
  }
  .p-3 {
    padding:calc(var(--spacing) * 3)
  }
  .p-4 {
    padding:calc(var(--spacing) * 4)
  }
  .p-5 {
    padding:calc(var(--spacing) * 5)
  }
  .p-6 {
    padding:calc(var(--spacing) * 6)
  }
  .p-px {
    padding:1px
  }
  .px-1\.5 {
    padding-inline:calc(var(--spacing) * 1.5)
  }
  .px-2 {
    padding-inline:calc(var(--spacing) * 2)
  }
  .px-2\.5 {
    padding-inline:calc(var(--spacing) * 2.5)
  }
  .px-3 {
    padding-inline:calc(var(--spacing) * 3)
  }
  .px-3\.5 {
    padding-inline:calc(var(--spacing) * 3.5)
  }
  .px-4 {
    padding-inline:calc(var(--spacing) * 4)
  }
  .px-5 {
    padding-inline:calc(var(--spacing) * 5)
  }
  .px-6 {
    padding-inline:calc(var(--spacing) * 6)
  }
  .py-1 {
    padding-block:var(--spacing)
  }
  .py-1\.5 {
    padding-block:calc(var(--spacing) * 1.5)
  }
  .py-2 {
    padding-block:calc(var(--spacing) * 2)
  }
  .py-2\.5 {
    padding-block:calc(var(--spacing) * 2.5)
  }
  .py-3 {
    padding-block:calc(var(--spacing) * 3)
  }
  .py-3\.5 {
    padding-block:calc(var(--spacing) * 3.5)
  }
  .py-4 {
    padding-block:calc(var(--spacing) * 4)
  }
  .py-5 {
    padding-block:calc(var(--spacing) * 5)
  }
  .py-6 {
    padding-block:calc(var(--spacing) * 6)
  }
  .py-8 {
    padding-block:calc(var(--spacing) * 8)
  }
  .py-10 {
    padding-block:calc(var(--spacing) * 10)
  }
  .py-14 {
    padding-block:calc(var(--spacing) * 14)
  }
  .py-16 {
    padding-block:calc(var(--spacing) * 16)
  }
  .py-20 {
    padding-block:calc(var(--spacing) * 20)
  }
  .py-24 {
    padding-block:calc(var(--spacing) * 24)
  }
  .pt-3 {
    padding-top:calc(var(--spacing) * 3)
  }
  .pt-3\.5 {
    padding-top:calc(var(--spacing) * 3.5)
  }
  .pr-1 {
    padding-right:var(--spacing)
  }
  .pb-1 {
    padding-bottom:var(--spacing)
  }
  .pb-2\.5 {
    padding-bottom:calc(var(--spacing) * 2.5)
  }
  .pb-3\.5 {
    padding-bottom:calc(var(--spacing) * 3.5)
  }
  .pb-4 {
    padding-bottom:calc(var(--spacing) * 4)
  }
  .pb-16 {
    padding-bottom:calc(var(--spacing) * 16)
  }
  .pl-3 {
    padding-left:calc(var(--spacing) * 3)
  }
  .text-center {
    text-align:center
  }
  .text-left {
    text-align:left
  }
  .text-right {
    text-align:right
  }
  .align-middle {
    vertical-align:middle
  }
  .font-display {
    font-family:var(--font-display)
  }
  .font-mono {
    font-family:var(--font-mono)
  }
  .font-sans {
    font-family:var(--font-sans)
  }
  .font-semibold {
    --tw-font-weight:var(--font-weight-semibold);
    font-weight:var(--font-weight-semibold)
  }
  .break-all {
    word-break:break-all
  }
  .whitespace-nowrap {
    white-space:nowrap
  }
  .text-accent {
    color:var(--color-accent)
  }
  .text-ink {
    color:var(--color-ink)
  }
  .text-log {
    color:var(--color-log)
  }
  .text-muted {
    color:var(--color-muted)
  }
  .text-surface {
    color:var(--color-surface)
  }
  .text-tertiary {
    color:var(--color-tertiary)
  }
  .text-warning {
    color:var(--color-warning)
  }
  .capitalize {
    text-transform:capitalize
  }
  .lowercase {
    text-transform:lowercase
  }
  .uppercase {
    text-transform:uppercase
  }
  .italic {
    font-style:italic
  }
  .ordinal {
    --tw-ordinal:ordinal;
    font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)
  }
  .tabular-nums {
    --tw-numeric-spacing:tabular-nums;
    font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)
  }
  .no-underline {
    text-decoration-line:none
  }
  .underline {
    text-decoration-line:underline
  }
  .accent-\[var\(--color-ink\)\] {
    accent-color:var(--color-ink)
  }
  .shadow {
    --tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);
    box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
  }
  .shadow-lg {
    --tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);
    box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
  }
  .ring {
    --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
    box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
  }
  .outline {
    outline-style:var(--tw-outline-style);
    outline-width:1px
  }
  .blur {
    --tw-blur:blur(8px);
    filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
  }
  .invert {
    --tw-invert:invert(100%);
    filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
  }
  .filter {
    filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
  }
  .transition {
    transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
    transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
    transition-duration:var(--tw-duration,var(--default-transition-duration))
  }
  .ease-in-out {
    --tw-ease:var(--ease-in-out);
    transition-timing-function:var(--ease-in-out)
  }
  .first\:border-t-0:first-child {
    border-top-style:var(--tw-border-style);
    border-top-width:0
  }
  .first\:pt-0:first-child {
    padding-top:0
  }
  .last\:border-r-0:last-child {
    border-right-style:var(--tw-border-style);
    border-right-width:0
  }
  .last\:border-b-0:last-child {
    border-bottom-style:var(--tw-border-style);
    border-bottom-width:0
  }
  @media(hover:hover) {
    .hover\:border-ink:hover {
      border-color:var(--color-ink)
    }
    .hover\:border-tertiary:hover {
      border-color:var(--color-tertiary)
    }
    .hover\:border-warning:hover {
      border-color:var(--color-warning)
    }
    .hover\:bg-surface:hover {
      background-color:var(--color-surface)
    }
    .hover\:bg-surface-3:hover {
      background-color:var(--color-surface-3)
    }
    .hover\:text-ink:hover {
      color:var(--color-ink)
    }
    .hover\:text-warning:hover {
      color:var(--color-warning)
    }
    .enabled\:hover\:bg-white:enabled:hover {
      background-color:var(--color-white)
    }
  }
  .disabled\:cursor-not-allowed:disabled {
    cursor:not-allowed
  }
  .disabled\:cursor-wait:disabled {
    cursor:wait
  }
  .disabled\:opacity-50:disabled {
    opacity:.5
  }
  .disabled\:opacity-60:disabled {
    opacity:.6
  }
  @media(min-width:40rem) {
    .sm\:absolute {
      position:absolute
    }
    .sm\:inset-x-auto {
      inset-inline:auto
    }
    .sm\:top-auto {
      top:auto
    }
    .sm\:right-0 {
      right:0
    }
    .sm\:mt-1 {
      margin-top:var(--spacing)
    }
    .sm\:block {
      display:block
    }
    .sm\:flex {
      display:flex
    }
    .sm\:hidden {
      display:none
    }
    .sm\:inline {
      display:inline
    }
    .sm\:w-80 {
      width:calc(var(--spacing) * 80)
    }
    .sm\:grid-cols-2 {
      grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .sm\:grid-cols-3 {
      grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .sm\:flex-row {
      flex-direction:row
    }
    .sm\:items-stretch {
      align-items:stretch
    }
    .sm\:gap-3 {
      gap:calc(var(--spacing) * 3)
    }
    .sm\:gap-4 {
      gap:calc(var(--spacing) * 4)
    }
    .sm\:gap-6 {
      gap:calc(var(--spacing) * 6)
    }
    .sm\:gap-10 {
      gap:calc(var(--spacing) * 10)
    }
    .sm\:self-start {
      align-self:flex-start
    }
    .sm\:px-3 {
      padding-inline:calc(var(--spacing) * 3)
    }
    .sm\:px-6 {
      padding-inline:calc(var(--spacing) * 6)
    }
    .sm\:px-8 {
      padding-inline:calc(var(--spacing) * 8)
    }
    .sm\:py-8 {
      padding-block:calc(var(--spacing) * 8)
    }
    .sm\:py-12 {
      padding-block:calc(var(--spacing) * 12)
    }
  }
  @media(min-width:48rem) {
    .md\:inline {
      display:inline
    }
  }
  @media(min-width:64rem) {
    .lg\:sticky {
      position:sticky
    }
    .lg\:top-8 {
      top:calc(var(--spacing) * 8)
    }
    .lg\:grid-cols-2 {
      grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .lg\:grid-cols-4 {
      grid-template-columns:repeat(4,minmax(0,1fr))
    }
    .lg\:grid-cols-\[1fr_360px\] {
      grid-template-columns:1fr 360px
    }
    .lg\:grid-cols-\[1fr_400px\] {
      grid-template-columns:1fr 400px
    }
    .lg\:flex-row {
      flex-direction:row
    }
    .lg\:gap-12 {
      gap:calc(var(--spacing) * 12)
    }
    .lg\:gap-14 {
      gap:calc(var(--spacing) * 14)
    }
    .lg\:self-start {
      align-self:flex-start
    }
  }
  .label {
    font-family:var(--font-sans);
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:11px;
    font-weight:600
  }
  .micro {
    font-family:var(--font-mono);
    letter-spacing:.06em;
    font-size:11px
  }
  .figure {
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    font-weight:500
  }
  .rule {
    border-top:1px solid var(--color-hairline)
  }
}
@keyframes step-blink {
  0%,49% {
    opacity:1
  }
  50%,to {
    opacity:0
  }
}
.blink {
  animation:1s step-end infinite step-blink
}
.flip-scene {
  perspective:1400px
}
.flip-inner {
  transform-style:preserve-3d;
  transition:transform .17s linear;
  position:relative
}
.flip-inner.flipped {
  transform:rotateY(180deg)
}
.flip-face {
  backface-visibility:hidden
}
.flip-back {
  position:absolute;
  inset:0;
  transform:rotateY(180deg)
}
.fan-surface {
  cursor:grab;
  -webkit-user-select:none;
  user-select:none;
  touch-action:pan-y
}
.fan-surface.dragging {
  cursor:grabbing
}
.no-scrollbar {
  scrollbar-width:none;
  -ms-overflow-style:none
}
.no-scrollbar::-webkit-scrollbar {
  display:none
}
@keyframes row-open {
  0% {
    opacity:0;
    max-height:0;
    transform:translateY(-6px)
  }
  to {
    opacity:1;
    max-height:120px;
    transform:translateY(0)
  }
}
@keyframes row-sweep {
  0% {
    background-color:color-mix(in srgb,var(--color-accent) 26%,transparent);
    border-left-color:var(--color-accent)
  }
  70% {
    background-color:color-mix(in srgb,var(--color-accent) 8%,transparent);
    border-left-color:var(--color-accent)
  }
  to {
    background-color:#0000;
    border-left-color:#0000
  }
}
.row-new {
  border-left:2px solid #0000;
  animation:.22s ease-out both row-open,.9s linear .18s both row-sweep
}
@media(prefers-reduced-motion:reduce) {
  .card-slot,.flip-inner {
    transition-duration:1ms!important
  }
  .row-new {
    animation:none
  }
}
@keyframes crate-breathe {
  0%,to {
    opacity:1;
    transform:scale(1)
  }
  50% {
    opacity:.88;
    transform:scale(1.045)
  }
}
.crate-sealed .crate-seal {
  transform-origin:74px 84px;
  animation:3.2s ease-in-out infinite crate-breathe
}
@keyframes crate-lid-l {
  to {
    opacity:0;
    transform:translate(-16px,-12px)rotate(-9deg)
  }
}
@keyframes crate-lid-r {
  to {
    opacity:0;
    transform:translate(16px,-12px)rotate(9deg)
  }
}
@keyframes crate-seal-out {
  40% {
    opacity:1
  }
  to {
    opacity:0;
    transform:translateY(8px)
  }
}
.crate-open .crate-lid-left {
  transform-origin:14px 34px;
  animation:.7s ease-in .2s both crate-lid-l
}
.crate-open .crate-lid-right {
  transform-origin:134px 34px;
  animation:.7s ease-in .2s both crate-lid-r
}
.crate-open .crate-seal {
  transform-origin:74px 84px;
  animation:.9s ease-in .3s both crate-seal-out
}
@media(prefers-reduced-motion:reduce) {
  .crate-sealed .crate-seal,.crate-open .crate-lid-left,.crate-open .crate-lid-right,.crate-open .crate-seal {
    animation:none
  }
  .crate-open .crate-lid-left,.crate-open .crate-lid-right,.crate-open .crate-seal {
    opacity:0
  }
}
@keyframes reveal-pop {
  0% {
    opacity:0;
    transform:scale(.86)translateY(10px)
  }
  60% {
    opacity:1;
    transform:scale(1.02)translateY(-2px)
  }
  to {
    opacity:1;
    transform:scale(1)translateY(0)
  }
}
.reveal-pop {
  animation:.48s cubic-bezier(.2,.9,.3,1.15) both reveal-pop
}
@media(prefers-reduced-motion:reduce) {
  .reveal-pop {
    animation:none
  }
}
@keyframes progress-sweep {
  0% {
    transform:translate(-100%)
  }
  to {
    transform:translate(400%)
  }
}
.progress-track {
  background:var(--color-hairline);
  height:2px;
  position:relative;
  overflow:hidden
}
.progress-track:after {
  content:"";
  background:var(--color-accent);
  width:25%;
  animation:1.15s ease-in-out infinite progress-sweep;
  position:absolute;
  inset:0
}
@media(prefers-reduced-motion:reduce) {
  .progress-track:after {
    opacity:.5;
    width:100%;
    animation:none
  }
}
@keyframes picker-land {
  0% {
    box-shadow:0 0 color-mix(in srgb,var(--color-accent) 70%,transparent)
  }
  70% {
    box-shadow:0 0 0 10px color-mix(in srgb,var(--color-accent) 0%,transparent)
  }
  to {
    box-shadow:0 0 color-mix(in srgb,var(--color-accent) 0%,transparent)
  }
}
.picker-landed {
  animation:.75s ease-out 2 picker-land
}
@media(prefers-reduced-motion:reduce) {
  .picker-landed {
    animation:none
  }
}
@keyframes modal-in {
  0% {
    opacity:0
  }
  to {
    opacity:1
  }
}
.modal-in {
  animation:.16s ease-out both modal-in
}
@media(prefers-reduced-motion:reduce) {
  .modal-in {
    animation:none
  }
}
@keyframes stage-exit {
  0% {
    opacity:1;
    transform:scale(1)
  }
  to {
    opacity:0;
    transform:scale(1.04)
  }
}
@keyframes stage-enter {
  0% {
    opacity:0;
    transform:translateY(10px)scale(.985)
  }
  to {
    opacity:1;
    transform:translateY(0)scale(1)
  }
}
@keyframes stage-bloom {
  0% {
    opacity:0
  }
  35% {
    opacity:.5
  }
  to {
    opacity:0
  }
}
.stage-exit {
  animation:.55s cubic-bezier(.4,0,.6,1) both stage-exit
}
.stage-enter {
  animation:.75s cubic-bezier(.16,.84,.28,1) both stage-enter
}
.stage-bloom {
  pointer-events:none;
  animation:.95s ease-out both stage-bloom
}
@media(prefers-reduced-motion:reduce) {
  .stage-exit,.stage-enter,.stage-bloom {
    animation:none
  }
  .stage-exit {
    opacity:0
  }
  .stage-bloom {
    display:none
  }
}
.bar-track {
  background:var(--color-hairline);
  width:100%;
  height:10px;
  position:relative;
  overflow:hidden
}
.bar-fill {
  background:var(--color-warning);
  height:100%;
  transition:width .78s cubic-bezier(.22,.7,.25,1),background-color .42s linear;
  position:relative;
  overflow:hidden
}
.bar-fill.is-done {
  background:var(--color-accent)
}
.bar-fill:after {
  content:"";
  background:linear-gradient(90deg,#0000,#ffffff57,#0000);
  animation:1.5s ease-in-out infinite bar-shimmer;
  position:absolute;
  inset:0
}
.bar-fill.is-done:after {
  opacity:0;
  animation:none
}
@keyframes bar-shimmer {
  0% {
    transform:translate(-100%)
  }
  to {
    transform:translate(100%)
  }
}
@keyframes phase-in {
  0% {
    opacity:0;
    transform:translateY(5px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.phase-in {
  animation:.38s cubic-bezier(.2,.8,.3,1) both phase-in
}
@keyframes modal-out {
  0% {
    opacity:1
  }
  to {
    opacity:0
  }
}
.modal-out {
  animation:.42s ease-in both modal-out
}
@media(prefers-reduced-motion:reduce) {
  .bar-fill,.bar-fill:after,.phase-in,.modal-out {
    transition:none;
    animation:none
  }
}
.flip-scene {
  transition:transform .15s
}
.flip-scene:hover {
  cursor:pointer;
  outline:2px solid var(--color-ink);
  outline-offset:-1px;
  transform:translateY(-3px)
}
button:not(:disabled),select:not(:disabled) {
  cursor:pointer
}
.macroblock-field {
  background-color:var(--color-surface);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><g fill='%23e9e7e1'><rect x='32' y='96' width='32' height='32' opacity='.028'/><rect x='160' y='32' width='64' height='64' opacity='.018'/><rect x='96' y='192' width='32' height='32' opacity='.024'/><rect x='208' y='144' width='32' height='32' opacity='.032'/><rect x='0' y='0' width='32' height='32' opacity='.02'/><rect x='128' y='128' width='32' height='32' opacity='.016'/></g></svg>"),repeating-linear-gradient(0deg,#0000 0 63px,#e9e7e109 63px 64px),repeating-linear-gradient(90deg,#0000 0 63px,#e9e7e109 63px 64px),repeating-linear-gradient(0deg,#0000 0 7px,#e9e7e104 7px 8px),repeating-linear-gradient(90deg,#0000 0 7px,#e9e7e104 7px 8px)
}
@supports (color:color-mix(in lab,red,red)) {
  .macroblock-field {
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><g fill='%23e9e7e1'><rect x='32' y='96' width='32' height='32' opacity='.028'/><rect x='160' y='32' width='64' height='64' opacity='.018'/><rect x='96' y='192' width='32' height='32' opacity='.024'/><rect x='208' y='144' width='32' height='32' opacity='.032'/><rect x='0' y='0' width='32' height='32' opacity='.02'/><rect x='128' y='128' width='32' height='32' opacity='.016'/></g></svg>"),repeating-linear-gradient(0deg,transparent 0 63px,color-mix(in srgb,var(--color-ink) 3.5%,transparent) 63px 64px),repeating-linear-gradient(90deg,transparent 0 63px,color-mix(in srgb,var(--color-ink) 3.5%,transparent) 63px 64px),repeating-linear-gradient(0deg,transparent 0 7px,color-mix(in srgb,var(--color-ink) 1.5%,transparent) 7px 8px),repeating-linear-gradient(90deg,transparent 0 7px,color-mix(in srgb,var(--color-ink) 1.5%,transparent) 7px 8px)
  }
}
#privy-dialog>div>div {
  width:420px!important;
  max-width:calc(100vw - 32px)!important
}
@keyframes card-reveal {
  0% {
    transform:scale(1)
  }
  40% {
    transform:scale(1.14)
  }
  to {
    transform:scale(1.06)
  }
}
.card-reveal {
  animation:.75s cubic-bezier(.2,.9,.3,1) both card-reveal
}
.card-reveal .flip-face {
  outline:3px solid var(--color-accent);
  transition:border-color .3s linear;
  border-color:var(--color-accent)!important
}
@keyframes reveal-deal {
  0% {
    opacity:0;
    transform:translateY(64px)rotateY(-180deg)scale(.6)
  }
  55% {
    opacity:1;
    transform:translateY(-10px)rotateY(-32deg)scale(1.05)
  }
  to {
    opacity:1;
    transform:translateY(0)rotateY(0)scale(1)
  }
}
.reveal-scene {
  perspective:1200px
}
.reveal-deal {
  transform-style:preserve-3d;
  animation:.95s cubic-bezier(.22,.9,.3,1) both reveal-deal
}
.reveal-face {
  backface-visibility:hidden;
  position:absolute;
  inset:0
}
.reveal-face-back {
  transform:rotateY(180deg)
}
.reveal-follow {
  animation:.55s cubic-bezier(.2,.8,.3,1) .7s both stage-enter
}
.card-tilt {
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .32s cubic-bezier(.2,.8,.3,1)
}
@keyframes sheen-pass {
  0% {
    opacity:0;
    transform:translate(-130%)skew(-18deg)
  }
  12% {
    opacity:1
  }
  to {
    opacity:0;
    transform:translate(190%)skew(-18deg)
  }
}
.card-sheen {
  background:linear-gradient(100deg,#0000,#e9e7e124,#0000);
  width:42%;
  position:absolute;
  inset:-10% auto -10% 0
}
@supports (color:color-mix(in lab,red,red)) {
  .card-sheen {
    background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--color-ink) 14%,transparent) 50%,transparent 100%)
  }
}
.card-sheen {
  pointer-events:none;
  animation:1.3s cubic-bezier(.3,.6,.3,1) 1.05s both sheen-pass
}
.rise {
  animation:.56s cubic-bezier(.2,.8,.3,1) both stage-enter
}
.opt-row {
  transition:border-color .18s linear,background-color .18s linear,transform .18s cubic-bezier(.2,.8,.3,1)
}
.opt-row:not(:disabled):hover {
  background-color:var(--color-surface-3);
  transform:translateY(-1px)
}
.opt-row:not(:disabled):active {
  transform:translateY(0)
}
@property --tw-rotate-x {
  syntax:"*";
  inherits:false
}
@property --tw-rotate-y {
  syntax:"*";
  inherits:false
}
@property --tw-rotate-z {
  syntax:"*";
  inherits:false
}
@property --tw-skew-x {
  syntax:"*";
  inherits:false
}
@property --tw-skew-y {
  syntax:"*";
  inherits:false
}
@property --tw-border-style {
  syntax:"*";
  inherits:false;
  initial-value:solid
}
@property --tw-font-weight {
  syntax:"*";
  inherits:false
}
@property --tw-ordinal {
  syntax:"*";
  inherits:false
}
@property --tw-slashed-zero {
  syntax:"*";
  inherits:false
}
@property --tw-numeric-figure {
  syntax:"*";
  inherits:false
}
@property --tw-numeric-spacing {
  syntax:"*";
  inherits:false
}
@property --tw-numeric-fraction {
  syntax:"*";
  inherits:false
}
@property --tw-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-shadow-color {
  syntax:"*";
  inherits:false
}
@property --tw-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}
@property --tw-inset-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-inset-shadow-color {
  syntax:"*";
  inherits:false
}
@property --tw-inset-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}
@property --tw-ring-color {
  syntax:"*";
  inherits:false
}
@property --tw-ring-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-inset-ring-color {
  syntax:"*";
  inherits:false
}
@property --tw-inset-ring-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-ring-inset {
  syntax:"*";
  inherits:false
}
@property --tw-ring-offset-width {
  syntax:"<length>";
  inherits:false;
  initial-value:0
}
@property --tw-ring-offset-color {
  syntax:"*";
  inherits:false;
  initial-value:#fff
}
@property --tw-ring-offset-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-outline-style {
  syntax:"*";
  inherits:false;
  initial-value:solid
}
@property --tw-blur {
  syntax:"*";
  inherits:false
}
@property --tw-brightness {
  syntax:"*";
  inherits:false
}
@property --tw-contrast {
  syntax:"*";
  inherits:false
}
@property --tw-grayscale {
  syntax:"*";
  inherits:false
}
@property --tw-hue-rotate {
  syntax:"*";
  inherits:false
}
@property --tw-invert {
  syntax:"*";
  inherits:false
}
@property --tw-opacity {
  syntax:"*";
  inherits:false
}
@property --tw-saturate {
  syntax:"*";
  inherits:false
}
@property --tw-sepia {
  syntax:"*";
  inherits:false
}
@property --tw-drop-shadow {
  syntax:"*";
  inherits:false
}
@property --tw-drop-shadow-color {
  syntax:"*";
  inherits:false
}
@property --tw-drop-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}
@property --tw-drop-shadow-size {
  syntax:"*";
  inherits:false
}
@property --tw-ease {
  syntax:"*";
  inherits:false
}
/* --- Robinhood Chain register: the call to action is the accent ------------ */
.cta{background:var(--color-accent);color:#0b0f00}
.cta:enabled:hover{background:#dcff3d}
.cta:disabled{background:var(--color-chip);color:var(--color-muted)}
.rh-note{color:var(--color-tertiary)}

/* Mobile tap targets. The header controls measured 30-31px tall at 390px — above the WCAG AA
   floor of 24px but tight for a thumb, and the logo was 22x22, under it. The header is 60px,
   so 44px fits without moving anything. In-page chips stay as designed: they clear AA. */
@media (max-width: 640px) {
  header button,
  header a[aria-label] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  header a[aria-label] { padding-inline: 2px; }
}

/* WCAG 2.5.8 (AA) wants a 24x24 target. Measured at 390px: the X link was 11x11, the footer
   "Mechanics" link 71x17 and the toast close 17x17 — all under it. Grow the BOX with padding
   rather than an absolutely-positioned pseudo hit-area: a 44px pseudo centred on an 11px icon
   near the viewport edge adds real scrollWidth, and a page-level overflow clip would then hide
   the very overflow a probe is meant to catch. */
footer a[aria-label] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
footer a:not([aria-label]) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 4px;
}
aside[data-ca-toast] button[aria-label='Close'] {
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* .figure sets white-space:nowrap, which SILENTLY defeats .break-all — word-break cannot wrap
   a line that white-space forbids breaking. The contract toast used both together, so its
   sentence ran off the right edge at 360px instead of wrapping. break-all is an explicit
   request to break, so it must win. This also makes a real 0x… address wrap instead of overflow. */
.figure.break-all {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* These three variants are used in app.js but were never generated into the sheet, so they were
   inert: the last table row kept a bottom border, the last tab kept a right border, and a
   disabled CTA showed the normal pointer. */
.last\:border-b-0:last-child { border-bottom-width: 0; }
.last\:border-r-0:last-child { border-right-width: 0; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* ============================================================================
   THE LOT — the authored design layer.
   Everything above this line is Tailwind's generated utility output plus the
   ported interaction keyframes. Everything below is ours: the type scale, the
   ladder, the vault, the tape, and the surfaces they sit on.
   ========================================================================== */

/* --- grain -----------------------------------------------------------------
   Flat #0a0a0b reads as "unfinished dark mode". A fixed 3% turbulence plate
   gives the ground a tooth so the product renders sit ON something. Fixed, not
   scrolling, so it never costs a repaint; pointer-events:none so it never eats
   a click. */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#root { position:relative; z-index:1 }
body { background:var(--color-surface); color:var(--color-ink) }

/* --- type scale ------------------------------------------------------------
   Four steps and no more. The old build ran everything between 9px and 15px,
   which is why nothing on it read as a headline. */
.display {
  font-family:var(--font-display);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.015em;
  color:var(--color-ink);
}
.d1 { font-size:clamp(44px, 8.2vw, 108px) }
.d2 { font-size:clamp(30px, 4.4vw, 58px) }
.d3 { font-size:clamp(22px, 2.6vw, 34px) }
.display em { font-style:italic; color:var(--color-accent) }

.lede {
  font-family:var(--font-sans);
  font-size:clamp(14px, 1.35vw, 17px);
  line-height:1.55;
  color:var(--color-muted);
  max-width:56ch;
}

/* Overrides the ported utilities: same class names app.js already emits, our
   metrics. NOTE: the mono ships no `zero` alternate (type_audit.py on the
   binary, not the name) -- it is a monospace, so its figures are tabular by
   construction and the feature request below is inert but harmless. */
.label {
  font-family:var(--font-sans);
  letter-spacing:.13em;
  text-transform:uppercase;
  font-size:10.5px;
  font-weight:600;
}
.micro {
  font-family:var(--font-mono);
  letter-spacing:.04em;
  font-size:10.5px;
  font-feature-settings:"zero" 1;
}
.figure {
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"zero" 1, "tnum" 1;
  white-space:nowrap;
  font-weight:500;
  letter-spacing:-.01em;
}
.figure.break-all { white-space:normal; overflow-wrap:anywhere }

/* --- section chrome -------------------------------------------------------- */
.band { border-top:1px solid var(--color-hairline); position:relative }
.band-inner { width:100%; max-width:1320px; margin-inline:auto; padding:clamp(40px,5vw,76px) clamp(16px,3vw,40px) }
.eyebrow {
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-tertiary);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before {
  content:"";
  width:18px;
  height:1px;
  background:var(--color-accent);
  flex:none;
}

/* --- the ladder ------------------------------------------------------------
   One bar, five segments, widths in true proportion to draw weight. Common is
   94.2% of it and Legendary is a 0.092% hairline of lime. That single sliver in
   a wall of grey is the product stated without a sentence, so it is drawn at
   full width and never rounded up. */
.ladder-bar {
  display:flex;
  width:100%;
  height:64px;
  border:1px solid var(--color-hairline);
  background:var(--color-surface-2);
  overflow:hidden;
}
.ladder-seg {
  position:relative;
  min-width:2px;
  border-right:1px solid var(--color-surface);
  transition:filter .18s var(--ease-out);
}
.ladder-seg:last-child { border-right:0 }
.ladder-seg:hover { filter:brightness(1.35) }
.ladder-key {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  background:var(--color-hairline);
  border:1px solid var(--color-hairline);
  margin-top:1px;
}
.ladder-cell {
  background:var(--color-surface-2);
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
  transition:background .16s var(--ease-out);
}
.ladder-cell[aria-pressed="true"] { background:var(--color-surface-3) }
.ladder-cell:not(:disabled):hover { background:var(--color-surface-3) }
.ladder-cell:disabled { opacity:.4 }
.ladder-swatch { width:100%; height:3px; display:block }
.ladder-pct { font-size:clamp(17px,1.9vw,23px); color:var(--color-ink) }
.ladder-odds { font-size:10.5px; color:var(--color-tertiary) }

/* --- the vault -------------------------------------------------------------
   jwa shipped a fan and then pivoted to a grid, and the pivot was right: a grid
   of choices beats one thing to wait for, and the prize has to be the largest
   object on the page. The renders cost $0.15 each and the old build showed them
   at 168px. */
.vault-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:1px;
  background:var(--color-hairline);
  border:1px solid var(--color-hairline);
}
.vault-cell {
  background:var(--color-surface-2);
  display:flex;
  flex-direction:column;
  text-align:left;
  position:relative;
  isolation:isolate;
  transition:background .2s var(--ease-out);
}
.vault-cell::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--color-accent);
  transition:box-shadow .18s var(--ease-out);
}
.vault-cell:hover { background:var(--color-surface-3) }
.vault-cell:hover::after { box-shadow:inset 0 0 0 1px var(--color-accent) }
.vault-cell:focus-visible { outline:2px solid var(--color-accent); outline-offset:-2px }
.vault-art {
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% 88%, #1b1712 0%, var(--color-surface) 62%);
}
.vault-art img, .vault-art > div { width:100%; height:100%; object-fit:contain }
.vault-cell:hover .vault-art img { transform:scale(1.045) }
.vault-art img { transition:transform .45s var(--ease-lot) }
.vault-meta { padding:12px 13px 14px; display:flex; flex-direction:column; gap:7px; flex:1 }
.vault-name {
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:500;
  line-height:1.28;
  color:var(--color-ink);
}
.vault-foot { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:auto }
.vault-band { position:absolute; top:0; left:0; z-index:3; height:2px }

/* --- the tape --------------------------------------------------------------
   The ledger was a 428px column of grey table rows taking a third of the
   viewport. It is a signal that the place is busy, which is a strip's job, not
   a panel's. */
.tape { display:flex; align-items:stretch; overflow:hidden; border-block:1px solid var(--color-hairline) }
.tape-track { display:flex; align-items:center; gap:0; will-change:transform }
.tape-item {
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:0 20px;
  height:44px;
  align-items:center;
  border-right:1px solid var(--color-hairline);
  white-space:nowrap;
  flex:none;
}
.tape-dot { width:5px; height:5px; flex:none }
.tape-name { font-family:var(--font-sans); font-size:11.5px; color:var(--color-ink) }
.tape-val  { font-family:var(--font-mono); font-size:11.5px; color:var(--color-muted); font-variant-numeric:tabular-nums }
.tape-state{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase }
@keyframes tape-roll { from { transform:translate3d(0,0,0) } to { transform:translate3d(-50%,0,0) } }
.tape-track.rolling { animation:tape-roll 64s linear infinite }
.tape:hover .tape-track.rolling { animation-play-state:paused }
@media (prefers-reduced-motion:reduce) {
  .tape-track.rolling { animation:none }
  .tape { overflow-x:auto }
}

/* --- the price bar ---------------------------------------------------------
   Was a 428px sidebar card. It is the single most important number on the page,
   so it gets a full-width plate and the display face. */
.pricebar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(16px,3vw,44px);
  border-top:1px solid var(--color-hairline);
  background:var(--color-surface-2);
  padding:clamp(16px,2.2vw,24px) clamp(16px,3vw,40px);
}
.pricebar-figure {
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"zero" 1;
  font-size:clamp(30px,4.4vw,52px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--color-ink);
}
.pricebar-figure .sym { font-size:.44em; letter-spacing:.04em; color:var(--color-tertiary); margin-left:.42em }

/* --- the call to action ----------------------------------------------------
   The accent is load-bearing here and nowhere else on the page by default, so
   it has to hold up: solid lime plate, near-black ink, a real pressed state. */
.cta {
  background:var(--color-accent);
  color:#0a0f00;
  font-family:var(--font-sans);
  font-weight:600;
  border:1px solid var(--color-accent);
  transition:background .14s var(--ease-out), transform .14s var(--ease-out);
}
.cta:enabled:hover { background:#dcff3d; border-color:#dcff3d }
.cta:enabled:active { transform:translateY(1px) }
.cta:disabled { background:transparent; border-color:var(--color-chip); color:var(--color-tertiary) }
.cta:focus-visible { outline:2px solid var(--color-ink); outline-offset:2px }

.ghost {
  background:transparent;
  border:1px solid var(--color-chip);
  color:var(--color-ink);
  font-family:var(--font-sans);
  font-weight:500;
  transition:border-color .14s var(--ease-out), background .14s var(--ease-out);
}
.ghost:hover { border-color:var(--color-ink); background:var(--color-surface-3) }
.ghost:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px }

/* --- the field ------------------------------------------------------------- */
.macroblock-field {
  background:
    radial-gradient(88% 62% at 50% 46%, #141416 0%, var(--color-surface) 74%),
    var(--color-surface);
  position:relative;
}
.macroblock-field::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--color-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-hairline) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.28;
  mask-image:radial-gradient(76% 66% at 50% 50%, #000 0%, transparent 78%);
}

/* --- the contract notice ---------------------------------------------------
   It was a 300x110 fixed panel that, being fixed, parked itself over the fan,
   then the ladder, then the vault, then the footer. With no address to carry
   the payload is four words, so it is one 34px line until there is one. */
.ca-pill { max-width:min(340px, calc(100vw - 32px)) }
@media (max-width:520px) { .ca-pill { left:12px; right:12px; max-width:none } }

/* --- ladder responsive -----------------------------------------------------
   auto-fit left a dead cell on the last row at two columns. Five explicit
   columns wide, two narrow, and the rarest band takes the orphan slot — which
   is the one that deserves the extra width anyway. */
.ladder-key { grid-template-columns:repeat(5, minmax(0,1fr)) }
@media (max-width:900px) {
  .ladder-key { grid-template-columns:repeat(2, minmax(0,1fr)) }
  .ladder-cell:last-child { grid-column:1 / -1 }
}
@media (max-width:400px) { .ladder-key { grid-template-columns:minmax(0,1fr) } }

/* Two up on a phone. One 358px cell per screen made the vault unscannable, and
   at 2-up the render is still the largest thing on the page. */
@media (max-width:640px) {
  .vault-grid { grid-template-columns:repeat(2, minmax(0,1fr)) }
  .vault-name { font-size:12px }
  .vault-meta { padding:10px 10px 12px }
}

/* The footer's non-affiliation line is required copy, so it wraps rather than
   hiding under a breakpoint the way the old build did. */
.rh-note { color:var(--color-tertiary); line-height:1.5 }
@media (max-width:520px) { .rh-note { flex-basis:100% } }

/* The lot filters ate three rows above the grid on a phone. Same controls,
   less furniture. */
@media (max-width:640px) {
  .vault-grid + *, .band-inner .label { letter-spacing:.1em }
  section.border.border-hairline > div:first-child { padding:8px 10px; gap:6px }
  section.border.border-hairline > div:first-child button { padding:5px 8px; font-size:9.5px }
}

/* --- ledger arrival --------------------------------------------------------
   The row-sweep keyframe washed a new row in accent at 26%, which lands at
   #2b320f, and the row's own text over it measured 3.93:1 mid-animation. axe
   caught it and was right. The marker moves to the left edge: same "this just
   arrived" signal, no wash under the text. */
@keyframes row-arrive {
  0%   { border-left-color:var(--color-accent) }
  70%  { border-left-color:var(--color-accent) }
  100% { border-left-color:transparent }
}
.row-new {
  animation:row-arrive 1.6s var(--ease-out) both;
  border-left:2px solid transparent;
  background-color:transparent !important;
}
@media (prefers-reduced-motion:reduce) { .row-new { animation:none; border-left-color:transparent } }

/* --- legible sizes ---------------------------------------------------------
   Lighthouse's legible-font-size audit was right about a phone: 10.5px labels
   and 11px meta are too small to read at arm's length. Everything that carries
   words goes to 12px+ under 640. Figures keep their tabular tightness. */
@media (max-width:640px) {
  .micro { font-size:12px }
  .label { font-size:12px; letter-spacing:.1em }
  .tape-name, .tape-val { font-size:12.5px }
  .tape-state { font-size:11px }
  .ladder-odds { font-size:12px }
  .lede { font-size:15px }
  .eyebrow { font-size:12px }
  .rh-note { font-size:12px }
  footer { font-size:12px !important }
  .vault-name { font-size:13px }
}

/* --- the field's height ----------------------------------------------------
   Reserved in CSS, not measured in JS. The reserve per breakpoint is
   header 60 + tape 44 + the hero's measured height + the price bar ~118, so the
   whole commit loop stays above the fold without the fan's size depending on
   when the display serif arrives. `svh` so a phone's URL bar cannot resize it. */
.macroblock-field { height:clamp(300px, calc(100svh - 610px), 340px) }
@media (min-width:640px)  { .macroblock-field { height:clamp(340px, calc(100svh - 500px), 430px) } }
@media (min-width:1024px) { .macroblock-field { height:clamp(360px, calc(100svh - 516px), 470px) } }
@media (min-width:1440px) { .macroblock-field { height:clamp(380px, calc(100svh - 495px), 540px) } }

/* The hero cannot collapse below its own worst-case height while the fallback
   stack is on screen, or the swap-in shifts the page under the reader. */
section.band:first-of-type .band-inner { min-height:clamp(200px, 26vw, 250px) }