/* Work scenes: small live demos around the agent. Neutral greys; colour only from real app logos. */
/* --chat-scale enlarges every text size in the demos at once (pages can override it). */
.work-scene { --chat-scale: 1.15; }
.stage--work .stage-still { display: none; }

.work-scene {
  position: absolute;
  inset: 43% 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: calc(0.875rem * var(--chat-scale));
  line-height: 1.5;
  transition: opacity 400ms var(--ease-soft);
}
.work-scene--below { inset: 48% 0 0 0; }
.work-scene--flow {
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34% minmax(0, 1fr);
  align-items: center;
}
.work-scene--flow .ws-col--main { grid-column: 1; align-items: flex-end; }
.work-scene--flow .ws-col--right { grid-column: 3; align-items: flex-start; }
.ws-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Items rise in as the agent produces them. */
.ws-bubble, .ws-card, .ws-row, .ws-chip, .ws-bars {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}
.is-in { opacity: 1; transform: none; }

/* Chat */
.ws-bubble { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.ws-bubble p {
  padding: 8px 14px;
  border-radius: 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
}
.ws-bubble--customer p, .ws-bubble--team p { border-bottom-left-radius: 6px; }
.ws-bubble--agent { align-self: flex-end; flex-direction: row-reverse; }
.ws-bubble--agent p { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); border-bottom-right-radius: 6px; }
.ws-logo { width: 18px; height: 18px; object-fit: contain; flex: none; border-radius: 4px; }
.ws-bubble > .ws-logo { width: 26px; height: 26px; border-radius: 50%; }
.ws-avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(0.625rem * var(--chat-scale));
  font-weight: 600;
}
.ws-avatar--team { background: var(--c-surface); border: 1px solid var(--c-line-strong); color: var(--c-ink-2); }
.ws-avatar--agent { background: var(--c-ink); display: flex; justify-content: center; align-items: center; gap: 3px; }
.ws-avatar--agent i { width: 3px; height: 7px; border-radius: 2px; background: #fff; transform: rotate(22deg); }
.ws-typing p { display: flex; gap: 4px; align-items: center; min-height: 38px; }
.ws-typing p i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-on-ink); opacity: 0.4; animation: ws-dot 900ms infinite; }
.ws-typing p i:nth-child(2) { animation-delay: 150ms; }
.ws-typing p i:nth-child(3) { animation-delay: 300ms; }
@keyframes ws-dot { 40% { opacity: 1; transform: translateY(-2px); } }

/* Documents */
.ws-card {
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-width: 420px;
}
.ws-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
.ws-card__head strong { font-weight: 600; }
.ws-card__head span { margin-left: auto; font-size: var(--t-micro); color: var(--c-ink-3); }
.ws-card__body { padding: 6px 14px 10px; display: grid; }
.ws-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--c-line); }
.ws-row:last-child { border-bottom: 0; }
.ws-row__text { flex: 1; min-width: 0; }
.ws-row__meta { color: var(--c-ink-3); font-size: var(--t-micro); white-space: nowrap; }
.ws-row__value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-row--sum { font-weight: 600; border-top: 1px solid var(--c-line-strong); border-bottom: 0; margin-top: 2px; }
.ws-check {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--c-ink);
  position: relative;
}
.ws-row.is-in .ws-check { background: var(--c-ink); transition: background 300ms 500ms; }
.ws-row.is-in .ws-check::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.ws-bars { display: flex; align-items: flex-end; gap: 8px; height: 88px; padding: 10px 0 4px; }
.ws-bars span { flex: 1; height: var(--h); background: var(--c-line-strong); border-radius: 4px 4px 2px 2px; transform-origin: bottom; transform: scaleY(0); }
.ws-bars.is-in span { transform: scaleY(1); transition: transform 700ms var(--ease-out) var(--d); }
.ws-bars span.is-latest { background: var(--c-ink); }

/* Status chips */
.ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-strong);
  background: var(--c-bg);
  font-size: var(--t-micro);
}
.ws-chip--ok { border-color: var(--c-ink); }
.ws-chip--wait { border-style: dashed; color: var(--c-ink-2); }
.ws-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink); flex: none; }
.ws-chip--wait .ws-dot { background: transparent; border: 1.5px solid var(--c-ink-2); }

@media (max-width: 900px) {
  .stage--roles.stage--work { height: 420px; }
  .stage--settle.stage--work { height: 380px; }
  .stage--bridge.stage--work { height: 260px; }
  .work-scene { inset: 30% 0 0 0; font-size: calc(0.8125rem * var(--chat-scale)); }
  .work-scene--below { inset: 44% 0 0 0; }
  .work-scene--flow { inset: 0; grid-template-columns: minmax(0, 1fr) 30% minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-bubble, .ws-card, .ws-row, .ws-chip, .ws-bars { transition: none; }
  .ws-bars span { transform: none; transition: none; }
  .ws-typing p i { animation: none; }
}
.work-scene--flow .ws-col--main .ws-chip { align-self: flex-end; }

/* ---------- LINE chat window ---------- */
.line-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 460px;
  border: 1px solid var(--c-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(11, 11, 12, 0.04), 0 24px 48px -28px rgba(11, 11, 12, 0.28);
  overflow: hidden;
}
.lc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.lc-head .ws-logo { width: 22px; height: 22px; border-radius: 6px; }
.lc-title { display: grid; line-height: 1.3; min-width: 0; }
.lc-title strong { font-size: calc(0.9375rem * var(--chat-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-title span { font-size: calc(0.75rem * var(--chat-scale)); color: var(--c-ink-3); }
.lc-badge {
  margin-left: auto;
  flex: none;
  font-size: calc(0.6875rem * var(--chat-scale));
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-ink-2);
}
.lc-badge--ext { background: var(--c-ink); color: var(--c-on-ink); }
.lc-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto; /* earlier messages stay; scroll up to read them */
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  background: var(--c-surface-2);
}
/* Short chats sit at the bottom like LINE; unlike justify-content: flex-end this still scrolls. */
.lc-body > :first-child { margin-top: auto; }
.lc-replay {
  align-self: center;
  flex: none;
  margin-top: 4px;
  padding: 6px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  color: var(--c-ink-2);
  font: inherit;
  font-size: calc(0.75rem * var(--chat-scale));
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.lc-replay:hover { background: var(--c-ink); color: var(--c-on-ink); }

.lc-row, .lc-system {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}
.lc-row.is-in, .lc-system.is-in { opacity: 1; transform: none; }
.lc-row { display: flex; align-items: flex-end; gap: 8px; }
.lc-row--mine { justify-content: flex-end; }
.lc-col { display: grid; gap: 2px; min-width: 0; max-width: 78%; }
.lc-name { font-size: calc(0.6875rem * var(--chat-scale)); color: var(--c-ink-3); padding-left: 4px; }
.lc-line { display: flex; align-items: flex-end; gap: 6px; }
.lc-row--mine .lc-line { flex-direction: row-reverse; }
.lc-meta { display: grid; font-size: calc(0.625rem * var(--chat-scale)); line-height: 1.3; color: var(--c-ink-3); flex: none; text-align: right; }
.lc-row:not(.lc-row--mine) .lc-meta { text-align: left; }

.lc-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e4e4e9;
  color: var(--c-ink-2);
  font-size: calc(0.75rem * var(--chat-scale));
  font-weight: 600;
}
.lc-avatar--agent { background: var(--c-ink); display: flex; justify-content: center; align-items: center; gap: 3px; }
.lc-avatar--agent i { width: 3px; height: 8px; border-radius: 2px; background: #fff; transform: rotate(22deg); }

.lc-bubble {
  margin: 0;
  padding: 8px 12px;
  border-radius: 18px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  font-size: calc(0.875rem * var(--chat-scale));
  line-height: 1.5;
  min-width: 0;
}
.lc-row--mine .lc-bubble { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }
.lc-typing { display: flex; gap: 4px; align-items: center; min-height: 36px; }
.lc-typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: ws-dot 900ms infinite; }
.lc-typing i:nth-child(2) { animation-delay: 150ms; }
.lc-typing i:nth-child(3) { animation-delay: 300ms; }

.lc-card strong { display: block; margin-bottom: 4px; }
.lc-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: calc(0.8125rem * var(--chat-scale)); }
.lc-card li { padding-left: 16px; position: relative; opacity: 0.9; }
.lc-card li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.lc-card p { margin-top: 6px; font-size: calc(0.8125rem * var(--chat-scale)); }
.lc-card .ws-bars { height: 64px; padding: 2px 0; }
.lc-row--mine .lc-card .ws-bars span { background: #5a5a60; }
.lc-row--mine .lc-card .ws-bars span.is-latest { background: #fff; }

.lc-file { display: flex; align-items: center; gap: 10px; }
.lc-file__icon {
  width: 36px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: end center;
  padding-bottom: 5px;
  border-radius: 6px;
  background: #fff;
  color: var(--c-ink);
  font-size: calc(0.5625rem * var(--chat-scale));
  font-weight: 700;
}
.lc-row:not(.lc-row--mine) .lc-file__icon { background: var(--c-surface); }
.lc-file__text { display: grid; line-height: 1.4; min-width: 0; }
.lc-file__text strong { font-size: calc(0.8125rem * var(--chat-scale)); font-weight: 600; overflow-wrap: anywhere; }
.lc-file__text span { font-size: calc(0.6875rem * var(--chat-scale)); opacity: 0.75; }

.lc-image { display: grid; gap: 6px; padding: 8px; }
.lc-slip {
  width: 132px;
  height: 84px;
  border-radius: 12px;
  background: var(--c-surface);
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 0 16px;
}
.lc-slip i { height: 6px; border-radius: 3px; background: #d0d0d6; }
.lc-slip i:nth-child(2) { width: 60%; }
.lc-slip i:nth-child(3) { width: 40%; background: var(--c-ink-3); }
.lc-image > span { font-size: calc(0.75rem * var(--chat-scale)); color: var(--c-ink-3); padding: 0 4px; }

.lc-system {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 92%;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(11, 11, 12, 0.06);
  font-size: calc(0.75rem * var(--chat-scale));
  color: var(--c-ink-2);
  text-align: center;
}

/* Chat stages: the window fills the space under the agent. */
.stage--work .work-scene:has(.line-chat) { display: block; }
@media (max-width: 900px) {
  .line-chat { max-width: none; border-radius: 18px; }
  .lc-col { max-width: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-row, .lc-system { transition: none; }
  .lc-typing i { animation: none; }
}
.lc-bubble { white-space: pre-line; }
.lc-buttons p { margin: 0 0 8px; }
.lc-options { display: grid; gap: 6px; }
.lc-options span {
  display: block;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: calc(0.8125rem * var(--chat-scale));
  text-align: center;
}
.line-chat.is-switching .lc-head { animation: lc-switch 700ms var(--ease-out); }
@keyframes lc-switch { from { opacity: 0; transform: translateX(16px); } }
.lc-system--switch { background: var(--c-ink); color: var(--c-on-ink); }
@media (prefers-reduced-motion: reduce) { .line-chat.is-switching .lc-head { animation: none; } }

/* Two chats side by side: the one with the latest message is in focus. */
.work-scene--dual { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.work-scene--dual .line-chat { min-width: 0; max-width: none; transition: opacity 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft); }
.work-scene--dual .line-chat:not(.is-active) { opacity: 0.5; box-shadow: none; }
.work-scene--dual .lc-head { padding: 8px 10px; gap: 8px; }
.work-scene--dual .lc-badge { font-size: calc(0.625rem * var(--chat-scale)); padding: 2px 8px; }
.work-scene--dual .lc-body { padding: 10px 8px; gap: 8px; }
.work-scene--dual .lc-bubble { font-size: calc(0.8125rem * var(--chat-scale)); padding: 7px 10px; }
.work-scene--dual .lc-col { max-width: 86%; }
.work-scene--dual .lc-avatar { width: 22px; height: 22px; font-size: calc(0.625rem * var(--chat-scale)); }
.work-scene--dual .lc-meta { font-size: calc(0.5625rem * var(--chat-scale)); }
.work-scene--dual .lc-system { font-size: calc(0.6875rem * var(--chat-scale)); }
@media (max-width: 900px) {
  .stage--roles.stage--work:has(.work-scene--dual) { height: 640px; }
  .stage--roles.stage--work .work-scene--dual { inset: 30% 0 0 0; }
  .work-scene--dual { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}
.lc-row--cont { margin-top: -6px; }
.lc-row--cont .lc-name { display: none; }
.lc-row--cont > .lc-avatar { visibility: hidden; }

/* ---------- Colour where it carries meaning ---------- */
/* The agent's own messages use LINE's green, so the demo reads as LINE at a glance. */
.lc-row--mine .lc-bubble { background: var(--c-bubble-mine); color: var(--c-ink); border-color: var(--c-bubble-mine); }
.lc-row--mine .lc-typing i { background: var(--c-ink); }
.lc-row--mine .lc-card .ws-bars span { background: rgba(11, 11, 12, 0.22); }
.lc-row--mine .lc-card .ws-bars span.is-latest { background: var(--c-ink); }
.lc-row--mine .lc-file__icon { box-shadow: none; }

.lc-badge--team { background: var(--c-surface); color: var(--c-ink-2); }
.lc-badge--customer { background: var(--c-info-bg); color: var(--c-info); }
.lc-badge--vendor { background: var(--c-vendor-bg); color: var(--c-vendor); }

.lc-file__icon--pdf { background: var(--c-pdf) !important; color: #fff !important; }
.lc-file__icon--xlsx { background: var(--c-xlsx) !important; color: #fff !important; }

.lc-system--ok { background: var(--c-success-bg); color: var(--c-success); }
.lc-system--info { background: var(--c-info-bg); color: var(--c-info); }
.lc-system--wait { background: var(--c-wait-bg); color: var(--c-wait); }
.lc-system--switch { background: var(--c-ink); color: var(--c-on-ink); }

.ws-bars span.is-latest { background: var(--c-line-green); }
.ws-chip { border-color: transparent; background: var(--c-surface); }
.ws-side--right.ws-chip { background: var(--c-success-bg); color: var(--c-success); }

/* Mascot work scenes (homepage roles + support). Ported from design/mockups/mascot-scenes.html; scoped so nothing leaks. */
:is(.ms-box,.ms-art) img,:is(.ms-box,.ms-art) svg{display:revert;max-width:none}
:is(.ms-box,.ms-art) h4{margin:0}
.ms-box,.ms-art{line-height:1.72}
:is(.ms-box,.ms-art) *{box-sizing:border-box;margin:0;padding:0}
.role-tab .dot{width:6px;height:6px;border-radius:50%;background:var(--c-line-green);margin-left:-2px}
.ms-box{position:relative;width:100%;aspect-ratio:640/440;border-radius:var(--radius-lg);background:var(--c-surface-2);border:1px solid var(--c-line);overflow:hidden}
.ms-box::before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--c-line) 1px,transparent 1px);background-size:22px 22px;opacity:.7}
:is(.ms-box,.ms-art) .ms-stage{position:absolute;left:0;top:0;width:640px;height:440px;transform-origin:0 0;transform:scale(var(--s,1))}
:is(.ms-box,.ms-art) .scene{position:absolute;inset:0;visibility:hidden}
:is(.ms-box,.ms-art) .scene.on{visibility:visible}
:is(.ms-box,.ms-art) .abs{position:absolute;left:0;top:0}
:is(.ms-box,.ms-art) .tagline{position:absolute;left:20px;bottom:16px;font-size:12px;color:var(--c-ink-3);letter-spacing:.02em}
:is(.ms-box,.ms-art) .m{position:absolute;width:150px;height:150px}
:is(.ms-box,.ms-art) .m img{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
:is(.ms-box,.ms-art) .m .e0{transform-origin:39% 57%}
:is(.ms-box,.ms-art) .m .e1{transform-origin:69% 57%}
:is(.ms-box,.ms-art) .m-shadow{position:absolute;height:14px;border-radius:50%;background:rgba(11,11,12,.12);filter:blur(4px)}
:is(.ms-box,.ms-art) .p{position:absolute;width:74px;text-align:center}
:is(.ms-box,.ms-art) .p>svg{width:74px;height:84px;display:block;overflow:visible}
:is(.ms-box,.ms-art) .p .nm{white-space:nowrap;display:inline-block;margin-top:4px;font-size:13px;font-weight:600;color:var(--c-ink-2);background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:0 10px;line-height:22px}
:is(.ms-box,.ms-art) .card{position:absolute;background:#fff;border:1px solid var(--c-line);border-radius:16px;box-shadow:var(--shadow-card);padding:14px 16px}
:is(.ms-box,.ms-art) .card h4{font-size:14px;font-weight:700;line-height:1.3;display:flex;align-items:center;gap:8px}
:is(.ms-box,.ms-art) .card h4 small{font-weight:500;color:var(--c-ink-3);font-size:12px}
:is(.ms-box,.ms-art) .row{display:flex;align-items:center;gap:10px;height:30px;border-bottom:1px dashed var(--c-line)}
:is(.ms-box,.ms-art) .row:last-child{border-bottom:0}
:is(.ms-box,.ms-art) .bar{height:7px;border-radius:4px;background:var(--c-line)}
:is(.ms-box,.ms-art) .fill{height:7px;border-radius:4px;background:var(--c-ink);transform-origin:left;width:100%}
:is(.ms-box,.ms-art) .amt{margin-left:auto;font-size:12px;font-weight:600;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
:is(.ms-box,.ms-art) .box{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--c-line-strong);flex:none;display:grid;place-items:center;color:#fff}
:is(.ms-box,.ms-art) .box .chk{width:11px;height:11px}
:is(.ms-box,.ms-art) .box.ok{background:var(--c-line-green);border-color:var(--c-line-green)}
:is(.ms-box,.ms-art) .box.late{background:var(--c-wait-bg);border-color:var(--c-wait)}
:is(.ms-box,.ms-art) .chip:has(>.chk:only-child){padding:0 8px}
:is(.ms-box,.ms-art) .chip{position:absolute;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;font-weight:600;line-height:28px;padding:0 12px;border-radius:999px;background:var(--c-ink);color:#fff}
:is(.ms-box,.ms-art) .chip.g{background:var(--c-success-bg);color:var(--c-success)}
:is(.ms-box,.ms-art) .chip.w{background:var(--c-wait-bg);color:var(--c-wait)}
:is(.ms-box,.ms-art) .chip.o{background:#fff;color:var(--c-ink-2);border:1px solid var(--c-line)}
:is(.ms-box,.ms-art) .chk{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
:is(.ms-box,.ms-art) .bub{position:absolute;border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--c-line);box-shadow:var(--shadow-card)}
:is(.ms-box,.ms-art) .bub.g{background:var(--c-line-green);border-color:var(--c-line-green)}
:is(.ms-box,.ms-art) .bub i{display:block;height:6px;border-radius:3px;background:var(--c-line-strong)}
:is(.ms-box,.ms-art) .bub.g i{background:rgba(255,255,255,.85)}
:is(.ms-box,.ms-art) .msg{position:absolute;width:30px;height:22px;border-radius:8px;background:var(--c-line-green);box-shadow:0 6px 14px -8px rgba(6,199,85,.8)}
:is(.ms-box,.ms-art) .msg::after{content:'';position:absolute;left:7px;right:7px;top:7px;height:2px;background:#fff;border-radius:2px;box-shadow:0 5px 0 #fff}
:is(.ms-box,.ms-art) .stamp{position:absolute;width:96px;height:96px;border-radius:50%;border:3px solid var(--c-success);color:var(--c-success);display:grid;place-items:center;font-weight:700;font-size:17px;background:rgba(220,252,231,.85)}
:is(.ms-box,.ms-art) .line-ic{position:absolute;width:52px;height:52px;border-radius:14px;box-shadow:var(--shadow-card)}
:is(.ms-box,.ms-art) .track{position:absolute;display:flex;gap:6px;align-items:center}
:is(.ms-box,.ms-art) .pill{font-size:12px;font-weight:600;line-height:26px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--c-line);color:var(--c-ink-3)}
:is(.ms-box,.ms-art) .pill.ok{background:var(--c-success-bg);border-color:var(--c-success-bg);color:var(--c-success)}
:is(.ms-box,.ms-art) .track .sep{width:16px;height:1px;background:var(--c-line-strong)}
:is(.ms-box,.ms-art) .wave{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--c-line-green);border-left-color:transparent;border-bottom-color:transparent;transform:rotate(45deg)}
:is(.ms-box,.ms-art) .pc{position:absolute}
:is(.ms-box,.ms-art) .slot,:is(.ms-box,.ms-art) .slot2{height:40px;border-radius:8px;background:var(--c-surface);display:grid;place-items:center}
:is(.ms-box,.ms-art) .day{font-size:11px;color:var(--c-ink-3);text-align:center}
:is(.ms-box,.ms-art) .bk{width:24px;height:24px}
:is(.ms-box,.ms-art) .lvl{flex:1;height:100%;border-radius:6px;background:var(--c-surface);display:flex;align-items:flex-end;overflow:hidden}
:is(.ms-box,.ms-art) .lvl>span{display:block;width:100%;background:var(--c-ink);border-radius:6px}
:is(.ms-box,.ms-art) .prod{width:26px;height:30px;border-radius:6px;background:#8a6a4a;flex:none;box-shadow:inset 0 8px 0 rgba(255,255,255,.18)}
:is(.ms-box,.ms-art) .star{width:16px;height:16px}
:is(.ms-box,.ms-art) .d{width:12px;height:12px;border-radius:3px;background:var(--c-line);display:block}
:is(.ms-box,.ms-art) .shift{font-size:12px;font-weight:600;line-height:26px;padding:0 12px;border-radius:999px;background:var(--c-surface);left:0;top:0}
:is(.ms-box,.ms-art) .node{position:absolute;top:21px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--c-ink)}
:is(.ms-box,.ms-art) .th{position:absolute;left:50%;bottom:calc(100% + 8px);transform-origin:50% 100%;translate:-50% 0;white-space:nowrap;font-size:13px;font-weight:600;line-height:1.3;padding:6px 11px;border-radius:14px;background:#fff;border:1.5px solid var(--c-ink);color:var(--c-ink);opacity:0;z-index:5;box-shadow:0 6px 14px -10px rgba(0,0,0,.4)}
:is(.ms-box,.ms-art) .th::after{content:'';position:absolute;left:50%;bottom:-9px;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid var(--c-ink);translate:-50% 0}
:is(.ms-box,.ms-art) .th-r{left:auto;bottom:auto;top:6px;right:auto;translate:none;left:78px;transform-origin:0 50%}
:is(.ms-box,.ms-art) .th-r::after{left:-10px;bottom:auto;top:50%;translate:0 -50%}
:is(.ms-box,.ms-art) .th-l{left:auto;bottom:auto;top:6px;translate:none;right:78px;transform-origin:100% 50%}
:is(.ms-box,.ms-art) .th-l::after{left:auto;right:-10px;bottom:auto;top:50%;translate:0 -50%}
:is(.ms-box,.ms-art) .p{z-index:2}
:is(.ms-box,.ms-art) .bub:has(>b){width:auto!important;white-space:nowrap}
:is(.ms-box,.ms-art) .ms-stage .scr{animation:ms-scr 1.4s ease-in-out infinite}
@keyframes ms-scr{50%{opacity:.25}}
:is(.ms-box,.ms-art) .ms-trk{position:absolute;left:50%;top:400px;translate:-50% 0;z-index:6;display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--c-ink);color:#fff;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
:is(.ms-box,.ms-art) .ms-trk-n{width:24px;height:24px;border-radius:50%;background:var(--c-line-green);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
:is(.ms-box,.ms-art) .ms-trk-t{font-size:14px;font-weight:600}
:is(.ms-box,.ms-art) .ms-trk-d{display:flex;gap:4px}
:is(.ms-box,.ms-art) .ms-trk-d i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}
:is(.ms-box,.ms-art) .ms-trk-d i.on{background:var(--c-line-green)}
:is(.ms-box,.ms-art) .ms-trk.flip .ms-trk-t{animation:ms-trkin .35s var(--ease-out)}
@keyframes ms-trkin{from{opacity:0;transform:translateY(6px)}}
:is(.ms-box,.ms-art) .m .b{position:absolute;inset:0;width:100%;height:100%}
:is(.ms-box,.ms-art) .m .ey{position:absolute;display:block}
:is(.ms-box,.ms-art) .m .ey img{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%;animation:ms-mblink 5.2s infinite}
:is(.ms-box,.ms-art) .m .ey1 img{animation-delay:.02s}
@keyframes ms-mblink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
:is(.ms-box,.ms-art) .m .m-happy{position:absolute;inset:0;width:100%;height:100%}
:is(.ms-box,.ms-art) .p svg.ch-eyes,:is(.ms-box,.ms-art) .p svg.ch-prop,:is(.ms-box,.ms-art) .p svg.ch-arms{width:100%;height:100%}
:is(.ms-box,.ms-art) .ch{position:relative;width:92px;height:92px;margin:-8px -9px -6px}
:is(.ms-box,.ms-art) .ch-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
:is(.ms-box,.ms-art) .ch>*,:is(.ms-box,.ms-art) .ch-tint>*{position:absolute;inset:0;width:100%;height:100%}
:is(.ms-box,.ms-art) .ch-arms{overflow:visible}
:is(.ms-box,.ms-art) .ch .bl{transform-box:fill-box;transform-origin:50% 50%;animation:ms-mblink 4.6s infinite}
:is(.ms-box,.ms-art) .p:nth-child(2n) .ch .bl{animation-delay:-1.7s}
:is(.ms-box,.ms-art) .p:nth-child(3n) .ch .bl{animation-delay:-3.1s}
:is(.ms-box,.ms-art) .mini{position:relative;display:inline-block;width:26px;height:26px}
:is(.ms-box,.ms-art) .mini>*{position:absolute;inset:0;width:100%;height:100%}
:is(.ms-box,.ms-art) .bub{border-radius:18px!important;border:1px solid var(--c-line)!important;background:var(--c-bg)!important;box-shadow:none!important;padding:9px 12px!important;border-bottom-left-radius:6px!important;gap:6px}
:is(.ms-box,.ms-art) .bub i{background:#d0d0d6!important;height:6px;border-radius:3px}
:is(.ms-box,.ms-art) .bub b{font-weight:400!important;font-size:14px;color:var(--c-ink)}
:is(.ms-box,.ms-art) .bub.g{background:var(--c-bubble-mine)!important;border-color:var(--c-bubble-mine)!important;border-bottom-left-radius:18px!important;border-bottom-right-radius:6px!important}
:is(.ms-box,.ms-art) .bub.g i{background:rgba(11,11,12,.22)!important}
:is(.ms-box,.ms-art) .msg{background:var(--c-bubble-mine)!important;box-shadow:none!important;border-radius:10px}
:is(.ms-box,.ms-art) .msg::after{background:rgba(11,11,12,.45)!important;box-shadow:0 5px 0 rgba(11,11,12,.45)!important}
:is(.ms-box,.ms-art) .chip{font-weight:400!important;font-size:13px;line-height:30px;padding:0 12px;background:var(--c-surface);color:var(--c-ink)}
:is(.ms-box,.ms-art) .chip.o{background:var(--c-surface)!important;border:0!important;color:var(--c-ink-2)!important}
:is(.ms-box,.ms-art) .chip.g{background:var(--c-success-bg);color:var(--c-success)}
:is(.ms-box,.ms-art) .chip.w{background:var(--c-wait-bg);color:var(--c-wait)}
:is(.ms-box,.ms-art) .chip:not(.g):not(.w):not(.o){background:var(--c-ink);color:#fff}
:is(.ms-box,.ms-art) .th{font-weight:400!important;font-size:14px!important;line-height:1.5!important;padding:8px 12px!important;border-radius:18px!important;border:1px solid var(--c-line)!important;background:var(--c-bg)!important;box-shadow:none!important}
:is(.ms-box,.ms-art) .th::after{width:9px!important;height:9px!important;border:1px solid var(--c-line)!important;bottom:-12px!important}
:is(.ms-box,.ms-art) .th::before{content:'';position:absolute;left:calc(50% + 7px);bottom:-19px;width:5px;height:5px;border-radius:50%;background:#fff;border:1px solid var(--c-line)}
:is(.ms-box,.ms-art) .th-r::after{left:-13px!important;bottom:auto!important;top:60%!important}
:is(.ms-box,.ms-art) .th-r::before{left:-20px;bottom:auto;top:78%}
:is(.ms-box,.ms-art) .th-l::after{right:-13px!important;left:auto!important;bottom:auto!important;top:60%!important}
:is(.ms-box,.ms-art) .th-l::before{right:-20px;left:auto;bottom:auto;top:78%}
:is(.ms-box,.ms-art) .th-tl{left:auto!important;right:-4px;translate:none!important;transform-origin:80% 100%}
:is(.ms-box,.ms-art) .th-tl::after{left:auto!important;right:24px;translate:none!important}
:is(.ms-box,.ms-art) .th-tl::before{left:auto;right:16px}
:is(.ms-box,.ms-art) .th-tr{left:-4px!important;translate:none!important;transform-origin:20% 100%}
:is(.ms-box,.ms-art) .th-tr::after{left:24px!important;translate:none!important}
:is(.ms-box,.ms-art) .th-tr::before{left:34px}
:is(.ms-box,.ms-art) .tx{font-size:14px;line-height:1.45;color:var(--c-ink);white-space:nowrap}
:is(.ms-box,.ms-art) .tx.sub{color:var(--c-ink-3);font-size:13px}
:is(.ms-box,.ms-art) .tx.ok{color:var(--c-success);font-weight:600}
:is(.ms-box,.ms-art) .bub{max-width:200px}
:is(.ms-box,.ms-art) .bub .tx{white-space:normal}
:is(.ms-box,.ms-art) .row .tx{flex:1}
:is(.ms-box,.ms-art) .row .who{font-size:12px;color:var(--c-ink-3);margin-left:auto}
:is(.ms-box,.ms-art) .fill.tx{display:inline-block;background:none;height:auto;width:auto}
:is(.ms-box,.ms-art) .card.file{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;font-size:13px;white-space:nowrap}
:is(.ms-box,.ms-art) .fi{width:30px;height:36px;border-radius:6px;background:var(--c-xlsx,#1d7a45);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:end center;padding-bottom:4px}
:is(.ms-box,.ms-art) .skill{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;white-space:nowrap}
:is(.ms-box,.ms-art) .new{font-size:11px;font-weight:700;color:#fff;background:var(--c-line-green);border-radius:999px;padding:0 8px;line-height:20px}
:is(.ms-box,.ms-art) .ver{display:grid;position:absolute;font-size:12px;font-weight:700;color:#fff;background:var(--c-ink);border-radius:999px;padding:0 9px;line-height:22px;z-index:3}
.ms-steps{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:1180px){
  .ms-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:900px){
  .ms-steps{grid-template-columns:minmax(0,1fr)!important}
}
:is(.ms-box,.ms-art) .ver>span{grid-area:1/1}
:is(.ms-box,.ms-art) .sb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:28px}
:is(.ms-box,.ms-art) .sb-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
:is(.ms-box,.ms-art) .sb-f{background:#fff;border:1px solid var(--c-line);border-radius:14px;padding:12px 10px;text-align:center;box-shadow:var(--shadow-card)}
:is(.ms-box,.ms-art) .sb-f .n{font-size:11px;color:var(--c-ink-3);font-weight:600}
:is(.ms-box,.ms-art) .sb-f .ill{height:92px;display:grid;place-items:center}
:is(.ms-box,.ms-art) .sb-f .t{font-size:13px;font-weight:600;line-height:1.35}
:is(.ms-box,.ms-art) .sb-desc{margin-top:18px;font-size:14px;color:var(--c-ink-2);line-height:1.6;text-align:center;padding:0 10px}
.ms-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;position:relative}
.ms-st{position:relative}
.ms-art{position:relative;aspect-ratio:1/0.82;border-radius:var(--radius-lg);background:var(--c-surface-2);border:1px solid var(--c-line);overflow:hidden}
.ms-art::before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--c-line) 1px,transparent 1px);background-size:22px 22px;opacity:.7}
:is(.ms-box,.ms-art) .ms-in{position:absolute;left:0;top:0;width:360px;height:295px;transform-origin:0 0;transform:scale(var(--s,1))}
.ms-cap{display:flex;align-items:center;gap:12px;margin-top:16px}
.ms-no{flex:none;width:32px;height:32px;border-radius:50%;background:var(--c-ink);color:#fff;font-weight:700;display:grid;place-items:center;font-size:15px}
.ms-cap p{font-size:var(--t-small);color:var(--c-ink-3);line-height:1.5;margin-top:2px}
.ms-cap h3{font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);font-weight:700;line-height:1.35}
@media (max-width:900px){
  .ms-col{order:7;margin-top:22px;width:100%}
  .ms-steps{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}
  .ms-st{display:grid;grid-template-columns:1fr;gap:0}
}
@media (max-width:560px){
  .ms-col{margin-inline:calc(var(--gutter)*-1)}
  .ms-col .ms-box{border-radius:0;border-inline:0}
  :is(.ms-box,.ms-art) .ms-stage .chip{font-size:20px!important;line-height:34px}
  :is(.ms-box,.ms-art) .ms-stage .p .nm{font-size:19px!important;line-height:28px}
  :is(.ms-box,.ms-art) .ms-stage .card h4{font-size:19px!important}
  :is(.ms-box,.ms-art) .ms-stage .amt,:is(.ms-box,.ms-art) .ms-stage .day,:is(.ms-box,.ms-art) .ms-stage .shift{font-size:16px!important}
  :is(.ms-box,.ms-art) .ms-stage .bub b{font-size:17px!important}
  :is(.ms-box,.ms-art) .ms-stage .tx{font-size:19px}
  :is(.ms-box,.ms-art) .ms-stage .tx.sub{font-size:17px}
  :is(.ms-box,.ms-art) .ms-stage .bub{max-width:300px}
  :is(.ms-box,.ms-art) .ms-stage .row .who{font-size:16px}
  :is(.ms-box,.ms-art) .ms-stage .card.file{font-size:17px}
  :is(.ms-box,.ms-art) .ms-stage .th{font-size:19px!important;padding:7px 14px!important}
  :is(.ms-box,.ms-art) .ms-trk{top:392px;padding:6px 18px 6px 6px}
  :is(.ms-box,.ms-art) .ms-trk-n{width:32px;height:32px;font-size:18px}
  :is(.ms-box,.ms-art) .ms-trk-t{font-size:21px}
  :is(.ms-box,.ms-art) .ms-trk-d i{width:8px;height:8px}
  :is(.ms-box,.ms-art) .ms-stage .chip{font-size:17px;line-height:32px}
  :is(.ms-box,.ms-art) .ms-stage .p .nm{font-size:16px}
  :is(.ms-box,.ms-art) .ms-stage .pill{font-size:15px;padding:0 9px}
  :is(.ms-box,.ms-art) .ms-stage .card h4{font-size:17px}
  :is(.ms-box,.ms-art) .ms-stage .amt{font-size:15px}
  :is(.ms-box,.ms-art) .ms-stage .stamp{font-size:20px}
  :is(.ms-box,.ms-art) .ms-in .chip{font-size:16px}
  :is(.ms-box,.ms-art) .ms-in .nm{font-size:15px}
  :is(.ms-box,.ms-art) .ms-in .tx{font-size:16px}
  :is(.ms-box,.ms-art) .ms-in .bub{max-width:320px}
  :is(.ms-box,.ms-art) .ms-in .bub .tx{white-space:nowrap}
  .ms-box,.ms-art{border-radius:20px}
}
@media (prefers-reduced-motion:reduce){:is(.ms-box,.ms-art) *,:is(.ms-box,.ms-art) *::before,:is(.ms-box,.ms-art) *::after{animation:none!important;transition:none!important}}
/* roles layout with the mascot stage (matches the approved mockup) */
.roles{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
.ms-col{grid-column:2;min-width:0}
.roles .role-panels{min-height:0;margin-top:30px}
.roles .role-example{font-size:clamp(1.3rem,1.05rem + 1vw,1.9rem);min-height:2.8em}
.ms-box:not(.is-ready) .ms-stage{visibility:hidden}
.ms-steps{margin:56px 0 0;padding:0}
.ms-cap h3{margin:0}
/* mtg scene: generic online-meeting window the mascot joins */
:is(.ms-box,.ms-art) .mt-call{width:608px;height:368px;border-radius:18px;background:#1c1c21;box-shadow:var(--shadow-card);z-index:1}
:is(.ms-box,.ms-art) .mt-bar{position:absolute;left:14px;right:14px;top:10px;height:28px;display:flex;align-items:center;gap:8px;color:#fff;font-size:13px}
:is(.ms-box,.ms-art) .mt-bar b{font-weight:600}
:is(.ms-box,.ms-art) .mt-ic{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
:is(.ms-box,.ms-art) .mt-rec{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;font-weight:700;color:#ff6b6b}
:is(.ms-box,.ms-art) .mt-rec i{width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:ms-scr 1.4s ease-in-out infinite}
:is(.ms-box,.ms-art) .mt-live{font-size:11px;line-height:20px;padding:0 8px;border-radius:999px;background:rgba(6,199,85,.18);color:#5be38f}
:is(.ms-box,.ms-art) .mt-tile{position:absolute;width:286px;height:124px;border-radius:12px;background:#2c2c33;box-shadow:inset 0 0 0 0 #06c755}
:is(.ms-box,.ms-art) .mt-snip{position:absolute;left:100px;top:22px;width:150px;font-size:12px;line-height:1.35;padding:6px 8px;border-radius:12px;border-bottom-left-radius:4px;background:#fff;color:var(--c-ink);opacity:0}
:is(.ms-box,.ms-art) .mt-tile.ai{background:#26263a}
:is(.ms-box,.ms-art) .mt-mini{position:absolute;left:8px;top:14px;width:64px;height:64px}
:is(.ms-box,.ms-art) .mt-mini .m{width:64px;height:64px}
:is(.ms-box,.ms-art) .mt-notes{position:absolute;left:80px;top:10px;width:194px;height:84px;padding:6px 8px;border-radius:8px;background:#fff;display:flex;flex-direction:column;gap:3px}
:is(.ms-box,.ms-art) .mt-nh{font-size:11px;font-weight:700;line-height:1.3;color:var(--c-ink-3);letter-spacing:.02em}
:is(.ms-box,.ms-art) .mt-ln{font-size:13px;line-height:1.35;color:var(--c-ink);white-space:nowrap}
:is(.ms-box,.ms-art) .mt-tag{position:absolute;left:8px;bottom:8px;font-size:11px;line-height:20px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}
:is(.ms-box,.ms-art) .mt-tools{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:12px}
:is(.ms-box,.ms-art) .mt-btn{width:36px;height:36px;border-radius:50%;background:#3a3a42;display:grid;place-items:center}
:is(.ms-box,.ms-art) .mt-btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
:is(.ms-box,.ms-art) .mt-btn.end{width:52px;border-radius:18px;background:#e5484d}
:is(.ms-box,.ms-art) .mt-btn.end svg{fill:#fff;stroke:none}
:is(.ms-box,.ms-art) #sc-mtg .p .nm{position:relative;z-index:1}
:is(.ms-box,.ms-art) .th-ar{left:auto;right:0;translate:none;transform-origin:100% 100%}
:is(.ms-box,.ms-art) .th-ar::after{left:auto;right:28px;translate:none}
:is(.ms-box,.ms-art) .th-al{left:0;translate:none;transform-origin:0 100%}
:is(.ms-box,.ms-art) .th-al::after{left:28px;translate:none}
:is(.ms-box,.ms-art) .th-b{bottom:auto;top:calc(100% + 10px);transform-origin:50% 0}
:is(.ms-box,.ms-art) .th-b::after{bottom:auto;top:-12px}
@media (max-width:560px){.roles .role-example{min-height:0}.roles .ms-col{margin-top:14px}}
@media (max-width:560px){:is(.ms-box,.ms-art) .ms-stage #mt-card .tx{font-size:15px}}