*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100svh;color:#103e59;font:16px/1.6 'Segoe UI',Arial,sans-serif;background:linear-gradient(#d8edfa20,#dbedf345),url('assets/upload-guide-lake.png') center/cover fixed}button,a,summary{-webkit-tap-highlight-color:transparent}a{color:#124f79}button,nav a,summary,.primary{font:inherit;cursor:pointer;min-height:44px;padding:9px 16px;border:1px solid #86aebe;border-radius:12px;background:#f4fbf9bd;color:#123f59;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button:hover,nav a:hover,summary:hover{background:#fff}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #266c9c;outline-offset:3px}[hidden]{display:none!important}header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px clamp(16px,4vw,48px);background:#e9f5f766;backdrop-filter:blur(14px)}.brand{display:flex}.brand img{object-fit:contain}nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}nav details{position:relative}.menu{position:absolute;right:0;top:50px;z-index:10;min-width:245px;padding:10px;background:#eef8fbf5;border:1px solid #a6c3cd;border-radius:15px;box-shadow:0 12px 30px #123f5926;display:grid;gap:6px}.menu a{justify-content:flex-start}main{max-width:940px;margin:30px auto;padding:0 20px 28px}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:700}h1{font:clamp(32px,5vw,46px)/1.15 Georgia,serif;margin:8px 0;color:#113f5b}h2{font:29px/1.25 Georgia,serif;margin:4px 0 18px}h3{font-size:18px;margin:0}.lead{max-width:610px;background:#edf7f378;border-radius:10px;padding:8px 12px;margin-left:-12px}.stages{margin:23px 0 14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stages button{background:#eaf5f5d9;font-size:14px;padding:9px}.stages button[aria-current=step],.primary{background:#f0d27f;color:#103e59;border-color:#e5c570;font-weight:650}article{padding:clamp(22px,4vw,38px);border:1px solid #ffffffd9;border-radius:24px;background:#f2f9f2e0;backdrop-filter:blur(15px);box-shadow:0 18px 50px #133d5420}article:focus{outline:none}ul{padding-left:23px}li{margin:8px 0}.battle-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.example{border:1px dashed #7fabb8;border-radius:16px;padding:20px;margin:24px 0;background:#e8f4f44d}.example span{font-size:11px;letter-spacing:1.5px;font-weight:700}.example p{margin:6px 0 0;color:#476b7b}.note{font-size:14px;color:#365e70}h2 small{font:14px 'Segoe UI',sans-serif;display:inline-block;color:#537480}.overview{margin:20px 0}.overview summary{justify-content:flex-start}.flow{border-top:1px solid #aac4cc;margin-top:28px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:10px}.flow span{font-size:13px}.saved{font-size:13px;text-align:center;background:#f3faf2b3;border-radius:12px;padding:6px}.continue{margin:8px 0}button:disabled{opacity:.45;cursor:default}@media(max-width:600px){body{background-attachment:scroll}header{padding:10px 14px;gap:8px}header .brand img{width:42px;height:42px}header nav{gap:5px}header nav a,header summary{font-size:13px;padding:8px 10px}main{margin-top:24px;padding-inline:14px}.stages{grid-template-columns:1fr 1fr}.battle-grid{grid-template-columns:1fr;gap:12px}article{border-radius:20px;padding:23px}h2{font-size:26px}.flow{flex-wrap:wrap}.flow span{order:3;width:100%;text-align:center}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.card-browser{margin:22px 0}.card-browser summary{justify-content:flex-start;display:flex}.card-browser label{font-size:14px;display:block;margin:12px 0 5px}#card-season{font:inherit;min-height:44px;max-width:100%;border:1px solid #87a8b5;border-radius:10px;padding:8px;background:#fff;color:#123f59}.ant-card-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.ant-card-choices button{display:flex;flex-direction:column;padding:10px;gap:7px;min-width:0;background:#f5faf8}.ant-card-choices img{width:100%;max-height:150px;object-fit:contain;border-radius:8px}.ant-card-choices span{font-size:14px;font-weight:650;text-align:center}.ant-card-choices small{font-size:11px}#ant-card-dialog{max-width:760px;width:calc(100% - 28px);max-height:calc(100svh - 32px);overflow:auto;border:1px solid #fff;border-radius:22px;background:#eef7f7;color:#123f59;padding:24px;box-shadow:0 20px 70px #123f5944}#ant-card-dialog::backdrop{background:#103c547d;backdrop-filter:blur(4px)}#ant-card-close{display:block;margin:0 0 20px auto}.ant-card-detail{display:grid;grid-template-columns:minmax(130px,220px) 1fr;gap:24px}.ant-card-detail>img{width:100%;max-height:330px;object-fit:contain}@media(max-width:600px){.ant-card-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.ant-card-detail{grid-template-columns:1fr}.ant-card-detail>img{height:190px}.card-browser summary{font-size:14px}}

.formation-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.formation-example{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:0;background:#f9fcf8}.formation-example>span:not(.example-image){font-size:13px;letter-spacing:0;font-weight:400;text-align:center}.formation-example small{font-size:12px}.example-image{position:relative;display:block;width:100%;line-height:0}.example-image img{display:block;width:100%;height:auto}.preset-mask{position:absolute;left:24.9%;top:12.05%;width:42.1%;height:2.8%;background:#080a09;pointer-events:none}#formation-example-dialog{width:min(800px,calc(100% - 24px));max-height:calc(100svh - 24px);overflow:auto;background:#eff7f5;color:#123f59;border:1px solid white;border-radius:20px;padding:20px}#formation-example-dialog::backdrop{background:#123e55bd}.example-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.example-dialog-header h2{margin:0;font-size:26px}.example-dialog-header button{flex-shrink:0}@media(max-width:600px){.formation-examples{grid-template-columns:1fr}.formation-example .example-image{max-width:260px}.example-dialog-header h2{font-size:22px}}

.formation-examples.paired{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:600px){.formation-examples.paired{grid-template-columns:1fr}}

.formation-examples.overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.overview-grid .formation-example>span:not(.example-image){display:none}.overview-grid .formation-example strong{font-size:13px}.overview-grid .example-image{max-width:180px}@media(max-width:600px){.formation-examples.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}