.configurator { padding: 120px 0; background: #181818; color: #fff; }.configurator-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; }.configurator-heading p { margin: 0; max-width: 390px; color: #d2d2d2; font-size: 16px; line-height: 1.65; }.configurator-grid { display: grid; grid-template-columns: 250px 1fr; gap: 42px; margin-top: 58px; }.config-form { display: grid; align-content: start; gap: 20px; }.config-form label { display: grid; gap: 9px; color: #caa020; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.config-form select,.config-form input { appearance: none; width: 100%; border: 1px solid #ffffff45; border-radius: 0; padding: 15px 12px; background: #242424; color: #fff; font: inherit; font-size: 15px; }.config-form select { position: relative; z-index: 1; padding-right: 42px; background-image: linear-gradient(45deg,transparent 50%,#caa020 50%),linear-gradient(135deg,#caa020 50%,transparent 50%); background-position: calc(100% - 18px) calc(50% - 2px),calc(100% - 12px) calc(50% - 2px); background-repeat: no-repeat; background-size: 6px 6px,6px 6px; cursor: pointer; }.config-form select:disabled { cursor: not-allowed; opacity: .55; }.config-form select:focus,.config-form input:focus { outline: 1px solid #caa020; border-color: #caa020; }.config-form input:disabled { cursor: not-allowed; border-color: #ffffff1f; background: #202020; color: #858585; }.config-form label.is-disabled { color: #806b35; }.visual-stage { min-width: 0; }.visual-board { height: 465px; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 80%,#433610 0,transparent 38%),linear-gradient(145deg,#242424,#101010); border: 1px solid #ffffff2d; }.visual-board::before { content: ""; position: absolute; left: 0; right: 0; bottom: 52px; border-top: 1px solid #ffffff2d; }.led-wall { position: absolute; bottom: 53px; display: grid; place-items: center; overflow: hidden; border: 1px solid #caa020; box-shadow: 0 0 42px #caa02042; }.led-wall::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg,#ffffff22 1px,transparent 1px),linear-gradient(#ffffff22 1px,transparent 1px); background-size: calc(100% / var(--columns)) calc(100% / var(--rows)); pointer-events: none; }.led-wall img { width: 100%; height: 100%; object-fit: cover; }.person { position: absolute; z-index: 2; bottom: 53px; left: calc(50% - var(--wall-half) - var(--person-offset)); width: 25px; height: var(--person-height); color: #e6e3d9; filter: drop-shadow(0 3px 4px #000); }.person i { display: block; width: 16px; height: 16px; margin: 0 auto 1px; border-radius: 50%; background: currentColor; }.person b { display: block; width: 19px; height: calc(100% - 17px); margin: auto; border-radius: 10px 10px 2px 2px; background: currentColor; clip-path: polygon(32% 0,68% 0,78% 29%,100% 49%,88% 54%,71% 38%,69% 100%,31% 100%,29% 38%,12% 54%,0 49%,22% 29%); }.horizontal-rule { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: var(--rule-width); border-top: 1px solid #caa020; text-align: center; }.horizontal-rule::before,.horizontal-rule::after { content: ""; position: absolute; top: -4px; width: 1px; height: 8px; background: #caa020; }.horizontal-rule::before { left: 0; }.horizontal-rule::after { right: 0; }.horizontal-rule span { position: relative; top: 9px; color: #caa020; font-size: 11px; font-weight: 700; }.vertical-rule { position: absolute; left: calc(50% + var(--wall-half) + 19px); bottom: 53px; height: var(--rule-height); border-left: 1px solid #caa020; }.vertical-rule::before,.vertical-rule::after { content: ""; position: absolute; left: -4px; width: 8px; height: 1px; background: #caa020; }.vertical-rule::before { top: 0; }.vertical-rule::after { bottom: 0; }.vertical-rule span { position: absolute; top: 50%; left: 9px; color: #caa020; font-size: 11px; font-weight: 700; white-space: nowrap; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }.config-results { display: grid; grid-template-columns: repeat(3,1fr); margin: 34px 0 0 292px; border-top: 1px solid #ffffff2d; }.config-results article { padding: 23px 20px; border-right: 1px solid #ffffff2d; }.config-results article:first-child { padding-left: 0; }.config-icon { display: block; width: 27px; height: 27px; object-fit: contain; }.config-results p { margin: 9px 0 5px; color: #bdbdbd; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }.config-results strong { font-size: 19px; font-weight: 400; }.config-note { margin: 23px 0 0 292px; color: #caa020; font-size: 13px; }
@media (max-width: 760px) { .configurator { padding: 80px 0; }.configurator-heading,.configurator-grid { grid-template-columns: 1fr; gap: 30px; }.configurator-grid { margin-top: 40px; }.config-form { grid-template-columns: 1fr 1fr; }.config-form label:first-child { grid-column: 1 / -1; }.visual-board { height: 370px; }.config-results { margin-left: 0; }.config-results article { padding: 20px 10px; }.config-results strong { font-size: 15px; }.config-note { margin-left: 0; }.person { left: calc(50% - var(--wall-half) - 20px); } }