:root { color-scheme: light; font-family: Inter, Arial, sans-serif; color: #eee8fa; background: #302570; background-image: linear-gradient(115deg, #292063, #362982); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body, main { width: 100%; height: 100%; }
html { overflow: hidden; }
body { margin: 0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #251b58; }
::-webkit-scrollbar-thumb { background: #aa97d8; border: 2px solid #251b58; border-radius: 8px; }
.mc-viewport { width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #aa97d8 #251b58; scroll-behavior: auto; }
.mc-viewport:focus-visible { outline: 2px solid #f1bdce; outline-offset: -3px; }
.mc-space { position: relative; min-width: 100%; min-height: 100%; }
.mc-canvas { position: relative; margin: 20px; border-radius: 10px; outline: 1px solid #b5a1d5; overflow: hidden; background: #eceae4; transform-origin: 0 0; }
.mc-canvas > img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.mc-ready .mc-canvas { position: absolute; margin: 0; }
.mc-annotations, .mc-lines { position: absolute; inset: 0; pointer-events: none; }
.mc-annotations { visibility: hidden; }
.mc-ready .mc-annotations { visibility: visible; }
.mc-note { position: absolute; width: 330px; padding: 0 0 0 15px; border-left: 3px solid #9276b7; color: #4e4166; }
.mc-note strong { display: block; margin-bottom: 5px; color: #34235c; font-size: 19px; font-weight: 600; line-height: 1.35; }
.mc-note p { margin: 0; color: #4e4166; font-size: 16.5px; line-height: 1.45; }
.mc-note .mc-status-note { margin-top: 6px; color: #38658b; font-size: 13px; }
.mc-note[data-key="agreed"] strong { margin-bottom: 3px; font-size: 18px; line-height: 1.25; }
.mc-note[data-key="agreed"] p { font-size: 16px; line-height: 1.4; }
.mc-note[data-key="voice"] strong, .mc-note[data-key="case"] strong, .mc-note[data-key="question"] strong,
.mc-note[data-key="logo"] strong, .mc-note[data-key="order"] strong { color: #8d2140; }
.mc-note[data-tone="accent"] { border-color: #b96279; }
.mc-lines { width: 100%; height: 100%; overflow: visible; }
.mc-lines path { fill: none; stroke: #8a739f; stroke-width: 1.65; }
.mc-lines path[data-tone="accent"] { stroke: #b45973; }
.mc-lines .mc-arrow { fill: #8a739f; stroke: none; }
.mc-lines .mc-arrow-accent { fill: #b45973; }
.mc-example { position: absolute; right: 24px; bottom: 83px; margin: 0; color: #766c7c; font-size: 14px; line-height: 1.5; pointer-events: none; }
.mc-mobile { display: none; }
.mc-readable { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mc-error { position: fixed; z-index: 3; right: 18px; bottom: 18px; max-width: 360px; margin: 0; padding: 14px 18px; border-radius: 10px; background: #312783; font-size: 13px; line-height: 1.5; }
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  :root:not([data-mobile-view="overview"]) .mc-viewport { display: none; }
  :root:not([data-mobile-view="overview"]) .mc-mobile { display: block; }
  .mc-mobile { width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #aa97d8 #251b58; }
  .mc-mobile:focus-visible { outline: 2px solid #f1bdce; outline-offset: -3px; }
  .mc-phone { position: relative; max-width: 430px; margin: 16px auto 0; border-radius: 14px 14px 0 0; overflow: hidden; background: #eceae4; }
  .mc-band { position: relative; overflow: hidden; width: 100%; }
  .mc-band > img { position: absolute; display: block; width: 100%; height: auto; max-width: none; left: 0; }
  .mc-phone-note { margin: 0; padding: 11px 20px 18px; color: #51415f; font-size: 14px; line-height: 1.65; }
  .mc-phone-note strong { color: #472a6e; font-weight: 600; }
  .mc-phone-note[data-outgoing="true"] { text-align: right; }
  .mc-phone-status { display: block; margin-top: 5px; color: #38658b; font-size: 12px; }
  .mc-phone-example { position: absolute; right: 20px; bottom: 16px; margin: 0; color: #827b78; font-size: 11px; line-height: 1.5; text-align: right; }
  .mc-transcript { max-width: 430px; margin: 0 auto 16px; padding: 0 20px; color: #352347; background: #f7f3fb; border-top: 1px solid #d4c8e0; border-radius: 0 0 14px 14px; }
  .mc-transcript summary { display: flex; align-items: center; min-height: 52px; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.5; }
  .mc-transcript summary::after { content: '+'; font-size: 22px; margin-left: auto; padding-left: 12px; }
  .mc-transcript[open] summary::after { content: '−'; }
  .mc-transcript ol { margin: 0; padding: 6px 0 20px 20px; font-size: 14px; line-height: 1.7; }
  .mc-transcript li + li { margin-top: 17px; }
}
@media (max-width: 500px) {
  .mc-phone { margin: 0; max-width: none; border-radius: 0; }
  .mc-mobile { background: #eceae4; }
  .mc-transcript { margin: 0; max-width: none; border-radius: 0; }
}