@layer bricks {.brxe-code{width:100%}}#brxe-zkilao {font-size: clamp(40px, 5vw, 90px); font-weight: 400; line-height: 0.9; text-align: center; letter-spacing: -0.035em; font-family: "Inter Display"; font-style: normal; max-width: 32ch; --duration: 30s}@media (max-width: 991px) {#brxe-zkilao {font-size: 8vw}}@media (max-width: 478px) {#brxe-zkilao {font-size: 11vw}}#brxe-kxrnih {font-size: clamp(40px, 5.1vw, 90px); font-weight: 400; line-height: 0.78; text-align: center; letter-spacing: -0.035em; font-family: "Playfair Display"; font-style: italic; max-width: 32ch; --duration: 30s}@media (max-width: 991px) {#brxe-kxrnih {font-size: 8vw}}@media (max-width: 478px) {#brxe-kxrnih {font-size: 11vw}}.brxe-section.ld-hero { padding: 150px 16px 0; } .brxe-container.ld-wrap { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; align-items: center; text-align: center; } .ld-eyebrow { margin: 0 0 18px; font-family: "Playfair Display", Georgia, serif; font-size: 20px; line-height: 1.2; text-align: center; color: #11181c; } .brxe-block.ld-titles { width: 100%; align-items: center; } .ld-titles .bc-fuid-gradient__gradient { padding: 0 0.14em 0.06em 0; } .ld-lead { max-width: 58ch; margin: 26px auto 0; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.4; text-align: center; color: #11181c; text-wrap: pretty; } .ld-wrap > .brxe-code, .ld-wrap > .brxe-text-basic { width: 100%; } .ld-section .ld-table-wrap, .ld-section .ld-notes, .ld-section .ld-cards { text-align: left; }.brxe-section.ld-stage { padding: clamp(40px, 5vw, 64px) clamp(8px, 2vw, 24px) clamp(64px, 7vw, 100px); } .ld-device { position: relative; text-align: left; max-width: 1180px; margin: 0 auto; padding: 18px; border-radius: 26px; background: linear-gradient(180deg, #1a232a 0%, #0d1418 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 -1px 0 rgba(0, 0, 0, 0.6) inset, 0 50px 120px -40px rgba(0, 40, 90, 0.55), 0 24px 50px -24px rgba(0, 0, 0, 0.6); color: #fff;} .ld-device__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 14px 18px; font: 600 11px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .ld-device__brand { display: flex; align-items: center; gap: 12px; } .ld-device__brand i { width: 6px; height: 18px; background: #fff; border-radius: 1px; transform: skewY(-8deg); opacity: 0.85; } .ld-screw { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #5d6870, #232b31 70%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); position: relative; } .ld-screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4.5px; height: 1px; background: rgba(0, 0, 0, 0.6); transform: rotate(35deg); } .ld-onair { white-space: nowrap; padding: 6px 10px; border-radius: 5px; border: 1px solid rgba(255, 59, 48, 0.35); color: rgba(255, 59, 48, 0.45); transition: all 0.3s ease; } .ld-device.is-live .ld-onair { background: #ff3b30; border-color: #ff3b30; color: #fff; box-shadow: 0 0 22px rgba(255, 59, 48, 0.75); } .ld-device__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; }.ld-controls { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 22px; border-radius: 18px; background: rgba(0, 0, 0, 0.28); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } .ld-label { margin: 0 0 12px; font: 600 11px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .ld-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ld-keys--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ld-key { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; min-height: 78px; padding: 28px 12px 12px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #2a343b 0%, #1d262c 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 3px 0 #0a0f12, 0 6px 14px rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.82); font: inherit; text-align: left; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, color 0.2s ease;} .ld-key::before { content: ""; position: absolute; top: 10px; left: 12px; width: 18px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); transition: background 0.2s ease, box-shadow 0.2s ease; } .ld-key b { font-size: 15px; font-weight: 500; line-height: 1.15; } .ld-key small { font: 500 10px/1.2 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .ld-key:hover { color: #fff; } .ld-key:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 1px 0 #0a0f12, 0 3px 8px rgba(0, 0, 0, 0.45); } .ld-key[aria-pressed="true"], .ld-key[aria-checked="true"] { background: linear-gradient(180deg, #0f63c9 0%, #0a4ea3 100%); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 3px 0 #06305f, 0 8px 24px -4px rgba(0, 106, 220, 0.7); } .ld-key[aria-pressed="true"]::before, .ld-key[aria-checked="true"]::before { background: #9cd0ff; box-shadow: 0 0 10px #6fb3ff; } .ld-key[aria-pressed="true"] small, .ld-key[aria-checked="true"] small { color: rgba(255, 255, 255, 0.75); } .ld-key[disabled] { opacity: 0.35; cursor: not-allowed; } .ld-key:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 3px; }.ld-screen { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 26px; border-radius: 18px; background: radial-gradient(120% 90% at 30% 0%, #0d2440 0%, #061019 60%); box-shadow: 0 0 0 1px rgba(156, 200, 255, 0.12) inset, 0 0 60px rgba(0, 0, 0, 0.6) inset;} .ld-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px); pointer-events: none; } .ld-screen__label { margin: 0; font: 600 11px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(156, 200, 255, 0.75); } .ld-screen__value { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 0; color: #cfe4ff; text-shadow: 0 0 24px rgba(111, 179, 255, 0.55); } .ld-screen__value span { font-size: clamp(64px, 7vw, 108px); font-weight: 400; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .ld-screen__value small { font: 500 18px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; color: rgba(207, 228, 255, 0.7); } .ld-meter { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; margin: 22px 0 6px; } .ld-meter i { height: 12px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); transition: background 0.25s ease, box-shadow 0.25s ease; } .ld-meter i.on { background: #3ee08f; box-shadow: 0 0 8px rgba(62, 224, 143, 0.6); } .ld-meter i.on.mid { background: #ffd23e; box-shadow: 0 0 8px rgba(255, 210, 62, 0.6); } .ld-meter i.on.hi { background: #ff3b30; box-shadow: 0 0 8px rgba(255, 59, 48, 0.6); } .ld-scale { display: flex; justify-content: space-between; font: 500 10px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; color: rgba(255, 255, 255, 0.35); } .ld-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .ld-lines li { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset; } .ld-lines span { display: block; font: 600 10px/1.2 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .ld-lines b { display: block; margin-top: 6px; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .ld-streams { margin: 16px 0 0; padding: 0; list-style: none; font: 500 12px/1.5 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; color: rgba(255, 255, 255, 0.7); } .ld-streams li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); } .ld-streams li em { font-style: normal; color: rgba(255, 255, 255, 0.4); } .ld-advice { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); } .ld-advice strong { color: #fff; font-weight: 500; } .ld-empty { margin: 18px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); }.ld-dock { display: none; }.brxe-section.ld-section { padding: clamp(64px, 7vw, 110px) 16px; background: #f4f4f6; } .ld-intro { max-width: 60ch; margin: 24px auto 0; text-align: center; font-size: 18px; line-height: 1.45; color: #687076; } .ld-table-wrap { margin: clamp(36px, 4vw, 52px) 0 0; overflow-x: auto; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #e5e6ea inset; } .ld-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 16px; } .ld-table__grp th { text-align: center; border-bottom: 0; padding-bottom: 4px; color: #11181c; } .ld-table__grp th:first-child { text-align: left; vertical-align: bottom; color: #687076; } .ld-table thead tr:nth-child(2) th { padding-top: 4px; } .ld-table th, .ld-table td { padding: 18px 22px; text-align: left; border-bottom: 1px solid #eceef1; } .ld-table thead th { font: 600 11px/1.2 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #687076; } .ld-table tbody th { font-weight: 500; } .ld-table td { font-variant-numeric: tabular-nums; } .ld-table tr:last-child th, .ld-table tr:last-child td { border-bottom: 0; } .ld-table .na { color: #b8bec3; } .ld-notes { margin: 18px 0 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.6; color: #687076; } .ld-notes a { color: #006adc; } .ld-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(48px, 5vw, 72px) 0 0; } .ld-card { padding: 28px; border-radius: 22px; background: #fff; } .ld-card__num { margin: 0; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 28px; line-height: 1; color: #006adc; } .ld-card h3 { margin: 14px 0 0; font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; } .ld-card p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: #687076; }.brxe-section.ld-cta { padding: clamp(64px, 7vw, 110px) 16px; text-align: center; } .ld-cta .ld-cta__text { max-width: 50ch; margin: 22px auto 0; font-size: 18px; line-height: 1.45; color: #687076; } .ld-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } .ld-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; border: 1px solid #006adc; background: #006adc; color: #fff; font-size: 17px; font-weight: 500; text-decoration: none; transition: transform 0.25s ease, background 0.25s ease; } .ld-btn:hover { transform: translateY(-2px); background: #004799; border-color: #004799; } .ld-btn--ghost { background: transparent; color: #11181c; border-color: #d5d8dc; } .ld-btn--ghost:hover { background: transparent; border-color: #006adc; color: #006adc; }@media (max-width: 900px) { .ld-device__body { grid-template-columns: minmax(0, 1fr); } .ld-cards { grid-template-columns: minmax(0, 1fr); }}@media (max-width: 560px) { .ld-device { padding: 10px; border-radius: 20px; } .ld-device__bar { padding: 6px 8px 12px; font-size: 10px; letter-spacing: 0.12em; } .ld-device__model, .ld-device__maker { display: none; } .ld-controls, .ld-screen { padding: 16px; } .ld-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ld-keys--3 { grid-template-columns: minmax(0, 1fr); } .ld-keys--res { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ld-key { min-height: 64px; padding-top: 24px; } .ld-lines { grid-template-columns: minmax(0, 1fr); } .ld-dock { position: fixed; z-index: 40; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #0b1620; color: #cfe4ff; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); font: 600 11px/1.2 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; transform: translateY(140%); transition: transform 0.35s ease; } .ld-dock b { font: 500 24px/1 "Inter Display", Inter, sans-serif; letter-spacing: -0.02em; text-transform: none; color: #fff; } .ld-dock.is-on { transform: none; }}#brxe-tcxdls {font-size: clamp(36px, 4vw, 68px); font-weight: 400; line-height: 0.9; text-align: center; letter-spacing: -0.035em; font-family: "Inter Display"; font-style: normal; max-width: 32ch; --duration: 30s}@media (max-width: 991px) {#brxe-tcxdls {font-size: 8vw}}@media (max-width: 478px) {#brxe-tcxdls {font-size: 10vw}}#brxe-oqkqcl {font-size: clamp(36px, 4vw, 68px); font-weight: 400; line-height: 0.78; text-align: center; letter-spacing: -0.035em; font-family: "Playfair Display"; font-style: italic; max-width: 32ch; --duration: 30s}@media (max-width: 991px) {#brxe-oqkqcl {font-size: 8vw}}@media (max-width: 478px) {#brxe-oqkqcl {font-size: 10vw}}#brxe-ucvupx {font-size: clamp(36px, 4vw, 68px); font-weight: 400; line-height: 0.9; text-align: center; letter-spacing: -0.035em; font-family: "Inter Display"; font-style: normal; max-width: 32ch; --duration: 30s}@media (max-width: 991px) {#brxe-ucvupx {font-size: 8vw}}@media (max-width: 478px) {#brxe-ucvupx {font-size: 10vw}}#brxe-whmvbp {font-size: clamp(36px, 4vw, 68px); font-weight: 400; line-height: 0.78; text-align: center; letter-spacing: -0.035em; font-family: "Playfair Display"; font-style: italic; max-width: 32ch; --duration: 30s}@media (max-width: 991px) {#brxe-whmvbp {font-size: 8vw}}@media (max-width: 478px) {#brxe-whmvbp {font-size: 10vw}}