:root{color-scheme:dark;--ink:#eaf8f7;--deep:#032f49;--cyan:#37c6d4;--coral:#ef806d;--glass:rgba(3,36,52,.72)}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#032f49;font-family:Jost,"Avenir Next",Avenir,Arial,sans-serif}
button{font:inherit}
.simulator{position:relative;width:100%;height:100%;min-height:540px;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 50% 25%,#318b9c 0,#0c6079 38%,#043b58 68%,#022b43 100%);color:var(--ink);touch-action:none}
.simulator::before{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(210,244,239,.16),transparent 25%,rgba(0,22,39,.18)),radial-gradient(ellipse at 50% 120%,rgba(0,12,24,.55),transparent 60%);content:"";pointer-events:none}
#sea{position:absolute;inset:0;z-index:0;width:100%;height:100%;cursor:none}
.intro{position:absolute;top:clamp(20px,4vw,56px);left:clamp(20px,4vw,64px);z-index:3;width:min(620px,68vw);pointer-events:none;text-shadow:0 3px 18px rgba(0,25,38,.35)}
.eyebrow{margin:0 0 8px;color:#ffad91;font-size:clamp(12px,1vw,16px);font-weight:900;letter-spacing:.17em}
.intro h1{margin:0;font-size:clamp(34px,4.6vw,78px);line-height:.98;letter-spacing:-.035em}
.intro>p:last-child{max-width:570px;margin:16px 0 0;font-size:clamp(16px,1.35vw,24px);line-height:1.42;color:rgba(234,248,247,.88)}
.formations{position:absolute;right:clamp(18px,3vw,48px);bottom:clamp(18px,3vw,42px);z-index:4;padding:13px;border:1px solid rgba(255,255,255,.25);border-radius:20px;background:var(--glass);box-shadow:0 16px 50px rgba(0,20,34,.24);backdrop-filter:blur(12px)}
.formations>span{display:block;margin:0 4px 9px;color:#9ddde1;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.formations>div{display:flex;gap:7px}
.formations button,.pause,.legend__toggle{min-height:48px;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;touch-action:manipulation}
.formations button{padding:9px 15px;border-radius:12px;background:rgba(255,255,255,.08);font-weight:750}
.formations button:hover,.formations button:focus-visible,.formations button.is-active{border-color:#72e4e7;background:#dff8f4;color:#073e50;outline:0}
.legend{position:absolute;left:clamp(18px,3vw,48px);bottom:clamp(18px,3vw,42px);z-index:4;width:min(350px,calc(100vw - 36px));border:1px solid rgba(255,255,255,.22);border-radius:20px;background:var(--glass);box-shadow:0 16px 50px rgba(0,20,34,.24);overflow:hidden;backdrop-filter:blur(12px)}
.legend__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:13px 17px;border:0;background:transparent;font-weight:850;text-align:left}
.legend__toggle span{font-size:24px}.legend__content{display:grid;gap:5px;padding:0 13px 13px}
.legend article{position:relative;display:grid;grid-template-columns:16px 1fr;align-items:center;gap:11px;min-height:53px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.07);overflow:hidden}
.legend article div{display:grid}.legend article strong{font-size:15px}.legend article small{color:rgba(234,248,247,.68);font-size:12px}
.legend article>b{position:absolute;bottom:0;left:0;width:50%;height:3px;background:currentColor;transition:width .2s}.legend article:nth-child(1)>b{color:#48d6bc}.legend article:nth-child(2)>b{color:#55b8f1}.legend article:nth-child(3)>b{color:#ff927e}
.dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 15px currentColor}.dot--attraction{color:#48d6bc;background:currentColor}.dot--alignment{color:#55b8f1;background:currentColor}.dot--repulsion{color:#ff927e;background:currentColor}
.status{position:absolute;top:clamp(20px,3vw,42px);right:clamp(70px,6vw,105px);z-index:3;display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(3,36,52,.48);backdrop-filter:blur(8px);pointer-events:none}
.status__pulse{width:13px;height:13px;border-radius:50%;background:#50d4b3;box-shadow:0 0 0 7px rgba(80,212,179,.13)}.status.is-alert .status__pulse{background:#ff806d;box-shadow:0 0 0 7px rgba(255,128,109,.16);animation:pulse .7s infinite alternate}
.status div{display:grid}.status small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}.status strong{font-size:14px}
.pause{position:absolute;top:clamp(20px,3vw,42px);right:clamp(18px,3vw,48px);z-index:4;width:52px;height:52px;border-radius:50%;background:var(--glass);font-size:20px;font-weight:900}.pause:hover,.pause:focus-visible{background:#e7f8f5;color:#063b4e;outline:3px solid rgba(255,255,255,.3)}
.touch-hint{position:absolute;bottom:12px;left:50%;z-index:2;margin:0;transform:translateX(-50%);color:rgba(255,255,255,.64);font-size:12px;pointer-events:none}
@keyframes pulse{to{transform:scale(1.2)}}
@media(max-width:780px){.simulator{min-height:500px}.intro{width:calc(100% - 90px)}.intro>p:last-child{display:none}.status{top:auto;right:auto;bottom:172px;left:18px}.formations{right:12px;bottom:42px;left:12px}.formations>div{display:grid;grid-template-columns:repeat(4,1fr)}.formations button{min-width:0;padding:8px 5px;font-size:13px}.legend{right:12px;bottom:112px;left:12px;width:auto}.legend__content{grid-template-columns:repeat(3,1fr)}.legend article{grid-template-columns:12px 1fr;gap:7px}.legend article small{display:none}.touch-hint{bottom:17px;width:100%;text-align:center}}
@media(max-width:520px){.intro h1{font-size:36px}.legend__content{grid-template-columns:1fr}.legend:not(.is-open) .legend__content{display:none}.status{bottom:177px}.formations button{font-size:11px}.formations>span{display:none}}
@media(prefers-reduced-motion:reduce){.status.is-alert .status__pulse{animation:none}}
.simulator.is-hero .intro,.simulator.is-hero .legend,.simulator.is-hero .status,.simulator.is-hero .pause,.simulator.is-hero .touch-hint{display:none}
.simulator.is-hero .formations{right:auto;bottom:clamp(24px,3vw,46px);left:clamp(24px,4vw,70px);z-index:12;padding:10px 12px;border-radius:15px;background:rgba(3,36,52,.78);opacity:.92;transition:opacity .2s ease;pointer-events:auto}
.simulator.is-hero .formations:hover,.simulator.is-hero .formations:focus-within{opacity:1}
.simulator.is-hero .formations>span{display:none}
.simulator.is-hero .formations button{min-width:106px;min-height:52px;padding:9px 15px;font-size:15px}
.simulator.is-hero::after{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(1,21,36,.05),rgba(1,21,36,.12) 52%,rgba(1,18,30,.35));content:"";pointer-events:none}