.ss-str {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', sans-serif;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-str-yellow {
  background: #ffd400;
  color: #0a0a0a;
  padding: 48px 44px;
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
  z-index: 2;
}
.ss-str-yellow::before {
  content: '';
  position: absolute; right: 60px; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(180deg, #0a0a0a 0 12px, transparent 12px 24px);
}
.ss-str-stamp {
  display: inline-block;
  padding: 6px 14px;
  background: #0a0a0a;
  color: #ffd400;
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  align-self: flex-start;
  transform: rotate(-2deg);
}
.ss-str-yellow h2 {
  margin: 0;
  font-size: clamp(56px, 9vw, 110px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-style: italic;
}
.ss-str-pink { color: #ff0090; -webkit-text-stroke: 2px #0a0a0a; }
.ss-str-info { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-str-info li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 17px; font-weight: 700;
  padding: 8px 0;
  border-bottom: 2px dashed #0a0a0a;
  font-family: 'Courier New', monospace;
}
.ss-str-info b {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: 24px;
  background: #ff0090;
  color: #ffd400;
  padding: 0 6px;
  font-style: italic;
}
.ss-str-black {
  background: #0a0a0a;
  color: #f0ece4;
  padding: 48px 44px 48px 80px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  margin-left: -60px;
  z-index: 1;
}
.ss-str-tag {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  color: #ff0090;
}
.ss-str-black p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #f0ece4;
  max-width: 360px;
  font-weight: 500;
}
.ss-str-form {
  display: flex; gap: 0;
  margin-top: auto;
  border: 2px solid #ffd400;
  background: #1a1a1a;
}
.ss-str-form input {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  color: #f0ece4;
  border: 0; outline: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}
.ss-str-form input::placeholder { color: #6a6a6a; }
.ss-str-form button {
  padding: 0 22px;
  background: #ffd400;
  color: #0a0a0a;
  border: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 0.12s;
}
.ss-str-form button:hover { background: #ff0090; color: #ffd400; }
.ss-str-counter {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffd400;
  padding: 10px 14px;
  background: #1a1a1a;
  border: 1px dashed #ff0090;
  align-self: flex-start;
}
.ss-str-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 720px) {
  .ss-str { grid-template-columns: 1fr; }
  .ss-str-yellow { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); padding-bottom: 60px; }
  .ss-str-black { margin-left: 0; margin-top: -30px; padding-left: 44px; padding-top: 60px; }
}