:root{--navy:#07334f;--teal:#087f9c;--pale:#eaf7f9;--ink:#143c53}*{box-sizing:border-box}body{margin:0;background:#edf8fa;color:var(--ink);font:14px 'DM Sans',sans-serif}h1,h2,.brand{font-family:'DM Serif Display',Georgia,serif;font-weight:400}h2{font-size:25px;margin:0 0 9px}h3{font-size:16px;margin:0 0 10px}button,input,select{font:inherit}button{border:0;background:var(--navy);color:#fff;padding:11px 14px;border-radius:11px;cursor:pointer;font-weight:700;transition:filter .15s}button:hover{filter:brightness(1.12)}button.secondary{background:#e4f3f6;color:var(--navy)}button:disabled{opacity:.4;cursor:not-allowed}input,select{border:1px solid #c9e1e9;border-radius:9px;padding:9px;background:white;max-width:100%}input[type=range]{accent-color:var(--teal)}header{background:var(--navy);color:#fff;padding:15px max(18px,4vw);display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{font-size:30px}.brand:before{content:'≈';color:#70d5e5;margin-right:10px}.eyebrow{color:#a9dce7;font-size:10px;letter-spacing:1.5px}.shell{max-width:1550px;margin:auto;padding:23px}.hidden{display:none!important}.hero{background:linear-gradient(125deg,#05354f,#087f9c);color:white;border-radius:23px;padding:42px 5%;position:relative;overflow:hidden;min-height:270px}.hero h1{font-size:clamp(40px,5vw,67px);line-height:1.06;margin:13px 0 10px;position:relative}.hero p{color:#c5edf3;font-size:16px;position:relative}.hero svg{position:absolute;right:-8%;top:-30%;width:55%;height:150%;opacity:.34;pointer-events:none;fill:none;stroke:#b5f0f3;stroke-width:3}.badge{display:inline-block;background:#d4f0f5;color:#066e8c;border-radius:30px;padding:6px 11px;font-size:11px;font-weight:700;letter-spacing:.7px}.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:23px 0 14px}.bar.compact{margin:0 0 13px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:16px}.card,.panel{background:white;border:1px solid #d4e9ee;border-radius:18px;box-shadow:0 9px 24px #0b4a6510;padding:19px}.card h3{font-family:'DM Serif Display',Georgia,serif;font-size:24px;font-weight:400;margin:14px 0 6px}.card{position:relative;overflow:hidden}.card:before{content:'';position:absolute;right:-65px;top:-65px;border:2px solid #d5eef2;width:145px;height:145px;border-radius:50%;pointer-events:none}.card .actions{margin-top:14px}.muted{color:#668795}.hint{font-size:12px;color:#668795;line-height:1.6}.project-heading{margin:12px 0 0;font-size:34px}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:17px}.workarea{min-width:0}.workarea>.panel+.panel{margin-top:17px}.pool{position:relative;width:100%;aspect-ratio:25/20;background:repeating-linear-gradient(0deg,#95dce9 0%,#95dce9 19%,#86d2e1 20%);border:5px solid #52a5bb;border-radius:14px;overflow:hidden;touch-action:none}.pool svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.swimmer{position:absolute;transform:translate(-50%,-50%);width:33px;height:33px;border:2px solid white;border-radius:50%;background:#073f60;color:white;display:grid;place-items:center;font-weight:800;box-shadow:0 3px 10px #003b5b66;touch-action:none;cursor:grab;user-select:none}.swimmer:active{cursor:grabbing}.timeline{display:flex;gap:7px;align-items:stretch;overflow-x:auto;padding:8px 0 12px;scrollbar-color:#a9dce5 transparent}.frame{min-width:154px;max-width:180px;text-align:left;background:#e5f4f7;color:#184961;border:2px solid transparent;display:flex;flex-direction:column;gap:8px}.frame.active{border-color:#129abb;background:#c9eef5}.frame .time{font-size:11px;font-weight:500;color:#537f92}.frame strong{font-size:14px}.phase{min-width:116px;border-radius:12px;padding:11px;display:flex;flex-direction:column;gap:5px;justify-content:center;border:1px solid #d5e8ec;font-size:11px}.phase.hold{background:#ddf4ee;color:#12635c}.phase.move{background:#e5eefb;color:#245b88}.phase b{font-size:16px}.phase span{opacity:.8}.section{border-top:1px solid #e1edf1;padding-top:17px;margin-top:18px}.section h3{margin:0 0 10px}.section p{font-size:12px;color:#688591;line-height:1.55}.field{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}.field input{width:105px}.wide{width:100%!important}.timing-control{padding:12px;background:#f1f9fa;border-radius:12px;margin:12px 0}.timing-control label{display:block}.timing-control label strong{display:block;margin-bottom:4px}.timing-control label span{display:block;font-size:11px;color:#638391;line-height:1.5}.timing-control>div{display:flex;align-items:center;gap:8px;margin-top:8px}.timing-control input{width:92px}.preview{background:#e4f6fa;border:1px solid #c6e6ee;border-radius:12px;padding:8px;margin:12px 0}.preview svg{width:100%;height:auto;display:block}.suggestions{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:11px}.suggestion{border:1px solid #d5e9ee;background:#f8fcfd;border-radius:13px;padding:10px}.suggestion svg{width:100%;background:#d4f1f7;border-radius:9px}.suggestion strong{display:block;margin:8px 0 10px}.suggestion button{width:100%;padding:10px}.audio-panel{background:linear-gradient(115deg,#f0fbfc,#e3f4f7);border:1px solid #d0e9ef;border-radius:14px;padding:14px}.audio-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.audio-controls input[type=range]{flex:1;min-width:140px}.wave{display:block;width:100%;height:58px;background:#c9e8ee;border-radius:8px;margin:12px 0;cursor:pointer}.legend{display:flex;gap:13px;flex-wrap:wrap;color:#557c8c;font-size:11px;margin-top:10px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}.legend-hold{background:#36ae8b}.legend-move{background:#598dcf}.legend-cursor{background:#ed7279}.controls{align-self:start}.controls>h2{margin-bottom:17px}@media(max-width:950px){.layout{grid-template-columns:1fr}.hero svg{opacity:.16;width:100%}}@media(max-width:550px){.shell{padding:12px}.hero{padding:35px 22px}.swimmer{width:27px;height:27px;font-size:11px}.phase{min-width:95px}.frame{min-width:125px}header .eyebrow:last-child{display:none}}