:root{--bgr-ink: #15171e;--bgr-muted: #5b6170;--bgr-line: #e4e2dd;--bgr-paper: #ffffff;--bgr-wash: #f7f5f1;--bgr-accent: #d9411e;--bgr-accent-dk: #b2330f;--bgr-accent-soft: #fdeee8;--bgr-stage: #1c1f27;--bgr-ok: #1d7a55;--bgr-err: #b42318;--bgr-radius: 18px;--bgr-shadow: 0 1px 2px rgb(21 23 30 / 6%), 0 12px 32px rgb(21 23 30 / 8%);--primary: #d9411e;--primary-dark: #b2330f;--border: #e4e2dd;--surface: #ffffff;--shadow-soft: 0 10px 30px rgb(21 23 30 / 8%);--surface-muted: #f7f5f1;--text-main: #15171e;--text-muted: #5b6170;}
.bgr-page{color: var(--bgr-ink);padding-bottom: 3rem;}
.bgr-page [hidden]{display: none !important;}
.bgr-lede{font-size: 1.08rem;line-height: 1.65;color: var(--bgr-muted);margin: 0 0 1.25rem;}
.bgr-specs{list-style: none;padding: 0;margin: 0 0 1.1rem;display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));border: 1px solid var(--bgr-line);border-radius: 14px;background: var(--bgr-paper);overflow: hidden;}
.bgr-specs li{padding: 0.85rem 1rem;border-left: 1px solid var(--bgr-line);display: flex;flex-direction: column;gap: 0.15rem;}
.bgr-specs li:first-child{border-left: 0;}
.bgr-specs strong{font-size: 1.2rem;font-weight: 800;letter-spacing: -0.01em;}
.bgr-specs span{font-size: 0.82rem;color: var(--bgr-muted);line-height: 1.35;}
.bgr-byline{display: flex;flex-wrap: wrap;gap: 0.35rem 1rem;font-size: 0.86rem;color: var(--bgr-muted);}
.bgr-byline .author-link{color: var(--bgr-accent-dk);font-weight: 600;text-decoration: none;}
.bgr-byline .author-link:hover{text-decoration: underline;}
.bgr-byline-updated::before{content: "";display: inline-block;width: 4px;height: 4px;border-radius: 50%;background: var(--bgr-line);margin-right: 1rem;vertical-align: middle;}
.bgr-studio{background: var(--bgr-paper);border: 1px solid var(--bgr-line);border-radius: var(--bgr-radius);box-shadow: var(--bgr-shadow);padding: clamp(0.85rem, 2vw, 1.25rem);margin-bottom: 2.75rem;transition: outline-color 0.15s ease;outline: 2px dashed transparent;outline-offset: -8px;}
.bgr-studio.is-drag{outline-color: var(--bgr-accent);}
.bgr-drop{display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;gap: 0.4rem;min-height: 320px;padding: 2rem 1.25rem;border-radius: 14px;cursor: pointer;background: radial-gradient(circle at 50% 0%, var(--bgr-accent-soft), transparent 60%), repeating-conic-gradient(#f2efe9 0% 25%, #fbfaf7 0% 50%) 0 0 / 22px 22px;border: 1.5px dashed #d5cfc5;transition: border-color 0.15s ease, transform 0.15s ease;}
.bgr-drop:hover,.bgr-drop:focus-visible{border-color: var(--bgr-accent);outline: none;}
.bgr-drop-icon{width: 58px;height: 58px;border-radius: 16px;display: grid;place-items: center;font-size: 1.5rem;color: #fff;background: var(--bgr-accent);box-shadow: 0 8px 20px rgb(217 65 30 / 30%);margin-bottom: 0.4rem;}
.bgr-drop-title{font-size: 1.15rem;font-weight: 700;margin: 0;}
.bgr-drop-hint{font-size: 0.92rem;color: var(--bgr-muted);margin: 0 0 0.6rem;}
.bgr-drop-btn{display: inline-block;padding: 0.65rem 1.4rem;border-radius: 999px;background: var(--bgr-ink);color: #fff;font-weight: 600;font-size: 0.95rem;}
.bgr-picks{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 0.4rem;margin-top: 1rem;padding-top: 1rem;border-top: 1px solid rgb(21 23 30 / 8%);width: min(560px, 100%);}
.bgr-picks-label{font-size: 0.84rem;font-weight: 600;color: var(--bgr-muted);margin-right: 0.2rem;}
.bgr-pick{border: 1.5px solid var(--bgr-line);background: var(--bgr-paper);border-radius: 999px;padding: 0.38rem 0.85rem;font-size: 0.84rem;font-weight: 600;color: var(--bgr-ink);}
.bgr-pick:hover{border-color: #cbc4b8;}
.bgr-pick.is-on{border-color: var(--bgr-accent);background: var(--bgr-accent-soft);color: var(--bgr-accent-dk);}
.bgr-studio[data-state="ready"] .bgr-drop{display: none;}
.bgr-studio[data-state="empty"] .bgr-workspace{display: none;}
.bgr-workspace{display: grid;grid-template-columns: minmax(0, 1fr) 330px;gap: 1.1rem;align-items: start;scroll-margin-top: 80px;}
.bgr-stage-col{min-width: 0;}
.bgr-stage-bar{display: flex;align-items: center;flex-wrap: wrap;gap: 0.6rem;margin-bottom: 0.6rem;}
.bgr-views{display: inline-flex;padding: 3px;border-radius: 999px;background: var(--bgr-wash);border: 1px solid var(--bgr-line);}
.bgr-views button{border: 0;background: transparent;padding: 0.38rem 0.9rem;border-radius: 999px;font-size: 0.86rem;font-weight: 600;color: var(--bgr-muted);}
.bgr-views button.is-on{background: var(--bgr-ink);color: #fff;}
.bgr-meta{font-size: 0.82rem;color: var(--bgr-muted);font-variant-numeric: tabular-nums;}
.bgr-link-btn{margin-left: auto;border: 0;background: none;color: var(--bgr-accent-dk);font-weight: 600;font-size: 0.88rem;padding: 0.3rem 0.2rem;}
.bgr-link-btn:hover{text-decoration: underline;}
.bgr-stage{display: flex;align-items: center;justify-content: center;min-height: 340px;padding: clamp(0.75rem, 2.5vw, 1.75rem);border-radius: 14px;background: radial-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px) 0 0 / 16px 16px, var(--bgr-stage);}
.bgr-frame{position: relative;display: inline-block;max-width: 100%;line-height: 0;border-radius: 6px;overflow: hidden;box-shadow: 0 10px 40px rgb(0 0 0 / 35%);--bgr-split: 50%;}
.bgr-frame.is-checker{background: repeating-conic-gradient(#d9d9d9 0% 25%, #ffffff 0% 50%) 0 0 / 18px 18px;}
.bgr-frame canvas{display: block;max-width: 100%;max-height: min(68vh, 640px);width: auto;height: auto;}
.bgr-frame .bgr-before{position: absolute;inset: 0;width: 100%;height: 100%;max-height: none;pointer-events: none;}
.bgr-divider{display: none;position: absolute;top: 0;bottom: 0;left: var(--bgr-split);width: 2px;margin-left: -1px;background: #fff;box-shadow: 0 0 0 1px rgb(0 0 0 / 25%);pointer-events: none;}
.bgr-divider::after{content: "";position: absolute;top: 50%;left: 50%;width: 30px;height: 30px;margin: -15px 0 0 -15px;border-radius: 50%;background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;box-shadow: 0 2px 8px rgb(0 0 0 / 30%);}
.bgr-frame.is-compare .bgr-divider{display: block;}
.bgr-split{position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;opacity: 0;cursor: ew-resize;touch-action: pan-y;}
.bgr-frame.is-brush canvas{cursor: none;touch-action: none;}
.bgr-cursor{position: absolute;top: 0;left: 0;border-radius: 50%;border: 2px solid #fff;box-shadow: 0 0 0 1px rgb(0 0 0 / 55%), inset 0 0 0 1px rgb(0 0 0 / 35%);pointer-events: none;}
.bgr-frame[data-brush="erase"] .bgr-cursor{background: rgb(217 65 30 / 22%);}
.bgr-frame[data-brush="restore"] .bgr-cursor{background: rgb(29 122 85 / 22%);}
.bgr-busy{position: absolute;inset: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 0.8rem;padding: 1.25rem;background: rgb(21 23 30 / 72%);backdrop-filter: blur(3px);color: #fff;line-height: 1.4;text-align: center;}
.bgr-busy p{margin: 0;font-size: 0.95rem;font-weight: 600;max-width: 340px;}
.bgr-track{width: min(260px, 80%);height: 6px;border-radius: 99px;background: rgb(255 255 255 / 22%);overflow: hidden;}
.bgr-bar{height: 100%;width: 2%;border-radius: 99px;background: #ff8a6b;transition: width 0.2s ease;}
.bgr-bar.is-indeterminate{width: 40%;animation: bgr-slide 1.1s ease-in-out infinite;}
@keyframes bgr-slide{0%{transform: translateX(-110%);}100%{transform: translateX(260%);}}
.bgr-note{min-height: 1.4em;margin: 0.65rem 0 0;font-size: 0.9rem;color: var(--bgr-muted);}
.bgr-note[data-tone="ok"]{color: var(--bgr-ok);}
.bgr-note[data-tone="error"]{color: var(--bgr-err);}
.bgr-panel{display: flex;flex-direction: column;gap: 0.7rem;}
.bgr-step{border: 1px solid var(--bgr-line);border-radius: 14px;padding: 0.85rem 0.95rem 0.95rem;margin: 0;background: var(--bgr-wash);display: flex;flex-direction: column;gap: 0.7rem;min-width: 0;}
.bgr-step legend{float: left;width: 100%;font-size: 0.92rem;font-weight: 700;margin: 0;padding: 0;display: flex;align-items: center;gap: 0.5rem;}
.bgr-num{width: 22px;height: 22px;border-radius: 50%;display: inline-grid;place-items: center;font-size: 0.75rem;background: var(--bgr-ink);color: #fff;}
.bgr-engines{display: grid;gap: 0.45rem;}
.bgr-engine{position: relative;display: grid;grid-template-columns: 1fr auto;gap: 0.05rem 0.5rem;padding: 0.6rem 0.75rem;border-radius: 11px;border: 1.5px solid var(--bgr-line);background: var(--bgr-paper);cursor: pointer;transition: border-color 0.15s ease, box-shadow 0.15s ease;}
.bgr-engine input{position: absolute;opacity: 0;pointer-events: none;}
.bgr-engine:hover{border-color: #cbc4b8;}
.bgr-engine.is-on{border-color: var(--bgr-accent);box-shadow: 0 0 0 3px var(--bgr-accent-soft);}
.bgr-engine:focus-within{outline: 2px solid var(--bgr-accent);outline-offset: 2px;}
.bgr-engine-name{font-weight: 700;font-size: 0.93rem;}
.bgr-engine-size{font-size: 0.75rem;font-weight: 700;color: var(--bgr-accent-dk);background: var(--bgr-accent-soft);padding: 0.1rem 0.5rem;border-radius: 99px;align-self: center;}
.bgr-engine-hint{grid-column: 1 / -1;font-size: 0.8rem;color: var(--bgr-muted);}
.bgr-row{display: grid;gap: 0.3rem;}
.bgr-row label{display: flex;justify-content: space-between;font-size: 0.85rem;font-weight: 600;}
.bgr-row output{font-weight: 600;color: var(--bgr-muted);font-variant-numeric: tabular-nums;}
.bgr-row input[type="range"],.bgr-split{accent-color: var(--bgr-accent);}
.bgr-row input[type="range"]{width: 100%;}
.bgr-select{width: 100%;padding: 0.5rem 0.6rem;border-radius: 10px;border: 1px solid var(--bgr-line);background: var(--bgr-paper);font-size: 0.9rem;color: var(--bgr-ink);}
.bgr-btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.62rem 1rem;border-radius: 11px;font-weight: 650;font-size: 0.92rem;border: 1px solid transparent;cursor: pointer;transition: background 0.15s ease, opacity 0.15s ease;}
.bgr-btn:disabled{opacity: 0.45;cursor: not-allowed;}
.bgr-btn--main{background: var(--bgr-accent);color: #fff;}
.bgr-btn--main:hover:not(:disabled){background: var(--bgr-accent-dk);}
.bgr-btn--ghost{background: var(--bgr-paper);border-color: var(--bgr-line);color: var(--bgr-ink);}
.bgr-btn--ghost:hover:not(:disabled){border-color: #cbc4b8;}
.bgr-row .bgr-btn--ghost{justify-content: center;font-weight: 600;}
.bgr-pair{display: grid;grid-template-columns: 1fr 1fr;gap: 0.45rem;}
.bgr-pair .bgr-btn{font-size: 0.84rem;padding: 0.5rem 0.6rem;}
.bgr-brushes,.bgr-bgs{display: flex;flex-wrap: wrap;gap: 0.4rem;}
.bgr-chip{flex: 1 1 auto;border: 1.5px solid var(--bgr-line);background: var(--bgr-paper);border-radius: 999px;padding: 0.4rem 0.8rem;font-size: 0.85rem;font-weight: 600;color: var(--bgr-ink);}
.bgr-chip:hover{border-color: #cbc4b8;}
.bgr-chip.is-on{background: var(--bgr-ink);border-color: var(--bgr-ink);color: #fff;}
.bgr-swatches{display: flex;flex-wrap: wrap;gap: 0.45rem;align-items: center;}
.bgr-swatch{width: 32px;height: 32px;border-radius: 50%;border: 1px solid rgb(0 0 0 / 15%);background: var(--sw);padding: 0;}
.bgr-swatch.is-on{box-shadow: 0 0 0 2px var(--bgr-paper), 0 0 0 4px var(--bgr-accent);}
.bgr-picker{position: relative;width: 32px;height: 32px;border-radius: 50%;overflow: hidden;border: 1px solid rgb(0 0 0 / 15%);background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e);cursor: pointer;margin: 0;}
.bgr-picker input{position: absolute;inset: 0;opacity: 0;width: 100%;height: 100%;cursor: pointer;}
.bgr-check{display: flex;align-items: center;gap: 0.5rem;font-size: 0.88rem;font-weight: 600;margin: 0;}
.bgr-check input{accent-color: var(--bgr-accent);width: 16px;height: 16px;}
.bgr-small{font-size: 0.8rem;color: var(--bgr-muted);margin: 0;line-height: 1.45;}
.bgr-sec{margin: 0 0 2.6rem;}
.bgr-sec h2{font-size: clamp(1.35rem, 2.6vw, 1.75rem);font-weight: 800;letter-spacing: -0.015em;margin: 0 0 0.8rem;}
.bgr-sec p,.bgr-sec li{font-size: 1rem;line-height: 1.7;color: #2b2f3a;}
.bgr-sec a{color: var(--bgr-accent-dk);font-weight: 600;}
.bgr-cards{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 0.9rem;margin-top: 1.1rem;}
.bgr-card{border: 1px solid var(--bgr-line);border-radius: 16px;padding: 1.1rem 1.1rem 0.9rem;background: var(--bgr-paper);display: flex;flex-direction: column;}
.bgr-card h3{font-size: 1.1rem;font-weight: 800;margin: 0 0 0.5rem;display: flex;align-items: baseline;flex-wrap: wrap;gap: 0.45rem;}
.bgr-card h3 small{font-size: 0.72rem;font-weight: 700;letter-spacing: 0.04em;text-transform: uppercase;color: var(--bgr-muted);}
.bgr-card p{font-size: 0.93rem;line-height: 1.6;}
.bgr-card dl{margin: auto 0 0;padding-top: 0.75rem;border-top: 1px dashed var(--bgr-line);font-size: 0.88rem;}
.bgr-card dt{font-size: 0.72rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.05em;color: var(--bgr-muted);margin-top: 0.5rem;}
.bgr-card dt:first-child{margin-top: 0;}
.bgr-card dd{margin: 0.1rem 0 0;line-height: 1.5;}
.bgr-flow{list-style: none;counter-reset: bgr;padding: 0;margin: 0;position: relative;}
.bgr-flow li{counter-increment: bgr;position: relative;padding: 0 0 1.1rem 3.1rem;}
.bgr-flow li::before{content: counter(bgr);position: absolute;left: 0;top: 0.1rem;width: 2.1rem;height: 2.1rem;border-radius: 50%;display: grid;place-items: center;font-weight: 800;font-size: 0.9rem;background: var(--bgr-accent-soft);color: var(--bgr-accent-dk);}
.bgr-flow li:not(:last-child)::after{content: "";position: absolute;left: 1.05rem;top: 2.4rem;bottom: 0.2rem;width: 2px;background: var(--bgr-line);}
.bgr-table-wrap{overflow-x: auto;border: 1px solid var(--bgr-line);border-radius: 14px;margin-bottom: 1rem;}
.bgr-table{width: 100%;border-collapse: collapse;font-size: 0.92rem;min-width: 600px;}
.bgr-table th,.bgr-table td{padding: 0.75rem 0.9rem;text-align: left;vertical-align: top;border-bottom: 1px solid var(--bgr-line);}
.bgr-table thead th{background: var(--bgr-wash);font-size: 0.78rem;text-transform: uppercase;letter-spacing: 0.05em;color: var(--bgr-muted);}
.bgr-table tbody th{font-weight: 700;}
.bgr-table tbody tr:last-child th,.bgr-table tbody tr:last-child td{border-bottom: 0;}
.bgr-fixes{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.8rem;}
.bgr-fix{border-left: 3px solid var(--bgr-accent);background: var(--bgr-wash);border-radius: 0 12px 12px 0;padding: 0.85rem 1rem;}
.bgr-fix h3{font-size: 1rem;font-weight: 750;margin: 0 0 0.3rem;}
.bgr-fix p{margin: 0;font-size: 0.93rem;line-height: 1.6;}
.bgr-sec--limits ul{padding-left: 1.1rem;margin: 0;}
.bgr-sec--limits li{margin-bottom: 0.55rem;}
.bgr-sec--pair{border: 1px solid var(--bgr-line);border-radius: 16px;padding: 1.25rem 1.35rem 0.5rem;background: linear-gradient(135deg, var(--bgr-accent-soft), var(--bgr-paper) 55%);}
@media (max-width: 991.98px){.bgr-workspace{grid-template-columns: minmax(0, 1fr);}.bgr-panel{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.7rem;}.bgr-cards{grid-template-columns: minmax(0, 1fr);}}
@media (max-width: 640px){.bgr-specs{grid-template-columns: repeat(2, minmax(0, 1fr));}.bgr-specs li:nth-child(3){border-left: 0;}.bgr-specs li:nth-child(n+3){border-top: 1px solid var(--bgr-line);}.bgr-panel{grid-template-columns: minmax(0, 1fr);}.bgr-fixes{grid-template-columns: minmax(0, 1fr);}.bgr-stage{min-height: 240px;padding: 0.6rem;}.bgr-drop{min-height: 260px;}.bgr-link-btn{margin-left: 0;}}
@media (prefers-reduced-motion: reduce){.bgr-bar.is-indeterminate{animation-duration: 2.5s;}.bgr-studio,.bgr-drop,.bgr-engine,.bgr-btn{transition: none;}}