.mt-page { --mt-green:#73e6a8; --mt-text:#bcbab5; }
.mt-page :is(section, [id]) { scroll-margin-top:96px; }
.mt-skip { position:fixed; top:10px; left:12px; z-index:200; padding:12px 18px; background:var(--paper); color:var(--ink); transform:translateY(-200%); }
.mt-skip:focus { transform:none; }
.mt-header { background:rgba(16,17,20,.94); backdrop-filter:blur(16px); }
.mt-page .container { max-width:1260px; }
.mt-hero { overflow:hidden; color:var(--light); background:var(--ink); padding:139px 0 0; }
.mt-hero-topline { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:38px; border-bottom:1px solid var(--line-dark); }
.mt-product { display:flex; gap:13px; align-items:center; font-family:var(--font-display); font-size:1.05rem; font-weight:600; letter-spacing:-.025em; }
.mt-product-mark { width:28px; height:28px; flex-shrink:0; }
.mt-icon { display:inline-block; width:16px; height:16px; flex-shrink:0; vertical-align:middle; }
.mt-hero .mt-icon, .mt-preview .mt-icon, .mt-contact .mt-icon { filter:brightness(0) invert(1); }
.mt-page .btn-light .mt-icon { filter:none; }
.mt-status { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.07em; font-size:.63rem; color:#d8d6cf; }
.mt-status > span { background:var(--mt-green); width:6px; height:6px; border-radius:50%; box-shadow:0 0 12px #73e6a833; }
.mt-hero-copy { display:grid; grid-template-columns:1.2fr .8fr; gap:55px; padding:52px 0 50px; align-items:end; }
.mt-eyebrow { text-transform:uppercase; letter-spacing:.13em; font-family:var(--font-mono); font-size:.65rem; font-weight:500; margin-bottom:22px; }
.mt-hero .mt-eyebrow { color:var(--mt-green); }
.mt-hero h1 { font-size:clamp(3.1rem,6.6vw,5.4rem); line-height:1; letter-spacing:-.055em; }
.mt-hero h1 em { color:#e7e0ce; }
.mt-hero-side { padding-bottom:6px; }
.mt-hero-side > p:first-child { font-size:1.15rem; max-width:390px; line-height:1.65; }
.mt-hero-detail { font-size:.92rem; line-height:1.7; color:var(--mt-text); margin:16px 0 25px; max-width:370px; }
.mt-actions { display:flex; flex-wrap:wrap; align-items:center; gap:19px; }
.mt-actions .btn { font-size:.9rem; padding:12px 19px; }
.mt-inline-link { font-size:.82rem; color:#c1beb6; display:inline-flex; gap:9px; }
.mt-inline-link:hover { color:white; }
.mt-console-stage { padding:10px 10px 0; background:#26282b; border:1px solid #383b3c; border-radius:16px 16px 0 0; box-shadow:0 36px 90px #0006; position:relative; }
.mt-stage-heading { display:flex; align-items:center; justify-content:space-between; padding:3px 5px 11px; font-family:var(--font-mono); text-transform:uppercase; font-size:.53rem; letter-spacing:.08em; color:#bcbebd; }
.mt-stage-heading > span { display:flex; align-items:center; gap:8px; }
.mt-live-dot { width:5px; height:5px; background:var(--mt-green); border-radius:100%; }
.mt-console-image { display:block; width:100%; height:auto; border-radius:7px; }
.mt-console-stage figcaption { text-align:center; color:#9f9d96; font-size:.65rem; padding:11px 6px 12px; }
.mt-hero-bottom { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line-dark); }
.mt-hero-bottom span { font-size:.7rem; padding:25px 12px; font-family:var(--font-mono); color:#c9c7c1; text-align:center; }
.mt-hero-bottom span + span { border-left:1px solid var(--line-dark); }
.mt-section { padding:108px 0; }
.mt-page h2 { font-size:clamp(2.25rem,4.4vw,3.55rem); line-height:1.08; letter-spacing:-.045em; }
.mt-intro { background:var(--paper-2); }
.mt-intro-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center; }
.mt-intro h2 { font-size:clamp(2.15rem,3.6vw,2.85rem); }
.mt-intro .mt-eyebrow { color:var(--accent-deep); }
.mt-intro-grid > p { font-size:1.08rem; line-height:1.8; color:#56554f; }
.mt-story-heading { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; margin-bottom:50px; align-items:end; }
.mt-story-heading > p { color:#63615b; font-size:1rem; line-height:1.8; max-width:390px; }
.mt-chapter { display:block; font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.11em; color:var(--accent-deep); margin-bottom:22px; }
.mt-feature-explorer { display:grid; grid-template-columns:340px minmax(0,1fr); border-top:1px solid var(--line); }
.mt-feature-menu { padding-right:36px; }
.mt-feature-choice { background:none; text-align:left; border:0; border-bottom:1px solid var(--line); color:var(--ink); width:100%; display:grid; grid-template-columns:24px 1fr 15px; gap:12px; padding:27px 0; cursor:pointer; }
.mt-feature-choice.is-active { color:var(--accent-deep); }
.mt-feature-number { font: .62rem var(--font-mono); padding-top:5px; color:#77746e; }
.mt-feature-choice strong { font:600 1.05rem var(--font-display); letter-spacing:-.02em; display:block; margin-bottom:7px; }
.mt-feature-choice strong + span { color:#64625b; font-size:.78rem; display:block; line-height:1.6; }
.mt-choice-arrow { width:17px; height:17px; margin-top:3px; }
.mt-feature-view { padding:28px 0 0 30px; border-left:1px solid var(--line); min-width:0; }
.mt-feature-view figure { background:var(--ink); border-radius:10px; overflow:hidden; border:1px solid #343536; box-shadow:var(--shadow-md); }
.mt-feature-view img { display:block; width:100%; height:auto; }
.mt-feature-view figcaption { padding:14px 18px 16px; color:#c9c5bd; font-size:.72rem; line-height:1.6; }
.mt-feature-description { margin:23px 0 12px; font-size:.87rem; color:#5a5852; max-width:660px; line-height:1.8; }
.mt-static-links { font-size:.68rem; color:#747169; }
.mt-static-links a { text-decoration:underline; text-underline-offset:3px; }
.mt-mix { color:var(--light); background:#181a1d; }
.mt-mix .mt-chapter { color:var(--mt-green); }
.mt-mix .mt-story-heading > p { color:var(--mt-text); }
.mt-mix-layout { display:grid; grid-template-columns:1.12fr .88fr; gap:55px; align-items:start; }
.mt-mixer-art { overflow:hidden; position:relative; min-height:510px; border:1px solid #414341; background:#0e1011; border-radius:10px; }
.mt-mixer-art img { width:100%; max-width:none; height:510px; object-fit:cover; object-position:0 100%; }
.mt-image-label { position:absolute; bottom:0; left:0; right:0; padding:13px 18px; background:linear-gradient(transparent,#101114 40%); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.55rem; color:#bfbcb3; }
.mt-mix-notes { display:grid; gap:30px; }
.mt-mix-notes > div { padding:0 0 24px 40px; border-bottom:1px solid var(--line-dark); position:relative; }
.mt-note-index { position:absolute; left:0; top:0; color:var(--mt-green); font: .7rem var(--font-mono); border:1px solid #3a5145; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; }
.mt-mix-notes h3 { font-size:1.12rem; margin:2px 0 12px; letter-spacing:-.02em; }
.mt-mix-notes p { font-size:.85rem; line-height:1.8; color:var(--mt-text); }
.mt-pad-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; align-items:center; }
.mt-large-copy { font-size:1.2rem; line-height:1.6; margin:27px 0 13px; max-width:330px; }
.mt-pad-layout > div > p:not(.mt-large-copy) { font-size:.9rem; line-height:1.8; color:#625f57; }
.mt-check-list { list-style:none; margin:22px 0; padding:0; display:grid; gap:10px; font-size:.84rem; }
.mt-check-list li { padding-left:22px; position:relative; }
.mt-check-icon { width:15px; height:15px; position:absolute; left:0; top:3px; }
.mt-pad-layout > div > p.mt-small-note { font-size:.7rem; color:#79756c; }
.mt-pad-image { padding:16px; border:1px solid var(--line); background:var(--paper-2); border-radius:14px; transform:rotate(1.3deg); }
.mt-pad-image img { border:1px solid #323337; border-radius:7px; width:100%; height:auto; }
.mt-pad-image figcaption { font-size:.67rem; color:#77716a; padding:13px 0 2px; }
.mt-workflow { background:var(--paper-2); border-block:1px solid var(--line); }
.mt-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; gap:35px; }
.mt-steps li { border-top:1px solid #bfb8aa; padding-top:20px; }
.mt-steps li > span { font: .72rem var(--font-mono); color:var(--accent-deep); }
.mt-steps h3 { font-size:1.19rem; margin:30px 0 15px; }
.mt-steps p { color:#68645c; font-size:.81rem; line-height:1.8; }
.mt-capability-intro { text-align:center; margin-bottom:55px; }
.mt-capability-intro .mt-eyebrow { color:var(--accent-deep); }
.mt-capability-intro > p:last-child { margin-top:20px; color:#716c63; font-size:.91rem; }
.mt-capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 45px; }
.mt-capability-grid article { border-top:1px solid var(--line); padding-top:26px; }
.mt-capability-icon { width:28px; height:28px; margin-bottom:22px; }
.mt-capability-grid h3 { font-size:1.18rem; margin-bottom:20px; }
.mt-capability-grid ul { padding-left:14px; display:grid; gap:8px; color:#676158; font-size:.78rem; line-height:1.7; }
.mt-capability-grid li::marker { color:#aaa18e; }
.mt-preview { background:var(--ink); color:var(--light); }
.mt-preview .mt-eyebrow { color:var(--mt-green); }
.mt-preview-top { display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:center; }
.mt-preview-top > div > p:last-child { margin-top:26px; font-size:.9rem; color:#b7b3aa; max-width:500px; line-height:1.8; }
.mt-preview-status { padding:30px; border:1px solid #3f423e; border-radius:12px; background:#1b1e1f; }
.mt-preview-status > p { margin:22px 0; color:#d3cfc5; font-size:.89rem; line-height:1.9; }
.mt-preview-status > a { color:var(--mt-green); border-bottom:1px solid #467456; padding-bottom:5px; font-size:.85rem; }
.mt-roadmap { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; border-top:1px solid var(--line-dark-strong); margin-top:65px; padding-top:40px; }
.mt-roadmap-label { display:block; font: .62rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:#e6ba8e; margin-bottom:20px; }
.mt-roadmap h3 { font-size:1.6rem; margin-bottom:15px; }
.mt-roadmap > div > p { font-size:.8rem; line-height:1.8; color:#aaa69c; max-width:280px; }
.mt-roadmap ul { list-style:none; padding:0; display:grid; gap:18px; }
.mt-roadmap li { display:grid; grid-template-columns:1fr 1.4fr; gap:20px; border-bottom:1px solid var(--line-dark); padding-bottom:18px; }
.mt-roadmap li strong { font:500 .9rem var(--font-display); }
.mt-roadmap li span { color:#a9a69d; font-size:.76rem; line-height:1.7; }
.mt-preview-footnote { font-size:.68rem; color:#969287; max-width:880px; margin-top:35px; line-height:1.8; }
.mt-faq-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:85px; }
.mt-faq .mt-eyebrow { color:var(--accent-deep); }
.mt-questions details { border-top:1px solid var(--line); padding:20px 0; }
.mt-questions details:last-child { border-bottom:1px solid var(--line); }
.mt-questions summary { display:flex; justify-content:space-between; gap:25px; cursor:pointer; list-style:none; font:500 1rem var(--font-display); line-height:1.5; }
.mt-questions summary::-webkit-details-marker { display:none; }
.mt-questions summary::after { content:''; width:18px; height:18px; flex-shrink:0; margin-top:3px; background:url('/mtplayer/icons/plus.svg') center / contain no-repeat; }
.mt-questions details[open] summary::after { background-image:url('/mtplayer/icons/minus.svg'); }
.mt-questions details p { font-size:.83rem; color:#6d665b; margin-top:16px; max-width:580px; line-height:1.85; }
.mt-contact { background:var(--accent); color:white; padding:95px 0 70px; position:relative; }
.mt-contact > .container { display:flex; justify-content:space-between; gap:60px; align-items:end; }
.mt-contact .mt-eyebrow { color:#ffd0bf; }
.mt-contact h2 { font-size:clamp(2.8rem,5.7vw,4.9rem); }
.mt-contact-heading > p:not(.mt-eyebrow) { max-width:500px; color:#ffded2; font-size:.95rem; line-height:1.8; margin:26px 0; }
.mt-contact-secondary { display:block; margin-top:16px; font-size:.74rem; color:#ffded2; text-decoration:underline; text-underline-offset:4px; }
.mt-contact-signature { display:flex; gap:18px; align-items:center; padding-bottom:7px; }
.mt-contact-signature p { font-family:var(--font-display); font-size:1rem; line-height:1.65; }
.mt-contact-signature span { color:#ffd1c0; font: .74rem var(--font-body); }
.mt-footer { padding-top:0; }
.mt-footer .footer-bottom { border:0; }
.mt-page :is(button,a,summary):focus-visible { outline:3px solid var(--accent-deep); outline-offset:5px; }
.mt-page :is(.mt-hero,.mt-mix,.mt-preview,.mt-contact) :is(a,button,summary):focus-visible { outline-color:var(--mt-green); }
@media(min-width:1500px) { .mt-hero-copy { padding-top:65px; padding-bottom:60px; } }
@media(max-width:1000px) { .mt-hero-copy { grid-template-columns:1.1fr .9fr; gap:34px; } .mt-hero h1 { font-size:4rem; } .mt-feature-explorer { grid-template-columns:280px minmax(0,1fr); } .mt-feature-menu { padding-right:23px; } .mt-feature-view { padding-left:23px; } .mt-intro-grid,.mt-story-heading { gap:45px; } .mt-mix-layout { gap:35px; } .mt-pad-layout { gap:35px; } .mt-preview-top { gap:45px; } .mt-faq-layout { gap:45px; } .mt-roadmap { gap:45px; } }
@media(max-width:800px) { .mt-section { padding:75px 0; } .mt-hero { padding-top:115px; } .mt-hero-copy { grid-template-columns:1fr; gap:30px; padding:40px 0; } .mt-hero h1 { font-size:clamp(3.25rem,8.5vw,4.6rem); } .mt-hero-side { max-width:620px; } .mt-hero-side > p:first-child { max-width:560px; } .mt-hero-detail { max-width:540px; } .mt-hero-topline { padding-bottom:25px; align-items:start; } .mt-status { font-size:.55rem; } .mt-intro-grid,.mt-story-heading { grid-template-columns:1fr; gap:25px; } .mt-story-heading > p { max-width:600px; } .mt-feature-explorer { grid-template-columns:1fr; } .mt-feature-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 25px; padding:0; } .mt-feature-choice { grid-template-columns:1fr; gap:10px; padding:23px 0; } .mt-feature-choice strong { font-size:.94rem; } .mt-feature-choice strong+span { font-size:.71rem; } .mt-choice-arrow { display:none; } .mt-feature-view { padding:27px 0 0; border:0; } .mt-mix-layout,.mt-pad-layout { grid-template-columns:1fr; gap:35px; } .mt-mixer-art { min-height:350px; } .mt-mixer-art img { height:350px; } .mt-mix-notes { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .mt-mix-notes > div { padding:0 0 22px; } .mt-note-index { position:static; margin-bottom:20px; } .mt-mix-notes p { font-size:.75rem; } .mt-mix-notes h3 { font-size:1rem; line-height:1.3; } .mt-pad-image { transform:none; } .mt-pad-layout > div > p { max-width:560px; } .mt-check-list { grid-template-columns:1fr 1fr; } .mt-steps { grid-template-columns:1fr 1fr; } .mt-steps h3 { margin-top:21px; } .mt-capability-grid { grid-template-columns:1fr 1fr; gap:35px; } .mt-preview-top { grid-template-columns:1fr; gap:35px; } .mt-preview-status { max-width:540px; } .mt-roadmap { grid-template-columns:1fr; gap:30px; } .mt-roadmap > div > p { max-width:none; } .mt-faq-layout { grid-template-columns:1fr; gap:35px; } .mt-contact > .container { flex-direction:column; align-items:start; gap:50px; } .mt-contact-signature img { width:34px; height:34px; } .mt-contact-signature p { font-size:.85rem; } }
@media(max-width:520px) { .mt-product { font-size:.85rem; gap:8px; } .mt-hero-topline { flex-direction:column; gap:18px; } .mt-hero .mt-eyebrow { font-size:.54rem; } .mt-hero h1 { font-size:3.35rem; } .mt-hero-side > p:first-child { font-size:1.02rem; } .mt-hero-detail { font-size:.85rem; } .mt-stage-heading { font-size:.43rem; } .mt-stage-heading > span:last-child { display:none; } .mt-console-stage { padding:6px 6px 0; border-radius:10px 10px 0 0; margin-inline:-8px; } .mt-console-stage figcaption { font-size:.54rem; } .mt-hero-bottom { grid-template-columns:1fr 1fr; } .mt-hero-bottom span { padding:17px 5px; font-size:.55rem; border-top:1px solid var(--line-dark); } .mt-hero-bottom span:nth-child(3) { border-left:0; } .mt-page h2 { font-size:2.45rem; } .mt-feature-menu { grid-template-columns:1fr; gap:0; } .mt-feature-choice { grid-template-columns:23px 1fr 20px; padding:19px 0; } .mt-feature-number { padding-top:2px; } .mt-choice-arrow { display:block; } .mt-feature-view figcaption { font-size:.64rem; padding:12px; } .mt-feature-description { font-size:.8rem; } .mt-static-links { font-size:.62rem; } .mt-mix-notes { grid-template-columns:1fr; gap:23px; } .mt-mix-notes > div { padding-left:36px; } .mt-note-index { position:absolute; } .mt-mix-notes p { font-size:.82rem; } .mt-mix-notes h3 { font-size:1.07rem; } .mt-check-list { grid-template-columns:1fr; font-size:.8rem; } .mt-pad-image { padding:8px; } .mt-pad-image figcaption { font-size:.6rem; padding:10px 2px 3px; } .mt-steps { gap:30px 25px; } .mt-steps h3 { font-size:1.08rem; } .mt-steps p { font-size:.76rem; } .mt-capability-grid { grid-template-columns:1fr; gap:28px; } .mt-capability-grid article { padding-top:23px; } .mt-capability-icon { margin-bottom:15px; } .mt-capability-grid h3 { margin-bottom:15px; } .mt-capability-grid ul { font-size:.81rem; } .mt-roadmap li { grid-template-columns:1fr; gap:9px; } .mt-preview-status { padding:24px; } .mt-preview-status .mt-status { font-size:.6rem; } .mt-contact { padding:75px 0 50px; } .mt-contact h2 { font-size:3.4rem; } }
@media(prefers-reduced-motion:reduce) { .mt-page *, .mt-page *::before, .mt-page *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }