:root {
    /* Condensed** Condensed Condensedd Condense* */
    --black: #071014;
    --petrol: #0B3B44;
    --opal: #DDF7F0;
    --violet: #C7B7FF;
    --green: #8DFFB0;
    --brass: #D8A640;
    --bruise: #6E1F49;
    --coral: #FF6B5F;
    --display: 'Unbounded', sans-serif;
    --poem: 'Cormorant Garamond', serif;
    --measure: 'IBM Plex Sans Condensed', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--opal);
    background:
        radial-gradient(circle at 50% 35%, rgba(199,183,255,.16), transparent 22rem),
        radial-gradient(circle at 16% 82%, rgba(110,31,73,.48), transparent 34rem),
        linear-gradient(135deg, var(--black), #061b20 44%, var(--petrol));
    font-family: var(--poem);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-radial-gradient(circle at 50% 45%, rgba(221,247,240,.08) 0 1px, transparent 1px 25px),
        linear-gradient(110deg, transparent 0 42%, rgba(221,247,240,.07) 43%, transparent 45% 100%);
    mix-blend-mode: screen;
    opacity: .55;
    z-index: 1;
}

.cursor-glint {
    position: fixed;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(221,247,240,.22), rgba(141,255,176,.08) 26%, transparent 64%);
    filter: blur(10px);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 5;
}

.depth-field span {
    position: fixed;
    border: 1px solid rgba(221,247,240,.13);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: drift 18s linear infinite;
}
.depth-field span:nth-child(1) { width: 44rem; height: 44rem; left: -12rem; top: 10vh; }
.depth-field span:nth-child(2) { width: 22rem; height: 22rem; right: 8vw; top: 5vh; animation-duration: 13s; }
.depth-field span:nth-child(3) { width: 36rem; height: 36rem; right: -14rem; bottom: 5vh; animation-duration: 22s; }
.depth-field span:nth-child(4) { width: 10rem; height: 10rem; left: 20vw; bottom: 12vh; border-color: rgba(216,166,64,.28); }
.depth-field span:nth-child(5) { width: 16rem; height: 16rem; left: 58vw; top: 48vh; border-color: rgba(110,31,73,.4); animation-duration: 16s; }

.lens-dial {
    position: fixed;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: grid;
    gap: .65rem;
}
.lens-dial a {
    display: grid;
    grid-template-columns: 2.1rem 4.7rem;
    align-items: center;
    gap: .35rem;
    color: rgba(221,247,240,.62);
    text-decoration: none;
    font-family: var(--measure);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .78rem;
}
.lens-dial b {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(221,247,240,.24);
    border-radius: 50%;
    color: var(--brass);
    background: rgba(7,16,20,.62);
}
.lens-dial a.active b { border-color: var(--green); box-shadow: 0 0 22px rgba(141,255,176,.38); color: var(--green); }

.stage-shell { position: relative; z-index: 2; }
.chamber {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 8vh 8vw;
    isolation: isolate;
}
.chamber::before {
    content: "";
    position: absolute;
    inset: 3vh 4vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(221,247,240,.08), transparent 59%), conic-gradient(from 30deg, transparent, rgba(221,247,240,.08), transparent, rgba(216,166,64,.11), transparent);
    mask-image: radial-gradient(circle, transparent 0 22%, #000 23% 100%);
    opacity: .8;
    pointer-events: none;
}

.fixed-apparatus {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 4;
}
.tri-stage {
    width: min(44vw, 33rem);
    height: min(44vw, 33rem);
    position: relative;
    transform-origin: 50% 50%;
    transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.triangle-prism {
    position: absolute;
    inset: 7%;
    clip-path: polygon(50% 0, 100% 86%, 0 86%);
    background: linear-gradient(145deg, rgba(221,247,240,.05), rgba(199,183,255,.15), rgba(255,107,95,.06));
    border: 1px solid rgba(221,247,240,.14);
    filter: drop-shadow(0 0 24px rgba(199,183,255,.18));
    animation: prismBreath 5s ease-in-out infinite;
}
.lens-ring {
    position: absolute;
    width: 42%;
    height: 42%;
    border-radius: 50%;
    border: 1px solid rgba(221,247,240,.26);
    backdrop-filter: blur(4px);
}
.lens-ring-value { left: 29%; top: -3%; box-shadow: inset 0 0 42px rgba(141,255,176,.18); }
.lens-ring-price { right: -2%; bottom: 12%; box-shadow: inset 0 0 42px rgba(216,166,64,.18); }
.lens-ring-cost { left: -2%; bottom: 12%; box-shadow: inset 0 0 42px rgba(110,31,73,.5); }

.artifact {
    --value-x: 9px;
    --price-x: -6px;
    --cost-x: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12rem;
    height: 12rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.pearl-core {
    position: absolute;
    inset: 23%;
    border-radius: 48% 52% 55% 45%;
    background: radial-gradient(circle at 34% 27%, #ffffff, var(--opal) 22%, var(--violet) 50%, var(--petrol) 100%);
    box-shadow: 0 0 40px rgba(221,247,240,.48), inset -18px -15px 24px rgba(7,16,20,.45);
    animation: pearlTremble 3.8s ease-in-out infinite;
}
.value-aura, .price-ticks, .cost-shadow, .pin { position: absolute; inset: 0; border-radius: 50%; }
.value-aura {
    transform: translateX(var(--value-x));
    background: repeating-radial-gradient(circle, transparent 0 12px, rgba(141,255,176,.25) 13px 14px, transparent 15px 25px);
    filter: blur(.2px) drop-shadow(0 0 14px rgba(141,255,176,.52));
    opacity: .62;
}
.price-ticks {
    transform: translateX(var(--price-x)) rotate(6deg);
    border: 1px solid rgba(216,166,64,.55);
}
.price-ticks i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 50%;
    transform-origin: 0 0;
    background: linear-gradient(var(--brass) 0 10px, transparent 10px 100%);
}
.price-ticks i:nth-child(1) { transform: rotate(0deg); } .price-ticks i:nth-child(2) { transform: rotate(30deg); }
.price-ticks i:nth-child(3) { transform: rotate(60deg); } .price-ticks i:nth-child(4) { transform: rotate(90deg); }
.price-ticks i:nth-child(5) { transform: rotate(120deg); } .price-ticks i:nth-child(6) { transform: rotate(150deg); }
.price-ticks i:nth-child(7) { transform: rotate(180deg); } .price-ticks i:nth-child(8) { transform: rotate(210deg); }
.price-ticks i:nth-child(9) { transform: rotate(240deg); } .price-ticks i:nth-child(10) { transform: rotate(270deg); }
.price-ticks i:nth-child(11) { transform: rotate(300deg); } .price-ticks i:nth-child(12) { transform: rotate(330deg); }
.cost-shadow {
    transform: translate(var(--cost-x), 18px) scale(1.05);
    background: radial-gradient(circle at 44% 57%, rgba(110,31,73,.64), transparent 37%), radial-gradient(circle at 62% 64%, rgba(255,107,95,.18), transparent 28%);
    filter: blur(7px);
    opacity: .75;
}
.pin { inset: 49%; background: var(--brass); box-shadow: 0 0 0 8px rgba(216,166,64,.18); }

.sightline { position: absolute; width: 140vw; height: 1px; background: linear-gradient(90deg, transparent, rgba(221,247,240,.22), transparent); }
.sightline-a { transform: rotate(-25deg); }
.sightline-b { transform: rotate(34deg); }

.viewport {
    width: min(78vw, 62rem);
    min-height: 62vh;
    position: relative;
    display: grid;
    align-content: center;
    padding: clamp(2rem, 6vw, 6rem);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(221,247,240,.12), rgba(11,59,68,.25) 43%, rgba(7,16,20,.62) 70%);
    box-shadow: inset 0 0 80px rgba(221,247,240,.08), 0 0 80px rgba(7,16,20,.8);
    overflow: hidden;
}
.viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(221,247,240,.12) 45%, transparent 48% 100%);
    mix-blend-mode: screen;
    animation: watery 7s ease-in-out infinite;
}
.eyebrow {
    font-family: var(--measure);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--brass);
    font-size: clamp(.8rem, 1.1vw, 1rem);
    margin: 0 0 1rem;
}
h1, h2 {
    font-family: var(--display);
    text-transform: uppercase;
    line-height: .9;
    margin: 0;
    max-width: 11ch;
    text-shadow: 0 0 24px rgba(221,247,240,.18);
}
h1 { font-size: clamp(3.4rem, 10vw, 9rem); color: transparent; -webkit-text-stroke: 1px var(--opal); }
h2 { font-size: clamp(2.4rem, 6vw, 6.7rem); }
.invitation, .fragment {
    font-size: clamp(1.35rem, 2.2vw, 2.4rem);
    line-height: 1.12;
    max-width: 26rem;
    margin: 1.4rem 0 0;
    color: rgba(221,247,240,.84);
    font-style: italic;
}
.etched-reflection {
    position: absolute;
    right: 10%;
    bottom: 12%;
    font-family: var(--measure);
    letter-spacing: .22em;
    color: rgba(221,247,240,.24);
    transform: rotate(-11deg) scaleY(-1);
    text-transform: uppercase;
}
.handle {
    position: absolute;
    font-family: var(--measure);
    color: var(--opal);
    border: 1px solid rgba(221,247,240,.26);
    border-radius: 999px;
    padding: .55rem 1.1rem;
    background: rgba(7,16,20,.5);
}
.handle-value { left: 18%; top: 11%; color: var(--green); }
.handle-price { right: 9%; top: 34%; color: var(--brass); }
.handle-cost { left: 12%; bottom: 18%; color: var(--coral); }
.marginal, .orbit-note, .receipt-strip, .shadow-receipt {
    position: absolute;
    font-family: var(--measure);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(221,247,240,.64);
    font-size: .9rem;
    max-width: 16rem;
}
.marginal-left { left: 5vw; top: 19vh; transform: rotate(-8deg); }
.marginal-right { right: 9vw; bottom: 15vh; transform: rotate(7deg); }
.value-viewport { background: radial-gradient(circle, rgba(141,255,176,.18), rgba(11,59,68,.28) 42%, rgba(7,16,20,.72)); }
.price-viewport { background: radial-gradient(circle, rgba(216,166,64,.18), rgba(11,59,68,.2) 40%, rgba(7,16,20,.76)); }
.cost-viewport { background: radial-gradient(circle at 55% 54%, rgba(110,31,73,.52), rgba(7,16,20,.74) 58%); }
.composite-viewport { background: radial-gradient(circle at 46% 45%, rgba(199,183,255,.22), rgba(141,255,176,.09) 28%, rgba(110,31,73,.35) 59%, rgba(7,16,20,.82)); }
.contour-labels, .tide-marks { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; font-family: var(--measure); text-transform: uppercase; letter-spacing: .12em; }
.contour-labels span, .tide-marks span { border: 1px solid currentColor; border-radius: 50%; padding: .8rem 1.1rem; }
.contour-labels span { color: var(--green); }
.tide-marks span { color: var(--coral); }
.counter-bank { display: flex; gap: .8rem; margin-top: 2rem; font-family: var(--measure); font-size: 3rem; color: var(--brass); }
.counter-bank span { border-bottom: 1px solid var(--brass); min-width: 4rem; text-align: center; }
.note-a { left: 14vw; top: 18vh; color: var(--green); }
.note-b { right: 14vw; bottom: 15vh; font-family: var(--poem); text-transform: none; font-size: 1.4rem; }
.note-c { right: 10vw; top: 22vh; color: var(--brass); }
.receipt-strip { left: 5vw; bottom: 11vh; color: rgba(216,166,64,.78); transform: rotate(-12deg); }
.shadow-receipt { left: 7vw; bottom: 18vh; color: rgba(255,107,95,.5); transform: rotate(9deg); max-width: 24rem; }
.scrub-panel { margin-top: 2rem; width: min(30rem, 85%); display: grid; gap: .9rem; font-family: var(--measure); text-transform: uppercase; letter-spacing: .14em; }
.scrub-panel label { display: grid; grid-template-columns: 5rem 1fr; align-items: center; color: var(--opal); }
input[type="range"] { accent-color: var(--green); }
.final-stamp { position: absolute; right: 13%; bottom: 18%; transform: rotate(-15deg); font-family: var(--display); color: var(--coral); border: 2px solid var(--coral); padding: .7rem 1rem; }

body.mode-value .tri-stage { transform: rotate(0deg) scale(1.05); }
body.mode-price .tri-stage { transform: rotate(120deg) scale(1.03); }
body.mode-cost .tri-stage { transform: rotate(240deg) scale(1.05); }
body.mode-composite .tri-stage { transform: rotate(360deg) scale(1.12); }
body.mode-value .value-aura, body.mode-price .price-ticks, body.mode-cost .cost-shadow { opacity: 1; }

@keyframes drift { to { transform: rotate(360deg); } }
@keyframes prismBreath { 50% { opacity: .62; transform: scale(.97); } }
@keyframes pearlTremble { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(3px,-2px) rotate(3deg); } }
@keyframes watery { 0%,100% { transform: translateX(-8%) rotate(0deg); } 50% { transform: translateX(8%) rotate(4deg); } }

@media (max-width: 760px) {
    .lens-dial { right: .35rem; transform: translateY(-50%) scale(.82); transform-origin: right center; }
    .tri-stage { width: 18rem; height: 18rem; opacity: .85; }
    .artifact { width: 9rem; height: 9rem; }
    .viewport { width: 92vw; min-height: 68vh; border-radius: 34%; padding: 2rem; }
    .marginal, .orbit-note, .receipt-strip, .shadow-receipt { display: none; }
    h1 { font-size: 3.1rem; }
}