cm-route-preview{display:block;margin:20px 0;padding:18px;border:1px solid #252d552e;border-radius:12px;background:#faf8f4;color:#252d55;clear:both}
cm-route-preview [hidden]{display:none!important}
cm-route-preview .cm-route-preview__title{font-size:17px;font-weight:600;margin:0 0 6px}
cm-route-preview .cm-route-preview__note,cm-route-preview .cm-route-preview__status{font-size:13px;line-height:1.5;margin:0 0 12px;overflow-wrap:anywhere}
cm-route-preview .cm-route-preview__status{margin:10px 0}
cm-route-preview:has(.cm-route-preview__thumbnail:not([hidden])) .cm-route-preview__note{display:none}
cm-route-preview[data-review] .cm-route-preview__title,cm-route-preview[data-review] .cm-route-preview__note{display:none}
cm-route-preview button{font-family:inherit;cursor:pointer}
cm-route-preview .cm-route-preview__button{min-height:44px;padding:10px 20px;border:1px solid #252d55;border-radius:7px;background:#252d55;color:#fff;font-size:14px}
cm-route-preview button:disabled{opacity:.5;cursor:default}
cm-route-preview button:focus-visible{outline:3px solid #c19054;outline-offset:4px}
cm-route-preview .cm-route-preview__thumbnail{display:block;position:relative;width:100%;max-width:600px;margin:14px auto 0;padding:0;border:0;border-radius:8px;overflow:hidden;background:#fff;color:#252d55;cursor:zoom-in}
cm-route-preview .cm-route-preview__thumbnail img{display:block;width:100%;height:auto}
cm-route-preview .cm-route-preview__design-note{display:none;max-width:600px;margin:10px auto 0;font-size:12px;line-height:1.45;text-align:center;color:rgba(37,45,85,.72)}
cm-route-preview:has(.cm-route-preview__thumbnail:not([hidden])) .cm-route-preview__design-note{display:block}
cm-route-preview .cm-route-preview__magnify{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#252d551a;opacity:0;transition:opacity .18s ease}
cm-route-preview .cm-route-preview__magnify svg{box-sizing:content-box;padding:14px;border-radius:50%;background:#fffffff0;box-shadow:0 4px 20px #0003}
cm-route-preview .cm-route-preview__thumbnail:hover .cm-route-preview__magnify,cm-route-preview .cm-route-preview__thumbnail:focus-visible .cm-route-preview__magnify{opacity:1}
cm-route-preview .cm-route-preview__hint{display:block;padding:8px 12px;background:#f0eee9;font-size:12px;text-align:center}
cm-route-preview .cm-route-preview__dialog{box-sizing:border-box;position:fixed;inset:0;width:calc(100% - 32px);max-width:560px;max-height:calc(100dvh - 32px);margin:auto;padding:36px 28px 28px;border:1px solid #ffffff26;border-radius:20px;box-shadow:0 24px 90px #0005;overflow:auto;font-family:inherit}
cm-route-preview .cm-route-preview__dialog::backdrop{background:#101729b8;backdrop-filter:blur(4px)}
cm-route-preview .cm-route-preview__dialog h2{margin:10px 0 12px;font-family:inherit;font-size:clamp(22px,4.5vw,29px);font-weight:600;line-height:1.25;color:inherit}
cm-route-preview .cm-route-preview__loading-dialog{background:#252d55;color:#faf4ea;text-align:center}
cm-route-preview .cm-route-preview__loading-dialog p{font-size:14px;line-height:1.6;color:inherit;margin:0 0 18px}
cm-route-preview .cm-route-preview__close{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:30px;line-height:1}
cm-route-preview .cm-route-preview__sonar{display:grid;place-items:center;position:relative;width:168px;height:168px;margin:8px auto 24px;color:#f4e6d4}
cm-route-preview .cm-route-preview__sonar>span{position:absolute;inset:0;border:1px solid #c1905480;border-radius:50%;animation:cm-route-ripple 3s ease-out infinite}
cm-route-preview .cm-route-preview__sonar>span:nth-child(2){animation-delay:-1s}
cm-route-preview .cm-route-preview__sonar>span:nth-child(3){animation-delay:-2s}
cm-route-preview .cm-route-preview__ship{position:relative;animation:cm-route-bob 3s ease-in-out infinite}
cm-route-preview .cm-route-preview__stage{min-height:24px;color:#e9c99e!important}
cm-route-preview .cm-route-preview__progress{height:3px;max-width:260px;margin:0 auto 24px;overflow:hidden;border-radius:6px;background:#ffffff24}
cm-route-preview .cm-route-preview__progress span{display:block;width:40%;height:100%;background:#c19054;border-radius:6px;animation:cm-route-progress 1.8s ease-in-out infinite}
cm-route-preview .cm-route-preview__continue{min-height:44px;padding:8px 18px;border:1px solid #ffffff50;border-radius:7px;background:transparent;color:#faf4ea;font-size:13px}
cm-route-preview .cm-route-preview__zoom{width:650px;max-width:calc(100% - 24px);padding:20px 24px 24px;background:#faf8f4;color:#252d55}
cm-route-preview .cm-route-preview__zoom-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
cm-route-preview .cm-route-preview__zoom-header h2{margin:0;font-size:19px}
cm-route-preview .cm-route-preview__zoom-header .cm-route-preview__close{position:static;flex-shrink:0}
cm-route-preview .cm-route-preview__zoom img{display:block;width:600px;max-width:100%;height:auto;max-height:calc(100dvh - 140px);margin:auto;object-fit:contain}
@keyframes cm-route-ripple{0%{transform:scale(.25);opacity:0}15%{opacity:.8}100%{transform:scale(1);opacity:0}}
@keyframes cm-route-bob{0%,100%{transform:translateY(2px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes cm-route-progress{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
@media(hover:none){cm-route-preview .cm-route-preview__magnify{inset:10px 10px auto auto;background:none;opacity:1}cm-route-preview .cm-route-preview__magnify svg{width:20px;height:20px;padding:8px}}
@media(max-width:480px){cm-route-preview{padding:14px}cm-route-preview .cm-route-preview__dialog{padding:36px 20px 24px}cm-route-preview .cm-route-preview__zoom{padding:12px}cm-route-preview .cm-route-preview__sonar{width:140px;height:140px;margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){cm-route-preview .cm-route-preview__sonar>span,cm-route-preview .cm-route-preview__ship,cm-route-preview .cm-route-preview__progress span{animation:none}cm-route-preview .cm-route-preview__sonar>span{opacity:.4}cm-route-preview .cm-route-preview__sonar>span:nth-child(2){transform:scale(.7)}cm-route-preview .cm-route-preview__sonar>span:nth-child(3){transform:scale(.4)}cm-route-preview .cm-route-preview__magnify{transition:none}}
