/* ============================================================
   ui-anima-demo.css — a live, self-playing UI-Anima session.
   Scoped under .ua-* (state classes too: .ua-on/.ua-done/…) ·
   window chrome + panel use site tokens (warm-light theme).
   The mock page INSIDE the window carries its own literal
   palette per skin — it is "someone else's website", so it may
   go white or dark while the site around it stays cream.
   Beats: chat conversation in the panel, per-skin morph+bind,
   navigation continuity (article page arrives already skinned,
   re-bound by destination), show-original hold.
   ============================================================ */
.ua-wrap { margin: var(--space-xl, 48px) auto 0; max-width: 1160px; }
.ua-wrap figcaption { margin-top: 14px; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .02em; color: var(--color-muted, #6c6b61); }

.ua-app {
  border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px);
  overflow: hidden; background: var(--color-bg, #f5f4ef); box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26,26,23,.14));
  font-family: var(--font-sans, sans-serif); color: var(--color-text, #1a1a17);
  --ua-ok: var(--accent, #d9542b);
}

/* ---- titlebar ---------------------------------------------- */
.ua-tb { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--color-surface, #eae7dd); border-bottom: 1px solid var(--color-border, #e0ddd1); min-width: 0; }
.ua-dots { display: flex; gap: 6px; flex: none; }
.ua-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border, #e0ddd1); }
.ua-url { flex: 1; min-width: 0; max-width: 470px; margin: 0 auto; text-align: center; font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--color-muted, #6c6b61); border: 1px solid var(--color-border, #e0ddd1); background: var(--color-surface, #eae7dd); border-radius: 999px; padding: 4px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-hud { flex: none; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--color-muted, #6c6b61); white-space: nowrap; opacity: 0; transition: opacity .4s; }
.ua-hud.ua-on { opacity: 1; }
.ua-hud b { font-weight: 600; color: var(--ua-ok); }
.ua-hud .ua-hud-i { color: var(--ua-inert, #a87b1c); font-weight: 600; }
.ua-status { flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--color-muted, #6c6b61); }
.ua-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border, #e0ddd1); transition: background .3s; }
.ua-app.ua-live .ua-status::before { background: var(--ua-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-ok) 22%, transparent); }

/* ---- stage (viewport) -------------------------------------- */
.ua-stage { position: relative; height: 640px; background: var(--color-bg, #f5f4ef); overflow: hidden; }

/* ---- the mock page ----------------------------------------- */
.ua-page { position: absolute; inset: 0; padding: 20px 292px 20px 24px; overflow: hidden; transition: background-color .5s ease, opacity .2s ease, transform .2s ease; }
.ua-page.ua-veil { opacity: .25; transform: scale(.993); }

.ua-mast { display: none; }
.ua-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ua-search { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; transition: background-color .4s, border-color .4s, border-radius .4s, padding .4s, box-shadow .4s; }
.ua-s-ic, .ua-s-q, .ua-s-btn { transition: color .4s, background-color .4s; }
.ua-s-q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-badge { flex: none; transition: all .4s; }
.ua-badge.ua-inert-mark { outline: 1.5px dashed var(--ua-inert, #a87b1c); outline-offset: 3px; opacity: .78; }
.ua-results { transition: gap .5s; min-width: 0; }
.ua-r { min-width: 0; transition: background-color .4s, border-color .4s, padding .4s, box-shadow .3s; }
.ua-bound-mark { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #d9542b) 40%, transparent); }
.ua-r-u, .ua-r-t, .ua-r-d { display: block; transition: color .4s, font-size .4s; }
.ua-related { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ua-rel { transition: all .4s; white-space: nowrap; }

/* ---- skin · plain (the original page) ---------------------- */
.ua-skin-plain { background: #ffffff; color: #202124; }
.ua-skin-plain .ua-search { border: 1px solid #dfe1e5; border-radius: 999px; padding: 9px 16px; background: #fff; box-shadow: 0 1px 5px rgba(32,33,36,.09); }
.ua-skin-plain .ua-s-ic { color: #9aa0a6; font-size: 14px; }
.ua-skin-plain .ua-s-q { color: #202124; font-size: 14px; }
.ua-skin-plain .ua-s-btn { font-size: 12.5px; color: #fff; background: #3b64c8; border-radius: 999px; padding: 5px 13px; }
.ua-skin-plain .ua-badge { background: #f1f3f4; color: #5f6368; border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.ua-skin-plain .ua-results { display: flex; flex-direction: column; gap: 15px; margin-top: 18px; }
.ua-skin-plain .ua-r-u { font-size: 12px; color: #1c7a4b; }
.ua-skin-plain .ua-r-t { color: #1a49b8; font-size: 15px; font-weight: 500; margin: 2px 0 3px; }
.ua-skin-plain .ua-r-d { color: #4d5156; font-size: 13px; line-height: 1.5; }
.ua-skin-plain .ua-r:nth-child(n+6) .ua-r-d { display: none; }
.ua-skin-plain .ua-related { margin-top: 18px; }
.ua-skin-plain .ua-rel { background: #f1f3f4; color: #3c4043; border-radius: 999px; padding: 6px 13px; font-size: 12.5px; }

/* ---- skin · print newspaper -------------------------------- */
.ua-skin-news { background: #f6f1e3; color: #241f14; }
.ua-skin-news .ua-mast { display: block; text-align: center; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 31px; letter-spacing: .13em; color: #241f14; border-bottom: 3px double #a4966f; padding-bottom: 10px; margin-bottom: 12px; }
.ua-skin-news .ua-mast::after { content: "Vol. XII · the reshaped edition · fair skies on the ridge"; display: block; font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #8a7c58; margin-top: 8px; }
.ua-skin-news .ua-head { border-bottom: 1px solid #d3c7a4; padding-bottom: 11px; }
.ua-skin-news .ua-search { border: none; border-bottom: 1px solid #b3a377; border-radius: 0; padding: 4px 2px; background: transparent; box-shadow: none; }
.ua-skin-news .ua-s-ic { color: #8a7c58; font-size: 13px; }
.ua-skin-news .ua-s-q { font-family: Georgia, serif; font-style: italic; font-size: 14px; color: #241f14; }
.ua-skin-news .ua-s-btn { font-family: Georgia, serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6d6041; background: transparent; border: 1px solid #b3a377; border-radius: 0; padding: 4px 10px; }
.ua-skin-news .ua-badge { font-family: Georgia, serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6d6041; background: transparent; border: 1px solid #b3a377; border-radius: 0; padding: 4px 10px; }
.ua-skin-news .ua-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin-top: 14px; }
.ua-skin-news .ua-r { border-top: 1px solid #d3c7a4; padding-top: 9px; }
.ua-skin-news .ua-r:first-child { grid-column: 1 / -1; border-top: none; padding-top: 2px; }
.ua-skin-news .ua-r-u { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8a7c58; }
.ua-skin-news .ua-r-t { font-family: Georgia, serif; font-size: 16px; line-height: 1.25; font-weight: 700; color: #241f14; margin: 4px 0 3px; }
.ua-skin-news .ua-r:first-child .ua-r-t { font-size: 22px; line-height: 1.15; }
.ua-skin-news .ua-r-d { font-family: Georgia, serif; font-size: 13px; line-height: 1.5; color: #5c5138; }
.ua-skin-news .ua-r:nth-child(n+4) .ua-r-d { display: none; }
.ua-skin-news .ua-related { border-top: 1px solid #d3c7a4; margin-top: 14px; padding-top: 10px; }
.ua-skin-news .ua-rel { background: transparent; border: none; padding: 0; font-family: Georgia, serif; font-style: italic; font-size: 12.5px; color: #6d6041; }
.ua-skin-news .ua-rel:not(:last-child)::after { content: "  ·"; color: #b3a377; }

/* ---- skin · calm dark dashboard ---------------------------- */
.ua-skin-dark { background: #15171c; color: #d6dae2; }
.ua-skin-dark .ua-mast { display: block; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #7fa8c9; margin-bottom: 14px; }
.ua-skin-dark .ua-mast::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: #7fa8c9; margin-right: 9px; vertical-align: -1px; }
.ua-skin-dark .ua-search { background: #1d2027; border: 1px solid #2a2f38; border-radius: 10px; padding: 9px 14px; box-shadow: none; }
.ua-skin-dark .ua-s-ic { color: #67707e; font-size: 14px; }
.ua-skin-dark .ua-s-q { color: #e6e9ef; font-size: 14px; }
.ua-skin-dark .ua-s-btn { font-size: 12.5px; color: #10141a; background: #7fa8c9; border-radius: 8px; padding: 5px 12px; }
.ua-skin-dark .ua-badge { background: #1d2027; border: 1px solid #2a2f38; color: #8b93a1; border-radius: 8px; padding: 6px 11px; font-size: 12px; }
.ua-skin-dark .ua-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ua-skin-dark .ua-r { background: #1b1e24; border: 1px solid #272c35; border-radius: 12px; padding: 12px 14px; }
.ua-skin-dark .ua-r:first-child { grid-column: 1 / -1; }
.ua-skin-dark .ua-r-u { font-family: var(--font-mono, monospace); font-size: 12px; color: #7fa8c9; }
.ua-skin-dark .ua-r-t { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: #e8ebf0; margin: 5px 0 4px; }
.ua-skin-dark .ua-r-d { font-size: 13px; line-height: 1.5; color: #98a0ad; }
.ua-skin-dark .ua-r:nth-child(n+4) .ua-r-d { display: none; }
.ua-skin-dark .ua-related { margin-top: 15px; }
.ua-skin-dark .ua-rel { background: #1d2027; border: 1px solid #2a2f38; color: #98a0ad; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }

/* ---- skin · reading gallery -------------------------------- */
.ua-skin-gallery { background: #faf7ef; color: #26221a; }
.ua-skin-gallery .ua-mast { display: block; font-family: Georgia, serif; font-style: italic; font-size: 22px; letter-spacing: .05em; color: #26221a; border-bottom: 1px solid #ddd5bd; padding-bottom: 10px; margin-bottom: 12px; }
.ua-skin-gallery .ua-search { border: none; border-bottom: 1px solid #d5cdb2; border-radius: 0; padding: 5px 2px; background: transparent; box-shadow: none; }
.ua-skin-gallery .ua-s-ic { color: #948a68; font-size: 13px; }
.ua-skin-gallery .ua-s-q { font-family: Georgia, serif; font-size: 14px; color: #26221a; }
.ua-skin-gallery .ua-s-btn { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6f6544; background: transparent; border: 1px solid #d5cdb2; border-radius: 999px; padding: 4px 11px; }
.ua-skin-gallery .ua-badge { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6f6544; background: #f2edda; border: none; border-radius: 999px; padding: 5px 11px; }
.ua-skin-gallery .ua-results { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 30px; margin-top: 14px; }
.ua-skin-gallery .ua-r { padding: 10px 0; border-top: 1px solid #e5deca; }
.ua-skin-gallery .ua-r:first-child { grid-row: span 4; border-top: none; background: #fffdf4; border: 1px solid #e5deca; border-radius: 4px; padding: 20px; margin-top: 10px; }
.ua-skin-gallery .ua-r-u { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #948a68; }
.ua-skin-gallery .ua-r-t { font-family: Georgia, serif; font-size: 15.5px; line-height: 1.3; font-weight: 700; color: #26221a; margin: 4px 0 3px; }
.ua-skin-gallery .ua-r:first-child .ua-r-t { font-size: 22px; line-height: 1.15; }
.ua-skin-gallery .ua-r-d { font-family: Georgia, serif; font-size: 13px; line-height: 1.55; color: #5e5640; }
.ua-skin-gallery .ua-r:not(:first-child) .ua-r-d { display: none; }
.ua-skin-gallery .ua-related { border-top: 1px solid #e5deca; margin-top: 12px; padding-top: 10px; }
.ua-skin-gallery .ua-rel { background: transparent; border: 1px solid #ddd5bd; border-radius: 999px; padding: 5px 12px; font-family: Georgia, serif; font-style: italic; font-size: 12.5px; color: #6f6544; }

/* ---- morph-in stagger -------------------------------------- */
.ua-page.ua-enter .ua-mast,
.ua-page.ua-enter .ua-head,
.ua-page.ua-enter .ua-r,
.ua-page.ua-enter .ua-related { animation: ua-rise .55s cubic-bezier(.22,.7,.25,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes ua-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- read-page scan ---------------------------------------- */
.ua-scanbar { position: absolute; left: 0; right: 0; top: 0; height: 44px; pointer-events: none; opacity: 0; z-index: 3;
  background: linear-gradient(180deg, transparent, var(--accent-soft, rgba(217,84,43,.1)) 55%, color-mix(in srgb, var(--accent, #d9542b) 28%, transparent) 98%, transparent);
  border-bottom: 1.5px solid var(--accent, #d9542b); transition: opacity .3s; }
.ua-app.ua-scan .ua-scanbar { opacity: .85; animation: ua-sweep 1.7s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes ua-sweep { from { transform: translateY(-48px); } to { transform: translateY(660px); } }
.ua-app.ua-scan .ua-r, .ua-app.ua-scan .ua-search, .ua-app.ua-scan .ua-badge { outline: 1px dashed color-mix(in srgb, var(--accent, #d9542b) 45%, transparent); outline-offset: 3px; }

/* ---- binding lines (SVG overlay) --------------------------- */
.ua-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; transition: opacity .3s; }
.ua-app.ua-orig-on .ua-links, .ua-app.ua-orig-on .ua-rail { opacity: 0; }

/* ---- original-elements rail -------------------------------- */
.ua-rail { position: absolute; top: 14px; right: 14px; width: 256px; background: var(--color-bg, #f5f4ef); border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px); box-shadow: var(--shadow-md, 0 10px 30px -12px rgba(26,26,23,.12)); z-index: 5; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .45s, transform .45s; }
.ua-rail.ua-on { opacity: 1; transform: none; }
.ua-rail-h { font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .11em; text-transform: uppercase; color: var(--color-muted, #6c6b61); padding: 10px 12px 8px; border-bottom: 1px solid var(--color-border, #e0ddd1); }
.ua-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-bottom: 1px solid var(--color-border, #e0ddd1); opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .35s; }
.ua-row:last-child { border-bottom: none; }
.ua-row.ua-on { opacity: 1; transform: none; }
.ua-row-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; background: var(--ua-ok); }
.ua-row.ua-inert .ua-row-dot { background: var(--ua-inert, #a87b1c); }
.ua-row-b { min-width: 0; flex: 1; }
.ua-row-n { font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.35; color: var(--color-text, #1a1a17); }
.ua-row-s { font-family: var(--font-mono, monospace); font-size: 12px; margin-top: 2px; color: var(--ua-ok); }
.ua-row.ua-inert .ua-row-s { color: var(--ua-inert, #a87b1c); }

/* ---- "show original" flash caption ------------------------- */
.ua-flash { position: absolute; left: 22px; bottom: 20px; z-index: 6; background: var(--color-text, #1a1a17); color: var(--color-bg, #f5f4ef); font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .02em; padding: 8px 13px; border-radius: 999px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; pointer-events: none; }
.ua-flash.ua-on { opacity: 1; transform: none; }

/* ---- clickable result #1 ----------------------------------- */
.ua-linky { cursor: pointer; }
.ua-linky:hover .ua-r-t { text-decoration: underline; text-underline-offset: 3px; }
.ua-pressed { transform: scale(.985); opacity: .82; transition: transform .15s, opacity .15s; }

/* ---- article page (navigation continuity) ------------------ */
.ua-art { position: absolute; inset: 0; z-index: 2; padding: 20px 292px 20px 24px; overflow: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .45s, transform .45s, background-color .5s; }
.ua-art.ua-on { opacity: 1; transform: none; pointer-events: auto; }
.ua-art-top { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; --i: 0; }
.ua-art-back { cursor: pointer; white-space: nowrap; }
.ua-art-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.ua-art-brand { margin-left: auto; white-space: nowrap; }
.ua-art-h { --i: 1; }
.ua-art-by { --i: 2; }
.ua-art-body { --i: 3; }
.ua-art-p { margin: 0 0 10px; }
.ua-art.ua-enter .ua-art-top, .ua-art.ua-enter .ua-art-h, .ua-art.ua-enter .ua-art-by, .ua-art.ua-enter .ua-art-body { animation: ua-rise .55s cubic-bezier(.22,.7,.25,1) both; animation-delay: calc(var(--i, 0) * 70ms); }

.ua-art.ua-skin-plain { background: #ffffff; color: #202124; }
.ua-art.ua-skin-plain .ua-art-back { font-size: 12.5px; color: #1a49b8; }
.ua-art.ua-skin-plain .ua-art-brand { font-family: var(--font-mono, monospace); font-size: 12px; color: #5f6368; }
.ua-art.ua-skin-plain .ua-art-h { font-size: 25px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 6px; }
.ua-art.ua-skin-plain .ua-art-by { font-size: 12px; color: #5f6368; margin: 0 0 14px; }
.ua-art.ua-skin-plain .ua-art-p { font-size: 13.5px; line-height: 1.6; color: #3c4043; max-width: 580px; }

.ua-art.ua-skin-news { background: #f6f1e3; color: #241f14; }
.ua-art.ua-skin-news .ua-art-back { font-family: Georgia, serif; font-style: italic; font-size: 12.5px; color: #6d6041; }
.ua-art.ua-skin-news .ua-art-brand { font-family: Georgia, serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #8a7c58; }
.ua-art.ua-skin-news .ua-art-h { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; line-height: 1.12; font-weight: 700; color: #241f14; border-bottom: 3px double #a4966f; padding: 0 0 10px; margin: 0 0 8px; }
.ua-art.ua-skin-news .ua-art-by { font-family: Georgia, serif; font-style: italic; font-size: 12px; letter-spacing: .05em; color: #8a7c58; margin: 0 0 12px; }
.ua-art.ua-skin-news .ua-art-body { column-count: 2; column-gap: 26px; column-rule: 1px solid #d3c7a4; }
.ua-art.ua-skin-news .ua-art-p { font-family: Georgia, serif; font-size: 13px; line-height: 1.62; color: #3d3527; }
.ua-art.ua-skin-news .ua-art-p:first-child::first-letter { float: left; font-size: 31px; line-height: .85; font-weight: 700; padding: 3px 6px 0 0; color: #241f14; }

.ua-art.ua-skin-dark { background: #15171c; color: #d6dae2; }
.ua-art.ua-skin-dark .ua-art-back { font-family: var(--font-mono, monospace); font-size: 12.5px; color: #7fa8c9; }
.ua-art.ua-skin-dark .ua-art-brand { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #67707e; }
.ua-art.ua-skin-dark .ua-art-h { font-size: 23px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: #e8ebf0; margin: 0 0 6px; }
.ua-art.ua-skin-dark .ua-art-by { font-family: var(--font-mono, monospace); font-size: 12px; color: #8b93a1; margin: 0 0 14px; }
.ua-art.ua-skin-dark .ua-art-body { background: #1b1e24; border: 1px solid #272c35; border-radius: 12px; padding: 16px 18px 8px; max-width: 640px; }
.ua-art.ua-skin-dark .ua-art-p { font-size: 13px; line-height: 1.65; color: #98a0ad; }

.ua-art.ua-skin-gallery { background: #faf7ef; color: #26221a; }
.ua-art.ua-skin-gallery .ua-art-back { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6f6544; border: 1px solid #d5cdb2; border-radius: 999px; padding: 4px 11px; }
.ua-art.ua-skin-gallery .ua-art-brand { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #948a68; }
.ua-art.ua-skin-gallery .ua-art-h { font-family: Georgia, serif; font-size: 27px; line-height: 1.15; font-weight: 700; color: #26221a; border-bottom: 1px solid #ddd5bd; padding: 0 0 10px; margin: 0 0 8px; }
.ua-art.ua-skin-gallery .ua-art-by { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #948a68; margin: 0 0 14px; }
.ua-art.ua-skin-gallery .ua-art-p { font-family: Georgia, serif; font-size: 13.5px; line-height: 1.65; color: #5e5640; max-width: 560px; }

/* ---- toast: re-bound by destination ------------------------ */
.ua-toast { position: absolute; top: 12px; left: 50%; transform: translate(-50%, -10px); z-index: 7; font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .02em; color: var(--color-text, #1a1a17); background: var(--color-bg, #f5f4ef); border: 1px solid color-mix(in srgb, var(--accent, #d9542b) 40%, var(--color-border, #e0ddd1)); border-radius: 999px; padding: 7px 13px 7px 11px; box-shadow: var(--shadow-md, 0 10px 30px -12px rgba(26,26,23,.12)); opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; white-space: nowrap; }
.ua-toast::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #d9542b); margin-right: 7px; vertical-align: -1px; }
.ua-toast.ua-on { opacity: 1; transform: translate(-50%, 0); }

/* ---- animated cursor + click ripple ------------------------ */
.ua-ptr { position: absolute; left: 0; top: 0; z-index: 8; width: 18px; height: 18px; opacity: 0; pointer-events: none; transition: transform .8s cubic-bezier(.45,.05,.2,1), opacity .3s; }
.ua-ptr.ua-on { opacity: 1; }
.ua-ptr svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(26,26,23,.35)); }
.ua-ptr path { fill: var(--color-text, #1a1a17); stroke: var(--color-bg, #f5f4ef); }
.ua-rip { position: absolute; z-index: 8; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid var(--accent, #d9542b); border-radius: 50%; pointer-events: none; animation: ua-rip .65s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes ua-rip { from { transform: scale(.25); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* ---- floating UI-Anima panel ------------------------------- */
.ua-panel { position: absolute; right: 14px; bottom: 14px; width: 336px; max-width: calc(100% - 28px); overflow: hidden; background: var(--color-bg, #f5f4ef); border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px); box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26,26,23,.14)); z-index: 6; padding: 12px 13px 11px; display: flex; flex-direction: column; gap: 9px; }
.ua-p-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--color-text, #1a1a17); }
.ua-p-logo { flex: none; width: 15px; height: 15px; border-radius: 5px; background: var(--accent, #d9542b); position: relative; }
.ua-p-logo::after { content: ""; position: absolute; inset: 4px; border-radius: 2px; background: var(--color-bg, #f5f4ef); opacity: .92; }
.ua-p-badge { margin-left: auto; font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted, #6c6b61); border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px; padding: 3px 8px; }
/* ---- chat feed (the conversation) -------------------------- */
.ua-chat { height: 136px; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 6px; padding: 2px 1px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px); mask-image: linear-gradient(180deg, transparent 0, #000 26px); }
.ua-chat::-webkit-scrollbar { display: none; }
.ua-msg { max-width: 90%; opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .3s; }
.ua-msg:first-child { margin-top: auto; }
.ua-msg.ua-on { opacity: 1; transform: none; }
.ua-msg-u { align-self: flex-end; background: var(--color-surface, #eae7dd); border: 1px solid var(--color-border, #e0ddd1); border-radius: 10px 10px 3px 10px; padding: 7px 10px; font-size: 13px; line-height: 1.45; color: var(--color-text, #1a1a17); }
.ua-msg-s { align-self: flex-start; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.5; color: var(--color-muted, #6c6b61); padding: 1px 0 1px 14px; position: relative; }
.ua-msg-s::before { content: ""; position: absolute; left: 1px; top: 5px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent, #d9542b); opacity: .85; }
.ua-cursor { display: inline-block; width: 6px; height: 14px; background: var(--accent, #d9542b); vertical-align: -2px; animation: ua-blink 1s steps(1) infinite; }
@keyframes ua-blink { 50% { opacity: 0; } }
.ua-p-stages { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.ua-st { flex: 0 0 auto; }
.ua-st { font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--color-border, #e0ddd1); color: var(--color-muted, #6c6b61); background: var(--color-bg, #f5f4ef); transition: all .3s; }
.ua-st.ua-act { border-color: var(--accent, #d9542b); color: var(--accent, #d9542b); background: var(--accent-soft, rgba(217,84,43,.1)); box-shadow: 0 0 0 3px var(--accent-soft, rgba(217,84,43,.1)); }
.ua-st.ua-done { border-color: color-mix(in srgb, var(--ua-ok) 45%, var(--color-border, #e0ddd1)); color: var(--ua-ok); }
.ua-st.ua-done::before { content: "✓ "; }
.ua-p-chips { display: flex; gap: 6px; }
.ua-chip { flex: 1; min-width: 0; font: 500 12px/1.25 var(--font-mono, monospace); padding: 7px 5px; text-align: center; border-radius: 8px; border: 1px solid var(--color-border, #e0ddd1); background: var(--color-surface, #eae7dd); color: var(--color-text, #1a1a17); cursor: pointer; transition: border-color .25s, color .25s, background-color .25s; }
.ua-chip:hover { border-color: var(--accent, #d9542b); color: var(--accent, #d9542b); }
.ua-chip.ua-act { border-color: var(--accent, #d9542b); background: var(--accent-soft, rgba(217,84,43,.1)); color: var(--accent, #d9542b); }
.ua-p-foot { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.ua-p-orig { flex: none; font: 500 12px/1 var(--font-mono, monospace); color: var(--color-muted, #6c6b61); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ua-p-orig:hover { color: var(--accent, #d9542b); }
.ua-p-orig.ua-press, .ua-p-orig:active { color: var(--accent, #d9542b); }
.ua-micro { flex: 1; min-width: 0; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--color-muted, #6c6b61); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-sw { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 1px; vertical-align: -1px; border: 1px solid rgba(26,26,23,.15); }

/* ---- reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ua-cursor, .ua-app.ua-scan .ua-scanbar, .ua-rip { animation: none; }
  .ua-rip { opacity: 0; }
  .ua-page.ua-enter .ua-mast, .ua-page.ua-enter .ua-head, .ua-page.ua-enter .ua-r, .ua-page.ua-enter .ua-related { animation: none; }
  .ua-art.ua-enter .ua-art-top, .ua-art.ua-enter .ua-art-h, .ua-art.ua-enter .ua-art-by, .ua-art.ua-enter .ua-art-body { animation: none; }
  .ua-page, .ua-rail, .ua-row, .ua-st, .ua-chip, .ua-flash, .ua-hud, .ua-links,
  .ua-search, .ua-badge, .ua-r, .ua-rel, .ua-r-u, .ua-r-t, .ua-r-d, .ua-s-ic, .ua-s-q, .ua-s-btn,
  .ua-msg, .ua-art, .ua-toast, .ua-ptr, .ua-pressed { transition: none; }
}

/* ---- responsive -------------------------------------------- */
@media (max-width: 860px) {
  .ua-stage { height: 580px; }
  .ua-page, .ua-art { padding: 16px 18px; }
  .ua-rail, .ua-links { display: none; }
  .ua-hud { display: none; }
  .ua-url { max-width: 250px; }
  .ua-panel { width: 288px; right: 10px; bottom: 10px; }
  .ua-flash { left: 12px; bottom: 12px; }
  .ua-chat { height: 130px; }
  .ua-toast { max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 560px) {
  .ua-stage { height: 600px; }
  .ua-skin-news .ua-results, .ua-skin-dark .ua-results, .ua-skin-gallery .ua-results { grid-template-columns: 1fr; }
  .ua-skin-gallery .ua-r:first-child { grid-row: auto; }
  .ua-r:nth-child(n+5) { display: none; }
  .ua-badge { display: none; }
  .ua-panel { width: calc(100% - 20px); }
  .ua-flash { bottom: auto; top: 12px; left: 12px; }
  .ua-chat { height: 124px; }
  .ua-art.ua-skin-news .ua-art-body { column-count: 1; }
  .ua-art.ua-skin-news .ua-art-h { font-size: 22px; }
  .ua-art.ua-skin-gallery .ua-art-h { font-size: 21px; }
  .ua-art.ua-skin-plain .ua-art-h { font-size: 20px; }
  .ua-art.ua-skin-dark .ua-art-h { font-size: 19px; }
  .ua-toast { width: max-content; }
}

@media (max-width: 560px) {
  .ua-toast { white-space: normal; }
}