.mc-app {
  --mc-primary: #184dc4;
  --mc-ink: #162d45;
  --mc-secondary: #53657b;
  --mc-background: #ffffff;
  --mc-surface: #f5f8fc;
  --mc-border: #d5dfe9;
  --mc-teal: #087f8c;
  --mc-danger: #ad302a;
  --mc-thumb: #7d90a7;
  --mc-track: #eef3fa;
  --mc-thumb-hover: #53657b;
  --mc-thumb-active: #162d45;
  --mc-font: "BIZ UDPGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --mc-display-font: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --mc-number-font: "Cascadia Code", Consolas, monospace;
  font: 400 16px/1.75 var(--mc-font);
  color: var(--mc-ink);
  background: var(--mc-background);
  max-width: 1280px;
  margin-inline: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
  text-align: left;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  color-scheme: light;
}
.mc-app *, .mc-app *::before, .mc-app *::after { box-sizing: border-box; }
.mc-app, .mc-app * { scrollbar-width: auto; scrollbar-color: var(--mc-thumb) var(--mc-track); }
.mc-app *::-webkit-scrollbar { width: 12px; height: 12px; }
.mc-app *::-webkit-scrollbar-track { background: var(--mc-track); }
.mc-app *::-webkit-scrollbar-thumb { background: var(--mc-thumb); border: 3px solid var(--mc-track); border-radius: 8px; }
.mc-app *::-webkit-scrollbar-thumb:hover { background: var(--mc-thumb-hover); }
.mc-app *::-webkit-scrollbar-thumb:active { background: var(--mc-thumb-active); }
.mc-app [hidden] { display: none !important; }
.mc-app h1, .mc-app h2, .mc-app h3, .mc-app h4, .mc-app p, .mc-app dl, .mc-app dd { margin: 0; padding: 0; }
.mc-app h1, .mc-app h2, .mc-app h3, .mc-app h4 { color: var(--mc-ink); font-family: var(--mc-display-font); font-weight: 700; text-wrap: pretty; }
.mc-app[data-site-header="true"] h2, .mc-app h3 { font-size: 19px; line-height: 1.5; }
.mc-app h4 { font-size: 16px; line-height: 1.5; }
.mc-app a { color: var(--mc-primary); text-underline-offset: 4px; cursor: pointer; }
.mc-app a:hover { text-decoration-thickness: 2px; }
.mc-app button, .mc-app input, .mc-app select, .mc-app textarea { font: inherit; color: inherit; letter-spacing: normal; }
.mc-app button, .mc-app select, .mc-app summary { cursor: pointer; }
.mc-app input:not([type="checkbox"]):not([type="range"]), .mc-app select, .mc-app textarea { background: var(--mc-background); border: 1px solid var(--mc-border); border-radius: 8px; min-height: 48px; padding: 10px 12px; max-width: 100%; }
.mc-app input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--mc-primary); cursor: pointer; flex-shrink: 0; }
.mc-app input[type="range"] { accent-color: var(--mc-primary); min-height: 44px; width: 96px; cursor: pointer; }
.mc-app input::placeholder { color: var(--mc-secondary); opacity: .85; }
.mc-app textarea { width: 100%; resize: none; }
.mc-app button:disabled { cursor: default; opacity: .5; }
.mc-app :focus-visible { outline: 3px solid var(--mc-primary); outline-offset: 3px; }
.mc-app .mc-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--mc-background); color: var(--mc-ink); border: 1px solid var(--mc-border); border-radius: 8px; min-height: 44px; min-width: 44px; padding: 9px 14px; font: 600 15px/1.5 var(--mc-font); text-decoration: none; white-space: normal; transition: background-color 120ms; }
.mc-app .mc-button:not(:disabled):hover { background: var(--mc-track); border-color: var(--mc-secondary); }
.mc-app .mc-button:not(:disabled):active { background: var(--mc-border); }
.mc-app .mc-primary { background: var(--mc-primary); border-color: var(--mc-primary); color: #fff; }
.mc-app .mc-primary:not(:disabled):hover { background: #123b97; border-color: #123b97; }
.mc-app .mc-quiet { border-color: transparent; background: transparent; padding-inline: 8px; }
.mc-app .mc-danger { color: var(--mc-danger); }
.mc-app .mc-link-button { border: 0; background: transparent; color: var(--mc-secondary); text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; min-height: 44px; font-size: 13px; }
.mc-app .mc-link-button:hover { color: var(--mc-danger); }
.mc-app .mc-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--mc-border); min-height: 92px; padding-block: 20px; }
.mc-app .mc-brand { display: flex; gap: 12px; align-items: center; font-size: 17px; font-weight: 700; }
.mc-app .mc-mark { width: 35px; height: 36px; position: relative; flex-shrink: 0; }
.mc-app .mc-mark i { position: absolute; width: 21px; height: 31px; border: 2px solid var(--mc-primary); left: 1px; bottom: 0; }
.mc-app .mc-mark i + i { width: 25px; height: 24px; left: 10px; border-color: var(--mc-teal); background: #087f8c15; }
.mc-app .mc-text-link { font-size: 14px; flex-shrink: 0; padding-block: 10px; }
.mc-app .mc-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-top: 28px; }
.mc-app .mc-kicker { color: var(--mc-primary); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.mc-app .mc-intro h1, .mc-app .mc-intro h2 { font-size: clamp(26px, 3.5vw, 38px); line-height: 1.5; letter-spacing: -.035em; }
.mc-app .mc-intro-phrase { display: inline-block; }
.mc-app .mc-intro p:not(.mc-kicker) { margin-top: 10px; color: var(--mc-secondary); }
.mc-app .mc-intro-note { font-size: 13px; line-height: 1.9; color: var(--mc-secondary); border-left: 2px solid var(--mc-border); padding-left: 18px; flex-shrink: 0; }
.mc-app .mc-intro-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; margin-bottom: 8px; }
.mc-app .mc-intro-topline .mc-kicker { margin-bottom: 0; font-size: 16px; }
.mc-app .mc-intro-topline .mc-text-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 16px; }
.mc-app[data-site-header="true"] .mc-intro { padding-top: 0; }
.mc-app[data-site-header="true"] .mc-intro p:not(.mc-kicker), .mc-app[data-site-header="true"] .mc-intro-note { font-size: 16px; }
.mc-app .mc-notice { min-height: 40px; padding-block: 9px; font-size: 13px; color: var(--mc-primary); }
.mc-app .mc-workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 32px; align-items: start; }
.mc-app .mc-selection { min-width: 0; }
.mc-app .mc-section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.mc-app .mc-section-title > span { font-size: 13px; color: var(--mc-secondary); font-variant-numeric: tabular-nums; }
.mc-app .mc-selector > label { display: block; font-size: 13px; color: var(--mc-secondary); margin-bottom: 6px; }
.mc-app .mc-selector { scroll-margin-top: 20px; }
.mc-app .mc-selection-hint { font-size: 14px; color: var(--mc-ink); margin-bottom: 16px; }
.mc-app .mc-selection-progress { padding: 16px; margin-top: 12px; border: 1px solid var(--mc-border); border-radius: 8px; background: var(--mc-surface); }
.mc-app .mc-selection-progress p { font-size: 12px; color: var(--mc-secondary); }
.mc-app .mc-selection-progress > .mc-button { width: 100%; margin-top: 12px; }
.mc-app .mc-selection-progress > .mc-button + p { margin-top: 8px; }
.mc-app .mc-selection-chips { display: grid; gap: 8px; }
.mc-app .mc-selection-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; }
.mc-app .mc-selection-chip .mc-device-number { width: 20px; height: 20px; font-size: 12px; background: var(--mc-background); }
.mc-app .mc-searchbox { display: flex; align-items: center; position: relative; }
.mc-app .mc-searchbox > span { position: absolute; left: 12px; font-size: 27px; line-height: 1; color: var(--mc-secondary); }
.mc-app .mc-searchbox input { width: 100%; padding-left: 40px !important; padding-right: 44px !important; }
.mc-app .mc-searchbox button { position: absolute; right: 3px; border: 0; background: transparent; height: 44px; width: 40px; font-size: 24px; color: var(--mc-secondary); }
.mc-app .mc-searchbox button:hover { color: var(--mc-primary); background: var(--mc-track); }
.mc-app .mc-searchbox input::-webkit-search-cancel-button { display: none; }
.mc-app .mc-results { max-height: 324px; min-height: 160px; overflow-y: auto; scrollbar-gutter: stable; margin-top: 8px; }
.mc-app .mc-device-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-bottom: 1px solid var(--mc-border); background: transparent; padding: 13px 8px; min-height: 72px; width: 100%; text-align: left; }
.mc-app .mc-device-result[aria-disabled="false"]:hover { background: var(--mc-surface); }
.mc-app .mc-device-result[aria-disabled="false"]:active { background: var(--mc-track); }
.mc-app .mc-device-result[aria-disabled="true"] { background: var(--mc-track); cursor: default; }
.mc-app .mc-device-result[aria-disabled="true"] .mc-add-symbol { color: var(--mc-secondary); background: transparent; border-color: transparent; }
.mc-app .mc-device-result strong { font-size: 15px; font-weight: 700; display: block; }
.mc-app .mc-device-result small { font-size: 12px; color: var(--mc-secondary); display: block; }
.mc-app .mc-add-symbol { color: var(--mc-primary); font-size: 12px; font-weight: 700; border: 1px solid var(--mc-border); border-radius: 6px; padding: 4px 7px; white-space: nowrap; flex-shrink: 0; background: var(--mc-background); }
.mc-app .mc-selected-section { margin-top: 30px; }
.mc-app .mc-selection-empty { font-size: 14px; padding: 18px; border: 1px dashed var(--mc-border); border-radius: 8px; background: var(--mc-surface); }
.mc-app .mc-selection-empty p + p { color: var(--mc-secondary); font-size: 13px; margin-top: 5px; }
.mc-app .mc-color-0 { --mc-device-color: #184dc4; --mc-line: none; }
.mc-app .mc-color-1 { --mc-device-color: #087f8c; --mc-line: 8 3; }
.mc-app .mc-color-2 { --mc-device-color: #a6530a; --mc-line: 3 3; }
.mc-app .mc-color-3 { --mc-device-color: #704bb0; --mc-line: 12 3 2 3; }
.mc-app .mc-color-4 { --mc-device-color: #ad302a; --mc-line: 3 6; }
.mc-app .mc-device-card { padding: 16px; border: 1px solid var(--mc-border); border-left: 3px solid var(--mc-device-color); border-radius: 8px; margin-bottom: 12px; }
.mc-app .mc-is-hidden { background: var(--mc-surface); }
.mc-app .mc-card-heading { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-app .mc-card-heading h3, .mc-app .mc-card-heading h4 { flex: 1; font-size: 15px; min-width: 100px; }
.mc-app .mc-device-number { display: inline-flex; align-items: center; justify-content: center; color: var(--mc-device-color); border: 1px solid currentColor; width: 23px; height: 23px; font: 700 13px var(--mc-number-font); flex-shrink: 0; }
.mc-app .mc-base-badge { font-size: 11px; font-weight: 700; color: var(--mc-primary); background: var(--mc-track); padding: 2px 6px; border-radius: 4px; }
.mc-app .mc-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--mc-secondary); font-size: 13px; }
.mc-app .mc-card-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mc-app .mc-card-toolbar .mc-button { font-size: 13px; }
.mc-app .mc-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.mc-app details > summary { min-height: 44px; display: list-item; padding-block: 11px; font-size: 14px; color: var(--mc-secondary); list-style-position: inside; }
.mc-app details > summary:hover { color: var(--mc-primary); }
.mc-app details[open] > summary { color: var(--mc-ink); }
.mc-app .mc-card-settings { display: grid; gap: 12px; font-size: 14px; }
.mc-app .mc-card-settings label:not(.mc-check) { display: grid; gap: 4px; }
.mc-app .mc-card-settings select { width: 100%; }
.mc-app .mc-card-settings fieldset { border: 1px solid var(--mc-border); margin: 0; padding: 4px 10px; }
.mc-app .mc-card-settings legend { font-size: 13px; padding: 0 4px; }
.mc-app .mc-comparison { min-width: 0; scroll-margin-top: 20px; }
.mc-app .mc-comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.mc-app .mc-comparison-heading .mc-button { color: var(--mc-primary); font-size: 13px; }
.mc-app .mc-segment { display: inline-flex; max-width: 100%; border: 1px solid var(--mc-border); border-radius: 8px; padding: 3px; gap: 3px; background: var(--mc-surface); }
.mc-app .mc-segment .mc-button { border: 1px solid transparent; border-radius: 5px; min-height: 44px; min-width: 44px; padding: 8px 14px; color: var(--mc-secondary); background: transparent; font-size: 14px; font-weight: 700; line-height: 1.5; }
.mc-app .mc-segment .mc-button:not(:disabled):hover { color: var(--mc-primary); background: var(--mc-track); }
.mc-app .mc-segment .mc-button:not(:disabled):active { background: var(--mc-border); }
.mc-app .mc-segment .mc-button[aria-pressed="true"] { color: var(--mc-primary); background: var(--mc-background); border-color: var(--mc-primary); }
.mc-app .mc-view-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mc-app .mc-comparison-summary { padding: 14px 18px; margin-bottom: 16px; border-left: 3px solid var(--mc-device-color, var(--mc-primary)); background: var(--mc-surface); border-radius: 0 8px 8px 0; font-size: 14px; }
.mc-app .mc-comparison-summary > p:first-child { display: flex; align-items: center; gap: 8px; }
.mc-app .mc-summary-base { color: var(--mc-secondary); font-size: 12px; margin-top: 4px; }
.mc-app .mc-comparison-summary ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0 0; padding: 0; }
.mc-app .mc-comparison-summary li { white-space: nowrap; }
.mc-app .mc-comparison-summary li strong { font: 700 21px/1.6 var(--mc-number-font); margin-inline: 4px; }
.mc-app .mc-summary-note { color: var(--mc-secondary); font-size: 11px; margin-top: 6px; }
.mc-app .mc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--mc-border); gap: 4px; margin-bottom: 20px; }
.mc-app .mc-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--mc-secondary); padding: 13px 2px 16px; min-height: 54px; font-weight: 700; font-size: 16px; }
.mc-app .mc-tabs button[aria-selected="true"] { border-bottom-color: var(--mc-primary); color: var(--mc-primary); }
.mc-app .mc-tabs button:hover { background: var(--mc-surface); }
.mc-app .mc-panel { min-width: 0; }
.mc-app .mc-figure-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mc-app .mc-figure-top span { font-size: 12px; color: var(--mc-secondary); }
.mc-app .mc-figure-top select { font-size: 14px; min-height: 44px; }
.mc-app .mc-figure-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; color: var(--mc-secondary); }
.mc-app .mc-figure-options label { display: flex; align-items: center; gap: 8px; }
.mc-app .mc-figure-options select { min-height: 44px; font-size: 13px; }
.mc-app .mc-opacity { margin-left: auto; }
.mc-app .mc-canvas { background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: 16px; padding: 24px; height: 430px; overflow: hidden; position: relative; }
.mc-app .mc-diagram { display: block; width: 100%; height: 100%; overflow: hidden; }
.mc-app .mc-canvas.mc-canvas-with-labels { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; height: auto; align-items: center; }
.mc-app .mc-diagram-frame { min-width: 0; height: 380px; }
.mc-app .mc-label-guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mc-app .mc-label-guide { fill: none; stroke: var(--mc-device-color); stroke-width: 1.2; stroke-opacity: .75; }
.mc-app .mc-label-anchor { fill: var(--mc-device-color); }
.mc-app .mc-canvas .mc-legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; min-width: 0; }
.mc-app .mc-canvas .mc-legend-item { position: relative; z-index: 1; min-width: 0; padding: 8px; background: var(--mc-background); border: 1px solid var(--mc-border); border-left: 2px solid var(--mc-device-color); border-radius: 6px; }
.mc-app .mc-canvas .mc-legend-item > div { min-width: 0; }
.mc-app .mc-label-part { display: inline-block; }
.mc-app .mc-grid-line { stroke: #dce5ee; stroke-width: .3; }
.mc-app .mc-ruler-text { fill: var(--mc-secondary); font: 5.5px var(--mc-number-font); }
.mc-app .mc-origin { stroke: #8295aa; stroke-width: .45; fill: none; }
.mc-app .mc-origin-dot { fill: var(--mc-primary); }
.mc-app .mc-device-shape { stroke: var(--mc-device-color); fill: var(--mc-device-color); stroke-width: 2; stroke-dasharray: var(--mc-line); }
.mc-app .mc-shape-base { stroke-width: 2.8; }
.mc-app .mc-fold-line { stroke: var(--mc-device-color); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mc-app .mc-shape-number { fill: var(--mc-device-color); font: 700 6px var(--mc-number-font); paint-order: stroke; stroke: var(--mc-surface); stroke-width: 1.2px; }
.mc-app .mc-canvas-empty { height: 100%; min-height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px 12px; gap: 16px; }
.mc-app .mc-canvas-empty p { color: var(--mc-secondary); max-width: 360px; font-size: 14px; }
.mc-app .mc-canvas-empty h3 { font-size: 21px; }
.mc-app .mc-empty-symbol { width: 90px; height: 88px; position: relative; margin-bottom: 6px; }
.mc-app .mc-empty-symbol i { width: 42px; height: 82px; border: 1.5px solid #8295aa; bottom: 0; left: 16px; position: absolute; background: #184dc408; }
.mc-app .mc-empty-symbol i + i { width: 54px; height: 69px; left: 31px; border-style: dashed; }
.mc-app .mc-canvas-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; }
.mc-app .mc-scale-label { font: 12px var(--mc-number-font); color: var(--mc-secondary); }
.mc-app .mc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mc-app .mc-canvas-toolbar .mc-button { font-size: 13px; padding: 8px 12px; }
.mc-app .mc-pan-controls { position: relative; }
.mc-app .mc-pan-controls[open] .mc-actions { position: absolute; z-index: 2; background: var(--mc-background); right: 0; width: 220px; padding: 12px; border: 1px solid var(--mc-border); border-radius: 8px; }
.mc-app .mc-scale-note { color: var(--mc-secondary); font-size: 13px; margin-top: 16px; padding-left: 11px; border-left: 2px solid var(--mc-border); }
.mc-app .mc-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding-block: 24px; }
.mc-app .mc-legend-item { display: flex; gap: 10px; }
.mc-app .mc-legend-item strong { display: block; font-size: 13px; line-height: 1.5; }
.mc-app .mc-legend-item div > span { display: block; font: 13px/1.8 var(--mc-number-font); color: var(--mc-secondary); }
.mc-app .mc-fold-note { font-size: 13px; color: var(--mc-secondary); padding-bottom: 16px; }
.mc-app .mc-differences:not(:empty) { border-top: 1px solid var(--mc-border); padding-top: 20px; }
.mc-app .mc-differences > p { font-size: 12px; color: var(--mc-secondary); margin: 4px 0 14px; }
.mc-app .mc-diff-row { padding-block: 12px; border-top: 1px solid var(--mc-border); }
.mc-app .mc-diff-row strong { font-size: 13px; }
.mc-app .mc-diff-row dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.mc-app .mc-diff-row dt { font-size: 12px; color: var(--mc-secondary); }
.mc-app .mc-diff-row dd { font: 600 16px/1.8 var(--mc-number-font); }
.mc-app .mc-specs-help { color: var(--mc-secondary); font-size: 13px; }
.mc-app .mc-specs-note { margin-top: 12px; }
.mc-app .mc-table-scroll { overflow: auto; width: 100%; scrollbar-gutter: stable; scroll-padding-left: 149px; margin-top: 12px; border: 1px solid var(--mc-border); border-radius: 8px; }
.mc-app .mc-specs-table { --mc-spec-item-width: 145px; --mc-spec-value-width: 220px; border-collapse: separate; border-spacing: 0; width: 100%; min-width: calc(var(--mc-spec-item-width) + var(--mc-spec-columns) * var(--mc-spec-value-width)); margin: 0; font-size: 14px; line-height: 1.7; table-layout: fixed; }
.mc-app .mc-specs-table caption { text-align: left; font-size: 13px; padding: 12px; color: var(--mc-secondary); }
.mc-app .mc-spec-item-col { width: var(--mc-spec-item-width); }
.mc-app .mc-specs-table th, .mc-app .mc-specs-table td { padding: 14px 12px; border: 0; border-right: 1px solid var(--mc-border); border-bottom: 1px solid var(--mc-border); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.mc-app .mc-specs-table tr > :last-child { border-right: 0; }
.mc-app .mc-specs-table tr > :first-child:not([colspan]) { position: sticky; left: 0; z-index: 2; }
.mc-app .mc-specs-table th[scope="row"] { background: var(--mc-surface); font-weight: 600; }
.mc-app .mc-specs-table .mc-spec-heading-row th { background: var(--mc-track); font-weight: 700; }
.mc-app .mc-spec-model { display: flex; align-items: flex-start; gap: 8px; }
.mc-app .mc-spec-model > span:last-child { min-width: 0; }
.mc-app .mc-specs-table .mc-spec-group th { padding-block: 10px; background: var(--mc-surface); color: var(--mc-primary); font-size: 14px; font-weight: 700; }
.mc-app .mc-spec-group th > span { position: sticky; left: 12px; display: inline-block; }
.mc-app .mc-spec-value, .mc-app .mc-spec-sources, .mc-app .mc-spec-display-name { display: block; }
.mc-app .mc-spec-sources { margin-top: 4px; }
.mc-app .mc-spec-sources a + a { margin-left: 8px; }
.mc-app .mc-spec-display + .mc-spec-display { margin-top: 8px; }
.mc-app .mc-spec-display-name { color: var(--mc-secondary); font-size: 12px; }
.mc-app .mc-specs-table td a { font-size: 12px; white-space: nowrap; }
.mc-app .mc-output { margin-top: 40px; border-block: 1px solid var(--mc-border); padding-block: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.mc-app .mc-output p { margin-top: 4px; color: var(--mc-secondary); font-size: 14px; }
.mc-app .mc-share-fallback { flex-basis: 100%; font-size: 14px; }
.mc-app .mc-save-section { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-block: 32px; border-bottom: 1px solid var(--mc-border); scroll-margin-top: 24px; }
.mc-app .mc-save-section p { font-size: 13px; color: var(--mc-secondary); margin-top: 8px; }
.mc-app .mc-save-form { margin-top: 16px; }
.mc-app .mc-save-form label { font-size: 13px; }
.mc-app .mc-save-controls { display: flex; gap: 8px; margin-top: 5px; }
.mc-app .mc-save-controls input { min-width: 0; flex: 1; }
.mc-app .mc-field-error { color: var(--mc-danger) !important; min-height: 24px; font-size: 13px; }
.mc-app input[aria-invalid="true"] { border-color: var(--mc-danger) !important; }
.mc-app .mc-saved-count { font-size: 12px; color: var(--mc-secondary); font-weight: 400; }
.mc-app .mc-saved-list { max-height: 350px; overflow-y: auto; scrollbar-gutter: stable; }
.mc-app .mc-saved-entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--mc-border); }
.mc-app .mc-saved-entry > div:first-child { min-width: 0; }
.mc-app .mc-saved-entry strong { display: block; font-size: 14px; }
.mc-app .mc-saved-entry span { display: block; font-size: 12px; color: var(--mc-secondary); }
.mc-app .mc-saved-entry .mc-actions { flex-shrink: 0; }
.mc-app .mc-saved-entry .mc-button { font-size: 13px; padding: 8px; }
.mc-app .mc-method { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-block: 40px; scroll-margin-top: 24px; }
.mc-app .mc-method p:not(.mc-kicker) { font-size: 13px; color: var(--mc-secondary); margin-top: 12px; }
.mc-app .mc-formula { font-family: var(--mc-number-font); border: 1px solid var(--mc-border); padding: 12px; border-radius: 8px; background: var(--mc-surface); }
.mc-app .mc-sources { align-self: start; border-bottom: 1px solid var(--mc-border); }
.mc-app .mc-sources > summary { color: var(--mc-primary); font-size: 16px; font-weight: 700; }
.mc-app .mc-sources > summary h3, .mc-app .mc-sources > summary h4 { display: inline; margin: 0; font: inherit; }
.mc-app .mc-source-count { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--mc-secondary); }
.mc-app .mc-source-list details { border-bottom: 1px solid var(--mc-border); }
.mc-app .mc-source-list summary { color: var(--mc-ink); }
.mc-app .mc-source-list summary span { color: var(--mc-secondary); font-size: 11px; margin-left: 8px; }
.mc-app .mc-source-list ul { margin: 0 0 12px; padding-left: 20px; font-size: 13px; }
.mc-app .mc-source-list a { display: inline-block; min-height: 32px; padding-block: 4px; }
.mc-app .mc-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--mc-border); padding-block: 20px; color: var(--mc-secondary); font-size: 12px; }
.mc-app .mc-dialog { border: 1px solid var(--mc-border); border-radius: 16px; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 28px; box-shadow: 0 16px 80px #162d4533; background: var(--mc-background); color: var(--mc-ink); }
.mc-app .mc-dialog::backdrop { background: #162d4580; }
.mc-app .mc-dialog p { margin: 16px 0 24px; font-size: 15px; }
.mc-app .mc-dialog .mc-actions { justify-content: end; }
.mc-app .mc-loading { min-height: 340px; padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.mc-app .mc-no-results { padding: 20px 10px; font-size: 14px; }
.mc-app .mc-no-results button { margin-top: 12px; }
.mc-app .mc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mc-app .mc-export-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; flex-basis: 100%; }
.mc-app .mc-export-controls [data-export="pdf"] { flex-direction: column; gap: 0; min-width: 175px; padding-block: 10px; }
.mc-app .mc-pdf-kind { font-size: 11px; font-weight: 400; }
.mc-app .mc-export-guide-link { font-size: 13px; padding-block: 12px; }
.mc-app .mc-export-unavailable { flex-basis: 100%; }
.mc-app .mc-export-unavailable:empty { display: none; }
.mc-app .mc-export-dialog { width: min(600px, calc(100% - 32px)); }
.mc-app .mc-export-targets { padding-left: 0; list-style: none; margin: 16px 0; max-height: 230px; overflow-y: auto; border-block: 1px solid var(--mc-border); }
.mc-app .mc-export-targets li { padding: 10px 0; border-bottom: 1px solid var(--mc-border); font-size: 14px; }
.mc-app .mc-export-targets li:last-child { border-bottom: 0; }
.mc-app .mc-export-targets strong, .mc-app .mc-export-targets span { display: block; }
.mc-app .mc-export-targets span { color: var(--mc-secondary); font-size: 12px; }
.mc-app .mc-export-dialog .mc-export-summary, .mc-app .mc-export-dialog .mc-export-print-note { font-size: 13px; margin: 12px 0; }
.mc-app .mc-export-settings { display: grid; gap: 6px; grid-template-columns: 100px minmax(0, 1fr); align-items: center; font-size: 14px; margin-block: 16px; }
.mc-app .mc-export-dialog .mc-export-status { min-height: 44px; margin: 12px 0; font-size: 13px; color: var(--mc-primary); }
.mc-app .mc-export-files { padding-block: 12px; border-top: 1px solid var(--mc-border); }
.mc-app .mc-export-files p { font-size: 12px; color: var(--mc-secondary); }
.mc-app .mc-export-files .mc-actions { justify-content: start; }
.mc-app .mc-image-preview { display: block; max-width: 100%; max-height: 300px; object-fit: contain; margin: 0 auto 16px; border: 1px solid var(--mc-border); }
.mc-app .mc-printing { padding-block: 14px; border-bottom: 1px solid var(--mc-border); scroll-margin-top: 20px; }
.mc-app .mc-printing > summary { font-weight: 700; color: var(--mc-primary); }
.mc-app .mc-printing > div { padding: 12px 0 20px; max-width: 850px; }
.mc-app .mc-printing p, .mc-app .mc-printing li { font-size: 14px; margin-top: 10px; }
.mc-fallback { margin: 24px auto; max-width: 1280px; font: 16px/1.75 "Yu Gothic", Meiryo, sans-serif; overflow-wrap: anywhere; }
.mc-fallback summary { cursor: pointer; min-height: 44px; }
@media (max-width: 1000px) {
  .mc-app .mc-workspace { grid-template-columns: 275px minmax(0, 1fr); gap: 24px; }
  .mc-app .mc-intro-note { display: none; }
  .mc-app .mc-figure-options { align-items: start; }
  .mc-app .mc-opacity { margin-left: 0; }
  .mc-app .mc-diff-row dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .mc-app .mc-workspace { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mc-app .mc-selection { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .mc-app .mc-selected-section { margin-top: 0; }
  .mc-app .mc-canvas { height: 450px; }
  .mc-app .mc-save-section, .mc-app .mc-method { gap: 24px; }
  .mc-app .mc-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mc-app .mc-header { min-height: 78px; padding-block: 14px; gap: 12px; }
  .mc-app .mc-brand { font-size: 13px; gap: 8px; }
  .mc-app .mc-text-link { font-size: 11px; }
  .mc-app .mc-mark { transform: scale(.85); transform-origin: left center; width: 30px; }
  .mc-app .mc-intro { padding-top: 20px; }
  .mc-app .mc-kicker { font-size: 12px; }
  .mc-app .mc-intro h1, .mc-app .mc-intro h2 { font-size: 26px; letter-spacing: -.045em; }
  .mc-app .mc-intro p:not(.mc-kicker) { font-size: 14px; }
  .mc-app .mc-notice { min-height: 38px; }
  .mc-app .mc-selection { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mc-app .mc-results { max-height: 238px; }
  .mc-app .mc-section-title { margin-bottom: 12px; }
  .mc-app .mc-selected { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mc-app .mc-device-card { margin-bottom: 0; padding: 12px 14px; }
  .mc-app .mc-card-toolbar { justify-content: start; gap: 20px; }
  .mc-app .mc-tabs button { font-size: 14px; }
  .mc-app .mc-figure-top h3 { font-size: 17px; }
  .mc-app .mc-figure-top select { max-width: 145px; }
  .mc-app .mc-figure-options { font-size: 12px; gap: 8px; }
  .mc-app .mc-figure-options label { gap: 6px; }
  .mc-app .mc-figure-top > .mc-segment { width: 100%; }
  .mc-app .mc-figure-top > .mc-segment button { flex: 1; }
  .mc-app .mc-segment .mc-button { padding-inline: 12px; }
  .mc-app .mc-comparison-summary { padding: 12px; }
  .mc-app .mc-comparison-summary ul { gap: 4px 14px; }
  .mc-app .mc-comparison-summary li strong { font-size: 19px; }
  .mc-app .mc-canvas { height: 365px; padding: 16px 12px; }
  .mc-app .mc-canvas.mc-canvas-with-labels { grid-template-columns: minmax(0, 1fr); }
  .mc-app .mc-diagram-frame { height: 300px; }
  .mc-app .mc-canvas-empty { padding: 10px 4px; }
  .mc-app .mc-canvas-empty h3 { font-size: 18px; }
  .mc-app .mc-canvas-empty p { font-size: 13px; }
  .mc-app .mc-legend { gap: 16px 12px; grid-template-columns: minmax(0, 1fr); }
  .mc-app .mc-table-scroll { scroll-padding-left: 108px; }
  .mc-app .mc-specs-table { --mc-spec-item-width: 104px; --mc-spec-value-width: 180px; }
  .mc-app .mc-specs-table th, .mc-app .mc-specs-table td { padding: 12px 10px; }
  .mc-app .mc-specs-table th[scope="row"], .mc-app .mc-spec-heading-row th:first-child { font-size: 13px; }
  .mc-app .mc-output { margin-top: 24px; padding-block: 24px; }
  .mc-app .mc-output > .mc-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .mc-app .mc-save-section, .mc-app .mc-method { grid-template-columns: minmax(0, 1fr); padding-block: 28px; gap: 28px; }
  .mc-app .mc-footer { flex-direction: column; align-items: start; gap: 6px; }
  .mc-app .mc-dialog { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .mc-app *, .mc-app *::before, .mc-app *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .mc-app, .mc-app * { scrollbar-color: auto; }
  .mc-app .mc-device-shape, .mc-app .mc-fold-line { stroke: CanvasText; fill: transparent; }
  .mc-app .mc-shape-number { fill: CanvasText; stroke: Canvas; }
  .mc-app .mc-label-guide { stroke: CanvasText; }
  .mc-app .mc-label-anchor { fill: CanvasText; }
  .mc-app .mc-tabs button[aria-selected="true"] { border-bottom-color: Highlight; }
  .mc-app .mc-segment button[aria-pressed="true"] { border-color: Highlight; outline: 1px solid Highlight; }
}