html[data-theme="studio"] {
  color-scheme: light;
  --bg:#f6f5f1; --sidebar:#fff; --panel:#fff; --panel2:#f5f7fb;
  --line:#e1e5ed; --text:#23314a; --muted:#657287;
  --teal:#3266d7; --violet:#c3457c; --danger:#af3751; --warning:#8b601b;
  --c-blue:#3266d7; --c-pink:#c3457c; --c-blue-soft:#edf3ff; --c-pink-soft:#fff0f6;
}
html[data-theme="studio"] body {background:var(--bg); color:var(--text); font-family:"Segoe UI","Malgun Gothic",sans-serif;}
html[data-theme="studio"] button, html[data-theme="studio"] input, html[data-theme="studio"] select {font-family:inherit;}
html[data-theme="studio"] .sidebar {width:178px; flex:0 0 178px; padding:28px 12px 24px; border-right:1px solid var(--line); background:#fff;}
html[data-theme="studio"] .wordmark {font-size:22px; letter-spacing:-1px; padding:0 8px; gap:8px;}
html[data-theme="studio"] .logo-mark {color:#fff; background:var(--c-blue); border-radius:8px; width:29px; height:29px;}
html[data-theme="studio"] .sidebar-tagline {font-size:10px; letter-spacing:.03em; color:var(--muted); margin:12px 8px 35px;}
html[data-theme="studio"] .nav-button {border-radius:7px; padding:12px 10px; font-size:12px; color:#637084; font-weight:600;}
html[data-theme="studio"] .nav-button:hover {background:#f4f6fa; color:#253c61;}
html[data-theme="studio"] .nav-button.active {background:var(--c-blue-soft); color:var(--c-blue); box-shadow:inset 3px 0 var(--c-blue);}
html[data-theme="studio"] .nav-icon {font-size:17px; width:23px; color:inherit;}
html[data-theme="studio"] .sidebar-bottom {padding:20px 8px 0; font-size:10px; color:var(--muted);}
html[data-theme="studio"] .status-dot {font-size:10px; color:#536782;}
html[data-theme="studio"] .topbar {background:rgba(255,255,255,.75); min-height:66px; padding:14px 32px; border-bottom:1px solid var(--line);}
html[data-theme="studio"] .workspace-name {font-size:10px; letter-spacing:.19em; color:#6d7d94;}
html[data-theme="studio"] .account {font-size:11px; gap:10px;}
html[data-theme="studio"] .main-content {max-width:1480px; padding:29px 32px 22px;}
html[data-theme="studio"] .page-heading {margin-bottom:22px;}
html[data-theme="studio"] .page-heading h1 {font-size:28px; letter-spacing:-1px; font-weight:750;}
html[data-theme="studio"] .page-heading p {font-size:12px; margin-top:7px; color:var(--muted);}
html[data-theme="studio"] .eyebrow {color:var(--c-blue); font-size:9px; letter-spacing:.2em;}
html[data-theme="studio"] .filter-bar {background:transparent; padding:0 0 22px; border:0; border-bottom:1px solid #dfe3e8; border-radius:0; margin-bottom:24px;}
html[data-theme="studio"] .filter-bar .field {font-size:11px; color:var(--muted);}
html[data-theme="studio"] select, html[data-theme="studio"] input {background:#fff; color:var(--text); border:1px solid #d8dfe9; border-radius:6px;}
html[data-theme="studio"] .button {background:#fff; color:#344867; border:1px solid #d6dfed; border-radius:6px; font-size:12px;}
html[data-theme="studio"] .button.primary {background:var(--c-blue); color:#fff; border-color:var(--c-blue);}
html[data-theme="studio"] .button.ghost {background:transparent; color:#465b7b;}
html[data-theme="studio"] .button:hover {border-color:#9aaecb; background:#f2f6fd;}
html[data-theme="studio"] .button.primary:hover {background:#2858bf;}
html[data-theme="studio"] .text-button {color:var(--c-blue);}
html[data-theme="studio"] .badge {background:#f0f4fb; color:#526b8d; border-color:#dce5f3;}
html[data-theme="studio"] .badge.success {background:#edf6f1; color:#27694c;}
html[data-theme="studio"] .badge.danger {background:#fff0f3; color:#a23b59;}
html[data-theme="studio"] .badge.warning {background:#fff7e9; color:#855b15;}
html[data-theme="studio"] .avatar {background:#eaf0fc; color:#486ba8; font-size:11px; font-weight:700; border-radius:9px;}
html[data-theme="studio"] .panel {background:#fff; border:1px solid var(--line); box-shadow:none; border-radius:10px;}
html[data-theme="studio"] table th {background:#f6f8fb; color:#748098; font-size:10px; font-weight:600;}
html[data-theme="studio"] table td {border-color:#eaf0f5; color:#34435c;}
html[data-theme="studio"] tbody tr:hover {background:#f8faff;}
html[data-theme="studio"] .metric-card, html[data-theme="studio"] .metric-section, html[data-theme="studio"] .metric-explorer, html[data-theme="studio"] .upload-box {background:#fff; border-color:var(--line);}
html[data-theme="studio"] .metric-details, html[data-theme="studio"] .metric-detail-group, html[data-theme="studio"] .metric-tabs {background:#f7f9fd; border-color:var(--line);}
html[data-theme="studio"] .notice {background:#eef3fe; color:#345780; border-color:#d5e1f8;}
html[data-theme="studio"] footer {font-size:10px; color:#788599;}
html[data-theme="studio"] :is(button,input,select,a,summary):focus-visible {outline:3px solid #93b5fa; outline-offset:3px;}
html[data-theme="studio"] .c-dashboard {display:flex; flex-direction:column; gap:23px;}
html[data-theme="studio"] .c-overview-strip {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:4px 0 5px;}
html[data-theme="studio"] .c-stat {padding:0 24px; border-left:1px solid #dfe3e8; display:flex; flex-direction:column; gap:10px; min-width:0;}
html[data-theme="studio"] .c-stat:first-child {padding-left:0; border-left:0;}
html[data-theme="studio"] .c-stat-label {font-size:11px; color:#59687e;}
html[data-theme="studio"] .c-stat strong {font-size:30px; font-weight:650; letter-spacing:-1.1px; line-height:1.2; font-variant-numeric:tabular-nums;}
html[data-theme="studio"] .c-stat small {font-size:10px; color:#748197;}
html[data-theme="studio"] .c-stat-blue strong {color:var(--c-blue);}
html[data-theme="studio"] .c-stat-pink strong {color:var(--c-pink);}
html[data-theme="studio"] .c-dashboard-grid {display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,1fr); gap:22px;}
html[data-theme="studio"] .c-card {background:#fff; border:1px solid #e3e6eb; border-radius:10px; padding:23px; min-width:0;}
html[data-theme="studio"] .c-card-heading {display:flex; align-items:center; justify-content:space-between; gap:12px;}
html[data-theme="studio"] .c-card-heading h2 {font-size:16px; line-height:1.5; margin:5px 0 0; letter-spacing:-.4px;}
html[data-theme="studio"] .c-kicker {color:#7d8ca3; font-size:9px; font-weight:700; letter-spacing:.14em;}
html[data-theme="studio"] .c-description {font-size:10px; line-height:1.6; color:#77849a; margin:7px 0 24px;}
html[data-theme="studio"] .c-count-chip {font-size:10px; white-space:nowrap; padding:6px 9px; background:var(--c-blue-soft); color:var(--c-blue); border-radius:5px;}
html[data-theme="studio"] .c-chart {display:flex; flex-direction:column; gap:14px; padding:2px 0 5px;}
html[data-theme="studio"] .c-chart-row {display:grid; grid-template-columns:90px minmax(0,1fr) 38px; align-items:center; gap:12px; min-height:19px;}
html[data-theme="studio"] .c-champion-name {font-size:11px; overflow-wrap:anywhere; color:#4c5d76;}
html[data-theme="studio"] .c-chart-track {height:11px; border-radius:2px; background:repeating-linear-gradient(90deg,#f5f7fb 0,#f5f7fb calc(25% - 1px),#e7edf7 calc(25% - 1px),#e7edf7 25%);}
html[data-theme="studio"] .c-chart-fill {height:100%; display:block; background:#6691ee; border-radius:2px;}
html[data-theme="studio"] .c-chart-value {font-size:11px; font-weight:600; color:#426496; text-align:right; font-variant-numeric:tabular-nums;}
html[data-theme="studio"] .c-chart-foot {display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px; margin-top:23px; padding-top:14px; border-top:1px solid #eef1f6; font-size:9px; line-height:1.6; color:#7a879a;}
html[data-theme="studio"] .c-link {font-size:10px; font-weight:600; white-space:nowrap;}
html[data-theme="studio"] .c-participation {display:flex; flex-direction:column;}
html[data-theme="studio"] .c-participant-list {display:flex; flex-direction:column; gap:5px; flex:1;}
html[data-theme="studio"] .c-participant-button {padding:10px 0; border:0; background:transparent; color:inherit; width:100%; text-align:left; border-radius:6px; cursor:pointer;}
html[data-theme="studio"] .c-participant-button:hover {background:#faf4f8;}
html[data-theme="studio"] .c-participant-inner {display:flex; align-items:center; gap:10px; width:100%;}
html[data-theme="studio"] .c-participant-inner .avatar {background:#f9edf3; color:#aa6688; flex-shrink:0;}
html[data-theme="studio"] .c-participant-body {flex:1; min-width:0;}
html[data-theme="studio"] .c-participant-line {display:flex; justify-content:space-between; gap:10px; font-size:11px; line-height:1.4;}
html[data-theme="studio"] .c-participant-line strong {font-weight:600; overflow-wrap:anywhere;}
html[data-theme="studio"] .c-participant-line > span {color:#7b6b82; font-size:10px; white-space:nowrap;}
html[data-theme="studio"] .c-mini-track {display:block; height:4px; background:#f5eef2; margin-top:8px; border-radius:3px;}
html[data-theme="studio"] .c-mini-track > span {display:block; height:100%; background:#db8bad; border-radius:3px;}
html[data-theme="studio"] .c-row-arrow {font-size:12px; color:#9c8d9d; margin-left:5px;}
html[data-theme="studio"] .c-participant-foot {margin-top:16px; padding-top:15px; border-top:1px solid #eef1f6; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:10px; color:#7a879a;}
html[data-theme="studio"] .c-recent .c-description {margin-bottom:15px;}
html[data-theme="studio"] .c-recent .table-scroll {border:1px solid #edf0f5; border-radius:6px;}
html[data-theme="studio"] .c-recent table td {padding:14px 13px;}
html[data-theme="studio"] .c-workspace-foot {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; color:#758298; font-size:10px;}
html[data-theme="studio"] .c-workspace-foot > div {display:flex; align-items:center; gap:7px;}
html[data-theme="studio"] .c-foot-dot {width:6px; height:6px; border-radius:50%; background:#7b98c7;}
html[data-theme="studio"] .c-comparison {display:flex; flex-direction:column; gap:18px;}
html[data-theme="studio"] .c-comparison-tools {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:13px;}
html[data-theme="studio"] .c-comparison-tools .comparison-controls {gap:18px; flex-wrap:wrap;}
html[data-theme="studio"] .c-comparison-tools .field {font-size:11px; color:#6f7c91; gap:8px;}
html[data-theme="studio"] .c-comparison-tools select {min-width:160px; font-size:11px;}
html[data-theme="studio"] .c-comparison-mode {font-size:10px; color:#77859b;}
html[data-theme="studio"] .c-comparison-layout {display:grid; grid-template-columns:minmax(0,1fr) 258px; gap:20px; align-items:start;}
html[data-theme="studio"] .c-comparison-card {padding:0; overflow:hidden;}
html[data-theme="studio"] .c-duel-header {display:grid; grid-template-columns:minmax(135px,.95fr) repeat(2,minmax(0,1fr)); border-bottom:1px solid #e5eaf1;}
html[data-theme="studio"] .c-duel-label {padding:23px 18px; display:flex; flex-direction:column; justify-content:center; gap:9px;}
html[data-theme="studio"] .c-duel-label > strong {font-size:17px; letter-spacing:-.5px;}
html[data-theme="studio"] .c-duel-label > span:last-child {font-size:9px; line-height:1.6; color:#7e8ba0;}
html[data-theme="studio"] .c-player-column {padding:20px 14px 24px; min-width:0;}
html[data-theme="studio"] .c-player-left {background:#f0f5ff; border-top:3px solid #5a83df;}
html[data-theme="studio"] .c-player-right {background:#fff2f7; border-top:3px solid #d379a0;}
html[data-theme="studio"] .c-player-label {font-size:9px; color:#6b80a5;}
html[data-theme="studio"] .c-player-right .c-player-label {color:#a4768b;}
html[data-theme="studio"] .c-player-identity {display:flex; gap:9px; align-items:center; margin-top:13px; min-width:0;}
html[data-theme="studio"] .c-player-identity > div {min-width:0;}
html[data-theme="studio"] .c-player-identity h2 {font-size:14px; line-height:1.4; font-weight:700; margin:0 0 6px; overflow-wrap:anywhere;}
html[data-theme="studio"] .c-player-identity .avatar {width:35px; height:35px; flex:0 0 35px; background:#dce7ff; color:#3e65b7; border-radius:9px;}
html[data-theme="studio"] .c-player-right .avatar {background:#f7dbe8; color:#ae5d82;}
html[data-theme="studio"] .c-player-games {font-size:9px; line-height:1.5; color:#78839a;}
html[data-theme="studio"] .c-matrix-head, html[data-theme="studio"] .c-matrix-row {display:grid; grid-template-columns:minmax(135px,.95fr) repeat(2,minmax(0,1fr));}
html[data-theme="studio"] .c-matrix-head {background:#fafbfd; color:#8290a5; font-size:9px; border-bottom:1px solid #e9edf4;}
html[data-theme="studio"] .c-matrix-head > span {padding:10px 18px; overflow-wrap:anywhere;}
html[data-theme="studio"] .c-matrix-row {border-bottom:1px solid #edf0f5; min-height:79px;}
html[data-theme="studio"] .c-matrix-row:last-child {border-bottom:0;}
html[data-theme="studio"] .c-matrix-row:hover {background:#fbfcfe;}
html[data-theme="studio"] .c-matrix-label {padding:18px; display:flex; flex-direction:column; justify-content:center; gap:6px;}
html[data-theme="studio"] .c-matrix-label strong {font-size:11px; line-height:1.5; font-weight:600;}
html[data-theme="studio"] .c-matrix-label small {font-size:9px; color:#8b97a9;}
html[data-theme="studio"] .c-matrix-value {padding:14px 18px 11px; border-left:1px solid #f0f2f7; min-width:0;}
html[data-theme="studio"] .c-matrix-number {font-size:19px; line-height:1.3; font-weight:600; letter-spacing:-.5px; font-variant-numeric:tabular-nums; white-space:nowrap; color:#7c899e;}
html[data-theme="studio"] .c-value-left.c-better .c-matrix-number {color:#3266d7;}
html[data-theme="studio"] .c-value-right.c-better .c-matrix-number {color:#c3457c;}
html[data-theme="studio"] .c-better-mark {font-size:6px; vertical-align:middle; padding-left:5px;}
html[data-theme="studio"] .c-value-track {height:4px; background:#edf1f8; border-radius:3px; margin:8px 0 5px;}
html[data-theme="studio"] .c-value-track > span {height:100%; display:block; border-radius:3px; background:#7a9be3;}
html[data-theme="studio"] .c-value-right .c-value-track {background:#f8edf3;}
html[data-theme="studio"] .c-value-right .c-value-track > span {background:#d58caa;}
html[data-theme="studio"] .c-value-unavailable {background:repeating-linear-gradient(90deg,#ebeff5 0,#ebeff5 5px,transparent 5px,transparent 8px);}
html[data-theme="studio"] .c-value-sample {font-size:9px; color:#8390a3;}
html[data-theme="studio"] .c-matrix-note {padding:15px 18px; background:#fafbfd; border-top:1px solid #e9edf4;}
html[data-theme="studio"] .c-matrix-note p {font-size:9px; line-height:1.8; margin:0; color:#76859b;}
html[data-theme="studio"] .c-matrix-note .c-warning {color:#95651f; margin-top:6px;}
html[data-theme="studio"] .c-opponents-shell {min-width:0;}
html[data-theme="studio"] .c-opponents-shell .opponents-panel {border-radius:10px; padding-top:21px;}
html[data-theme="studio"] .c-opponents-shell h2 {font-size:14px; margin-bottom:15px;}
html[data-theme="studio"] .c-opponents-shell input {font-size:11px; background:#f7f9fc; padding:10px;}
html[data-theme="studio"] .c-opponents-shell .opponent-head {font-size:10px; color:#8190a7; background:#f8f9fc;}
html[data-theme="studio"] .c-opponents-shell :is(.opponent-head,.opponent-row) {grid-template-columns:minmax(0,1fr) 49px 38px; gap:7px; padding:13px 12px;}
html[data-theme="studio"] .c-opponents-shell .opponent-row {font-size:11px;}
html[data-theme="studio"] .c-opponents-shell .opponent-name {gap:7px; font-size:11px;}
html[data-theme="studio"] .c-opponents-shell .opponent-name strong {font-weight:600;}
html[data-theme="studio"] .c-opponents-shell .opponent-button {background:#fff; color:#50617b; border-bottom:1px solid #edf0f5;}
html[data-theme="studio"] .c-opponents-shell .opponent-button:hover {background:#fbf7fa;}
html[data-theme="studio"] .c-opponents-shell .opponent-button.selected {background:#fff1f7; border-left-color:#cb6a96; color:#a83d70;}
html[data-theme="studio"] .c-opponents-shell .opponent-button.selected .avatar {background:#f6dce8; color:#ac6385;}
html[data-theme="studio"] .c-opponents-shell .small {font-size:9px; line-height:1.7;}
html[data-theme="studio"] :is(.c-kicker,.c-description,.c-stat small,.c-chart-foot,.c-participant-foot,.c-workspace-foot,.c-comparison-mode,.c-player-games,.c-matrix-label small,.c-value-sample,.c-matrix-note p,.c-matrix-head,.c-duel-label > span:last-child) {color:#65748a;}
html[data-theme="studio"] .c-matrix-number {color:#65748a;}
html[data-theme="studio"] .c-matrix-note .c-warning {color:#895b15;}
html[data-theme="studio"] .c-opponents-shell .opponent-head {color:#65748a;}

@media (min-width:1500px) {html[data-theme="studio"] .main-content {padding-left:42px; padding-right:42px;}}
@media (max-width:1100px) {
  html[data-theme="studio"] .sidebar {width:156px; flex-basis:156px;}
  html[data-theme="studio"] .main-content {padding:25px 22px 20px;}
  html[data-theme="studio"] .c-dashboard-grid {grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr); gap:16px;}
  html[data-theme="studio"] .c-card {padding:18px;}
  html[data-theme="studio"] .c-comparison-card {padding:0;}
  html[data-theme="studio"] .c-comparison-layout {grid-template-columns:minmax(0,1fr) 228px; gap:14px;}
  html[data-theme="studio"] .c-player-identity {flex-direction:column; align-items:flex-start;}
  html[data-theme="studio"] .c-duel-header, html[data-theme="studio"] .c-matrix-head, html[data-theme="studio"] .c-matrix-row {grid-template-columns:minmax(110px,.95fr) repeat(2,minmax(0,1fr));}
  html[data-theme="studio"] .c-matrix-label, html[data-theme="studio"] .c-matrix-value {padding-left:12px; padding-right:12px;}
  html[data-theme="studio"] .c-matrix-number {font-size:16px;}
  html[data-theme="studio"] .c-stat {padding:0 16px;}
  html[data-theme="studio"] .c-stat strong {font-size:25px;}
}
@media (max-width:900px) {
  html[data-theme="studio"] .c-dashboard-grid {grid-template-columns:1fr;}
  html[data-theme="studio"] .c-participant-list {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px;}
  html[data-theme="studio"] .c-comparison-layout {grid-template-columns:minmax(0,1fr);}
  html[data-theme="studio"] .c-opponents-shell .opponent-list {max-height:330px;}
  html[data-theme="studio"] .c-player-identity {flex-direction:row;}
  html[data-theme="studio"] .c-matrix-number {font-size:20px;}
}
@media (max-width:720px) {
  html[data-theme="studio"] .app-shell {display:block;}
  html[data-theme="studio"] .sidebar {width:100%; padding:13px 16px 0; border-right:0; border-bottom:1px solid var(--line);}
  html[data-theme="studio"] .wordmark {font-size:20px; padding:0;}
  html[data-theme="studio"] .logo-mark {width:26px; height:26px;}
  html[data-theme="studio"] .sidebar-tagline, html[data-theme="studio"] .sidebar-bottom {display:none;}
  html[data-theme="studio"] .sidebar nav {display:flex; flex-direction:row; overflow-x:auto; margin-top:13px; gap:4px; padding-bottom:6px;}
  html[data-theme="studio"] .nav-button {flex:0 0 auto; font-size:11px; padding:9px 10px; white-space:nowrap;}
  html[data-theme="studio"] .nav-button.active {box-shadow:none;}
  html[data-theme="studio"] .nav-icon {display:none;}
  html[data-theme="studio"] .topbar {padding:11px 17px; min-height:49px;}
  html[data-theme="studio"] .workspace-name {font-size:8px; letter-spacing:.08em;}
  html[data-theme="studio"] .account {gap:6px; font-size:10px;}
  html[data-theme="studio"] .account .avatar {width:24px; height:24px;}
  html[data-theme="studio"] .main-content {padding:23px 17px 18px;}
  html[data-theme="studio"] .page-heading h1 {font-size:25px;}
  html[data-theme="studio"] .page-heading p {font-size:10px; max-width:230px; line-height:1.7;}
  html[data-theme="studio"] .page-heading {gap:9px; align-items:center; margin-bottom:19px;}
  html[data-theme="studio"] .page-heading > .button {font-size:10px; padding:8px; white-space:nowrap;}
  html[data-theme="studio"] .filter-bar {gap:13px; margin-bottom:21px; padding-bottom:17px;}
  html[data-theme="studio"] .filter-controls {gap:12px; width:100%;}
  html[data-theme="studio"] .filter-controls .field {flex:1; min-width:0; flex-direction:column; align-items:flex-start; gap:6px;}
  html[data-theme="studio"] .filter-controls select {width:100%; min-width:0;}
  html[data-theme="studio"] .c-overview-strip {grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:21px;}
  html[data-theme="studio"] .c-stat {padding-left:18px; gap:7px;}
  html[data-theme="studio"] .c-stat:nth-child(3) {padding-left:0; border-left:0;}
  html[data-theme="studio"] .c-stat strong {font-size:27px;}
  html[data-theme="studio"] .c-stat small {font-size:9px;}
  html[data-theme="studio"] .c-dashboard {gap:21px;}
  html[data-theme="studio"] .c-card {padding:18px 16px;}
  html[data-theme="studio"] .c-card-heading h2 {font-size:15px;}
  html[data-theme="studio"] .c-card-heading {align-items:flex-start;}
  html[data-theme="studio"] .c-count-chip {font-size:9px; padding:5px 7px; margin-top:3px;}
  html[data-theme="studio"] .c-chart-row {grid-template-columns:78px minmax(0,1fr) 33px; gap:10px;}
  html[data-theme="studio"] .c-chart {gap:16px;}
  html[data-theme="studio"] .c-chart-foot {font-size:9px;}
  html[data-theme="studio"] .c-participant-list {grid-template-columns:1fr;}
  html[data-theme="studio"] .c-participant-line {font-size:12px;}
  html[data-theme="studio"] .c-recent .c-card-heading {flex-direction:column; gap:6px;}
  html[data-theme="studio"] .c-comparison-tools .comparison-controls {width:100%; display:grid; grid-template-columns:1fr; gap:11px;}
  html[data-theme="studio"] .c-comparison-tools .field {display:grid; grid-template-columns:85px minmax(0,1fr); align-items:center; width:100%;}
  html[data-theme="studio"] .c-comparison-tools select {min-width:0; width:100%; font-size:11px;}
  html[data-theme="studio"] .c-comparison-card {padding:0;}
  html[data-theme="studio"] .c-duel-header {grid-template-columns:repeat(2,minmax(0,1fr));}
  html[data-theme="studio"] .c-duel-label {grid-column:1 / -1; padding:16px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:baseline; gap:8px;}
  html[data-theme="studio"] .c-duel-label .c-kicker {width:100%;}
  html[data-theme="studio"] .c-duel-label > strong {font-size:16px;}
  html[data-theme="studio"] .c-player-column {padding:15px 13px 17px;}
  html[data-theme="studio"] .c-player-identity {align-items:flex-start; gap:7px;}
  html[data-theme="studio"] .c-player-identity h2 {font-size:12px;}
  html[data-theme="studio"] .c-player-identity .avatar {width:29px; height:29px; flex-basis:29px;}
  html[data-theme="studio"] .c-player-games {font-size:8px;}
  html[data-theme="studio"] .c-matrix-head {grid-template-columns:repeat(2,minmax(0,1fr));}
  html[data-theme="studio"] .c-matrix-head > span:first-child {display:none;}
  html[data-theme="studio"] .c-matrix-head > span {padding:10px 13px;}
  html[data-theme="studio"] .c-matrix-row {grid-template-columns:repeat(2,minmax(0,1fr)); padding:13px 0 4px;}
  html[data-theme="studio"] .c-matrix-label {grid-column:1 / -1; flex-direction:row; align-items:baseline; justify-content:space-between; padding:0 14px 3px; gap:9px;}
  html[data-theme="studio"] .c-matrix-label strong {font-size:11px;}
  html[data-theme="studio"] .c-matrix-label small {font-size:8px; white-space:nowrap;}
  html[data-theme="studio"] .c-matrix-value {padding:7px 14px 10px;}
  html[data-theme="studio"] .c-value-left {border-left:0;}
  html[data-theme="studio"] .c-matrix-number {font-size:21px;}
  html[data-theme="studio"] .c-matrix-note {padding:13px 14px;}
  html[data-theme="studio"] .c-opponents-shell .opponents-panel {padding-top:20px;}
  html[data-theme="studio"] footer {font-size:9px; line-height:1.7;}
}
@media (prefers-reduced-motion:reduce) {html[data-theme="studio"] * {scroll-behavior:auto!important;}}

/* Official champion square assets are served locally; no third-party image calls. */
.champion-image {display:inline-flex; position:relative; vertical-align:middle; align-items:center; justify-content:center; width:var(--champion-size,32px); height:var(--champion-size,32px); flex:0 0 var(--champion-size,32px); overflow:hidden; border-radius:8px; background:#eaf0fa; border:1px solid #d4deed; box-shadow:0 1px 2px #203c6210;}
.champion-image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.champion-image img[hidden], .champion-image-fallback[hidden] {display:none;}
.champion-image-fallback {font-size:calc(var(--champion-size,32px) * .42); font-weight:650; color:#7585a0;}
.champion-label {display:inline-flex; align-items:center; gap:9px; max-width:100%; vertical-align:middle;}
.champion-label-name {min-width:0; overflow-wrap:anywhere;}
.representative-champion {display:inline-flex; align-items:center; flex-shrink:0;}
html[data-theme="studio"] .c-chart-row {grid-template-columns:148px minmax(0,1fr) 38px; min-height:32px;}
html[data-theme="studio"] .c-representative-note {display:block; color:#758198; font-size:9px; line-height:1.6; margin-top:5px; overflow-wrap:anywhere;}
html[data-theme="studio"] .c-player-identity {align-items:flex-start;}
html[data-theme="studio"] .c-player-left .champion-image {border-color:#a9bce3;}
html[data-theme="studio"] .c-player-right .champion-image {border-color:#e1aac3;}
html[data-theme="studio"] .c-participant-inner .champion-image {border-color:#e5ccd9;}
html[data-theme="studio"] .profile-champion-note {font-size:11px; color:#697b94; margin-top:7px;}
html[data-theme="studio"] .profile-heading > .representative-champion .champion-image {border-radius:13px;}
html[data-theme="studio"] footer {flex-wrap:wrap;}
html[data-theme="studio"] .footer-legal {flex:1 1 100%; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px; padding-top:6px; max-width:100%; line-height:1.8; overflow-wrap:anywhere;}
html[data-theme="studio"] .footer-legal a {color:#647a9a; text-decoration:underline; text-underline-offset:3px;}
@media (max-width:720px) {
  html[data-theme="studio"] .c-chart-row {grid-template-columns:125px minmax(0,1fr) 33px; gap:9px;}
  html[data-theme="studio"] .c-player-identity {flex-direction:column;}
  html[data-theme="studio"] .c-player-identity > .champion-image {--champion-size:40px!important;}
  html[data-theme="studio"] .c-player-identity h2 {margin-top:3px;}
  html[data-theme="studio"] .c-player-identity .c-representative-note {font-size:9px;}
  html[data-theme="studio"] .profile-heading .representative-champion .champion-image {--champion-size:50px!important;}
  html[data-theme="studio"] .footer-legal {font-size:9px;}
}

/* Production surfaces that are outside the dashboard/comparison preview. */
html[data-theme="studio"] :is(.app-shell,.main-shell,.main-content) {min-width:0;}
html[data-theme="studio"] .app-shell {min-height:100vh;}
html[data-theme="studio"] .main-content {width:100%;}
html[data-theme="studio"] .design-metric {min-width:0;}
html[data-theme="studio"] .design-metric strong {font-variant-numeric:tabular-nums;}
html[data-theme="studio"] :is(button,a,input,select) {touch-action:manipulation;}
html[data-theme="studio"] :is(img,svg) {max-width:100%;}
html[data-theme="studio"] .studio-opponent-title {display:flex; align-items:center; justify-content:space-between; gap:8px; padding-right:18px; margin-bottom:15px;}
html[data-theme="studio"] .studio-opponent-title h2 {margin:0;}
html[data-theme="studio"] .studio-opponent-title small {color:var(--muted); font-size:10px; white-space:nowrap;}
html[data-theme="studio"] .empty-opponent {padding:25px 18px; font-size:11px; line-height:1.8; color:var(--muted);}
html[data-theme="studio"] .sidebar-bottom p {color:var(--muted);}
html[data-theme="studio"] .avatar {border-color:#d5dfef;}
html[data-theme="studio"] .teal-avatar {background:#edf3ff; color:var(--c-blue); border-color:#adc5f3;}
html[data-theme="studio"] .violet-avatar {background:#fff0f6; color:var(--c-pink); border-color:#eac0d2;}
html[data-theme="studio"] .filter-note {color:var(--muted);}
html[data-theme="studio"] .skip-link {color:#fff; background:var(--c-blue); border-radius:5px; z-index:100;}
html[data-theme="studio"] .local-banner {color:#805a19; background:#fff7e7; border-color:#eddfbc;}
html[data-theme="studio"] .initial-state {padding:24px; text-align:center; color:var(--muted);}
html[data-theme="studio"] noscript {display:block; padding:20px; color:#805a19; background:#fff7e7; text-align:center;}
html[data-theme="studio"] ::selection {background:#dce8ff; color:#234888;}
html[data-theme="studio"] input::placeholder {color:#697a91; opacity:1;}
html[data-theme="studio"] .empty h3 {color:#374c6c;}
html[data-theme="studio"] .empty-symbol {color:#7191c4;}
html[data-theme="studio"] .empty {overflow-wrap:anywhere;}
html[data-theme="studio"] .leader-button {border-color:#e4eaf3;}
html[data-theme="studio"] .leader-button:hover {background:#f5f8fe;}
html[data-theme="studio"] .rank {color:#65748a;}
html[data-theme="studio"] .accent-panel {background:linear-gradient(125deg,#edf3ff,#fff2f7); border-color:#dce4f0;}
html[data-theme="studio"] .accent-panel p {color:#617590;}
html[data-theme="studio"] .accent-decoration {color:#c4d4f3;}
html[data-theme="studio"] :is(.roster-button,.opponent-button):hover {background:#f3f6fc;}
html[data-theme="studio"] .roster-button.selected {color:#2858b6; background:#edf3ff; border-color:#bdd0f4;}
html[data-theme="studio"] .roster-row .user-cell {min-width:0;}
html[data-theme="studio"] .roster-row > span {flex-shrink:0;}
html[data-theme="studio"] .metric-card small {color:#65748a;}
html[data-theme="studio"] .metric-evidence > span {color:#5c7190;}
html[data-theme="studio"] .metric-id {color:#68768b;}
html[data-theme="studio"] .metric-status.unknown {color:#65748a;}
html[data-theme="studio"] .metric-status.local {color:#9b4979;}
html[data-theme="studio"] .metric-definition {color:#5d6e85;}
html[data-theme="studio"] .metric-unit {color:#3a61a4; background:#edf3ff;}
html[data-theme="studio"] .metric-missing {color:#637289;}
html[data-theme="studio"] .metric-tabs {background:transparent;}
html[data-theme="studio"] .metric-details {background:transparent;}
html[data-theme="studio"] .opponent-head {background:#f8f9fc;}
html[data-theme="studio"] .opponent-button {border-bottom-color:#e7ecf4;}
html[data-theme="studio"] .opponent-button.selected {background:#fff1f7; border-left-color:#cb6a96;}
html[data-theme="studio"] .comparison-controls {margin-bottom:0;}
html[data-theme="studio"] :is(.versus,.metric-name,.metric-name small,.sample-line) {color:#65748a;}
html[data-theme="studio"] .metric-line strong {color:#65748a;}
html[data-theme="studio"] .comparison-bar {background:#eaf0f8;}
html[data-theme="studio"] .comparison-bar.unavailable span {background:#cbd5e5;}
html[data-theme="studio"] .upload-box {background:linear-gradient(135deg,#f3f7ff,#fff); border:1px dashed #a9bddd;}
html[data-theme="studio"] .upload-icon {color:var(--c-blue); background:#eaf1ff; border-color:#c6d6f1;}
html[data-theme="studio"] .upload-box label.button {cursor:pointer;}
html[data-theme="studio"] .upload-box label.button.disabled {cursor:wait;}
html[data-theme="studio"] .upload-box:focus-within {outline:3px solid #93b5fa; outline-offset:3px;}
html[data-theme="studio"] .notice {color:#345780; background:#eef3fe; border-color:#d5e1f8;}
html[data-theme="studio"] .notice.error {color:#93334b; background:#fff0f3; border-color:#edc4cf;}
html[data-theme="studio"] .notice.success {color:#28654f; background:#edf7f1; border-color:#c6e1d1;}
html[data-theme="studio"] .notice.warning {color:#805a19; background:#fff7e7; border-color:#eddfbc;}
html[data-theme="studio"] .notice .icon-button {padding:1px 4px; color:inherit;}
html[data-theme="studio"] .auth-layout {min-height:100vh; background:#f6f5f1;}
html[data-theme="studio"] .auth-art {
  background:radial-gradient(ellipse at 24% 20%,#e0eaff 0,transparent 55%),radial-gradient(ellipse at 75% 78%,#f7dce9 0,transparent 55%),#edf2fa;
  border-color:#dbe3ef; padding:clamp(32px,5vw,76px);
}
html[data-theme="studio"] .auth-art-label {color:#36547f; font-size:clamp(29px,3.2vw,48px); letter-spacing:-1.8px; line-height:1.35;}
html[data-theme="studio"] .orbit {border-color:#93b2e166; box-shadow:0 0 70px #9abbf011 inset;}
html[data-theme="studio"] .orbit.two {border-color:#d38dae55; box-shadow:none;}
html[data-theme="studio"] .auth-card {padding:45px 38px; overflow-wrap:anywhere;}
html[data-theme="studio"] .auth-card h1 {font-size:30px; color:#263e61;}
html[data-theme="studio"] .auth-card .wordmark {font-size:27px;}
html[data-theme="studio"] .auth-card > .notice {line-height:1.8;}
html[data-theme="studio"] .login-form .button {min-height:44px;}

/* The base stylesheet switches to a top nav at 980px; keep its width consistent. */
@media (min-width:721px) and (max-width:980px) {
  html[data-theme="studio"] .app-shell {display:block;}
  html[data-theme="studio"] .sidebar {width:100%; flex-basis:auto; padding:17px 22px; border-right:0; border-bottom:1px solid var(--line);}
  html[data-theme="studio"] .sidebar nav {flex-direction:row; flex-wrap:nowrap; overflow-x:auto; margin-top:17px; gap:5px;}
  html[data-theme="studio"] .nav-button {flex:0 0 auto; padding:10px 12px; white-space:nowrap;}
  html[data-theme="studio"] .nav-button.active {box-shadow:none;}
  html[data-theme="studio"] .sidebar-tagline, html[data-theme="studio"] .sidebar-bottom {display:none;}
}
@media (max-width:720px) {
  html[data-theme="studio"] .sidebar {flex-basis:auto;}
  html[data-theme="studio"] .sidebar nav {flex-wrap:nowrap; -webkit-overflow-scrolling:touch;}
  html[data-theme="studio"] .account > .text-button {padding:6px 0 6px 5px; font-size:10px; white-space:nowrap;}
  html[data-theme="studio"] .account > span:not(.avatar):not(.badge) {max-width:145px;}
  html[data-theme="studio"] .auth-card {padding:40px 25px;}
  html[data-theme="studio"] .auth-card h1 {font-size:28px;}
  html[data-theme="studio"] .auth-card .wordmark {margin-bottom:35px;}
  html[data-theme="studio"] .auth-card > .button {font-size:11px;}
  html[data-theme="studio"] .roster-row {padding:10px 6px; gap:5px;}
  html[data-theme="studio"] .roster-row .user-cell strong {font-size:10px;}
  html[data-theme="studio"] .row-actions {flex-wrap:wrap; gap:6px;}
  html[data-theme="studio"] .panel-heading {flex-wrap:wrap; gap:12px;}
  html[data-theme="studio"] .metric-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  html[data-theme="studio"] .metric-card strong {font-size:19px; overflow-wrap:anywhere;}
  html[data-theme="studio"] .upload-box {padding:30px 18px;}
  html[data-theme="studio"] .notice {font-size:11px;}
}