.bc-calculator { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid hsl(var(--border)); scroll-margin-top: 6rem; }
.bc-calculator [hidden] { display: none !important; }
.bc-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bc-heading > div { min-width: 0; max-width: 100%; }
.bc-heading .section-kicker { margin-bottom: .5rem; }
.bc-heading h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2rem); }
.bc-heading h2::after { display: none; }
.bc-format { white-space: nowrap; border: 1px solid #567084; border-radius: 2rem; padding: .4rem .7rem; font-size: .8rem; color: #c1d0dd; }
.bc-intro { margin: .8rem 0 1.5rem; max-width: 40rem; font-size: .9rem; }
.bc-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; gap: 1.75rem; }
.bc-controls, .bc-result { min-width: 0; }
.bc-controls { display: grid; gap: 1.35rem; }
.bc-controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.bc-controls legend, .bc-field-heading label { margin-bottom: .65rem; font-size: .9rem; font-weight: 800; }
.bc-field-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.bc-field-heading label { margin-bottom: 0; }
.bc-controls select { width: 100%; min-height: 3rem; padding: .65rem .85rem; border: 1px solid #567084; border-radius: .65rem; background: #14283b; color: #fff; font: inherit; color-scheme: dark; }
.bc-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.bc-option { display: flex; align-items: center; min-width: 0; border: 1px solid #567084; border-radius: .65rem; background: #14283b; }
.bc-option:has(input:checked) { border-color: #78dcf6; background: #203e52; box-shadow: inset 0 0 0 1px #78dcf6; }
.bc-option label { display: flex; align-items: flex-start; flex: 1; min-width: 0; height: 100%; gap: .55rem; padding: .8rem .15rem .8rem .7rem; cursor: pointer; }
.bc-option input { flex: none; margin-top: .3rem; width: 1rem; height: 1rem; accent-color: #39badd; }
.bc-option-copy { min-width: 0; }
.bc-option strong { display: block; font-size: .78rem; font-weight: 700; line-height: 1.45; }
.bc-option small { display: block; margin-top: .25rem; font-size: .69rem; line-height: 1.45; color: #c1d0dd; }
.bc-info { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.2rem; height: 2.75rem; border-radius: .5rem; color: #bfeafa; font-family: Georgia, serif; font-weight: 700; font-size: .9rem; }
.bc-info::before { content: ''; position: absolute; width: 1.2rem; height: 1.2rem; border: 1px solid #89b8cd; border-radius: 50%; }
.bc-info:hover { background: #31566c; }
.bc-calculator :where(button, select, input, a):focus-visible { outline: 3px solid #78dcf6; outline-offset: 3px; }
.bc-result { display: grid; gap: 1.2rem; }
.bc-preview { margin: 0; padding: 1.2rem; border-radius: .8rem; background: var(--paper); color: var(--ink); border: 1px solid #c6beaf; }
.bc-preview-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.5rem; color: #435969; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.bc-sample { position: relative; width: 96%; aspect-ratio: 9 / 5; margin: 0 auto 1.7rem; border-radius: 3px; background: #f9f7f1; box-shadow: 1px 2px 0 #bebbb4, 2px 4px 0 #c9c4b9, 0 14px 20px #152c3d24; overflow: hidden; isolation: isolate; container-type: inline-size; transition: box-shadow .25s ease, background-color .25s ease; }
.bc-art { position: absolute; inset: 0; background: #133548; color: #f9f7f1; }
.bc-art-front, .bc-art-back { position: absolute; inset: 0; padding: 7%; }
.bc-art-kicker { display: block; position: relative; z-index: 1; font-size: 2.5cqw; letter-spacing: .035em; }
.bc-art-brand { position: relative; z-index: 1; display: block; margin-top: 5%; font-size: 12cqw; line-height: .95; letter-spacing: -.08em; font-weight: 800; }
.bc-art-brand > span { font-size: 3cqw; vertical-align: top; margin-left: .5em; letter-spacing: 0; }
.bc-art-footer { position: absolute; left: 7%; bottom: 9%; z-index: 1; font-size: 2.3cqw; letter-spacing: .2em; }
.bc-art-orbit { position: absolute; width: 64%; aspect-ratio: 1; border: 7cqw solid #f5a779; border-radius: 50%; right: -23%; top: 17%; background: #2bc2d5; }
.bc-art-back { display: flex; flex-direction: column; justify-content: center; }
.bc-art-back strong { font-size: 6cqw; }
.bc-art-back > span { font-size: 2.8cqw; }
.bc-art-contact { margin-top: 8%; line-height: 1.7; }
.bc-art-line { position: absolute; right: 0; bottom: 0; width: 24%; height: 100%; background: #2bc2d5; border-left: 3cqw solid #f5a779; }
.bc-sample[data-color="false"] .bc-art { filter: grayscale(1); }
.bc-sample[data-surface="gloss"]::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(120deg, transparent 7%, #fff1 19%, #ffffff75 30%, #ffffff0a 44%, transparent 51%, #ffffff38 77%, transparent 92%); }
.bc-sample[data-surface="matte"] .bc-art, .bc-sample[data-surface="thick"] .bc-art { opacity: .9; }
.bc-sample[data-surface="soft"]::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 30% 10%, #e4d5bd20, #050d1726), repeating-linear-gradient(25deg, #ffffff08 0 1px, transparent 1px 3px); }
.bc-sample[data-surface="thick"] { box-shadow: 1px 2px 0 #edece5, 2px 4px 0 #aeaaa0, 3px 6px 0 #e9e6dd, 4px 8px 0 #a6a296, 5px 10px 0 #e0dacf, 5px 19px 23px #152c3d38; }
.bc-foil { position: absolute; z-index: 4; right: 9%; top: 14%; color: #f5d783; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; font-size: 17cqw; line-height: 1; background: linear-gradient(120deg, #90600e 3%, #ffeeb4 24%, #b88220 38%, #ffe7a3 53%, #bd8727 67%, #fff0bb 85%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 #463411); }
.bc-foil span { font-size: .45em; }
.bc-sample[data-gold="true"] .bc-art-orbit { opacity: .18; }
.bc-side-switch { display: flex; gap: .3rem; margin: 0 auto 1rem; padding: .25rem; width: fit-content; max-width: 100%; border: 1px solid #a9aba5; border-radius: 2rem; }
.bc-side-switch button { min-height: 2.4rem; padding: .4rem .85rem; border-radius: 2rem; font-size: .75rem; color: #233c4e; }
.bc-side-switch button[aria-pressed="true"] { background: #18394b; color: #fff; }
.bc-preview :focus-visible { outline-color: #086d8e; }
.bc-preview figcaption { display: grid; gap: .65rem; color: #435969; font-size: .75rem; line-height: 1.6; }
.bc-summary { padding: 1.2rem; border: 1px solid #567084; border-radius: .8rem; background: #14283b; }
.bc-summary h3 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 800; }
.bc-summary dl { display: grid; gap: .5rem; margin: 0; font-size: .77rem; }
.bc-summary dl > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .8rem; }
.bc-summary dt { color: #c1d0dd; }
.bc-summary dd { margin: 0; text-align: right; }
.bc-total { display: grid; gap: .15rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #3d5466; }
.bc-total > span { color: #c1d0dd; font-size: .8rem; }
.bc-total strong { font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.25; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.bc-order { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 1.15rem 0 .7rem; padding: .8rem 1rem; border-radius: .65rem; font-size: .86rem; }
.bc-small { display: block; font-size: .72rem; line-height: 1.6; }
.bc-notice { padding: 1rem; border: 1px solid #567084; border-radius: .65rem; }
.bc-notice a { color: #8fe3f6; text-decoration: underline; }
.bc-help { position: fixed; inset: 0; margin: auto; width: min(30rem, calc(100% - 2rem)); max-height: calc(100dvh - 3rem); padding: 1.5rem; border: 1px solid #668296; border-radius: 1rem; background: #172d43; color: #f7f4ed; box-shadow: 0 20px 80px #0006; }
.bc-help::backdrop { background: #071524b8; }
.bc-help h3 { margin: 0 0 1rem; font-weight: 800; font-size: 1.25rem; }
.bc-help p { margin: 0 0 1.2rem; color: #c1d0dd; font-size: .9rem; line-height: 1.75; }
.bc-help-close { min-height: 2.75rem; border-radius: .65rem; padding: .6rem 1rem; }
@media (max-width: 1024px) { .bc-layout { gap: 1.2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bc-options { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .bc-layout { grid-template-columns: 1fr; } .bc-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bc-heading { align-items: flex-start; } .bc-format { font-size: .7rem; } .bc-preview, .bc-summary { padding: 1rem; } }
@media (max-width: 480px) { .bc-options { grid-template-columns: 1fr; } .bc-heading { flex-direction: column; gap: .7rem; } .bc-calculator { margin-top: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .bc-calculator *, .bc-calculator *::after { animation: none !important; transition: none !important; } }