/* Swim from Zero kit (Goal100, Nov 11, 2026). Uses the site.css variables; dark-mode friendly; reduced motion respected. */
.sw{--water:#3FA7DF;--water2:#1F6FA8;--ok:var(--good);display:flex;flex-direction:column;gap:18px;padding:18px 0 40px;min-width:0}
.sw *{min-width:0}
.sw h1{font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.1;margin:0}
.sw h2{font-size:clamp(1.3rem,3.6vw,1.7rem);margin:0}
.sw h3{margin:0;font-size:1.15rem}
.sw p{margin:0}
.sw-badges{display:flex;flex-wrap:wrap;gap:8px}
.sw-b{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-weight:700;font-size:.9rem;background:var(--bg2);color:var(--ink)}
.sw-b.ext{background:var(--ext-soft);color:var(--ext);border:2px solid var(--ext-fill)}
.sw-b.goal{background:var(--gold-soft);color:var(--gold-deep)}
.sw-idea{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3.6vw,1.75rem);line-height:1.2;color:var(--brand)}
.sw-sub{color:var(--ink2);font-size:1.08rem}
.sw-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.sw-safe{display:flex;gap:12px;align-items:flex-start;background:var(--teal-soft);border:2px solid var(--teal);border-radius:18px;padding:12px 16px}
.sw-safe .i{font-size:1.6rem;line-height:1}
.sw-safe b{display:block;font-family:var(--display);font-size:1.12rem}
.sw-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sw-main{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:10px 28px;border-radius:18px;border:0;background:var(--brand);color:var(--brand-ink);font:800 1.2rem var(--display);cursor:pointer;text-decoration:none;box-shadow:0 5px 0 rgba(0,0,0,.18);max-width:100%}
.sw-main:hover{filter:brightness(1.08)} .sw-main:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.sw-main:disabled{opacity:.5;cursor:default}
.sw-main.gold{background:var(--gold);color:#201600}
.sw-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;min-width:46px;padding:6px 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:700 .98rem var(--body);cursor:pointer;text-decoration:none}
.sw-pill[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft)}
.sw-pill:hover{border-color:var(--brand)}
.sw-crumb{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-weight:700}
.sw-crumb a{color:var(--brand);display:inline-flex;align-items:center;min-height:44px}
.sw-dots{display:flex;gap:6px;flex-wrap:wrap}
.sw-dots i{flex:1 1 18px;max-width:46px;height:8px;border-radius:9px;background:var(--line)}
.sw-dots i.done{background:var(--teal)} .sw-dots i.on{background:var(--brand)}
.sw-meter{height:14px;border-radius:999px;background:var(--bg2);overflow:hidden;border:1px solid var(--line)}
.sw-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .4s}
.sw-world{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.sw-world h2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sw-world h2 .n{font-size:.95rem;color:var(--ink2);font-family:var(--body);font-weight:700}
.sw-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.sw-tile{position:relative;display:flex;flex-direction:column;gap:4px;min-height:124px;padding:14px;border-radius:20px;background:var(--card);border:3px solid var(--line);color:var(--ink);text-decoration:none}
.sw-tile:hover,.sw-tile:focus-visible{border-color:var(--brand);box-shadow:var(--shadow)}
.sw-tile .ico{font-size:2rem;line-height:1}
.sw-tile b{font-family:var(--display);font-size:1.12rem;line-height:1.15}
.sw-tile .st{font-size:.9rem;font-weight:700;color:var(--ink2)}
.sw-tile.m{border-color:var(--teal)} .sw-tile.p{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-soft),var(--card))}
.sw-tile .rv{position:absolute;top:10px;right:10px;font-size:.8rem;font-weight:700;background:var(--warn-soft);color:var(--warn);border-radius:999px;padding:2px 8px}
.sw-pic{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#CFEFFF}
.sw-pic svg{display:block;width:100%;height:auto}
.sw-hero{display:grid;gap:16px;grid-template-columns:1.1fr 1fr;align-items:center}
@media (max-width:760px){.sw-hero{grid-template-columns:1fr}}
.sw-cap{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,3.2vw,1.45rem);line-height:1.25;min-height:2.6em}
.sw-vnote{font-size:.9rem;color:var(--ink2)}
.sw-fb{border-radius:14px;padding:10px 14px;font-weight:700}
.sw-fb:empty{display:none}
.sw-fb.good{background:var(--good-soft);color:var(--good)} .sw-fb.no{background:var(--warn-soft);color:var(--warn)}
.sw-opts{display:grid;gap:10px}
.sw-opt{min-height:56px;text-align:left;padding:10px 16px;border-radius:16px;border:3px solid var(--line);background:var(--card);color:var(--ink);font:700 1.05rem var(--body);cursor:pointer}
.sw-opt:hover{border-color:var(--brand)}
.sw-opt.ok{border-color:var(--good);background:var(--good-soft)} .sw-opt.no{border-color:var(--warn);background:var(--warn-soft)} .sw-opt.show{outline:3px dashed var(--gold);outline-offset:2px}
.sw-q{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,3.4vw,1.5rem);line-height:1.25}
.sw-in{min-height:56px;width:min(220px,100%);font:800 1.4rem var(--body);padding:6px 14px;border-radius:14px;border:3px solid var(--line);background:var(--card);color:var(--ink)}
.sw-in:focus{border-color:var(--brand);outline:none}
.sw-hints{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.sw-hints li{background:var(--gold-soft);border-radius:12px;padding:8px 12px}
.sw-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.sw-pick{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:18px;border:3px solid var(--line);background:var(--card);color:var(--ink);font:700 1rem var(--body);cursor:pointer;text-align:left}
.sw-pick:hover{border-color:var(--brand)} .sw-pick.ok{border-color:var(--good);background:var(--good-soft)} .sw-pick.no{border-color:var(--warn);background:var(--warn-soft)}
.sw-pick .sw-pic{pointer-events:none}
.sw-spot{position:relative}
.sw-spot .hs{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;border:3px dashed #fff;background:rgba(43,42,140,.35);color:#fff;font:800 1.1rem var(--display);cursor:pointer;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.sw-spot .hs.ok{background:rgba(23,112,61,.8);border-style:solid} .sw-spot .hs.no{background:rgba(201,143,0,.85);border-style:solid}
.sw-slots{display:flex;flex-direction:column;gap:8px;counter-reset:s}
.sw-slot{display:flex;gap:10px;align-items:center;min-height:52px;padding:8px 12px;border-radius:14px;border:2px dashed var(--line);background:var(--bg)}
.sw-slot .k{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--brand);color:var(--brand-ink);font:800 1rem var(--display)}
.sw-slot.full{border-style:solid;border-color:var(--teal);background:var(--teal-soft)}
.sw-pieces{display:flex;flex-wrap:wrap;gap:10px}
.sw-piece{min-height:52px;padding:8px 14px;border-radius:14px;border:3px solid var(--brand);background:var(--brand-soft);color:var(--ink);font:700 1rem var(--body);cursor:pointer;text-align:left;max-width:100%}
.sw-piece.shake{animation:sw-shake .4s}
.sw-piece.fly{animation:sw-pop .5s ease-out}
@keyframes sw-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes sw-pop{from{transform:scale(.6) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.sw-3d{display:flex;flex-direction:column;gap:10px}
.sw-3d .view{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#CFEFFF;cursor:grab}
.sw-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sw-ctl .lab{font-weight:700;color:var(--ink2);font-size:.92rem;margin-right:2px}
.sw-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sw-phases span{text-align:center;padding:8px 4px;border-radius:12px;background:var(--bg2);font-weight:700;font-size:.92rem;border:2px solid transparent;overflow-wrap:anywhere}
.sw-phases span.on{background:var(--gold-soft);border-color:var(--gold);color:var(--ink)}
.sw-score{font:800 clamp(2.4rem,9vw,3.6rem)/1 var(--display);color:var(--brand)}
.sw-big{font-size:3rem;line-height:1}
.sw-log{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.sw-log li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--bg2);border-radius:12px;padding:8px 12px}
.sw-t table{width:100%;border-collapse:collapse;font-size:.95rem}
.sw-t th,.sw-t td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.sw-t ul{margin:0;padding-left:1.2em}
.sw-t li{margin:4px 0}
.sw-src{font-size:.92rem;overflow-wrap:anywhere}
.sw-wrapx{overflow-x:auto;max-width:100%}
/* motion graphics */
.sw .bob{animation:sw-bob 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sw .slide{animation:sw-slide 4s linear infinite}
.sw .pulse{animation:sw-pulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sw .rise{animation:sw-rise 2.2s ease-in infinite}
.sw .spin{animation:sw-spin 6s linear infinite;transform-box:view-box}
.sw .flash{animation:sw-flash 2.2s steps(1) infinite}
.sw .swing{animation:sw-swing 1.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:top center}
.sw .wav{animation:sw-wav 3s ease-in-out infinite alternate}
@keyframes sw-bob{50%{transform:translateY(-5px)}}
@keyframes sw-slide{from{transform:translateX(-40px)}to{transform:translateX(40px)}}
@keyframes sw-pulse{50%{transform:scale(1.12)}}
@keyframes sw-rise{from{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}
@keyframes sw-spin{to{transform:rotate(360deg)}}
@keyframes sw-flash{0%,100%{opacity:0}10%,20%{opacity:1}}
@keyframes sw-swing{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes sw-wav{to{transform:translateX(-18px)}}
.sw-frame{animation:sw-pop .45s ease-out}
@media (prefers-reduced-motion:reduce){.sw .bob,.sw .slide,.sw .pulse,.sw .rise,.sw .spin,.sw .flash,.sw .swing,.sw .wav,.sw-frame,.sw-piece.fly,.sw-piece.shake{animation:none!important}}
@media (max-width:520px){.sw-main{width:100%}.sw-card{padding:14px}.sw-phases span{font-size:.82rem}}