.sb-rt {
  display: grid; grid-template-columns: 1fr 260px;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f4ecdb;
  color: #1a1a1a;
  border-radius: 0;
  overflow: hidden;
  border: 4px solid #1a1a1a;
}
.sb-rt-main { position: relative; padding: 36px 40px; display: flex; flex-direction: column; gap: 18px; }
.sb-rt-main::before {
  content: ''; position: absolute; top: 24px; right: 24px;
  width: 14px; height: 14px; border-radius: 50%; background: #c43a2c;
}
.sb-rt-eye { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; color: #c43a2c; text-transform: uppercase; }
.sb-rt-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.92;
  color: #1a1a1a; letter-spacing: -0.03em;
}
.sb-rt-main h2 em { font-style: italic; color: #1840d2; font-weight: 800; }
.sb-rt-main p { margin: 0; font-size: 13.5px; color: #3d3d3d; line-height: 1.65; max-width: 460px; font-weight: 500; }
.sb-rt-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #1840d2; background: rgba(24,64,210,0.1); padding: 1px 6px; border-radius: 0; font-weight: 700; }
.sb-rt-canvas {
  position: relative;
  flex: 1; min-height: 200px;
  border: 3px solid #1a1a1a;
  background: #fdf5e2;
  margin-top: 4px;
  overflow: hidden;
}
.sb-rt-circ {
  position: absolute; top: 22%; left: 12%;
  width: 90px; height: 90px; border-radius: 50%;
  background: #c43a2c;
  border: 3px solid #1a1a1a;
}
.sb-rt-sq {
  position: absolute; bottom: 14%; left: 32%;
  width: 80px; height: 80px;
  background: #1840d2;
  border: 3px solid #1a1a1a;
}
.sb-rt-tri {
  position: absolute; top: 18%; right: 14%;
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid #ffd400;
  filter: drop-shadow(0 0 0 #1a1a1a);
}
.sb-rt-tri::after {
  content: ''; position: absolute; left: -50px; top: 0;
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid #1a1a1a;
  z-index: -1;
  transform: scale(1.06);
  transform-origin: bottom;
}
.sb-rt-side {
  position: relative;
  background: #1840d2; color: #f4ecdb;
  border-left: 4px solid #1a1a1a;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.sb-rt-rule { display: block; height: 4px; width: 60%; background: #ffd400; margin-bottom: 4px; }
.sb-rt-side h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
.sb-rt-side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 12.5px; padding-top: 8px; border-top: 2px solid rgba(244,236,219,0.4); }
.sb-rt-side dt { color: #ffd400; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; align-self: center; }
.sb-rt-side dd { margin: 0; color: #f4ecdb; display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.sb-rt-sw { width: 14px; height: 14px; background: #1840d2; border: 2px solid #f4ecdb; flex-shrink: 0; }
.sb-rt-cta {
  margin-top: auto;
  padding: 12px 16px;
  background: #ffd400; color: #1a1a1a;
  border: 3px solid #1a1a1a;
  font: inherit; font-size: 13px; font-weight: 900; letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 4px 4px 0 #1a1a1a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-rt-cta:hover { background: #ffe44a; }
.sb-rt-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1a1a1a; }
@media (max-width: 720px) {
  .sb-rt { grid-template-columns: 1fr; }
  .sb-rt-side { border-left: 0; border-top: 4px solid #1a1a1a; }
}