/* Extracted from cutaway.html, scoped to .cutaway-mount-wrap */

.cutaway-mount-wrap {
  --serif: "Newsreader", "Source Serif 4", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}
.cutaway-mount-wrap #root { display: block; width: 100%; }

/* ────────── tokens — mapped to canonical --ulv-* (2026-05-22) ────────── */
/* Cutaway-local names alias canonical tokens. No parallel :root.
   Fonts + base radii already declared on .cutaway-mount-wrap above. */
.cutaway-mount-wrap {
    --bg: var(--surface-page);
    --bg-soft: var(--surface-canvas);
    --bg-warm: var(--ulv-stone-75);
    --surface: var(--surface-raised);
    --ink: var(--text-primary);
    --ink-soft: var(--text-secondary);
    --ink-mute: var(--text-tertiary);
    --line: var(--border-default);
    --line-soft: var(--border-subtle);
    /* Personal-property (default) — forest. */
    --accent: var(--ulv-forest-600);
    --accent-tint: rgba(47, 111, 88, 0.18);
    --accent-soft: rgba(47, 111, 88, 0.08);
    --accent-deep: var(--ulv-forest-800);
    /* Land improvements — terra. */
    --accent-land: var(--ulv-terra-500);
    --accent-land-deep: var(--ulv-terra-700);
    --accent-land-soft: rgba(201, 112, 68, 0.10);
    --accent-land-tint: rgba(201, 112, 68, 0.20);
    /* Real property — stone slate. */
    --accent-real: var(--ulv-stone-600);
    --accent-real-deep: var(--ulv-stone-800);
    --accent-real-soft: rgba(85, 88, 82, 0.10);
    --accent-real-tint: rgba(85, 88, 82, 0.20);
    --dim-amount: 0.45;
    --r-md: var(--radius-md);
    --r-lg: var(--radius-lg);
    --r-xl: var(--radius-xl);
    --spot-ease: cubic-bezier(.4, .1, .2, 1);
  }
/* * reset stripped */
  /* reset stripped */
/* body reset stripped */

  /* ────────── page intro (minimal chrome) ────────── */
  .intro { width: 100%; max-width: 1240px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .intro__brand { display: flex; align-items: center; gap: 10px; }
  .intro__mark { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--accent-deep); display: grid; place-items: center; color: #fff; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 19px; line-height: 1; }
  .intro__name { font-family: var(--sans); font-weight: 600; letter-spacing: -.005em; }
  .intro__tag { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: .1em; text-transform: uppercase; }

  /* ────────── module shell ────────── */
  .app { width: 100%; max-width: 1240px; margin: 0 auto; }
  .module {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 22px;
    align-items: start;
  }
  .module--no-card { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }

  /* ────────── category scope ────────── */
  /* Land-improvement items override accent locally; personal-property
     uses the default green. Applied to chips, hotspots, leaders,
     spotlight, and the stage (which reflects the active item). */
  .cat-land {
    --accent: var(--accent-land);
    --accent-deep: var(--accent-land-deep);
    --accent-soft: var(--accent-land-soft);
    --accent-tint: var(--accent-land-tint);
  }
  .cat-real {
    --accent: var(--accent-real);
    --accent-deep: var(--accent-real-deep);
    --accent-soft: var(--accent-real-soft);
    --accent-tint: var(--accent-real-tint);
  }

  /* ────────── stage ────────── */
  .stage {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 26px 26px 6px;
    display: flex; flex-direction: column; gap: 14px;
    position: relative;
    box-shadow: none;
  }
  .stage__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .stage__eyebrow {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent-deep);
    margin-bottom: 6px;
  }
  .stage__title {
    font-family: var(--serif); font-size: 28px; line-height: 1.1;
    color: var(--ink); font-weight: 500; letter-spacing: -.01em;
  }
  .stage__title em { font-style: italic; color: var(--accent-deep); }
  .stage__legend {
    display: flex; align-items: center; gap: 14px;
    font-size: 11px; color: var(--ink-mute);
    font-family: var(--mono); letter-spacing: .04em;
    padding-top: 8px;
  }
  .stage__legendDot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 6px;
  }
  .stage__legendDot--real { background: var(--accent-real); box-shadow: 0 0 0 2px var(--accent-real-soft); }
  .stage__legendDot--land { background: var(--accent-land); box-shadow: 0 0 0 2px var(--accent-land-soft); }
  .stage__legendDot--personal { background: #2f6f58; box-shadow: 0 0 0 2px rgba(47,111,88,.10); }

  /* ────────── surface ────────── */
  .surface {
    display: grid;
    grid-template-columns: 142px 1fr 142px;
    gap: 6px;
    align-items: stretch;
    position: relative;
  }
  .rail { position: relative; }

  /* ────────── house frame ────────── */
  .house {
    position: relative;
    aspect-ratio: 1 / 1;
    background: transparent;
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .house-frame {
    position: relative; width: 100%; height: 100%;
  }
  .house-base {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    /* subtle "settled" feel */
    filter: contrast(1.02) saturate(1.02);
  }

  /* ground shadow */
  .house::after {
    content: ""; position: absolute;
    left: 8%; right: 8%; bottom: 4%;
    height: 14px;
    background: radial-gradient(ellipse, rgba(20,30,28,.18), transparent 65%);
    z-index: 1;
    pointer-events: none;
  }

  /* ────────── spotlight overlay ────────── */
  .spotlight {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
  }
  .spotlight .dim {
    fill: oklch(20% 0.02 60);
    fill-opacity: var(--dim-amount);
    transition: fill-opacity .35s ease;
  }
  .spotlight .dim--soft {
    fill-opacity: calc(var(--dim-amount) * 0.6);
  }
  .spotlight .halo {
    mix-blend-mode: screen;
    animation: haloPulse 2.4s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes haloPulse {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
  }
  @keyframes haloPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
  }

  /* highlight-style variants */
  .hi-halo .spotlight .dim,
  .hi-ring .spotlight .dim { display: none; }
  .hi-ring .spotlight .halo { display: none; }

  /* ────────── hotspots ────────── */
  .hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    appearance: none; border: 0; background: transparent;
    cursor: pointer;
    padding: 0;
    pointer-events: all;
    transition: transform .25s ease;
  }
  .hotspot:hover { transform: translate(-50%, -50%) scale(1.15); }
  .hotspot__dot {
    position: absolute; inset: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    box-shadow: 0 0 0 1.5px rgba(20,30,28,.4), 0 1px 3px rgba(0,0,0,.3);
    transition: background .25s, box-shadow .25s, inset .25s;
  }
  .hotspot__ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    opacity: 0;
    transition: opacity .25s;
  }
  .hotspot__ring--2 { animation: none; }

  .hotspot.is-active .hotspot__dot {
    inset: 6px;
    background: var(--accent);
    box-shadow: 0 0 0 2px #fff, 0 0 12px var(--accent-tint);
  }
  .hotspot.is-active .hotspot__ring {
    opacity: 1;
    animation: ringPulse 2s ease-out infinite;
  }
  .hotspot.is-active .hotspot__ring--2 {
    animation: ringPulse 2s ease-out infinite;
    animation-delay: 1s;
  }
  @keyframes ringPulse {
    0%   { transform: scale(.8); opacity: .8; }
    100% { transform: scale(2.2); opacity: 0; }
  }

  /* ────────── label chips ────────── */
  .chip {
    position: absolute;
    display: flex; align-items: center; gap: 9px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 8px 12px 8px 10px;
    cursor: pointer;
    user-select: none;
    transition: transform .2s, background .2s;
    transform: translateY(-50%);
    width: 134px;
    z-index: 4;
  }
  .chip--left  { left: 0;  }
  .chip--right { right: 0; }
  .chip:hover { transform: translateY(-50%) translateX(0); }
  .chip--left:hover  { transform: translateY(-50%) translateX(2px); }
  .chip--right:hover { transform: translateY(-50%) translateX(-2px); }
  .chip.is-active {
    background: transparent;
  }
  .chip.is-active .chip__label { color: var(--accent-deep); }

  /* Chip icon tile — neutral idle, accent-tinted when chip is active. */
  .chip__icon {
    width: 32px; height: 32px;
    border-radius: 0;
    display: grid; place-items: center;
    background: var(--bg-soft);
    color: var(--ink-mute);
    flex-shrink: 0;
    transition: background .2s, color .2s;
  }
  .chip.is-active .chip__icon {
    background: var(--accent-soft);
    color: var(--accent-deep);
  }
  .chip__body { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
  .chip__label { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; white-space: nowrap; }
  .chip__life { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); letter-spacing: .03em; margin-top: 3px; white-space: nowrap; }

  /* ────────── leader lines ────────── */
  .leaders {
    position: absolute; inset: 0; pointer-events: none; z-index: 3;
  }
  .leader {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible;
  }
  .leader path {
    stroke: transparent;
    stroke-width: 1.1;
    transition: stroke .3s, stroke-width .3s;
  }
  .leader.is-active path {
    stroke: var(--accent);
    stroke-width: 1.4;
  }

  /* ────────── play row ────────── */
  .play { display: flex; align-items: center; gap: 12px; padding: 2px 4px 0; }
  .play__btn {
    appearance: none; border: 0;
    width: 34px; height: 34px; border-radius: 999px;
    background: var(--accent-deep); color: #fff;
    display: grid; place-items: center; cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, transform .1s;
    box-shadow: 0 4px 10px -4px var(--accent-tint);
  }
  .play__btn:hover { background: var(--accent); }
  .play__btn:active { transform: scale(.96); }
  .play__caption { font-size: 13px; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
  .play__hi { color: var(--ink-mute); font-weight: 500; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
  .play__name { color: var(--accent-deep); font-weight: 600; font-size: 14px; font-family: var(--serif); font-style: italic; }
  .play__sep { color: var(--ink-mute); margin: 0 2px; }
  .play__blurb { color: var(--ink-mute); font-size: 12.5px; }

  /* ────────── timeline ────────── */
  .tl { padding: 0 8px; }
  .tl__track {
    position: relative; height: 2px;
    background: var(--line);
    border-radius: 0;
    margin: 18px 8px 16px;
  }
  .tl__fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--accent);
    border-radius: 0;
    transition: width .15s linear;
  }
  .tl__node {
    appearance: none; border: 0;
    position: absolute; top: 50%;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--surface);
    border: 1.4px solid var(--line);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
    padding: 0;
  }
  .tl__node.is-past { background: var(--accent); border-color: var(--accent); }
  .tl__node.is-active {
    background: var(--accent); border-color: var(--accent);
    transform: translate(-50%, -50%) scale(1.35);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .tl__node:hover { border-color: var(--accent); }

  .tl__labels { position: relative; height: 18px; }
  .tl__name {
    appearance: none; border: 0; background: transparent;
    position: absolute; top: 0;
    transform: translateX(-50%);
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    color: var(--ink-mute);
    cursor: pointer; padding: 2px 4px; white-space: nowrap;
    transition: color .15s;
  }
  .tl__name:hover { color: var(--ink); }
  .tl__name.is-active { color: var(--accent-deep); font-weight: 600; }

  /* ────────── output card ────────── */
  .card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 24px 22px 20px;
    display: flex; flex-direction: column;
    box-shadow: none;
  }
  .card__hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
  .card__eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
  .card__title { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.15; letter-spacing: -.005em; }
  .card__link { font-size: 12px; color: var(--accent-deep); text-decoration: none; font-weight: 500; white-space: nowrap; }
  .card__link:hover { color: var(--accent); }

  .tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .tbl thead th {
    text-align: left; font-weight: 500; font-size: 10px;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-mute); padding: 6px 4px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
  }
  .tbl tbody td { padding: 9px 4px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); transition: background .2s ease, color .2s ease; }
  .tbl tbody tr.is-active td { background: var(--accent-soft); color: var(--ink); }
  .tbl tbody tr.is-active td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
  .tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
  .tbl tbody tr.is-active td.r { color: var(--accent-deep); font-weight: 600; }
  .tbl tbody td:first-child { font-weight: 500; color: var(--ink); }
  .tbl tfoot td { padding: 14px 4px 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
  .tbl__total { color: var(--accent-deep); font-family: var(--serif); font-size: 17px; font-style: italic; }

  .card__note {
    margin-top: 16px; padding: 12px 14px;
    background: var(--accent-soft);
    border-radius: 0;
    font-size: 11.5px; color: var(--accent-deep);
    display: flex; align-items: flex-start; gap: 8px;
    line-height: 1.5;
  }
  .card__noteDot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }

  /* ────────── responsive ────────── */
  @media (max-width: 980px) {
    .module { grid-template-columns: 1fr; }
    .surface { grid-template-columns: 120px 1fr 120px; }
    .chip { width: 116px; padding: 6px 10px 6px 8px; }
    .chip__icon { width: 28px; height: 28px; }
    .chip__label { font-size: 12px; }
    .stage__title { font-size: 22px; }
  }
  @media (max-width: 640px) {
    .surface { grid-template-columns: 1fr; }
    .rail { display: none; }
    .stage { padding: 18px; border-radius: var(--r-lg); }
    .card { padding: 18px; }
    .tl__name { font-size: 10px; }
  }