/* AVATAR EDITOR (2026-09-22) - the landing_la design language (tokens, Outfit / Manrope / IBM Plex Mono, pills, 16 px cards) on a
   tool layout: sticky header with the three modes, a left rail of cards, the stage in the middle, a bottom panel (timeline / transport). */
:root {
  --page:#F7F8FA; --white:#fff; --ink:#0E404F; --ink-deep:#0F2C3F; --cyan:#FFA41B; --cyan-light:#FFB84D; --cyan-dark:#A85A00;   /* Moholo amber, as the landing (2026-09-24); token names kept */
  --pale:#FFF1DC; --violet:#7C5CFF; --magenta:#F3A6FF; --edge:#E3E6E9; --edge2:#DDE1E6; --muted:#6B7280; --text:#374151; --code:#121112;
  --pill:#F1F3F5; --red:#DC2626; --amber:#F59E0B; --green:#22C55E;
  --rail:336px; --hdr:64px; --bottom:290px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body.ed { background:var(--page); color:var(--ink); font:14px/1.5 Manrope, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
button:disabled { opacity:.4; cursor:default; }
canvas { display:block; }
.mono { font-family:"IBM Plex Mono", "SF Mono", monospace; }
.eyebrow-sm { display:block; font:600 10px/1 Manrope, sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-dark); margin-bottom:6px; }

/* ---------- buttons / pills (landing) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 16px; border-radius:9999px; font:600 13px/1 Manrope, sans-serif; color:var(--ink); white-space:nowrap; transition:background .2s, border-color .2s; }
.btn.primary { background:var(--cyan); } .btn.primary:hover:not(:disabled) { background:var(--cyan-light); }
.btn.secondary { background:var(--white); border:1px solid var(--edge2); } .btn.secondary:hover:not(:disabled) { border-color:#c6ccd3; }
.btn.dark { background:var(--ink); color:#fff; } .btn.dark:hover:not(:disabled) { background:var(--ink-deep); }
.btn.ghost { background:var(--pill); } .btn.ghost:hover:not(:disabled) { background:#e7eaee; }
.btn.danger { background:#FEE2E2; color:#991B1B; } .btn.danger:hover:not(:disabled) { background:#FECACA; }
.btn.sm { height:30px; padding:0 12px; font-size:12px; }
.btn.xs { height:26px; padding:0 10px; font-size:11px; }
.btn .k, .modes .k { font:500 10px/1 "IBM Plex Mono", monospace; color:rgba(14,64,79,.55); padding:3px 5px; border-radius:6px; background:rgba(255,255,255,.55); }
.btn.dark .k { color:rgba(255,255,255,.7); background:rgba(255,255,255,.14); }
.btn.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.btn.on .k { color:rgba(255,255,255,.7); background:rgba(255,255,255,.14); }

/* ---------- header ---------- */
.hdr { position:fixed; top:0; left:0; right:0; height:var(--hdr); z-index:50; background:rgba(247,248,250,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--edge); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 20px; gap:16px; }
.hl, .hr { display:flex; align-items:center; gap:14px; min-width:0; }
.hr { justify-content:flex-end; }
.brand { display:inline-flex; align-items:baseline; gap:8px; }
.brand .wm { font:700 22px/1 Outfit, sans-serif; color:var(--ink); letter-spacing:-.02em; }
.brand .wm i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cyan); margin:0 0 10px 2px; vertical-align:top; }
.brand .by { font:500 10.5px/1 Manrope, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.avsel { display:flex; flex-direction:column; margin-left:10px; }
.avsel .eyebrow-sm { margin-bottom:2px; }
.sel { height:30px; padding:0 30px 0 12px; border:1px solid var(--edge2); border-radius:9999px; background:var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%230E404F' stroke-width='1.5'/></svg>") no-repeat right 12px center; font:600 13px/1 Manrope, sans-serif; color:var(--ink); appearance:none; -webkit-appearance:none; max-width:240px; }
.sel:focus { outline:2px solid rgba(0,195,255,.5); }
.modes { display:inline-flex; padding:3px; border-radius:9999px; background:var(--pill); border:1px solid var(--edge); }
.modes button { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 18px; border-radius:9999px; font:600 13px/1 Manrope, sans-serif; color:var(--muted); }
.modes button[hidden] { display:none; }
.modes button.on { background:var(--ink); color:#fff; }
.modes button .k { background:rgba(14,64,79,.08); }
.modes button.on .k { color:rgba(255,255,255,.7); background:rgba(255,255,255,.14); }
.dirty[hidden] { display:none; }
.dirty { display:inline-flex; align-items:center; gap:6px; font:600 11px/1 Manrope, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); }
.dirty i { width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px rgba(245,158,11,.22); }
.pkg { font-size:11px; color:var(--muted); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- main grid ---------- */
.ed-main { position:fixed; inset:var(--hdr) 0 0 0; display:grid; grid-template-columns:var(--rail) 1fr; gap:16px; padding:16px; min-height:0; }
.rail { overflow:auto; min-height:0; display:flex; flex-direction:column; gap:12px; padding-right:2px; scrollbar-width:thin; }
.centre { display:grid; grid-template-rows:1fr auto; gap:12px; min-height:0; min-width:0; }
.centre.nobottom { grid-template-rows:1fr; }
.centre.export { grid-template-rows:180px 1fr; }   /* Export: the tags + preview are the work area, the stage is a thumbnail */
.stage-card { position:relative; min-height:0; border-radius:20px; background:var(--white); border:1px solid var(--edge); box-shadow:0 18px 50px rgba(14,64,79,.06); padding:8px; }
.stage { position:absolute; inset:8px; border-radius:14px; overflow:hidden; background:#ffffff; }
.stage canvas { position:absolute; left:0; top:0; }
.stage-hud { position:absolute; left:20px; top:20px; z-index:6; display:flex; gap:8px; pointer-events:none; flex-wrap:wrap; }
.stage-hud .act { pointer-events:auto; cursor:pointer; font:600 11px/1 Manrope, sans-serif; } .stage-hud .act:hover { border-color:var(--ink); }
.chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:9999px; background:rgba(255,255,255,.9); border:1px solid var(--edge); font-size:11px; color:var(--ink); backdrop-filter:blur(6px); }
.chip:empty { display:none; }
.chip.live i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.25); }
.bottom { min-height:0; }
.bottom:empty { display:none; }

/* ---------- cards in the rail ---------- */
.card { background:var(--white); border:1px solid var(--edge); border-radius:16px; padding:14px 16px 14px; }
.card.tight { padding:10px 16px; }
.card h3 { display:flex; align-items:center; justify-content:space-between; gap:10px; font:700 13px/1.3 Manrope, sans-serif; color:var(--ink); margin:0 0 10px; }
.card h3 .keys { font:400 10px/1 "IBM Plex Mono", monospace; letter-spacing:.06em; color:#9aa3ad; text-transform:none; white-space:nowrap; }
.card h3 .num { font:400 11px/1 "IBM Plex Mono", monospace; color:#9aa3ad; margin-right:8px; }
.card p.help { font-size:12px; line-height:1.5; color:var(--muted); margin:0 0 8px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0; }
.row.between { justify-content:space-between; }
.row .lbl { font:600 11px/1 Manrope, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); min-width:64px; }
.note { font:400 11.5px/1.5 "IBM Plex Mono", monospace; color:var(--muted); margin-top:6px; word-break:break-word; min-height:16px; }
.note.ok { color:var(--cyan-dark); } .note.red { color:var(--red); } .note.ink { color:var(--ink); }
.note a { color:var(--cyan-dark); font-weight:600; }

/* segmented control (landing tabs) */
.seg { display:inline-flex; padding:2px; border-radius:9999px; background:var(--pill); border:1px solid var(--edge); }
.seg label { position:relative; cursor:pointer; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg span { display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:9999px; font:600 12px/1 Manrope, sans-serif; color:var(--muted); white-space:nowrap; }
.seg input:checked + span { background:var(--ink); color:#fff; }
.seg.cyan input:checked + span { background:var(--cyan); color:var(--ink); }

/* sliders */
.sl { display:grid; grid-template-columns:96px 1fr 52px; align-items:center; gap:10px; margin:4px 0; }
.sl.wide { grid-template-columns:1fr 52px; }
.sl .n { font:600 12px/1.2 Manrope, sans-serif; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl .v { font:500 11px/1 "IBM Plex Mono", monospace; color:var(--ink); text-align:right; }
.sl .v.edited { color:var(--cyan-dark); font-weight:600; }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; outline:none; margin:0; }
input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:var(--edge2); }
input[type=range]::-moz-range-track { height:4px; border-radius:2px; background:var(--edge2); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%; background:var(--white); border:2px solid var(--ink); cursor:pointer; box-shadow:0 1px 3px rgba(14,64,79,.2); }
input[type=range]::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:var(--white); border:2px solid var(--ink); cursor:pointer; }
input[type=range]:focus::-webkit-slider-thumb { border-color:var(--cyan); }
input[type=range].bi::-webkit-slider-runnable-track { background:linear-gradient(90deg, var(--edge2) 0 49%, var(--ink) 49% 51%, var(--edge2) 51%); }
input[type=range]:disabled { opacity:.35; }
input[type=number], input[type=text], input[type=password] { height:28px; padding:0 10px; border:1px solid var(--edge2); border-radius:8px; font:500 12px/1 "IBM Plex Mono", monospace; color:var(--ink); background:var(--white); }
input[type=number] { width:70px; } input[type=text] { width:100%; }
input:focus { outline:2px solid rgba(0,195,255,.45); border-color:var(--cyan); }
textarea { width:100%; min-height:56px; padding:8px 10px; border:1px solid var(--edge2); border-radius:10px; font:13px/1.5 Manrope, sans-serif; color:var(--ink); background:var(--white); resize:vertical; }
.swatches { display:inline-flex; gap:6px; }
.swatches button { width:22px; height:22px; border-radius:50%; border:1px solid var(--edge2); }
.swatches button.on { outline:2px solid var(--cyan); outline-offset:1px; }
.tag { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:9999px; background:var(--pale); color:var(--cyan-dark); font:600 10px/1 Manrope, sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.tag.grey { background:var(--pill); color:var(--muted); }
.tag.red { background:#FEE2E2; color:#991B1B; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12px; color:var(--text); }
.kv b { font-family:"IBM Plex Mono", monospace; font-weight:500; color:var(--ink); }
.stat { display:flex; gap:14px; padding:8px 0 0; }
.stat .n { font:700 20px/1.1 Outfit, sans-serif; color:var(--ink); letter-spacing:-.01em; }
.stat .l { font-size:11px; color:var(--muted); margin-top:2px; }
.pillrow { display:flex; flex-wrap:wrap; gap:6px; }
.pillrow button { height:28px; padding:0 12px; border-radius:9999px; border:1px solid var(--edge); background:var(--page); font:600 12px/1 Manrope, sans-serif; color:var(--muted); }
.pillrow button.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.pillrow button:hover:not(.on):not(:disabled) { border-color:var(--ink); color:var(--ink); }

/* ---------- bottom panel: transport ---------- */
.panel { background:var(--white); border:1px solid var(--edge); border-radius:16px; padding:12px 16px; }
.transport { display:flex; align-items:center; gap:12px; }
.transport .play { width:38px; height:38px; flex:none; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; }
.transport .play:hover:not(:disabled) { background:var(--cyan); color:var(--ink); }
.transport .play svg { width:14px; height:14px; fill:currentColor; }
.transport input[type=range] { flex:1; }
.transport .t { font:500 11px/1 "IBM Plex Mono", monospace; color:var(--ink); min-width:130px; text-align:right; }
.score { margin-top:8px; font:500 11.5px/1.5 "IBM Plex Mono", monospace; color:var(--cyan-dark); min-height:16px; }

/* ---------- timeline (Motion mode) ---------- */
.tl { display:grid; grid-template-rows:auto 1fr; height:var(--bottom); min-height:0; }
.tl-top { display:flex; align-items:center; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--edge); }
.tl-top .t { font:500 11px/1 "IBM Plex Mono", monospace; color:var(--ink); min-width:110px; }
.tl-top .spacer { flex:1; }
.tl-body { position:relative; min-height:0; overflow:hidden; }
.tl-body canvas { position:absolute; left:0; top:0; width:100%; height:100%; cursor:crosshair; }
.tl-legend { display:flex; gap:12px; flex-wrap:wrap; font:500 10.5px/1 "IBM Plex Mono", monospace; color:var(--muted); }
.tl-legend i { display:inline-block; width:10px; height:3px; border-radius:2px; vertical-align:middle; margin-right:5px; }

/* lanes list in the rail */
.lanes { display:flex; flex-direction:column; gap:4px; }
.lane { display:grid; grid-template-columns:14px 1fr auto auto; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; border:1px solid transparent; cursor:pointer; }
.lane:hover { background:var(--page); }
.lane.on { background:var(--pale); border-color:rgba(0,195,255,.35); }
.lane i { width:10px; height:10px; border-radius:3px; }
.lane .n { font:600 12px/1.2 Manrope, sans-serif; color:var(--ink); }
.lane .u { font:400 10px/1 "IBM Plex Mono", monospace; color:var(--muted); }
.lane .vis { width:26px; height:18px; border-radius:6px; display:grid; place-items:center; color:var(--muted); }
.lane .vis.off { color:#c9ced4; }
.lane .vis svg { width:14px; height:14px; }

/* clips list */
.clips { display:flex; flex-direction:column; gap:4px; max-height:180px; overflow:auto; }
.clip { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:6px 8px; border-radius:10px; border:1px solid var(--edge); background:var(--page); }
.clip .n { font:600 12px/1.2 Manrope, sans-serif; color:var(--ink); }
.clip .d { font:400 10px/1 "IBM Plex Mono", monospace; color:var(--muted); }
.clip button { height:24px; padding:0 9px; border-radius:9999px; background:var(--white); border:1px solid var(--edge2); font:600 11px/1 Manrope, sans-serif; color:var(--ink); }
.clip button:hover { border-color:var(--ink); }

/* ---------- viseme palette (Speech mode) ---------- */
.vis-row { display:grid; grid-template-columns:repeat(9, 1fr); gap:8px; }
@media (max-width:1500px){ .vis-row { grid-template-columns:repeat(5, 1fr); } }
.vcard { position:relative; padding:10px 10px 12px; border-radius:14px; border:1px solid var(--edge); background:var(--page); text-align:left; cursor:pointer; transition:border-color .15s, background .15s; }
.vcard:hover { border-color:#c6ccd3; }
.vcard.on { background:var(--pale); border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan); }
.vcard .ph { font:700 18px/1 Outfit, sans-serif; color:var(--ink); letter-spacing:-.02em; }
.vcard .nm { font:600 11px/1.2 Manrope, sans-serif; color:var(--muted); margin-top:4px; }
.vcard .ex { font:400 10.5px/1.3 "IBM Plex Mono", monospace; color:#9aa3ad; margin-top:6px; }
.vcard .bar { position:absolute; left:12px; right:12px; bottom:6px; height:3px; border-radius:2px; background:var(--edge2); overflow:hidden; }
.vcard .bar i { display:block; height:100%; width:0; background:var(--cyan); transition:width .08s linear; }
.vcard .dot { position:absolute; right:10px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--amber); display:none; }
.vcard.edited .dot { display:block; }
.vgroup { margin-top:8px; }
.vgroup h4 { font:600 10.5px/1 Manrope, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-dark); margin:8px 0 4px; }

/* ---------- veil / toast / fatal ---------- */
.veil { position:absolute; inset:8px; border-radius:14px; background:rgba(255,255,255,.92); z-index:9; display:grid; place-items:center; transition:opacity .5s; }
.veil.lift { opacity:0; pointer-events:none; }
.loading-wrap { position:relative; width:64px; height:64px; }
.loading-ring { position:absolute; inset:0; border-radius:50%; border:3px solid var(--edge); border-top-color:var(--cyan); animation:spin 1s linear infinite; }
.loading-pct { position:absolute; inset:0; display:grid; place-items:center; font:500 11px/1 "IBM Plex Mono", monospace; color:var(--ink); }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; left:50%; bottom:20px; transform:translate(-50%, 30px); z-index:80; padding:10px 16px; border-radius:9999px; background:var(--ink); color:#fff; font:600 12.5px/1 Manrope, sans-serif; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:min(720px, 90vw); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
.toast.red { background:var(--red); } .toast.ok { background:var(--cyan-dark); }
.fatal { position:fixed; inset:var(--hdr) 0 0 0; z-index:70; display:grid; place-items:center; background:rgba(247,248,250,.96); color:var(--red); font:14px/1.6 Manrope, sans-serif; text-align:center; padding:40px; white-space:pre-wrap; }
.fatal[hidden] { display:none; }
kbd { font:500 10px/1 "IBM Plex Mono", monospace; padding:2px 5px; border-radius:5px; background:var(--pill); border:1px solid var(--edge2); color:var(--muted); }
.help-keys { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:11px; color:var(--muted); }

@media (max-width:1100px){ :root { --rail:300px; } }

/* ---------- Scene mode: the call window on the stage ---------- */
.callwin { position:absolute; overflow:hidden; border-radius:12px; background:#111; box-shadow:0 10px 40px rgba(0,0,0,.35); cursor:grab; }
.callwin:active { cursor:grabbing; }
.callwin > .bg { position:absolute; inset:0; background:center / cover no-repeat; }
.callwin > .bg.fg { z-index:3; opacity:0; pointer-events:none; } .callwin > .bg.fg.on { opacity:1; }
.callwin > canvas { z-index:2; }
.callwin .fgline { position:absolute; left:0; right:0; z-index:4; height:0; border-top:1px dashed rgba(0,195,255,.9); pointer-events:none; }
.callwin.webcam > canvas, .callwin.webcam > .bg { filter: blur(var(--cam-blur, 0px)) contrast(var(--cam-contrast, 1)) saturate(var(--cam-sat, 1)) brightness(1.02); }
.callwin.webcam::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:5; opacity:var(--cam-noise, 0); mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.9'/></svg>"); }
.callwin.pixels > canvas { image-rendering:pixelated; }
.bglist { display:flex; flex-direction:column; gap:6px; }
.bgrow { display:grid; grid-template-columns:56px 1fr auto; gap:10px; align-items:center; padding:6px; border-radius:12px; border:1px solid var(--edge); background:var(--page); cursor:pointer; }
.bgrow.on { background:var(--pale); border-color:var(--cyan); }
.bgrow .thumb { width:56px; height:36px; border-radius:8px; background:center / cover no-repeat #dfe3e8; }
.bgrow .meta { min-width:0; display:flex; flex-direction:column; gap:3px; }
.bgrow .meta input { height:26px; font:600 12px/1 Manrope, sans-serif; }
.bgrow .src { font:400 10px/1 "IBM Plex Mono", monospace; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bgrow .acts { display:flex; gap:4px; }
.mini { width:24px; height:24px; border-radius:50%; border:1px solid var(--edge2); background:var(--white); font:600 13px/1 Manrope, sans-serif; color:var(--ink); display:grid; place-items:center; }
.mini.danger { color:#991B1B; } .mini:hover { border-color:var(--ink); }

/* ---------- Export mode ---------- */
.panel.export .tags2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
@media (max-width:1200px){ .panel.export .tags2 { grid-template-columns:1fr; } }
pre.code { margin:0; padding:12px 14px; border-radius:12px; background:var(--code); color:#c9d1d9; font:400 11.5px/1.6 "IBM Plex Mono", monospace; white-space:pre-wrap; overflow-wrap:anywhere; user-select:all; max-height:150px; overflow:auto; }
.prevbox { display:none; margin-top:10px; border:1px solid var(--edge); border-radius:12px; overflow:hidden; background:var(--page); height:0; }
.prevbox.on { display:block; height:420px; } .prevbox iframe { border:0; width:100%; height:100%; }
#meBadge { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }