:root {
    --bg: #0b0d12; --panel: rgba(18, 23, 34, 0.88); --panel-border: rgba(255,255,255,.08);
    --text: #f5f7fb; --muted: #a8b0c2; --primary: #5da8ff; --primary-strong: #2d7dff;
    --shadow: 0 24px 60px rgba(0,0,0,.32); --radius-lg: 24px; --radius-md: 16px; --max-width: 1480px;
}
html, body.mtc-body { margin:0; padding:0; background:
 radial-gradient(circle at top left, rgba(52,84,145,.22), transparent 28%),
 radial-gradient(circle at top right, rgba(0,200,255,.12), transparent 26%), linear-gradient(180deg,#0a0d13 0%,#080a10 100%);
 color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",sans-serif; }
html.mtc-light, html.mtc-light body.mtc-body { filter: invert(1) hue-rotate(180deg); }
.mtc-shell { width:min(calc(100% - 32px), var(--max-width)); margin:0 auto; padding:28px 0 60px; }
.mtc-hero,.mtc-panel,.mtc-tabbar { backdrop-filter: blur(16px); }
.mtc-hero { display:grid; grid-template-columns:1.7fr 1fr; gap:20px; background:linear-gradient(180deg, rgba(20,28,42,.92), rgba(14,18,28,.9)); border:1px solid var(--panel-border); box-shadow:var(--shadow); border-radius:32px; padding:28px; margin-bottom:22px; }
.mtc-badge { display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(93,168,255,.12); color:#d7e8ff; font-size:12px; letter-spacing:.08em; font-weight:700; }
.mtc-hero h1 { margin:14px 0 10px; font-size:clamp(32px,5vw,48px); line-height:1.08; }
.mtc-hero p { margin:0; color:var(--muted); line-height:1.7; font-size:16px; }
.mtc-hero__actions,.mtc-controls,.mtc-inline-stats,.mtc-tab-shortcuts,.mtc-tabbar,.mtc-records { display:flex; flex-wrap:wrap; gap:12px; }
.mtc-btn,.mtc-chip,.mtc-tab { appearance:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); border-radius:14px; padding:12px 16px; font-size:14px; font-weight:700; cursor:pointer; transition:.18s ease; }
.mtc-btn:hover,.mtc-chip:hover,.mtc-tab:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); }
.mtc-btn--primary,.mtc-chip.is-active,.mtc-tab.is-active { background:linear-gradient(180deg, rgba(93,168,255,.92), rgba(45,125,255,.85)); border-color:transparent; color:#fff; }
.mtc-hero__stats { display:grid; gap:12px; }
.mtc-stat-card,.mtc-info-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px; }
.mtc-stat-card span,.mtc-info-card span { display:block; color:var(--muted); font-size:13px; margin-bottom:8px; }
.mtc-stat-card strong { font-size:28px; }
.mtc-grid-top { display:grid; grid-template-columns:1.45fr .95fr; gap:18px; margin-bottom:18px; }
.mtc-panel { background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow); }
.mtc-panel__head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:18px; }
.mtc-panel__head h2 { margin:0 0 8px; font-size:24px; }
.mtc-panel__head p,.mtc-list,.mtc-note-box p { margin:0; color:var(--muted); line-height:1.65; }
.mtc-tabbar { position:sticky; top:12px; z-index:30; margin-bottom:18px; padding:12px; background:rgba(12,16,24,.82); border:1px solid var(--panel-border); border-radius:18px; overflow-x:auto; }
.mtc-main { display:grid; gap:18px; }
.mtc-tabpanel { display:none; }
.mtc-tabpanel.is-active { display:block; }
.mtc-controls label { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--muted); font-size:14px; }
.mtc-controls select,.mtc-controls input[type="range"] { accent-color:var(--primary); }
.mtc-controls select { background:#111723; color:var(--text); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px 10px; }
.mtc-canvas-wrap { border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden; background:#070a10; min-height:220px; }
 .mtc-canvas-wrap canvas { width:100%; height:100%; display:block; }
.mtc-canvas-wrap--xl { height:360px; }
.mtc-note-box { margin-top:14px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.mtc-reaction-layout { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(280px, .95fr); gap:16px; }
.mtc-reaction-main, .mtc-reaction-side { display:grid; gap:16px; }
.mtc-reaction-meta { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.mtc-reaction-board { min-height:220px; border-radius:22px; display:flex; align-items:center; justify-content:center; text-align:center; padding:22px; border:1px solid rgba(255,255,255,.08); font-weight:700; font-size:20px; cursor:pointer; user-select:none; line-height:1.5; }
.mtc-reaction-board.is-idle { background:#101621; }
.mtc-reaction-board.is-wait { background:linear-gradient(180deg,#543313,#6b4317); }
.mtc-reaction-board.is-ready { background:linear-gradient(180deg,#0f6f39,#13a757); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 36px rgba(41,255,138,.16); }
.mtc-reaction-board.is-done { background:linear-gradient(180deg,#17314f,#244a77); }
.mtc-reaction-board.is-fail { background:linear-gradient(180deg,#4b1d1d,#7a2424); }
.mtc-reaction-guide { padding:16px 18px; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.mtc-reaction-guide h3 { margin:0 0 10px; }
.mtc-reaction-guide ul { margin:0; padding-left:18px; display:grid; gap:8px; color:#c7d6ea; }
.mtc-record-pill strong { display:block; }
.mtc-record-pill small { opacity:.72; font-size:11px; }
.mtc-graph-panel--compact { margin-top:0; }
@media (max-width: 980px) {
  .mtc-reaction-layout { grid-template-columns:1fr; }
  .mtc-reaction-meta { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.mtc-record-pill { display:inline-flex; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.mtc-empty { color:var(--muted); }
.mtc-text-test,.mtc-viewing-test,.mtc-uniformity-screen,.mtc-pixel-screen { border-radius:18px; border:1px solid rgba(255,255,255,.08); }
.mtc-text-test { padding:20px; line-height:1.7; }
.mtc-text-test.is-dark { background:#0b0f16; color:#f5f7fb; }
.mtc-text-test.is-light { background:#fff; color:#111; }
.mtc-text-test.is-gray { background:#d7dbe4; color:#111; }
.mtc-text-test pre { overflow:auto; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.06); }
.mtc-text-test .size-12 { font-size:12px; } .mtc-text-test .size-13 { font-size:13px; } .mtc-text-test .size-14 { font-size:14px; } .mtc-text-test .size-16 { font-size:16px; } .mtc-text-test .size-22 { font-size:22px; } .weight-700 { font-weight:700; }
.mtc-gamma-grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.mtc-gamma-cell { min-height:90px; border-radius:14px; position:relative; border:1px solid rgba(255,255,255,.08); }
.mtc-gamma-cell span { position:absolute; right:10px; bottom:8px; font-size:12px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.mtc-gamma-cell--bright span { color:#111; text-shadow:none; }
.mtc-view-gradient { height:260px; border-radius:18px; background:linear-gradient(90deg,#000 0%, #111 16%, #555 50%, #bbb 76%, #fff 100%); }
.mtc-view-blocks { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px; }
.mtc-view-blocks span,.mtc-blackcrush b { display:block; min-height:220px; border-radius:12px; }
.mtc-blackcrush { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:8px; }
.mtc-blackcrush b { color:#fff; font-size:12px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px; }
.mtc-uniformity-screen,.mtc-pixel-screen { min-height:420px; background:#000; position:relative; }
.mtc-pixel-dot { position:absolute; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.2), 0 0 18px rgba(255,255,255,.9); }
.mtc-pixel-dot.center { top:50%; left:50%; transform:translate(-50%,-50%); }
.mtc-pixel-dot.tl { top:16px; left:16px; } .mtc-pixel-dot.tr { top:16px; right:16px; } .mtc-pixel-dot.bl { bottom:16px; left:16px; } .mtc-pixel-dot.br { bottom:16px; right:16px; }
.mtc-pixel-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size:20px 20px; }
.mtc-info-grid,.mtc-check-grid,.mtc-guide-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.mtc-check-group,.mtc-guide-grid article { border-radius:18px; padding:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.mtc-check-group h3,.mtc-guide-grid h3 { margin:0 0 12px; }
.mtc-checklist,.mtc-list { padding-left:18px; }
.mtc-checklist li,.mtc-list li { margin:8px 0; }
.mtc-checklist.is-done li::marker { color:#21c16b; } .mtc-checklist.is-todo li::marker { color:#ffb020; }
@media (max-width: 980px) {
  .mtc-hero,.mtc-grid-top,.mtc-info-grid,.mtc-check-grid,.mtc-guide-grid { grid-template-columns:1fr; }
  .mtc-canvas-wrap--xl { height:280px; }
  .mtc-gamma-grid { grid-template-columns:repeat(6, minmax(0,1fr)); }
}

.mtc-refresh-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:16px; }
.mtc-refresh-stats .mtc-info-card strong { font-size:22px; }
.mtc-graph-panel { margin-top:16px; padding:18px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.mtc-graph-panel__head { margin-bottom:12px; }
.mtc-graph-panel__head h3 { margin:0 0 8px; font-size:18px; }
.mtc-graph-panel__head p { margin:0; color:var(--muted); line-height:1.6; }
.mtc-canvas-wrap--graph { height:220px; }
@media (max-width: 980px) {
  .mtc-refresh-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .mtc-refresh-stats { grid-template-columns:1fr; }
}

.mtc-motion-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.mtc-motion-legend .mtc-record-pill{font-size:13px;}
.mtc-motion-legend .mtc-record-pill b{font-weight:800;}
.mtc-guide-grid--motion{margin-top:16px;}


.mtc-tabpanel#tab-tearing .mtc-canvas-wrap--xl{height:380px;}
.mtc-tabpanel#tab-tearing .mtc-info-card strong{font-size:20px;}


.mtc-text-test { --mtc-text-contrast:100%; --mtc-text-scale:1; filter:contrast(var(--mtc-text-contrast)); }
.mtc-text-test.is-sepia { background:#efe4cf; color:#2b241d; }
.mtc-text-test.font-serif { font-family: Georgia, "Times New Roman", serif; }
.mtc-text-test.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mtc-text-test.font-sans { font-family: Inter, Pretendard, system-ui, -apple-system, sans-serif; }
.mtc-text-test.is-spaced { letter-spacing:.04em; }
.mtc-text-card { padding:18px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); margin-bottom:14px; transform:scale(var(--mtc-text-scale)); transform-origin:top left; width:min(100%, calc(100% / var(--mtc-text-scale))); }
.mtc-text-card.cols-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.mtc-text-card .muted { opacity:.76; }
.mtc-text-card .size-11 { font-size:11px; }
.mtc-text-card .size-17 { font-size:17px; }
.mtc-text-card .size-20 { font-size:20px; }
.mtc-text-card .size-24 { font-size:24px; }
.mtc-text-card .tracking-wide { letter-spacing:.08em; }
.mtc-text-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 14px; }
.mtc-text-metrics { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:16px; }
.mtc-subpixel-box { display:grid; gap:10px; margin-top:12px; }
.mtc-subpixel-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }
.mtc-subpixel-row.rgb b { background:linear-gradient(90deg,#f55 0 33%,#6f6 33% 66%,#59f 66% 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mtc-subpixel-row.gray b { color:#cfd7e6; }
.mtc-text-test.has-subpixel pre, .mtc-text-test.has-subpixel p { text-shadow:.35px 0 rgba(255,0,0,.18), -.35px 0 rgba(0,120,255,.18); }
.mtc-ui-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.mtc-ui-badge,.mtc-ui-chip,.mtc-ui-btn,.mtc-ui-caption { display:inline-flex; align-items:center; border-radius:999px; padding:8px 12px; font-size:13px; border:1px solid rgba(255,255,255,.12); }
.mtc-ui-badge { font-weight:700; }
.mtc-ui-btn { background:rgba(93,168,255,.14); }
.mtc-ui-caption { border-radius:12px; }
@media (max-width: 900px) { .mtc-text-card.cols-2 { grid-template-columns:1fr; } }


.mtc-gamma-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.mtc-gamma-panel { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:16px; }
.mtc-gamma-panel h3 { margin:0 0 12px; font-size:16px; }
.mtc-gamma-grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:10px; margin-bottom:0; }
.mtc-gamma-cell { min-height:90px; border-radius:14px; position:relative; border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.mtc-gamma-cell::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%, rgba(0,0,0,.18)); opacity:.9; pointer-events:none; }
.mtc-gamma-cell span { position:absolute; right:10px; bottom:8px; font-size:12px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); z-index:1; }
.mtc-gamma-cell--bright span { color:#111; text-shadow:none; }
.mtc-gamma-patterns { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:16px; }
.mtc-gamma-pattern-card { border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:16px; background:rgba(255,255,255,.03); }
.mtc-gamma-pattern-card h4 { margin:0 0 6px; font-size:15px; }
.mtc-gamma-pattern-card p { margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.55; }
.mtc-gamma-pattern-strip { height:118px; border-radius:14px; border:1px solid rgba(255,255,255,.08); overflow:hidden; position:relative; }
.mtc-gamma-pattern-strip.is-invert { filter:invert(1) hue-rotate(180deg); }
.mtc-gamma-pattern-strip.is-focus::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at center, rgba(255,255,255,.14), transparent 55%); pointer-events:none; }
.mtc-gamma-pattern-strip[data-mode="bars"] { background-size:100% 100%; }
.mtc-gamma-pattern-strip[data-mode="checker"]::after,
.mtc-gamma-pattern-strip[data-mode="mix"]::after { content:""; position:absolute; inset:0; background-image:linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.08) 75%, transparent 75%, transparent); background-size:18px 18px; mix-blend-mode:overlay; opacity:.55; }
.mtc-gamma-pattern-strip[data-mode="mix"]::before { content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }
.mtc-gamma-ruler { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.mtc-gamma-ruler span { flex:1 1 22%; min-width:70px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:12px; color:var(--muted); }
.mtc-inline-stats .mtc-stat-card { min-width:160px; }
@media (max-width: 980px) {
  .mtc-gamma-layout, .mtc-gamma-patterns { grid-template-columns:1fr; }
}


.mtc-viewing-stage { display:grid; gap:14px; margin-top:16px; }
.mtc-viewing-stage.mode-single { grid-template-columns:1fr; }
.mtc-viewing-stage.mode-split-h { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mtc-viewing-stage.mode-split-v { grid-template-columns:1fr; }
.mtc-viewing-stage.mode-quad { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mtc-view-panel { border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); padding:14px; }
.mtc-view-panel > header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; color:var(--muted); font-size:13px; }
.mtc-view-panel > header b { color:var(--text); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.mtc-viewing-test { min-height:280px; padding:16px; background:#0d1118; position:relative; overflow:hidden; }
.mtc-viewing-test::before { content:""; position:absolute; inset:0; pointer-events:none; }
.mtc-viewing-test.dir-top::before { background:linear-gradient(180deg, rgba(255,255,255,.22), transparent 38%, rgba(0,0,0,.20)); }
.mtc-viewing-test.dir-bottom::before { background:linear-gradient(0deg, rgba(255,255,255,.22), transparent 38%, rgba(0,0,0,.20)); }
.mtc-viewing-test.dir-left::before { background:linear-gradient(90deg, rgba(255,255,255,.22), transparent 36%, rgba(0,0,0,.18)); }
.mtc-viewing-test.dir-right::before { background:linear-gradient(270deg, rgba(255,255,255,.22), transparent 36%, rgba(0,0,0,.18)); }
.mtc-viewing-test.dir-tl::before { background:radial-gradient(circle at top left, rgba(255,255,255,.25), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.18), transparent 35%, rgba(0,0,0,.18)); }
.mtc-viewing-test.dir-tr::before { background:radial-gradient(circle at top right, rgba(255,255,255,.25), transparent 34%), linear-gradient(225deg, rgba(255,255,255,.18), transparent 35%, rgba(0,0,0,.18)); }
.mtc-viewing-test.dir-bl::before { background:radial-gradient(circle at bottom left, rgba(255,255,255,.25), transparent 34%), linear-gradient(45deg, rgba(255,255,255,.18), transparent 35%, rgba(0,0,0,.18)); }
.mtc-viewing-test.dir-br::before { background:radial-gradient(circle at bottom right, rgba(255,255,255,.25), transparent 34%), linear-gradient(315deg, rgba(255,255,255,.18), transparent 35%, rgba(0,0,0,.18)); }
.mtc-view-gradient { height:248px; border-radius:18px; background:linear-gradient(90deg,#020202 0%, #141922 10%, #3a4456 28%, #949dad 55%, #d9e0ea 78%, #ffffff 100%); position:relative; overflow:hidden; }
.mtc-view-gradient::after { content:"GRAY · SKIN · HIGHLIGHT"; position:absolute; left:18px; right:18px; bottom:14px; color:rgba(255,255,255,.72); letter-spacing:.18em; font-size:12px; }
.mtc-colorchecker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mtc-colorchecker span { min-height:120px; border-radius:14px; position:relative; border:1px solid rgba(255,255,255,.14); }
.mtc-colorchecker span b { position:absolute; right:10px; bottom:8px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); font-size:12px; }
.mtc-view-ui { display:grid; gap:14px; }
.mtc-view-ui__hero, .mtc-view-ui__grid article { border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.05); padding:16px; }
.mtc-view-ui__hero h3, .mtc-view-ui__grid h4 { margin:4px 0 8px; }
.mtc-view-ui__hero p, .mtc-view-ui__grid p { margin:0; color:var(--muted); line-height:1.6; }
.mtc-view-ui__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mtc-photo-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }
.mtc-photo-row .tone { min-height:74px; border-radius:12px; border:1px solid rgba(255,255,255,.12); display:block; }
.mtc-photo-row .t1 { background:#f4d7c5; } .mtc-photo-row .t2 { background:#d9b59b; } .mtc-photo-row .t3 { background:#b58263; } .mtc-photo-row .t4 { background:#7d523e; }
.mtc-view-panel.panel-tn .mtc-viewing-test { box-shadow: inset 0 0 0 1px rgba(255,184,77,.28); }
.mtc-view-panel.panel-ips .mtc-viewing-test { box-shadow: inset 0 0 0 1px rgba(93,168,255,.24); }
.mtc-view-panel.panel-va .mtc-viewing-test { box-shadow: inset 0 0 0 1px rgba(120,255,174,.22); }
.mtc-guide-grid--viewing { margin-top:16px; }
@media (max-width: 980px) {
  .mtc-viewing-stage.mode-split-h, .mtc-viewing-stage.mode-quad, .mtc-view-ui__grid { grid-template-columns:1fr; }
  .mtc-colorchecker { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.mtc-viewing-shell { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr); gap:18px; align-items:start; }
.mtc-viewing-side { display:grid; gap:14px; }
.mtc-viewing-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mtc-viewing-test { display:grid; gap:12px; min-height:300px; }
.mtc-viewing-test.is-center { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mtc-viewing-test.is-split { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mtc-viewing-test.is-strip { grid-template-columns:repeat(5,minmax(0,1fr)); }
.mtc-view-card { border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.03); }
.mtc-view-card header { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; font-size:13px; color:var(--mtc-muted); border-bottom:1px solid rgba(255,255,255,.07); }
.mtc-view-card header strong { color:var(--mtc-text); font-size:14px; }
.mtc-view-card__surface { min-height:240px; padding:14px; background:#0b0c10; }
.mtc-view-whiteshift,.mtc-view-colorgrid { display:grid; gap:8px; }
.mtc-view-whiteshift { grid-template-columns:repeat(7,minmax(0,1fr)); }
.mtc-view-whiteshift span,.mtc-view-colorgrid span { display:flex; align-items:flex-end; justify-content:center; min-height:92px; border-radius:12px; color:#111; font-size:12px; padding:8px; }
.mtc-view-colorgrid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.mtc-view-textui { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; height:100%; }
.mtc-view-ui-card { border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); padding:16px; display:flex; flex-direction:column; gap:12px; color:#f5f7fb; min-height:200px; }
.mtc-view-ui-card h4 { margin:0; font-size:18px; }
.mtc-view-ui-card button { border:0; border-radius:999px; padding:12px 16px; font-weight:700; }
.mtc-view-ui-card small { color:rgba(255,255,255,.72); }
.mtc-view-ui-card--code code { display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; background:rgba(0,0,0,.28); padding:12px; border-radius:12px; }
.mtc-view-ui-card--code p { margin:0; line-height:1.65; }
@media (max-width: 980px) {
  .mtc-viewing-shell { grid-template-columns:1fr; }
  .mtc-viewing-test.is-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .mtc-viewing-test.is-center,.mtc-viewing-test.is-split,.mtc-viewing-test.is-strip,.mtc-view-textui,.mtc-viewing-metrics { grid-template-columns:1fr; }
}

.mtc-info-section { display:grid; gap:12px; margin-top:18px; }
.mtc-info-section h3 { margin:0; font-size:16px; }
.mtc-info-summary { margin-top:14px; padding:14px 16px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.035); }
.mtc-info-summary p { margin:0; color:var(--mtc-muted); line-height:1.7; }


.mtc-guide-hero{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-bottom:18px;}
.mtc-guide-card{border-radius:22px;padding:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.16);}
.mtc-guide-card--wide{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));}
.mtc-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8db8ff;margin-bottom:10px;}
.mtc-guide-card h3,.mtc-section-title h3{margin:0 0 10px;}
.mtc-guide-card p,.mtc-section-title p,.mtc-guide-grid article p{color:#c7d6ea;}
.mtc-guide-steps{margin:0;padding-left:18px;display:grid;gap:10px;color:#dfe9f7;}
.mtc-guide-list{margin:10px 0 0;padding-left:18px;display:grid;gap:8px;color:#c7d6ea;}
.mtc-guide-jumps{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.mtc-guide-section{margin-top:18px;}
.mtc-section-title{margin-bottom:12px;}
.mtc-guide-grid--rich article,.mtc-guide-grid--compact article{min-height:100%;}
@media (max-width: 980px){.mtc-guide-hero{grid-template-columns:1fr;}}


.mtc-hub-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:16px}.mtc-hub-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:20px;display:grid;gap:14px}.mtc-hub-card--wide{grid-column:1/-1}.mtc-hub-actions{display:flex;flex-wrap:wrap;gap:10px}.mtc-field-stack{display:grid;gap:8px}.mtc-field-stack input,.mtc-field-stack textarea{width:100%;background:#111723;color:var(--text);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 14px;font:inherit}.mtc-saved-records{display:grid;gap:10px;max-height:420px;overflow:auto}.mtc-saved-item,.mtc-hub-link{display:grid;gap:8px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}.mtc-saved-item__meta,.mtc-hub-meta{color:var(--muted);font-size:13px}.mtc-saved-item__top,.mtc-hub-link__top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.mtc-saved-item__actions{display:flex;flex-wrap:wrap;gap:8px}.mtc-hub-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mtc-hub-link a{color:#dceafe;text-decoration:none;font-weight:700}.mtc-hub-link p{margin:0;color:var(--muted);line-height:1.6}.mtc-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(93,168,255,.12);color:#d7e8ff;font-size:12px;font-weight:700}.mtc-kicker{display:block;color:#8fbfff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media (max-width: 980px){.mtc-hub-grid,.mtc-hub-links{grid-template-columns:1fr}}