.boat-preview{width:min(1100px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:14px;color:#f4f8fa;background:#1f2e35;border:1px solid #47616a;border-radius:22px;box-sizing:border-box}
.boat-preview::backdrop{background:#0b151cdd}.boat-preview-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}.boat-preview-toolbar strong,.boat-preview-toolbar small{display:block}.boat-preview-toolbar small{font-size:10px;color:#9bb9b7;margin-bottom:4px}.boat-preview-toolbar label{display:flex;gap:8px;align-items:center;margin-left:auto}.boat-preview-toolbar select{width:auto;max-width:210px;margin:0}.boat-preview-views{display:flex;gap:5px}.boat-preview button{width:auto;margin:0}.boat-preview button[aria-pressed=true]{background:#7ed8bf;color:#112a25}.boat-preview-field{position:relative;height:clamp(280px,61vh,620px);overflow:hidden;border-radius:14px;background:#294337}.boat-preview-scene{position:absolute;inset:0;width:100%;height:100%;display:block}.boat-preview-status{position:absolute;bottom:14px;left:14px;padding:7px 12px;border-radius:20px;background:#14272cd9;font-size:12px;pointer-events:none}.boat-preview>p{font-size:12px;color:#afc2c8;line-height:1.5;margin:12px 2px 0}
@media(max-width:600px){.boat-preview{padding:10px}.boat-preview-toolbar{gap:8px}.boat-preview-toolbar>div:first-child{flex:1}.boat-preview-toolbar label{order:3;margin:0;width:100%;font-size:12px}.boat-preview-toolbar select{flex:1;max-width:none}.boat-preview-views{order:4;width:100%}.boat-preview-views button{flex:1}.boat-preview-field{height:52dvh;min-height:210px}}