/* Marzul · acabamento final sobre os seis cenários ilustrados.
   Carregado por último: troca os recortes de 512 px pelas ilustrações grandes, alinha todo
   o texto numa mesma margem, unifica a tipografia e refina os painéis (referência: board v2). */
:root{
  --edge:max(6vw,calc((100vw - 1240px)/2));
  --serif:"Fraunces",Georgia,serif;
  --ink-deep:#0a2c38;--ink-soft:#2c4a4f;--cream:#fff7e8;--parch:#fbf0da;--teal:#0e6470;--teal-2:#0f7f86;--line-warm:#dcc59a;
}

/* ---------- Tipografia única: serifada suave nos títulos, DM Sans no texto ---------- */
html body h1,html body .section h2,html body .community-copy h2,html body .prereg-copy h2,
html body .section h3,html body .calculator h3,html body .prereg-card h3,html body .story-panel h3,html body #faq h2,html body .species-panel h3,html body .yard-card strong{
  font-family:var(--serif);font-optical-sizing:auto;font-variation-settings:"SOFT" 60,"WONK" 0;letter-spacing:-.02em;color:var(--ink-deep)}
html body .section h2,html body .community-copy h2,html body .prereg-copy h2{font-size:clamp(40px,4.2vw,64px);line-height:1.02;font-weight:600;margin:14px 0 18px}
html body .section h2 em,html body .community-copy h2 em{font-style:normal;color:var(--teal)}
html body .hero h1{font-family:var(--serif);font-weight:600;letter-spacing:-.025em;line-height:.98;font-size:clamp(48px,5.4vw,92px)}
html body .section .eyebrow,html body .hero .eyebrow{font:700 12px/1.4 "DM Sans",system-ui,sans-serif;letter-spacing:.16em;color:var(--teal)}
html body .section .section-head>p:not(.eyebrow),html body .prereg-copy>p:not(.eyebrow),html body .community-copy>p:not(.eyebrow),html body .hero-copy>p:not(.eyebrow){
  color:var(--ink-soft);font-size:17px;line-height:1.6;max-width:34ch}

/* ---------- Um esquadro: todos os textos começam na mesma margem ---------- */
@media(min-width:761px){
  html body .section .section-head,html body #pre-registro>.prereg-copy,html body #comunidade>.community-copy{left:var(--edge);top:clamp(64px,8vw,104px);width:min(440px,36vw);max-width:none;padding:0}
  html body .hero-copy{margin-left:calc(var(--edge) + 7vw)}
}

/* ---------- Cenários: ilustrações grandes + véu creme à esquerda para o texto ---------- */
html body #barco{background:linear-gradient(90deg,#fff6e6f2 0%,#fff6e6c7 24%,#fff6e600 46%),url('assets/chapter-shipyard.png') 62% top/cover no-repeat,#f5e6c8}
html body #demo{background:linear-gradient(90deg,#f4fbfdee 0%,#f4fbfdb0 26%,#f4fbfd00 46%),url('assets/board-ocean-hd.webp') center 38%/cover no-repeat,#bfe6f1}
html body #progressao{background:linear-gradient(90deg,#fbf1dcf0 0%,#fbf1dcb5 24%,#fbf1dc00 44%),url('assets/board-map-hd.webp') center/cover no-repeat,#e9d9b5}
html body #economia{background:linear-gradient(90deg,#fff6e6f2 0%,#fff6e6c4 26%,#fff6e600 48%),url('assets/chapter-market.png') 58% top/cover no-repeat,#efdcb9}
html body #pre-registro{background:linear-gradient(90deg,#fff1dbea 0%,#fff1dbb0 28%,#fff1db00 50%),url('assets/chapter-sunset.png') 30% center/cover no-repeat,#f3c99a}
html body #comunidade{background:linear-gradient(90deg,#fff1ddf0 0%,#fff1ddc2 28%,#fff1dd00 50%),url('assets/chapter-community.png') 60% center/cover no-repeat,#e8c9a0}
@media(max-width:760px){
  html body #barco{background:linear-gradient(180deg,#fff6e6f5 0%,#fff6e6d9 34%,#fff6e600 52%),url('assets/chapter-shipyard.png') 72% bottom/auto 62% no-repeat,#f5e6c8}
  html body #economia{background:linear-gradient(180deg,#fff6e6f5 0%,#fff6e6d0 32%,#fff6e600 50%),url('assets/chapter-market.png') 62% 30%/auto 55% no-repeat,#efdcb9}
  html body #pre-registro{background:linear-gradient(180deg,#fff1dbf2 0%,#fff1dbb8 30%,#fff1db30 60%),url('assets/chapter-sunset.png') 20% top/auto 46% no-repeat,#f2d2ac}
  html body #comunidade{background:linear-gradient(180deg,#fff1ddf2 0%,#fff1ddc4 30%,#fff1dd30 55%),url('assets/chapter-community.png') 62% top/auto 48% no-repeat,#ecd3ad}
  html body #demo{background:linear-gradient(180deg,#f4fbfdf2 0%,#f4fbfdb5 30%,#f4fbfd00 50%),url('assets/board-ocean-hd.webp') center top/auto 100% no-repeat,#9ed7e8}
  html body #progressao{background:linear-gradient(180deg,#fbf1dcf2 0%,#fbf1dcc0 26%,#fbf1dc00 46%),url('assets/board-map-hd.webp') center/cover no-repeat,#e9d9b5}
}

/* ---------- Superfícies: cartões creme com borda quente e sombra macia ---------- */
html body .species-panel,html body .journey-step,html body .economy-flow article,html body .calculator,html body .prereg-card,html body .story-panel,html body #comunidade>#faq,html body .yard-card{
  border-radius:18px;box-shadow:0 18px 40px #5b3d1426,0 1px 0 #ffffffb3 inset}
html body .species-panel,html body .journey-step,html body .economy-flow article,html body .calculator,html body .prereg-card,html body .story-panel,html body #comunidade>#faq{
  background:#fff8eaf5;border:1px solid var(--line-warm)}
html body .btn{background:linear-gradient(180deg,#127884,#0b5f6a);color:#fff;border:0;border-radius:999px;box-shadow:0 6px 16px #0b5f6a40;font-weight:700}
html body .btn:hover{background:linear-gradient(180deg,#159099,#0d6c77)}

/* ---------- 01 Frota: marcadores sobre o barco e prancheta do estaleiro ---------- */
@media(min-width:761px){
  html body #barco>.pin{transform:translate(-50%,-50%);border-radius:999px;background:#fff8ea;border:1px solid var(--line-warm);color:var(--ink-deep);font-weight:700;box-shadow:0 8px 18px #3a24091f}
  html body #barco>.pin.p3{left:66%;top:13%}
  html body #barco>.pin.p2{left:77%;top:30%}
  html body #barco>.pin.p1{left:70%;top:57%}
  html body #barco>.pin.active{background:var(--teal);color:#fff;border-color:var(--teal)}
}
.yard-card{position:absolute;left:var(--edge);bottom:clamp(40px,6vw,80px);width:min(470px,36vw);z-index:3;padding:20px 22px 18px;color:#e6f4f6;
  background:linear-gradient(#0d4f6bf2,#0a3e57f5),repeating-linear-gradient(0deg,transparent 0 23px,#ffffff10 24px),repeating-linear-gradient(90deg,transparent 0 23px,#ffffff10 24px);
  background-blend-mode:normal,overlay,overlay;border:2px solid #8fc2d4;transform:rotate(-1.2deg)}
.yard-card .yard-title{font:700 11px/1 "DM Sans",sans-serif;letter-spacing:.2em;color:#a9d9e6}
.yard-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 14px}
.yard-tabs button{display:grid;justify-items:center;gap:6px;padding:10px 6px 9px;border-radius:10px;border:1.5px solid #8fc2d480;background:#ffffff0d;color:#dff2f5;font:600 12px "DM Sans",sans-serif;cursor:pointer;transition:background .3s,border-color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.yard-tabs button svg{width:46px;height:30px}
.yard-tabs button:hover{transform:translateY(-3px);background:#ffffff1c}
.yard-tabs button[aria-pressed="true"]{border-color:#f2c14e;background:#f2c14e1f;color:#fff}
.yard-card strong{display:block;color:#fff;font-size:20px;font-weight:600;margin-bottom:4px}
.yard-card p{margin:0;font-size:14px;line-height:1.5;color:#cfe7ec}
.yard-card .yard-tag{display:inline-block;margin-top:10px;font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.16em;color:#f2c14e}
@media(max-width:760px){.yard-card{position:relative;left:auto;bottom:auto;width:auto;margin:16px 5% 0;transform:none}}

/* ---------- 02 Oceano ---------- */
html body .species-grid article{background:#fffdf6;border:1px solid #ecdcb8;border-radius:12px;padding:10px 6px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
html body .species-grid article:hover{transform:translateY(-4px)}
html body .species-grid img{filter:drop-shadow(0 6px 6px #0a3e5733)}
html body .species-filters button.active{background:var(--teal);color:#fff}

/* ---------- 03 Mapa ---------- */
html body #progressao>.map-note{left:auto;right:var(--edge);width:auto;max-width:calc(100% - 2 * var(--edge))}
html body .journey-step{border-color:var(--line-warm)}
html body .journey-step>span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink-deep);font-weight:700;font-size:12px}
html body .journey-step.active{background:#fff8ea!important;color:var(--ink-deep)!important;outline:2px solid #e3a43a;outline-offset:2px}
html body .journey-step.active small{color:var(--ink-soft)!important}

/* ---------- 04 Mercado: cartões à esquerda, o pescador fica visível ---------- */
@media(min-width:1001px){
  html body #economia>.economy-flow{left:var(--edge);right:auto;width:min(660px,48vw);top:48%}
  html body #economia>.calculator{left:var(--edge);right:var(--edge);width:auto}
}
html body .economy-flow .stat-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:2px}
html body .economy-flow .stat-icon svg{width:36px;height:36px}
html body .economy-flow strong{font-family:var(--serif);color:var(--ink-deep)}
html body .economy-flow a{color:var(--teal);font-weight:700;text-decoration:none}
html body .sale-controls select,html body .sale-controls input{appearance:none;-webkit-appearance:none;border:1.5px solid var(--line-warm);border-radius:10px;background:#fff center right 12px/12px no-repeat;padding:10px 34px 10px 12px;color:var(--ink-deep);font:600 15px "DM Sans",sans-serif}
html body .sale-controls select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a2c38' stroke-width='2'/%3E%3C/svg%3E")}
html body .sale-controls input{padding-right:12px;width:100%}
html body .calc-result{border-radius:16px}
html body .calc-result strong{font-family:var(--serif)}

/* ---------- 05 Cartão de Embarque: marcos em linha do tempo com âncoras ---------- */
html body .prereg-card{background:#fff8eaf7}
html body .prereg-card>.pr-goals{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line-warm)}
html body .prereg-card>.pr-goals:before{content:'Recompensas por marcos';display:block;font:600 18px/1.2 var(--serif);color:var(--ink-deep);margin-bottom:12px}
html body .prereg-card .pr-track{display:none}
html body .prereg-card #pr-goals{display:grid;grid-template-columns:1fr;gap:0;position:relative;margin:0}
html body .prereg-card #pr-goals:before{content:'';position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:repeating-linear-gradient(var(--teal-2) 0 6px,transparent 6px 11px)}
html body .prereg-card #pr-goals li,html body .prereg-card #pr-goals li:last-child{grid-column:auto;position:relative;display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center;padding:7px 0;background:none;border:0;box-shadow:none;transform:none;color:var(--ink-soft)}
html body .prereg-card #pr-goals li:before{content:'';grid-row:span 2;width:36px;height:36px;border-radius:50%;background:#e9dfc8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%237d8a86' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v13M7 11h10M5 15c1 3 4 5 7 5s6-2 7-5'/%3E%3C/g%3E%3C/svg%3E") center/20px no-repeat;position:relative;z-index:1}
html body .prereg-card #pr-goals li.next:before,html body .prereg-card #pr-goals li.done:before{background-color:var(--teal);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v13M7 11h10M5 15c1 3 4 5 7 5s6-2 7-5'/%3E%3C/g%3E%3C/svg%3E")}
html body .prereg-card #pr-goals li.next:before{box-shadow:0 0 0 5px #0f7f8626;animation:goal-ping 2.4s ease-out infinite}
html body .prereg-card #pr-goals li b{font:700 14px "DM Sans",sans-serif;color:var(--ink-deep);margin:0}
html body .prereg-card #pr-goals li span{font-size:13px;line-height:1.35}
@keyframes goal-ping{0%{box-shadow:0 0 0 0 #0f7f8650}100%{box-shadow:0 0 0 12px #0f7f8600}}
html body .pr-counter{background:#fff8eaf2;border:1px solid var(--line-warm);border-radius:14px;padding:10px 16px;box-shadow:0 10px 24px #5b3d1420}

/* ---------- 06 Comunidade: FAQ em pergaminho, convite com carimbo ---------- */
html body #comunidade>#faq>div:first-child:after{display:none}
html body #comunidade>#faq{background:#fbf0daf7 radial-gradient(ellipse at 0 0,#e9d3a64d,transparent 45%)}
html body #comunidade>#faq h2{font-size:26px;margin:0 0 12px}
html body #comunidade .questions details{background:transparent;border:0;border-bottom:1px solid #d8c299;border-radius:0;margin:0}
html body #comunidade .questions summary{list-style:none;display:flex;justify-content:space-between;gap:12px}
html body #comunidade .questions summary::-webkit-details-marker{display:none}
html body #comunidade .questions summary:after{content:'+';font-size:20px;line-height:1;color:var(--teal);transition:transform .35s cubic-bezier(.16,1,.3,1)}
html body #comunidade .questions details[open] summary:after{transform:rotate(45deg)}
html body .story-panel{position:absolute;overflow:hidden}
html body .story-panel:after{content:'';position:absolute;right:-14px;top:-14px;width:110px;height:110px;opacity:.5;pointer-events:none;transform:rotate(14deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23a8782f' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='44' stroke-dasharray='3 3'/%3E%3Ccircle cx='50' cy='50' r='36'/%3E%3Ccircle cx='50' cy='30' r='4'/%3E%3Cpath d='M50 34v34M40 44h20M34 58c3 8 9 12 16 12s13-4 16-12' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:760px){html body .story-panel{position:relative}}

@media(prefers-reduced-motion:reduce){html body .prereg-card #pr-goals li.next:before{animation:none}}

/* correções da 1ª inspeção */
@media(min-width:761px){
  html body #barco>.yard-card{position:absolute;top:auto;left:var(--edge);bottom:clamp(40px,5vw,72px);z-index:3}
  html body #barco>.section-head{top:clamp(56px,6vw,84px)}
  html body #economia>.calculator{left:var(--edge);right:auto;width:calc(100% - 2 * var(--edge))}
}
html body .economy-flow>.illustrative{grid-column:1/-1;position:static;margin-top:2px;color:var(--ink-soft)}
@media(max-width:760px){
  html body #barco>.pin{display:none}
  html body #barco>.yard-card{position:absolute;top:auto;left:5%;right:5%;bottom:24px;width:auto;margin:0;z-index:3}
  html body #progressao>.map-note{top:auto;bottom:12px;left:5%;right:5%}
}

html body #barco .yard-card strong{color:#fff}

/* ---------- Peixes do inventário ---------- */
html body .species-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
html body .species-grid article{display:grid;justify-items:center;align-content:start;gap:2px;padding:10px 6px 9px;text-align:center;animation:fish-in .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 45ms)}
html body .species-grid img{width:100%;height:58px;object-fit:contain;margin-bottom:4px}
html body .species-grid strong{font-size:12px;line-height:1.25;color:var(--ink-deep)}
html body .species-grid small{font-size:11px;font-weight:700}
.species-grid .r0 small{color:#6b7480}.species-grid .r1 small{color:#2b8f5c}.species-grid .r2 small{color:#2f6fbf}
.species-grid .r3 small{color:#7b4cc4}.species-grid .r4 small{color:#b07a12}.species-grid .r5 small{color:#c43a72}
.species-grid .r5{background:linear-gradient(#fff6fa,#fffdf6)}.species-grid .r4{background:linear-gradient(#fff8e6,#fffdf6)}
@keyframes fish-in{from{opacity:0;transform:translateY(10px) scale(.96)}}
.fish-lane{position:absolute;left:0;right:0;top:56%;bottom:3%;overflow:hidden;pointer-events:none;z-index:1}
.fish-lane i{position:absolute;left:0;top:var(--y);width:var(--s);opacity:var(--o);filter:blur(var(--b));animation:swim-x var(--d) linear infinite;animation-delay:var(--delay)}
.fish-lane img{display:block;width:100%;animation:swim-bob 2.8s ease-in-out infinite;filter:drop-shadow(0 10px 8px #03304a59)}
.fish-lane i:nth-child(even) img{animation-duration:3.4s;animation-delay:-1.2s}
@keyframes swim-x{from{transform:translateX(-22vw)}to{transform:translateX(118vw)}}
@keyframes swim-bob{50%{transform:translateY(-9px) rotate(2deg)}}
html body #demo>.section-head,html body #demo>.species-panel,html body #demo>.demo-shell{z-index:2}
.paused .fish-lane i,.paused .fish-lane img{animation-play-state:paused}
@media(max-width:760px){.fish-lane{top:62%}.fish-lane i{width:calc(var(--s) * .6)}html body .species-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.fish-lane{display:none}html body .species-grid article{animation:none}}

/* ---------- Mapa da jornada: pergaminho, mapa nítido e itinerário alinhado ---------- */
html body #progressao{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(32px,5vw,88px);row-gap:28px;align-items:start;
  height:auto;min-height:0;padding:clamp(72px,8vw,112px) var(--edge) clamp(48px,5vw,72px);
  background:radial-gradient(ellipse 46% 58% at 70% 48%,#a8e2dc70,transparent 72%),repeating-linear-gradient(0deg,transparent 0 47px,#9b74361a 48px),repeating-linear-gradient(90deg,transparent 0 47px,#9b74361a 48px),linear-gradient(160deg,#fbf0d8,#eedbb3)}
html body #progressao:before{display:none}
html body #progressao>.route-art,html body #progressao>.journey-detail,html body #progressao>.creatures-row{display:none!important}
html body #progressao>.section-head{position:relative;inset:auto;left:auto;top:auto;width:auto;grid-column:1;grid-row:1}
html body #progressao>.journey{position:relative;inset:auto;grid-column:1;grid-row:2;display:grid;gap:12px;pointer-events:auto;padding-left:0}
html body #progressao>.journey:before{content:'';position:absolute;left:33px;top:28px;bottom:28px;width:2px;background:repeating-linear-gradient(#0f7f86 0 6px,transparent 6px 12px);z-index:0}
html body #progressao .journey-step{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:100%;min-height:0;z-index:1;align-items:center;padding:14px 18px;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
html body #progressao .journey-step:hover{transform:translateX(6px)}
html body #progressao .journey-step>span{background:#fff8ea}
html body #progressao .journey-step.active>span{background:var(--teal);color:#fff;border-color:var(--teal)}
html body #progressao>.route-map{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;position:relative;width:min(100%,760px);aspect-ratio:1312/1199}
html body #progressao>.map-note{position:static;grid-column:2;grid-row:3;justify-self:end;color:#6b5a3c}
.route-map>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 34px #5a3a1240);animation:map-float 9s ease-in-out infinite;transform-origin:50% 60%}
@keyframes map-float{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(.6deg) translateY(-10px)}}
.map-pin{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#0b4f5c;color:#fff;font:700 14px "DM Sans",sans-serif;cursor:pointer;box-shadow:0 6px 14px #0a2c3859;transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s}
.map-pin:hover{transform:translate(-50%,-50%) scale(1.15)}
.map-pin.on{background:#e3a43a;color:#2a1700;transform:translate(-50%,-50%) scale(1.2);animation:pin-glow 2.2s ease-out infinite}
@keyframes pin-glow{0%{box-shadow:0 0 0 0 #e3a43a99}100%{box-shadow:0 0 0 18px #e3a43a00}}
.paused .route-map>img,.paused .map-pin.on{animation-play-state:paused}
@media(max-width:900px){
  html body #progressao{grid-template-columns:1fr;grid-template-rows:auto;padding:64px 5% 48px;height:auto}
  html body #progressao>.section-head,html body #progressao>.route-map,html body #progressao>.journey,html body #progressao>.map-note{grid-column:1;grid-row:auto}
  html body #progressao>.section-head{padding:0;background:none}
  html body #progressao>.map-note{justify-self:start}
}
@media(prefers-reduced-motion:reduce){.route-map>img,.map-pin.on{animation:none}}

html body #progressao>.journey{grid-template-columns:1fr;grid-auto-rows:auto}
html body #progressao .journey-step{grid-template-columns:36px 1fr;gap:2px 12px}
html body #progressao .journey-step>span{grid-row:1/3;align-self:center}

@media(max-width:900px){html body #progressao>.section-head{order:1}html body #progressao>.route-map{order:2;width:100%}html body #progressao>.journey{order:3}html body #progressao>.map-note{order:4}}

/* ---------- Oceano: cena nova em alta ---------- */
html body #demo{background:linear-gradient(90deg,#f4fbfdee 0%,#f4fbfdb0 26%,#f4fbfd00 46%),url('assets/scene-ocean.webp') center 58%/cover no-repeat,#8fd3ea}
@media(max-width:760px){html body #demo{background:linear-gradient(180deg,#f4fbfdf2 0%,#f4fbfdb5 30%,#f4fbfd00 50%),url('assets/scene-ocean.webp') center bottom/auto 72% no-repeat,#8fd3ea}}

/* ---------- Jornada: mapa em tela cheia (substitui o layout de pergaminho) ---------- */
html body #progressao{display:block;position:relative;overflow:hidden;height:clamp(760px,62vw,1000px);padding:0;background:#ecd6a9}
html body #progressao>.route-map{display:none}
html body #progressao>.section-head{position:absolute;left:var(--edge);top:clamp(64px,7vw,100px);width:min(420px,32vw);z-index:4}
html body #progressao>.map-note{position:absolute;right:var(--edge);bottom:18px;z-index:4;background:#fff8eaf0;padding:4px 10px;border-radius:999px}
.map-scene{position:absolute;left:0;width:100%;aspect-ratio:1;top:50%;transform:translateY(-46%)}
.map-art{position:absolute;inset:0}
.map-art>img{width:100%;height:100%;display:block}
.map-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fdf3dfee 0%,#fdf3dfb8 20%,#fdf3df00 38%)}
html body #progressao .map-scene>.journey{position:absolute;inset:0;display:block;pointer-events:none;z-index:2;padding:0}
html body #progressao .map-scene>.journey:before{display:none}
html body #progressao .map-scene .journey-step{position:absolute;width:18.5%;min-height:0;pointer-events:auto;padding:12px 14px}
html body #progressao .map-scene .journey-step:hover{transform:translateY(-4px)}
html body #progressao .map-scene .journey-step:nth-child(1){left:20.5%;top:65%}
html body #progressao .map-scene .journey-step:nth-child(2){left:35%;top:46.5%}
html body #progressao .map-scene .journey-step:nth-child(3){left:78%;top:27.5%}
html body #progressao .map-scene .journey-step:nth-child(4){left:78%;top:58%}
.map-pin{z-index:3}
@media(max-width:900px){
  html body #progressao{height:auto;padding:64px 0 40px;background:linear-gradient(#fbf0d8,#ecd6a9)}
  html body #progressao>.section-head{position:relative;left:auto;top:auto;width:auto;margin:0 5% 20px}
  html body #progressao>.map-note{position:static;display:inline-block;margin:12px 5% 0}
  .map-scene{position:relative;top:auto;transform:none;aspect-ratio:auto}
  .map-art{position:relative;aspect-ratio:1}
  .map-art:after{display:none}
  html body #progressao .map-scene>.journey{position:relative;inset:auto;display:grid;gap:10px;margin:16px 5% 0;pointer-events:auto}
  html body #progressao .map-scene .journey-step{position:relative;left:auto!important;top:auto!important;width:100%}
}
@media(min-width:901px){
  html body #progressao .map-scene>.journey{left:0;top:0;width:100%;height:100%;max-width:none;margin:0}
  html body #progressao .map-scene .journey-step{width:clamp(220px,18.5vw,280px)}
}
@media(min-width:761px){html body #demo>.species-panel{left:auto;right:var(--edge);width:min(540px,37vw)}}
@media(min-width:901px){html body #progressao .map-scene .journey-step:nth-child(1){left:17%;top:56.5%}}
@media(max-width:900px){html body #progressao .map-scene>.journey{grid-template-columns:1fr}}