/* Frosted "UI cards" that float over the template's art (HTML versions of the template's PNG panels).
   Everything is sized in container units so a card scales with its slot exactly like the images did. */
.glass { container-type: inline-size; }
.glass > .g { width: 100%; height: 100%; border-radius: 3.2cqw; background: rgba(128, 124, 118, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .16); padding: 5.4cqw 4.8cqw; display: flex; flex-direction: column; gap: 3.4cqw; color: #f3f1ef; overflow: hidden;
  font-family: "General Sans", sans-serif; font-weight: 400; }
.g .hd { display: flex; justify-content: space-between; align-items: center; font-size: 3.1cqw; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.g .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; }
.g .dot { display: inline-flex; align-items: center; gap: 1.6cqw; }
.g .dot::before { content: ""; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #8fd6a8; }
.g .dot.lav::before { background: #b9aef5; } .g .dot.red::before { background: #e39393; } .g .dot.blue::before { background: #4a6ff5; }
.g .rows { display: flex; flex-direction: column; }
.g .row { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; padding: 2.7cqw 0; border-top: 1px solid rgba(255,255,255,.12); }
.g .row:first-child { border-top: 0; padding-top: 0; }
.g .k { font-size: 3.9cqw; color: #fff; }
.g .k small { display: block; font-size: 3cqw; color: rgba(255,255,255,.7); margin-top: .6cqw; }
.g .v { font-size: 3.9cqw; color: #fff; text-align: right; }
.g .v small { display: block; font-size: 3cqw; margin-top: .6cqw; }
.g .up { color: #8fd6a8; } .g .down { color: #e39393; } .g .lavc { color: #c6bcf8; } .g .dim { color: rgba(255,255,255,.62); } .g .bluec { color: #6f8cff; }
.g .big { font-size: 9cqw; line-height: 1; color: #fff; }
.g .note { border-radius: 2.6cqw; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); padding: 3.4cqw; font-size: 3.2cqw; line-height: 1.45; color: rgba(255,255,255,.72); }
.g .note b { display: block; font-weight: 400; font-size: 2.9cqw; text-transform: uppercase; letter-spacing: .02em; color: #c6bcf8; margin-bottom: 1.2cqw; }
.g .redact { display: inline-block; height: 3.2cqw; border-radius: .8cqw; background: #0d0d0d; vertical-align: middle; }
.g .chip { font-size: 2.9cqw; padding: 1.2cqw 2.6cqw; border-radius: 1.6cqw; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); text-transform: uppercase; }
.g .chip.ok { color: #8fd6a8; background: rgba(143,214,168,.1); border-color: rgba(143,214,168,.22); }
.g .chip.no { color: #e39393; background: rgba(227,147,147,.1); border-color: rgba(227,147,147,.22); }
.g .bar { height: 1.4cqw; border-radius: 1cqw; background: rgba(255,255,255,.12); overflow: hidden; }
.g .bar > i { display: block; height: 100%; border-radius: inherit; background: #e7e5e4; }
.g .seg { display: flex; gap: .6cqw; }
.g .seg > i { flex: 1; height: 2.2cqw; border-radius: .6cqw; background: rgba(255,255,255,.14); }
.g .seg > i.c { background: rgba(74,111,245,.55); } .g .seg > i.r { background: rgba(185,174,245,.6); } .g .seg > i.now { background: #fff; }
.g .foot { display: flex; justify-content: space-between; font-size: 2.9cqw; text-transform: uppercase; letter-spacing: .02em; color: rgba(255,255,255,.7); }
.g { gap: 2.6cqw !important; }
.g .row { padding: 2.1cqw 0; }
.g .note { padding: 2.6cqw 3cqw; }
.feature-card .ui.glass, .steps-media .ui.glass { aspect-ratio: auto !important; height: auto; }
.glass > .g { height: auto; }