@font-face{font-family:DTMSans;src:url('../assets/fonts/DTM-Sans.otf') format('opentype');font-display:swap}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#05070d;color:#f2f5ff;font-family:DTMSans,monospace;line-height:1.6}a{color:#8fc4ff;text-underline-offset:4px}a:hover{color:#fff}button,select{font:inherit;color:inherit;background:#121d31;border:1px solid #657897;padding:10px 14px;border-radius:3px;cursor:pointer}button:hover:not(:disabled){background:#203555;border-color:#9ecaff}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a9d1ff;outline-offset:4px}.site-header{max-width:1120px;margin:auto;padding:26px 24px;border-bottom:1px solid #24324b;display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{text-decoration:none;font-size:14px;color:#fff}.site-header nav{display:flex;gap:20px;font-size:13px;flex-wrap:wrap}main{max-width:1060px;margin:0 auto;padding:35px 24px}.intro{text-align:center;margin:0 auto 34px;max-width:760px}.eyebrow{font-size:12px;letter-spacing:3px;color:#8fb7ef}h1{font-size:clamp(25px,5vw,40px);line-height:1.3;margin:12px 0}h2{font-size:19px;margin-top:0}h3{font-size:16px}p{margin:12px 0}.note{font-family:Arial,sans-serif;font-size:14px;line-height:1.6;color:#b2bfd3}.editor{display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px;align-items:start}.preview-panel,.parts-panel{border:1px solid #344965;background:#0b1220;padding:22px;border-radius:5px}.preview-panel{text-align:center;position:sticky;top:16px}.preview-stage{display:flex;align-items:center;justify-content:center;min-height:320px;background:#090b2c;position:relative;border:1px solid #344965;overflow:hidden}#vesselPreview{image-rendering:pixelated;max-width:100%;object-fit:contain}.history-controls{display:flex;gap:8px;justify-content:center;margin:18px 0}.history-controls button{font-size:13px;padding:8px 12px}.export-controls{display:grid;gap:12px;text-align:left}.export-controls label{font-size:14px}.export-controls button{font-size:13px}.primary{background:#24568c;border-color:#8dbcf6}.status{font-family:Arial,sans-serif;font-size:13px;color:#c4d5ee;min-height:38px}.parts-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.parts-heading h2{margin:0}.parts-heading button{font-size:12px}.part-group{border:0;border-top:1px solid #2c405d;margin:24px 0 0;padding:18px 0 0;min-width:0}.part-group legend{padding-right:12px;font-size:17px}.part-lock{display:flex;align-items:center;gap:8px;font-size:12px;color:#c0d1e8;margin-bottom:12px;cursor:pointer}.part-lock input{width:18px;height:18px;accent-color:#6caafa}.part-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.part-option{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 5px;min-height:123px;gap:6px;font-size:11px;line-height:1.3}.part-option canvas{image-rendering:pixelated;pointer-events:none;max-width:100%;object-fit:contain}.part-option[aria-pressed=true]{border:2px solid #a5cfff;padding:7px 4px;background:#244669;box-shadow:inset 0 -3px #8ab9f0}.guide{margin:42px auto 0;max-width:880px;border-top:1px solid #2a3b54;padding-top:26px}.guide p,.guide li{font-family:Arial,sans-serif;font-size:16px;color:#c5cede;line-height:1.8}.guide li+li{margin-top:10px}.notice{padding:16px;border:1px solid #d5b75f;color:#ffe3a0;background:#29210c}.notice[hidden]{display:none}footer{max-width:1060px;margin:20px auto;padding:26px 24px;border-top:1px solid #24324b;font-family:Arial,sans-serif;font-size:13px;color:#aab9ce}footer a{display:inline-block;margin-left:12px}@media(max-width:760px){.site-header{display:block;padding:20px}.site-header nav{margin-top:16px;gap:16px}main{padding:25px 16px}.editor{grid-template-columns:1fr}.preview-panel{position:static}.preview-stage{min-height:240px}.preview-panel,.parts-panel{padding:18px}.preview-stage #vesselPreview{max-height:240px}.part-options{grid-template-columns:repeat(3,minmax(0,1fr))}.intro{margin-bottom:24px}.export-controls{max-width:400px;margin:auto}.guide{margin-top:30px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#vesselBackground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;pointer-events:none}#vesselPreview{position:relative;z-index:1}