.ral-configurator{width:min(1180px,calc(100% - 40px));margin:32px auto 0;display:grid;grid-template-columns:minmax(340px,42%) minmax(0,58%);background:#07101a;color:#fff;border:1px solid #203041;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.ral-sidebar{min-width:0;padding:30px clamp(22px,3vw,42px) 28px;display:flex;flex-direction:column;border-right:1px solid #203041;background:radial-gradient(circle at 15% 0,rgba(20,112,205,.2),transparent 34%),#07101a;position:relative;z-index:2}
.ral-sidebar .eyebrow{margin-bottom:18px;color:#6e9fc4}
.ral-sidebar h1{font-size:clamp(34px,3.2vw,48px);letter-spacing:-.055em;line-height:.98;margin:0;max-width:590px}
.ral-intro{max-width:540px;margin:13px 0 17px;color:#aebdca;font-size:12px;line-height:1.55}
.ral-selection{border-top:1px solid #273848;border-bottom:1px solid #273848;padding:15px 0;display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;margin-bottom:18px}
.ral-selection>span{grid-row:1/3;font:9px var(--mono);letter-spacing:.12em;color:#6e879b}
.ral-selection strong{font:700 20px var(--sans);letter-spacing:-.03em}
.ral-selection b{font:10px var(--mono);font-weight:400;color:#8fa4b4;margin-top:3px}
.ral-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ral-swatch{min-width:0;border:1px solid #2b3b4b;background:#0d1925;color:#fff;padding:8px;display:grid;grid-template-columns:36px minmax(0,1fr) 20px;gap:9px;align-items:center;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.ral-swatch:hover{border-color:#5d7a92;background:#112334;transform:translateY(-1px)}
.ral-swatch:focus-visible{outline:2px solid #2c94ff;outline-offset:2px}
.ral-swatch i{width:36px;height:36px;border-radius:3px;background:var(--swatch);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.25)}
.ral-swatch span{min-width:0;display:block}
.ral-swatch b{display:block;font:10px var(--mono);white-space:nowrap}
.ral-swatch small{display:block;margin-top:3px;color:#7f94a5;font:9px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ral-swatch em{font-style:normal;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#1686fa;color:#fff;font-size:11px;opacity:0;transform:scale(.6);transition:.2s}
.ral-swatch.is-selected{border-color:#1686fa;background:#102a42;box-shadow:0 0 0 1px #1686fa inset}
.ral-swatch.is-selected em{opacity:1;transform:scale(1)}
.ral-note{margin:18px 0 0;padding:13px 14px;border-left:2px solid #1686fa;background:#0b1723;color:#8fa2b1;font-size:10px;line-height:1.6}
.ral-preview{position:relative;height:520px;background:#0b1118;overflow:hidden;display:flex;flex-direction:column}
.ral-preview-head{height:54px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);font:9px var(--mono);letter-spacing:.12em;color:#7890a4}
.ral-preview-head b{font-size:12px;color:#fff;letter-spacing:0}
.ral-preview img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:center 66%;display:block;transition:opacity .2s,transform .35s}
.ral-preview img.is-changing{opacity:.25;transform:scale(.992)}
.ral-preview>p{position:absolute;left:24px;right:24px;bottom:17px;margin:0;padding:8px 10px;background:rgba(4,10,16,.78);backdrop-filter:blur(8px);color:#9babb7;font:8px var(--mono);line-height:1.5}
.ral-technical{padding:95px clamp(20px,8vw,130px);display:grid;grid-template-columns:1fr 1fr;gap:10vw;background:#eef3f5}
.ral-technical h2{font-size:clamp(42px,5.4vw,82px);letter-spacing:-.07em;line-height:.92;margin:0}
.ral-technical h2 em{font-family:Georgia,serif;font-weight:400}
@media(max-width:980px){
  .ral-configurator{width:min(760px,calc(100% - 28px));grid-template-columns:1fr;margin-top:20px}
  .ral-sidebar{padding:26px 26px 22px;border-right:0;border-bottom:1px solid #203041}
  .ral-sidebar h1{font-size:clamp(34px,7vw,46px)}
  .ral-palette{display:flex;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding:2px 1px 10px;scrollbar-width:thin}
  .ral-swatch{flex:0 0 158px;scroll-snap-align:start}
  .ral-note{max-width:560px}
  .ral-preview{height:440px}
}
@media(max-width:760px){
  .ral-configurator{width:calc(100% - 20px);margin-top:12px}
  .ral-sidebar{padding:30px 20px 22px}
  .ral-sidebar h1{font-size:34px}
  .ral-intro{font-size:12px;margin:15px 0 18px}
  .ral-palette{margin-right:0}
  .ral-preview{height:360px}
  .ral-preview-head{height:48px;padding:0 15px}
  .ral-preview img{height:312px;flex:none;object-fit:cover;object-position:center 68%}
  .ral-preview>p{left:12px;right:12px;bottom:11px}
  .ral-technical{padding:68px 20px;grid-template-columns:1fr;gap:45px}
}
@media(max-width:420px){
  .ral-swatch{flex-basis:148px;grid-template-columns:32px minmax(0,1fr) 18px}
  .ral-swatch i{width:32px;height:32px}
}