/* Elementy z labu new2 (trash/lab-new2/elementy), przeniesione skryptem trash/lab-new2/port_new2.py.
   Klasy jak w labie (.e008 = E008). Poprawki pod new2 stoją w site.css, nie tutaj. */
/* ===== g01: E008 ===== */
:is(.e008) { --g01-ink-05: var(--mx-navy-5-white); --g01-ink-10: var(--mx-navy-10-white); --g01-ink-16: var(--mx-navy-16-white); --g01-ink-24: var(--mx-navy-24-white); --g01-ink-40: var(--mx-navy-40-white); --g01-blue-10: var(--mx-blue-10-white); --g01-blue-30: var(--mx-blue-30-white); --g01-blue-50: var(--mx-blue-50-white); --g01-blue-70: var(--mx-blue-70-white); --g01-cyan-10: var(--mx-cyan-10-white); --g01-cyan-18: var(--mx-cyan-18-white); --g01-cyan-45: var(--mx-cyan-45-white); --g01-orange-10: var(--mx-orange-10-white); --g01-orange-16: var(--mx-orange-16-white); --g01-shadow: var(--mx-navy-26-t); --g01-shadow-2: var(--mx-navy-10-t); --g01-todo-bg: var(--mx-orange-9-t); --g01-art-bg: var(--white); position: relative; padding: clamp(56px, 7vw, 104px) 0; background: var(--paper); color: var(--navy); }
.e008 { --g01-soft: var(--mx-blue-soft-60-paper); overflow: hidden; background: radial-gradient(560px 360px at 4% 6%, var(--mx-cyan-10-t), transparent 70%), radial-gradient(520px 340px at 98% 98%, var(--mx-orange-6-t), transparent 70%), var(--g01-soft); }
:is(.e008) .lr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 44px); align-items: center; }
:is(.e008) .lr-copy { min-width: 0; max-width: 35rem; }
:is(.e008) .lr-media { margin: 0; min-width: 0; width: 100%; max-width: 600px; justify-self: center; }
@media (min-width: 880px) {
  :is(.e008) .lr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(44px, 5.6vw, 88px); }
  :is(.e008) .lr-grid--flip { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); }
  :is(.e008) .lr-grid--flip > .lr-media { order: -1; }
}
:is(.e008) .lr-kicker { margin: 0 0 14px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
:is(.e008) .lr-claim { margin: 0 0 18px; font: 700 clamp(26px, 2.6vw, 40px)/1.14 var(--display); letter-spacing: -.022em; color: var(--navy); text-wrap: balance; overflow-wrap: break-word; }
:is(.e008) .lr-text { margin: 0 0 14px; max-width: 54ch; font-size: 17px; line-height: 1.65; color: var(--muted); overflow-wrap: break-word; }
:is(.e008) .lr-note { margin: 0 0 14px; max-width: 54ch; font-size: 15px; line-height: 1.6; color: var(--muted); }
:is(.e008) .lr-copy > :last-child { margin-bottom: 0; }
.e008 .lr-text { color: var(--g01-muted-soft); }
.e008 { --g01-muted-soft: var(--mx-muted-82-navy); }
:is(.e008) .lr-ico { display: block; flex: none; width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.e008) .lr-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 2px; color: var(--blue); font: 600 16px/1.3 var(--text); text-decoration: underline 1.5px transparent; text-underline-offset: 5px; }
:is(.e008) .lr-link:hover { text-decoration-color: currentColor; }
:is(.e008) :is(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
:is(.e008) .lr-link .lr-ico { width: 20px; height: 20px; }
:is(.e008) .lr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
:is(.e008) mark.todo { display: inline; padding: .12em .45em; border: 1.5px dashed var(--orange); border-radius: 6px; background: var(--g01-todo-bg); color: var(--navy); font: 500 13px/1.7 var(--mono); letter-spacing: 0; overflow-wrap: anywhere; }
:is(.e008) .lr-art { position: relative; overflow: hidden; border-radius: 20px; background: var(--g01-art-bg); border: 1px solid var(--line-light); box-shadow: 0 34px 64px -42px var(--g01-shadow), 0 2px 10px -6px var(--g01-shadow-2); }
:is(.e008) .lr-svg { display: block; width: 100%; max-width: none; height: auto; }
:is(.e008) .lr-svg .s-dot { fill: var(--g01-ink-16); }
:is(.e008) .lr-svg .s-halo { fill: var(--g01-cyan-10); }
:is(.e008) .lr-svg .s-halo-o { fill: var(--g01-orange-10); }
:is(.e008) .lr-svg .s-stop-a { stop-color: var(--orange); }
:is(.e008) .lr-svg .s-stop-b { stop-color: var(--orange-2); }
:is(.e008) .lr-svg .s-panel { fill: var(--white); stroke: var(--line-light); stroke-width: 2; }
:is(.e008) .lr-svg .s-panel2 { fill: var(--paper); stroke: var(--line-light); stroke-width: 2; }
:is(.e008) .lr-svg .s-tile { fill: var(--g01-blue-10); }
:is(.e008) .lr-svg .s-tile-c { fill: var(--g01-cyan-18); }
:is(.e008) .lr-svg .s-tile-o { fill: var(--g01-orange-16); }
:is(.e008) .lr-svg .s-bar { fill: var(--g01-ink-10); }
:is(.e008) .lr-svg .s-bar2 { fill: var(--g01-ink-24); }
:is(.e008) .lr-svg .s-head { fill: var(--navy); }
:is(.e008) .lr-svg .s-navy { fill: var(--navy); }
:is(.e008) .lr-svg .s-deep { fill: var(--navy-900); }
:is(.e008) .lr-svg .s-deep-t { fill: var(--navy-ink-80); }
:is(.e008) .lr-svg .s-none { fill: none; stroke: none; }
:is(.e008) .lr-svg :is(.s-ico, .s-ico-d, .s-ico-y, .s-chk, .s-arc, .s-cyl) { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:is(.e008) .lr-svg .s-ico { stroke: var(--blue); }
:is(.e008) .lr-svg .s-ico-d { stroke: var(--navy-900); }
:is(.e008) .lr-svg .s-ico-y { stroke: var(--orange-2); }
:is(.e008) .lr-svg .s-ico--bold { stroke-width: 3.2; }
:is(.e008) .lr-svg .s-ico--thin { stroke-width: 1.6; }
:is(.e008) .lr-svg .s-chk { stroke: var(--navy-900); stroke-width: 3.2; }
:is(.e008) .lr-svg .s-chk--sm { stroke-width: 2.2; }
:is(.e008) .lr-svg .s-wire { fill: none; stroke: var(--g01-ink-16); stroke-width: 2.5; stroke-linecap: round; }
:is(.e008) .lr-svg .s-dash { fill: none; stroke: var(--g01-blue-50); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 8; }
:is(.e008) .lr-svg .s-rule { fill: none; stroke: var(--line-light); stroke-width: 2; }
:is(.e008) .lr-svg .s-led { fill: var(--cyan); }
:is(.e008) .lr-svg .s-led.y { fill: var(--orange-2); }
:is(.e008) .lr-svg .s-pk { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 4 200; stroke-dashoffset: 4; opacity: 0; }
:is(.e008) .lr-svg .s-pk.c { stroke: var(--cyan); }
:is(.e008) .lr-svg .s-pk.y { stroke: var(--orange-2); }
:is(.e008) .lr-svg :is(.s-pop, .s-pulse, .s-spin, .s-meridian, .s-lockring, .s-ringc, .s-ringo, .s-col, .s-colw, .s-handle, .s-warn, .s-fly, .s-twinkle, .s-orbit, .s-wave, .s-bell, .s-blk, .s-click) { transform-box: fill-box; transform-origin: center; }
.e008 .lr-svg .s-side-a { fill: var(--g01-ink-05); stroke: var(--line-light); stroke-width: 2; }
.e008 .lr-svg .s-side-b { fill: var(--white); stroke: var(--line-light); stroke-width: 2; }
.e008 .lr-svg .s-wire-a { fill: none; stroke: var(--g01-ink-24); stroke-width: 2; }
.e008 .lr-svg .s-wire-x { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 6 7; opacity: .7; }
.e008 .lr-svg .s-node-a { fill: var(--white); stroke: var(--g01-ink-24); stroke-width: 2; }
.e008 .lr-svg .s-warn { fill: none; stroke: var(--orange); stroke-width: 2; opacity: .55; }
.e008 .lr-svg .s-wire-b { fill: none; stroke: var(--g01-blue-50); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.e008 .lr-svg .s-divider { fill: none; stroke: var(--g01-ink-24); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.e008 .lr-svg .s-pk { stroke-width: 6; stroke-dasharray: 8 200; }
.e008 .e008-legend,
.e008 .e008-pairs li { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 14px; align-items: center; }
.e008 .e008-legend { margin: 24px 0 6px; font: 700 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--g01-muted-soft); }
.e008 .e008-legend span:last-child { color: var(--blue); }
.e008 .e008-pairs { display: grid; margin: 0; padding: 0; list-style: none; }
.e008 .e008-pairs li { padding: 11px 0; border-top: 1px solid var(--line-light); }
.e008 .e008-pairs li:last-child { border-bottom: 1px solid var(--line-light); }
.e008 .e008-a { min-width: 0; font-size: 15.5px; line-height: 1.45; color: var(--g01-muted-soft); }
.e008 .e008-b { min-width: 0; font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--navy); }
.e008 .e008-arr { width: 22px; height: 22px; stroke: var(--orange); }
@media (max-width: 559px) {
  .e008 .e008-legend { display: flex; flex-wrap: wrap; gap: 8px; }
  .e008 .e008-legend .e008-arr { width: 16px; height: 16px; }
  .e008 .e008-pairs li { grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; }
  .e008 .e008-pairs .e008-a { grid-column: 1 / -1; }
  .e008 .e008-pairs .e008-arr { transform: rotate(90deg); }
}
@keyframes g01-run { 0% { stroke-dashoffset: 4; } 40%, 100% { stroke-dashoffset: -100; } }
@keyframes g01-run-full { from { stroke-dashoffset: 4; } to { stroke-dashoffset: -100; } }
@keyframes g01-blink { 0%, 14% { opacity: 1; } 26%, 100% { opacity: .28; } }
@keyframes g01-nudge { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
@keyframes g01-warn { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.14); opacity: .15; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.e008) .lr-svg .s-pk { opacity: 1; animation: g01-run var(--g01-t, 6s) linear var(--g01-d, 0s) infinite both; }
  :is(.e008) .lr-link .lr-ico { transition: transform .25s var(--ease); }
  :is(.e008) .lr-link:hover .lr-ico { transform: translateX(3px); }
  .e008 .lr-svg .s-pk { --g01-t: 3s; animation-name: g01-run-full; }
  .e008 .lr-svg .s-pk.k2 { --g01-d: .5s; }
  .e008 .lr-svg .s-pk.k3 { --g01-d: 1s; }
  .e008 .lr-svg .s-pk.k4 { --g01-d: 1.5s; }
  .e008 .lr-svg .s-pk.k5 { --g01-d: 2s; }
  .e008 .lr-svg .s-pk.k6 { --g01-d: 2.5s; }
  .e008 .lr-svg .s-led { animation: g01-blink 4s linear var(--g01-d, 0s) infinite both; }
  .e008 .lr-svg .s-led.k2 { --g01-d: .5s; }
  .e008 .lr-svg .s-led.k3 { --g01-d: 1s; }
  .e008 .lr-svg .s-led.k4 { --g01-d: 1.5s; }
  .e008 .lr-svg .s-led.k5 { --g01-d: 2s; }
  .e008 .lr-svg .s-led.k6 { --g01-d: 2.5s; }
  .e008 .lr-svg .s-led.k7 { --g01-d: 3s; }
  .e008 .lr-svg .s-led.k8 { --g01-d: 3.5s; }
  .e008 .lr-svg .s-warn { animation: g01-warn 2.4s ease-in-out infinite; }
  .e008 .lr-svg .s-handle { animation: g01-nudge 5s ease-in-out infinite; }
  :is(.e008).g01-stop .lr-svg * { animation-play-state: paused; }
}
@media (forced-colors: active) {
  :is(.e008) mark.todo { border-color: CanvasText; }
}

/* ===== g02: E011, E012, E013, E014, E016, E017, E018, E019, E020 ===== */
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) { --g2-ink: var(--navy); --g2-ink-2: var(--blue); --g2-wire: var(--mx-blue-40-t); --g2-bar: var(--mx-navy-12-t); --g2-bar-2: var(--mx-navy-30-t); --g2-glass: var(--mx-white-74-t); --g2-glass-line: var(--mx-blue-26-t); --g2-solid: var(--white); --g2-field: var(--white); --g2-bg: var(--white); --g2-shade: var(--mx-navy-10-t); --g2-dot: var(--mx-blue-20-t); --g2-hot: var(--orange); --g2-cyan: var(--mx-cyan-70-blue); --g2-soft-o: var(--mx-orange-14-t); --g2-soft-c: var(--mx-cyan-20-t); --g2-tube: var(--navy); --g2-tube-line: var(--mx-white-22-t); --g2-stage-line: var(--line-light); --g2-stage-shadow: 0 34px 64px -42px var(--mx-navy-60-t); --g2-dur: 3.6s;  position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 7vw, 104px) 0; background: var(--white); color: var(--navy); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="paper"] { background: var(--paper); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] { --g2-ink: var(--on-dark); --g2-ink-2: var(--on-dark-2); --g2-wire: var(--line-dark-2); --g2-bar: var(--mx-on-dark-16-t); --g2-bar-2: var(--mx-on-dark-38-t); --g2-glass: var(--glass); --g2-glass-line: var(--glass-line); --g2-solid: var(--navy); --g2-field: var(--navy-900); --g2-bg: var(--navy-900); --g2-shade: var(--shadow-deep); --g2-dot: var(--line-dark); --g2-hot: var(--orange-2); --g2-cyan: var(--cyan); --g2-soft-o: var(--veil-warm); --g2-soft-c: var(--mx-cyan-14-t); --g2-tube: var(--navy-900); --g2-tube-line: var(--line-dark); --g2-stage-line: var(--glass-line); --g2-stage-shadow: 0 30px 60px -34px var(--shadow-deep);  background: var(--card-dark); background-color: var(--navy-900); color: var(--on-dark); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) > canvas.waves { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) > canvas.waves { display: none; }
}
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 44px); align-items: center; }
@media (min-width: 880px) {
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 5.2vw, 84px); }
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-side="flip"] .g2-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-side="flip"] .g2-copy { order: 2; }
}
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-copy { min-width: 0; max-width: 580px; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-kicker { margin: 0 0 14px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-claim { margin: 0; font: 700 clamp(26px, 2.6vw, 40px)/1.13 var(--display); letter-spacing: -.02em; color: var(--navy); overflow-wrap: break-word; text-wrap: balance; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-text { margin: 18px 0 0; max-width: 54ch; font-size: 17px; line-height: 1.65; color: var(--muted); overflow-wrap: break-word; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-note { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-mini { margin: 22px 0 0; font: 700 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] .g2-kicker { color: var(--cyan); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] .g2-claim { color: var(--on-dark); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] :is(.g2-text, .g2-note, .g2-mini) { color: var(--on-dark-2); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-mini + .g2-tags { margin-top: 10px; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-tags li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 36px; padding: 6px 14px 6px 10px; border-radius: 999px; font: 600 14.5px/1.3 var(--text); color: var(--navy); background: var(--white); border: 1px solid var(--line-light); overflow-wrap: anywhere; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-tags--mono li { font: 500 13px/1.3 var(--mono); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-tags svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] .g2-tags li { color: var(--on-dark); background: var(--glass); border-color: var(--glass-line); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] .g2-tags svg { stroke: var(--orange-2); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 26px 0 0; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-link { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; font: 600 16px/1.3 var(--text); color: var(--blue); text-decoration: underline 1.5px var(--mx-blue-40-t); text-underline-offset: 5px; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-link svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-link:hover { text-decoration-color: var(--orange); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] .g2-link { color: var(--on-dark); text-decoration-color: var(--line-dark-2); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] .g2-link:hover { text-decoration-color: var(--orange-2); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020):not([data-tone="dark"]) a:focus-visible { outline-color: var(--blue); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) mark.todo { display: inline-block; max-width: 100%; margin: 2px 0; padding: 1px 7px; vertical-align: baseline; border: 1.5px dashed var(--orange); border-radius: 6px; background: var(--g2-soft-o); color: var(--navy); font: 500 13px/1.55 var(--mono); overflow-wrap: anywhere; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] mark.todo { border-color: var(--orange-2); color: var(--orange-2); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-media { position: relative; min-width: 0; width: 100%; max-width: 600px; margin: 0; justify-self: start; border-radius: 22px; overflow: hidden; border: 1px solid var(--g2-stage-line); box-shadow: var(--g2-stage-shadow); background: radial-gradient(360px 250px at 8% 4%, var(--g2-soft-c), transparent 70%), radial-gradient(340px 250px at 96% 100%, var(--g2-soft-o), transparent 70%), linear-gradient(160deg, var(--white), var(--blue-soft)); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020)[data-tone="dark"] .g2-media { background: radial-gradient(360px 250px at 8% 4%, var(--g2-soft-c), transparent 70%), radial-gradient(340px 250px at 96% 100%, var(--g2-soft-o), transparent 70%), linear-gradient(160deg, var(--hover-dark), var(--cyan-ring-2)); }
@media (min-width: 880px) {
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-media { max-width: 640px; justify-self: center; }
}
@media (max-width: 479px) {
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-media { border-radius: 16px; }
}
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-art { display: block; width: 100%; height: auto; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-dot { fill: var(--g2-dot); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-s-o { stop-color: var(--orange); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-s-o2 { stop-color: var(--orange-2); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-s-b { stop-color: var(--blue); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-s-c { stop-color: var(--cyan); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-panel { fill: var(--g2-glass); stroke: var(--g2-glass-line); stroke-width: 2; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-solid { fill: var(--g2-solid); stroke: var(--g2-glass-line); stroke-width: 2; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-shade { fill: var(--g2-shade); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-field { fill: var(--g2-field); stroke: var(--g2-glass-line); stroke-width: 1.5; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-core { stroke: var(--g2-cyan); stroke-width: 2.5; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) :is(.g2-ln, .g2-ln2, .g2-hot, .g2-cy, .g2-wire, .g2-cable, .g2-wall, .g2-port, .g2-ring, .g2-ink-dark, .g2-shackle, .g2-tube-line) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-ln { stroke: var(--g2-ink); stroke-width: 3; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-ln2 { stroke: var(--g2-ink-2); stroke-width: 2.5; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-hot { stroke: var(--g2-hot); stroke-width: 3; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-cy { stroke: var(--g2-cyan); stroke-width: 3; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-wire { stroke: var(--g2-wire); stroke-width: 2.5; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-wire--hot { stroke: var(--g2-hot); opacity: .5; stroke-dasharray: 2 9; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-dash { stroke-dasharray: 2 9; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-cable { stroke: var(--g2-wire); stroke-width: 4; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-wall { stroke: var(--g2-ink-2); stroke-width: 5; opacity: .75; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-port { stroke: var(--g2-ink-2); stroke-width: 2; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-ring { stroke: var(--g2-cyan); stroke-width: 2.5; opacity: .35; transform-box: fill-box; transform-origin: center; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-ink-dark { stroke: var(--navy-900); stroke-width: 3.5; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-shackle { stroke: var(--g2-ink); stroke-width: 5; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-tube { fill: var(--g2-tube); stroke: var(--g2-cyan); stroke-width: 2; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-tube-line { stroke: var(--g2-tube-line); stroke-width: 2; stroke-dasharray: 4 10; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-node { fill: var(--g2-bg); stroke: var(--g2-ink-2); stroke-width: 2.5; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-bar { fill: var(--g2-bar); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-bar2 { fill: var(--g2-bar-2); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-fhot { fill: var(--g2-hot); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-fcy { fill: var(--g2-cyan); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-fink { fill: var(--g2-ink); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-fbg { fill: var(--g2-bg); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-fdark { fill: var(--navy-900); }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-pulse { fill: none; stroke: var(--g2-cyan); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100; opacity: 0; }
:is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-pulse--hot { stroke: var(--g2-hot); }
.e013 .e013-ring2 { transform: scale(.78); }
.e013 .e013-btn { fill: var(--g2-hot); }
.e013 .e013-okring { opacity: 0; }
.e017 .e017-log { fill: none; stroke: var(--g2-cyan); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 6 14; }
.e017 .e017-area { fill: var(--g2-soft-c); }
.e017 .e017-scan { fill: var(--g2-cyan); opacity: 0; }
.e017 .e017-ping { opacity: 0; }
.e017 .e017-hl { fill: var(--g2-soft-o); }
.e017 .e017-hlbar { fill: var(--mx-orange-55-t); }
.e018 .e018-spark2 { opacity: .85; }
.e019 .e019-h2 { opacity: .55; }
.e019 .e019-img { opacity: .35; }
.e019 .e019-hl { fill: var(--g2-soft-o); stroke: var(--g2-hot); stroke-width: 1.5; }
.e019 .e019-title { fill: var(--g2-ink-2); opacity: .55; }
.e019 .e019-ctaring { opacity: 0; }
.e019 .e019-click { opacity: 0; }
.e020 .e020-ping { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-pulse { animation: g02-flow var(--g2-dur) linear infinite; }
  .e011 .e011-b { transform-box: fill-box; transform-origin: center; animation: g02-pop var(--g2-dur) linear infinite; }
  .e011 .e011-shield { transform-box: fill-box; transform-origin: center; animation: g02-breathe 4s ease-in-out infinite; }
  .e012 { --g2-dur: 3.2s; }
  .e012 .e012-back { animation-duration: 4.8s; }
  .e012 .e012-restore { transform-box: fill-box; transform-origin: center; animation: g02-spin-ccw 6s linear infinite; }
  .e012 .e012-blk { animation: g02-blink var(--g2-dur) ease-in-out infinite; }
  .e012 .e012-led { animation: g02-blink 1.6s ease-in-out infinite; }
  .e013 { --g2-dur: 7s; }
  .e013 .e013-dots circle { animation: g02-e013-dot 7s linear infinite; }
  .e013 .e013-dots circle:nth-child(2) { animation-delay: .25s; }
  .e013 .e013-dots circle:nth-child(3) { animation-delay: .5s; }
  .e013 .e013-dots circle:nth-child(4) { animation-delay: .75s; }
  .e013 .e013-dots circle:nth-child(5) { animation-delay: 1s; }
  .e013 .e013-dots circle:nth-child(6) { animation-delay: 1.25s; }
  .e013 .e013-go { animation: g02-e013-go 7s linear infinite; }
  .e013 .e013-back { animation: g02-e013-back 7s linear infinite; }
  .e013 .e013-ok { animation: g02-e013-ok 7s ease-in-out infinite; }
  .e013 .e013-okring { transform-box: fill-box; transform-origin: center; animation: g02-e013-okring 7s ease-out infinite; }
  .e013 .e013-check { stroke-dasharray: 100; animation: g02-e013-check 7s ease-out infinite; }
  .e013 .e013-btn { animation: g02-e013-btn 7s ease infinite; }
  .e013 .e013-okb { transform-box: fill-box; transform-origin: center; animation: g02-e013-okb 7s ease infinite; }
  .e013 .e013-ring { animation: g02-ripple 3.5s ease-out infinite; }
  .e013 .e013-ring2 { animation-delay: -1.75s; }
  .e013 .e013-lock { animation: g02-bob 4s ease-in-out infinite; }
  .e014 { --g2-dur: 3.3s; }
  .e014 .e014-pk { animation: g02-e014-pk var(--g2-dur) linear infinite; }
  .e014 .e014-lock { animation: g02-bob 4s ease-in-out infinite; }
  .e014 .e014-lit { animation: g02-blink 3s ease-in-out infinite; }
  .e014 .e014-x { animation: g02-blink 2.4s ease-in-out infinite; }
  .e016 { --g2-dur: 3s; }
  .e016 .e016-led { animation: g02-blink 1.2s steps(2, jump-none) infinite; }
  .e016 .e016-in { animation: g02-blink var(--g2-dur) ease-in-out infinite; }
  .e017 .e017-log { animation: g02-march 1.4s linear infinite; }
  .e017 .e017-rows { animation: g02-e017-scroll 9s linear infinite; }
  .e017 .e017-scan { animation: g02-e017-scan 4s linear infinite; }
  .e017 .e017-ping { transform-box: fill-box; transform-origin: center; animation: g02-ping 2s ease-out infinite; }
  .e017 .e017-led { animation: g02-blink 1.8s ease-in-out infinite; }
  .e018 .e018-orbit { transform-box: fill-box; transform-origin: center; animation: g02-spin 24s linear infinite; }
  .e018 .e018-spark { transform-box: fill-box; transform-origin: center; animation: g02-breathe 3.2s ease-in-out infinite; }
  .e018 .e018-spark2 { transform-box: fill-box; transform-origin: center; animation: g02-twinkle 2.4s ease-in-out infinite; }
  .e018 .e018-done { transform-box: fill-box; transform-origin: center; animation: g02-pop var(--g2-dur) linear infinite; }
  .e019 .e019-row { animation: g02-e019-row 8s ease-out infinite; }
  .e019 .e019-r2 { animation-delay: .4s; }
  .e019 .e019-r3 { animation-delay: .8s; }
  .e019 .e019-r4 { animation-delay: 1.2s; }
  .e019 .e019-click { transform-box: fill-box; transform-origin: center; animation: g02-e019-click 8s ease-out infinite; }
  .e019 .e019-go { animation: g02-e019-go 8s linear infinite; }
  .e019 .e019-ctaring { animation: g02-e019-cta 8s ease-out infinite; }
  .e019 .e019-h1 { transform-box: fill-box; transform-origin: 0 50%; animation: g02-e019-grow 8s var(--ease) infinite; }
  .e019 .e019-caret { animation: g02-caret 1.1s linear infinite; }
  .e020 { --g2-dur: 4.2s; }
  .e020 .e020-hubring { transform-box: fill-box; transform-origin: center; animation: g02-spin 30s linear infinite; }
  .e020 .e020-ping { transform-box: fill-box; transform-origin: center; animation: g02-ping-s 2.1s ease-out infinite; }
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-ph1 { animation-delay: calc(var(--g2-dur) * -1 / 6); }
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-ph2 { animation-delay: calc(var(--g2-dur) * -2 / 6); }
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-ph3 { animation-delay: calc(var(--g2-dur) * -3 / 6); }
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-ph4 { animation-delay: calc(var(--g2-dur) * -4 / 6); }
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-ph5 { animation-delay: calc(var(--g2-dur) * -5 / 6); }
  :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020) .g2-media.is-paused * { animation-play-state: paused; }
}
@keyframes g02-flow { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: 7; opacity: 0; } }
@keyframes g02-pop { 0%, 84% { transform: scale(1); } 91% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes g02-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes g02-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes g02-ripple { 0% { transform: scale(.1); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes g02-spin { to { transform: rotate(360deg); } }
@keyframes g02-spin-ccw { to { transform: rotate(-360deg); } }
@keyframes g02-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes g02-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes g02-ping-s { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes g02-march { to { stroke-dashoffset: -40; } }
@keyframes g02-twinkle { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes g02-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes g02-e013-dot { 0% { opacity: 0; } 3% { opacity: 1; } 80% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes g02-e013-go { 0%, 26% { stroke-dashoffset: 100; opacity: 0; } 28% { opacity: 1; } 40% { opacity: 1; } 42%, 100% { stroke-dashoffset: 7; opacity: 0; } }
@keyframes g02-e013-back { 0%, 56% { stroke-dashoffset: 100; opacity: 0; } 58% { opacity: 1; } 70% { opacity: 1; } 72%, 100% { stroke-dashoffset: 7; opacity: 0; } }
@keyframes g02-e013-ok { 0%, 40% { opacity: .5; } 45%, 58% { opacity: 1; } 64%, 100% { opacity: .5; } }
@keyframes g02-e013-okring { 0%, 42% { opacity: 0; transform: scale(.9); } 46% { opacity: 1; } 58%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes g02-e013-check { 0%, 44% { stroke-dashoffset: 100; } 52%, 90% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 100; } }
@keyframes g02-e013-btn { 0%, 70% { fill: var(--g2-bar-2); } 74%, 92% { fill: var(--g2-hot); } 97%, 100% { fill: var(--g2-bar-2); } }
@keyframes g02-e013-okb { 0%, 70% { opacity: 0; transform: scale(.4); } 75% { opacity: 1; transform: scale(1.15); } 78%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes g02-e014-pk { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(196px); opacity: 0; } }
@keyframes g02-e017-scroll { to { transform: translateY(-168px); } }
@keyframes g02-e017-scan { 0% { transform: translateX(0); opacity: 0; } 8%, 92% { opacity: .7; } 100% { transform: translateX(302px); opacity: 0; } }
@keyframes g02-e019-row { 0% { opacity: 0; transform: translateY(8px); } 6%, 90% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes g02-e019-click { 0%, 34% { opacity: 0; transform: scale(.4); } 38% { opacity: 1; } 50%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes g02-e019-go { 0%, 40% { stroke-dashoffset: 100; opacity: 0; } 42% { opacity: 1; } 56% { opacity: 1; } 58%, 100% { stroke-dashoffset: 7; opacity: 0; } }
@keyframes g02-e019-cta { 0%, 56% { opacity: 0; } 60%, 82% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes g02-e019-grow { 0% { transform: scaleX(.15); } 14%, 92% { transform: scaleX(1); } 100% { transform: scaleX(.15); } }

/* ===== g04: E031, E032 ===== */
:is(.e031, .e032) { --g4-ink: var(--navy); --g4-mute: var(--muted); --g4-kick: var(--blue); --g4-ico: var(--blue); --g4-line: var(--line-light); --g4-focus: var(--blue); --g4-link: var(--blue); --g4-r: 20px; --g4-tint: var(--mx-blue-9-white); --g4-tint-2: var(--mx-blue-16-white); --g4-shadow: 0 22px 44px -30px var(--mx-navy-55-t), 0 2px 8px -4px var(--mx-navy-14-t); --g4-rail: linear-gradient(90deg, var(--blue), var(--cyan)); --g4-todo-bg: var(--mx-orange-9-white); --g4-todo-line: var(--orange); --g4-todo-ink: var(--navy); position: relative; padding: clamp(56px, 7vw, 100px) 0; background: var(--paper); color: var(--g4-ink); }
:is(.e031, .e032) :focus-visible { outline: 2px solid var(--g4-focus); outline-offset: 3px; border-radius: 4px; }
:is(.e031, .e032) .g4-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--g4-kick); }
:is(.e031, .e032) .g4-kicker::before { content: ""; flex: none; width: 18px; height: 2px; border-radius: 2px; background: var(--grad-accent); }
:is(.e031, .e032) .g4-claim { margin: 0; font: 700 clamp(26px, 2.6vw, 40px)/1.14 var(--display); letter-spacing: -.02em; color: var(--g4-ink); text-wrap: balance; overflow-wrap: break-word; }
:is(.e031, .e032) .g4-body { margin: 18px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.65; color: var(--g4-mute); text-wrap: pretty; }
:is(.e031, .e032) .g4-note { margin: 16px 0 0; }
:is(.e031, .e032) .g4-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
:is(.e031, .e032) .g4-tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--g4-ink); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; text-decoration: underline 1px var(--g4-line); text-underline-offset: 6px; }
:is(.e031, .e032) .g4-tel:hover { text-decoration-color: var(--orange); }
:is(.e031, .e032) .g4-link { color: var(--g4-link); font-weight: 600; text-decoration: underline 1px; text-underline-offset: 4px; }
:is(.e031, .e032) .g4-link:hover { text-decoration-thickness: 2px; }
:is(.e031, .e032) .g4-ico { display: block; width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:is(.e031, .e032) .todo { display: inline; padding: 2px 7px; border: 1.5px dashed var(--g4-todo-line); border-radius: 6px; background: var(--g4-todo-bg); color: var(--g4-todo-ink); font: 500 12.5px/1.95 var(--mono); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(.e031, .e032) .g4-lr { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vw, 48px); align-items: center; }
:is(.e031, .e032) .g4-copy { min-width: 0; }
@media (min-width: 900px) {
  :is(.e031, .e032) .g4-lr { grid-template-columns: minmax(0, var(--g4-a, 5fr)) minmax(0, var(--g4-b, 7fr)); column-gap: clamp(40px, 5.5vw, 96px); }
  :is(.e031, .e032) .g4-lr--flip > .g4-copy { grid-column: 2; grid-row: 1; }
  :is(.e031, .e032) .g4-lr--flip > :not(.g4-copy) { grid-column: 1; grid-row: 1; }
}
.e031 .e031__card { container: e031card / inline-size; min-width: 0; padding: clamp(20px, 3vw, 32px); background: var(--white); border: 1px solid var(--line-light); border-radius: var(--g4-r); box-shadow: var(--g4-shadow); }
.e031 .e031__cap { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.e031 .e031__cap::before { content: ""; flex: none; width: 16px; height: 2px; border-radius: 2px; background: var(--g4-rail); }
.e031 .e031__list { display: grid; column-gap: 28px; margin: 0; padding: 0; list-style: none; }
@container e031card (min-width: 520px) {
  .e031 .e031__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.e031 .e031__list > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line-light); }
.e031 .e031__tick { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: var(--g4-tint); color: var(--blue); }
.e031 .e031__tick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.e031 .e031__txt { min-width: 0; }
.e031 .e031__txt strong { display: block; font: 700 16px/1.35 var(--display); color: var(--navy); }
.e031 .e031__txt > span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .e031.g4-armed .e031__tick path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .e031.g4-armed .e031__tick { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-light); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
  .e031.is-in .e031__tick { background: var(--g4-tint); box-shadow: inset 0 0 0 1.5px transparent; }
  .e031.is-in .e031__tick path { animation: e031-draw .45s var(--ease) forwards; }
  .e031.is-in .e031__list > li:nth-child(1) :is(.e031__tick, .e031__tick path) { transition-delay: .15s; animation-delay: .15s; }
  .e031.is-in .e031__list > li:nth-child(2) :is(.e031__tick, .e031__tick path) { transition-delay: .3s; animation-delay: .3s; }
  .e031.is-in .e031__list > li:nth-child(3) :is(.e031__tick, .e031__tick path) { transition-delay: .45s; animation-delay: .45s; }
  .e031.is-in .e031__list > li:nth-child(4) :is(.e031__tick, .e031__tick path) { transition-delay: .6s; animation-delay: .6s; }
  .e031.is-in .e031__list > li:nth-child(5) :is(.e031__tick, .e031__tick path) { transition-delay: .75s; animation-delay: .75s; }
  .e031.is-in .e031__list > li:nth-child(6) :is(.e031__tick, .e031__tick path) { transition-delay: .9s; animation-delay: .9s; }
  .e031.is-in .e031__list > li:nth-child(7) :is(.e031__tick, .e031__tick path) { transition-delay: 1.05s; animation-delay: 1.05s; }
  .e031.is-in .e031__list > li:nth-child(8) :is(.e031__tick, .e031__tick path) { transition-delay: 1.2s; animation-delay: 1.2s; }
  @keyframes e031-draw { to { stroke-dashoffset: 0; } }
}
.e032 { --e032-gap: clamp(28px, 4vw, 48px); padding: clamp(44px, 5.5vw, 76px) 0; background: var(--white); border-block: 1px solid var(--line-light); }
.e032 .e032__head { max-width: 760px; margin-bottom: clamp(26px, 3.5vw, 40px); }
.e032 .e032__title { margin: 0; font: 700 clamp(22px, 2vw, 30px)/1.2 var(--display); letter-spacing: -.015em; color: var(--navy); text-wrap: balance; }
.e032 .e032__body { position: relative; }
.e032 .e032__strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin: 0; padding: 0; list-style: none; }
.e032 .e032__cell { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; align-content: start; }
.e032 .e032__cell > :not(.e032__ico) { grid-column: 2; }
.e032 .e032__ico { position: relative; z-index: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--white); border: 1px solid var(--line-light); color: var(--blue); box-shadow: 0 0 0 6px var(--white), var(--g4-shadow); }
.e032 .e032__label { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.e032 .e032__name { margin-top: 6px; font: 700 18px/1.3 var(--display); color: var(--navy); }
.e032 .e032__line { margin-top: 4px; font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 36ch; }
.e032 .e032__cell:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: -30px; width: 2px; background: linear-gradient(var(--blue), var(--cyan)); opacity: .35; }
.e032 .e032__rail { display: none; }
@media (min-width: 760px) {
  .e032 .e032__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e032-gap); }
  .e032 .e032__cell { grid-template-columns: minmax(0, 1fr); }
  .e032 .e032__cell > :not(.e032__ico) { grid-column: 1; }
  .e032 .e032__ico { grid-row: auto; margin-bottom: 14px; }
  .e032 .e032__cell::before { display: none; }
  .e032 .e032__rail { display: block; position: absolute; top: 25px; height: 2px; left: 26px; right: calc((100% - 2 * var(--e032-gap)) / 3 - 26px); background: var(--g4-rail); opacity: .9; }
  .e032 .e032__run { position: absolute; inset: 0; }
  .e032 .e032__run i { position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--grad-accent); box-shadow: 0 0 0 4px var(--mx-orange-2-28-t); opacity: 0; }
}
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  .e032 .e032__run { animation: e032-run 7s cubic-bezier(.45, 0, .25, 1) infinite; }
  .e032 .e032__run i { animation: e032-dot 7s linear infinite; }
  @keyframes e032-run { 0%, 8% { transform: translateX(0); } 46%, 54% { transform: translateX(50%); } 92%, 100% { transform: translateX(100%); } }
  @keyframes e032-dot { 0% { opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 99%, 100% { opacity: 0; } }
}
:is(.e032).g4-off * { animation-play-state: paused !important; }
@media (forced-colors: active) {
  :is(.e031, .e032) .todo { border-color: CanvasText; }
}

/* ===== g05: E041, E048 ===== */
:is(.e041, .e048) { --g5-shadow: 0 18px 40px -30px var(--mx-navy-55-t); --g5-line: var(--mx-blue-34-t); position: relative; padding: clamp(56px, 8vw, 108px) 0; color: var(--navy); background: var(--paper); }
:is(.e041, .e048) [hidden] { display: none !important; }
:is(.e041, .e048) .eyebrow { margin-bottom: 14px; color: var(--blue); }
:is(.e041, .e048) .g5-claim { margin: 0; font: 700 clamp(26px, 2.6vw, 40px)/1.14 var(--display); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; overflow-wrap: break-word; }
:is(.e041, .e048) .g5-lead { margin: 16px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.65; color: var(--muted); }
:is(.e041, .e048) .g5-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
:is(.e041, .e048) .g5-tel { flex-basis: 100%; margin: 0; font: 500 13px/1.6 var(--mono); letter-spacing: .02em; color: var(--muted); }
:is(.e041, .e048) .g5-tel a { display: inline-flex; align-items: center; min-height: 28px; color: inherit; text-decoration: underline 1px; text-underline-offset: 4px; white-space: nowrap; }
:is(.e041, .e048) .g5-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--blue); text-decoration: underline 1.5px; text-underline-offset: 5px; }
:is(.e041, .e048) .g5-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:is(.e041, .e048) :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
:is(.e041, .e048) .todo { display: inline-block; max-width: 100%; vertical-align: baseline; padding: 1px 6px; border-radius: 6px; outline: 1.5px dashed var(--orange); outline-offset: 0; background: var(--mx-orange-9-white); color: var(--navy); font: 500 12.5px/1.5 var(--mono); letter-spacing: 0; overflow-wrap: anywhere; }
:is(.e048) { overflow: hidden; isolation: isolate; background: var(--card-dark); background-color: var(--navy-900); color: var(--on-dark); }
:is(.e048) > canvas.waves { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
:is(.e048) > .wrap { position: relative; z-index: 1; }
:is(.e048) .eyebrow { color: var(--cyan); }
:is(.e048) .g5-claim { color: var(--on-dark); }
:is(.e048) .g5-lead,
:is(.e048) .g5-tel { color: var(--on-dark-2); }
:is(.e048) .g5-ico { stroke: var(--orange-2); }
:is(.e048) :focus-visible { outline-color: var(--cyan); }
:is(.e048) .todo { background: var(--mx-orange-18-t); color: var(--on-dark); }
@media (prefers-reduced-motion: reduce) {
  :is(.e048) > canvas.waves { display: none; }
}
.e041 { --e041-node: 44px; --e041-gap: 18px; --e041-glow: var(--orange-2); }
.e041-head { max-width: 720px; }
.e041 .e041-steps { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; display: grid; gap: var(--e041-gap); }
.e041-step { position: relative; display: flex; flex-direction: column; min-width: 0; padding-left: calc(var(--e041-node) + 18px); }
.e041-node { position: absolute; left: 0; top: 0; z-index: 1; width: var(--e041-node); height: var(--e041-node); border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 2px solid var(--blue); color: var(--blue); font: 700 16px/1 var(--display); box-shadow: 0 0 0 6px var(--paper); }
.e041-step:not(:last-child)::before,
.e041-step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--e041-node) / 2 - 1px); top: calc(var(--e041-node) / 2); width: 2px; height: calc(100% + var(--e041-gap)); }
.e041-step:not(:last-child)::before { background: var(--g5-line); }
.e041-step:not(:last-child)::after { opacity: 0; background: linear-gradient(180deg, transparent, var(--e041-glow), transparent) 0 -200% / 100% 45% no-repeat; }
.e041-card { flex: 1 1 auto; min-width: 0; padding: 16px 18px 18px; background: var(--white); border: 1px solid var(--line-light); border-radius: 20px; box-shadow: var(--g5-shadow); }
.e041-h { margin: 0 0 6px; font: 700 17px/1.3 var(--display); letter-spacing: -.01em; color: var(--navy); }
.e041-p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.e041-meta { margin: 12px 0 0; line-height: 1.3; }
@media (min-width: 900px) {
  .e041 { --e041-gap: 20px; }
  .e041 .e041-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .e041-step { padding-left: 0; padding-top: calc(var(--e041-node) + 18px); }
  .e041-step:not(:last-child)::before,
.e041-step:not(:last-child)::after { left: calc(var(--e041-node) / 2); top: calc(var(--e041-node) / 2 - 1px); width: calc(100% + var(--e041-gap)); height: 2px; }
  .e041-step:not(:last-child)::after { background: linear-gradient(90deg, transparent, var(--e041-glow), transparent) -200% 0 / 45% 100% no-repeat; }
}
@media (prefers-reduced-motion: no-preference) {
  .e041-step:not(:last-child)::after { opacity: 1; animation: e041-run-y 6s linear infinite; animation-delay: var(--e041-d, 0s); }
  .e041-step:nth-child(2) { --e041-d: 1.2s; }
  .e041-step:nth-child(3) { --e041-d: 2.4s; }
  .e041-step:nth-child(4) { --e041-d: 3.6s; }
  @keyframes e041-run-y { 0% { background-position: 0 -200%; } 20%, 100% { background-position: 0 300%; } }
  @keyframes e041-run-x { 0% { background-position: -200% 0; } 20%, 100% { background-position: 300% 0; } }
  .e041-card { transition: transform .25s var(--ease), border-color .25s; }
  .e041-card:hover { transform: translateY(-2px); border-color: var(--blue); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .e041-step:not(:last-child)::after { animation-name: e041-run-x; }
}
.e048 { --e048-old-bg: var(--mx-navy-900-82-muted); --e048-old-ink: var(--mx-on-dark-2-78-t); --e048-new-glow: var(--mx-cyan-16-t); --e048-new-fill: var(--mx-cyan-12-t); --e048-note: var(--mx-orange-2-55-t); }
.e048-grid { display: grid; gap: 40px; }
.e048-copy,
.e048-compare { min-width: 0; }
.e048-stage { display: grid; gap: 12px; }
.e048-layer { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; border: 1px solid var(--line-dark); }
.e048-layer--old { background: var(--e048-old-bg); }
.e048-layer--new { background: radial-gradient(90% 80% at 18% 12%, var(--e048-new-glow), transparent 62%), var(--navy); }
.e048-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.e048-layer--old .e048-svg { stroke: var(--e048-old-ink); }
.e048-layer--old .f { fill: var(--mx-on-dark-2-7-t); }
.e048-layer--old .nf { fill: var(--e048-note); stroke: var(--orange-2); }
.e048-layer--old .e048-warn,
.e048-layer--old .warn { stroke: var(--orange); }
.e048-broken { stroke-dasharray: 7 9; }
.e048-layer--new .e048-svg { stroke: var(--cyan); }
.e048-layer--new .f { fill: var(--e048-new-fill); }
.e048-layer--new .a { stroke: var(--orange-2); }
.e048-layer--new .lk { fill: var(--navy); stroke: var(--orange-2); }
.e048-run { stroke-dasharray: 2 14; stroke-width: 4; }
.e048-flow { stroke-dasharray: 5 8; }
.e048-year { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 5px 10px; border-radius: 999px; font: 600 12.5px/1 var(--mono); letter-spacing: .06em; color: var(--on-dark); background: var(--navy-ink-80); border: 1px solid var(--line-dark-2); }
.e048-divider,
.e048-handle { display: none; }
@media (min-width: 560px) {
  .e048-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.e048-compare.is-live .e048-stage { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; border: 1px solid var(--line-dark-2); cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.e048-compare.is-live .e048-layer { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.e048-compare.is-live .e048-layer--new { z-index: 1; clip-path: inset(0 calc((100 - var(--p, 50)) * 1%) 0 0); }
.e048-compare.is-live .e048-layer--old .e048-year { left: auto; right: 10px; }
.e048-compare.is-live .e048-divider { display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--p, 50) * 1%); z-index: 2; width: 2px; transform: translateX(-1px); background: var(--orange-2); box-shadow: 0 0 12px var(--orange-shadow); pointer-events: none; }
.e048-compare.is-live .e048-handle { display: grid; place-items: center; position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; border-radius: 50%; left: clamp(24px, calc(var(--p, 50) * 1%), calc(100% - 24px)); transform: translate(-50%, -50%); pointer-events: none; background: var(--grad-accent); box-shadow: 0 8px 22px -8px var(--shadow-deep), inset 0 1px 0 var(--inset-hi); }
.e048-handle svg { width: 22px; height: 22px; fill: none; stroke: var(--navy-900); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.e048-compare.is-dragging .e048-handle { cursor: grabbing; }
.e048-ctl { margin-top: 12px; }
.e048-ctl-row { display: flex; align-items: center; gap: 12px; }
.e048-ctl-y { flex: none; font: 600 13px/1 var(--mono); letter-spacing: .04em; color: var(--on-dark-2); }
.e048-range { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.e048-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--line-dark-2); }
.e048-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-dark-2); }
.e048-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--orange-2); border: 3px solid var(--navy-900); }
.e048-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--orange-2); border: 3px solid var(--navy-900); }
.e048-range:focus-visible { outline: none; }
.e048-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--cyan); outline-offset: 3px; }
.e048-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--cyan); outline-offset: 3px; }
.e048-compare:has(.e048-range:focus-visible) .e048-handle { outline: 2px solid var(--cyan); outline-offset: 3px; }
.e048-hint { margin: 2px 0 0; font: 500 12.5px/1.5 var(--mono); color: var(--on-dark-2); }
.e048-caps { display: grid; gap: 18px 28px; margin-top: 22px; }
.e048-cap-h { margin: 0 0 8px; font: 700 13px/1 var(--mono); letter-spacing: .12em; color: var(--on-dark); }
.e048-cap--old .e048-cap-h { color: var(--orange-2); }
.e048-cap--new .e048-cap-h { color: var(--cyan); }
.e048-cap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.e048-cap li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--on-dark-2); }
.e048-cap--old li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 10px; height: 2px; border-radius: 2px; background: var(--orange); }
.e048-cap--new li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 5px; height: 9px; border: solid var(--cyan); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (min-width: 480px) {
  .e048-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .e048-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .e048-note { transform-box: fill-box; transform-origin: 50% 0; animation: e048-note 4s ease-in-out infinite; }
  @keyframes e048-note { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(10deg); } }
  .e048-warn { animation: e048-blink 2.4s ease-in-out infinite; }
  @keyframes e048-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  .e048-run { animation: e048-run 1.2s linear infinite; }
  @keyframes e048-run { to { stroke-dashoffset: -32; } }
  .e048-flow { animation: e048-flow 1.3s linear infinite; }
  @keyframes e048-flow { to { stroke-dashoffset: -26; } }
  .e048-compare.is-live:not(.is-dragging) .e048-handle { transition: scale .15s ease-out; }
  .e048-compare.is-live .e048-stage:hover .e048-handle { scale: 1.08; }
}
@media (prefers-reduced-motion: reduce) {
  .e048-layer--old .e048-note { transform: rotate(6deg); transform-box: fill-box; transform-origin: 50% 0; }
}

/* ===== g07: E061 ===== */
:is(.e061) { --g07-shadow: 0 22px 44px -30px var(--mx-navy-42-t); --g07-shadow-sm: 0 12px 26px -20px var(--mx-navy-40-t); --g07-art-line: var(--mx-blue-16-line-light); --g07-orange-ink: var(--mx-orange-60-navy-900); --g07-teal-ink: var(--mx-cyan-50-navy-900); --g07-kicker: var(--blue); --g07-claim: var(--navy); --g07-body: var(--muted); --g07-todo-ink: var(--navy); --g07-todo-bg: var(--mx-orange-2-16-t); --g07-focus: var(--blue); position: relative; padding: clamp(56px, 7.5vw, 104px) 0; color: var(--navy); overflow-wrap: break-word; }
:is(.e061) :focus-visible { outline: 2px solid var(--g07-focus); outline-offset: 3px; }
:is(.e061) .g07-kicker { margin: 0 0 14px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--g07-kicker); }
:is(.e061) .g07-claim { margin: 0; font: 700 clamp(26px, 2.6vw, 40px)/1.14 var(--display); letter-spacing: -.02em; color: var(--g07-claim); text-wrap: balance; }
:is(.e061) .g07-lead { max-width: 60ch; margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--g07-body); }
:is(.e061) .g07-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
:is(.e061) .g07-tel { font: 500 14px/1.3 var(--mono); letter-spacing: .02em; color: var(--g07-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.e061) mark.todo { display: inline-block; max-width: 100%; padding: 2px 8px; border: 1.5px dashed var(--orange); border-radius: 6px; background: var(--g07-todo-bg); color: var(--g07-todo-ink); font: 500 13px/1.5 var(--mono); letter-spacing: 0; vertical-align: 1px; }
:is(.e061) .g07-art { margin: 0; min-width: 0; }
:is(.e061) .g07-art svg { width: 100%; height: auto; max-width: 440px; margin-inline: auto; overflow: visible; }
:is(.e061) .g07-art svg { filter: drop-shadow(0 18px 26px var(--mx-navy-12-t)); }
:is(.e061) .g07-art .a-card { fill: var(--white); stroke: var(--line-light); stroke-width: 1.5; }
:is(.e061) .g07-art .a-line { fill: none; stroke: var(--g07-art-line); stroke-width: 8; stroke-linecap: round; }
:is(.e061) .g07-art .a-blue { fill: none; stroke: var(--blue); stroke-width: 8; stroke-linecap: round; }
:is(.e061) .g07-art .a-ink { fill: none; stroke: var(--navy-900); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
:is(.e061) .g07-art .a-orange-fill { fill: var(--orange-2); }
:is(.e061) .g07-art .a-s1 { stop-color: var(--orange); }
:is(.e061) .g07-art .a-s2 { stop-color: var(--orange-2); }
:is(.e061) .g07-art.g07-off * { animation-play-state: paused; }
.e061 { background: var(--paper); }
.e061__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.e061__side { display: contents; }
.e061__head { order: 1; min-width: 0; }
.e061__list { order: 2; min-width: 0; }
.e061__art { order: 3; }
.e061__art svg { max-width: 340px; }
.e061 .a-soft { fill: var(--blue-soft); stroke: var(--mx-blue-26-line-light); stroke-width: 1.5; }
.e061 .a-ink-dot { fill: var(--navy-900); }
.e061 .a-grad-fill { fill: url(#e061-g); }
.e061 .a-blue { stroke-dasharray: 100; stroke-dashoffset: 0; }
.e061__item { background: var(--white); border: 1px solid var(--line-light); border-radius: 18px; box-shadow: var(--g07-shadow-sm); }
.e061__item + .e061__item { margin-top: 12px; }
.e061__item > summary { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 16px 18px; border-radius: 18px; cursor: pointer; list-style: none; }
.e061__item > summary::-webkit-details-marker { display: none; }
.e061__n { flex: none; min-width: 2.2ch; font: 500 13px/1 var(--mono); color: var(--blue); }
.e061__q { flex: 1 1 auto; min-width: 0; margin: 0; font: 700 17px/1.4 var(--display); letter-spacing: -.005em; color: var(--navy); }
.e061__pm { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); }
.e061__pm::before,
.e061__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--blue); }
.e061__pm::after { transform: rotate(90deg); }
.e061__item > summary:hover .e061__q { color: var(--blue); }
.e061__item[open] { border-color: var(--mx-blue-40-line-light); }
.e061__item[open] .e061__pm { background: var(--blue); }
.e061__item[open] .e061__pm::before,
.e061__item[open] .e061__pm::after { background: var(--white); }
.e061__item[open] .e061__pm::after { transform: rotate(0deg); }
.e061__a { padding: 0 20px 20px calc(18px + 2.2ch + 14px); }
.e061__a p { max-width: 62ch; margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.65; }
@media (min-width: 900px) {
  .e061__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .e061__side { display: block; position: sticky; top: 32px; min-width: 0; }
  .e061__art { margin-top: 40px; }
  .e061__art svg { margin-inline: 0; }
}
@media (max-width: 480px) {
  .e061__item > summary { gap: 10px; padding: 14px 14px; }
  .e061__n { display: none; }
  .e061__a { padding: 0 16px 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .e061__pm::after,
.e061__pm { transition: transform .25s var(--ease), background-color .2s; }
  .e061__q { transition: color .15s; }
  .e061__qb { animation: e061-float 6s ease-in-out infinite; }
  .e061 .e061__l1,
.e061 .e061__l2,
.e061 .e061__l3 { animation: e061-draw 6s var(--ease) infinite both; }
  .e061 .e061__l2 { animation-delay: .3s; }
  .e061 .e061__l3 { animation-delay: .6s; }
  .e061__ok { transform-box: fill-box; transform-origin: center; animation: e061-ok 6s var(--ease) infinite both; }
  @keyframes e061-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes e061-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 28% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes e061-ok { 0%, 34% { transform: scale(0); opacity: 0; } 42% { transform: scale(1.12); opacity: 1; } 48%, 86% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(.85); opacity: 0; } }
}

/* ===== g08: E072, E080 ===== */
:is(.e072, .e080) { --g8-shadow: 0 24px 48px -32px var(--mx-navy-55-t), 0 2px 8px -4px var(--mx-navy-12-t); --g8-soft: var(--mx-blue-soft-55-paper); --g8-wire: var(--mx-blue-34-line-light); --g8-dots: var(--mx-blue-16-white); --g8-todo-bg: var(--mx-orange-9-white); --g8-link-line: var(--mx-blue-35-t); --g8-acc: var(--orange); --g8-acc-26-white: var(--mx-orange-26-white); display: block; color: var(--navy); font: 400 17px/1.65 var(--text); }
:is(.e072, .e080) .g8-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
:is(.e072, .e080) .g8-claim { margin: 0; font: 700 clamp(26px, 2.6vw, 40px)/1.14 var(--display); letter-spacing: -.02em; color: var(--navy); overflow-wrap: break-word; text-wrap: balance; }
:is(.e072, .e080) .g8-h3 { margin: 0; font: 700 clamp(21px, 1.8vw, 27px)/1.22 var(--display); letter-spacing: -.015em; color: var(--navy); overflow-wrap: break-word; }
:is(.e072, .e080) .g8-body { margin: 14px 0 0; max-width: 56ch; color: var(--muted); font-size: 17px; line-height: 1.65; overflow-wrap: break-word; }
:is(.e072, .e080) .g8-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:is(.e072, .e080) .g8-arr,
:is(.e072, .e080) .g8-ext { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:is(.e072, .e080) .g8-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
:is(.e072, .e080) .g8-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--blue); font: 600 16px/1.3 var(--text); text-decoration: underline 1.5px var(--g8-link-line); text-underline-offset: 6px; }
:is(.e072, .e080) .g8-link:hover { text-decoration-color: var(--blue); }
:is(.e072, .e080) a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
:is(.e072, .e080) mark.todo { display: inline-block; max-width: 100%; vertical-align: baseline; padding: .1em .45em; border: 1.5px dashed var(--orange); border-radius: 6px; background: var(--g8-todo-bg); color: var(--navy); font: 500 13px/1.9 var(--mono); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(.e072, .e080) .g8-claim mark.todo { font-size: max(13px, .42em); line-height: 2; vertical-align: .18em; }
:is(.e072, .e080) .g8-dark { position: relative; isolation: isolate; overflow: hidden; background: var(--card-dark); background-color: var(--navy-900); color: var(--on-dark); }
:is(.e072, .e080) .g8-dark > canvas.waves { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
:is(.e072, .e080) .g8-dark > :not(canvas) { position: relative; z-index: 1; }
:is(.e072, .e080) .g8-dark .g8-kicker { color: var(--cyan); }
:is(.e072, .e080) .g8-dark .g8-claim { color: var(--on-dark); }
:is(.e072, .e080) .g8-dark .g8-body { color: var(--on-dark-2); }
:is(.e072, .e080) .g8-dark .g8-ico { stroke: var(--orange-2); }
:is(.e072, .e080) .g8-dark mark.todo { color: var(--on-dark); border-color: var(--orange-2); background: var(--mx-orange-2-12-t); }
:is(.e072, .e080) .g8-dark a:focus-visible { outline-color: var(--orange-2); }
:is(.e072, .e080) .g8-art { position: relative; display: block; margin: 0; overflow: hidden; border: 1px solid var(--line-light); border-radius: 20px; box-shadow: var(--g8-shadow); background: radial-gradient(circle, var(--g8-dots) 1.2px, transparent 1.7px) 0 0 / 22px 22px, var(--white); }
:is(.e072, .e080) .g8-art svg { display: block; width: 100%; height: auto; }
:is(.e072, .e080) .g8-art .a-halo { fill: var(--mx-blue-soft-75-white); }
:is(.e072, .e080) .g8-art .a-halo--warm { fill: var(--mx-orange-7-white); }
:is(.e072, .e080) .g8-art .a-wire { stroke: var(--g8-wire); stroke-width: 2; }
:is(.e072, .e080) .g8-art .a-faint { opacity: .55; }
:is(.e072, .e080) .g8-art .a-crawl { stroke-dasharray: 5 9; }
:is(.e072, .e080) .g8-art .a-ring { stroke-dasharray: 3 12; }
:is(.e072, .e080) .g8-art .a-dev { fill: var(--white); stroke: var(--blue); stroke-width: 2; }
:is(.e072, .e080) .g8-art .a-scr { fill: var(--g8-soft); }
:is(.e072, .e080) .g8-art .a-ink { stroke: var(--blue); stroke-width: 2; }
:is(.e072, .e080) .g8-art .a-inkfill { fill: var(--blue); }
:is(.e072, .e080) .g8-art .a-warm { stroke: var(--orange); stroke-width: 2.5; }
:is(.e072, .e080) .g8-art .a-hot { fill: var(--orange); }
:is(.e072, .e080) .g8-art .a-ghost { opacity: .7; }
:is(.e072, .e080) .g8-art .a-ghost .a-ink { stroke-dasharray: 4 6; }
:is(.e072, .e080) .g8-art .a-led { fill: var(--line-light); }
:is(.e072, .e080) .g8-art .a-seq { fill: var(--white); stroke: var(--g8-wire); stroke-width: 2; }
:is(.e072, .e080) .g8-art .a-shield { fill: var(--g8-soft); stroke: var(--blue); stroke-width: 2.5; }
:is(.e072, .e080) .g8-art .a-check { stroke: var(--orange); stroke-width: 7; stroke-dasharray: 100; }
:is(.e072, .e080) .g8-art .a-check-sm { stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 100; }
:is(.e072, .e080) .g8-art .a-okfill { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 2; }
:is(.e072, .e080) .g8-art .a-pingring { stroke: var(--cyan); stroke-width: 2; opacity: 0; }
:is(.e072, .e080) .g8-art .a-soft,
:is(.e072, .e080) .g8-art .a-hero { fill: var(--g8-soft); }
:is(.e072, .e080) .g8-art .a-line,
:is(.e072, .e080) .g8-art .a-mute { fill: var(--line-light); }
:is(.e072, .e080) .g8-art .a-strong { fill: var(--g8-wire); }
:is(.e072, .e080) .g8-art .a-acc { fill: var(--orange); }
:is(.e072, .e080) .g8-art .a-card { fill: var(--white); stroke: var(--line-light); stroke-width: 1.5; }
:is(.e072, .e080) .g8-art .a-heart { stroke: var(--blue); stroke-width: 2.5; }
:is(.e072, .e080) .g8-art .a-cursor { fill: var(--white); stroke: var(--navy); stroke-width: 1.5; }
:is(.e072, .e080) .g8-art .a-pulse { stroke: var(--orange); stroke-width: 4.5; stroke-dasharray: 3 97; stroke-dashoffset: 100; opacity: 0; }
:is(.e072, .e080) .g8-art .a-pulse--c { stroke: var(--cyan); }
:is(.e072, .e080) .g8-art .a-pulse--long { stroke: var(--cyan); stroke-width: 3.5; stroke-dasharray: 14 86; }
:is(.e072, .e080) .g8-art .c-win { fill: var(--white); stroke: var(--line-light); stroke-width: 1.5; }
:is(.e072, .e080) .g8-art .c-bar { stroke: var(--line-light); stroke-width: 1.5; }
:is(.e072, .e080) .g8-art .c-dot,
:is(.e072, .e080) .g8-art .c-line { fill: var(--line-light); }
:is(.e072, .e080) .g8-art .c-strong { fill: var(--g8-wire); }
:is(.e072, .e080) .g8-art .c-soft { fill: var(--g8-soft); }
:is(.e072, .e080) .g8-art .c-card { fill: var(--white); stroke: var(--line-light); stroke-width: 1.5; }
:is(.e072, .e080) .g8-art .c-acc { fill: var(--g8-acc); }
:is(.e072, .e080) .g8-art .c-acc-soft { fill: var(--g8-acc-26-white); }
:is(.e072, .e080) .g8-art .c-ring { stroke: var(--g8-acc); stroke-width: 2.5; }
:is(.e072, .e080) .g8-art .c-wire { stroke: var(--g8-wire); stroke-width: 2; }
:is(.e072, .e080) .g8-art .c-pulse { stroke: var(--g8-acc); }
:is(.e072, .e080) .g8-art .c-ping { stroke: var(--g8-acc); stroke-width: 2; opacity: 0; }
:is(.e072, .e080) .g8-art .c-on-acc { stroke: var(--white); stroke-width: 2; }
:is(.e072, .e080) .g8-art--dark { border-color: var(--glass-line); box-shadow: none; background: radial-gradient(circle, var(--line-dark) 1.2px, transparent 1.7px) 0 0 / 22px 22px, var(--glass); }
:is(.e072, .e080) .g8-art--dark .a-halo { fill: var(--cyan-ring); }
:is(.e072, .e080) .g8-art--dark .a-wire { stroke: var(--line-dark-2); }
:is(.e072, .e080) .g8-art--dark .a-dev { fill: var(--disc-core); stroke: var(--cyan-line); }
:is(.e072, .e080) .g8-art--dark .a-ink { stroke: var(--on-dark-2); }
:is(.e072, .e080) .g8-art--dark .a-mute,
:is(.e072, .e080) .g8-art--dark .a-line { fill: var(--line-dark-2); }
:is(.e072, .e080) .g8-art--dark .a-hero { fill: var(--mx-orange-2-12-t); }
:is(.e072, .e080) .g8-art--dark .a-strong { fill: var(--mx-on-dark-72-t); }
:is(.e072, .e080) .g8-art--dark .a-card { fill: var(--glass); stroke: var(--glass-line); }
:is(.e072, .e080) .g8-art--dark .a-soft { fill: var(--cyan-glow); }
:is(.e072, .e080) .g8-art--dark .a-cursor { fill: var(--on-dark); stroke: var(--navy-900); }
@keyframes g8-crawl { to { stroke-dashoffset: -28; } }
@keyframes g8-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes g8-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes g8-led { 0%, 100% { fill: var(--line-light); } 50% { fill: var(--cyan); } }
@keyframes g8-seq { 0% { fill: var(--white); stroke: var(--g8-wire); } 8%, 70% { fill: var(--orange); stroke: var(--orange); } 80%, 100% { fill: var(--white); stroke: var(--g8-wire); } }
@keyframes g8-spin { to { transform: rotate(360deg); } }
@keyframes g8-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes g8-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 30%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes g8-ping { 0% { opacity: .75; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes g8-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: no-preference) {
  :is(.e072, .e080) .g8-art .a-crawl { animation: g8-crawl 3.2s linear infinite; }
  :is(.e072, .e080) .g8-art .a-pulse { opacity: 1; animation: g8-flow 3.2s linear infinite; }
  :is(.e072, .e080) .g8-art .a-blink { animation: g8-blink 2.4s ease-in-out infinite; }
  :is(.e072, .e080) .g8-art .a-led { animation: g8-led 2.4s ease-in-out infinite; }
  :is(.e072, .e080) .g8-art .a-seq { animation: g8-seq 6.4s linear infinite; }
  :is(.e072, .e080) .g8-art .a-spin { transform-box: fill-box; transform-origin: center; animation: g8-spin 40s linear infinite; }
  :is(.e072, .e080) .g8-art .a-spin.a-slow { animation-duration: 12s; }
  :is(.e072, .e080) .g8-art .a-float { transform-box: fill-box; transform-origin: center; animation: g8-float 5s ease-in-out infinite; }
  :is(.e072, .e080) .g8-art .a-draw { animation: g8-draw 6s ease-in-out infinite; }
  :is(.e072, .e080) .g8-art .a-ping { transform-box: fill-box; transform-origin: center; animation: g8-ping 2.8s ease-out infinite; }
  :is(.e072, .e080) .g8-art .a-sway { transform-box: fill-box; transform-origin: 50% 12%; animation: g8-sway 4s ease-in-out infinite; }
  :is(.e072, .e080) .g8-art .dl1 { animation-delay: -.4s; }
  :is(.e072, .e080) .g8-art .dl2 { animation-delay: -.8s; }
  :is(.e072, .e080) .g8-art .dl3 { animation-delay: -1.2s; }
  :is(.e072, .e080) .g8-art .dl4 { animation-delay: -1.6s; }
  :is(.e072, .e080) .g8-art .dl5 { animation-delay: -2s; }
  :is(.e072, .e080) .g8-art .dl6 { animation-delay: -2.4s; }
  :is(.e072, .e080) .g8-art .dl7 { animation-delay: -2.8s; }
  :is(.e072, .e080) .g8-art.g8-off * { animation-play-state: paused; }
  :is(.e072, .e080) .g8-link .g8-arr { transition: transform .2s var(--ease); }
  :is(.e072, .e080) .g8-link:hover .g8-arr { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.e072, .e080) .g8-dark > canvas.waves { display: none; }
}
.e072 { padding: clamp(56px, 8vw, 104px) 0; background: var(--paper); }
.e072 .e072__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.e072 .e072__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.e072 .e072__card { display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--line-light); border-radius: 20px; box-shadow: var(--g8-shadow); overflow: hidden; }
.e072 .e072__cover { border: 0; border-bottom: 1px solid var(--line-light); border-radius: 0; box-shadow: none; background: radial-gradient(circle, var(--g8-dots) 1.2px, transparent 1.7px) 0 0 / 22px 22px, var(--g8-soft); }
.e072 .e072__cover--a { --g8-acc: var(--orange); --g8-acc-26-white: var(--mx-orange-26-white); }
.e072 .e072__cover--b { --g8-acc: var(--blue); --g8-acc-26-white: var(--mx-blue-26-white); }
.e072 .e072__cover--c { --g8-acc: var(--cyan); --g8-acc-26-white: var(--mx-cyan-26-white); }
.e072 .e072__cover--d { --g8-acc: var(--orange-2); --g8-acc-26-white: var(--mx-orange-2-26-white); }
.e072 .e072__body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 20px 22px 22px; min-width: 0; }
.e072 .e072__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.e072 .e072__tags li { padding: 5px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font: 600 12.5px/1.2 var(--text); }
.e072 .e072__name { margin: 0; font: 700 21px/1.25 var(--display); letter-spacing: -.01em; overflow-wrap: break-word; }
.e072 .e072__name a { color: var(--navy); text-decoration: underline 2px transparent; text-underline-offset: 5px; }
.e072 .e072__name a:hover { color: var(--blue); text-decoration-color: currentColor; }
.e072 .e072__dl { display: grid; gap: 10px; margin: 0; }
.e072 .e072__dl dt { font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.e072 .e072__dl dd { margin: 3px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--navy); }
.e072 .e072__site { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 100%; color: var(--blue); font: 600 15px/1.3 var(--text); text-decoration: underline 1.5px var(--g8-link-line); text-underline-offset: 5px; overflow-wrap: anywhere; }
.e072 .e072__site:hover { text-decoration-color: var(--blue); }
@media (min-width: 640px) {
  .e072 .e072__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1180px) {
  .e072 .e072__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .e072 .e072__card { transition: transform .25s var(--ease), border-color .25s; }
  .e072 .e072__card:hover { transform: translateY(-3px); border-color: var(--g8-wire); }
}
.e080 { padding: clamp(40px, 6vw, 80px) 0; background: var(--paper); }
.e080 .e080__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 22px; padding: 18px 18px 18px 20px; background: var(--white); border: 1px solid var(--line-light); border-radius: 20px; box-shadow: var(--g8-shadow); color: var(--navy); text-decoration: none; }
.e080 .e080__card:focus-visible { outline-offset: 4px; border-radius: 20px; }
.e080 .e080__thumb { display: none; border-radius: 12px; box-shadow: none; background: radial-gradient(circle, var(--g8-dots) 1.2px, transparent 1.7px) 0 0 / 22px 22px, var(--g8-soft); }
.e080 .e080__txt { display: grid; gap: 4px; min-width: 0; }
.e080 .e080__txt .g8-kicker { margin: 0; }
.e080 .e080__h { font: 700 clamp(19px, 1.7vw, 24px)/1.25 var(--display); letter-spacing: -.01em; color: var(--navy); overflow-wrap: break-word; }
.e080 .e080__p { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.e080 .e080__go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--grad-accent); }
.e080 .e080__go svg { width: 22px; height: 22px; fill: none; stroke: var(--navy-900); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.e080 .e080__card:hover { border-color: var(--g8-wire); }
.e080 .e080__pn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.e080 .e080__pn a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; border: 1px solid var(--line-light); border-radius: 16px; background: var(--white); color: var(--navy); text-decoration: none; }
.e080 .e080__pn a:hover { border-color: var(--g8-wire); }
.e080 .e080__pn a > span { display: grid; gap: 2px; min-width: 0; }
.e080 .e080__next { justify-content: flex-end; text-align: right; }
.e080 .e080__dir { font: 500 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.e080 .e080__name { font: 700 17px/1.3 var(--display); color: var(--navy); overflow-wrap: break-word; }
@media (min-width: 560px) {
  .e080 .e080__card { grid-template-columns: 132px minmax(0, 1fr) auto; padding: 18px 24px 18px 18px; }
  .e080 .e080__thumb { display: block; }
  .e080 .e080__pn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .e080 .e080__card,
.e080 .e080__pn a { transition: border-color .2s, transform .2s var(--ease); }
  .e080 .e080__card:hover { transform: translateY(-2px); }
  .e080 .e080__go svg { transition: transform .2s var(--ease); }
  .e080 .e080__card:hover .e080__go svg { transform: translateX(3px); }
}

/* ===== g09: E081 ===== */
.e081 { --g09-todo-bg: var(--mx-orange-2-12-t); --g09-shadow: var(--mx-navy-16-t); --g09-field-line: var(--mx-muted-80-white); --g09-soft: var(--mx-blue-soft-70-white); }
.e081 .todo { padding: 1px 5px; border: 1.5px dashed var(--orange); border-radius: 6px; background: var(--g09-todo-bg); color: inherit; font: 500 12.5px/1.75 var(--mono); letter-spacing: 0; overflow-wrap: anywhere; }
.e081 :focus-visible { outline-color: var(--orange-2); }
.e081 .e081-kicker { margin: 0; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.e081 .e081-kicker { color: var(--cyan); }
.e081 .e081-claim { margin: 12px 0 16px; font: 700 clamp(26px, 2.6vw, 40px)/1.12 var(--display); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; overflow-wrap: break-word; }
.e081 .e081-claim { color: var(--on-dark); }
.e081 { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 8vw, 112px) 0; color: var(--on-dark); background: var(--card-dark); background-color: var(--navy-900); }
.e081 > canvas.waves { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
.e081 > .wrap { position: relative; z-index: 1; }
.e081 .e081-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.e081 .e081-copy { min-width: 0; }
.e081 .e081-lead { margin: 0; max-width: 52ch; color: var(--on-dark-2); }
.e081 .e081-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.e081 .e081-mail { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--on-dark); font-weight: 600; text-decoration: underline 1px var(--line-dark-2); text-underline-offset: 6px; overflow-wrap: anywhere; }
.e081 .e081-mail:hover { text-decoration-color: var(--orange-2); }
.e081 .e081-i { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--orange-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.e081 .e081-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0 0; padding: 0; list-style: none; font: 500 13px/1.5 var(--mono); letter-spacing: .03em; color: var(--on-dark-2); }
.e081 .e081-meta li { min-width: 0; }
.e081 .e081-media { min-width: 0; }
.e081 .e081-art { width: 100%; max-width: 540px; height: auto; margin: 0 auto; overflow: visible; }
.e081 .e081-glow-a { stop-color: var(--cyan); stop-opacity: .2; }
.e081 .e081-glow-b { stop-color: var(--cyan); stop-opacity: 0; }
.e081 .e081-bld-body { fill: var(--glass); stroke: var(--glass-line); stroke-width: 1.5; }
.e081 .e081-bld-roof { fill: none; stroke: var(--glass-line); stroke-width: 1.5; }
.e081 .e081-win { fill: var(--line-dark); }
.e081 .e081-win--on { fill: var(--orange-2); }
.e081 .e081-door { fill: var(--glass-hover); }
.e081 .e081-orbit-ring { fill: none; stroke: var(--line-dark); stroke-width: 1.5; stroke-dasharray: 2 8; }
.e081 .e081-orbit { transform-box: view-box; transform-origin: 404px 210px; }
.e081 .e081-dot { fill: var(--orange-2); }
.e081 .e081-dot--c { fill: var(--cyan); }
.e081 .e081-line { fill: none; stroke: var(--hub-line); stroke-width: 2; stroke-dasharray: 5 7; }
.e081 .e081-pulse { fill: none; stroke: var(--orange-2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 98; stroke-dashoffset: 100; opacity: 0; }
.e081 .e081-pulse--2 { stroke: var(--cyan); }
.e081 .e081-ring { fill: none; stroke: var(--cyan-line); stroke-width: 1; opacity: .6; }
.e081 .e081-ripple { fill: none; stroke: var(--cyan); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.e081 .e081-disc { fill: var(--disc-core); stroke: var(--cyan-line); stroke-width: 1.5; }
.e081 .e081-hs { fill: none; stroke: var(--orange-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
@media (min-width: 861px) {
  .e081 .e081-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
}
@media (prefers-reduced-motion: no-preference) {
  .e081 .e081-pulse { opacity: 1; animation: e081-flow 3.2s linear infinite; }
  .e081 .e081-pulse--2 { animation-delay: -1.6s; }
  .e081 .e081-ripple { animation: e081-ripple 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
  .e081 .e081-ripple--2 { animation-delay: 1.2s; }
  .e081 .e081-ripple--3 { animation-delay: 2.4s; }
  .e081 .e081-hs { animation: e081-ring 3.6s ease-in-out infinite; }
  .e081 .e081-orbit { animation: e081-spin 48s linear infinite; }
  .e081 .e081-win--on { animation: e081-blink 4.8s ease-in-out infinite; }
  .e081 .e081-win--late { animation-delay: -2.4s; }
  .e081 .e081-mail { transition: text-decoration-color .15s; }
}
@media (prefers-reduced-motion: reduce) {
  .e081 > canvas.waves { display: none; }
}
@keyframes e081-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes e081-ripple { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.85); opacity: 0; } }
@keyframes e081-ring { 0%, 68%, 100% { transform: rotate(0); } 72% { transform: rotate(-12deg); } 76% { transform: rotate(10deg); } 80% { transform: rotate(-8deg); } 84% { transform: rotate(6deg); } 88% { transform: rotate(0); } }
@keyframes e081-spin { to { transform: rotate(360deg); } }
@keyframes e081-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ===== g10: E100 ===== */
.e100 { --g10-shadow: var(--mx-navy-7-t); --g10-shadow-2: var(--mx-navy-16-t); --g10-muted-line: var(--mx-muted-45-t); --g10-blue-line: var(--mx-blue-45-t); --g10-orange-soft: var(--mx-orange-16-t); --g10-todo-bg: var(--mx-orange-2-20-t); position: relative; color: var(--navy); }
:is(.e100).g10-band { padding: clamp(56px, 7vw, 96px) 0; }
:is(.e100).g10-band--paper { background: var(--paper); }
:is(.e100).g10-band--white { background: var(--white); }
:is(.e100).g10-dark { isolation: isolate; overflow: hidden; padding: clamp(64px, 8vw, 112px) 0; color: var(--on-dark); background: var(--card-dark); background-color: var(--navy-900); }
:is(.e100).g10-dark > canvas.waves { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
:is(.e100).g10-dark > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  :is(.e100).g10-dark > canvas.waves { display: none; }
}
:is(.e100) .g10-head { max-width: 720px; margin-bottom: clamp(28px, 3.6vw, 48px); }
:is(.e100) .g10-kicker { margin: 0 0 14px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
:is(.e100).g10-dark .g10-kicker { color: var(--cyan); }
:is(.e100) .g10-claim { margin: 0; font: 700 clamp(26px, 2.6vw, 40px)/1.14 var(--display); letter-spacing: -.02em; color: var(--navy); overflow-wrap: break-word; text-wrap: balance; }
:is(.e100).g10-dark .g10-claim { color: var(--on-dark); }
:is(.e100) .g10-lead { max-width: 60ch; margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--muted); }
:is(.e100).g10-dark .g10-lead { color: var(--on-dark-2); }
:is(.e100) .g10-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.e100).g10-dark .g10-ico { stroke: var(--orange-2); }
:is(.e100) .g10-card { background: var(--white); border: 1px solid var(--line-light); border-radius: 20px; box-shadow: 0 1px 2px var(--g10-shadow), 0 18px 40px -24px var(--g10-shadow-2); }
:is(.e100) .g10-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
:is(.e100) .g10-tel { color: var(--navy); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: underline 1.5px var(--g10-blue-line); text-underline-offset: 5px; }
:is(.e100) .g10-tel:hover { text-decoration-color: var(--orange); }
:is(.e100).g10-dark .g10-tel { color: var(--on-dark); text-decoration-color: var(--line-dark-2); }
:is(.e100).g10-dark .g10-tel:hover { text-decoration-color: var(--orange-2); }
:is(.e100) .g10-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; color: var(--blue); font-weight: 600; text-decoration: underline 1.5px transparent; text-underline-offset: 5px; }
:is(.e100) .g10-link:hover { text-decoration-color: currentColor; }
:is(.e100) .g10-link .g10-ico { width: 18px; height: 18px; stroke: currentColor; }
:is(.e100) :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
:is(.e100).g10-dark :focus-visible { outline-color: var(--orange-2); }
:is(.e100) .todo { display: inline-block; max-width: 100%; padding: 1px 7px; border: 1.5px dashed var(--orange); border-radius: 6px; background: var(--g10-todo-bg); color: var(--navy); font: 500 12.5px/1.6 var(--mono); letter-spacing: 0; overflow-wrap: anywhere; vertical-align: baseline; }
:is(.e100).g10-dark .todo { color: var(--on-dark); border-color: var(--orange-2); }
:is(.e100) .g10-svg { display: block; width: 100%; height: auto; overflow: visible; }
:is(.e100) .g10-f-soft { fill: var(--blue-soft); }
:is(.e100) .g10-f-white { fill: var(--white); }
:is(.e100) .g10-f-paper { fill: var(--paper); }
:is(.e100) .g10-f-line { fill: var(--line-light); }
:is(.e100) .g10-f-blue { fill: var(--blue); }
:is(.e100) .g10-f-orange { fill: var(--orange); }
:is(.e100) .g10-f-orange2 { fill: var(--orange-2); }
:is(.e100) .g10-f-orange-soft { fill: var(--g10-orange-soft); }
:is(.e100) .g10-f-navy { fill: var(--navy); }
:is(.e100) .g10-f-glass { fill: var(--glass); }
:is(.e100) .g10-f-glass-line { fill: var(--glass-line); }
:is(.e100) .g10-s-line { stroke: var(--line-light); }
:is(.e100) .g10-s-soft { stroke: var(--blue-soft); }
:is(.e100) .g10-s-muted { stroke: var(--g10-muted-line); }
:is(.e100) .g10-s-blue { stroke: var(--blue); }
:is(.e100) .g10-s-orange { stroke: var(--orange); }
:is(.e100) .g10-s-orange2 { stroke: var(--orange-2); }
:is(.e100) .g10-s-cyan { stroke: var(--cyan); }
:is(.e100) .g10-s-cyan-line { stroke: var(--cyan-line); }
:is(.e100) .g10-s-navy { stroke: var(--navy); }
:is(.e100) .g10-s-white { stroke: var(--white); }
:is(.e100) .g10-s-glass { stroke: var(--glass-line); }
.e100 path.e100__flow { stroke-dasharray: 1 99; stroke-dashoffset: 100; opacity: 0; }
@keyframes g10-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.e100.g10-dark { padding: clamp(40px, 5vw, 72px) 0 clamp(52px, 6vw, 88px); }
.e100 .e100__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.e100 .e100__copy { min-width: 0; }
.e100 .e100__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; width: fit-content; max-width: 100%; margin: 0 0 clamp(20px, 3vw, 32px); padding: 4px 6px; list-style: none; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-line); }
.e100 .e100__crumbs li { display: inline-flex; align-items: center; font: 500 14px/1.3 var(--text); color: var(--on-dark-2); }
.e100 .e100__crumbs li + li::before { content: "›"; content: "›" / ""; margin: 0 2px; color: var(--on-dark-2); }
.e100 .e100__crumbs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: 8px; color: var(--on-dark); text-decoration: underline 1px var(--line-dark-2); text-underline-offset: 4px; }
.e100 .e100__crumbs a:hover { text-decoration-color: var(--orange-2); }
.e100 .e100__crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; font-weight: 600; color: var(--orange-2); }
.e100 .e100__title { margin: 0; font: 700 clamp(32px, 3.8vw, 54px)/1.08 var(--display); letter-spacing: -.025em; color: var(--on-dark); overflow-wrap: break-word; text-wrap: balance; }
.e100 .g10-lead { max-width: 46ch; font-size: clamp(17px, 1.3vw, 19px); }
.e100 .e100__meta { margin: 18px 0 0; }
.e100 .e100__tag { display: inline-flex; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-dark-2); font: 500 12.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--on-dark-2); }
.e100 .e100__media { width: 100%; max-width: 460px; margin: 0 auto; }
.e100 .e100__ring { transform-box: fill-box; transform-origin: center; opacity: .6; }
.e100 .e100__ring--b { opacity: 0; }
@media (min-width: 900px) {
  .e100 .e100__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 5vw, 80px); }
}
@media (prefers-reduced-motion: no-preference) {
  .e100 path.e100__flow { opacity: 1; animation: g10-flow 3.2s linear infinite; }
  .e100 .e100__ring { animation: e100-ring 3s ease-out infinite; }
  .e100 .e100__ring--b { animation-delay: 1.5s; }
  @keyframes e100-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
}