:root {
  --ink: #f4f7f2;
  --muted: #9fb3b8;
  --bg: #071827;
  --panel: rgba(15, 38, 53, .78);
  --panel-solid: #102a3a;
  --line: rgba(255,255,255,.12);
  --mint: #53e0bc;
  --coral: #ff765e;
  --amber: #ffc857;
  --blue: #60a5fa;
  --shadow: 0 28px 80px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }

.ambient { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .14; pointer-events: none; }
.ambient-one { width: 460px; height: 460px; background: var(--mint); top: -180px; left: -130px; }
.ambient-two { width: 520px; height: 520px; background: var(--coral); right: -240px; bottom: -230px; }

.topbar { position: fixed; inset: 0 0 auto 0; z-index: 20; height: 68px; padding: 0 clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(7,24,39,.96), rgba(7,24,39,0)); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: .04em; }
.brand-mark { width: 32px; height: 32px; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border: 1px solid var(--line); border-radius: 10px; transform: rotate(6deg); }
.brand-mark i { display: block; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.top-actions { display: flex; gap: 8px; }
.icon-button, .controls > button { border: 1px solid var(--line); background: rgba(255,255,255,.06); border-radius: 50%; cursor: pointer; transition: .2s ease; }
.icon-button { width: 40px; height: 40px; }
.icon-button:hover, .controls > button:hover { transform: translateY(-2px); border-color: var(--mint); background: rgba(83,224,188,.12); }
.icon-button[aria-pressed="true"] { color: var(--bg); background: var(--amber); border-color: var(--amber); }

.deck { height: 100vh; }
.slide { position: absolute; inset: 0; display: none; padding: 92px clamp(24px, 7vw, 110px) 90px; overflow: auto; }
.slide.is-active { display: flex; flex-direction: column; justify-content: center; animation: slideIn .42s ease both; }
@keyframes slideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.eyebrow { margin: 0 0 14px; color: var(--mint); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 18px; font-size: clamp(58px, 8vw, 116px); line-height: .92; letter-spacing: -.06em; }
h1 span { color: var(--amber); }
h2 { margin-bottom: 14px; font-size: clamp(36px, 5vw, 72px); line-height: 1.02; letter-spacing: -.045em; }
h3 { margin-bottom: 8px; font-size: clamp(20px, 2vw, 30px); }
p { color: var(--muted); line-height: 1.65; }
.lead { max-width: 620px; font-size: clamp(19px, 2.2vw, 30px); }
.lead.small { font-size: clamp(17px, 1.7vw, 23px); }
.section-heading { max-width: 860px; margin-bottom: clamp(24px, 4vh, 48px); }
.section-heading.compact { margin-bottom: 28px; }
.section-heading > p:last-child { font-size: clamp(17px, 1.6vw, 22px); }
.primary-button { display: inline-flex; align-items: center; gap: 26px; padding: 15px 20px 15px 24px; border: 0; border-radius: 16px; color: #071827; background: var(--amber); font-weight: 900; cursor: pointer; box-shadow: 0 14px 34px rgba(255,200,87,.18); }
.primary-button span { font-size: 22px; }

.hero-slide { flex-direction: row !important; align-items: center; gap: 5vw; }
.hero-copy { flex: 1 1 52%; z-index: 2; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.duration { color: var(--muted); font-weight: 700; }
.hero-visual { position: relative; flex: 1 1 48%; display: grid; place-items: center; min-height: 520px; }
.hero-visual::before { content: ""; position: absolute; width: min(42vw, 540px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(83,224,188,.25), rgba(83,224,188,.03) 62%, transparent 65%); border: 1px dashed rgba(83,224,188,.3); }
.hero-visual img { position: relative; width: min(46vw, 660px); max-height: 72vh; object-fit: contain; filter: drop-shadow(0 35px 50px rgba(0,0,0,.42)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-1deg); } }
.orbit { position: absolute; z-index: 3; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--bg); font-weight: 900; box-shadow: 0 12px 24px rgba(0,0,0,.25); }
.orbit-a { top: 15%; left: 8%; background: var(--amber); }
.orbit-b { top: 22%; right: 4%; background: var(--coral); }
.orbit-c { bottom: 18%; right: 12%; background: var(--mint); }
.status-pill { position: absolute; z-index: 4; right: 4%; bottom: 8%; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7,24,39,.8); backdrop-filter: blur(10px); font-weight: 800; }
.status-pill span { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }

.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mission-card { min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: var(--panel); box-shadow: var(--shadow); }
.mission-card .number { font-size: 48px; font-weight: 950; opacity: .8; }
.mission-card small { color: var(--muted); font-weight: 800; }
.mission-card b { align-self: flex-start; padding: 6px 12px; color: var(--bg); border-radius: 999px; }
.mission-card.mint { border-top: 3px solid var(--mint); }.mission-card.mint b { background: var(--mint); }
.mission-card.coral { border-top: 3px solid var(--coral); }.mission-card.coral b { background: var(--coral); }
.mission-card.amber { border-top: 3px solid var(--amber); }.mission-card.amber b { background: var(--amber); }
.goal-strip, .challenge-row, .priority-line { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.goal-strip span, .challenge-row span, .priority-line span { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.035); }

.split-layout, .lab-layout, .logic-layout, .extension-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(30px, 6vw, 100px); }
.appliance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.appliance { min-height: 170px; padding: 22px; text-align: left; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); cursor: pointer; transition: .22s ease; }
.appliance:hover, .appliance.is-selected { transform: translateY(-4px); border-color: var(--mint); background: rgba(83,224,188,.1); }
.appliance span { display: block; margin-bottom: 14px; font-size: 42px; }
.appliance b, .appliance small { display: block; }.appliance small { margin-top: 4px; color: var(--muted); }
.sensor-answer { min-height: 88px; margin-top: 30px; padding: 18px; display: flex; align-items: center; border-left: 4px solid var(--mint); border-radius: 0 14px 14px 0; color: var(--ink); background: rgba(83,224,188,.08); font-weight: 800; }

.sensor-cards, .reaction-grid, .upgrade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sensor-cards article, .reaction-card, .upgrade-grid article { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); }
.sensor-icon { width: 68px; height: 68px; margin-bottom: 24px; display: grid; place-items: center; border-radius: 20px; color: var(--bg); font-size: 27px; font-weight: 950; transform: rotate(-4deg); }
.sensor-icon.sun { background: var(--amber); }.sensor-icon.heat { background: var(--coral); }.sensor-icon.sound { background: var(--mint); }
.sensor-cards small { color: var(--muted); }.sensor-cards code, .reaction-card code { display: inline-block; padding: 7px 11px; border-radius: 9px; color: var(--mint); background: rgba(0,0,0,.25); }
.notice, .thinking-question, .callout { margin-top: 22px; padding: 16px 20px; border: 1px solid rgba(255,200,87,.28); border-radius: 16px; background: rgba(255,200,87,.08); color: #f6e3a9; }

.control-stack { display: grid; gap: 20px; margin-top: 34px; }
.control-stack label, .sim-controls label { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-weight: 800; }
.control-stack output, .sim-controls output { color: var(--amber); }
input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--mint); cursor: pointer; }
.environment-card { min-height: 430px; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line); border-radius: 32px; background: linear-gradient(150deg, rgba(16,42,58,.96), rgba(11,29,43,.84)); box-shadow: var(--shadow); }
.environment-orb { width: 174px; height: 174px; margin-bottom: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 72px; background: radial-gradient(circle at 35% 25%, #fff4c2, var(--amber) 35%, #dd804b 70%, #692d48); box-shadow: 0 0 60px rgba(255,200,87,.25); transition: .35s ease; }
.meter-row { width: 70%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.meter-row i { height: 7px; border-radius: 999px; background: var(--mint); transform-origin: left; transition: .25s ease; }

.code-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.block { padding: 24px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.block span { display: inline-block; margin-bottom: 12px; font-weight: 950; }.block p { margin: 0; color: inherit; line-height: 1.75; }
.block.forever { background: #7b4dd6; }.block.event { padding: 15px 20px; background: #2368c4; }
.event-stack { display: grid; gap: 10px; }.flow-arrow { color: var(--amber); font-size: 48px; }

.reaction-builder { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; }
.builder-step { min-height: 210px; padding: 26px; position: relative; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.builder-step > span { position: absolute; right: 18px; top: 14px; font-size: 48px; font-weight: 950; color: rgba(255,255,255,.08); }
.builder-step small { color: var(--mint); font-weight: 900; }.builder-step strong { display: block; margin-top: 20px; font-size: 19px; }.builder-step p { margin-top: 22px; font-size: 25px; color: var(--amber); font-weight: 900; }
.operator { color: var(--coral); font-size: 36px; }
.sentence-code { margin-top: 24px; padding: 16px; text-align: center; border-radius: 16px; background: rgba(83,224,188,.08); font-size: clamp(18px, 2vw, 27px); }.sentence-code span { color: var(--mint); font-weight: 950; }

.loop-diagram { position: relative; width: min(680px, 90vw); aspect-ratio: 2 / 1; margin: 0 auto; }
.loop-diagram::before { content: ""; position: absolute; inset: 10% 9%; border: 2px dashed rgba(83,224,188,.34); border-radius: 50%; }
.loop-node { position: absolute; width: 170px; padding: 15px; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-solid); box-shadow: var(--shadow); }
.loop-node b, .loop-node small { display: block; }.loop-node b { color: var(--amber); }.loop-node small { margin-top: 5px; color: var(--muted); }
.node-a { left: 0; top: 36%; }.node-b { left: 28%; top: 0; }.node-c { right: 0; top: 36%; }.node-d { left: 28%; bottom: 0; }
.loop-center { position: absolute; inset: 36% 38%; display: grid; place-items: center; color: var(--muted); text-align: center; }.loop-center span { display: block; color: var(--mint); font-size: 38px; font-weight: 950; }
.concept-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }.concept-pair article { padding: 14px 20px; border-left: 3px solid var(--mint); background: rgba(255,255,255,.04); }.concept-pair p { margin: 4px 0 0; }

.reaction-card .face { min-height: 94px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 18px; color: var(--amber); background: rgba(0,0,0,.24); font: 950 34px/1 ui-monospace, monospace; }
.reaction-card.night { border-top: 3px solid var(--blue); }.reaction-card.noise { border-top: 3px solid var(--coral); }.reaction-card.touch { border-top: 3px solid var(--mint); }

.simulator-slide { flex-direction: row !important; align-items: center; gap: clamp(30px, 7vw, 110px); }
.sim-copy { flex: 1; }.sim-copy h2 { font-size: clamp(38px, 5vw, 66px); }
.sim-controls { display: grid; gap: 14px; margin-top: 24px; }
.sim-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }.sim-buttons button, #flameButton { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.06); cursor: pointer; }.sim-buttons button:hover, #flameButton:hover { border-color: var(--mint); }
.pet-console { flex: 0 1 480px; padding: 34px; border: 1px solid rgba(255,200,87,.2); border-radius: 46px; background: linear-gradient(145deg, #173b50, #0b2131); box-shadow: 0 45px 100px rgba(0,0,0,.4), inset 0 0 0 8px rgba(255,255,255,.025); }
.console-screen { padding: 34px; border: 3px solid #7f6f4a; border-radius: 26px; background: #161d18; box-shadow: inset 0 0 35px rgba(0,0,0,.8), 0 0 28px rgba(255,200,87,.08); }
.led-face { width: min(300px, 58vw); aspect-ratio: 1; margin: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.led-face i { border-radius: 50%; background: #302d20; box-shadow: inset 0 0 5px #000; transition: .16s ease; }.led-face i.on { background: var(--amber); box-shadow: 0 0 14px var(--amber), inset 0 0 5px #fff2b0; }
.emotion-label { margin-top: 20px; text-align: center; color: var(--amber); font-weight: 950; letter-spacing: .15em; }
.console-stats { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; color: var(--muted); }.console-stats b { color: var(--mint); }

.debug-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.debug-option { display: flex; gap: 22px; padding: 24px; text-align: left; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); cursor: pointer; }.debug-option > span { flex: 0 0 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--bg); background: var(--amber); font-size: 24px; font-weight: 950; }.debug-option code { display: block; margin: 14px 0; padding: 12px; border-radius: 10px; background: rgba(0,0,0,.28); line-height: 1.6; }.debug-option p { margin-bottom: 0; }.debug-option.good { border-color: var(--mint); background: rgba(83,224,188,.1); }.debug-option.bad { border-color: var(--coral); animation: shake .28s ease; }
@keyframes shake { 33% { transform: translateX(-6px); } 66% { transform: translateX(6px); } }
.debug-result { margin-top: 18px; min-height: 54px; padding: 14px; text-align: center; color: var(--muted); }

.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.role-grid article { padding: 28px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); }.role-avatar { grid-row: 1 / 3; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 22px; color: var(--bg); background: var(--coral); font-size: 30px; font-weight: 950; transform: rotate(-4deg); }.role-avatar.alt { background: var(--mint); transform: rotate(4deg); }.role-grid ul { grid-column: 2; margin: 6px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.8; }
.test-checklist { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }.test-checklist label { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); }

.upgrade-grid article { display: flex; gap: 18px; }.upgrade-icon { flex: 0 0 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: var(--bg); background: var(--amber); font-size: 28px; font-weight: 950; }.upgrade-grid p { margin-bottom: 0; }
.priority-line i { color: var(--coral); font-style: normal; }

.logic-layout { grid-template-columns: .65fr 1.35fr; }.logic-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.logic-columns article { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); }.logic-columns header { padding: 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }.logic-columns header > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--bg); background: var(--mint); font-size: 26px; font-weight: 950; }.logic-columns header small, .logic-columns header b { display: block; }.logic-columns header small { color: var(--muted); }.logic-columns ol { margin: 0; padding: 22px 24px 24px 48px; color: var(--muted); line-height: 2; }.logic-columns li::marker { color: var(--amber); font-weight: 950; }

.extension-steps { margin: 30px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }.extension-steps span { padding: 11px 15px; border-radius: 12px; color: var(--bg); background: var(--mint); font-weight: 900; }.extension-steps i { color: var(--amber); font-style: normal; }
.flame-demo { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 30px; background: radial-gradient(circle at 50% 45%, rgba(255,118,94,.13), transparent 40%), var(--panel); }
.flame { position: relative; width: 170px; height: 220px; margin-bottom: 30px; filter: grayscale(1) brightness(.45); transition: .3s ease; }.flame.is-lit { filter: none; }.flame i { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotate(45deg); border-radius: 60% 10% 60% 50%; background: var(--coral); animation: flicker .55s ease-in-out infinite alternate; }.flame i:nth-child(1) { width: 130px; height: 130px; }.flame i:nth-child(2) { width: 90px; height: 90px; bottom: 5px; background: var(--amber); animation-delay: -.2s; }.flame i:nth-child(3) { width: 48px; height: 48px; bottom: 10px; background: #fff1b7; animation-delay: -.35s; }
@keyframes flicker { to { transform: translateX(-50%) rotate(43deg) scale(.92,1.08); } }

.rubric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.rubric-grid label { padding: 20px; display: flex; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); cursor: pointer; }.rubric-grid input { width: 22px; height: 22px; accent-color: var(--mint); }.rubric-grid b, .rubric-grid small { display: block; }.rubric-grid small { margin-top: 4px; color: var(--muted); }

.final-slide { flex-direction: row !important; align-items: center; gap: 6vw; }.final-content { flex: 1.2; }.final-content > p:not(.eyebrow) { max-width: 700px; font-size: 20px; }.exit-template { margin: 34px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: clamp(20px, 2.5vw, 34px); }.exit-template b { min-width: 190px; padding: 6px 12px; border-bottom: 2px solid var(--mint); color: var(--amber); outline: none; }.final-pet { flex: .8; }.final-pet img { width: 100%; max-height: 62vh; object-fit: contain; filter: drop-shadow(0 30px 44px rgba(0,0,0,.4)); }

.teacher-note { display: none; margin-top: 20px; padding: 12px 16px; border-left: 3px solid var(--amber); color: #f7e8b9; background: rgba(255,200,87,.08); font-size: 14px; }
body.show-notes .teacher-note { display: block; }

.controls { position: fixed; z-index: 20; inset: auto 0 0 0; height: 74px; padding: 0 clamp(18px, 4vw, 60px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; background: linear-gradient(0deg, rgba(7,24,39,.98), rgba(7,24,39,.72) 65%, transparent); }
.home-link { position: fixed; z-index: 24; left: clamp(18px, 4vw, 60px); bottom: 82px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(7,24,39,.86); backdrop-filter: blur(10px); font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.home-link:hover { border-color: var(--mint); }
.controls > button { width: 44px; height: 44px; font-size: 21px; }.controls > button:disabled { opacity: .25; cursor: not-allowed; transform: none; }
.progress-wrap { display: grid; grid-template-columns: minmax(70px, auto) 1fr auto; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; font-weight: 800; }.progress { height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.11); }.progress i { display: block; width: 6.25%; height: 100%; background: var(--mint); transition: width .3s ease; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .slide { padding: 88px 22px 92px; }
  .slide.is-active { justify-content: flex-start; }
  .hero-slide, .simulator-slide, .final-slide { flex-direction: column !important; align-items: stretch; }
  .hero-visual { min-height: 390px; }.hero-visual img { width: min(90vw, 520px); }.status-pill { right: 12%; }
  .mission-grid, .sensor-cards, .reaction-grid, .upgrade-grid { grid-template-columns: 1fr; }
  .split-layout, .lab-layout, .logic-layout, .extension-layout { grid-template-columns: 1fr; }
  .reaction-builder { grid-template-columns: 1fr; }.operator { transform: rotate(90deg); text-align: center; }
  .code-flow { grid-template-columns: 1fr; }.flow-arrow { transform: rotate(90deg); text-align: center; }
  .debug-choice, .role-grid, .logic-columns, .rubric-grid, .concept-pair { grid-template-columns: 1fr; }
  .loop-diagram { transform: scale(.85); margin: -10px auto; }
  .pet-console { width: 100%; flex-basis: auto; }.led-face { width: min(300px, 68vw); }
  .final-pet { display: none; }
}

@media (max-width: 560px) {
  .brand span:last-child { display: none; }
  h1 { font-size: 55px; }
  h2 { font-size: 38px; }
  .appliance-grid { grid-template-columns: 1fr; }
  .mission-card { min-height: 230px; }
  .hero-visual { min-height: 320px; }.orbit { width: 42px; height: 42px; }
  .loop-diagram { height: 420px; aspect-ratio: auto; transform: none; }.loop-diagram::before { inset: 8% 26%; }.loop-node { width: 145px; }.node-a { left: 0; top: 34%; }.node-b { left: calc(50% - 72px); top: 0; }.node-c { right: 0; top: 34%; }.node-d { left: calc(50% - 72px); bottom: 0; }.loop-center { inset: 39% 32%; }
  .progress-wrap { grid-template-columns: 1fr auto; }.progress-wrap > span:first-child { display: none; }.progress { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }