#mt261{font:14px/1.6 system-ui,-apple-system,sans-serif;
color:var(--viz-text)}
#mt261 *{box-sizing:border-box}
#mt261 button,#mt261 input,#mt261 textarea{font:inherit}
#mt261 button{cursor:pointer}
#mt261 .frame{background:var(--viz-card);
border:1px solid var(--viz-border);
border-radius:19px;
overflow:hidden}
#mt261 .head{padding:15px;
display:flex;
justify-content:space-between;
align-items:center}
#mt261 .logo{font-size:23px;
font-weight:850;
letter-spacing:-1px}
#mt261 .logo span{color:#9785cc}
#mt261 .nav{display:flex;
overflow:auto;
padding:8px;
gap:4px;
border-block:1px solid var(--viz-border)}
#mt261 .nav button{white-space:nowrap;
border:0;
background:transparent;
border-radius:9px;
padding:8px 11px;
color:var(--viz-muted);
font-size:12px}
#mt261 .nav button.on{background:#8172bb;
color:white}
#mt261 .body{padding:16px}
#mt261 h2{font-size:25px;
line-height:1.25;
letter-spacing:-.5px;
margin:13px 0;
font-weight:800}
#mt261 h3{font-size:17px;
font-weight:750;
margin:10px 0}
#mt261 p{margin:9px 0}
#mt261 .muted{color:var(--viz-muted)}
#mt261 .tiny{font-size:10px;
letter-spacing:1px}
#mt261 .small{font-size:12px}
#mt261 .btn{display:block;
width:100%;
background:var(--viz-panel);
border:1px solid var(--viz-border);
border-radius:11px;
color:var(--viz-text);
padding:12px;
margin:8px 0;
text-align:left}
#mt261 .btn.primary{background:#8172bb;
color:#fff;
text-align:center;
border-color:#8172bb;
font-weight:750}
#mt261 .btn:disabled{opacity:.4;
cursor:default}
#mt261 .grid{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px}
#mt261 .tile{background:var(--viz-panel);
border:1px solid var(--viz-border);
border-radius:12px;
color:var(--viz-text);
padding:9px;
text-align:center;
min-width:0}
#mt261 .card{border:1px solid var(--viz-border);
border-radius:13px;
padding:14px;
margin:12px 0}
#mt261 .hero{background:linear-gradient(140deg,#202847,#514c80);
color:#fff;
border-radius:17px;
padding:20px}
#mt261 .hero p{color:#e3dff1}
#mt261 .flex{display:flex;
align-items:center;
justify-content:space-between;
gap:10px}
#mt261 .art{border-radius:12px;
overflow:hidden}
#mt261 .art svg{width:100%;
height:auto;
display:block}
#mt261 .bar{height:8px;
border-radius:20px;
background:var(--viz-panel);
overflow:hidden}
#mt261 .bar div{height:100%;
background:#9581c9}
#mt261 input,#mt261 textarea{width:100%;
background:var(--viz-panel);
border:1px solid var(--viz-border);
color:var(--viz-text);
border-radius:10px;
padding:11px;
margin:6px 0}
#mt261 textarea{min-height:100px}
#mt261 .line{padding:12px 0;
border-bottom:1px solid var(--viz-border)}
#mt261 .note{font-size:11px;
color:var(--viz-muted);
line-height:1.75;
margin:12px 0}
#mt261 .reveal{animation:mt261show .55s ease both}
@keyframes mt261show{from{opacity:0;
transform:translateY(12px)}
to{opacity:1;
transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){#mt261 .reveal{animation:none}
}


body{margin:0;
background:#20263d}
svg{display:block;
width:100%;
height:auto;
max-width:900px;
margin:auto}


:root{--viz-text:#292b3d;
--viz-muted:#686b7c;
--viz-card:#fffefa;
--viz-border:#dedee7;
--viz-panel:#f4f3f8;
background:#eeeef3}
body{margin:0;
padding:32px 24px;
font-family:system-ui}
#mt261{max-width:1100px;
margin:auto}
#mt261 .frame{box-shadow:0 20px 70px #25234512}
#mt261 .head{padding:24px 32px}
#mt261 .body{padding:32px;
min-height:65vh}
#mt261 .nav{padding:12px 24px}
#mt261 .grid{grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px}
#mt261 .hero{padding:30px;
background:linear-gradient(130deg,#202b49,#655888)}
#mt261 .hero .art{max-width:220px;
margin:18px auto!important}
#mt261 .hero h2{font-size:38px}
#mt261 .btn{max-width:720px;
padding:15px}
#mt261 .tile{padding:16px}
#mt261 .tile:hover{border-color:#8172bb;
transform:translateY(-2px)}
#mt261 .note{font-size:13px}
#mt261 .tiny{font-size:11px}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ae8add;
outline-offset:3px}
#mt261 .card{background:#fff}
#mt261 textarea{resize:vertical}
@media(max-width:700px){body{padding:10px}
#mt261 .body{padding:18px}
#mt261 .head{padding:18px}
#mt261 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#mt261 .hero h2{font-size:30px}
#mt261 .nav{padding:8px}
}


#mt261 [data-type].tile{background:#fffefa;
padding:10px 10px 18px;
border-color:#e6e1dc;
transition:transform .2s,box-shadow .2s}
#mt261 [data-type].tile:hover{transform:translateY(-5px);
box-shadow:0 12px 25px #35304418}
#mt261 [data-type] .art{border-radius:85px 85px 8px 8px}
#mt261 [data-type] h3{letter-spacing:3px;
margin-top:16px}
#mt261 .hero .art{max-width:300px}
#mt261 .tiny{letter-spacing:1.5px}

#mt261 select{width:100%;
font:inherit;
color:var(--viz-text);
background:var(--viz-panel);
border:1px solid var(--viz-border);
border-radius:10px;
padding:12px;
margin:8px 0}
#mt261 #pair-error{color:var(--viz-text)}

#mt261 input,#mt261 select,#mt261 textarea{min-width:0;
max-width:100%}
#mt261 button{overflow-wrap:anywhere;
min-height:44px}
#mt261 summary{cursor:inherit;
padding:8px 0}
#mt261 .card p{overflow-wrap:anywhere}
#mt261 #export-preview textarea{min-height:140px}
#mt261 .hero>svg{width:100%;
height:auto;
display:block;
max-width:320px;
margin:auto}
#mt261 .nav{flex-wrap:wrap;
overflow:visible}
#mt261 .tiny{font-size:11px}
#mt261 .small{font-size:13px}
@media(max-width:380px){#mt261 .grid{gap:8px}
#mt261 .tile{padding:8px}
#mt261 .body{padding:12px}
#mt261 .hero h2{font-size:26px}
}

#mt261 .report-actions{display:flex;
flex-wrap:wrap;
gap:8px;
margin:16px 0}
#mt261 .report-actions .btn{width:auto;
margin:0}
#mt261 .card p{line-height:1.9}
#mt261 .card a{color:var(--viz-text);
text-decoration:underline;
text-underline-offset:3px}
/* Release refinements: clear focus, responsive reading and print-friendly reports. */
:root {
  --viz-text: #292b3d;
  --viz-muted: #626578;
  --viz-card: #fffefa;
  --viz-border: #dedee7;
  --viz-panel: #f4f3f8;
  color-scheme: light;
}
#mt261 .frame { box-shadow: 0 16px 55px #25234512; }
#mt261 .head { align-items: center; gap: 16px; }
#mt261 .nav { gap: 6px; flex-wrap: wrap; overflow: visible; }
#mt261 .nav button { min-height: 44px; font-size: 14px; }
#mt261 .body { max-width: 960px; margin: auto; }
#mt261 .card p { max-width: 74ch; }
#mt261 [data-type].tile { background: var(--viz-card); }
#mt261 button[aria-pressed="true"] { border-color: #8172bb; background: var(--viz-panel); box-shadow: inset 4px 0 #8172bb; }
#mt261 #app-status { padding: 0 24px 18px; overflow-wrap: anywhere; }
#mt261 .report-actions { align-items: stretch; }
#mt261 input[hidden], #mt261 button[hidden] { display: none; }
#mt261 input[type="file"] { white-space: normal; }
#mt261 textarea { font-size: 16px; }
#mt261 .release-footer { margin: 0; padding: 18px 24px; border-top: 1px solid var(--viz-border); color: var(--viz-muted); font-size: 12px; }
@media (prefers-color-scheme: dark) {
  :root { --viz-text:#eeedf5; --viz-muted:#b6b5c5; --viz-card:#212131; --viz-border:#49485b; --viz-panel:#303043; background:#191924; color-scheme:dark; }
  body { background: #191924; }
  #mt261 .frame, #mt261 .card { background: var(--viz-card); }
}
@media (max-width: 600px) {
  body { padding: 10px; }
  #mt261 .head { align-items: flex-start; flex-direction: column; }
  #mt261 .nav { padding: 10px; }
  #mt261 .nav button { padding: 9px; }
  #mt261 .body { padding: 16px; }
  #mt261 .report-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  #mt261 .report-actions .btn { width: 100%; }
}
@media print {
  body { padding:0; background:white; }
  #mt261 .nav, #mt261 .report-actions, #mt261 #export-preview, #mt261 #app-status { display:none; }
  #mt261 .frame { border:0; box-shadow:none; }
  #mt261 .card { break-inside:avoid; }
}