.mmsg-btn { position: fixed; right: 16px; bottom: 16px; z-index: 900; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: #0b3d5e; color: #fff; font: 700 14px system-ui, sans-serif; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); cursor: pointer; }
.mmsg-btn:hover { background: #0f5280; } .mmsg-btn:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }
.mmsg { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 20, 30, .6); display: flex; justify-content: center; overflow: auto; padding: 16px; --surface: #fff; --ink: #1b2733; --ink-2: #44546a; --line: #d7e0ea; --surface-3: #f1f5f9; --warn-bg: #fff4d6; font-family: system-ui, sans-serif; }
.mmsg-in { background: #fff; border-radius: 14px; max-width: 880px; width: 100%; height: fit-content; padding-bottom: 8px; } .mmsg-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #d7e0ea; position: sticky; top: 0; background: #fff; border-radius: 14px 14px 0 0; z-index: 1; }
.mmsg-x { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1.5px solid #9fb0c3; background: #fff; font: 600 14px system-ui; cursor: pointer; }
/* TRYeTECH Academy — simulator "How to use" panel */
.gd { margin: 0 0 16px; border: 1px solid var(--line, #d7e0ea); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #1b2733); }
.gd-h { padding: 14px 16px 6px; } .gd-h h2 { margin: 0 0 4px; font-size: 1.1rem; } .gd-q { margin: 0; color: var(--ink-2, #44546a); line-height: 1.5; }
.gd-s { border-top: 1px solid var(--line, #d7e0ea); } .gd-s:first-of-type { margin-top: 8px; }
.gd-s summary { cursor: pointer; min-height: 44px; padding: 0 16px; display: flex; align-items: center; font-weight: 700; } .gd-s summary:hover { background: var(--surface-3, #f1f5f9); }
.gd-b { padding: 0 16px 12px; line-height: 1.55; } .gd-b p { margin: 0 0 .6em; } .gd-b ul, .gd-b ol { margin: 0 0 .4em; padding-left: 1.3em; } .gd-b li { margin-bottom: .3em; } .gd-b h4 { margin: .8em 0 .3em; }
.gd-watch { padding: 8px 10px; border-radius: 8px; background: var(--warn-bg, #fff4d6); }
.gd-dl { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 6px 16px; margin: 0; } .gd-dl dt { font-weight: 700; } .gd-dl dd { margin: 0; }
@media (max-width: 640px) { .gd-dl { grid-template-columns: 1fr; } .gd-dl dd { margin-bottom: 8px; } }