/* ===== agent-log cards (reference language) ===== */
        .eng-stage,
        #how .hw-figure,
        .alog {
          overflow-anchor: none;
        }

        .alog {
          position: relative;
          width: min(86%, 540px);
          background: #F6F4F3;
          border-radius: 16px;
          padding: 26px 28px 24px;
          box-shadow: 0 2px 6px rgba(6, 10, 40, .08), 0 36px 90px rgba(6, 10, 40, .30);
          font-family: var(--sans);
          color: #2F2C2B;
          text-align: left;
        }

        .alog .al-scene {
          display: none;
        }

        .alog .al-scene.on {
          display: block;
          animation: alScene .8s var(--ease-out-quint);
        }

        @keyframes alScene {
          from { opacity: 0; }
          to { opacity: 1; }
        }

        .al-head {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 16px;
        }

        .al-glyph {
          width: 20px;
          height: 20px;
          flex: none;
          margin-top: 1px;
        }

        .al-glyph svg {
          width: 100%;
          height: 100%;
          display: block;
          fill: var(--blue);
        }

        .al-title {
          font-size: 15.5px;
          font-weight: 500;
          line-height: 1.45;
          letter-spacing: .002em;
          color: #2F2C2B;
        }

        .al-time {
          margin-left: auto;
          flex: none;
          font-size: 12px;
          color: rgba(47, 44, 43, .45);
          padding-top: 2px;
        }

        .al-steps {
          display: flex;
          flex-direction: column;
        }

        .al-step {
          display: none;
          align-items: center;
          gap: 12px;
          padding: 9px 0;
          font-size: 14px;
          line-height: 1.4;
          color: #2F2C2B;
        }

        .al-step.show {
          display: flex;
          animation: alIn .85s var(--ease-out-quint) both;
        }

        @keyframes alIn {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: none; }
        }

        .al-logo {
          width: 17px;
          height: 17px;
          flex: none;
          display: grid;
          place-items: center;
        }

        .al-logo svg {
          width: 100%;
          height: 100%;
          display: block;
        }

        .al-step .mt,
        .al-sub .mt,
        .al-act .n {
          margin-left: auto;
          flex: none;
          font-size: 12.5px;
          color: rgba(47, 44, 43, .5);
        }

        .al-ic {
          position: relative;
          width: 18px;
          height: 18px;
          flex: none;
        }

        .al-ic i {
          position: absolute;
          inset: 0;
          opacity: 0;
          transition: opacity .4s var(--ease-out-quint);
        }

        .al-ic .pend {
          border: 1.4px dashed var(--load-track);
          border-radius: 50%;
        }

        .al-ic .spin {
          animation: alSpin var(--load-spin, .99s) linear infinite;
        }

        .al-ic .spin svg {
          width: 100%;
          height: 100%;
          display: block;
          stroke: var(--load-arc, rgba(47, 44, 43, .55));
        }

        @keyframes alSpin {
          to { transform: rotate(360deg); }
        }

        .al-ic .done {
          background: #2E9E55;
          border-radius: 50%;
          display: grid;
          place-items: center;
          transform: scale(.5);
          transition: opacity .45s var(--ease-out-quint), transform .5s var(--ease-out-quint);
        }

        .al-ic .done svg {
          width: 9px;
          height: 9px;
          stroke: #fff;
        }

        .al-step[data-state="pend"] .pend,
        .al-step[data-state="run"] .spin {
          opacity: 1;
        }

        .al-step[data-state="done"] .done {
          opacity: 1;
          transform: none;
        }

        .al-sub {
          position: relative;
          align-items: center;
          gap: 10px;
          background: #FCFAF9;
          border-radius: 10px;
          padding: 12px 14px;
          margin: 3px 0 3px 30px;
          font-size: 13.5px;
          color: #2F2C2B;
          display: none;
        }

        .al-sub.show {
          display: flex;
          animation: alIn .85s var(--ease-out-quint) both;
        }

        .al-sub::before {
          content: "";
          position: absolute;
          left: -21px;
          top: -8px;
          bottom: -8px;
          width: 1px;
          background: rgba(47, 44, 43, .12);
        }

        .al-sub svg {
          width: 14px;
          height: 14px;
          flex: none;
          stroke: rgba(47, 44, 43, .55);
        }

        .al-prog {
          height: 2px;
          border-radius: 2px;
          background: rgba(47, 44, 43, .1);
          margin-top: 20px;
          overflow: hidden;
        }

        .al-prog i {
          display: block;
          height: 100%;
          width: 0;
          border-radius: 2px;
          background: var(--blue);
        }

        .al-cap {
          margin-top: 10px;
          font-size: 12.5px;
          color: rgba(47, 44, 43, .5);
          transition: opacity .4s;
        }

        .al-act {
          align-items: center;
          gap: 10px;
          background: #FCFAF9;
          border-radius: 10px;
          padding: 13px 14px;
          margin-top: 8px;
          font-size: 13.5px;
          color: #2F2C2B;
          display: none;
        }

        .al-act.show {
          display: flex;
          animation: alIn .85s var(--ease-out-quint) both;
        }

        .al-act.dim {
          opacity: .4;
        }

        /* A piece revealed inside an existing surface, for a block that is one
           continuous thing rather than a stack of sub-rows. `:not(.show)` does
           the hiding rather than `display: none` + a `.show` override, because
           the parts are different kinds of box (a flex bubble, a grid strip)
           and each has to keep its own display once it is in. */
        .al-part:not(.show) {
          display: none;
        }

        .al-part.show {
          animation: alIn .85s var(--ease-out-quint) both;
        }

        .al-act svg {
          width: 14px;
          height: 14px;
          flex: none;
          stroke: rgba(47, 44, 43, .55);
        }

        .al-act .ch {
          margin-left: 2px;
        }

        /* big numeral, uplane display font */
        .al-num {
          font-family: var(--serif);
          font-weight: 500;
          font-size: clamp(42px, 4vw, 58px);
          line-height: 1.05;
          letter-spacing: 0;
          color: #232120;
          margin: 4px 0 18px;
          font-variant-numeric: lining-nums;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: 18px;
        }

        .al-num-val {
          display: flex;
          align-items: baseline;
          gap: 10px;
        }

        .al-num-lbl {
          font-family: var(--sans);
          font-weight: 400;
          font-size: 13.5px;
          color: rgba(47, 44, 43, .55);
          white-space: nowrap;
        }

        /* minimal ROAS chart: hairline baseline, blue line drawing upward */
        .al-chartmini {
          width: clamp(110px, 34%, 150px);
          height: auto;
          flex: none;
          margin-bottom: 6px;
        }

        .al-chartmini .draw {
          stroke-dasharray: 100;
          stroke-dashoffset: 100;
        }

        .al-chartmini .tip {
          opacity: 0;
        }

        .eng-panel.on .al-chartmini .draw {
          animation: alChartDraw 1.7s var(--ease-in-out-quart) .35s forwards;
        }

        .eng-panel.on .al-chartmini .tip {
          animation: alChartTip .5s ease-out 1.85s forwards;
        }

        @keyframes alChartDraw {
          to { stroke-dashoffset: 0; }
        }

        @keyframes alChartTip {
          to { opacity: 1; }
        }

        .al-num .cnt {
          font-family: inherit;
          font-weight: inherit;
        }