/* Line 23368 (looks-lineup-flat-2d-and-3d-merged-with-the-look-switch-file-allowed-r1): the looks lineup, each character in flat 2D
   and in 3D side by side. 375 px first: the pair stays side by side at every width, one row per character. */
.ll-main { max-width: 64rem; }
.ll-rows { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 20px; }
.ll-row { background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 12px; }
.ll-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; }
.ll-name { margin: 0; font-size: 1.125rem; font-weight: 500; }
.ll-tag { font-size: .75rem; line-height: 1; padding: 4px 8px; border: 1px solid var(--ns-gold-border, var(--ns-border)); border-radius: 999px; color: var(--ns-text-2); }
.ll-main a.ll-talk { margin-left: auto; font-size: .9375rem; }
.ll-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ll-frame { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ll-stage { position: relative; aspect-ratio: 3 / 4; background: var(--ns-surface); border-radius: calc(var(--ns-radius) - 2px); overflow: hidden; }
.ll-stage > .ak-body-3d { position: absolute; inset: 0; }
.ll-frame figcaption { font-size: .875rem; color: var(--ns-text-2); line-height: 1.35; }
.ll-frame figcaption strong { color: var(--ns-text); font-weight: 500; }
.ll-frame[data-ll-state="loading"] .ll-stage::after,
.ll-frame[data-ll-state="asleep"] .ll-stage::after,
.ll-frame[data-ll-state="needs-toon"] .ll-stage::after,
.ll-frame[data-ll-state="refused"] .ll-stage::after { content: '(o_o)'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ns-gold, #f5a623); font: 700 1.6rem/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; opacity: .55; }
.ll-frame[data-ll-state="loading"] .ll-stage::after { animation: ll-breathe 1.6s ease-in-out infinite; }
.ll-empty { color: var(--ns-text-2); }
@keyframes ll-breathe { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .ll-frame[data-ll-state="loading"] .ll-stage::after { animation: none; } }
@media (min-width: 900px) { .ll-rows { grid-template-columns: 1fr 1fr; } }