.mql45-converter{
  --mql45-ink:#152536;
  --mql45-muted:#5b6877;
  --mql45-line:#dce5e8;
  --mql45-line-strong:#c8d5da;
  --mql45-paper:#ffffff;
  --mql45-bg:#f5f8f8;
  --mql45-dark:#0b1422;
  --mql45-dark-2:#121f30;
  --mql45-dark-3:#0d202c;
  --mql45-dark-line:#2a3b50;
  --mql45-mint:#85ead2;
  --mql45-primary:#075e54;
  --mql45-primary-hover:#064d45;
  --mql45-primary-soft:#e8f6f2;
  --mql45-blue:#94b9ff;
  --mql45-focus:#2d74b7;
  position:relative;
  width:100%;
  min-width:0;
  color:var(--mql45-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  font-size:16px;
  line-height:1.75;
  container-type:inline-size;
  isolation:isolate;
}
.mql45-converter,.mql45-converter *{box-sizing:border-box;min-width:0}
.mql45-converter button,.mql45-converter textarea{font:inherit}
.mql45-converter button{appearance:none;-webkit-appearance:none;cursor:pointer;line-height:1.35;text-transform:none;letter-spacing:normal}
.mql45-converter [hidden]{display:none!important}
.mql45-converter p,.mql45-converter h2,.mql45-converter h3,.mql45-converter h4,.mql45-converter ul,.mql45-converter pre{max-width:none}

/* Creatorサイトと共通のダークHero。テーマ側のh2装飾を完全に打ち消す。 */
.mql45-converter .mql45-intro{
  margin:0 0 1.25rem!important;
  padding:1.35rem!important;
  overflow:hidden;
  border:1px solid var(--mql45-dark-line)!important;
  border-radius:18px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 91% 5%,rgba(7,94,84,.52) 0,transparent 36%),
    linear-gradient(135deg,var(--mql45-dark) 0%,var(--mql45-dark-2) 68%,#102b2d 100%)!important;
  box-shadow:0 18px 42px rgba(11,20,34,.12)!important;
}
.mql45-intro-grid{display:grid;grid-template-columns:1fr;align-items:center;gap:1.2rem}
.mql45-converter .mql45-intro-copy{padding:.1rem}
.mql45-converter .mql45-eyebrow{margin:0!important;padding:0!important;color:var(--mql45-mint)!important;background:none!important;border:0!important;font-size:.72rem!important;font-weight:800!important;letter-spacing:.18em!important;line-height:1.4!important}
.mql45-converter .mql45-intro h2{
  margin:.58rem 0 .68rem!important;
  padding:0!important;
  border:0!important;
  border-left:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:#fff!important;
  background:none!important;
  font-size:clamp(1.72rem,7vw,2.45rem)!important;
  font-weight:800!important;
  line-height:1.22!important;
  letter-spacing:-.035em!important;
}
.mql45-converter .mql45-intro h2:before,.mql45-converter .mql45-intro h2:after{display:none!important;content:none!important}
.mql45-converter .mql45-intro h2 strong{color:var(--mql45-mint)!important;font:inherit!important}
.mql45-converter .mql45-intro-copy>p:not(.mql45-eyebrow){max-width:44rem;margin:.55rem 0 0!important;padding:0!important;color:#e1ebee!important;background:none!important;border:0!important;font-size:.95rem!important;font-weight:400!important;line-height:1.85!important}
.mql45-converter .mql45-intro ul{display:grid;grid-template-columns:1fr;gap:.45rem;margin:1rem 0 0!important;padding:0!important;list-style:none!important;color:#d0dde1!important;background:none!important;border:0!important;font-size:.8rem!important}
.mql45-converter .mql45-intro li{margin:0!important;padding:0!important;color:#d0dde1!important;background:none!important;border:0!important}
.mql45-converter .mql45-intro li:before{content:"✓"!important;margin-right:.38rem;color:var(--mql45-mint)!important;font-weight:900!important}

.mql45-code-preview{overflow:hidden;border:1px solid #315064;border-radius:14px;background:#071821;box-shadow:0 1rem 2.3rem rgba(0,0,0,.24)}
.mql45-code-preview header{height:2.55rem;padding:0 .82rem;display:flex;align-items:center;gap:.38rem;border-bottom:1px solid #315064;background:#0e2330}
.mql45-code-preview header span{width:.5rem;height:.5rem;border-radius:50%;background:#647a87}.mql45-code-preview header span:nth-child(1){background:#ed7f83}.mql45-code-preview header span:nth-child(2){background:#ebc76f}.mql45-code-preview header span:nth-child(3){background:#7bd7bb}
.mql45-code-preview header b{margin-left:auto;color:#b3c3cb;font-size:.63rem;letter-spacing:.12em}
.mql45-converter .mql45-code-preview pre{min-height:0;margin:0!important;padding:1.05rem!important;overflow:auto;white-space:pre;border:0!important;border-radius:0!important;color:#e8f1f3!important;background:#071821!important;font:13.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;tab-size:3}
.mql45-code-preview code,.mql45-code-preview i,.mql45-code-preview mark{font:inherit!important}.mql45-code-preview i{color:var(--mql45-blue)!important;font-style:normal}.mql45-code-preview mark{color:var(--mql45-mint)!important;background:transparent!important;font-weight:800!important}
.mql45-code-preview footer{padding:.6rem .92rem;border-top:1px solid #315064;color:#9eb0b8;background:#0e2330;font-size:.63rem;letter-spacing:.1em}.mql45-code-preview footer b{color:var(--mql45-mint)}

/* Tool surface is intentionally light for long code-editing sessions. */
.mql45-tool{overflow:hidden;border:1px solid var(--mql45-line-strong);border-radius:18px;background:var(--mql45-paper);box-shadow:0 14px 38px rgba(20,45,66,.07)}
.mql45-direction{padding:.75rem;border-bottom:1px solid var(--mql45-line);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.6rem;background:var(--mql45-bg)}
.mql45-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.25rem;border:1px solid var(--mql45-line-strong);border-radius:12px;background:#fff}
.mql45-converter .mql45-tabs button{min-height:44px;margin:0;padding:.5rem .7rem;border:0!important;border-radius:9px!important;box-shadow:none!important;color:var(--mql45-muted)!important;background:transparent!important;font-size:.86rem;font-weight:800}
.mql45-tabs button small{display:block;margin-top:.05rem;font-size:.64rem;font-weight:600;opacity:.84}
.mql45-converter .mql45-tabs button.is-active{color:#063f39!important;background:var(--mql45-primary-soft)!important;box-shadow:inset 0 0 0 1px #badfd5!important}
.mql45-direction-label{display:none;align-items:center;gap:.6rem;margin:0!important}.mql45-direction-label b{padding:.35rem .65rem;border:1px solid var(--mql45-line);border-radius:9px;background:#fff;font-size:.75rem}.mql45-direction-label span{color:var(--mql45-primary);font-weight:800}
.mql45-converter .mql45-swap{width:44px;height:44px;margin:0;padding:0;border:1px solid var(--mql45-line-strong)!important;border-radius:11px!important;box-shadow:none!important;color:var(--mql45-primary)!important;background:#fff!important;font-size:1rem;font-weight:900}.mql45-swap span{display:none}
.mql45-converter button{transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.mql45-converter button:hover{border-color:var(--mql45-primary)!important}.mql45-converter button:active{transform:translateY(1px)}
.mql45-converter button:focus-visible,.mql45-converter textarea:focus-visible{outline:3px solid var(--mql45-focus)!important;outline-offset:2px!important}

.mql45-editors{display:grid;grid-template-columns:1fr;background:#fff}
.mql45-panel{min-width:0;display:flex;flex-direction:column;background:#fff}
.mql45-panel header{min-height:4.25rem;padding:.75rem .82rem;border-bottom:1px solid var(--mql45-line);display:flex;align-items:center;gap:.65rem;background:#fff}
.mql45-panel header>span:nth-child(2){display:flex;flex-direction:column;line-height:1.35}.mql45-panel header b{color:var(--mql45-ink);font-size:.9rem}.mql45-panel header small{margin-top:.12rem;color:#6c7e89;font-size:.64rem;letter-spacing:.08em}
.mql45-step{width:2rem;height:2rem;flex:0 0 auto;border:1px solid var(--mql45-line);border-radius:9px;display:grid;place-items:center;color:var(--mql45-muted);background:var(--mql45-bg);font-size:.67rem;font-weight:800}.mql45-step.is-accent{border-color:#b8ddd4;color:var(--mql45-primary);background:var(--mql45-primary-soft)}
.mql45-panel-actions{margin-left:auto;display:flex;gap:.35rem}.mql45-converter .mql45-panel-actions button{min-height:40px;margin:0;padding:.45rem .6rem;border:1px solid var(--mql45-line-strong)!important;border-radius:9px!important;box-shadow:none!important;color:#405563!important;background:#fff!important;font-size:.7rem;font-weight:700}
.mql45-converter .mql45-panel textarea{display:block;width:100%;min-height:21rem;margin:0;padding:1rem;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0;resize:vertical;overflow:auto;white-space:pre;word-break:normal;color:#e7f0f2!important;background:#081822!important;font:14px/1.74 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;tab-size:3;caret-color:var(--mql45-mint);-webkit-text-size-adjust:100%}
.mql45-panel textarea::placeholder{color:#92a5ad}.mql45-panel textarea:focus-visible{outline:0!important;box-shadow:inset 0 0 0 3px var(--mql45-focus)!important}
.mql45-panel footer{min-height:2.45rem;padding:0 .85rem;border-top:1px solid var(--mql45-line);display:flex;align-items:center;justify-content:flex-end;gap:.85rem;color:#657985;background:var(--mql45-bg);font-size:.68rem}.mql45-result-panel{border-top:1px solid var(--mql45-line)}
.mql45-complete{margin-left:auto;padding:.3rem .55rem;border-radius:999px;color:var(--mql45-primary);background:var(--mql45-primary-soft);font-size:.68rem;font-weight:800;white-space:nowrap}

.mql45-rail{padding:.7rem;border-top:1px solid var(--mql45-line);border-bottom:1px solid var(--mql45-line);display:block;background:#eef5f3}
.mql45-converter .mql45-rail button{width:100%;min-height:50px;margin:0;padding:.58rem 1rem;border:1px solid #064e46!important;border-radius:11px!important;display:flex;align-items:center;justify-content:center;gap:.6rem;color:#fff!important;background:var(--mql45-primary)!important;box-shadow:0 .55rem 1.25rem rgba(7,94,84,.18)!important;font-size:.9rem;font-weight:800}.mql45-converter .mql45-rail button:hover{background:var(--mql45-primary-hover)!important}.mql45-rail button:after{content:"→";font-size:1.1rem}.mql45-rail button small{font-size:.58rem;font-weight:600;opacity:.8}
.mql45-result-actions{padding:.7rem;display:grid;grid-template-columns:1fr;gap:.5rem;background:var(--mql45-bg)}
.mql45-converter .mql45-result-actions button{min-height:46px;margin:0;padding:.55rem .75rem;border-radius:10px!important;font-size:.78rem;font-weight:800}.mql45-converter .mql45-result-actions button:first-child{border:1px solid #064e46!important;color:#fff!important;background:var(--mql45-primary)!important;box-shadow:none!important}.mql45-converter .mql45-result-actions button:last-child{border:1px solid var(--mql45-line-strong)!important;color:#405563!important;background:#fff!important;box-shadow:none!important}
.mql45-mobile-action{display:none!important}

.mql45-report{margin:1.5rem auto 0}.mql45-converter .mql45-report>h3{margin:0!important;padding:0!important;border:0!important;background:none!important;color:var(--mql45-ink)!important;font-size:1.35rem!important;line-height:1.35!important}.mql45-report>p{margin:.3rem 0 .9rem!important;color:var(--mql45-muted)!important;font-size:.9rem}.mql45-report>div{display:grid;grid-template-columns:1fr;gap:.7rem}.mql45-report article{padding:1rem;border:1px solid var(--mql45-line);border-radius:14px;background:#fff}.mql45-converter .mql45-report h4{margin:0 0 .65rem!important;padding:0 0 .6rem!important;border:0!important;border-bottom:1px solid var(--mql45-line)!important;background:none!important;color:var(--mql45-ink)!important;font-size:.95rem!important}.mql45-report h4 small{float:right;color:var(--mql45-primary);font-size:.72rem}.mql45-report ul{margin:0!important;padding-left:1.2rem!important}.mql45-report li,.mql45-report article p{margin:.32rem 0!important;color:var(--mql45-muted)!important;font-size:.82rem;line-height:1.7}
.mql45-notice{margin:1.25rem 0 0!important;padding:1rem 1.05rem!important;border:1px solid #d7c38d!important;border-left:4px solid #a76b00!important;border-radius:14px!important;background:#fffaf0!important}.mql45-notice b{color:#4a3c1c;font-size:.86rem}.mql45-notice p{margin:.3rem 0 0!important;color:#62532d!important;font-size:.8rem;line-height:1.75}
.mql45-toast{position:fixed;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));left:.75rem;z-index:9999;padding:.8rem 1rem;border:1px solid #2a3b50;border-radius:10px;color:#fff;background:var(--mql45-dark);box-shadow:0 .8rem 2rem rgba(8,29,51,.28);font-size:.8rem;font-weight:700;text-align:center}

@container (min-width:520px){.mql45-converter .mql45-intro ul{grid-template-columns:repeat(2,minmax(0,1fr))}.mql45-result-actions{grid-template-columns:1.25fr 1fr}.mql45-report>div{grid-template-columns:1fr 1fr}.mql45-toast{right:1.25rem;bottom:1.25rem;left:auto;max-width:28rem;text-align:left}}
@container (min-width:560px){.mql45-converter .mql45-intro{padding:1.65rem!important}.mql45-direction{padding:.8rem 1rem;grid-template-columns:minmax(0,1fr) auto}.mql45-tabs{max-width:25rem}.mql45-converter .mql45-swap{width:auto;padding:0 .8rem}.mql45-swap span{display:inline;margin-left:.25rem}.mql45-panel header{padding:.75rem 1rem}.mql45-panel-actions button{min-height:42px!important;padding:.45rem .72rem!important}.mql45-converter .mql45-panel textarea{min-height:23rem;padding:1.1rem 1.15rem}}
@container (min-width:760px){.mql45-converter .mql45-intro{padding:1.9rem!important}.mql45-intro-grid{grid-template-columns:minmax(0,1.04fr) minmax(18rem,.96fr);gap:1.8rem}.mql45-converter .mql45-intro h2{font-size:2.25rem!important}.mql45-direction{grid-template-columns:auto 1fr auto}.mql45-direction-label{justify-self:end;display:flex}}
@container (min-width:1040px){.mql45-editors{grid-template-columns:minmax(0,1fr) 5.25rem minmax(0,1fr);align-items:stretch}.mql45-result-panel{border-top:0;border-left:1px solid var(--mql45-line)}.mql45-rail{padding:0;border-top:0;border-bottom:0;border-left:1px solid var(--mql45-line);border-right:1px solid var(--mql45-line);display:grid;place-items:center;background:#eef5f3}.mql45-converter .mql45-rail button{width:4rem;min-height:6rem;padding:.55rem .3rem;flex-direction:column;gap:.15rem;border-radius:10px!important;font-size:.82rem}.mql45-rail button:after{content:"→";order:-1;font-size:1.15rem}.mql45-rail button small{font-size:.5rem}.mql45-converter .mql45-panel textarea{min-height:28rem}}
@media(max-width:390px){.mql45-converter .mql45-intro{padding:1.05rem!important;border-radius:15px!important}.mql45-converter .mql45-intro h2{font-size:1.72rem!important}.mql45-converter .mql45-intro-copy>p:not(.mql45-eyebrow){font-size:.9rem!important}.mql45-direction{padding:.55rem}.mql45-tabs button{padding:.42rem .35rem!important;font-size:.8rem!important}.mql45-tabs button small{font-size:.59rem}.mql45-panel header{padding:.62rem .65rem;gap:.5rem}.mql45-panel-actions button{min-height:40px!important;padding:.4rem .48rem!important;font-size:.66rem!important}.mql45-step{width:1.9rem;height:1.9rem}.mql45-converter .mql45-panel textarea{min-height:19rem;padding:.85rem;font-size:13.5px!important}.mql45-result-actions{padding:.6rem}.mql45-notice{padding:.9rem!important}}
@media(prefers-reduced-motion:reduce){.mql45-converter *{scroll-behavior:auto!important;transition:none!important}}
