/* BLUE_Responsive scroll experience. Everything is scoped to #brx so the shared header, inquiry and footer stay untouched.
   Look: drafting paper, ink type and one measuring blue. No gradients, glows or blur orbs. */
.blueresponsive-exp-page { background: #f3f1ec; --max-width: 1200px; }
#brx { --paper: #f3f1ec; --paper2: #e9e6df; --card: #fbfaf7; --ink: #151515; --ink2: #3a3935; --mu: #67635b; --mu2: #94908a; --line: #d8d4cb; --line2: #bfb9ad;
    --blue: #1d4ed8; --blue-soft: #e4eafb; --mono: 'IBM Plex Mono', 'Pretendard Variable', Pretendard, ui-monospace, Consolas, monospace;
    --brx-h: 86px; --brx-bar: 0px; --stage-h: calc(100svh - var(--brx-h) - var(--brx-bar)); --pad: clamp(20px, 3vw, 48px);
    position: relative; background: var(--paper); color: var(--ink); overflow-x: clip;
    font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, sans-serif; line-height: 1.6; }
:where(#brx) *, :where(#brx) *::before, :where(#brx) *::after { box-sizing: border-box; }
:where(#brx) h1, :where(#brx) h2, :where(#brx) h3, :where(#brx) h4, :where(#brx) p, :where(#brx) figure, :where(#brx) ol, :where(#brx) ul, :where(#brx) dl, :where(#brx) dd { margin: 0; padding: 0; }
:where(#brx) ol, :where(#brx) ul { list-style: none; }
:where(#brx) h1, :where(#brx) h2, :where(#brx) h3 { font-weight: 700; line-height: 1.16; letter-spacing: -.045em; text-wrap: balance; color: var(--ink); }
:where(#brx) p, :where(#brx) h1, :where(#brx) h2, :where(#brx) h3, :where(#brx) summary, :where(#brx) li { word-break: keep-all; overflow-wrap: anywhere; }
:where(#brx) p { text-wrap: pretty; }
#brx a, #brx a:hover { color: inherit; text-decoration: none; }
#brx em { font-style: normal; }
#brx img { max-width: none; }
#brx :focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
#brx code { font-family: var(--mono); font-size: max(13px, .86em); padding: .08em .4em; border-radius: 4px; background: var(--paper2); color: var(--ink2); white-space: nowrap; }
#brx kbd { font-family: var(--mono); }
#brx .brx-wrap { width: min(100% - var(--pad) * 2, 1200px); margin-inline: auto; }
#brx .brx-eyebrow { display: flex; align-items: center; font: 600 14px/1.2 'Pretendard Variable', Pretendard, sans-serif; color: var(--mu); letter-spacing: 0; }
#brx .brx-eyebrow b { font: 500 14px/1.2 var(--mono); color: var(--blue); display: inline-flex; align-items: center; }
#brx .brx-hero .brx-eyebrow { font: 500 14px/1.2 var(--mono); }
#brx .brx-eyebrow b::after { content: ''; width: 28px; height: 1px; margin: 0 12px; background: var(--line2); }
#brx .brx-lead { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.75; color: var(--mu); }
#brx h1 em, #brx h2 em { color: var(--mu2); }
#brx .brx-note { font-size: 14px; color: var(--mu2); padding-bottom: 12px; }

/* shared pinned track and stage */
#brx .brx-track { position: relative; height: var(--len, 300svh); padding: 0; margin: 0; }
#brx .brx-stage { position: sticky; top: var(--brx-h); height: var(--stage-h); overflow: clip; isolation: isolate; display: flex; flex-direction: column; }
#brx .brx-hero { --len: 340svh; } #brx .brx-sync { --len: 340svh; } #brx .brx-devices { --len: 390svh; } #brx .brx-vs { --len: 290svh; }
#brx .brx-ua { --len: 280svh; } #brx .brx-feat { --len: 460svh; } #brx .brx-keys { --len: 380svh; }
#brx .brx-sync .brx-stage, #brx .brx-vs .brx-stage, #brx .brx-feat .brx-stage { background: var(--paper2); }
#brx .brx-track + .brx-track .brx-stage { border-top: 1px solid var(--line); }
#brx .brx-scene-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 56px; align-items: end; padding-top: clamp(18px, 3.4vh, 44px); }
#brx .brx-scene-head .brx-eyebrow { grid-column: 1 / -1; }
#brx .brx-scene-head h2 { font-size: clamp(28px, 3.9vw, 56px); }
#brx .brx-scene-head > p:not(.brx-eyebrow) { font-size: clamp(15px, 1.15vw, 17px); color: var(--mu); line-height: 1.7; }
#brx .brx-scene-head--row { grid-template-columns: 1fr auto; }
#brx .brx-meter { font: 500 18px var(--mono); color: var(--mu2); } #brx .brx-meter b { color: var(--ink); font-size: 40px; font-weight: 500; letter-spacing: -.04em; }

/* buttons */
#brx .brx-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 22px; border-radius: 8px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; transition: background .2s, transform .2s; }
#brx .brx-btn:hover { background: var(--blue); color: #fff; }
#brx .brx-btn:active { transform: translateY(1px); }
#brx .brx-btn svg { width: 20px; height: 20px; flex: none; }
#brx .brx-btn--big { min-height: 62px; padding: 0 28px; font-size: 17px; background: var(--paper); color: var(--ink); }
#brx .brx-btn--big:hover { background: #fff; color: var(--blue); }
#brx .brx-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink2); border-bottom: 1px solid var(--line2); padding-bottom: 2px; }
#brx .brx-link:hover { border-color: var(--ink); }
#brx .brx-link svg { width: 16px; height: 16px; }

/* ===== HERO ===== */
#brx .brx-hero .brx-stage { display: block; background: var(--paper); }
#brx .brx-grid-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(21, 21, 21, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 21, 21, .07) 1px, transparent 1px), linear-gradient(rgba(21, 21, 21, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 21, 21, .03) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; mask-image: linear-gradient(180deg, #000 55%, transparent 100%); transform: translateY(calc(var(--hp, 0) * -80px)); }
#brx .brx-hero-copy { position: absolute; left: 50%; top: clamp(20px, 5.5vh, 64px); transform: translate(-50%, calc(var(--hc, 0) * -60px)); opacity: calc(1 - var(--hc, 0)); z-index: 4; will-change: transform, opacity; }
#brx .brx-hero-copy > * { max-width: min(100%, 600px); }
#brx .brx-hero-copy h1 { font-size: clamp(46px, 6.6vw, 104px); line-height: 1.04; letter-spacing: -.06em; margin: 22px 0 24px; max-width: none; font-weight: 800; }
#brx .brx-hero-copy .brx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
#brx .brx-hero .brx-eyebrow { color: var(--ink2); }
#brx .brx-pills { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; font-size: 14px; font-weight: 500; color: var(--mu); }
#brx .brx-pills li + li::before { content: '/'; margin: 0 12px; color: var(--line2); }
#brx .brx-win { position: absolute; left: 0; top: 0; width: calc(var(--ww, 1440) * 1px); z-index: 3; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 60px 80px -40px rgba(21, 21, 21, .35); transform-origin: 50% 50%; will-change: transform; }
#brx .brx-win::after { content: ''; position: absolute; right: -30px; top: 50%; width: 12px; height: 180px; margin-top: -90px; border-radius: 4px; background: var(--ink); opacity: var(--hgrip, 0);
    background-image: repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, .45) 14px 16px); background-size: 4px 100%; background-position: center; background-repeat: no-repeat; }
#brx .brx-win-bar, #brx .brx-dev-bar, #brx .brx-kw-bar { display: flex; align-items: center; gap: 16px; background: var(--paper2); color: var(--mu); border-bottom: 1px solid var(--line); }
#brx .brx-win-bar { height: 44px; padding: 0 18px; border-radius: 10px 10px 0 0; }
#brx .brx-dots { display: inline-flex; gap: 7px; flex: none; } #brx .brx-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line2); }
#brx .brx-addr { flex: 1; max-width: 420px; padding: 5px 16px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#brx .brx-win-screen { position: relative; width: 100%; height: calc(var(--wh, 900) * 1px); overflow: hidden; border-radius: 0 0 10px 10px; background: #fbf6ee; }
#brx .brx-cq { container-type: inline-size; container-name: ms; }
/* dimension line: spans the window's on-screen width, labelled with its real px width */
#brx .brx-dimline { position: absolute; left: 0; top: 0; z-index: 5; width: var(--dlw, 0px); height: 18px; transform: translate(var(--dlx, 0px), var(--dly, 0px)); opacity: var(--hro, 0); border-inline: 1.5px solid var(--blue); pointer-events: none; }
#brx .brx-dimline::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--blue); }
#brx .brx-dimline span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 10px; background: var(--paper); font: 500 14px/1.2 var(--mono); color: var(--blue); white-space: nowrap; }
#brx .brx-dimline b { font-weight: 600; display: inline-block; min-width: 4ch; text-align: right; } #brx .brx-dimline em { color: var(--ink2); }
/* bottom ruler: 0 to 1440 px, the filled part is the current window width */
#brx .brx-ruler { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 46px; z-index: 2; border-top: 1px solid var(--ink); font: 500 14px/1 var(--mono); color: var(--mu);
    background-image: linear-gradient(90deg, var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--line2) 1px, transparent 1px); background-size: calc(100% / 9) 10px, calc(100% / 45) 5px; background-repeat: repeat-x; background-position: 0 0; }
#brx .brx-ruler i { position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--rw, 1) * 100%); background: var(--blue); opacity: var(--hro, 0); }
#brx .brx-ruler span { position: absolute; top: 22px; transform: translateX(-50%); }
#brx .brx-ruler span::before { content: ''; position: absolute; left: 50%; top: -22px; width: 1px; height: 16px; background: var(--ink); }
#brx .brx-ruler span:nth-of-type(1)::before { left: 0; } #brx .brx-ruler span:nth-of-type(5)::before { left: auto; right: 0; }
#brx .brx-ruler span:nth-of-type(1) { left: 0; transform: none; } #brx .brx-ruler span:nth-of-type(2) { left: 25%; } #brx .brx-ruler span:nth-of-type(3) { left: 53.333%; } #brx .brx-ruler span:nth-of-type(4) { left: 71.111%; } #brx .brx-ruler span:nth-of-type(5) { left: auto; right: 0; transform: none; }
#brx .brx-bps { position: absolute; right: var(--pad); top: 50%; z-index: 5; display: grid; gap: 6px; transform: translateY(-50%); opacity: var(--hro, 0); }
#brx .brx-bps li { font: 500 14px var(--mono); padding: 8px 12px; border-left: 2px solid var(--line2); color: var(--mu2); background: rgba(243, 241, 236, .9); transition: color .25s, border-color .25s, background .25s; white-space: nowrap; }
#brx .brx-bps li.is-on { color: var(--ink); border-color: var(--blue); background: #fff; }
#brx .brx-scrollhint { position: absolute; left: var(--pad); bottom: 70px; z-index: 5; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--mu); opacity: calc(1 - var(--hc, 0) * 3); }
#brx .brx-scrollhint i { width: 1px; height: 40px; background: var(--ink); animation: brx-drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes brx-drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ===== BAND ===== */
#brx .brx-band { position: relative; z-index: 2; overflow: hidden; padding: clamp(26px, 3.4vw, 40px) 0 clamp(18px, 2.6vw, 30px); background: var(--ink); color: var(--paper);
    background-image: linear-gradient(90deg, rgba(243, 241, 236, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 241, 236, .25) 1px, transparent 1px); background-size: 80px 14px, 16px 7px; background-repeat: repeat-x; }
#brx .brx-band-row { display: flex; width: max-content; white-space: nowrap; font: 500 clamp(40px, 7vw, 108px)/1.08 var(--mono); letter-spacing: -.05em; will-change: transform; transform: translate3d(var(--bx, 0), 0, 0) skewX(var(--bs, 0deg)); }
#brx .brx-band-row--out { font: 600 clamp(18px, 2.2vw, 30px)/1.6 var(--mono); letter-spacing: .02em; color: rgba(243, 241, 236, .5); }

/* ===== MINI SITE (fictional storefront; reflows with container queries) ===== */
#brx .ms { position: absolute; left: 0; top: 0; width: 100%; background: #fbf6ee; color: #1d1a16; text-align: left; font-family: 'Pretendard Variable', Pretendard, sans-serif; transform: translateY(calc(var(--sy, 0) * 1px)); will-change: transform; }
#brx .ms * { box-sizing: border-box; margin: 0; padding: 0; }
#brx .ms img { display: block; width: 100%; height: 100%; object-fit: cover; }
#brx .ms-nav { display: flex; align-items: center; gap: 36px; height: 84px; padding: 0 56px; background: #fbf6ee; }
#brx .ms-logo { font-size: 28px; font-weight: 800; letter-spacing: -.05em; } #brx .ms-logo i { font-style: normal; color: #e4572e; }
#brx .ms-nav nav { display: flex; gap: 30px; margin-left: auto; font-size: 16px; font-weight: 600; }
#brx .ms-bag { padding: 10px 18px; border-radius: 99px; background: #1d1a16; color: #fff; font-size: 14px; font-weight: 700; }
#brx .ms-burger { display: none; flex-direction: column; gap: 6px; width: 30px; margin-left: auto; } #brx .ms-burger i { display: block; height: 3px; border-radius: 3px; background: #1d1a16; }
#brx .ms-hero { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 580px; }
#brx .ms-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 56px; }
#brx .ms-hero-copy small { font-size: 14px; font-weight: 800; letter-spacing: .2em; color: #e4572e; }
#brx .ms-hero-copy h4 { font-size: 60px; line-height: 1.1; font-weight: 800; letter-spacing: -.06em; }
#brx .ms-hero-copy p { font-size: 20px; line-height: 1.6; color: #5b544b; max-width: 460px; }
#brx .ms-btn { align-self: flex-start; padding: 16px 30px; border-radius: 99px; background: #e4572e; color: #fff; font-size: 17px; font-weight: 800; }
#brx .ms-hero-img { overflow: hidden; }
#brx .ms-cards { padding: 72px 56px; }
#brx .ms-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px; } #brx .ms-title b { font-size: 34px; font-weight: 800; letter-spacing: -.05em; } #brx .ms-title span { font-size: 16px; font-weight: 700; color: #e4572e; }
#brx .ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
#brx .ms-card { display: flex; flex-direction: column; gap: 16px; } #brx .ms-card img { aspect-ratio: 1; border-radius: 22px; height: auto; }
#brx .ms-card div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } #brx .ms-card b { font-size: 21px; font-weight: 700; } #brx .ms-card span { font-size: 18px; color: #5b544b; font-weight: 600; white-space: nowrap; }
#brx .ms-story { padding: 96px 56px; background: #14382e; color: #f5ecd8; }
#brx .ms-story p { font-size: 46px; line-height: 1.3; font-weight: 700; letter-spacing: -.05em; max-width: 900px; }
#brx .ms-stats { display: flex; gap: 64px; margin-top: 48px; } #brx .ms-stats span { display: flex; flex-direction: column; font-size: 16px; color: #b9c9b4; } #brx .ms-stats b { font-size: 44px; font-weight: 800; color: #ffd68a; letter-spacing: -.04em; }
#brx .ms-news { display: flex; flex-direction: column; gap: 22px; padding: 80px 56px; background: #ffb59e; } #brx .ms-news > b { font-size: 36px; font-weight: 800; letter-spacing: -.05em; }
#brx .ms-form { display: flex; max-width: 560px; border-radius: 99px; background: #fff; padding: 8px; } #brx .ms-form span { flex: 1; padding: 14px 22px; color: #9a948b; font-size: 17px; } #brx .ms-form i { font-style: normal; padding: 14px 28px; border-radius: 99px; background: #1d1a16; color: #fff; font-weight: 800; font-size: 16px; }
#brx .ms-foot { display: flex; flex-wrap: wrap; gap: 28px; padding: 44px 56px 120px; background: #1d1a16; color: #cfc8bb; font-size: 16px; } #brx .ms-foot b { color: #fff; font-size: 22px; margin-right: auto; }
@container ms (max-width: 1100px) {
    #brx .ms-nav, #brx .ms-cards, #brx .ms-story, #brx .ms-news, #brx .ms-foot { padding-left: 40px; padding-right: 40px; }
    #brx .ms-hero-copy { padding: 40px; gap: 18px; } #brx .ms-hero-copy h4 { font-size: 46px; } #brx .ms-hero-copy p { font-size: 18px; }
    #brx .ms-story p { font-size: 38px; }
}
@container ms (max-width: 780px) {
    #brx .ms-nav nav, #brx .ms-bag { display: none; } #brx .ms-burger { display: flex; }
    #brx .ms-hero { grid-template-columns: 1fr; min-height: 0; } #brx .ms-hero-img { height: 360px; order: -1; }
    #brx .ms-grid { grid-template-columns: repeat(2, 1fr); } #brx .ms-card:nth-child(3) { grid-column: 1 / -1; flex-direction: row; align-items: center; } #brx .ms-card:nth-child(3) img { width: 40%; flex: none; } #brx .ms-card:nth-child(3) div { flex-direction: column; }
    #brx .ms-stats { gap: 36px; } #brx .ms-story p { font-size: 32px; }
}
@container ms (max-width: 520px) {
    #brx .ms-nav, #brx .ms-cards, #brx .ms-story, #brx .ms-news, #brx .ms-foot { padding-left: 22px; padding-right: 22px; }
    #brx .ms-nav { height: 70px; } #brx .ms-logo { font-size: 24px; }
    #brx .ms-hero-img { height: 250px; } #brx .ms-hero-copy { padding: 28px 22px 36px; } #brx .ms-hero-copy h4 { font-size: 34px; } #brx .ms-hero-copy p { font-size: 16px; }
    #brx .ms-cards { padding-top: 44px; padding-bottom: 44px; } #brx .ms-title b { font-size: 26px; }
    #brx .ms-grid { grid-template-columns: 1fr; gap: 18px; } #brx .ms-card, #brx .ms-card:nth-child(3) { flex-direction: row; align-items: center; gap: 16px; } #brx .ms-card img, #brx .ms-card:nth-child(3) img { width: 124px; flex: none; border-radius: 16px; } #brx .ms-card div, #brx .ms-card:nth-child(3) div { flex-direction: column; gap: 6px; }
    #brx .ms-story { padding: 56px 22px; } #brx .ms-story p { font-size: 26px; } #brx .ms-stats { flex-direction: column; gap: 18px; margin-top: 30px; } #brx .ms-stats b { font-size: 34px; }
    #brx .ms-news { padding: 48px 22px; } #brx .ms-news > b { font-size: 26px; } #brx .ms-foot { padding: 32px 22px 120px; gap: 18px; }
}

/* ===== DEVICE FRAMES (real px size, scaled by --s) ===== */
#brx .brx-devrow { --s: .3; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 54px); padding: 6px var(--pad) 0; }
#brx .brx-dev { --bz: 0; --bt: 0; --rad: 14; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; color: var(--mu); font-size: 14px; font-weight: 500; }
#brx .brx-dev--desktop { --bt: 44; --rad: 12; } #brx .brx-dev--tablet { --bz: 18; --rad: 40; } #brx .brx-dev--phone { --bz: 14; --rad: 56; }
#brx .brx-dev-wrap { width: calc((var(--w) + var(--bz) * 2) * var(--s) * 1px); height: calc((var(--h) + var(--bt) + var(--bz) * 2) * var(--s) * 1px); }
#brx .brx-dev-body { display: flex; flex-direction: column; width: calc((var(--w) + var(--bz) * 2) * 1px); height: calc((var(--h) + var(--bt) + var(--bz) * 2) * 1px); padding: calc(var(--bz) * 1px); background: #1b1b1b; border-radius: calc(var(--rad) * 1px); transform: scale(var(--s)); transform-origin: 0 0;
    box-shadow: 0 calc(30px / var(--s)) calc(40px / var(--s)) calc(-24px / var(--s)) rgba(21, 21, 21, .45); }
#brx .brx-dev--desktop .brx-dev-body { background: var(--paper2); box-shadow: 0 0 0 calc(1.5px / var(--s)) var(--ink), 0 calc(30px / var(--s)) calc(40px / var(--s)) calc(-24px / var(--s)) rgba(21, 21, 21, .35); }
#brx .brx-dev-bar { height: 44px; flex: none; padding: 0 18px; border-radius: 12px 12px 0 0; }
#brx .brx-dev-screen { position: relative; flex: none; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); overflow: hidden; background: #fbf6ee; border-radius: calc((var(--rad) - var(--bz)) * 1px); }
#brx .brx-dev--desktop .brx-dev-screen { border-radius: 0 0 12px 12px; }
#brx .brx-dev figcaption { font-variant-numeric: tabular-nums; width: 0; min-width: 100%; text-align: center; line-height: 1.3; }
#brx .brx-sync .brx-dev { opacity: calc(.2 + .8 * var(--en, 1)); transform: translateY(calc((1 - var(--en, 1)) * (50px + var(--i) * 30px))) scale(calc(.9 + .1 * var(--en, 1))); }
#brx .brx-syncbar { display: flex; align-items: center; gap: 18px; padding-block: 14px 8px; font: 500 14px var(--mono); color: var(--mu); }
#brx .brx-syncbar span { white-space: nowrap; color: var(--blue); } #brx .brx-syncbar ol { display: flex; gap: 16px; font-family: 'Pretendard Variable', Pretendard, sans-serif; }
#brx .brx-syncbar li { padding: 4px 0; border-bottom: 2px solid transparent; color: var(--mu2); transition: color .25s, border-color .25s; white-space: nowrap; } #brx .brx-syncbar li.is-on { color: var(--ink); border-color: var(--ink); font-weight: 600; }
#brx .brx-syncbar i { flex: 1; height: 2px; background: var(--line2); overflow: hidden; } #brx .brx-syncbar b { display: block; height: 100%; width: calc(var(--sp, 0) * 100%); background: var(--ink); }
#brx .brx-syncbar em { min-width: 4ch; text-align: right; color: var(--ink); }
#brx .brx-sync .brx-note, #brx .brx-devices .brx-note { text-align: right; padding-bottom: 8px; }

/* wireframe pages: a lo-fi storefront drawn in device units (--u = 4 device px), so every frame size keeps real proportions */
#brx .brx-wire { --u: calc(100cqw * 4 / 1440); position: absolute; inset: 0; container-type: inline-size; overflow: hidden; background: #fff; text-align: left; }
#brx .brx-wire--tablet { --u: calc(100cqw * 4 / 820); } #brx .brx-wire--phone { --u: calc(100cqw * 4 / 390); }
#brx .brx-wire i { display: block; font-style: normal; flex: none; }
#brx .w-page { --px: calc(var(--u) * 16); display: flex; flex-direction: column; min-height: 100%; padding: 0 var(--px); }
#brx .w-nav { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 18); margin: 0 calc(var(--px) * -1); padding: 0 var(--px); border-bottom: max(1px, calc(var(--u) * .3)) solid #ebe8e2; }
#brx .w-logo { width: calc(var(--u) * 26); height: calc(var(--u) * 5); border-radius: var(--u); background: #aaa49a; }
#brx .w-links { display: flex; gap: calc(var(--u) * 7); margin-left: auto; } #brx .w-links i { width: calc(var(--u) * 11); height: calc(var(--u) * 2.2); border-radius: var(--u); background: #cdc8be; }
#brx .w-cta { width: calc(var(--u) * 22); height: calc(var(--u) * 9); border-radius: calc(var(--u) * 4.5); background: #c3bdb2; }
#brx .w-burger { display: none; flex-direction: column; gap: calc(var(--u) * 1.3); margin-left: auto; } #brx .w-burger i { width: calc(var(--u) * 6); height: calc(var(--u) * .9); border-radius: 1px; background: #aaa49a; }
#brx .w-hero { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 14) 0 calc(var(--u) * 10); }
#brx .w-copy { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
#brx .w-kicker { width: calc(var(--u) * 20); height: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2); border-radius: var(--u); background: #c9c3b7; }
#brx .w-head { width: 92%; height: calc(var(--u) * 7); border-radius: var(--u); background: #aaa49a; } #brx .w-head--s { width: 62%; }
#brx .w-line { width: 96%; height: calc(var(--u) * 2.3); border-radius: var(--u); background: #dcd7ce; } #brx .w-line--m { width: 76%; } #brx .w-line--s { width: 48%; }
#brx .w-head + .w-line { margin-top: calc(var(--u) * 3); }
#brx .w-btn { width: calc(var(--u) * 30); height: calc(var(--u) * 10); margin-top: calc(var(--u) * 4); border-radius: calc(var(--u) * 5); background: #c3bdb2; }
#brx .w-img { border-radius: calc(var(--u) * 3); background: #efece6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3ac9f' stroke-width='1.6' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='2'/%3E%3Cpath d='M3 19l5.5-6 4 4 3.5-4 5 6z'/%3E%3C/svg%3E") center / calc(var(--u) * 9) no-repeat; }
#brx .w-img--hero { height: calc(var(--u) * 100); border-radius: calc(var(--u) * 4); background-size: calc(var(--u) * 16); }
#brx .w-sec { padding-top: calc(var(--u) * 6); }
#brx .w-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--u) * 6); }
#brx .w-title { width: calc(var(--u) * 42); height: calc(var(--u) * 5); border-radius: var(--u); background: #aaa49a; } #brx .w-more { width: calc(var(--u) * 14); height: calc(var(--u) * 2.3); border-radius: var(--u); background: #cdc8be; }
#brx .w-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 7); }
#brx .w-card { display: flex; flex-direction: column; gap: calc(var(--u) * 2.6); } #brx .w-card .w-img { aspect-ratio: 4 / 3; margin-bottom: calc(var(--u) * 1.5); }
#brx .w-band { display: flex; flex-direction: column; gap: calc(var(--u) * 3); margin: calc(var(--u) * 14) calc(var(--px) * -1) 0; padding: calc(var(--u) * 14) var(--px); background: #f4f2ed; } #brx .w-band .w-head { height: calc(var(--u) * 5); width: 40%; }
#brx .w-foot { flex: 1 0 auto; display: flex; align-items: flex-start; gap: calc(var(--u) * 8); min-height: calc(var(--u) * 24); margin: 0 calc(var(--px) * -1); padding: calc(var(--u) * 10) var(--px); background: #e6e2da; }
#brx .w-foot .w-logo { background: #bdb7ab; } #brx .w-foot .w-links { display: flex; } #brx .w-foot .w-links i { background: #d0cabf; }
/* tablet: same two-column hero, tighter */
#brx .brx-wire--tablet .w-page { --px: calc(var(--u) * 10); } #brx .brx-wire--tablet .w-nav { height: calc(var(--u) * 16); gap: calc(var(--u) * 6); } #brx .brx-wire--tablet .w-links i { width: calc(var(--u) * 9); }
#brx .brx-wire--tablet .w-hero { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); padding-top: calc(var(--u) * 10); } #brx .brx-wire--tablet .w-head { height: calc(var(--u) * 5.5); } #brx .brx-wire--tablet .w-img--hero { height: calc(var(--u) * 72); }
#brx .brx-wire--tablet .w-grid { gap: calc(var(--u) * 5); } #brx .brx-wire--tablet .w-card .w-img { aspect-ratio: 1; }
/* phone: hamburger, stacked hero with the image first, two-up cards */
#brx .brx-wire--phone .w-page { --px: calc(var(--u) * 5); } #brx .brx-wire--phone .w-nav { height: calc(var(--u) * 15); } #brx .brx-wire--phone .w-logo { width: calc(var(--u) * 22); height: calc(var(--u) * 4.5); }
#brx .brx-wire--phone .w-links, #brx .brx-wire--phone .w-cta { display: none; } #brx .brx-wire--phone .w-burger { display: flex; }
#brx .brx-wire--phone .w-hero { grid-template-columns: 1fr; gap: calc(var(--u) * 6); padding: calc(var(--u) * 4) 0 calc(var(--u) * 6); } #brx .brx-wire--phone .w-img--hero { order: -1; height: calc(var(--u) * 54); border-radius: calc(var(--u) * 3); background-size: calc(var(--u) * 12); }
#brx .brx-wire--phone .w-head { height: calc(var(--u) * 5); } #brx .brx-wire--phone .w-btn { width: calc(var(--u) * 28); height: calc(var(--u) * 9); }
#brx .brx-wire--phone .w-sec-head { margin-bottom: calc(var(--u) * 4); } #brx .brx-wire--phone .w-title { width: calc(var(--u) * 32); height: calc(var(--u) * 4); }
#brx .brx-wire--phone .w-grid { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); } #brx .brx-wire--phone .w-card:nth-child(3) { display: none; } #brx .brx-wire--phone .w-card .w-img { aspect-ratio: 1; background-size: calc(var(--u) * 7); }
#brx .brx-wire--phone .w-band { margin-top: calc(var(--u) * 8); padding-block: calc(var(--u) * 8); } #brx .brx-wire--phone .w-band .w-head { width: 70%; }
/* the custom device is the one being added: accent it */
#brx .is-custom .w-logo, #brx .is-custom .w-btn, #brx .is-custom .w-burger i { background: var(--blue); }
#brx .is-custom .w-img--hero { background-color: var(--blue-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-opacity='.55' stroke-width='1.6' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='2'/%3E%3Cpath d='M3 19l5.5-6 4 4 3.5-4 5 6z'/%3E%3C/svg%3E"); }

/* ===== DEVICES scene ===== */
#brx .brx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 18px 4px; }
#brx .brx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line2); background: var(--card); color: var(--mu); font-size: 14px; font-weight: 600; transition: background .3s, color .3s, border-color .3s; white-space: nowrap; }
#brx .brx-chip i { font-style: normal; color: var(--ink); font-weight: 700; width: 14px; text-align: center; } #brx .brx-chip small { display: none; }
#brx .brx-chip.is-on { color: var(--paper); border-color: var(--ink); background: var(--ink); } #brx .brx-chip.is-on i { font-size: 0; color: var(--paper); } #brx .brx-chip.is-on i::before { content: '✓'; font-size: 14px; }
#brx .brx-chip--custom { border-style: dashed; } #brx .brx-chip--custom.is-on { border-style: solid; border-color: var(--blue); background: var(--blue); color: #fff; } #brx .brx-chip--custom.is-on i { color: #fff; }
#brx .brx-count { margin-left: auto; font: 500 14px var(--mono); color: var(--mu); } #brx .brx-count em { font-size: 24px; color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
#brx .brx-devrow--pick { align-items: flex-end; gap: clamp(14px, 2.4vw, 40px); padding-bottom: 6px; }
#brx .brx-devrow--pick .brx-dev { --on: 0; --fx: 0; --fr: 0; opacity: var(--on); transform: translate(calc((1 - var(--on)) * var(--fx) * 1px), calc((1 - var(--on)) * 80px)) rotate(calc((1 - var(--on)) * var(--fr) * 1deg)) scale(calc(.7 + .3 * var(--on))); }
#brx .brx-devrow--pick .brx-dev:nth-child(1) { --fx: -200; --fr: -8; } #brx .brx-devrow--pick .brx-dev:nth-child(2) { --fx: -120; --fr: 6; } #brx .brx-devrow--pick .brx-dev:nth-child(3) { --fx: 140; --fr: -5; }
#brx .brx-devrow--pick .brx-dev:nth-child(4) { --fx: -160; --fr: 5; } #brx .brx-devrow--pick .brx-dev:nth-child(5) { --fx: 240; --fr: -4; } #brx .brx-devrow--pick .brx-dev:nth-child(6) { --fx: 60; --fr: 8; }
#brx .brx-dev.is-custom .brx-dev-body { outline: calc(2px / var(--s)) dashed var(--blue); outline-offset: calc(8px / var(--s)); }
#brx .brx-dim { display: flex; align-items: center; gap: 8px; width: 100%; font: 600 14px var(--mono); color: var(--ink); } #brx .brx-dim i { flex: 1; height: 1px; background: var(--ink); position: relative; opacity: .7; } #brx .brx-dim i::before { content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--ink); } #brx .brx-dim i:first-child::before { left: 0; } #brx .brx-dim i:last-child::before { right: 0; }
#brx .is-custom .brx-dim { color: var(--blue); } #brx .is-custom .brx-dim i, #brx .is-custom .brx-dim i::before { background: var(--blue); }
#brx .brx-custom { display: flex; align-items: center; justify-content: center; gap: 10px; padding-block: 8px 12px; opacity: var(--cu, 0); transform: translateY(calc((1 - var(--cu, 0)) * 16px)); font-size: 14px; color: var(--mu); font-weight: 600; }
#brx .brx-input { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line2); background: #fff; } #brx .brx-input small { font-size: 14px; } #brx .brx-input b { color: var(--ink); font: 600 15px var(--mono); min-width: 3ch; }
#brx .brx-add { padding: 8px 16px; border-radius: 6px; background: var(--blue); color: #fff; font-weight: 700; }

/* ===== VS ===== */
#brx .brx-vs-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; padding-block: 20px 22px; }
#brx .brx-vs-card { display: flex; flex-direction: column; min-height: 0; border-radius: 10px; border: 1px solid var(--line2); background: var(--card); overflow: hidden; }
#brx .brx-vs-card--new { border: 1.5px solid var(--ink); }
#brx .brx-vs-card header, #brx .brx-vs-card footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; font-size: 14px; color: var(--mu); }
#brx .brx-vs-card header { border-bottom: 1px solid var(--line); } #brx .brx-vs-card footer { border-top: 1px solid var(--line); }
#brx .brx-vs-card header b { color: var(--ink); font-size: 16px; }
#brx .brx-vs-card header span { padding: 4px 10px; border-radius: 4px; border: 1px solid var(--line2); font-size: 14px; font-weight: 600; color: var(--mu); } #brx .brx-vs-card--new header span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#brx .brx-vs-view { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 20px; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 16px 16px; }
#brx .brx-vs-frame, #brx .brx-vs-mini { position: relative; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 18px 30px -18px rgba(21, 21, 21, .4); flex: none; }
#brx .brx-vs-frame { width: calc(var(--fw, 100) * 1px); height: calc(var(--fh, 200) * 1px); transition: width .45s cubic-bezier(.3, .8, .3, 1), height .45s cubic-bezier(.3, .8, .3, 1); }
#brx .brx-vs-frame .brx-wire, #brx .brx-vs-mini .brx-wire { border-radius: 8px; overflow: hidden; }
#brx .brx-vs-frame em, #brx .brx-vs-mini em { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; text-align: center; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--mu); white-space: nowrap; }
#brx .brx-vs-view--all { align-items: center; gap: clamp(10px, 1.6vw, 22px); }
#brx .brx-vs-mini { width: calc(var(--w) * var(--vs, .1) * 1px); height: calc(var(--h) * var(--vs, .1) * 1px); }
#brx .brx-vs-card footer i { flex: 1; height: 2px; background: var(--line2); overflow: hidden; max-width: 180px; } #brx .brx-vs-card footer b { display: block; height: 100%; background: var(--ink2); transition: width .4s; } #brx .brx-vs-card--new footer b { background: var(--blue); }
#brx .brx-vs-card footer span { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

/* ===== UA ===== */
#brx .brx-ua-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 440px); gap: clamp(24px, 5vw, 80px); align-items: center; }
#brx .brx-ua-layout .brx-scene-head { display: block; padding-top: 0; } #brx .brx-ua-layout .brx-scene-head h2 { margin: 18px 0 16px; } #brx .brx-ua-layout .brx-scene-head > p:not(.brx-eyebrow) { max-width: 520px; }
#brx .brx-ua-list { display: grid; gap: 10px; margin-top: 26px; }
#brx .brx-ua-list > div { padding: 16px 20px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); opacity: .5; transition: opacity .3s, border-color .3s, box-shadow .3s; }
#brx .brx-ua-list > div.is-on { opacity: 1; border-color: var(--ink); box-shadow: inset 3px 0 0 var(--blue); }
#brx .brx-ua-list dt { font-weight: 700; font-size: 15px; } #brx .brx-ua-list dd { margin-top: 4px; font-size: 14px; color: var(--mu); } #brx .brx-ua-list code { display: block; margin-top: 10px; padding: 8px 12px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
#brx .brx-ua-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
#brx .brx-phone { height: min(calc(var(--stage-h) - 96px), 740px); aspect-ratio: 390 / 844; padding: 11px; border-radius: 46px; background: #1b1b1b; box-shadow: 0 40px 50px -30px rgba(21, 21, 21, .5); transform: rotate(calc((.5 - var(--cutv, .5)) * 4deg)); transition: transform .2s; }
#brx .brx-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: #fbf6ee; }
#brx .brx-ua-page { position: absolute; inset: 0; color: #1d1a16; }
#brx .brx-ua-page--pc { width: 270%; height: 270%; transform: scale(.37037); transform-origin: 0 0; clip-path: inset(0 calc((1 - var(--cutv, .5)) * 100%) 0 0); background: #fbf6ee; padding: 0; }
#brx .brx-ua-page--pc .u-nav { display: flex; align-items: center; gap: 36px; height: 84px; padding: 0 56px; } #brx .u-nav b { font-size: 28px; font-weight: 800; margin-right: auto; } #brx .u-nav i { width: 70px; height: 12px; border-radius: 6px; background: #d8d0c3; }
#brx .u-hero { display: grid; grid-template-columns: 1fr 1.2fr; height: 520px; } #brx .u-hero div:first-child { background: #f1e6d3; } #brx .u-hero div:last-child { background: #b9805a; }
#brx .u-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px 56px 0; } #brx .u-cols i { display: block; aspect-ratio: 1; border-radius: 18px; background: #eadfce; }
#brx .u-cut { position: absolute; left: 56px; bottom: 36px; padding: 10px 20px; border-radius: 99px; background: #e4572e; color: #fff; font: 700 22px Pretendard, sans-serif; }
#brx .brx-ua-page--mo { background: #fbf6ee; clip-path: inset(0 0 0 calc(var(--cutv, .5) * 100%)); display: flex; flex-direction: column; padding: 0; }
#brx .m-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 14px; font-size: 17px; } #brx .m-top b { font-weight: 800; letter-spacing: -.05em; }
#brx .m-hero { position: relative; flex: none; margin: 0 14px; height: 34%; border-radius: 20px; overflow: hidden; } #brx .m-hero img { width: 100%; height: 100%; object-fit: cover; } #brx .m-hero strong { position: absolute; left: 14px; bottom: 12px; font-size: 21px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
#brx .m-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; } #brx .m-cards > img { width: 100%; min-width: 0; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; } #brx .m-cards { min-height: 0; overflow: hidden; }
#brx .m-banner { margin: 2px 14px 0; padding: 16px 18px; border-radius: 18px; background: #ffb59e; color: #1d1a16; display: flex; flex-direction: column; gap: 2px; font-size: 14px; } #brx .m-banner b { font-size: 19px; letter-spacing: -.04em; }
#brx .m-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 14px 0 20px; background: #fff; border-top: 1px solid #eadfce; } #brx .m-tabs i { width: 26px; height: 26px; border-radius: 8px; background: #d8d0c3; } #brx .m-tabs i:first-child { background: #e4572e; }
#brx .brx-cut { position: absolute; top: 0; bottom: 0; left: calc(var(--cutv, .5) * 100%); width: 0; z-index: 3; } #brx .brx-cut::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--blue); }
#brx .brx-cut span { position: absolute; top: 50%; left: -19px; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); } #brx .brx-cut span::before { content: '↔'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--blue); font-weight: 700; }

/* ===== FEATURES (horizontal) ===== */
#brx .brx-hscroll { flex: 1; min-height: 0; display: flex; align-items: center; overflow: hidden; padding-block: 14px; }
#brx .brx-htrack { display: flex; gap: clamp(16px, 2vw, 28px); padding-inline: max(var(--pad), calc((100vw - 1200px) / 2)); width: max-content; height: 100%; max-height: 560px; transform: translate3d(var(--hx, 0px), 0, 0); will-change: transform; }
#brx .brx-fcard { --k: 0; position: relative; display: flex; flex-direction: column; width: clamp(290px, 31vw, 420px); height: 100%; padding: clamp(18px, 2vw, 26px); border-radius: 12px; border: 1px solid var(--line2); background: var(--card); transform: scale(calc(.92 + .08 * var(--k))); opacity: calc(.5 + .5 * var(--k)); transform-origin: 50% 60%; overflow: hidden; transition: border-color .3s; }
#brx .brx-fcard.is-on { border-color: var(--ink); }
#brx .brx-fnum { position: absolute; left: clamp(18px, 2vw, 26px); top: clamp(16px, 1.8vw, 22px); font: 500 14px/1 var(--mono); color: var(--mu); }
#brx .brx-fnum::before { content: 'F—'; color: var(--mu2); } #brx .is-on .brx-fnum { color: var(--blue); }
#brx .brx-fcard h3 { font-size: clamp(20px, 1.8vw, 25px); margin: auto 0 10px; padding-top: 18px; } #brx .brx-fcard p { font-size: 15px; line-height: 1.7; color: var(--mu); } #brx .brx-fcard p strong { color: var(--ink); font-weight: 700; } #brx .brx-fcard p code { color: var(--blue); background: var(--blue-soft); }
#brx .brx-fvis { position: relative; flex: 1 1 42%; min-height: 120px; margin-top: 30px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 10px; border-radius: 8px; border: 1px solid var(--line); background-color: var(--paper); background-image: linear-gradient(rgba(21, 21, 21, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 21, 21, .05) 1px, transparent 1px); background-size: 16px 16px; overflow: hidden; }
#brx .f-chip { padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line2); font-size: 14px; font-weight: 600; color: var(--ink2); background: #fff; transition: background .4s, color .4s, transform .4s; transition-delay: calc(var(--d, 0) * 1s); }
#brx .f-chip:nth-child(1) { --d: 0; } #brx .f-chip:nth-child(2) { --d: .1; } #brx .f-chip:nth-child(3) { --d: .2; }
#brx .is-on .f-chip:nth-child(1) { background: var(--ink); color: var(--paper); border-color: var(--ink); } #brx .f-chip--star { border-style: dashed; } #brx .is-on .f-chip--star { background: var(--blue); border-color: var(--blue); color: #fff; border-style: solid; transform: translateY(-3px); transition-delay: .35s; }
#brx .f-box { min-width: 76px; padding: 10px 14px; border-radius: 6px; border: 1.5px solid var(--line2); background: #fff; text-align: center; transition: border-color .4s; } #brx .f-box b { font: 600 24px var(--mono); } #brx .is-on .f-box { border-color: var(--ink); } #brx .is-on .f-box:nth-child(3) b::after { content: '|'; animation: brx-blink 1s steps(1) infinite; color: var(--blue); font-weight: 400; }
@keyframes brx-blink { 50% { opacity: 0; } }
#brx .f-x { color: var(--mu); font-size: 22px; } #brx .f-plus { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 20px; transition: background .4s; } #brx .is-on .f-plus { background: var(--blue); }
#brx .f-phone { width: 62px; height: 112px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; display: grid; place-items: center; transform: rotate(calc(var(--k) * -90deg)); } #brx .f-phone i { width: 70%; height: 70%; border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(29, 78, 216, .3) 0 2px, transparent 2px 8px), var(--blue-soft); }
#brx .f-arrow { width: 34px; height: 34px; color: var(--blue); transform: rotate(calc(var(--k) * 270deg)); } #brx .f-arrow svg { width: 100%; height: 100%; }
#brx .f-sq { border-radius: 4px; border: 2px solid var(--ink); background: #fff; transform: scale(calc(.55 + .45 * var(--k))); transition: transform .1s linear; } #brx .f-sq--1 { width: 34px; height: 60px; } #brx .f-sq--2 { width: 64px; height: 84px; } #brx .f-sq--3 { width: 110px; height: 70px; }
#brx .f-slider { position: relative; flex-basis: 100%; height: 2px; max-width: 70%; margin-top: 18px; background: var(--line2); } #brx .f-slider i { position: absolute; top: -8px; left: calc(var(--k) * 100%); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); } #brx .f-slider b { position: absolute; right: 0; top: -28px; font: 600 14px var(--mono); color: var(--blue); }
#brx .f-shot { width: 84px; height: 124px; overflow: hidden; border: 2px solid var(--ink); border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; padding: 6px; } #brx .f-shot i { flex: none; height: 52px; border-radius: 4px; background: #e6e2da; transform: translateY(calc((1 - var(--k)) * -70px)); } #brx .f-shot i:nth-child(even) { background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 8px), #f4f2ee; }
#brx .f-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } #brx .is-on .f-flash { animation: brx-flash .9s ease-out .15s 1 both; } @keyframes brx-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
#brx .f-lock { width: 46px; height: 46px; color: var(--ink); } #brx .is-on .f-lock { animation: brx-shake .6s ease-in-out 1; } @keyframes brx-shake { 25% { transform: rotate(-14deg); } 55% { transform: rotate(12deg); } 80% { transform: rotate(-5deg); } }
#brx .brx-fvis code { font-size: 13px; background: #fff; border: 1px solid var(--line); transition: opacity .4s; } #brx .is-on .brx-fvis code { text-decoration: line-through; opacity: .55; }
#brx .f-page { display: flex; gap: 6px; width: 90px; height: 54px; padding: 8px; border-radius: 6px; background: #fff; border: 1.5px solid var(--ink); opacity: var(--k); transform: scale(calc(.6 + .4 * var(--k))); } #brx .f-page i { flex: 1; border-radius: 3px; background: var(--blue-soft); border: 1px solid rgba(29, 78, 216, .35); }
#brx .brx-fvis kbd, #brx .brx-caps kbd { border-radius: 8px; font-weight: 600; color: var(--ink); background: #fff; box-shadow: 0 3px 0 var(--line2), 0 0 0 1px var(--line2); transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
#brx .brx-fvis kbd { padding: 12px 18px; font-size: 22px; } #brx .is-on .brx-fvis kbd { transform: translateY(2px); background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 var(--ink), 0 0 0 1px var(--ink); }
#brx .f-ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 1.5px solid var(--blue); opacity: 0; } #brx .is-on .f-ring { animation: brx-ring 1.6s ease-out infinite; } @keyframes brx-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
#brx .brx-hbar { height: 2px; margin: 0 var(--pad) 18px; background: var(--line2); overflow: hidden; } #brx .brx-hbar b { display: block; height: 100%; width: calc(var(--fp, 0) * 100%); background: var(--ink); }

/* ===== KEYS ===== */
#brx .brx-keys-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
#brx .brx-keys-layout .brx-scene-head { display: block; padding-top: 0; } #brx .brx-keys-layout .brx-scene-head h2 { margin-top: 16px; }
#brx .brx-keylist { display: grid; gap: 8px; margin-top: clamp(16px, 3vh, 32px); }
#brx .brx-keylist li { display: flex; align-items: center; gap: 18px; padding: 13px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); opacity: .5; transition: opacity .35s, border-color .35s, box-shadow .35s, transform .35s; }
#brx .brx-caps { display: flex; align-items: center; gap: 6px; flex: none; min-width: 168px; } #brx .brx-caps small { margin-left: 6px; font-size: 14px; color: var(--mu); white-space: nowrap; }
#brx .brx-caps kbd { padding: 7px 12px; font-size: 15px; }
#brx .brx-keylist b { font-size: 16px; } #brx .brx-keylist p { font-size: 14px; color: var(--mu); line-height: 1.5; }
#brx [data-step="0"] [data-key-row="0"], #brx [data-step="1"] [data-key-row="1"], #brx [data-step="2"] [data-key-row="2"], #brx [data-step="3"] [data-key-row="3"] { opacity: 1; border-color: var(--ink); box-shadow: inset 3px 0 0 var(--blue); transform: translateX(8px); }
#brx [data-step="0"] [data-key-row="0"] kbd, #brx [data-step="1"] [data-key-row="1"] kbd, #brx [data-step="2"] [data-key-row="2"] kbd, #brx [data-step="3"] [data-key-row="3"] kbd { transform: translateY(2px); background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 var(--ink), 0 0 0 1px var(--ink); }
#brx .brx-keytip { margin-top: 18px; font-size: 14px; color: var(--mu); }
#brx .brx-keys-win { position: relative; width: 100%; max-height: calc(var(--stage-h) - 60px); aspect-ratio: 16 / 10; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1.5px var(--ink), 0 40px 50px -34px rgba(21, 21, 21, .45); justify-self: end; }
#brx .brx-kw-bar { height: 36px; padding: 0 14px; font-size: 13px; } #brx .brx-kw-bar .brx-addr { font-size: 13px; padding: 3px 12px; }
#brx .brx-kw-page { position: absolute; inset: 36px 0 0 0; }
#brx .brx-ov { --open: 0; position: absolute; inset: 36px 0 0 0; background: rgba(233, 230, 223, .96); opacity: var(--open); transform: scale(calc(.97 + .03 * var(--open))); transition: opacity .45s, transform .45s; pointer-events: none; }
#brx [data-step="0"] .brx-ov, #brx [data-step="1"] .brx-ov, #brx [data-step="3"] .brx-ov { --open: 1; }
#brx .brx-ov-tool { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; font-size: 13px; color: var(--mu); border-bottom: 1px solid var(--line2); background: #fff; }
#brx .brx-ov-tool b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); margin-right: 8px; } #brx .brx-ov-tool b svg { width: 16px; height: 16px; } #brx .brx-ov-tool span { padding: 3px 9px; border-radius: 4px; border: 1px solid var(--line2); } #brx .brx-ov-tool i { margin-left: auto; font-style: normal; color: var(--blue); font-weight: 700; }
#brx .brx-ov-frames { position: absolute; inset: 54px 16px 50px; display: flex; align-items: flex-end; justify-content: center; gap: 2.4%; }
#brx .brx-ov-f { position: relative; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); transform: translateY(calc((1 - var(--open, 0)) * 40px)); transition: transform .55s cubic-bezier(.3, .9, .3, 1); }
#brx .brx-ov-f--phone { height: 100%; aspect-ratio: 390 / 844; max-height: 100%; width: auto; transition-delay: .05s; } #brx .brx-ov-f--tablet { height: 84%; aspect-ratio: 820 / 1180; transition-delay: .12s; } #brx .brx-ov-f--desktop { height: 62%; aspect-ratio: 1440 / 900; transition-delay: .2s; }
#brx [data-step="3"] .brx-ov-f { animation: brx-refresh 1.8s ease-in-out infinite; } @keyframes brx-refresh { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#brx .brx-spin { position: absolute; left: 50%; top: 40%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--blue); opacity: 0; transition: opacity .3s; } #brx [data-step="3"] .brx-spin { opacity: 1; animation: brx-rot .9s linear infinite; } @keyframes brx-rot { to { transform: rotate(360deg); } }
#brx .brx-kw-label { position: absolute; left: 14px; bottom: 14px; z-index: 4; padding: 8px 14px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; }

/* ===== INSTALL / CTA / FAQ ===== */
#brx .brx-install { position: relative; padding: clamp(80px, 11vw, 160px) 0 clamp(60px, 8vw, 110px); background: var(--paper); border-top: 1px solid var(--line); overflow: clip; }
#brx .brx-install h2 { font-size: clamp(38px, 5.6vw, 84px); letter-spacing: -.06em; margin: 22px 0 22px; line-height: 1.06; font-weight: 800; }
#brx .brx-install .brx-lead { max-width: 560px; }
#brx .brx-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: clamp(32px, 5vw, 64px); }
#brx .brx-steps li { display: flex; gap: 24px; align-items: flex-start; padding: clamp(22px, 2.6vw, 32px) 0; border-top: 2px solid var(--ink); }
#brx .brx-steps li > b { font: 500 clamp(40px, 4.4vw, 64px)/.9 var(--mono); letter-spacing: -.06em; color: var(--blue); }
#brx .brx-steps h3, #brx .brx-notice h3 { font-size: clamp(19px, 1.7vw, 23px); margin-bottom: 8px; } #brx .brx-steps p, #brx .brx-notice p { font-size: 15px; line-height: 1.75; color: var(--mu); } #brx .brx-steps strong, #brx .brx-notice strong { color: var(--ink); } #brx .brx-steps p a { color: var(--blue); border-bottom: 1px solid currentColor; font-weight: 600; }
#brx .brx-notice { display: flex; gap: 18px; align-items: flex-start; margin-top: 12px; padding: 22px 26px; border-radius: 8px; border: 1px solid var(--line2); background: var(--card); box-shadow: inset 3px 0 0 var(--ink); } #brx .brx-notice > span { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--paper2); color: var(--ink); } #brx .brx-notice > span svg { width: 20px; height: 20px; }
#brx .brx-cta { --cta: 0; position: relative; margin-top: clamp(48px, 7vw, 100px); padding: clamp(48px, 7vw, 100px) clamp(24px, 5vw, 80px) clamp(40px, 6vw, 84px); border-radius: calc(36px - var(--cta) * 24px); background: var(--ink); color: var(--paper); overflow: hidden; text-align: center; transform: scale(calc(.94 + var(--cta) * .06));
    background-image: linear-gradient(90deg, rgba(243, 241, 236, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 241, 236, .22) 1px, transparent 1px); background-size: 80px 16px, 16px 8px; background-repeat: repeat-x; }
#brx .brx-cta h2 { position: relative; margin: 0 auto 18px; font-size: clamp(30px, 4.2vw, 60px); max-width: 14em; color: var(--paper); } #brx .brx-cta p { position: relative; max-width: 560px; margin: 0 auto 32px; font-size: clamp(15px, 1.3vw, 18px); color: rgba(243, 241, 236, .72); } #brx .brx-cta p strong { color: var(--paper); } #brx .brx-cta .brx-btn { position: relative; }
#brx .brx-faq { padding: clamp(60px, 9vw, 130px) 0; background: var(--card); border-top: 1px solid var(--line); }
#brx .brx-faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
#brx .brx-faq h2 { font-size: clamp(32px, 4vw, 58px); margin: 18px 0 14px; } #brx .brx-faq-layout > div:first-child { position: sticky; top: calc(var(--brx-h) + 30px); }
#brx .brx-faq-list details { border-bottom: 1px solid var(--line2); } #brx .brx-faq-list details:first-child { border-top: 2px solid var(--ink); }
#brx .brx-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; cursor: pointer; list-style: none; font-size: clamp(16px, 1.45vw, 19px); font-weight: 700; } #brx .brx-faq-list summary::-webkit-details-marker { display: none; }
#brx .brx-faq-list summary i { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line2); font-style: normal; font-size: 20px; color: var(--ink); transition: transform .3s, background .3s, color .3s; } #brx .brx-faq-list details[open] summary i { transform: rotate(45deg); background: var(--ink); color: var(--paper); border-color: var(--ink); }
#brx .brx-faq-list summary:hover span { color: var(--blue); }
#brx .brx-faq-list details p { padding: 0 52px 24px 4px; font-size: 15px; line-height: 1.8; color: var(--mu); } #brx .brx-faq-list p strong { color: var(--ink); } #brx .brx-faq-list p code { color: var(--blue); background: var(--blue-soft); }
#brx.is-js .brx-reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
#brx.is-js .brx-reveal.is-in { opacity: 1; transform: none; }
#brx.is-js .brx-cta.brx-reveal { transition: opacity .8s; transform: scale(calc(.94 + var(--cta) * .06)); } #brx.is-js .brx-cta.brx-reveal.is-in { transform: scale(calc(.94 + var(--cta) * .06)); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
    #brx .brx-bps { display: none; }
    #brx .brx-vs-grid { grid-template-columns: 1fr 1.1fr; }
    #brx .brx-keys-layout { grid-template-columns: 1fr; align-content: center; gap: 18px; } #brx .brx-keys-win { justify-self: stretch; max-height: 36vh; } #brx .brx-keys-layout .brx-scene-head h2 { font-size: clamp(26px, 6vw, 40px); } #brx .brx-keylist { margin-top: 12px; gap: 6px; } #brx .brx-keylist li { padding: 9px 14px; } #brx .brx-keylist p, #brx .brx-keytip { display: none; }
    #brx .brx-ua-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); } #brx .brx-phone { height: min(calc(var(--stage-h) - 96px), 600px); }
}
@media (max-width: 720px) {
    #brx { --brx-bar: 84px; }
    #brx .brx-scene-head { grid-template-columns: 1fr; gap: 10px; } #brx .brx-scene-head > p:not(.brx-eyebrow) { display: none; } #brx .brx-scene-head h2 { font-size: clamp(26px, 7.4vw, 36px); }
    #brx .brx-hero-copy .brx-lead { font-size: 15px; line-height: 1.65; } #brx .brx-hero-copy h1 { margin: 14px 0 12px; } #brx .brx-hero-copy .brx-actions { margin-top: 16px; } #brx .brx-pills { display: none; }
    #brx .brx-btn { min-height: 50px; padding: 0 18px; font-size: 15px; gap: 10px; }
    #brx .brx-scrollhint { display: none; } #brx .brx-ruler { height: 38px; } #brx .brx-ruler span { top: 18px; font-size: 13px; } #brx .brx-ruler span:nth-of-type(3) { display: none; }
    #brx .brx-sync .brx-dev--desktop { display: none; }
    #brx .brx-devrow--pick { flex-wrap: wrap; align-content: center; row-gap: 4px; gap: 14px; } #brx .brx-devrow--pick .brx-dev:nth-child(6) { order: 1; } #brx .brx-devrow--pick .brx-dev:nth-child(4), #brx .brx-devrow--pick .brx-dev:nth-child(5) { order: 2; }
    #brx .brx-devrow--pick .brx-dev--phone figcaption { display: none; }
    #brx .brx-dev figcaption { font-size: 13px; } #brx .brx-dim { display: none; } #brx .brx-count { margin: 2px 0 0 auto; } #brx .brx-count em { font-size: 18px; } #brx .brx-input, #brx .brx-add { white-space: nowrap; } #brx .brx-custom { gap: 6px; padding-block: 4px 8px; }
    #brx .brx-ov-tool span:nth-of-type(n+2) { display: none; } #brx .brx-ov-tool { white-space: nowrap; overflow: hidden; }
    #brx .brx-syncbar ol { display: none; } #brx .brx-syncbar { padding-top: 6px; }
    #brx .brx-vs-grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding-block: 10px; } #brx .brx-vs-view { padding: 4px 12px 24px; } #brx .brx-vs-card header, #brx .brx-vs-card footer { padding: 8px 14px; } #brx .brx-vs-mini em { display: none; }
    #brx .brx-ua-layout { grid-template-columns: 1fr; gap: 10px; align-content: start; padding-top: 10px; } #brx .brx-ua-layout .brx-scene-head > p:not(.brx-eyebrow) { display: none; } #brx .brx-ua-layout .brx-scene-head h2 { margin: 10px 0 0; } #brx .brx-ua-list { display: none; } #brx .brx-phone { height: min(calc(var(--stage-h) - 150px), 560px); }
    #brx .brx-chips { padding-top: 8px; gap: 5px; } #brx .brx-chip { padding: 4px 8px; font-size: 13px; gap: 4px; } #brx .brx-chip small { display: none; }
    #brx .brx-feat .brx-meter b { font-size: 28px; } #brx .brx-fcard { width: min(80vw, 330px); } #brx .brx-fcard p { font-size: 14px; line-height: 1.6; } #brx .brx-fvis { min-height: 90px; margin-top: 30px; }
    #brx .brx-steps { grid-template-columns: 1fr; } #brx .brx-steps li { gap: 16px; } #brx .brx-faq-layout { grid-template-columns: 1fr; } #brx .brx-faq-layout > div:first-child { position: static; } #brx .brx-faq-list details p { padding-right: 8px; }
    #brx .brx-cta { border-radius: calc(24px - var(--cta) * 14px); }
}
@media (max-height: 640px) and (min-width: 721px) { #brx .brx-scene-head > p:not(.brx-eyebrow) { display: none; } }

/* ===== STATIC fallback: short screens, reduced motion ===== */
#brx.brx-static .brx-track { height: auto; padding: clamp(48px, 7vw, 96px) 0; }
#brx.brx-static .brx-stage { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; }
#brx.brx-static .brx-hero { padding-top: 0; } #brx.brx-static .brx-hero .brx-stage { min-height: 720px; padding: 40px 0; }
#brx.brx-static .brx-hero-copy { position: relative; left: auto; top: auto; transform: none; opacity: 1; width: min(100% - var(--pad) * 2, 1200px); margin: 24px auto 0; }
#brx.brx-static .brx-win { position: relative; margin: 36px auto 0; }
#brx.brx-static .brx-bps, #brx.brx-static .brx-dimline, #brx.brx-static .brx-ruler, #brx.brx-static .brx-scrollhint { display: none; }
#brx.brx-static .brx-devrow { padding-block: 28px; flex-wrap: wrap; min-height: 320px; align-items: flex-end; }
#brx.brx-static .brx-vs-grid { grid-template-columns: 1fr; } #brx.brx-static .brx-vs-view { min-height: 260px; padding-bottom: 30px; }
#brx.brx-static .brx-ua-layout, #brx.brx-static .brx-keys-layout { padding-block: 24px; } #brx.brx-static .brx-ua-stage { min-height: 520px; } #brx.brx-static .brx-phone { height: 520px; }
#brx.brx-static .brx-hscroll { overflow-x: auto; scroll-snap-type: x proximity; } #brx.brx-static .brx-htrack { transform: none; height: 460px; } #brx.brx-static .brx-fcard { scroll-snap-align: start; opacity: 1; transform: none; } #brx.brx-static .brx-hbar { display: none; }
#brx.brx-static .brx-keylist li { opacity: 1; } #brx.brx-static .brx-keys-win { max-height: none; } #brx.brx-static .brx-scene-head > p:not(.brx-eyebrow) { display: block; } #brx.brx-static .brx-ua-list > div { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    #brx .brx-scrollhint i { animation: none; }
    #brx.is-js .brx-reveal { opacity: 1; transform: none; transition: none; }
}