/* C 版（原創）：Vibe Coding 課程入口。首屏即見課程地圖（5 階段 15 課與里程碑），往下依序是完成品架構與完整課綱；
   配色取 VibeCode PRO 產品頁：米白紙底、墨色文字，深色區塊用墨色不用綠，品牌綠只做站點、勾選與按鈕細節。 */
:root{--paper:#f4f2ee;--card:#fbfaf7;--sand:#ebe7df;--ink:#1f2d30;--ink2:#46524f;--muted:#7c8481;--line:#dcd7cc;--green:#2e614b;--deep:#203e37;--lime:#41c064;
--sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;--serif:"Noto Serif TC","Songti TC",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.kicker{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--green)}.kicker span{color:var(--line);margin:0 4px}
h1,h2,h3{margin:0;color:var(--ink)}
h2{font-family:var(--serif);font-size:28px;line-height:1.3;font-weight:700}
.i-arrow,.i-check{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* 按鈕 */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#f4f2ee;border-radius:999px;padding:12px 22px;font-size:14px;font-weight:500;transition:background .2s}
.btn:hover{background:var(--deep)}.btn .i-arrow{color:var(--lime);transition:transform .2s}.btn:hover .i-arrow{transform:translateX(3px)}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-line{font-size:14px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:1px}.btn-line:hover{color:var(--green);border-color:var(--green)}
/* 頁首 */
.top{position:sticky;top:0;z-index:20;background:rgba(244,242,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{height:68px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:14px}.brand>a:first-child{display:flex}.brand-course{display:grid;line-height:1.3;border-left:1px solid var(--line);padding-left:14px}
.brand b{font-size:14px;letter-spacing:.02em}.brand small{font-size:11px;color:var(--muted)}
.top nav{display:flex;gap:24px;margin-left:auto;font-size:13px;color:var(--ink2)}.top nav a:hover{color:var(--green)}
/* 首屏 */
.hero{padding:34px 0 26px}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:48px;align-items:center}
.hero h1{font-family:var(--serif);font-size:36px;line-height:1.25;font-weight:700;letter-spacing:.01em}
.hero h1 span{display:block;font-family:var(--sans);font-size:19px;font-weight:500;color:var(--ink2);margin-top:8px;letter-spacing:0}
.lead{margin:14px 0 0;color:var(--ink2);font-size:15px;max-width:36em}
.facts{display:flex;list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts li{flex:1;padding:10px 0 10px 16px;font-size:12px;color:var(--muted);border-left:1px solid var(--line);line-height:1.4}.facts li:first-child{border-left:0;padding-left:0}
.facts b{display:block;font-size:22px;color:var(--ink);font-weight:700;font-family:var(--serif)}
.cta{display:flex;align-items:center;gap:22px;margin-top:20px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--lime);margin-top:6px;flex-shrink:0;box-shadow:0 0 0 4px #41c06426}
/* 區塊標題 */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:22px}
.sec-note{margin:0;max-width:30em;font-size:13px;color:var(--muted);text-align:right}
/* 課程地圖 */
.map{padding:6px 0 56px}
.map .wrap{max-width:1400px}
.map-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 30px 20px;box-shadow:0 20px 50px -36px #1f2d3040}
/* 24 課、7 個階段排成一列，欄寬跟著各階段課名長度走（第一屏要看得到完整地圖） */
.legs{display:grid;grid-template-columns:repeat(7,auto);gap:16px}
.leg{min-width:0}
.leg-no{margin:0;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.leg h3{font-size:14px;margin:2px 0 10px;white-space:nowrap}
.rail{position:relative;display:flex;justify-content:space-between;align-items:center;height:14px;margin:0 0 10px}
.rail::before{content:"";position:absolute;left:0;right:-16px;top:6px;height:2px;background:var(--ink)}
.leg:last-child .rail::before{right:0}
.stop{position:relative;width:12px;height:12px;border-radius:50%;background:var(--card);border:2px solid var(--ink);display:inline-block;flex-shrink:0}
.stop-start{background:var(--lime);border-color:var(--deep)}
.stop-mile{background:var(--ink)}
.stop-opt{border-color:var(--muted)}.stop-mile.stop-opt{background:var(--muted)}
.leg ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.leg ol a{display:flex;align-items:baseline;gap:8px;padding:4px 6px;margin:0 -6px;border-radius:6px;font-size:13px;line-height:1.5;color:var(--ink2)}
.leg ol a:hover{background:var(--sand);color:var(--ink)}
.leg ol b{font-size:11px;color:var(--green);font-variant-numeric:tabular-nums;font-weight:700}
.leg:nth-child(4) ol{grid-template-columns:1fr 1fr;column-gap:14px}
.miles{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px dashed var(--line);font-size:12px;color:var(--ink2)}
.miles li{display:flex;align-items:center;gap:8px}.miles .stop{width:10px;height:10px}
.miles-opt{margin-left:auto;color:var(--muted)}
/* 完成品架構 */
.product{padding:30px 0 64px;border-top:1px solid var(--line)}
.product .sec-head{margin-top:26px}
.arch{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1.55fr);align-items:stretch}
.arch-label{margin:0 0 10px;font-size:12px;font-weight:700;color:var(--ink)}.arch-label span{font-weight:400;color:var(--muted)}
.clients{display:grid;gap:10px;align-content:center}
.part{display:grid;grid-template-columns:1fr auto;gap:2px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;transition:border-color .2s,transform .2s}
.part:hover{border-color:var(--ink);transform:translateY(-2px)}
.p-name{font-weight:700;font-size:15px}.p-name small{font-weight:400;font-size:11px;color:var(--muted);margin-left:8px}
.p-meta{grid-column:1;font-size:13px;color:var(--ink2);line-height:1.6}
.p-no{grid-column:2;grid-row:1/span 2;align-self:center;font-size:11px;color:var(--green);border:1px solid #2e614b40;border-radius:999px;padding:2px 9px;white-space:nowrap}
.wires{display:grid;align-content:center;gap:0;padding-top:22px}
.wires span{height:74px;position:relative}
.wires span::before{content:"";position:absolute;left:4px;right:10px;top:50%;border-top:1.5px dashed #9aa19e}
.wires span::after{content:"";position:absolute;right:4px;top:calc(50% - 4px);border:4px solid transparent;border-left:7px solid #9aa19e;border-right:0}
.box{border:1.5px solid var(--ink);border-radius:16px;padding:16px 18px 18px;background:repeating-linear-gradient(135deg,transparent 0 10px,#1f2d3006 10px 11px),var(--paper);display:grid;gap:10px;align-content:start}
.box .arch-label{margin-bottom:0}
.box-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.p-api{background:var(--ink);border-color:var(--ink);color:#f4f2ee}.p-api .p-name small,.p-api .p-meta{color:#b9c2bf}.p-api .p-no{color:#9fe0b1;border-color:#9fe0b155}
.stack{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:26px 0 0;padding:0;font-size:12px}
.stack li{border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--ink2);background:var(--card)}
.stack .stack-label{border:0;background:none;padding-left:0;font-weight:700;color:var(--ink)}
.stack .stack-note{border:0;background:none;color:var(--muted);margin-left:auto}
/* 完整課程 */
.curriculum{padding:60px 0 30px}
.phase{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;padding:30px 0;border-top:1px solid var(--line)}
.phase-side{align-self:start;position:sticky;top:92px}
.phase-side img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--sand);margin-bottom:14px}
.phase-side h3{font-family:var(--serif);font-size:21px;margin:2px 0 6px}.phase-side p:last-child{margin:0;font-size:13px;color:var(--muted)}
.lesson{display:grid;grid-template-columns:54px minmax(0,1fr) 28px;gap:14px;padding:16px 10px;margin:0 -10px;border-bottom:1px solid var(--line);border-radius:10px;transition:background .2s}
.lesson:last-child{border-bottom:0}.lesson:hover{background:var(--card)}
.l-no{font-family:var(--serif);font-size:26px;line-height:1.1;color:#b6b0a3;font-weight:700;transition:color .2s}.lesson:hover .l-no{color:var(--green)}
.l-body{display:grid;gap:3px}.l-body strong{font-size:17px;line-height:1.5}
.l-desc{font-size:14px;color:var(--ink2)}
.l-out{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--green);margin-top:3px}
.tag{font-style:normal;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 6px;background:var(--card)}
.l-go{align-self:center;color:var(--muted);transition:transform .2s,color .2s}.lesson:hover .l-go{color:var(--ink);transform:translateX(3px)}
/* 常見問題 */
.faq{padding:44px 0 56px;border-top:1px solid var(--line)}
.faq-in{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px}
.faq details{border-bottom:1px solid var(--line);padding:15px 0}.faq details:first-child{border-top:1px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-weight:700;font-size:16px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--muted);font-weight:400}.faq details[open] summary::after{content:"–"}
.faq details p{margin:8px 0 0;color:var(--ink2);font-size:14px;max-width:44em}
/* 結尾 */
.closing{padding:0 0 40px}
.closing-in{display:flex;align-items:center;justify-content:space-between;gap:40px;background:var(--deep);color:#c9d3cf;border-radius:18px;padding:36px 44px}
.closing h2{color:#f4f2ee;font-size:24px;margin-bottom:6px}.closing .kicker{color:#8fd6a5}.closing p{margin:0;font-size:14px;max-width:44em}
.closing .note{font-size:12px;color:#93a39d;margin-top:8px}.closing .note a{text-decoration:underline}
.btn-light{background:#f4f2ee;color:var(--ink);flex-shrink:0}.btn-light:hover{background:#fff}.btn-light .i-arrow{color:var(--green)}
.foot{padding:0 0 30px}.foot-in{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
/* 響應式 */
@media(max-width:1339px){.legs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}.leg:nth-child(4){grid-column:1/-1}.rail::before{right:0}}
@media(max-width:1100px){.top nav{display:none}.btn-sm{margin-left:auto}}
@media(max-width:860px){.wrap{padding:0 22px}.hero-in{grid-template-columns:1fr;gap:22px}
.arch{grid-template-columns:1fr}.wires{display:none}.box{margin-top:14px}.sec-head{display:block}.sec-note{text-align:left;margin-top:6px}
.phase,.faq-in{grid-template-columns:1fr;gap:16px}.phase-side{position:static;display:grid;grid-template-columns:120px 1fr;column-gap:16px}.phase-side img{grid-row:1/span 3;margin:0}
.closing-in{display:block;padding:28px 24px}.closing .btn{margin-top:18px}}
@media(max-width:560px){body{font-size:14px}.brand small{display:none}.hero{padding:22px 0 18px}.hero h1{font-size:28px}.hero h1 span{font-size:16px}
.facts{flex-wrap:wrap}.facts li{flex:1 1 45%;padding-left:12px}.facts li:nth-child(3){border-left:0;padding-left:0}.facts b{font-size:19px}
.map-card{padding:20px 18px 16px;border-radius:14px}.legs{grid-template-columns:1fr}.leg:nth-child(4) ol{grid-template-columns:1fr}.miles{display:grid}.miles-opt{margin-left:0}
.box-row{grid-template-columns:1fr}
.lesson{grid-template-columns:38px minmax(0,1fr) 18px;gap:10px}.l-no{font-size:20px}.l-body strong{font-size:16px}.stack .stack-note{margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* 修正：04 階段的十課改成直欄依序排（07–11｜12–16）；圖片未載入時也維持 4:3。 */
.leg:nth-child(4) ol{grid-template-rows:repeat(5,auto);grid-auto-flow:column}
.leg ol a{white-space:nowrap}
.phase-side img{height:auto}
.lead{max-width:34em}
@media(max-width:560px){.leg:nth-child(4) ol{grid-template-rows:none;grid-auto-flow:row}.leg ol a{white-space:normal}}
.btn{white-space:nowrap}
@media(max-width:860px){.legs{grid-template-columns:1fr}.leg{padding-bottom:4px}.leg+.leg{border-top:1px solid var(--line);padding-top:14px}}
@media(max-width:560px){.brand b{font-size:13px}.brand{gap:10px}.brand-course{padding-left:10px}.top-in{gap:12px}}
/* 使用者 2026-09-28：背景改用平台對話頁的淺藍 #F8FBFF（卡片白、線條淺藍灰）；首屏再壓矮，課程地圖整張進第一屏。 */
:root{--paper:#f8fbff;--card:#ffffff;--sand:#eef2f7;--line:#dde3ea;--muted:#74808a;--ink2:#46525a}
.top{background:rgba(248,251,255,.92)}
.hero{padding:20px 0 16px}
.hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:40px}
.hero h1{font-size:32px}.hero h1 span{font-size:17px;margin-top:4px}
.lead{margin-top:10px;font-size:14px;line-height:1.7}
.facts{margin-top:14px}.facts li{padding-top:7px;padding-bottom:7px}.facts b{font-size:19px}
.cta{margin-top:14px}.btn{padding:10px 20px}.btn-sm{padding:7px 15px}
.map{padding:4px 0 48px}.map-card{padding:20px 28px 16px;box-shadow:0 20px 50px -36px #1f2d3033}
.sec-head{margin-bottom:16px}
.map h2{font-size:24px}
.miles{margin-top:14px;padding-top:12px}
.box{background:repeating-linear-gradient(135deg,transparent 0 10px,#1f2d3005 10px 11px),var(--sand)}
.faq details:first-child{border-top-color:var(--ink)}
/* 使用者 2026-09-28：導覽列改白底黑字。 */
.top{background:rgba(255,255,255,.96);border-bottom-color:#e6e9ee}
.top nav{color:#111}.top nav a:hover{color:var(--green)}
.brand b{color:#111}.brand small{color:#555}
/* 使用者 2026-09-28：導覽列按鈕改為「奧微官網」，黑底白字。 */
.btn-site{background:#111;color:#fff}.btn-site:hover{background:#333}
/* ---------- 細節與動態（2026-09-28）：頁面本身示範「說一句話、做出東西」；所有動態在 prefers-reduced-motion 時關閉 ---------- */
/* 閱讀進度線 */
.top{position:sticky}.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--green),var(--lime));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.top nav a{position:relative;transition:color .2s}
.top nav a.on{color:var(--green)}.top nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--green)}
/* 課程地圖：路線畫出、站點依序亮起；與清單連動 */
.js .rail::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.6,0,.2,1)}
.js .map.in .rail::before{transform:scaleX(1)}
.js .stop{transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .2s,border-color .2s}
.js .map.in .stop{transform:scale(1);transition-delay:calc(var(--i,0)*55ms + .25s),0s,0s}
.stop.hot{transform:scale(1.55)!important;background:var(--lime);border-color:var(--deep)}
.stop-start{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #41c06466}70%{box-shadow:0 0 0 9px #41c06400}100%{box-shadow:0 0 0 0 #41c06400}}
/* 架構圖：請求沿連接線流向 API */
.wires span i{position:absolute;top:calc(50% - 3px);left:4px;width:6px;height:6px;border-radius:50%;background:var(--green);opacity:0;animation:flow 2.6s linear infinite}
.wires span:nth-child(2) i{animation-delay:.8s}.wires span:nth-child(3) i{animation-delay:1.6s}
@keyframes flow{0%{left:4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 14px);opacity:0}}
.p-api::after{content:"";position:absolute;right:14px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px #41c06433;animation:pulse 2.4s ease-out infinite}
.part{position:relative}.p-api .p-no{margin-right:14px}
/* 進場淡入 */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.stop-start,.p-api::after{animation:none}.wires span i{display:none}.js .reveal,.js .stop,.js .rail::before{opacity:1;transform:none;transition:none}}
.sec-note{max-width:36em}
@media(max-width:860px){.hero-in{grid-template-columns:1fr}}
/* ---------- 首屏 3D 動畫舞台（2026-09-28 規格 2026-09-28-vibe-coding-hero-3d-animation-design）：16:9 畫布＋下方說明列；放大觀看時舞台改 fixed，原位由 .stage-slot 撐住不跳版 ---------- */
.hero-in{grid-template-columns:minmax(0,1fr) 560px;gap:44px}
.hero-visual{margin:0;min-width:0}
.stage-slot{position:relative;aspect-ratio:16/9}
.stage{position:absolute;inset:0;background:var(--paper)}
.stage-view{position:absolute;inset:0;overflow:hidden}
.stage-view canvas{-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.stage-view canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease}
.stage.is-live .stage-poster{opacity:0;pointer-events:none}
.stage-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stage-label{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;transform:translate(var(--x,0),var(--y,0)) translate(-100%,-50%);display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);letter-spacing:.02em}
.stage-label>span{display:block;text-align:right;line-height:1.35}
.stage-label b{display:block;color:var(--deep);font-weight:700;font-size:13px;letter-spacing:.04em}
.stage-label::after{content:"";width:22px;height:1px;background:var(--deep);opacity:.5}
.stage-btns{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.stage-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:1px solid #dde3ea;border-radius:99px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);color:var(--ink2);font:500 12px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.stage-btn:hover{background:#fff;color:var(--deep);border-color:#c9d3dd}
.stage-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.stage-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.stage-btn[hidden]{display:none}
.stage.can-drag .stage-view{cursor:grab}
.stage.is-dragging .stage-view{cursor:grabbing}
.stage-zcap{display:none}
/* 說明列：字重、大小與重播按鈕一致，純黑（使用者 2026-09-29） */
.stage-cap{display:grid;margin:10px 0 0;font-size:12px;font-weight:500;color:#000;letter-spacing:.02em}
.stage-cap>span{grid-area:1/1;display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .25s ease}
.stage-cap>span::before{content:"";width:18px;height:1px;background:var(--green);transform-origin:left}
.stage-cap>span.on{opacity:1;transition:none}
/* 換句時逐字出現：舊句子先整句淡出，新句子短線從左畫出、每個字依序淡入上浮 */
.cap-t i{display:inline-block;font-style:normal}
.stage-cap>span.on .cap-t i,.stage-zcap .cap-t i{animation:capIn .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(200ms + var(--i) * 60ms)}
.stage-cap>span.on::before{animation:capLine .4s .15s ease both}
@keyframes capIn{from{opacity:0;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes capLine{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.cap-t i,.stage-cap>span::before{animation:none!important}}
.stage-backdrop{position:fixed;inset:0;z-index:999;background:rgba(16,28,32,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .45s ease}
.stage-backdrop.on{opacity:1;pointer-events:auto;cursor:zoom-out}
.stage.is-zoomed{position:fixed;inset:auto;z-index:1000;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.45);transform-origin:0 0}
.stage.is-zoomed .stage-view{border-radius:16px}
.stage.is-zoomed .stage-label{font-size:15px}
.stage.is-zoomed .stage-zcap{display:block;position:absolute;left:0;right:0;top:calc(100% + 14px);margin:0;text-align:center;color:#fff;font-size:16px;letter-spacing:.03em}
@media(max-width:1100px){.hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:32px}}
@media(max-width:860px){.hero-in{grid-template-columns:1fr;gap:22px}.hero-visual{max-width:640px}}
@media(max-width:560px){.stage-label{font-size:13px}}
.stage-zoom.is-close svg{display:none}