/* Line 15995 (alive-host-morph-ladder-r1, ai.features.host_morph_ladder): the one morphing host. Tiny she is the gold
   letters face (o_o) and that face is the button; given room she fills her box with a sketch, a drawn character, a 2D
   body or a 3D body (public/js/alive/host-morph-ladder.js picks the form). Google-path tokens where the page has them. */
.ns-morph { --ns-morph-ink: var(--ns-gold, #f5a623); position: relative; display: inline-grid; place-items: center;
    width: 56px; height: 56px; color: var(--ns-morph-ink); vertical-align: middle; container-type: size; }
.ns-morph--stage { display: grid; width: 100%; height: 100%; }
.ns-morph__stage { position: absolute; inset: 0; }
.ns-morph__layer { position: absolute; inset: 0; display: grid; place-items: center; }
.ns-morph__svg, .ns-morph__gl { display: block; width: 100%; height: 100%; }
.ns-morph__ascii { display: grid; place-content: center; width: 100%; height: 100%; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
    border: 0; border-radius: 14px; background: transparent; color: var(--ns-morph-ink); cursor: pointer;
    font: 800 clamp(12px, 26cqmin, 120px)/.92 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-shadow: 0 0 10px var(--ns-gold-glow, rgba(245, 166, 35, .22)); white-space: pre; }
.ns-morph__ascii:focus-visible { outline: 2px solid var(--ns-morph-ink); outline-offset: 2px; }
.ns-morph__brows, .ns-morph__eyes { display: block; text-align: center; transform: translate(var(--gx, 0), var(--gy, 0)); transition: transform .18s ease-out; }
.ns-morph__brows { font-size: .62em; line-height: .9; }
.ns-morph__ascii[data-brows="lift"] .ns-morph__brows { transform: translate(var(--gx, 0), calc(var(--gy, 0em) - .14em)); }
.ns-morph__ascii[data-brows="think"] .ns-morph__brows { transform: translate(var(--gx, 0), calc(var(--gy, 0em) - .06em)) rotate(-4deg); }
.ns-morph .ns-morph__caption { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: min(92%, 36em); margin: 0; padding: 6px 12px;
    border-radius: 12px; background: rgba(32, 33, 36, .72); color: #e8eaed; font: 500 14px/1.35 var(--ns-font, system-ui, sans-serif); text-align: center; }
.ns-morph .ns-morph__caption:empty, .ns-morph[data-form="ascii"] .ns-morph__caption, .ns-morph[data-form="sketch-line"] .ns-morph__caption { display: none; }
.ns-morph__breathe { animation: ns-morph-breathe 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ns-morph-breathe { 50% { transform: scale(1.012, 1.018); } }
@media (prefers-reduced-motion: reduce) { .ns-morph__breathe { animation: none; } .ns-morph__brows, .ns-morph__eyes { transition: none; } }
/* Line 16083 (fix-looks-02-20260929-r1, F-0178): her one hamburger. Nothing is drawn around her until she is hovered,
   focused or tapped (data-menu-shown, set by host-morph-ladder.js); the list is the page's one avatar menu when the page
   carries it, else her own: Automatic and the forms that fit. */
.ns-morph__menu-btn { position: absolute; top: -6px; right: -6px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px;
    margin: 0; padding: 0; border: 1px solid var(--ns-gold-border, rgba(245, 166, 35, .32)); border-radius: 50%;
    background: var(--ns-surface, #fff); color: var(--ns-text, #202124); font: 16px/1 system-ui, sans-serif; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.ns-morph:hover > .ns-morph__menu-btn, .ns-morph:focus-within > .ns-morph__menu-btn, .ns-morph[data-menu-shown] > .ns-morph__menu-btn { opacity: 1; pointer-events: auto; }
.ns-morph__menu-btn:focus-visible { outline: 2px solid var(--ns-morph-ink); outline-offset: 2px; }
.ns-morph__menu { position: absolute; top: 30px; right: -6px; z-index: 4; min-width: 176px; padding: 6px; border-radius: 12px;
    background: var(--ns-surface, #fff); color: var(--ns-text, #202124); box-shadow: 0 4px 16px rgba(32, 33, 36, .24);
    font: 400 14px/1.3 var(--ns-font, system-ui, sans-serif); }
.ns-morph__menu[hidden] { display: none; }
.ns-morph__menu > button { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ns-morph__menu > button:hover, .ns-morph__menu > button:focus-visible { background: var(--ns-surface-2, rgba(32, 33, 36, .06)); outline: none; }
.ns-morph__menu > button[aria-checked="true"] { font-weight: 500; color: var(--ns-gold-light, #b06000); }
@media (prefers-reduced-motion: reduce) { .ns-morph__menu-btn { transition: none; } }
/* Line 16000 (alive_presence_loop): the one life loop moves the letters face: her breath and a hop lift it, a nod dips her
   eyes, a tilt leans it, listening brings it a touch closer. Only transforms; the loop writes the values every frame, so
   there is no transition to lag behind it. */
.ns-morph__ascii[data-life] { transform: translateY(var(--br, 0em)) rotate(var(--tilt, 0deg)) scale(var(--lean, 1)); }
.ns-morph__ascii[data-life] .ns-morph__brows, .ns-morph__ascii[data-life] .ns-morph__eyes { transition: none; }
.ns-morph__ascii[data-life] .ns-morph__eyes { transform: translate(var(--gx, 0), calc(var(--gy, 0em) + var(--nod, 0em))); }
.ns-morph__ascii[data-life] .ns-morph__brows { transform: translate(var(--gx, 0), calc(var(--gy, 0em) + var(--nod, 0em))); }
.ns-morph__ascii[data-life][data-brows="lift"] .ns-morph__brows { transform: translate(var(--gx, 0), calc(var(--gy, 0em) + var(--nod, 0em) - .14em)); }
.ns-morph__ascii[data-life][data-brows="think"] .ns-morph__brows { transform: translate(var(--gx, 0), calc(var(--gy, 0em) + var(--nod, 0em) - .06em)) rotate(-4deg); }