/* HIP · Anarock vs FD calculator: the original layout and sizes, recoloured to the page's copper & slate. */
#calc { --c-card: var(--surface); --c-panel: var(--surface-2); --c-ink: var(--ink); --c-mute: rgba(var(--ink-rgb), 0.6); --c-line: rgba(var(--ink-rgb), 0.1); --c-re: #e6aa80; --c-fd: #7fa4d6; --c-track: rgba(var(--ink-rgb), 0.14); font-family: var(--body); color: var(--c-ink); }
#calc * { box-sizing: border-box; }
#calc .cc { width: 100%; max-width: 1200px; margin: 0 auto; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: minmax(360px, 1fr) minmax(0, 2fr); }
#calc .hd { grid-column: 1 / -1; padding: 24px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#calc .hd h3 { font: 600 20px/28px var(--body); letter-spacing: 0; }
#calc .key { display: flex; gap: 16px; font-size: 12px; line-height: 16px; }
#calc .key span { display: flex; align-items: center; gap: 6px; font-weight: 500; }
#calc .key i { width: 10px; height: 10px; border-radius: 2px; display: block; }
#calc .left { padding: 24px; min-height: 600px; display: flex; }
#calc .panel { flex: 1; display: flex; flex-direction: column; gap: 8px; background: var(--c-panel); border-radius: 0 16px 16px 0; padding-bottom: 20px; }
#calc .stats { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; padding: 20px 0; }
#calc .st { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 6px 10px; }
#calc .st:nth-child(3n+1) { padding-left: 20px; } #calc .st:nth-child(3n) { padding-right: 20px; }
#calc .st:nth-child(n+4) { padding-top: 10px; padding-bottom: 0; }
#calc .st > span:first-child { font-size: 12px; line-height: 16px; color: var(--c-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#calc .st > span:last-child { font-size: 18px; font-weight: 600; line-height: 24px; white-space: nowrap; display: flex; }
#calc .rule { height: 1px; background: var(--c-line); margin: 0 20px; }
#calc .ctl { display: flex; flex-direction: column; gap: 48px; padding: 16px 20px 0; }
#calc .ctl > div { display: flex; flex-direction: column; gap: 8px; }
#calc .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#calc .row span:first-child { font-size: 14px; font-weight: 500; line-height: 18px; }
#calc .row span:last-child { font-size: 16px; font-weight: 600; line-height: 20px; }
#calc .tk { position: relative; height: 16px; margin: 0 8px; font-size: 12px; line-height: 16px; color: var(--c-mute); }
#calc .tk span { position: absolute; transform: translateX(-50%); }
#calc input.rg { -webkit-appearance: none; appearance: none; height: 16px; background: transparent; width: 100%; margin: 0; cursor: pointer; --c: var(--c-re); --fill: 50%; }
#calc input.rg.fd { --c: var(--c-fd); }
#calc input.rg::-webkit-slider-runnable-track { height: 8px; border: 0; border-radius: 4px; background: linear-gradient(var(--c), var(--c)) 0 0/var(--fill) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 100%/var(--fill) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 0/1.5px 100% no-repeat, linear-gradient(to right, color-mix(in srgb, var(--c) 16%, transparent) 0, var(--c) var(--fill), var(--c-track) var(--fill)); }
#calc input.rg::-moz-range-track { height: 8px; border: 0; border-radius: 4px; background: linear-gradient(var(--c), var(--c)) 0 0/var(--fill) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 100%/var(--fill) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 0/1.5px 100% no-repeat, linear-gradient(to right, color-mix(in srgb, var(--c) 16%, transparent) 0, var(--c) var(--fill), var(--c-track) var(--fill)); }
#calc input.rg::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--c); }
#calc input.rg::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--c); }
#calc input.rg:focus-visible { outline: none; } #calc input.rg:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(var(--ink-rgb), 0.22); }
#calc .right { display: flex; flex-direction: column; min-width: 0; }
#calc .plotwrap { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(260px, 1fr) auto; column-gap: 16px; row-gap: 8px; padding: 32px 24px 20px 0; }
#calc .yt { position: relative; height: 100%; min-height: 260px; }
#calc .yt div { position: absolute; right: 0; transform: translateY(50%); font-size: 11px; line-height: 16px; color: var(--c-mute); white-space: nowrap; letter-spacing: -0.2px; }
#calc .plot { position: relative; height: 100%; min-height: 260px; }
#calc .gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--c-line); }
#calc .abs { position: absolute; inset: 0; }
#calc .chip { position: absolute; white-space: nowrap; border-radius: 4px; }
#calc .xa { position: relative; height: 16px; }
#calc .xa div { position: absolute; top: 0; font-size: 11px; line-height: 16px; white-space: nowrap; letter-spacing: -0.2px; }
#calc .tip { position: absolute; top: 0; background: #0b0e11; border: 1px solid var(--c-line); color: var(--c-ink); border-radius: 6px; padding: 10px 12px; white-space: nowrap; font-size: 12px; line-height: 16px; pointer-events: none; z-index: 5; display: flex; flex-direction: column; gap: 4px; }
#calc .tip > span { display: flex; align-items: center; gap: 6px; } #calc .tip > span b { margin-left: auto; padding-left: 12px; font-weight: 600; } #calc .tip > span i { width: 8px; height: 8px; border-radius: 2px; display: block; }
@media (max-width: 860px) { #calc .cc { grid-template-columns: minmax(0, 1fr); } #calc .left { min-height: 0; } #calc .panel { border-radius: 16px; } #calc .st > span:last-child { font-size: 16px; } }