@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root {
    color-scheme: dark;
    --bg: #080e17;
    --surface: #101a28;
    --surface2: #152131;
    --line: #243244;
    --text: #eff3f7;
    --muted: #8493a6;
    --accent: #e2bd80;
    --green: #62c6ab;
    --red: #e89991;
    --white: #f8f8f4;
    --font: 'Manrope', 'Noto Sans JP', sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: radial-gradient(circle at 20% 0%, rgba(30, 48, 69, .55), transparent 32%), linear-gradient(180deg, #05080d 0%, #08101a 100%);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    position: relative;
    overflow-x: hidden
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: url('./assets/stained-glass-bg.png') center center/cover no-repeat;
    opacity: .33;
    filter: saturate(1.03) brightness(.62);
    z-index: -3
}

body:after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 22% 16%, rgba(226, 189, 128, .09), transparent 25%), radial-gradient(circle at 74% 20%, rgba(130, 173, 165, .10), transparent 28%), linear-gradient(180deg, rgba(3, 5, 10, .30) 0%, rgba(4, 7, 12, .58) 48%, rgba(4, 7, 12, .82) 100%);
    backdrop-filter: blur(1.5px);
    z-index: -2
}

a {
    color: inherit;
    text-decoration: none
}

button,
select {
    font: inherit
}

button {
    cursor: pointer
}

.app-shell {
    display: flex;
    min-height: 100vh
}

.rail {
    width: 72px;
    flex: 0 0 72px;
    border-right: 1px solid rgba(131, 151, 170, .15);
    background: linear-gradient(180deg, rgba(7, 12, 20, .78), rgba(7, 12, 20, .34));
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 31px 0 27px;
    position: sticky;
    height: 100vh;
    top: 0
}

.brand-mark {
    height: 38px;
    width: 38px;
    display: grid;
    place-items: center;
    position: relative
}

.brand-orbit {
    width: 27px;
    height: 27px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: block
}

.brand-orbit:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 2px;
    background: var(--accent);
    transform: rotate(-43deg);
    top: 18px;
    left: 10px
}

.brand-dot {
    position: absolute;
    top: 1px;
    right: 2px;
    height: 8px;
    width: 8px;
    background: var(--accent);
    border-radius: 50%
}

.rail-middle {
    margin: auto 0;
    display: flex;
    align-items: center;
    gap: 16px;
    writing-mode: vertical-rl;
    font-size: 9px;
    letter-spacing: .32em;
    color: var(--muted)
}

.rail-rule {
    height: 28px;
    width: 1px;
    background: var(--line)
}

.rail-bottom {
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--muted)
}

.page {
    max-width: 1620px;
    width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
    z-index: 1
}

.topbar {
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(133, 151, 168, .17);
    background: linear-gradient(180deg, rgba(7, 12, 20, .52), rgba(7, 12, 20, .12));
    backdrop-filter: blur(9px)
}

.wordmark {
    font-size: 27px;
    letter-spacing: -1.8px;
    font-weight: 800
}

.wordmark-light {
    font-weight: 500
}

.wordmark-period {
    color: var(--accent)
}

.topnav {
    display: flex;
    gap: 39px;
    height: 100%;
    align-items: center
}

.topnav a {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    color: var(--muted);
    height: 100%;
    display: flex;
    align-items: center;
    position: relative
}

.topnav a.active {
    color: var(--text)
}

.topnav a.active:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent)
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 17px
}

.status-pill {
    border: 1px solid var(--line);
    padding: 10px 13px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    display: flex;
    gap: 9px;
    align-items: center
}

.status-led {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 13px rgba(226, 189, 128, .5)
}

.status-led.live {
    background: var(--green);
    box-shadow: 0 0 13px rgba(98, 198, 171, .7)
}

.status-led.stale {
    background: var(--red)
}

.icon-button {
    border: 1px solid var(--line);
    border-radius: 50%;
    height: 35px;
    width: 35px;
    background: transparent;
    color: var(--muted);
    font-size: 19px
}

.intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 62px 0 51px
}

.eyebrow,
.kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em;
    color: var(--accent)
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px
}

.eyebrow-line {
    width: 21px;
    height: 1px;
    background: var(--accent)
}

h1 {
    font-weight: 600;
    font-size: clamp(29px, 3.45vw, 51px);
    letter-spacing: -.055em;
    line-height: 1.47;
    margin: 17px 0 13px
}

h1 span {
    color: var(--accent)
}

.intro p {
    line-height: 2;
    color: var(--muted);
    font-size: 12px;
    margin: 0
}

.intro-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 4px
}

.intro-meta>span {
    font-size: 10px;
    letter-spacing: .17em;
    color: var(--muted);
    font-weight: 700
}

.intro-meta strong {
    font-size: 31px;
    font-weight: 600;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums
}

.intro-meta small {
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--muted)
}

.instrument-row {
    display: grid;
    grid-template-columns: 1fr 1fr .72fr;
    gap: 12px;
    margin-bottom: 18px
}

.instrument {
    min-height: 98px;
    display: flex;
    align-items: center;
    gap: 17px;
    text-align: left;
    background: linear-gradient(180deg, rgba(16, 26, 40, .72), rgba(14, 22, 34, .58));
    border: 1px solid rgba(129, 148, 166, .18);
    border-radius: 8px;
    color: var(--text);
    padding: 21px 23px;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    backdrop-filter: blur(11px) saturate(115%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .16)
}

.instrument:hover {
    transform: translateY(-2px)
}

.instrument.active {
    border-color: var(--accent);
    background: linear-gradient(110deg, rgba(226, 189, 128, .085), var(--surface) 65%)
}

.instrument-symbol {
    width: 37px;
    height: 37px;
    display: block;
    border-radius: 50%;
    flex: none
}

.gold-swatch {
    background: radial-gradient(circle at 33% 28%, #ffedc6, #b58443 66%, #5b4028);
    box-shadow: 0 0 25px rgba(226, 189, 128, .12)
}

.blue-swatch {
    background: radial-gradient(circle at 33% 28%, #b1d7eb, #477894 68%, #263d5b)
}

.instrument-name {
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap
}

.instrument-name>span {
    font-weight: 500;
    color: var(--muted)
}

.instrument-name small {
    display: block;
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;
    margin-top: 5px
}

.instrument-quote {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    gap: 7px
}

.instrument-quote strong {
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em
}

.instrument-quote small {
    font-size: 11px;
    color: var(--green);
    font-variant-numeric: tabular-nums
}

.instrument-quote small.down {
    color: var(--red)
}

.instrument-arrow {
    color: var(--accent);
    margin-left: 8px;
    font-size: 17px
}

.market-message {
    border: 1px solid rgba(129, 148, 166, .18);
    border-radius: 8px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 17px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
    background: linear-gradient(180deg, rgba(16, 26, 40, .60), rgba(14, 22, 34, .48));
    backdrop-filter: blur(10px)
}

.market-message b {
    color: var(--text);
    font-weight: 600
}

.tiny-cross {
    color: var(--accent);
    font-size: 32px;
    font-weight: 100
}

.dashboard {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 17px
}

.surface {
    background: linear-gradient(180deg, rgba(16, 26, 40, .76), rgba(11, 18, 28, .64));
    border: 1px solid rgba(129, 148, 166, .18);
    border-radius: 9px;
    backdrop-filter: blur(14px) saturate(118%);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .20)
}

.primary-card {
    min-height: 544px;
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 50% 18%, rgba(226, 189, 128, .10), transparent 42%), linear-gradient(180deg, rgba(16, 26, 40, .80), rgba(11, 18, 28, .70))
}

.card-head,
.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 13px;
    align-items: flex-start
}

.card-head h2 {
    font-size: 20px;
    letter-spacing: -.04em;
    font-weight: 750;
    margin: 9px 0 0
}

.card-head h2 span {
    font-weight: 400;
    color: var(--muted)
}

.outline-badge {
    border: 1px solid #615541;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 9px;
    letter-spacing: .1em;
    color: var(--accent);
    white-space: nowrap
}

.hero-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: 53px;
    gap: 10px
}

.price-prefix {
    font-size: 24px;
    color: var(--accent);
    font-weight: 500
}

.big-price {
    font-size: clamp(51px, 6.7vw, 97px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.072em;
    font-variant-numeric: tabular-nums
}

.price-unit {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600
}

.price-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 8px
}

.price-change {
    font-size: 17px;
    font-weight: 700;
    color: var(--green)
}

.price-change.down {
    color: var(--red)
}

.price-change span {
    font-size: 20px
}

.subtle {
    font-size: 11px;
    color: var(--muted)
}

.middot {
    margin: 0 5px
}

.hero-divider {
    border-top: 1px solid var(--line);
    margin: 37px 0 25px
}

.range-heading {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.range-heading span:first-child {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em
}

.range-heading span:last-child {
    font-size: 11px;
    color: var(--muted)
}

.range-bar {
    margin: 36px 0 0
}

.range-track {
    height: 7px;
    background: #2b3948;
    border-radius: 10px;
    position: relative
}

.range-progress {
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, #78674d, var(--accent));
    border-radius: 10px
}

.range-indicator {
    position: absolute;
    left: 50%;
    top: -9px;
    height: 25px;
    width: 3px;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
    transform: translateX(-50%)
}

.indicator-label {
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 23px
}

.range-labels>span {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.range-labels>span:last-child {
    text-align: right
}

.range-labels small {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .16em
}

.range-labels strong {
    font-size: 14px;
    font-weight: 650;
    font-variant-numeric: tabular-nums
}

.position-replay {
    margin-top: 29px;
    padding-top: 22px;
    border-top: 1px solid var(--line)
}

.position-replay__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px
}

.position-replay__heading>div {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.position-replay__heading small {
    color: var(--muted);
    font-size: 10px
}

.position-replay__controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px
}

.position-replay__controls label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em
}

.position-replay select {
    width: 100%;
    min-width: 0;
    padding: 8px 8px;
    border: 1px solid rgba(129, 148, 166, .22);
    border-radius: 4px;
    background: rgba(7, 14, 24, .72);
    color: var(--text);
    font: inherit;
    font-size: 11px;
    letter-spacing: .04em
}

.position-replay__pl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 22px 0 18px;
    padding: 15px 10px;
    border-top: 1px solid rgba(129, 148, 166, .13);
    border-bottom: 1px solid rgba(129, 148, 166, .13)
}

.position-replay small {
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .12em
}

.position-replay__pl strong {
    color: var(--green);
    font-size: 25px;
    font-variant-numeric: tabular-nums
}

.position-replay__pl strong.is-loss,
.position-replay__extremes strong.is-loss {
    color: var(--red)
}

.position-replay__extremes,
.position-replay__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.position-replay__details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px
}

.position-replay__extremes>div,
.position-replay__details>div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.position-replay__extremes>div:last-child,
.position-replay__details>div:not(:first-child) {
    text-align: right
}

.position-replay__extremes strong,
.position-replay__details strong {
    color: var(--text);
    font-size: 14px;
    font-variant-numeric: tabular-nums
}

.position-replay__extremes>div:first-child strong {
    color: var(--green)
}

.position-replay__extremes>div:last-child strong {
    color: var(--red)
}

.position-replay__note {
    display: block;
    margin-top: 17px;
    letter-spacing: .04em
}

.hero-footnote {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 11px
}

.spark-symbol {
    color: var(--accent);
    font-size: 19px
}

.right-column {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 17px
}

.position-card,
.momentum-card,
.ma-deviation-card {
    padding: 27px 30px;
    min-height: 0
}

/* The range spectrum is an analysis card after leaving the Object Viewer. */
.range-card {
    grid-column: auto;
    min-width: 0;
    padding: 27px 30px
}

.range-card .range-spectrum-wrap {
    overflow: hidden;
    min-width: 0
}

.range-card .range-spectrum {
    min-width: 0;
    min-height: 190px
}

.range-card .range-detail__content {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.ma-deviation-card .section-heading {
    margin-bottom: 13px
}

.direction-card {
    min-width: 0;
    padding: 27px 30px
}

.direction-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px
}

.direction-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 56px;
    align-items: center;
    gap: 9px;
    min-width: 0
}

.direction-period {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em
}

.direction-track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(51, 69, 82, .5)
}

.direction-zero {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(210, 220, 222, .55)
}

.direction-fill {
    position: absolute;
    top: 2px;
    height: 6px;
    border-radius: 2px;
    transition: width .5s ease, left .5s ease
}

.direction-fill.is-positive { background: var(--green) }
.direction-fill.is-negative { background: var(--red) }

.direction-row strong {
    text-align: right;
    color: var(--text);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.direction-row strong.is-positive { color: var(--green) }
.direction-row strong.is-negative { color: var(--red) }
.direction-row strong.is-na { color: var(--muted) }

.direction-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid var(--line)
}

.direction-summary div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}

.direction-summary small,
.direction-status {
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .1em;
    white-space: nowrap
}

.direction-summary strong {
    color: var(--text);
    font-size: 13px;
    font-variant-numeric: tabular-nums
}

.direction-status {
    display: block;
    margin-top: 14px;
    color: var(--accent)
}

.ma-deviation-legend {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .12em;
    white-space: nowrap
}

.ma-deviation-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.ma-deviation-key {
    width: 16px;
    border-top: 2px solid currentColor;
    display: inline-block
}

.ma-deviation-key--20 { color: #4EA5F5 }
.ma-deviation-key--50 { color: #52C69A }
.ma-deviation-key--200 { color: #EF7474 }

.ma-deviation-chart {
    height: 142px;
    margin-top: 9px;
    min-width: 0
}

.ma-deviation-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible
}

.ma-deviation-grid {
    stroke: rgba(140, 168, 190, .17);
    stroke-dasharray: 2 4;
    stroke-width: .7
}

.ma-deviation-zero {
    stroke: var(--accent);
    stroke-width: 1.1;
    opacity: .8
}

.ma-deviation-axis-label {
    fill: var(--muted);
    font-size: 8px;
    font-variant-numeric: tabular-nums
}

.ma-deviation-line {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ma-deviation-line--20 { stroke: #4EA5F5 }
.ma-deviation-line--50 { stroke: #52C69A }
.ma-deviation-line--200 { stroke: #EF7474 }

.ma-deviation-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px
}

.ma-deviation-stats div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.ma-deviation-stats small,
.ma-deviation-status {
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .12em;
    white-space: nowrap
}

.ma-deviation-stats strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums
}

.ma-deviation-stats span {
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ma-deviation-status {
    display: block;
    margin-top: 12px;
    color: var(--accent);
    font-size: 8px
}

.section-heading h3 {
    margin: 8px 0 0;
    font-size: 16px;
    letter-spacing: -.03em
}

.section-heading h3 span {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0
}

.mini-tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
    border: 1px solid var(--line);
    padding: 7px 8px;
    border-radius: 4px;
    white-space: nowrap
}

.bb-chart {
    display: grid;
    grid-template-columns: 42px 1fr 75px;
    gap: 10px;
    margin-top: 23px;
    height: 157px
}

.bb-scale,
.bb-prices {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 2px;
    font-size: 10px;
    color: var(--muted)
}

.bb-prices {
    text-align: right;
    color: var(--text);
    font-variant-numeric: tabular-nums
}

.bb-period {
    align-self: end;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .08em;
    white-space: nowrap
}

.bb-period select {
    margin-left: 5px;
    padding: 4px 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface2);
    color: var(--text);
    font-size: 9px
}

/* MA/RSI selectors keep their own timeframe state without changing card geometry. */
.analysis-period {
    align-self: end;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .08em;
    white-space: nowrap
}

.analysis-period select {
    margin-left: 5px;
    padding: 4px 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface2);
    color: var(--text);
    font-size: 9px
}

@media (max-width: 650px) {
    .ma-deviation-card .section-heading,
    .momentum-card .section-heading {
        flex-wrap: wrap;
    }

    .ma-deviation-card .section-heading > div,
    .momentum-card .section-heading > div {
        min-width: 0;
        flex: 1 1 100%;
    }

    .analysis-period {
        margin-left: auto;
    }
}

.bb-prices span:nth-child(2) {
    color: var(--muted)
}

.bb-visual {
    height: 100%;
    position: relative
}

.bb-visual:before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px dashed #526072;
    border-bottom: 1px dashed #526072
}

.bb-outer {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(226, 189, 128, .035), rgba(226, 189, 128, .085) 50%, rgba(226, 189, 128, .035))
}

.bb-inner {
    position: absolute;
    top: 16.666%;
    bottom: 16.666%;
    width: 100%;
    background: rgba(226, 189, 128, .085);
    border-top: 1px solid rgba(226, 189, 128, .2);
    border-bottom: 1px solid rgba(226, 189, 128, .2)
}

.bb-center {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dashed #6d7a8b
}

.bb-marker {
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
    border-top: 2px solid var(--accent);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px
}

.bb-marker-label {
    position: absolute;
    left: 7px;
    bottom: 7px;
    letter-spacing: .08em;
    font-size: 8px;
    color: var(--accent);
    font-weight: 800
}

.bb-marker-dot {
    position: absolute;
    right: 0;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 11px rgba(226, 189, 128, .55)
}

.bb-marker>span:last-child {
    font-size: 10px;
    color: var(--accent);
    background: var(--surface);
    padding: 3px;
    margin-top: -24px;
    font-variant-numeric: tabular-nums
}

.bb-caption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 17px;
    font-size: 11px;
    color: var(--muted)
}

.bb-history-heading {
    position: absolute;
    top: 5px;
    left: 7px;
    right: 7px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .1em;
    pointer-events: none;
}

.bb-history-heading small {
    font-size: 7px;
    letter-spacing: .06em;
}

.bb-history {
    width: 100%;
    height: 76px;
    margin-top: 4px;
}

.bb-history--overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
}

.bb-visual .bb-marker {
    z-index: 5;
}

.bb-history svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bb-history-guide {
    stroke: rgba(132, 154, 164, .22);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.bb-history-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    opacity: .82;
}

.bb-history-dot {
    fill: #79c2ba;
    stroke: #e9d39d;
    stroke-width: .8;
}

.bb-history-dot:last-child {
    fill: var(--accent);
    filter: drop-shadow(0 0 3px rgba(226, 189, 128, .6));
}

.bb-history-label {
    fill: var(--muted);
    font-family: var(--font);
    font-size: 7px;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
}

.bb-caption strong {
    color: var(--accent);
    font-size: 17px
}

.caption-note {
    margin-left: auto;
    font-size: 9px
}

.momentum-card {
    min-height: 207px
}

.rsi-body {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: center;
    margin-top: 18px
}

.rsi-number strong {
    font-size: 49px;
    font-weight: 600;
    letter-spacing: -.07em;
    font-variant-numeric: tabular-nums;
    display: block
}

.rsi-number small {
    font-size: 10px;
    color: var(--muted)
}

.rsi-plot svg {
    width: 100%;
    height: 91px;
    overflow: visible
}

.rsi-guide {
    stroke: #526074;
    stroke-width: .8;
    stroke-dasharray: 4 5
}

.rsi-area {
    fill: rgba(98, 198, 171, .09)
}

.rsi-line {
    fill: none;
    stroke: var(--green);
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round
}

.rsi-legends {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--muted)
}

.rsi-legends i {
    font-style: normal;
    font-size: 8px;
    letter-spacing: .1em;
    margin-left: 4px
}

.rat-trail-card {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 17px;
    padding: 27px 31px 22px;
}

.rat-trail__head h2 {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 19px;
    letter-spacing: -.04em
}

.rat-trail__head h2 span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0
}

.rat-trail__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.rat-trail__chart-wrap {
    min-width: 0;
    height: 245px;
    margin-top: 19px;
    overflow: hidden;
    border: 1px solid rgba(129, 148, 166, .16);
    border-radius: 5px;
    background: #0b1521
}

.rat-trail__chart {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible
}

.rat-territory { stroke: none }
.rat-territory--upper { fill: rgba(65, 112, 99, .18) }
.rat-territory--current { fill: rgba(112, 101, 73, .19) }
.rat-territory--lower { fill: rgba(111, 67, 70, .16) }

.rat-trail__guides line {
    stroke: rgba(226, 189, 128, .22);
    stroke-width: .8;
    stroke-dasharray: 4 6
}

.rat-trail__path {
    fill: none;
    stroke: rgba(226, 189, 128, .34);
    stroke-width: 1.2;
    stroke-dasharray: 2 7;
    stroke-linecap: round
}

.rat-trail__footprints ellipse,
.rat-trail__footprints circle {
    fill: #d8b579;
    opacity: .62
}

.rat-trail__fib line {
    stroke: rgba(210, 220, 224, .16);
    stroke-width: .7;
    stroke-dasharray: 3 6
}

.rat-trail__fib text,
.rat-trail__axis text,
.rat-trail__times text {
    fill: rgba(197, 211, 219, .68);
    font: 9px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em
}

.rat-trail__fib text { fill: rgba(226, 189, 128, .72) }
.rat-trail__axis text { text-anchor: end }
.rat-trail__times text { fill: rgba(197, 211, 219, .52); text-anchor: middle }

.rat-trail__mouse {
    fill: #111c29;
    stroke: #e2bd80;
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .35s ease
}

.rat-trail__mouse .rat-trail__eye { fill: #e2bd80; stroke: none }

.rat-trail__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 17px
}

.rat-trail__summary div { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.rat-trail__summary small,
.rat-trail__status { color: var(--muted); font-size: 8px; letter-spacing: .12em }
.rat-trail__summary strong { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap }
.rat-trail__summary div:nth-child(3) strong { color: var(--accent) }
.rat-trail__status { display: block; margin-top: 15px; color: var(--accent) }
.rat-trail__toggle { color: var(--muted); font-size: 9px; letter-spacing: .08em; white-space: nowrap; cursor: pointer }
.rat-trail__toggle input { accent-color: var(--accent); vertical-align: -1px }

.paper-terminal {
    grid-column: 1 / -1;
    margin-top: 17px;
    padding: 28px 31px;
    min-width: 0
}

.paper-terminal__head,
.paper-terminal__record-head,
.paper-terminal__records-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px
}

.paper-terminal__head h2 {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 19px;
    letter-spacing: -.04em
}

.paper-terminal__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 25px
}

.paper-terminal__summary div,
.paper-terminal__form>div,
.paper-terminal__form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0
}

.paper-terminal small,
.paper-terminal__summary small,
.paper-terminal__form label,
.paper-terminal__form>div small {
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .13em;
    white-space: nowrap
}

.paper-terminal__summary strong {
    color: var(--text);
    font-size: 18px;
    font-variant-numeric: tabular-nums
}

.paper-terminal__summary div:nth-child(3) strong,
.paper-terminal__summary div:nth-child(4) strong {
    color: var(--green)
}

.paper-terminal__rule {
    border-top: 1px solid var(--line);
    margin: 24px 0
}

.paper-terminal__record-head,
.paper-terminal__records-head {
    align-items: center
}

.paper-terminal__record-head>div,
.paper-terminal__records-head>div {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.paper-session {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .12em
}

.paper-terminal__form {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(100px, .7fr)) auto;
    align-items: end;
    gap: 14px;
    margin-top: 18px
}

.paper-terminal__form>div strong {
    color: var(--text);
    font-size: 20px;
    font-variant-numeric: tabular-nums
}

.paper-terminal select {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(129, 148, 166, .22);
    border-radius: 4px;
    background: rgba(7, 14, 24, .76);
    color: var(--text);
    font: inherit;
    font-size: 11px
}

.paper-primary-button,
.paper-reset-button {
    border: 1px solid #836d4c;
    border-radius: 4px;
    padding: 10px 14px;
    background: rgba(226, 189, 128, .09);
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    white-space: nowrap
}

.paper-primary-button:hover,
.paper-reset-button:hover {
    background: rgba(226, 189, 128, .16)
}

.paper-primary-button:disabled {
    cursor: wait;
    opacity: .48
}

.paper-reset-button {
    padding: 7px 9px;
    color: var(--muted);
    border-color: var(--line)
}

.paper-tabs {
    display: flex;
    gap: 18px;
    margin: 18px 0 12px;
    border-bottom: 1px solid var(--line)
}

.paper-tabs button {
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0 9px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 10px
}

.paper-tabs button.is-active {
    border-bottom-color: var(--accent);
    color: var(--accent)
}

.paper-table-wrap {
    max-width: 100%;
    overflow-x: auto
}

.paper-trades-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums
}

.paper-trades-table th,
.paper-trades-table td {
    border-bottom: 1px solid rgba(129, 148, 166, .13);
    padding: 11px 8px;
    text-align: left;
    white-space: nowrap
}

.paper-trades-table th {
    color: var(--muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em
}

.paper-trades-table td {
    color: var(--text);
    font-size: 10px
}

.paper-trades-table td.is-positive { color: var(--green) }
.paper-trades-table td.is-negative { color: var(--red) }
.paper-trades-table td.is-muted { color: var(--muted) }

.paper-direction-buy { color: var(--green) !important }
.paper-direction-sell { color: var(--red) !important }

.paper-close-button {
    border: 1px solid rgba(226, 189, 128, .45);
    border-radius: 3px;
    padding: 5px 8px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: 9px
}

.paper-account-note {
    margin-top: 13px;
    color: var(--muted);
    font-size: 9px
}

.paper-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    padding: 10px 0
}

.paper-summary-grid div {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.paper-summary-grid strong {
    color: var(--text);
    font-size: 14px;
    font-variant-numeric: tabular-nums
}

.bottom-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 17px;
    margin-top: 17px
}

.matrix-card,
.levels-card {
    padding: 29px 31px
}

.small-note {
    font-size: 10px;
    color: var(--muted);
    align-self: center
}

.matrix-table {
    margin-top: 27px
}

.matrix-header,
.matrix-row {
    display: grid;
    grid-template-columns: .65fr .9fr .9fr 1.55fr;
    gap: 10px;
    align-items: center
}

.matrix-header {
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--muted);
    padding: 0 0 13px
}

.matrix-row {
    border-top: 1px solid var(--line);
    min-height: 47px;
    font-size: 12px;
    font-variant-numeric: tabular-nums
}

.matrix-row>span:first-child {
    font-weight: 800
}

.positive {
    color: var(--green) !important
}

.negative {
    color: var(--red) !important
}

.mini-track {
    height: 5px;
    background: #2b3948;
    border-radius: 8px;
    position: relative
}

.mini-track>span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 8px
}

.mini-track:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 12px;
    background: #6c798a;
    left: 50%;
    top: -4px
}

.levels-card select {
    color: var(--text);
    border: 0;
    background: var(--surface2);
    border-radius: 4px;
    font-size: 10px;
    padding: 6px;
    outline: 0;
    cursor: pointer
}

.level-row {
    display: grid;
    grid-template-columns: 1fr 1fr .75fr;
    gap: 6px;
    border-bottom: 1px solid var(--line);
    align-items: center;
    min-height: 53px;
    font-size: 11px
}

.level-row:first-child {
    margin-top: 17px
}

.level-title {
    color: var(--muted)
}

.level-value {
    font-size: 15px;
    font-weight: 650;
    text-align: right;
    font-variant-numeric: tabular-nums
}

.level-diff {
    text-align: right;
    font-size: 11px;
    font-variant-numeric: tabular-nums
}

.levels-footer {
    color: var(--muted);
    font-size: 10px;
    margin-top: 18px
}

.manifesto {
    margin-top: 40px;
    margin-bottom: 58px;
    border: 1px solid rgba(129, 148, 166, .18);
    border-radius: 8px;
    padding: 38px 42px;
    background: linear-gradient(100deg, rgba(226, 189, 128, .10), rgba(16, 26, 40, .58) 34%, rgba(10, 16, 25, .52) 100%);
    display: flex;
    align-items: center;
    gap: 36px;
    position: relative;
    backdrop-filter: blur(12px)
}

.manifesto-mark {
    font-size: 76px;
    color: var(--accent);
    line-height: 1
}

.manifesto h2 {
    font-size: 27px;
    line-height: 1.5;
    font-weight: 550;
    letter-spacing: -.04em;
    margin: 10px 0
}

.manifesto h2 i {
    font-style: normal;
    color: var(--accent)
}

.manifesto p {
    font-size: 11px;
    line-height: 2;
    color: var(--muted);
    max-width: 560px;
    margin: 0
}

.manifesto-number {
    margin-left: auto;
    align-self: flex-end;
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--muted)
}

footer {
    border-top: 1px solid rgba(133, 151, 168, .16);
    min-height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .14em;
    gap: 15px;
    background: linear-gradient(180deg, rgba(7, 12, 20, .18), rgba(7, 12, 20, .02))
}

footer b {
    color: var(--accent);
    font-size: 19px;
    margin-left: 7px
}

body.light {
    color-scheme: light;
    --bg: #f4f2ed;
    --surface: #fffefa;
    --surface2: #f2eee7;
    --line: #dedbd3;
    --text: #172331;
    --muted: #6a7885;
    --accent: #a67a3b;
    --green: #218c72;
    --red: #c15d50
}

body.light:before {
    opacity: .15;
    filter: saturate(.85) brightness(1.22)
}

body.light:after {
    background: radial-gradient(circle at 22% 16%, rgba(166, 122, 59, .08), transparent 25%), radial-gradient(circle at 74% 20%, rgba(92, 132, 135, .08), transparent 28%), linear-gradient(180deg, rgba(255, 255, 255, .44) 0%, rgba(244, 242, 237, .72) 52%, rgba(244, 242, 237, .90) 100%)
}

body.light .range-track,
body.light .mini-track {
    background: #dddcd5
}

body.light .bb-marker>span:last-child {
    background: var(--surface)
}

body.light .outline-badge {
    border-color: #cdb88c
}

body.light .rsi-guide {
    stroke: #c1c5c7
}

@media(max-width:1200px) {
    .page {
        padding: 0 30px
    }

    .market-message {
        display: none
    }

    .instrument-row {
        grid-template-columns: 1fr 1fr
    }

    .instrument {
        padding: 17px;
        gap: 12px
    }

    .instrument-arrow {
        display: none
    }

    .primary-card {
        padding: 27px
    }

    .paper-terminal {
        padding: 24px
    }

    .paper-terminal__form {
        grid-template-columns: 1fr repeat(3, minmax(90px, 1fr));
    }

    .paper-primary-button {
        grid-column: 1 / -1;
        justify-self: start
    }

    .position-card,
    .momentum-card {
        padding: 24px
    }

    .dashboard,
    .bottom-grid {
        grid-template-columns: 1.08fr 1fr
    }

    .caption-note {
        display: none
    }
}

@media(max-width:950px) {
    .rail {
        display: none
    }

    .page {
        padding: 0 23px
    }

    .topnav {
        gap: 16px
    }

    .dashboard,
    .bottom-grid {
        grid-template-columns: 1fr
    }

    .right-column {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto
    }

    .primary-card {
        min-height: 500px
    }

    .paper-terminal__summary {
        gap: 12px
    }

    .position-card,
    .momentum-card {
        min-height: 300px
    }

    .rsi-body {
        grid-template-columns: 1fr
    }

    .rsi-number strong {
        font-size: 36px
    }

    .bb-chart {
        height: 185px
    }
}

@media(max-width:650px) {
    .page {
        padding: 0 16px
    }

    .topbar {
        height: 73px
    }

    .wordmark {
        font-size: 23px
    }

    .topnav {
        display: none
    }

    .status-pill {
        font-size: 9px
    }

    .intro {
        padding: 39px 0 30px;
        align-items: flex-start;
        gap: 12px
    }

    .intro-meta {
        display: none
    }

    h1 {
        font-size: 31px
    }

    .instrument-row {
        gap: 8px
    }

    .instrument {
        padding: 12px;
        min-height: 103px;
        flex-wrap: wrap
    }

    .instrument-symbol {
        width: 25px;
        height: 25px
    }

    .instrument-name {
        font-size: 14px
    }

    .instrument-quote {
        flex: 1 0 100%;
        align-items: flex-start;
        gap: 2px
    }

    .instrument-quote strong {
        font-size: 16px
    }

    .primary-card {
        padding: 22px 18px;
        min-height: 490px
    }

    .card-head h2 {
        font-size: 16px
    }

    .outline-badge {
        font-size: 8px;
        padding: 7px
    }

    .hero-value {
        gap: 4px;
        margin-top: 51px
    }

    .big-price {
        font-size: clamp(43px, 12vw, 71px)
    }

    .price-prefix {
        font-size: 18px
    }

    .price-unit {
        font-size: 10px
    }

    .price-bottom {
        flex-wrap: wrap
    }

    .paper-terminal {
        padding: 22px 17px
    }

    .paper-terminal__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px
    }

    .paper-terminal__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .paper-terminal__form>div,
    .paper-primary-button {
        grid-column: 1 / -1
    }

    .paper-primary-button {
        width: 100%
    }

    .paper-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .position-replay__controls {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .position-replay__pl strong {
        font-size: 22px
    }

    .right-column {
        grid-template-columns: 1fr
    }

    .position-card,
    .momentum-card {
        min-height: initial
    }

    .position-card {
        min-height: 305px
    }

    .momentum-card {
        min-height: 225px
    }

    .rsi-body {
        grid-template-columns: 90px 1fr
    }

    .rsi-number strong {
        font-size: 36px
    }

    .matrix-card,
    .levels-card {
        padding: 23px 17px
    }

    .matrix-header,
    .matrix-row {
        grid-template-columns: .65fr .9fr .9fr 1.1fr;
        gap: 5px
    }

    .matrix-header {
        font-size: 8px
    }

    .matrix-row {
        font-size: 10px
    }

    .section-heading h3 {
        font-size: 14px
    }

    .small-note {
        font-size: 9px
    }

    .manifesto {
        padding: 26px 20px;
        gap: 16px
    }

    .manifesto-mark {
        font-size: 40px
    }

    .manifesto h2 {
        font-size: 21px
    }

    .manifesto-number {
        display: none
    }

    footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 22px 0
    }
}

@media(max-width:950px) {
    .rat-trail-card { padding: 23px 17px 19px }
    .rat-trail__chart-wrap { height: 220px }
}

@media(max-width:650px) {
    .rat-trail__head { align-items: flex-start; flex-wrap: wrap }
    .rat-trail__head > div:first-child { flex: 1 1 100% }
    .rat-trail__controls { width: 100%; justify-content: flex-start; gap: 9px }
    .rat-trail__chart-wrap { height: 190px; margin-top: 14px }
    .rat-trail__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
    .rat-trail__summary strong { font-size: 12px }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .instrument {
        transition: none
    }
}

/* World-clock sculpture — isolated from market data and all other panels */
.intro {
    gap: 32px;
    align-items: center
}

.intro-meta.world-clock {
    width: min(100%, 490px);
    min-width: 395px;
    text-align: left;
    gap: 0;
    padding: 0;
    flex-shrink: 0
}

.world-clock__heading {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
    color: var(--accent)
}

.world-clock__spark {
    font-size: 16px;
    font-weight: 400;
    text-shadow: 0 0 16px rgba(226, 189, 128, .45)
}

.world-clock__line {
    flex: 1;
    border-top: 1px solid rgba(226, 189, 128, .3)
}

.world-clock__main,
.world-clock__small {
    background: linear-gradient(145deg, rgba(20, 34, 48, .78), rgba(8, 16, 27, .70));
    border: 1px solid rgba(226, 189, 128, .25);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 13px 36px rgba(0, 0, 0, .25);
    backdrop-filter: blur(18px) saturate(125%)
}

.world-clock__main {
    border-radius: 13px;
    padding: 19px 24px 18px;
    position: relative;
    overflow: hidden
}

.world-clock__main:before {
    content: "";
    position: absolute;
    inset: -60% -20% auto auto;
    width: 65%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(226, 189, 128, .13), transparent 65%);
    pointer-events: none
}

.world-clock__topline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    position: relative
}

.world-clock__city {
    font-weight: 800;
    letter-spacing: .15em;
    font-size: 12px;
    color: var(--accent)
}

.world-clock__city em {
    font-style: normal;
    letter-spacing: .04em;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    margin-left: 6px
}

.world-clock__zone {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .05em
}

.intro-meta.world-clock .world-clock__time {
    display: block;
    color: var(--text);
    font-size: clamp(43px, 4.7vw, 68px);
    line-height: 1.12;
    letter-spacing: -.055em;
    font-weight: 650;
    margin-top: 13px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    text-shadow: 0 0 32px rgba(226, 189, 128, .08)
}

.world-clock__date {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .1em;
    margin-top: 8px;
    font-variant-numeric: tabular-nums
}

.world-clock__others {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px
}

.world-clock__small {
    padding: 14px 16px 15px;
    border-radius: 10px;
    border-color: rgba(128, 152, 173, .22)
}

.world-clock__small .world-clock__city {
    font-size: 10px;
    color: var(--text)
}

.world-clock__small .world-clock__city em {
    display: block;
    margin: 3px 0 0;
    font-size: 9px
}

.world-clock__small .world-clock__zone {
    font-size: 9px;
    white-space: nowrap
}

.intro-meta.world-clock .world-clock__small .world-clock__time {
    font-size: clamp(25px, 2.4vw, 34px);
    letter-spacing: -.05em;
    line-height: 1.18;
    margin-top: 12px
}

.world-clock__small .world-clock__date {
    font-size: 10px;
    margin-top: 8px;
    letter-spacing: .03em
}

.intro-meta.world-clock .world-clock__feed {
    text-align: right;
    margin-top: 11px;
    font-size: 10px;
    letter-spacing: .03em;
    color: var(--muted)
}

body.light .world-clock__main,
body.light .world-clock__small {
    background: linear-gradient(145deg, rgba(255, 253, 249, .90), rgba(242, 238, 231, .88));
    box-shadow: 0 10px 32px rgba(35, 43, 54, .08)
}

@media(max-width:1200px) {
    .intro-meta.world-clock {
        width: 415px;
        min-width: 365px
    }

    .intro-meta.world-clock .world-clock__time {
        font-size: 49px
    }

    .intro-meta.world-clock .world-clock__small .world-clock__time {
        font-size: 27px
    }
}

@media(max-width:950px) {
    .intro {
        align-items: flex-start
    }

    .intro-meta.world-clock {
        width: min(100%, 420px);
        min-width: 340px
    }
}

@media(max-width:750px) {
    .intro {
        flex-direction: column;
        align-items: stretch;
        gap: 24px
    }

    .intro-meta.world-clock {
        display: flex;
        width: 100%;
        min-width: 0;
        max-width: 520px;
        margin: 0 auto 2px
    }

    .intro-meta.world-clock .world-clock__time {
        font-size: clamp(43px, 10vw, 64px)
    }

    .intro-meta.world-clock .world-clock__small .world-clock__time {
        font-size: clamp(23px, 5vw, 32px)
    }
}

/* intro-copy switches from the hero message to the three-city local clock. */
.intro-copy--hero {
    position: relative;
    min-height: 250px;
}

.intro-copy__brand-view,
.intro-copy__market-clock {
    transition: opacity 1s ease, transform 1s ease, visibility 1s ease;
}

.intro-copy__market-clock {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
}

.intro-copy--hero.is-market-clock .intro-copy__brand-view {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
}

.intro-copy--hero.is-market-clock .intro-copy__market-clock {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.intro-copy__clock-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.intro-copy__clock-heading small {
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .08em;
}

.intro-copy__clock-cards {
    display: grid;
    gap: 8px;
}

.intro-copy__clock-card {
    padding: 10px 11px 9px;
    border: 1px solid rgba(129, 148, 166, .18);
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(20, 34, 48, .68), rgba(8, 16, 27, .48));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.intro-copy__clock-card>div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--accent);
    font-size: 8px;
    letter-spacing: .12em;
}

.intro-copy__clock-card>div span,
.intro-copy__clock-card small {
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .06em;
}

.intro-copy__clock-time {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

@media(max-width:750px) {
    .intro-copy--hero {
        min-height: 0;
    }

    .intro-copy__clock-time {
        font-size: 18px;
    }
}

@media(max-width:370px) {
    .world-clock__small {
        padding: 12px 10px
    }

    .world-clock__small .world-clock__zone {
        font-size: 8px
    }

    .world-clock__city em {
        font-size: 9px
    }

    .intro-meta.world-clock .world-clock__small .world-clock__time {
        font-size: 23px
    }
}

/* Object stage: the intro can receive future visual objects without touching the dashboard. */
.intro-copy {
    flex: 1;
    min-width: 0
}

.object-stage {
    position: relative;
    width: min(100%, 610px);
    min-height: 430px;
    flex: 0 1 610px;
    overflow: hidden
}

.object-view {
    position: absolute;
    inset: 0;
    transition: opacity 1.4s ease, visibility 1.4s ease;
}

.object-view--brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--muted);
    text-align: center;
    opacity: 1;
    visibility: visible
}

.object-view--clock {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 1.4s ease, visibility 1.4s ease, transform 1.4s ease
}

.object-stage.is-clock .object-view--brand {
    opacity: 0;
    visibility: hidden
}

.object-stage.is-clock .object-view--clock {
    opacity: 1;
    visibility: visible;
    transform: none
}

.brand-object__halo {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(226, 189, 128, .20);
    border-radius: 50%;
    box-shadow: 0 0 80px rgba(226, 189, 128, .08), inset 0 0 50px rgba(130, 173, 165, .06)
}

.brand-object__mark {
    position: relative;
    color: var(--accent);
    font-size: 73px;
    font-weight: 200;
    line-height: 1;
    text-shadow: 0 0 30px rgba(226, 189, 128, .28)
}

.brand-object__label {
    position: relative;
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: .26em;
    color: var(--text)
}

.brand-object__rule {
    position: relative;
    width: 54px;
    border-top: 1px solid var(--accent);
    opacity: .6
}

.brand-object__label+.brand-object__rule+small {
    position: relative;
    font-size: 9px;
    letter-spacing: .18em;
    color: var(--muted)
}

.clock-object__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    margin: 3px 4px 12px
}

.clock-object__heading small {
    font-size: 8px;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap
}

.clock-object__heading .world-clock__line {
    flex: 1;
    border-top: 1px solid rgba(226, 189, 128, .28)
}

.clock-object__heading .world-clock__spark {
    font-size: 15px
}

.clock-object__body {
    display: flex;
    align-items: center;
    gap: 20px
}

.analog-clock {
    width: 286px;
    height: 286px;
    position: relative;
    flex: 0 0 286px;
    display: grid;
    place-items: center
}

.analog-clock__glow {
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 27%, rgba(255, 244, 213, .16), transparent 36%), radial-gradient(circle, rgba(39, 69, 83, .72), rgba(6, 13, 22, .96) 72%);
    border: 1px solid rgba(226, 189, 128, .32);
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, .10), inset 0 -15px 30px rgba(0, 0, 0, .35), 0 18px 45px rgba(0, 0, 0, .30), 0 0 34px rgba(226, 189, 128, .08)
}

.market-rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible
}

.market-ring {
    fill: none
}

.market-ring--base {
    stroke: rgba(132, 154, 164, .18);
    stroke-width: 8
}

.market-ring--inner {
    stroke: rgba(226, 189, 128, .18);
    stroke-width: 1;
    stroke-dasharray: 1 5
}

.market-arc {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    opacity: .88;
    filter: drop-shadow(0 0 4px currentColor)
}

.market-arc--tokyo {
    stroke: #6eb5ad;
    color: #6eb5ad
}

.market-arc--london {
    stroke: #e2bd80;
    color: #e2bd80
}

.market-arc--new-york {
    stroke: #d88e80;
    color: #d88e80
}

.clock-face {
    position: absolute;
    inset: 52px;
    border-radius: 50%;
    z-index: 2
}

.clock-number {
    position: absolute;
    color: rgba(239, 243, 247, .76);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em
}

.clock-number--12 {
    top: 5px;
    left: 50%;
    transform: translateX(-50%)
}

.clock-number--3 {
    right: 7px;
    top: 50%;
    transform: translateY(-50%)
}

.clock-number--6 {
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%)
}

.clock-number--9 {
    left: 7px;
    top: 50%;
    transform: translateY(-50%)
}

.clock-tick {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 7px;
    background: rgba(226, 189, 128, .76);
    transform-origin: 50% 91px
}

.clock-tick--a {
    transform: rotate(45deg)
}

.clock-tick--b {
    transform: rotate(135deg)
}

.clock-tick--c {
    transform: rotate(225deg)
}

.clock-tick--d {
    transform: rotate(315deg)
}

.clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 2px;
    border-radius: 3px;
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(0deg);
    z-index: 3
}

.clock-hand--hour {
    height: 55px;
    background: var(--text);
    width: 4px
}

.clock-hand--minute {
    height: 77px;
    background: var(--accent);
    width: 3px
}

.clock-hand--second {
    height: 88px;
    background: #d98f7e;
    width: 1px;
    box-shadow: 0 0 8px rgba(216, 142, 128, .65)
}

.clock-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #172c36;
    transform: translate(-50%, -50%);
    z-index: 4;
    box-shadow: 0 0 9px rgba(226, 189, 128, .55)
}

.clock-object__legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 120px;
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--muted)
}

.clock-object__legend span {
    display: flex;
    align-items: center;
    gap: 8px
}

.clock-object__legend small {
    font-size: 7px;
    line-height: 1.6;
    letter-spacing: .1em;
    margin-top: 5px;
    color: var(--muted)
}

.legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block
}

.legend-dot--tokyo {
    background: #6eb5ad;
    box-shadow: 0 0 8px rgba(110, 181, 173, .55)
}

.legend-dot--london {
    background: #e2bd80;
    box-shadow: 0 0 8px rgba(226, 189, 128, .55)
}

.legend-dot--new-york {
    background: #d88e80;
    box-shadow: 0 0 8px rgba(216, 142, 128, .45)
}

.city-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 7px
}

.city-card {
    min-width: 0;
    padding: 11px 12px 10px;
    border: 1px solid rgba(129, 148, 166, .22);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(20, 34, 48, .68), rgba(8, 16, 27, .58));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04)
}

.city-card__top {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    align-items: baseline
}

.city-card__top strong {
    font-size: 9px;
    letter-spacing: .15em;
    color: var(--text)
}

.city-card__top span {
    font-size: 8px;
    color: var(--muted);
    white-space: nowrap
}

.city-card__time {
    display: block;
    margin-top: 9px;
    color: var(--accent);
    font-size: 20px;
    letter-spacing: -.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums
}

.city-card__date {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .02em;
    white-space: nowrap
}

.object-view--clock .world-clock__feed {
    display: block;
    text-align: right;
    margin: 10px 4px 0;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .13em
}

body.light .analog-clock__glow {
    background: radial-gradient(circle at 36% 27%, rgba(255, 255, 255, .8), transparent 36%), radial-gradient(circle, rgba(221, 232, 229, .92), rgba(239, 236, 229, .96) 72%)
}

body.light .city-card {
    background: rgba(255, 253, 249, .64)
}

@media(max-width:1100px) {
    .object-stage {
        max-width: 520px;
        min-height: 400px
    }

    .analog-clock {
        width: 250px;
        height: 250px;
        flex-basis: 250px
    }

    .clock-face {
        inset: 47px
    }

    .clock-tick {
        transform-origin: 50% 78px
    }

    .clock-tick--a {
        transform: rotate(45deg)
    }

    .clock-tick--b {
        transform: rotate(135deg)
    }

    .clock-tick--c {
        transform: rotate(225deg)
    }

    .clock-tick--d {
        transform: rotate(315deg)
    }

    .clock-hand--hour {
        height: 48px
    }

    .clock-hand--minute {
        height: 66px
    }

    .clock-hand--second {
        height: 76px
    }
}

@media(max-width:750px) {
    .object-stage {
        width: 100%;
        max-width: 540px;
        min-height: 410px;
        margin: 0 auto
    }

    .clock-object__body {
        justify-content: center;
        gap: 10px
    }

    .analog-clock {
        width: 245px;
        height: 245px;
        flex-basis: 245px
    }

    .clock-object__legend {
        min-width: 100px
    }

    .city-card {
        padding: 10px 8px
    }

    .city-card__time {
        font-size: 17px
    }

    .city-card__date {
        font-size: 8px
    }
}

@media(max-width:430px) {
    .object-stage {
        min-height: 390px
    }

    .clock-object__body {
        display: block
    }

    .analog-clock {
        margin: 0 auto;
        width: 235px;
        height: 235px
    }

    .clock-object__legend {
        display: none
    }

    .city-card__top span {
        font-size: 7px
    }

    .city-card__time {
        font-size: 15px
    }

    .city-card__date {
        font-size: 7px
    }

    .city-cards {
        gap: 5px
    }
}

@media(prefers-reduced-motion:reduce) {
    .object-view {
        transition: none
    }
}

/* The first view repeats the approved hero message; clock city cards stay stacked on the right. */
.object-brand-copy {
    position: relative;
    width: 100%;
    padding: 30px 24px 29px;
    border: 1px solid rgba(226, 189, 128, .24);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(20, 34, 48, .68), rgba(8, 16, 27, .50));
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 18px 42px rgba(0, 0, 0, .18);
    text-align: left
}

.object-brand-copy__eyebrow {
    display: block;
    margin-bottom: 17px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em
}

.object-brand-copy strong {
    display: block;
    color: var(--text);
    font-size: clamp(27px, 3vw, 43px);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.47
}

.object-brand-copy strong span {
    color: var(--accent)
}

.object-brand-copy p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 2
}

.clock-object__side {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 154px;
    flex: 1
}

.clock-object__legend {
    order: 0
}

.city-cards {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 0
}

.city-card {
    padding: 10px 11px 9px
}

.city-card__time {
    font-size: 18px
}

.city-card__date {
    font-size: 8px
}

body.light .object-brand-copy {
    background: rgba(255, 253, 249, .64)
}

@media(max-width:1100px) {
    .clock-object__side {
        min-width: 140px
    }

    .city-card__time {
        font-size: 16px
    }
}

@media(max-width:750px) {
    .clock-object__side {
        min-width: 0;
        width: 150px
    }

    .object-brand-copy {
        padding: 25px 20px
    }

    .object-brand-copy strong {
        font-size: clamp(25px, 6vw, 37px)
    }
}

@media(max-width:430px) {
    .clock-object__side {
        width: 100%;
        margin: 7px auto 0
    }

    .clock-object__legend {
        display: none
    }

    .city-cards {
        display: flex;
        flex-direction: column;
        gap: 5px
    }

    .city-card {
        padding: 9px 7px
    }

    .city-card__time {
        font-size: 14px
    }

    .city-card__date {
        font-size: 7px
    }
}

/* Currency Compass — a third object view fed only by the existing pair data. */
.object-view--compass {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 1s ease, visibility 1s ease, transform 1s ease
}

.object-stage.is-clock .object-view--compass,
.object-stage.is-brand .object-view--compass {
    opacity: 0;
    visibility: hidden
}

.object-stage.is-compass .object-view--compass {
    opacity: 1;
    visibility: visible;
    transform: none
}

.object-stage.is-compass .object-view--brand,
.object-stage.is-compass .object-view--clock {
    opacity: 0;
    visibility: hidden
}

.compass-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    margin: 3px 4px 10px
}

.compass-heading .world-clock__line {
    flex: 1;
    border-top: 1px solid rgba(226, 189, 128, .28)
}

.compass-heading small {
    font-size: 8px;
    letter-spacing: .1em;
    color: var(--muted);
    white-space: nowrap
}

.compass-heading .world-clock__spark {
    font-size: 15px
}

.compass-object {
    position: relative;
    width: 310px;
    height: 300px;
    margin: 0 auto
}

.currency-compass {
    display: block;
    width: 300px;
    height: 300px;
    overflow: visible;
    filter: drop-shadow(0 17px 24px rgba(0, 0, 0, .28))
}

.compass-shadow {
    fill: rgba(0, 0, 0, .34);
    transform: translateY(5px)
}

.compass-bezel {
    fill: url(#compassMetal);
    stroke: rgba(255, 244, 207, .35);
    stroke-width: 1.5
}

.compass-face {
    fill: url(#compassFace);
    stroke: #4c6570;
    stroke-width: 1
}

.compass-scale {
    fill: none
}

.compass-scale--outer {
    stroke: rgba(226, 189, 128, .34);
    stroke-width: 1.5;
    stroke-dasharray: 1 5
}

.compass-scale--neutral {
    stroke: rgba(239, 243, 247, .24);
    stroke-width: 1;
    stroke-dasharray: 2 4
}

.compass-ticks path {
    fill: none;
    stroke: rgba(226, 189, 128, .62);
    stroke-width: 1
}

.compass-axis line {
    stroke: rgba(137, 181, 181, .18);
    stroke-width: 1
}

.compass-needle {
    stroke-width: 3;
    stroke-linecap: round;
    filter: url(#compassGlow);
    transition: x2 1.5s ease, y2 1.5s ease, stroke 1s ease, opacity 1s ease
}

.compass-needle--xau {
    stroke: #e2bd80
}

.compass-needle--eur {
    stroke: #79c2ba
}

.compass-needle--usd {
    stroke: #a7b5c2
}

.compass-needle.is-negative {
    stroke: #8b6560;
    stroke-dasharray: 3 3
}

.compass-hub {
    fill: url(#compassMetal);
    stroke: #f0d39a;
    stroke-width: 1
}

.compass-hub-core {
    fill: #142331
}

.compass-label {
    font-family: var(--font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-anchor: middle;
    fill: var(--text)
}

.compass-label--xau {
    fill: #e2bd80
}

.compass-label--eur {
    fill: #79c2ba
}

.compass-label--usd {
    fill: #a7b5c2
}

.compass-label--neutral {
    font-size: 8px;
    fill: var(--muted)
}

.compass-scale-labels {
    position: absolute;
    right: -4px;
    top: 82px;
    display: flex;
    flex-direction: column;
    gap: 67px;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .12em;
    text-align: left
}

.compass-score-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 0
}

.compass-score-card {
    padding: 8px 10px;
    border: 1px solid rgba(129, 148, 166, .22);
    border-radius: 6px;
    background: rgba(10, 19, 30, .48);
    text-align: center
}

.compass-score-card strong {
    display: block;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .15em
}

.compass-score-card span {
    display: block;
    margin-top: 4px;
    color: var(--accent);
    font-size: 15px;
    font-variant-numeric: tabular-nums
}

.compass-score-card span.is-positive {
    color: #79c2ba
}

.compass-score-card span.is-negative {
    color: #d08d82
}

.compass-score-card.is-insufficient span {
    font-size: 8px;
    color: var(--muted)
}

.compass-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 9px 4px 0;
    color: var(--muted)
}

.compass-foot label {
    font-size: 8px;
    letter-spacing: .12em;
    white-space: nowrap
}

.compass-foot select {
    margin-left: 5px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface2);
    color: var(--text);
    font-size: 9px
}

.compass-foot small {
    font-size: 7px;
    letter-spacing: .06em;
    text-align: right
}

.object-view-selector {
    position: absolute;
    right: 4px;
    top: 468px;
    z-index: 5;
    display: flex;
    gap: 4px
}

.object-view-selector button {
    padding: 4px 6px;
    border: 1px solid rgba(129, 148, 166, .28);
    border-radius: 3px;
    background: rgba(7, 13, 22, .55);
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .08em
}

.object-view-selector button[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent)
}

.object-stage.is-paused .object-view-selector button:last-child {
    color: var(--accent)
}

body.light .compass-score-card {
    background: rgba(255, 253, 249, .58)
}

body.light .object-view-selector button {
    background: rgba(255, 253, 249, .65)
}

@media(max-width:750px) {
    .compass-object {
        transform: scale(.9);
        transform-origin: top center;
        margin-bottom: -28px
    }

    .compass-score-row {
        margin-top: -18px
    }

    .compass-foot {
        margin-top: 7px
    }

    .compass-foot small {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {

    .object-view--compass,
    .compass-needle {
        transition: none
    }
}

/* Intro composition: preserve the title column while the viewer rotates independently. */
.intro {
    align-items: stretch;
    gap: 28px
}

.intro-copy--hero {
    flex: 0 0 clamp(340px, 36%, 500px);
    align-self: center;
    transition: opacity 1s ease, transform 1s ease
}

.intro-copy--hero.is-title-hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none
}

.viewer-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 176px;
    gap: 14px;
    min-width: 0;
    min-height: 130px;
    flex: 1
}

.viewer-stage {
    width: auto;
    min-width: 0;
    min-height: 430px;
    flex: 1
}

.viewer-sidepanel {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 17px 11px;
    border: 1px solid rgba(129, 148, 166, .18);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(20, 34, 48, .68), rgba(8, 16, 27, .54));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 15px 35px rgba(0, 0, 0, .18);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity 1s ease, visibility 1s ease, transform 1s ease
}

.viewer-shell.is-live .viewer-sidepanel {
    opacity: 1;
    visibility: visible;
    transform: none
}

.viewer-sidepanel__heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 5px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em
}

.viewer-sidepanel__heading small {
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .08em
}

.viewer-sidepanel .city-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0
}

.viewer-sidepanel .city-card {
    padding: 12px 10px 11px
}

.viewer-sidepanel .city-card__time {
    font-size: 19px
}

.viewer-sidepanel .city-card__date {
    font-size: 8px
}

.viewer-sidepanel__note {
    margin-top: auto;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .08em;
    line-height: 1.5
}

.object-stage.is-live+.viewer-sidepanel {
    opacity: 1;
    visibility: visible;
    transform: none
}

.compass-score-row {
    grid-template-columns: repeat(4, 1fr)
}

.compass-needle--jpy {
    stroke: #8fa3b2
}

.compass-needle--jpy.is-negative {
    stroke: #6d6268
}

.compass-label--jpy {
    fill: #8fa3b2
}

@media(max-width:1100px) {
    .intro {
        gap: 18px
    }

    .intro-copy--hero {
        flex-basis: 330px
    }

    .viewer-shell {
        grid-template-columns: minmax(0, 1fr) 155px
    }

    .viewer-sidepanel {
        padding-inline: 8px
    }

    .viewer-sidepanel .city-card {
        padding-inline: 8px
    }

    .viewer-sidepanel .city-card__time {
        font-size: 16px
    }
}

@media(max-width:750px) {
    .intro {
        flex-direction: column;
        gap: 22px
    }

    .intro-copy--hero {
        flex-basis: auto
    }

    .viewer-shell {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .viewer-stage {
        min-height: 410px
    }

    .viewer-sidepanel {
        min-height: 0;
        display: block;
        padding: 13px 12px
    }

    .viewer-sidepanel .city-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px
    }

    .viewer-sidepanel__note {
        display: block;
        margin-top: 10px
    }

    .viewer-sidepanel .city-card__time {
        font-size: 16px
    }

    .viewer-sidepanel .city-card__date {
        font-size: 8px
    }
}

@media(max-width:430px) {
    .viewer-sidepanel .city-cards {
        grid-template-columns: 1fr
    }

    .viewer-sidepanel .city-card__time {
        font-size: 19px
    }
}

@media(prefers-reduced-motion:reduce) {

    .intro-copy--hero,
    .viewer-sidepanel {
        transition: none
    }
}

/* Viewer transitions are deliberately short and directional, like a quiet carousel. */
.object-view--clock,
.object-view--compass {
    transform: translateX(18px)
}

.object-stage.is-clock .object-view--clock,
.object-stage.is-compass .object-view--compass {
    transform: translateX(0)
}

/* Compass strength is read from the neutral ring outward/inward, not from direction. */
.compass-scale--neutral {
    stroke: #e2bd80;
    stroke-width: 1.5;
    stroke-dasharray: 1 5;
    opacity: .92;
    filter: drop-shadow(0 0 3px rgba(226, 189, 128, .35))
}

.compass-needle {
    stroke: #79c2ba;
    transition: x2 1.5s ease, y2 1.5s ease, stroke 1s ease, opacity 1s ease
}

.compass-needle.is-negative {
    stroke: #d08d82;
    stroke-dasharray: 3 3
}

.compass-needle.is-neutral {
    stroke: #e2bd80;
    stroke-dasharray: none
}

.compass-tip {
    fill: #79c2ba;
    filter: url(#compassGlow);
    transition: cx 1.5s ease, cy 1.5s ease, fill 1s ease, opacity 1s ease
}

.compass-tip.is-negative {
    fill: #d08d82
}

.compass-tip.is-neutral {
    fill: #e2bd80
}

.compass-legend {
    position: absolute;
    right: -14px;
    top: 91px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .08em;
    line-height: 1.2
}

.compass-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

.compass-legend__line {
    display: inline-block;
    width: 13px;
    border-top: 1px solid
}

.compass-legend__line--outer {
    border-color: #79c2ba
}

.compass-legend__line--neutral {
    border-color: #e2bd80;
    border-top-style: dotted
}

.compass-legend__line--inner {
    border-color: #d08d82;
    border-top-style: dashed
}

.compass-score-card {
    position: relative
}

.compass-score-card small {
    display: block;
    margin-top: 3px;
    font-size: 7px;
    letter-spacing: .08em;
    color: var(--muted)
}

.compass-card-label.is-positive {
    color: #79c2ba
}

.compass-card-label.is-negative {
    color: #d08d82
}

.compass-card-label.is-neutral {
    color: #e2bd80
}

.compass-card-label.is-muted {
    color: var(--muted)
}

.compass-score-card.is-insufficient small {
    color: var(--muted)
}

@media(max-width:750px) {
    .compass-legend {
        right: -5px;
        font-size: 6px
    }

    .compass-score-card small {
        font-size: 6px
    }
}

@media(prefers-reduced-motion:reduce) {

    .compass-needle,
    .compass-tip {
        transition: none
    }
}

/* Price Range Spectrum: a common one-week price coordinate with proportional range heights. */
.object-view--range {
    opacity: 0;
    visibility: hidden;
    transform: translateX(18px);
    transition: opacity 1s ease, visibility 1s ease, transform 1s ease
}

.object-stage.is-range .object-view--range {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.object-stage.is-range .object-view--clock,
.object-stage.is-range .object-view--compass {
    opacity: 0;
    visibility: hidden
}

.range-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    margin: 3px 4px 8px
}

.range-heading .world-clock__line {
    flex: 1;
    border-top: 1px solid rgba(226, 189, 128, .28)
}

.range-heading small {
    font-size: 8px;
    color: var(--muted);
    letter-spacing: .1em;
    white-space: nowrap
}

.range-heading .world-clock__spark {
    font-size: 15px
}

.range-spectrum-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.range-spectrum {
    display: block;
    width: 100%;
    height: auto;
    min-height: 220px;
    overflow: visible
}

.range-axis {
    stroke: rgba(132, 154, 164, .3);
    stroke-width: 1;
    stroke-dasharray: 2 5
}

.range-track {
    fill: rgba(29, 47, 61, .48);
    stroke: rgba(132, 154, 164, .18);
    stroke-width: 1
}

.range-bar {
    fill: url(#rangeBarFill);
    filter: url(#rangeGlow);
    transition: y 1.5s ease, height 1.5s ease, opacity .8s ease
}

.range-avg {
    stroke: #f5f3e9;
    stroke-width: 2;
    transition: y1 1.5s ease, y2 1.5s ease, opacity .8s ease
}

.range-now {
    fill: var(--accent);
    stroke: #fff9e7;
    stroke-width: 1;
    filter: url(#rangeGlow);
    transition: cy 1.5s ease, opacity .8s ease
}

.range-period-label {
    fill: var(--text);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-anchor: middle
}

.range-column-status {
    fill: var(--muted);
    font-family: var(--font);
    font-size: 7px;
    letter-spacing: .02em;
    text-anchor: middle
}

.range-column {
    cursor: pointer;
    outline: none
}

.range-column:hover .range-track,
.range-column.is-selected .range-track {
    stroke: var(--accent);
    stroke-opacity: .75
}

.range-column.is-selected .range-period-label {
    fill: var(--accent)
}

.range-axis-labels {
    position: absolute;
    left: 2px;
    top: 26px;
    bottom: 68px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .1em
}

.range-legend {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: -2px;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .08em
}

.range-legend span {
    display: flex;
    align-items: center;
    gap: 5px
}

.range-legend__swatch {
    display: inline-block;
    width: 12px;
    border-top: 2px solid
}

.range-legend__swatch--bar {
    border-color: #d4ae70
}

.range-legend__swatch--avg {
    border-color: #f5f3e9
}

.range-legend__swatch--now {
    width: 5px;
    height: 5px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 5px var(--accent)
}

.range-column.is-selected .range-period-label {
    fill: var(--accent)
}

.range-detail {
    min-height: 61px;
    margin: 8px 4px 0;
    padding: 8px 10px;
    border: 1px solid rgba(129, 148, 166, .18);
    border-radius: 6px;
    background: rgba(8, 16, 27, .42);
    color: var(--muted)
}

.range-detail__empty {
    display: block;
    text-align: center;
    font-size: 8px;
    letter-spacing: .14em;
    padding: 13px 0
}

.range-detail__content {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px
}

.range-detail__content.is-visible {
    display: grid
}

.range-detail__content div {
    min-width: 0
}

.range-detail__content small {
    display: block;
    font-size: 6px;
    letter-spacing: .08em;
    color: var(--muted)
}

.range-detail__content strong {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.range-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 7px 4px 0;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .07em
}

.range-foot small:last-child {
    text-align: right
}

.object-stage.is-range+.viewer-sidepanel {
    opacity: 1;
    visibility: visible;
    transform: none
}

@media(max-width:750px) {
    .range-heading small {
        display: none
    }

    .range-spectrum {
        min-height: 190px
    }

    .range-detail__content {
        grid-template-columns: repeat(4, 1fr)
    }

    .range-detail__content strong {
        font-size: 8px
    }

    .range-foot {
        font-size: 6px
    }
}

@media(max-width:430px) {
    .range-spectrum {
        min-height: 170px
    }

    .range-detail__content {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 7px
    }

    .range-foot {
        flex-direction: column;
        gap: 3px
    }

    .range-foot small:last-child {
        text-align: left
    }
}

/* Range readability pass: actual prices remain visible above, below, and under every period. */
.range-spectrum-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: rgba(226, 189, 128, .45) transparent
}

.range-spectrum {
    min-width: 660px;
    height: auto
}

.range-price {
    fill: var(--text);
    font-family: var(--font);
    font-size: 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    text-anchor: middle
}

.range-price--high,
.range-price--low {
    fill: var(--white)
}

.range-price--avg {
    fill: var(--accent);
    font-weight: 600
}

.range-axis {
    stroke: rgba(132, 154, 164, .18)
}

.range-column-status {
    font-size: 6px
}

@media(max-width:750px) {
    .range-spectrum {
        min-height: 0
    }

    .range-price {
        font-size: 8px
    }
}

@media(prefers-reduced-motion:reduce) {

    .object-view--range,
    .range-bar,
    .range-avg,
    .range-now {
        transition: none
    }
}

/* RANGE専用の表示領域。固定サイドパネルの幅は変更せず、グラフだけを広げる。 */
.viewer-shell.is-range-layout,
.viewer-shell.is-range-layout .viewer-stage,
.viewer-shell.is-range-layout .object-view--range {
    min-height: 840px
}

/* PRICE RANGE SPECTRUM本体の表示領域を明示的に拡張。 */
.viewer-shell.is-range-layout .object-view.object-view--range {
    width: 100%;
    min-height: 840px;
}

.viewer-shell.is-range-layout .object-stage.viewer-stage {
    overflow: visible;
}

/* RANGE表示時は消えたヒーローコピーの占有幅を解放し、グラフを広げる。 */
.intro:has(.viewer-shell.is-range-layout) .intro-copy--hero {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
}

.intro:has(.viewer-shell.is-range-layout) {
    gap: 16px;
}

/* RANGEの高いグラフに合わせてLOCAL TIMEまで引き伸ばさない。 */
.viewer-shell.is-range-layout .viewer-sidepanel {
    align-self: start;
    height: fit-content;
    min-height: 0;
}

/* RANGEの見出しと切り替えボタンを重ねず、同じ右上領域に整列する。 */
.viewer-shell.is-range-layout .object-view-selector {
    top: 34px;
    bottom: auto;
}

.viewer-shell.is-range-layout .range-heading {
    padding-right: 142px
}

.viewer-shell.is-range-layout .range-spectrum-wrap {
    overflow-x: visible;
    overflow-y: visible;
    padding: 4px 2px 0;
}

.viewer-shell.is-range-layout .range-spectrum {
    min-width: 760px;
    min-height: 370px;
}

/* 価格ラベルを最優先にし、比率や状態文字は補助情報として抑える。 */
.viewer-shell.is-range-layout .range-price {
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.viewer-shell.is-range-layout .range-price--high {
    fill: #efd39a
}

.viewer-shell.is-range-layout .range-price--low {
    fill: #b7c7d2
}

.viewer-shell.is-range-layout .range-price--avg {
    fill: #f5f3e9
}

.viewer-shell.is-range-layout .range-period-label {
    fill: #d9b878;
    font-size: 11px
}

.viewer-shell.is-range-layout .range-column-status {
    font-size: 5px;
    opacity: .55
}

.viewer-shell.is-range-layout .range-detail {
    display: none
}

.viewer-shell.is-range-layout .range-legend {
    margin-top: 5px;
    font-size: 6px
}

.viewer-shell.is-range-layout .object-view-selector {
    top: 34px;
    bottom: auto
}

@media(max-width:750px) {

    .viewer-shell.is-range-layout,
    .viewer-shell.is-range-layout .viewer-stage,
    .viewer-shell.is-range-layout .object-view--range {
        min-height: 810px
    }

    .viewer-shell.is-range-layout .object-view.object-view--range {
        min-height: 810px
    }

    .viewer-shell.is-range-layout .range-spectrum {
        min-width: 760px;
        min-height: 350px
    }

    .viewer-shell.is-range-layout .range-heading {
        padding-right: 110px
    }
}

/* Range is now a compact analysis card, not a staged viewer slide. */
.right-column .range-card .range-spectrum-wrap {
    overflow: hidden;
    min-width: 0
}

.right-column .range-card .range-spectrum {
    width: 100%;
    min-width: 0;
    min-height: 190px
}

@media(max-width:950px) {
    .right-column .range-card {
        grid-column: 1 / -1
    }
}

@media(max-width:430px) {
    .right-column .range-card .range-spectrum {
        min-height: 170px
    }
}

/* Inline range layout inside the primary price card. */
.primary-card .range-inline {
    min-width: 0;
    margin-top: 27px;
    padding-top: 22px;
    border-top: 1px solid var(--line)
}

.primary-card .range-inline .range-heading {
    margin: 0 0 12px 0
}

.primary-card .range-inline .range-spectrum-wrap {
    overflow: hidden;
    min-width: 0
}

.primary-card .range-inline .range-spectrum {
    width: 100%;
    min-width: 0;
    min-height: 205px
}

.primary-card .range-inline .range-detail {
    margin-top: 13px
}

.primary-card .range-inline .range-detail__content {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px
}

.primary-card .range-inline .range-foot {
    margin-top: 10px
}

@media(max-width:750px) {
    .primary-card .range-inline {
        margin-top: 23px;
        padding-top: 18px
    }

    .primary-card .range-inline .range-spectrum {
        min-height: 185px
    }

    .primary-card .range-inline .range-detail__content {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media(max-width:430px) {
    .primary-card .range-inline .range-spectrum {
        min-height: 165px
    }

    .primary-card .range-inline .range-detail__content {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* Keep HIGH / LOW prices readable inside the inline spectrum chart. */
.primary-card .range-inline .range-price--high,
.primary-card .range-inline .range-price--low {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -.015em
}

@media(max-width:430px) {
    .primary-card .range-inline .range-price--high,
    .primary-card .range-inline .range-price--low {
        font-size: 9px
    }
}

/* RSI centered view: the original 0-100 value remains in the data layer. */
.momentum-card .rsi-number {
    min-width: 0
}

.momentum-card .rsi-number small {
    display: block;
    margin-top: 4px
}

.momentum-card .rsi-number small#rsiCenteredValue {
    color: var(--text);
    font-size: 11px;
    font-variant-numeric: tabular-nums
}

.momentum-card .rsi-guide--extreme {
    stroke: rgba(226, 189, 128, .48);
    stroke-width: 1
}

.momentum-card .rsi-guide--center {
    stroke: rgba(211, 220, 222, .72);
    stroke-width: 1.2;
    stroke-dasharray: none
}

.momentum-card .rsi-axis-label {
    fill: var(--muted);
    font-size: 7px;
    font-variant-numeric: tabular-nums
}

.momentum-card .rsi-axis-label--center {
    fill: var(--text)
}

.momentum-card .rsi-latest-dot {
    fill: var(--green);
    stroke: rgba(220, 245, 232, .7);
    stroke-width: .7
}

.rsi-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line)
}

.rsi-metrics div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}

.rsi-metrics small,
.rsi-metrics span {
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .08em;
    text-overflow: ellipsis;
    white-space: nowrap
}

.rsi-metrics strong {
    color: var(--text);
    font-size: 11px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums
}

.rsi-metrics span {
    font-size: 8px
}

@media(max-width:1200px) {
    .rsi-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 12px
    }
}

@media(max-width:650px) {
    .rsi-metrics {
        gap: 9px
    }

    .rsi-metrics strong {
        font-size: 10px
    }
}