/* LUCOSIS Studios workflow banner.
   Colors and fonts map to the site's BRIEF.md tokens; if a site token is missing, the fallback hex is used. */
/* The mock cards (white form/email, dark player) are painted with fixed colours by the JS,
   so their text keeps the original light-theme palette. Only the step row and pause button
   sit on the page itself, and those follow the site's dark theme (see .lxw-steps below). */
.lxw{
  --paper:#F2F1EF;
  --ink:#0D0D0D; --ink7:#2A2A2A;
  --c300:#C9C9C9; --c500:#B8B8B8; --c700:#6E6E6E;
  --void:#0A0A0A; --peach:#D7A58A; --coral:#FF945C; --cream:#FFE5C2; --white:#FFFFFF;
  --f-ui:'Arvo','Rockwell','Roboto Slab',Georgia,serif;
  --f-body:'Libre Baskerville','Baskerville',Georgia,serif;
}
.lxw{position:relative;width:100%;aspect-ratio:1600/680;overflow:hidden;background:transparent;user-select:none;-webkit-user-select:none}
.lxw *{box-sizing:border-box}
.lxw [hidden]{display:none!important}
.lxw-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.lxw-world{position:absolute;left:0;top:0;width:0;height:0}
.lxw-shape{position:absolute;overflow:hidden;border-radius:0}
.lxw-o{position:absolute;left:50%;top:50%;width:0;height:0}
.lxw-c{position:absolute}
.lxw-c, .lxw-c *{font-family:var(--f-ui)}
.lxw .meta{font:500 11px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--c700)}
.lxw .abs{position:absolute}

/* button */
.lxw .btn-l{left:-116px;top:-30px;width:232px;height:60px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink)}
/* form */
.lxw .form{left:-300px;top:-234px;width:600px;height:468px;color:var(--ink)}
.lxw .form h4{position:absolute;left:28px;top:28px;margin:0;font-size:20px;font-weight:700;line-height:28px}
.lxw .fl{position:absolute;font:500 11px/14px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--c700)}
.lxw .fb{position:absolute;height:40px;border:1px solid var(--c300);background:var(--white);display:flex;align-items:center;padding:0 12px;font-size:15px;white-space:nowrap;overflow:hidden}
.lxw .fb.f{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.lxw .ph{color:var(--c500)}
.lxw .seg{padding:0;gap:0}
.lxw .seg span{flex:1;height:100%;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--f-ui);letter-spacing:.08em}
.lxw .seg .on{background:var(--ink);color:var(--paper)}
.lxw .seg .off{color:var(--c700)}
.lxw .msg{height:80px;align-items:flex-start;padding:10px 12px;white-space:normal;font-family:var(--f-body)!important;font-size:14px;line-height:1.5}
.lxw .dd{position:absolute;left:28px;top:270px;width:262px;background:var(--white);border:1px solid var(--ink)}
.lxw .dd div{height:34px;display:flex;align-items:center;padding:0 12px;font-size:15px}
.lxw .dd .hv{background:var(--paper)}
.lxw .sub-btn{position:absolute;left:412px;top:390px;width:160px;height:44px;background:var(--coral);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--ink)}
.lxw .to{position:absolute;left:28px;top:405px;font-size:13px;color:var(--c700)}
/* loader */
.lxw .ld{left:-32px;top:-32px;width:64px;height:64px}
.lxw .ld i{position:absolute;width:12px;height:12px;background:#3a3a3a}
/* sent */
.lxw .sent{left:-125px;top:-32px;width:250px;height:64px;display:flex;align-items:center;gap:14px;padding-left:22px;font-weight:700;font-size:17px;color:var(--ink)}
/* notif */
.lxw .ntf{left:-235px;top:-38px;width:470px;height:76px}
.lxw .ico{position:absolute;display:flex;align-items:center;justify-content:center;background:var(--peach)}
.lxw .ntf .t1{position:absolute;left:74px;top:17px;font-weight:700;font-size:15px;color:var(--paper)}
.lxw .ntf .t2{position:absolute;left:74px;top:41px;width:370px;font-size:13px;color:var(--c500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lxw .ntf .now{position:absolute;right:18px;top:19px;color:var(--c500)}
/* email */
.lxw .eml{left:-300px;top:-210px;width:600px;height:420px;color:var(--ink)}
.lxw .eml .mk{position:absolute;left:28px;top:28px;width:24px;height:24px;background:var(--ink);color:var(--paper);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.lxw .eml .from{position:absolute;left:62px;top:33px;font-size:15px;font-weight:700}
.lxw .eml .addr{position:absolute;left:146px;top:35px;font-size:13px;color:var(--c700)}
.lxw .eml .date{position:absolute;right:28px;top:35px}
.lxw .eml .subj{position:absolute;left:28px;top:70px;width:544px;font-weight:700;font-size:16px;line-height:1.35}
.lxw .eml .bd{position:absolute;left:28px;top:128px;width:544px;font-family:var(--f-body)!important;font-size:15px;line-height:1.55}
.lxw .tl-track{position:absolute;left:40px;top:213px;width:520px;height:2px;background:var(--c300)}
.lxw .tl-fill{position:absolute;top:213px;height:2px;background:var(--peach)}
.lxw .tl-node{position:absolute;top:207px;width:14px;height:14px;background:var(--white);border:2px solid var(--c300)}
.lxw .tl-node.lit{background:var(--peach);border-color:var(--peach)}
.lxw .tl-lab{position:absolute;top:236px;width:200px;display:flex;flex-direction:column;gap:6px}
.lxw .tl-lab b{font-size:15px;font-weight:700;color:var(--c700)}
.lxw .tl-lab.lit b{color:var(--ink)}
.lxw .eml .note{position:absolute;left:28px;top:306px;width:544px;font-family:var(--f-body)!important;font-style:italic;font-size:14px;color:var(--c700)}
.lxw .eml .sig{position:absolute;left:28px;top:356px;font-family:var(--f-body)!important;font-size:15px}
/* player */
.lxw .ply{left:-330px;top:-115px;width:660px;height:230px;color:var(--paper)}
.lxw .ply .ttl{position:absolute;left:24px;top:26px;font-weight:700;font-size:16px}
.lxw .chip{position:absolute;right:24px;top:22px;height:26px;padding:0 10px;border:1px solid var(--peach);color:var(--peach);display:flex;align-items:center;font:700 11px/1 var(--f-ui);letter-spacing:.08em}
.lxw .pbtn{position:absolute;left:24px;top:87px;width:56px;height:56px;background:var(--coral);display:flex;align-items:center;justify-content:center}
.lxw .wave{position:absolute;left:100px;top:71px;width:536px;height:88px;overflow:visible}
.lxw .tc{position:absolute;left:100px;top:184px;font:500 12px/1 var(--f-ui);letter-spacing:.06em;color:var(--c500);font-variant-numeric:tabular-nums}
.lxw .bub{position:absolute;right:24px;top:174px;height:32px;padding:0 12px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);white-space:nowrap}
.lxw .bub .who{font:700 10px/1 var(--f-ui);letter-spacing:.1em}
/* download */
.lxw .dl{left:-210px;top:-36px;width:420px;height:72px}
.lxw .dl .fn{position:absolute;left:70px;top:17px;font-weight:700;font-size:14px;color:var(--paper)}
.lxw .dl .fm{position:absolute;left:70px;top:40px;color:var(--c500)}
.lxw .dl .act{position:absolute;right:16px;top:28px;font-weight:700;font-size:14px}
.lxw .dl .bar{position:absolute;left:0;bottom:0;height:4px;background:var(--peach)}
/* toast */
.lxw .tst{left:-165px;top:-34px;width:330px;height:68px;color:var(--ink)}
.lxw .tst .t1{position:absolute;left:64px;top:15px;font-weight:700;font-size:16px}
.lxw .tst .t2{position:absolute;left:64px;top:40px;font-size:12px;color:var(--c700)}

/* cursor */
.lxw-cur{position:absolute;left:0;top:0;width:30px;height:30px;transform-origin:0 0;pointer-events:none}

/* steps */
.lxw-steps,.lxw-pp{--ink:var(--ink-900,#0D0D0D);--c300:var(--concrete-300,#C9C9C9);--c700:var(--concrete-700,#6E6E6E)}
.lxw-steps{position:absolute;left:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.lxw-st{position:relative;border-top:2px solid var(--c300);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.lxw-st .fill{position:absolute;left:0;top:-2px;height:2px;background:var(--ink);width:0}
.lxw-st .num{font:500 13px/1 var(--f-ui);letter-spacing:.08em;color:var(--c700)}
.lxw-st .ttl{font:700 21px/1.25 var(--f-ui);color:var(--c700)}
.lxw-st .sub{font:400 15px/1.45 var(--f-body);color:var(--c700)}
.lxw-st.on .ttl,.lxw-st.on .num{color:var(--ink)}
.lxw[data-mode="m"] .lxw-steps{grid-template-columns:repeat(2,1fr);row-gap:28px;column-gap:28px}
.lxw[data-mode="m"] .lxw-st .num{font-size:19px}
.lxw[data-mode="m"] .lxw-st .ttl{font-size:29px}
.lxw[data-mode="m"] .lxw-st .sub{font-size:21px}
.lxw-pp{position:absolute;right:0;top:0;width:40px;height:40px;border:1px solid var(--c300);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--ink)}
.lxw-pp:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.lxw[data-mode="m"] .lxw-pp{width:64px;height:64px}