@font-face {
font-family:Studio;
  src:local("Inter"),local("SF Pro Display");
  font-display:swap
}
* {
box-sizing:border-box
}
html {
color-scheme:dark light
}
body {
margin:0;
  font-family:Studio,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a {
color:inherit;
  text-decoration:none
}
a:hover {
color:var(--accent,#A8E84E)
}
button,input,select,textarea {
font:inherit
}
button,a,input,select,summary {
touch-action:manipulation
}
button {
cursor:pointer
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
outline:2px solid var(--accent,#A8E84E);
  outline-offset:4px
}
button:disabled {
opacity:.4;
  cursor:not-allowed
}
[hidden] {
display:none!important
}
.sr-only {
position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
h1,h2,h3,p {
margin:0
}
button {
border:0
}
.eyebrow {
font-size:10px;
  letter-spacing:.14em;
  font-weight:650
}
.matchday {
background:var(--bg);
  color:var(--text);
  font-size:14px;
  font-variant-numeric:tabular-nums;
  --pad:18px;
  --row:17px
}
.matchday.font-humanist {
font-family:Optima,Candara,"Segoe UI",sans-serif
}
.matchday.font-mono {
font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}
.matchday.scale-small {
font-size:12px
}
.matchday.scale-large {
font-size:16px
}
.density-compact {
--pad:12px;
  --row:11px
}
.density-spacious {
--pad:24px;
  --row:24px
}
html[data-theme=transparent],html[data-theme=transparent] body {
background:transparent
}
@media(prefers-color-scheme:light) {
html[data-theme=auto] {
--bg:#fff!important;
  --surface:#F5F6F2!important;
  --text:#151915!important;
  --muted:#5E675F!important;
  --accent:#315F0C!important;
  --line:#DCE1D9!important
}

}
.widget-shell {
padding:var(--pad);
  overflow:hidden
}
.widget-head {
padding:3px 0 21px
}
.widget-kicker {
display:flex;
  align-items:center;
  gap:8px;
  font-size:.74em;
  font-weight:600;
  color:var(--muted);
  margin-bottom:12px
}
.brand-mark {
color:var(--accent);
  font-size:1.9em;
  line-height:1
}
.snapshot {
margin-left:auto;
  font-size:9px;
  letter-spacing:.12em
}
.widget-head h1 {
font-size:1.65em;
  letter-spacing:-.045em;
  font-weight:650;
  line-height:1.15
}
.widget-head p {
font-size:.76em;
  line-height:1.6;
  color:var(--muted);
  margin-top:8px
}
.header-compact h1 {
font-size:1.2em
}
.header-compact .widget-kicker {
margin-bottom:6px
}
.date-group {
grid-column:1/-1;
  color:var(--muted);
  font-size:.74em;
  letter-spacing:.05em;
  font-weight:500;
  padding:16px 0 7px
}
.date-group:first-child {
padding-top:0
}
.fixture {
min-width:0;
  padding:var(--row) 0;
  border-bottom:1px solid var(--line)
}
.fixture-meta {
display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.7em;
  line-height:1.5;
  margin-bottom:12px
}
.matchup {
display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px 16px;
  align-items:center
}
.team-name {
font-size:1em;
  line-height:1.35;
  font-weight:550;
  overflow-wrap:anywhere
}
.away-name {
grid-column:1;
  grid-row:2
}
.scoreboard {
grid-column:2;
  grid-row:1/3;
  display:grid;
  grid-template-columns:auto;
  gap:7px;
  text-align:right;
  align-items:center;
  font-size:1.1em
}
.scoreboard strong {
font-weight:650
}
.scoreboard>span:not(.versus) {
display:none
}
.versus {
color:var(--muted);
  font-size:.85em
}
.fixture-bottom {
display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px
}
.status {
font-size:.69em;
  color:var(--muted);
  line-height:1.5
}
.status.live {
color:var(--accent)
}
.status.live:before {
content:'●';
  font-size:9px;
  margin-right:5px
}
.details,.context-link {
font-size:.7em;
  color:var(--accent);
  font-weight:600
}
.optional-meta {
font-size:.68em;
  color:var(--muted);
  line-height:1.5;
  margin-top:9px
}
.layout-cards {
display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:var(--gap)
}
.layout-cards .fixture,.layout-ticker .fixture,.layout-spotlight .fixture {
padding:var(--pad);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface)
}
.layout-cards .matchup {
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px;
  text-align:center;
  min-height:84px
}
.layout-cards .away-name {
grid-column:3;
  grid-row:1
}
.layout-cards .home-name {
grid-column:1;
  grid-row:1
}
.layout-cards .scoreboard {
grid-row:1;
  display:flex;
  gap:7px;
  text-align:center;
  font-size:1.8em;
  letter-spacing:-.04em
}
.layout-cards .scoreboard>span:not(.versus) {
display:block;
  color:var(--muted);
  font-size:.6em
}
.layout-cards .fixture-bottom {
padding-top:10px;
  border-top:1px solid var(--line)
}
.layout-ticker {
display:flex;
  overflow-x:auto;
  gap:var(--gap);
  scroll-snap-type:x proximity;
  padding-bottom:10px;
  scrollbar-color:var(--accent) var(--surface);
  overscroll-behavior-x:contain
}
.layout-ticker .fixture {
flex:0 0 240px;
  scroll-snap-align:start;
  padding:14px
}
.layout-ticker .details {
font-size:.68em
}
.layout-spotlight .fixture {
padding:clamp(20px,5vw,48px);
  position:relative
}
.layout-spotlight .fixture-meta {
font-size:.8em;
  margin-bottom:30px
}
.layout-spotlight .matchup {
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:16px;
  text-align:center;
  min-height:120px
}
.layout-spotlight .away-name {
grid-column:3;
  grid-row:1
}
.layout-spotlight .scoreboard {
grid-row:1;
  display:flex;
  gap:12px;
  font-size:clamp(30px,6vw,64px);
  letter-spacing:-.06em
}
.layout-spotlight .scoreboard>span:not(.versus) {
display:block;
  color:var(--muted);
  font-size:.65em
}
.layout-spotlight .team-name {
font-size:clamp(14px,2vw,23px);
  font-weight:600
}
.layout-spotlight .fixture-bottom {
margin-top:25px;
  padding-top:18px;
  border-top:1px solid var(--line)
}
.match-table-wrap,.standings-wrap {
overflow-x:auto;
  max-width:100%;
  scrollbar-color:var(--accent) var(--surface)
}
table {
border-collapse:collapse;
  width:100%;
  text-align:left;
  font-variant-numeric:tabular-nums
}
thead th {
color:var(--muted);
  font-size:.68em;
  font-weight:500;
  padding:12px 9px;
  border-bottom:1px solid var(--line);
  white-space:nowrap
}
tbody td,tbody th {
padding:var(--row) 9px;
  border-bottom:1px solid var(--line);
  font-size:.85em;
  line-height:1.4
}
tbody th {
font-weight:550
}
.league-table td {
text-align:right
}
.league-table th:first-child,.league-table td:first-child {
text-align:left;
  padding-left:0
}
.league-table thead th:not(:nth-child(2)) {
text-align:right
}
.league-table tbody th {
min-width:90px
}
.league-table .rank {
color:var(--muted);
  width:23px;
  font-size:.72em
}
.league-table .points {
font-weight:750;
  color:var(--accent);
  padding-right:0
}
.match-table th:first-child,.match-table td:first-child {
padding-left:0
}
.table-score {
font-weight:700;
  white-space:nowrap;
  text-align:center;
  min-width:60px
}
.table-score span {
padding:0 6px;
  color:var(--muted)
}
.kickoff {
font-size:.7em;
  color:var(--muted);
  white-space:nowrap
}
.kickoff span {
display:block
}
.detail-icon {
color:var(--accent);
  font-size:20px
}
.form-line {
display:flex;
  gap:4px;
  align-items:center
}
.form-pill {
display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:4px;
  font-size:10px;
  font-weight:650;
  background:var(--surface);
  border:1px solid var(--line)
}
.form-W {
color:var(--accent)
}
.form-L {
color:var(--text)
}
.form-D {
color:var(--muted)
}
.form-summary {
padding:10px 0 24px
}
.form-summary .form-line {
margin:16px 0
}
.form-summary .form-pill {
width:40px;
  height:40px;
  font-size:17px
}
.form-summary p {
font-size:.74em;
  color:var(--muted);
  line-height:1.6
}
.widget-foot {
padding-top:22px
}
.foot-context {
display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-size:.74em
}
.foot-context>a:first-child {
color:var(--accent);
  font-weight:550
}
.powered {
font-size:.94em
}
.powered b {
font-weight:650
}
.widget-foot p {
font-size:.64em;
  line-height:1.7;
  color:var(--muted);
  margin-top:10px
}
.widget-foot p+p {
margin-top:2px
}
.empty {
padding:35px 4px 45px
}
.empty>span {
font-size:30px;
  color:var(--accent)
}
.empty h2 {
font-size:1.2em;
  margin:16px 0 9px;
  font-weight:550
}
.empty p {
font-size:.85em;
  line-height:1.7;
  color:var(--muted);
  max-width:34em
}
.empty .context-link {
display:inline-block;
  margin-top:18px
}
.border-off .fixture,.border-off td,.border-off th,.border-off .fixture-bottom {
border-color:transparent
}
.shadow-soft .layout-cards .fixture,.shadow-soft .layout-spotlight .fixture {
box-shadow:0 8px 22px #00000012
}
.treatment-flat .fixture {
background:transparent
}
.align-center .layout-list .fixture-meta,.align-center .layout-list .fixture-bottom {
justify-content:center
}
.fixture a {
transition:color .16s ease
}
.fixture:focus-within {
outline:1px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius)
}
@media(max-width:360px) {
.matchday {
--pad:12px
}
.snapshot {
font-size:8px
}
.widget-head h1 {
font-size:1.45em
}
.layout-spotlight .matchup {
grid-template-columns:1fr;
  gap:16px
}
.layout-spotlight .home-name,.layout-spotlight .away-name,.layout-spotlight .scoreboard {
grid-column:1;
  grid-row:auto;
  justify-content:center
}
.layout-spotlight .away-name {
grid-row:3
}
.layout-spotlight .scoreboard {
grid-row:2;
  font-size:38px
}
.match-table {
font-size:11px
}
.match-table td,.match-table th {
padding:12px 5px
}
.match-table .status {
font-size:9px
}
.league-table td,.league-table th {
padding:12px 5px
}
.layout-cards .fixture {
padding:14px
}
.layout-cards .scoreboard {
font-size:1.5em
}
.layout-cards .team-name {
font-size:.9em
}

}
/* Studio: dedicated canvas, no site application CSS or framework dependency. */
.builder {
--accent:#A8E84E;
  --text:#F5F7F4;
  --muted:#A1A6A1;
  --line:#262826;
  background:#000000;
  color:var(--text);
  font-size:14px
}
.topbar {
max-width:1520px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 40px;
  border-bottom:1px solid #242624
}
.wordmark {
 display:inline-flex;
 align-items:center;
 gap:14px;
 flex-shrink:0
}
.wordmark img {
 display:block;
 width:148.42px;
 height:auto
}
.wordmark span {
 color:#fff;
 font-family:Helvetica,Arial,sans-serif;
 font-size:18px;
 font-weight:500;
 letter-spacing:.08em;
 line-height:1
}
@media(max-width:520px) {
 .topbar {flex-wrap:wrap;gap:16px}
 .wordmark {gap:10px}
 .wordmark img {width:104px}
 .wordmark span {font-size:13px}
 .topbar>div {margin-left:auto}
}
.topbar>div {
display:flex;
  gap:28px;
  font-size:12px;
  color:#aaa
}
.builder-main {
max-width:1520px;
  margin:auto;
  padding:48px 40px 72px
}
.studio-intro {
display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:40px
}
.studio-intro h1 {
font-size:clamp(28px,3vw,42px);
  font-weight:550;
  letter-spacing:-.055em;
  line-height:1.15;
  margin:12px 0
}
.studio-intro p {
color:#a1a6a1;
  line-height:1.7;
  font-size:14px;
  max-width:620px
}
.studio-intro .eyebrow {
color:var(--accent)
}
.free-note {
font-size:11px;
  color:#a1a6a1;
  white-space:nowrap;
  padding-bottom:5px
}
.free-note span {
color:var(--accent);
  margin-right:6px
}
.studio-grid {
display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:52px;
  align-items:start
}
.studio-controls {
min-width:0
}
.studio-tabs {
display:flex;
  gap:21px;
  border-bottom:1px solid #292b29;
  margin-bottom:28px
}
.studio-tabs button {
background:none;
  color:#a1a6a1;
  font-size:11px;
  letter-spacing:.065em;
  font-weight:600;
  padding:0 0 16px;
  position:relative
}
.studio-tabs button[aria-selected=true] {
color:#fff
}
.studio-tabs button[aria-selected=true]:after {
content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:2px;
  background:var(--accent)
}
.panel-heading {
font-size:18px;
  font-weight:550;
  letter-spacing:-.03em;
  margin-bottom:7px
}
.panel-note {
font-size:12px;
  line-height:1.7;
  color:#969d96;
  margin-bottom:24px
}
.studio-controls label {
display:block;
  font-size:11px;
  color:#b9beb9;
  line-height:1.5;
  margin-bottom:18px
}
.studio-controls label>input:not([type=checkbox]):not([type=color]),.studio-controls select,.studio-controls textarea {
display:block;
  width:100%;
  background:#101214;
  border:1px solid #343831;
  border-radius:6px;
  color:#f5f7f4;
  padding:11px 12px;
  font-size:13px;
  margin-top:7px;
  min-height:42px
}
.studio-controls select {
padding-right:26px
}
.control-pair {
display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.field-grid {
display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px
}
.field-grid label {
margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px
}
.field-grid input {
accent-color:var(--accent);
  width:15px;
  height:15px
}
.studio-controls details {
border-top:1px solid #292c28;
  padding:17px 0
}
.studio-controls details summary {
font-size:12px;
  font-weight:550;
  cursor:pointer
}
.studio-controls details[open] summary {
margin-bottom:20px
}
.studio-controls details:last-of-type {
margin-top:16px
}
.layout-choices {
display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:22px
}
.layout-choice {
border:1px solid #343831;
  background:#101214;
  border-radius:9px;
  padding:15px 12px;
  text-align:left;
  color:#c7ccc5;
  transition:border-color .15s,background .15s
}
.layout-choice[aria-pressed=true] {
border-color:var(--accent);
  background:#171c12;
  color:white
}
.layout-choice b {
font-weight:550;
  font-size:11px;
  display:block;
  margin-top:13px
}
.layout-choice svg {
width:100%;
  height:58px;
  display:block;
  color:#84917b
}
.layout-choice[aria-pressed=true] svg {
color:var(--accent)
}
.theme-choices {
display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:22px
}
.theme-choice {
border:1px solid #343831;
  background:#101214;
  border-radius:6px;
  color:#c7ccc5;
  padding:11px;
  font-size:11px;
  text-align:left;
  display:flex;
  align-items:center;
  gap:9px
}
.theme-choice[aria-pressed=true] {
border-color:var(--accent);
  color:white
}
.theme-dot {
width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #67715f;
  background:linear-gradient(135deg,#000 50%,#A8E84E 50%)
}
.theme-choice[data-theme=light] .theme-dot,.theme-choice[data-theme=white] .theme-dot {
background:linear-gradient(135deg,#fff 50%,#315f0c 50%)
}
.theme-choice[data-theme=black] .theme-dot {
background:#000
}
.theme-choice[data-theme=transparent] .theme-dot {
background:repeating-conic-gradient(#aaa 0 25%,#fff 0 50%) 50%/8px 8px
}
.color-row {
display:grid;
  grid-template-columns:1fr 32px 92px;
  gap:9px;
  align-items:center;
  margin-bottom:10px
}
.color-row label {
margin:0;
  font-size:11px
}
.color-row input[type=color] {
padding:0;
  border:1px solid #444b3e;
  border-radius:5px;
  width:32px;
  height:32px;
  background:none;
  cursor:pointer
}
.color-row input[type=text] {
width:92px!important;
  margin:0!important;
  min-height:32px!important;
  padding:6px 9px!important;
  font-size:12px!important
}
.studio-controls .small-button {
border:1px solid #363e30;
  border-radius:5px;
  background:none;
  color:#cdd5c7;
  padding:8px 10px;
  font-size:11px
}
.contrast-note {
font-size:11px;
  line-height:1.6;
  color:#adb5a6;
  margin:14px 0
}
.contrast-note.warn {
color:#ffd787
}
.contrast-note button {
display:block;
  margin-top:9px
}
.preview-section {
position:sticky;
  top:24px;
  min-width:0
}
.preview-toolbar {
display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
  margin-bottom:18px
}
.preview-toolbar h2 {
font-size:12px;
  font-weight:550
}
.preview-toolbar h2 span {
display:inline-block;
  background:#a8e84e;
  width:5px;
  height:5px;
  border-radius:50%;
  margin-right:8px
}
.preview-widths {
display:flex;
  gap:3px
}
.preview-widths button {
background:none;
  color:#90988a;
  padding:7px;
  font-size:10px;
  border-radius:4px
}
.preview-widths button[aria-pressed=true] {
background:#272e20;
  color:#cbf69c
}
.preview-canvas {
padding:32px 24px;
  background:#e8eae5;
  background-image:radial-gradient(#a9ada333 1px,transparent 1px);
  background-size:14px 14px;
  border-radius:10px;
  overflow:auto;
  max-height:calc(100vh - 145px);
  min-height:420px;
  scrollbar-color:#777 #ddd
}
.preview-frame-wrap {
margin:auto;
  width:100%;
  transition:width .2s;
  max-width:none;
  flex-shrink:0
}
#widget-preview {
display:block;
  border:0;
  width:100%;
  background:transparent;
  box-shadow:0 12px 48px #18230a18;
  transition:opacity .15s;
  border-radius:8px
}
.preview-meta {
display:flex;
  justify-content:space-between;
  color:#7f8879;
  font-size:10px;
  margin-top:12px;
  gap:14px;
  line-height:1.6
}
.studio-actions {
display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #292c28
}
.text-button {
padding:0;
  background:none;
  color:#a4ad9b;
  font-size:11px
}
.primary-button {
background:var(--accent);
  color:#17240a;
  border-radius:5px;
  font-size:12px;
  font-weight:650;
  padding:12px 16px;
  width:100%;
  margin-top:12px
}
.code-area {
font-family:ui-monospace,monospace!important;
  font-size:10px!important;
  line-height:1.65;
  resize:vertical;
  min-height:170px!important
}
.install-note {
font-size:11px;
  line-height:1.8;
  color:#a1aa99;
  margin-top:18px
}
.install-note a {
color:var(--accent)
}
.notice {
font-size:11px;
  color:#ffd787;
  line-height:1.7;
  min-height:0;
  margin:12px 0
}
.form-status {
font-size:11px;
  line-height:1.6;
  color:var(--accent);
  min-height:18px;
  margin-top:10px
}
.studio-bottom {
display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  margin-top:80px;
  border-top:1px solid #292c28;
  padding-top:35px
}
.studio-bottom h2 {
font-size:24px;
  letter-spacing:-.045em;
  font-weight:500;
  line-height:1.3
}
.studio-bottom p {
font-size:12px;
  line-height:1.9;
  color:#a1a99b;
  margin-bottom:12px
}
.studio-bottom a {
color:var(--accent)
}
.page-foot {
max-width:1520px;
  margin:auto;
  padding:24px 40px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#89947f;
  font-size:11px;
  border-top:1px solid #292c28
}
.studio-controls [aria-invalid=true] {
border-color:#ffd787!important
}
.studio-controls input[type=search] {
margin-bottom:8px
}
.studio-controls input[type=search]+select {
margin-top:0
}
button:hover:not(:disabled) {
filter:brightness(1.12)
}
@media(prefers-reduced-motion:reduce) {
* {
transition:none!important;
  scroll-behavior:auto!important
}

}
@media(max-width:1000px) {
.studio-grid {
grid-template-columns:310px minmax(0,1fr);
  gap:28px
}
.builder-main {
padding:35px 24px 55px
}
.topbar {
padding:22px 24px
}
.preview-canvas {
padding:20px 12px
}
.studio-tabs {
gap:16px
}
.free-note {
display:none
}

}
@media(max-width:720px) {
.builder-main {
padding:30px 18px 45px
}
.topbar {
padding:20px 18px
}
.studio-intro {
margin-bottom:28px
}
.studio-intro h1 {
font-size:32px
}
.studio-intro p {
font-size:12px
}
.studio-grid {
display:flex;
  flex-direction:column;
  gap:30px
}
.studio-controls,.preview-section {
width:100%
}
.preview-section {
position:static
}
.preview-canvas {
max-height:700px;
  min-height:260px;
  padding:16px 10px
}
.preview-widths {
max-width:100%;
  flex-wrap:wrap
}
.studio-tabs {
justify-content:space-between;
  gap:12px
}
.studio-bottom {
grid-template-columns:1fr;
  gap:20px;
  margin-top:40px
}
.studio-bottom h2 {
font-size:23px
}
.page-foot {
padding:24px 18px;
  flex-wrap:wrap
}
.layout-choices {
grid-template-columns:repeat(3,minmax(0,1fr))
}
.layout-choice {
padding:10px
}
.layout-choice svg {
height:45px
}
.layout-choice b {
font-size:10px
}
.preview-toolbar {
gap:10px
}
.topbar>div {
gap:18px
}

}
.table-context {
display:block;
  font-size:.72em;
  color:var(--muted);
  font-weight:400;
  margin-top:5px;
  line-height:1.5
}
.studio-bottom h2 {
margin-top:12px;
  max-width:350px
}
.matchday .match-table .status {
min-width:50px
}
html[data-theme=transparent] {
color-scheme:light
}
.table-summary {
font-size:.72em;
  color:var(--muted);
  margin-bottom:12px
}
.widget-shell,.match-table-wrap,.standings-wrap {
position:relative
}
.sr-only {
clip-path:inset(50%)
}
@media(max-width:360px) {
.match-table td,.match-table th {
font-size:11px
}
.match-table .status {
font-size:10px
}
.league-table td,.league-table tbody th {
font-size:12px
}

}
#team-label,#competition-label {
margin-bottom:18px
}
#team-label>label,#competition-label>label {
margin-bottom:7px
}
.preview-frame-wrap {
scroll-margin-inline:16px
}
.studio-controls input[type=search] {
display:block;
  width:100%;
  background:#101214;
  border:1px solid #343831;
  border-radius:6px;
  color:#f5f7f4;
  padding:11px 12px;
  font-size:13px;
  min-height:42px;
  margin-top:7px
}

/* Keep full club names readable in the smallest article/sidebar placements. */
@media (max-width: 340px) {
  .layout-cards .matchup { grid-template-columns: minmax(0, 1fr); gap: 10px; min-height: 0; padding: 10px 0; }
  .layout-cards .home-name { grid-column: 1; grid-row: 1; }
  .layout-cards .scoreboard { grid-column: 1; grid-row: 2; justify-content: center; font-size: 1.8em; }
  .layout-cards .away-name { grid-column: 1; grid-row: 3; }
  .layout-cards .team-name { font-size: 1em; }
}