*{box-sizing:border-box}body{margin:0;background:#eef3f6;color:#071423;font:16px/1.5 system-ui,sans-serif}header{background:#071423;color:white;padding:20px}header a{color:white;margin-right:24px}main{max-width:1240px;margin:auto;padding:32px 20px 60px}h1{font-size:clamp(2rem,4vw,3.2rem);margin:16px 0}a{color:#126496}button,.button{padding:13px 20px;border:1px solid #071423;border-radius:6px;background:#071423;color:white;font:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}.hero-image{width:100%;height:auto;border-radius:8px}.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.format{padding:18px;background:white;border:1px solid #cad7df;border-radius:8px;text-decoration:none;color:inherit}.format img{width:100%;height:220px}.format h2{font-size:1.15rem}.format:hover,.format:focus-visible{outline:3px solid #25a9e0}.intro{display:flex;align-items:center;gap:25px}.pack{width:220px;flex-shrink:0}.pack img{width:100%;height:220px}.line-scroll{overflow:auto;background:white;border:1px solid #cad7df;padding:20px;border-radius:8px}.line-scroll svg{width:100%;min-width:1300px;display:block}.machine-body{fill:#d9e4eb;stroke:#648397;stroke-width:2}.selected .machine-body{fill:#54ccf4;stroke:#08719a;stroke-width:4}g[role=button]{cursor:pointer}g:focus{outline:none}g:focus .machine-body{stroke:#071423;stroke-width:5}.machine-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.machine-list label{background:white;border:1px solid #cad7df;padding:14px;cursor:pointer}.machine-list input{width:20px;height:20px;vertical-align:middle}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.summary{background:#dbeefa;padding:20px}small{color:#536777}@media(max-width:700px){.formats,.machine-list{grid-template-columns:1fr 1fr}.intro{align-items:flex-start}.pack{width:120px}.pack img{height:150px}.format img{height:160px}}@media(max-width:420px){.formats,.machine-list{grid-template-columns:1fr}}
.format img,.pack img{object-fit:contain;display:block;background:#f1f3f6;border-radius:4px}.notice img{width:100%;height:auto;object-fit:contain}

.machine-selection{fill:#fff;stroke:transparent;stroke-width:2}.selected .machine-selection{fill:#e4f6ff;stroke:#08719a;stroke-width:3}g:focus .machine-selection{stroke:#071423;stroke-width:3}.selected image{opacity:.85}.line-scroll svg{min-width:1600px}

.jar-machine-hotspot{fill:transparent;stroke:transparent;stroke-width:4}.selected .jar-machine-hotspot{fill:#34b8ff;fill-opacity:.15;stroke:#087fb5}g:hover .jar-machine-hotspot,g:focus .jar-machine-hotspot{stroke:#34b8ff}

.portion-machine-hotspot{fill:transparent;stroke:transparent;stroke-width:3}.selected .portion-machine-hotspot{fill:#34b8ff;fill-opacity:.12;stroke:#087fb5}g:hover .portion-machine-hotspot,g:focus .portion-machine-hotspot{stroke:#34b8ff}