/* 16 · Mai intro, real footage (built on 15). "Daylight studio": pale cool canvas, floating rounded frames, ambient light in the colour of each video type; Part 2 is a faithful dark DaVinci Resolve 21 Edit page.
   Plus Jakarta Sans (UI, captions), Fraunces (her name, quiet lines), DM Mono (labels, timecodes). All OFL, bundled. */
@font-face{font-family:"Jakarta";src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:block}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-full-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-full-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:block}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:block}
:root{--bg:#EEF0F5;--ink:#14161B;--ink2:#4B5160;--ink3:#8C92A1;--ln:#E1E4EC;--ln2:#D3D7E1;
  --cob:#3B5BFD;--tan:#FF7A1A;--vio:#7B5CFF;--red:#FF2D46;--mint:#16B386;--grn:#2BD980}
*{box-sizing:border-box}
html,body{margin:0;background:#DFE3EA;color:var(--ink);font-family:"Jakarta",system-ui,sans-serif}
body{min-height:100vh;min-height:100dvh}
/* page: the frame fits the viewport width AND height (minus the control bar); the page itself always scrolls normally */
#page{display:flex;flex-direction:column;align-items:center;padding:10px 10px 18px;gap:8px}
#frame{position:relative;width:min(calc(100vw - 20px),calc((100vh - 86px) * 16 / 9));width:min(calc(100vw - 20px),calc((100dvh - 86px) * 16 / 9));
  aspect-ratio:16/9;min-width:280px;overflow:hidden;border-radius:12px;background:var(--bg);box-shadow:0 18px 50px rgba(30,40,70,.22)}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:var(--bg);
  -webkit-font-smoothing:antialiased;font-kerning:normal;contain:layout paint}
#bar{width:min(calc(100vw - 20px),calc((100vh - 86px) * 16 / 9));width:min(calc(100vw - 20px),calc((100dvh - 86px) * 16 / 9));min-width:280px;
  display:flex;align-items:center;gap:12px;height:44px;padding:0 4px;font:500 13px/1 "DM Mono",monospace;color:var(--ink2)}
#bar a.back{color:var(--ink2);text-decoration:none;white-space:nowrap;font:600 14px "Jakarta",sans-serif;padding:8px 2px}
#bar a.back:hover{color:var(--ink)}
#bar button{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--ln2);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
#bar button:hover{border-color:var(--cob)}
#bar button svg{display:block}
#scrub{flex:1;min-width:60px;accent-color:var(--cob);height:28px;cursor:pointer}
#time{white-space:nowrap;min-width:92px;text-align:right}
#about{max-width:900px;margin:6px 12px 0;color:var(--ink3);font-size:13px;line-height:1.5;text-align:center}
#bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:15px 26px 15px 20px;border-radius:999px;border:0;background:rgba(20,22,27,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font:600 16px/1 "Jakarta",sans-serif;letter-spacing:.01em;box-shadow:0 12px 40px rgba(20,30,60,.35);transition:transform .2s,background .2s}
#bigplay:hover{transform:translate(-50%,-50%) scale(1.04);background:rgba(20,22,27,.95)}
#bigplay .tri{width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
#bigplay.hide{display:none}
@media (max-width:560px){#bar{gap:8px}#bar .lbl{display:none}#time{min-width:0;font-size:12px}#bigplay{padding:10px 16px 10px 14px;font-size:14px}}
/* screenshot mode (?paused / ?shot): the stage fills the window exactly, no chrome */
html.shot,html.shot body{overflow:hidden;background:var(--bg)}
html.shot #page{padding:0}
html.shot #frame{width:100vw;border-radius:0;box-shadow:none}
html.shot #bar,html.shot #about,html.shot #bigplay{display:none}

/* ---------- stage ---------- */
.abs{position:absolute;left:0;top:0}
.mono{font-family:"DM Mono",monospace}
svg{overflow:visible}
#amb{position:absolute;inset:0;background:linear-gradient(180deg,#F3F5F9,#E8EBF2)}
#amb i{position:absolute;left:0;top:0;width:1400px;height:1400px;margin:-700px 0 0 -700px;border-radius:50%;opacity:.55}
#grain{position:absolute;inset:-300px;pointer-events:none;opacity:.05;z-index:50;will-change:transform}
#pgroup,#pcircle{position:absolute;inset:0}
#pBg,#pFg{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;opacity:0}
#world{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;backface-visibility:hidden}
#world .glare{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:40;
  background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,0) 60%),linear-gradient(0deg,rgba(10,20,40,.12),rgba(10,20,40,0) 30%),linear-gradient(rgba(38,44,70,.10),rgba(38,44,70,.10))}

/* Part 1 frame */
#fw{position:absolute;left:0;top:0;width:1536px;height:864px;border-radius:26px;overflow:hidden;background:#fff;transform-origin:0 0;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 0 0 1px rgba(20,30,60,.06),0 40px 90px -30px rgba(30,40,80,.35),0 14px 30px -18px rgba(30,40,80,.25)}
.scene{position:absolute;left:0;top:0;width:1536px;height:864px;overflow:hidden}
.scene .cam{position:absolute;left:0;top:0;width:1536px;height:864px;transform-origin:0 0}
.card{position:absolute;left:0;top:0;width:1536px;height:864px;border-radius:26px;overflow:hidden;background:#fff;transform-origin:0 0;
  box-shadow:0 0 0 1px rgba(20,30,60,.06),0 40px 90px -30px rgba(30,40,80,.35)}
.sweep{position:absolute;top:-10%;bottom:-10%;width:420px;left:0;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none;z-index:30;opacity:0}
.cat{position:absolute;left:0;top:938px;width:1920px;display:flex;justify-content:center;align-items:center;gap:18px;white-space:nowrap}
.cat .nm{font:600 30px/1 "Jakarta",sans-serif;letter-spacing:-.01em;color:var(--ink)}
.cat .dot{width:12px;height:12px;border-radius:50%}
.cat .tag{display:flex;align-items:center;gap:9px;padding:9px 15px 9px 12px;border-radius:999px;font:500 17px/1 "DM Mono",monospace;letter-spacing:.02em}
.rowlab{position:absolute;top:0;width:384px;text-align:center;font:600 21px/1 "Jakarta",sans-serif;color:var(--ink);display:flex;justify-content:center;align-items:center;gap:10px}
.rowlab i{width:9px;height:9px;border-radius:50%}
#hi{position:absolute;left:0;top:250px;width:1920px;text-align:center;font:italic 400 46px/1 "Fraunces",serif;color:var(--ink);letter-spacing:-.005em}
#hi span{display:inline-block}

#sub span{display:inline-block;opacity:0}
#endc{position:absolute;inset:0;pointer-events:none}
#endc .nm{position:absolute;left:0;width:1920px;top:512px;text-align:center;font:400 92px/1 "Fraunces",serif;letter-spacing:-.02em;color:var(--ink)}
#endc .nm span{display:inline-block}
#endc .role{position:absolute;left:0;width:1920px;top:632px;text-align:center;font:500 29px/1 "Jakarta";color:var(--ink2)}
#endc .labs{position:absolute;left:0;width:1920px;top:706px;display:flex;justify-content:center;gap:14px}
#endc .lb{display:flex;align-items:center;gap:10px;padding:12px 18px 12px 15px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(20,30,60,.07);font:600 19px/1 "Jakarta";color:var(--ink)}
#endc .lb i{width:10px;height:10px;border-radius:50%}
#endc .contact{position:absolute;left:0;width:1920px;top:800px;text-align:center;font:500 22px/1 "DM Mono";color:var(--ink2)}
#endc .made{position:absolute;left:0;width:1920px;top:984px;text-align:center;font:500 16px/1 "DM Mono";letter-spacing:.06em;color:var(--ink3)}
#ring{position:absolute;left:0;top:0;pointer-events:none}
video.fv{position:absolute;left:0;top:0;display:block;object-fit:fill;transform-origin:0 0;background:#0B1330}

/* ---------- 16 ---------- */
#endc .nm{font:800 92px/1 "Jakarta",sans-serif;letter-spacing:-.04em;color:#14161B}
#pphoto{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;opacity:0}
#pphoto #pBg,#pphoto #pFg{opacity:1}
#pBg{width:1672px;height:941px}
.s1,.s2{background:#0B0C10}
.s3{background:#0E1726}
.s4{background:#fff}
.s4 .yt{position:absolute;left:128px;top:22px;width:1280px;height:720px;border-radius:18px;overflow:hidden;z-index:3;pointer-events:none;opacity:0}
.yt .ytbar{position:absolute;left:0;right:0;bottom:0;height:118px;background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,0));padding:0 26px}
.yt .pb{position:absolute;left:26px;right:26px;bottom:66px;height:5px;border-radius:3px;background:rgba(255,255,255,.35)}
.yt .pb i{position:absolute;left:0;top:0;bottom:0;width:0;background:#FF0033;border-radius:3px}
.yt .pb em{position:absolute;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:#FF0033}
.yt .ctl{position:absolute;left:26px;right:26px;bottom:16px;height:36px;display:flex;align-items:center;gap:22px;color:#fff}
.yt .ctl svg{display:block}
.yt .tm{font:500 19px/1 "Jakarta";letter-spacing:.01em}
.yt .sp{flex:1}
.yt .cc{font:700 15px/1 "Jakarta";border:2px solid #fff;border-radius:5px;padding:3px 6px}
.s4 .ytinfo{position:absolute;left:128px;top:762px;width:1280px;opacity:0}
.ytinfo .ttl{font:700 30px/1.15 "Jakarta";color:#0F0F0F;letter-spacing:-.01em}
.ytinfo .ch{margin-top:14px;display:flex;align-items:center;gap:14px}
.ytinfo .av{width:40px;height:40px;border-radius:50%;background:#15181B;color:#FEB850;display:grid;place-items:center;font:700 20px/1 "Jakarta"}
.ytinfo .nm{font:700 19px/1.2 "Jakarta";color:#0F0F0F}
.ytinfo .nm small{display:block;font:500 15px/1.3 "Jakarta";color:#606060}
.ytinfo .sub{margin-left:12px;padding:10px 18px;border-radius:999px;background:#0F0F0F;color:#fff;font:600 16px/1 "Jakarta"}

/* subtitles */
#subs{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none;z-index:45}
#subs .ln{position:absolute;left:0;width:1920px;text-align:center;white-space:nowrap}
#subs .in{display:inline-block;font:500 30px/1.25 "Jakarta",sans-serif;letter-spacing:.003em;padding:7px 18px;border-radius:12px}
#subs .w{display:inline-block}
#subs .p1{top:1000px}#subs .p1 .in{color:#2B303B}
#subs .q .in{font-style:italic;font-weight:400;font-family:"Fraunces",serif;color:#3A3F4B}
#subs .rs{top:968px}#subs .rs .in{color:#F4F4F6;background:rgba(14,14,16,.74);box-shadow:0 6px 24px rgba(0,0,0,.25)}
#subs .pb{top:916px}#subs .pb .in{color:var(--ink2)}
#subs .ec{top:866px}#subs .ec .in{color:var(--ink2)}

/* ---------- Part 2 · DaVinci Resolve 21, Edit page ---------- */
#rcam{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
.rui{position:absolute;left:0;top:0;width:1920px;height:1080px;background:#141416;color:#C9C9CD;font:500 14px/1.2 "Jakarta",sans-serif;overflow:hidden;visibility:hidden}
.rui svg{display:block;flex:none}
.rui .mono{font-family:"DM Mono",monospace}
.rtop{position:absolute;left:0;top:0;width:1920px;height:40px;background:#28282B;border-bottom:1px solid #0E0E10;display:flex;align-items:center;padding:0 10px}
.rtop .grp{display:flex;gap:4px}.rtop .grp.r{margin-left:auto}
.rtop .tb{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:5px;color:#A9A9AE;font-size:13.5px}
.rtop .tb.on{background:#3A3A3F;color:#EDEDEF}
.rtop .proj{position:absolute;left:0;width:1920px;text-align:center;pointer-events:none;color:#DCDCDF;font-size:14.5px}
.rtop .proj small{margin-left:10px;color:#7E7E84;font-size:12.5px}
.rpool{position:absolute;left:0;top:41px;width:420px;height:600px;background:#1E1E20;border-right:1px solid #0E0E10}
.ph{height:30px;background:#28282B;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:13px;color:#BDBDC2;border-bottom:1px solid #121214}
.ph .dim{display:flex;gap:8px;color:#7E7E84}
.rpool .bins{position:absolute;left:0;top:31px;width:118px;bottom:0;border-right:1px solid #131315;padding:8px 0}
.rpool .bin{display:flex;align-items:center;gap:7px;padding:7px 10px;font-size:13px;color:#A9A9AE}
.rpool .bin.on{background:#2E2E33;color:#EDEDEF}
.rpool .grid{position:absolute;left:126px;top:40px;right:8px;display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.rpool .th .im{position:relative;height:79px;border-radius:4px;background:#26262A center/cover no-repeat;display:grid;place-items:center;box-shadow:0 0 0 1px #0E0E10}
.rpool .th .du{position:absolute;right:4px;bottom:3px;font:500 10px/1 "DM Mono";color:#fff;background:rgba(0,0,0,.55);padding:2px 3px;border-radius:2px}
.rpool .th .nm{margin-top:5px;font-size:11.5px;color:#B5B5BA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rview{position:absolute;left:421px;top:41px;width:1038px;height:600px;background:#1A1A1C}
.rview .vh{height:30px;background:#28282B;display:flex;align-items:center;gap:12px;padding:0 12px;font-size:13px;border-bottom:1px solid #121214}
.rview .tln{color:#DCDCDF}
.rview .vers{display:flex;gap:6px}
.rview .vt{font:700 14px/1 "Jakarta";padding:5px 10px;border-radius:4px;background:#34343A;color:#C9C9CD;opacity:0}
.rview .vt.v0{opacity:1;background:#2A2A2E;color:#7E7E84}
.rview .vt[data-i="2"]{background:#2F6B45;color:#E8FFF0}
.rview .appr{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:999px;background:rgba(95,211,138,.14);color:#8EE6AE;font-weight:600;font-size:12.5px;opacity:0}
.rview .sp{flex:1}.rview .zm{color:#8E8E94}.rview .tcv{color:#E9573F;font-size:15px;letter-spacing:.02em}
.rview .pic{position:absolute;left:63px;top:37px;width:912px;height:513px;background:#000;overflow:hidden;box-shadow:0 0 0 1px #0A0A0B}
.rview .fixring{position:absolute;inset:0;box-shadow:inset 0 0 0 3px #FFD23F;opacity:0}
.rview .jog{position:absolute;left:63px;top:556px;width:912px;height:4px;background:#2C2C30;border-radius:2px}
.rview .jog i{position:absolute;left:0;top:0;bottom:0;background:#56565C;border-radius:2px}
.rview .trans{position:absolute;left:63px;top:566px;width:912px;height:28px;display:flex;align-items:center;justify-content:center}
.rview .trans .bt{display:flex;gap:18px;align-items:center}
.rview .trans .tcl{position:absolute;left:0;font-size:12.5px;color:#8E8E94}.rview .trans .tcl.r{left:auto;right:0}
.rinsp{position:absolute;left:1460px;top:41px;width:460px;height:600px;background:#1E1E20;border-left:1px solid #0E0E10}
.rinsp .tabs{display:flex;gap:2px;padding:8px 10px;border-bottom:1px solid #131315}
.rinsp .tabs b{font-weight:500;font-size:12.5px;padding:5px 8px;border-radius:4px;color:#8E8E94}.rinsp .tabs b.on{background:#34343A;color:#EDEDEF}
.rinsp .sec{padding:8px 14px 4px;border-bottom:1px solid #161618}
.rinsp .sh{font-size:13px;color:#DCDCDF;margin-bottom:6px}
.rinsp .row{display:flex;align-items:center;gap:10px;height:26px;font-size:12px;color:#9A9AA0}
.rinsp .row span{width:120px}.rinsp .row i{flex:1;height:3px;background:#34343A;border-radius:2px;position:relative}
.rinsp .row i:after{content:"";position:absolute;left:50%;top:-4px;width:2px;height:11px;background:#6A6A70}
.rinsp .row em{font-style:normal;width:56px;text-align:right;color:#C9C9CD;font-family:"DM Mono";font-size:12px}
.rtl{position:absolute;left:0;top:642px;width:1920px;height:394px;background:#19191B;border-top:1px solid #0A0A0B}
.rtl .tbar{position:absolute;left:0;top:0;width:1920px;height:34px;background:#232326;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid #111113}
.rtl .tools{display:flex;gap:4px;align-items:center}.rtl .tools b{padding:4px 7px;border-radius:4px;color:#8E8E94}.rtl .tools b.on{background:#3A3A3F;color:#EDEDEF}.rtl .tools b.on2{color:#E9573F}
.rtl .tools u{width:1px;height:18px;background:#3A3A3F;margin:0 8px}
.rtl .tct{position:absolute;left:0;width:1920px;text-align:center;color:#E9573F;font-size:17px;letter-spacing:.03em;pointer-events:none}
.rtl .zoomer{margin-left:auto;width:120px;height:4px;border-radius:2px;background:#3A3A3F;position:relative}.rtl .zoomer i{position:absolute;left:40%;top:-5px;width:14px;height:14px;border-radius:50%;background:#8E8E94}
.rtl .ruler{position:absolute;left:200px;top:34px;width:1720px;height:28px;background:#1E1E21;border-bottom:1px solid #111113;overflow:hidden}
.rtl .ruler i{position:absolute;bottom:0;width:1px;height:5px;background:#55555B;margin-left:-200px}
.rtl .ruler i.m{height:9px}.rtl .ruler i.b{height:14px;background:#7A7A80}
.rtl .ruler span{position:absolute;top:3px;margin-left:-200px;font-size:10.5px;color:#8E8E94}
.rtl .heads{position:absolute;left:0;top:0;width:200px;height:394px}
.rtl .hdr{position:absolute;left:0;width:199px;background:#232326;border-bottom:1px solid #141416;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:12px;color:#9A9AA0}
.rtl .hdr b{font-weight:700;color:#DCDCDF;width:22px}.rtl .hdr em{margin-left:auto;display:flex;gap:6px;color:#6E6E74;font-style:normal}
.rtl .hdr em i{font-style:normal;font:700 10px/1 "Jakarta";padding:3px 4px;border-radius:3px;background:#34343A;color:#9A9AA0}
.rtl .lanes .lane{position:absolute;left:200px;width:1720px;border-bottom:1px solid #161618;background:#1C1C1F}
.rtl .clip{position:absolute;border-radius:4px;overflow:hidden;z-index:2}
.rtl .clip .cn{position:absolute;left:8px;top:4px;font-size:12px;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.rtl .clip.vid{background:linear-gradient(#4C7FBF 0 18px,#335E95 18px);box-shadow:inset 0 0 0 1px #6E9BD6}
.rtl .clip.ttl{background:linear-gradient(#36B3A8 0 18px,#1F857C 18px);box-shadow:inset 0 0 0 1px #6FD6CC;opacity:0}
.rtl .clip.ttl .tx{position:absolute;right:8px;bottom:3px;font:800 16px/1 "Jakarta";color:rgba(255,255,255,.6)}
.rtl .clip.brl{background:linear-gradient(#3C98C4 0 18px,#2A7299 18px);box-shadow:inset 0 0 0 1px #7FC4E6;opacity:0}
.rtl .clip.aud{background:linear-gradient(#3F8F57 0 18px,#2C6B40 18px);box-shadow:inset 0 0 0 1px #6CC489;z-index:1}
.rtl .clip.aud2{background:linear-gradient(#3A8050 0 18px,#275E39 18px);box-shadow:inset 0 0 0 1px #5FB27C;z-index:1}
.rtl .phd{position:absolute;left:0;top:34px;width:0;height:360px;z-index:6;pointer-events:none}
.rtl .phd b{position:absolute;left:-7px;top:6px;width:14px;height:16px;background:#E9573F;clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%)}
.rtl .phd i{position:absolute;left:-1px;top:20px;width:2px;height:340px;background:#E9573F}
.rpages{position:absolute;left:0;top:1036px;width:1920px;height:44px;background:#1F1F22;border-top:1px solid #0A0A0B;display:flex;align-items:center;padding:0 16px}
.rpages .app{color:#8E8E94;font-size:13.5px}
.rpages .pg{position:absolute;left:0;width:1920px;display:flex;justify-content:center;gap:34px;pointer-events:none}
.rpages .pg b{display:flex;align-items:center;gap:7px;font-weight:500;color:#7E7E84;padding:5px 10px;border-radius:6px}
.rpages .pg b small{font-size:13px}
.rpages .pg b.on{color:#F1F1F3;background:#34343A;box-shadow:inset 0 -2px 0 #E9573F}
.rpages .rr{margin-left:auto;display:flex;gap:14px;color:#7E7E84}
/* client chat, floating over the Inspector */
.rui .chat{position:absolute;left:1476px;top:84px;width:432px;height:548px;border-radius:16px;background:rgba(36,36,40,.96);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.55);overflow:hidden;z-index:20}
.chat .hd{height:68px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.chat .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#F7B267,#F25F5C);display:grid;place-items:center;color:#fff;font:700 18px/1 "Jakarta"}
.chat .hd .nm{font:700 18px/1.2 "Jakarta";color:#F1F1F3}
.chat .hd .nm small{display:flex;align-items:center;gap:6px;font:500 13px/1.3 "Jakarta";color:#9A9AA0}
.chat .hd .nm small i{width:7px;height:7px;border-radius:50%;background:#5FD38A}
.chat .list{position:absolute;left:0;right:0;top:69px;bottom:62px;overflow:hidden}
.chat .msg{position:absolute;left:14px;right:14px;bottom:10px;display:flex;transform-origin:50% 100%}
.chat .msg.m{justify-content:flex-end}
.chat .bb{max-width:80%;padding:13px 16px;border-radius:18px;font:500 22px/1.3 "Jakarta";color:#F1F1F3;background:#3A3A40}
.chat .msg.c .bb{border-bottom-left-radius:6px}
.chat .msg.m .bb{background:#2D6BE4;border-bottom-right-radius:6px}
.chat .file{margin-top:8px;padding:8px 10px;border-radius:9px;background:rgba(0,0,0,.25);font:500 13px/1.2 "DM Mono";color:#C9C9CD}
.chat .msg.sys{justify-content:center}
.chat .ap{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:999px;background:#5FD38A;color:#0E1F14;font:700 19px/1 "Jakarta"}
.chat .typing{position:absolute;left:14px;bottom:10px;display:flex;gap:6px;padding:15px 18px;border-radius:18px;background:#3A3A40;opacity:0}
.chat .typing i{width:9px;height:9px;border-radius:50%;background:#9A9AA0}
.chat .inp{position:absolute;left:12px;right:12px;bottom:12px;height:40px;border-radius:12px;background:#2C2C31;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:14px;color:#7E7E84}
#world .glare{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:40;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 38%,rgba(255,255,255,0) 60%),linear-gradient(rgba(38,44,70,.06),rgba(38,44,70,.06))}
.card{width:384px;height:216px;border-radius:14px;background:#0B0C10}
.card iframe{visibility:hidden}

/* ======================= v2 ======================= */
/* labels under the cold-open frame: small, content type only */
.cat{top:934px;gap:12px}.cat .nm{font:600 24px/1 "Jakarta",sans-serif;letter-spacing:-.005em;color:var(--ink2)}.cat .dot{width:10px;height:10px}
/* the online-course page */
.s0{background:#fff}
.ctop{position:absolute;left:0;top:0;width:1536px;height:64px;border-bottom:1px solid #ECEEF3;display:flex;align-items:center;padding:0 28px;opacity:0}
.ctop .lg{display:flex;align-items:center;gap:12px;font:700 19px/1 "Jakarta";color:var(--ink);letter-spacing:-.01em}
.ctop .lg i{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#3B5BFD,#7B5CFF)}
.ctop .prg{margin-left:auto;display:flex;align-items:center;gap:14px}.ctop .prg small{font:500 14px/1 "Jakarta";color:var(--ink3)}
.ctop .prg b{display:block;width:170px;height:4px;border-radius:2px;background:#E6E9F0;overflow:hidden}.ctop .prg b i{display:block;width:25%;height:100%;background:#16B386;border-radius:2px}
.cside{position:absolute;left:0;top:65px;width:380px;height:799px;border-right:1px solid #F0F1F5;padding:30px 20px;opacity:0}
.cside .mh{padding:0 14px 22px}.cside .mh small{display:block;font:500 13px/1 "DM Mono";letter-spacing:.1em;color:var(--ink3)}
.cside .mh b{display:block;margin-top:9px;font:700 23px/1.1 "Jakarta";color:var(--ink);letter-spacing:-.01em}
.cside .ls{display:flex;align-items:center;gap:14px;height:60px;padding:0 14px;border-radius:12px;margin-bottom:4px}
.cside .ls .ix{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid #D3D7E1;display:grid;place-items:center;font:600 14px/1 "Jakarta";color:var(--ink2)}
.cside .ls .ix svg{display:block}
.cside .ls:nth-child(3) .ix{background:#16B386;border-color:#16B386}
.cside .ls .ln{font:500 18px/1 "Jakarta";color:var(--ink)}
.cside .ls .du{margin-left:auto;font:500 14px/1 "DM Mono";color:var(--ink3)}
.cside .ls.on{background:#EEF2FF}.cside .ls.on .ln{font-weight:700;color:#2A45E0}.cside .ls.on .ix{border-color:#3B5BFD;color:#3B5BFD}
.cside .eq{display:flex;gap:3px;align-items:flex-end;height:16px}.cside .eq i{width:3px;height:16px;background:#3B5BFD;border-radius:1px;transform-origin:50% 100%}
.cplay{position:absolute;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(20,30,60,.06)}
.cbar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.22)}.cbar i{display:block;height:100%;width:0;background:#3B5BFD}
.cmeta{position:absolute;opacity:0}.cmeta b{display:block;font:700 26px/1.1 "Jakarta";color:var(--ink);letter-spacing:-.01em}.cmeta small{display:block;margin-top:8px;font:500 16px/1 "Jakarta";color:var(--ink3)}
.s2{background:#fff}.s2b{background:#065E7E}
.hlite{position:absolute;left:0;top:0;transform-origin:0 0;background:#FFD23F;mix-blend-mode:multiply;border-radius:6px;opacity:0}
/* Resolve, v2: the page builds panel by panel */
.rui{background:transparent}
.rbg{position:absolute;left:0;top:0;width:1920px;height:1080px;background:#141416}
.rpanel{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
.rtop .proj .pn{color:#DCDCDF}
.vwrap{position:absolute;left:0;top:0;width:912px;height:513px;transform-origin:50% 50%}
.rview .osc{position:absolute;left:2.5%;right:2.5%;top:68%;height:29%;border:1.5px solid rgba(255,255,255,.9);opacity:0;z-index:3}
.rview .osc i{position:absolute;width:9px;height:9px;background:#fff;border-radius:1px;margin:-5px 0 0 -5px}
.rview .osc i:nth-child(1){left:0;top:0}.rview .osc i:nth-child(2){left:100%;top:0}.rview .osc i:nth-child(3){left:100%;top:100%}.rview .osc i:nth-child(4){left:0;top:100%}
.rinsp .ph .sel{font-size:12px;color:#8E8E94;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rinsp .ipg .row{padding:0 6px;margin:0 -6px;border-radius:5px}
.rinsp .row u.kf{flex:none;width:9px;height:9px;transform:rotate(45deg);border:1.5px solid #8E8E94;margin-left:6px}
.rinsp .row .dd{flex:1;font-weight:500;color:#DCDCDF;background:#2A2A2E;border-radius:4px;padding:4px 8px;font-size:12.5px}
.rinsp .row .sw{width:44px;height:16px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px #0E0E10}
.rinsp .row .hx{width:auto;margin-left:auto}
.rinsp .txt{margin:2px 0 8px;padding:8px 10px;border-radius:5px;background:#141416;color:#DCDCDF;font-size:12.5px;height:46px}
.rinsp .row .tg{margin-left:auto;width:26px;height:14px;border-radius:7px;background:#3A3A3F;position:relative}.rinsp .row .tg i{position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#8E8E94}
.rinsp .row .tg.on{background:#2D6BE4}.rinsp .row .tg.on i{left:14px;background:#fff}
.rinsp .row small{width:34px;color:#7E7E84;font-size:11.5px}
.rinsp .row.big{height:34px}.rinsp .row.big span{color:#DCDCDF;font-size:13px}.rinsp .row.big em{font-size:14px;color:#F1F1F3}
.rinsp .row .vs{background:linear-gradient(90deg,#2B6B45,#5FD38A 70%,#E9C34F 85%,#E9573F)}.rinsp .row .vs:after{display:none}
.rinsp .row .vs b{position:absolute;top:-5px;width:12px;height:13px;margin-left:-6px;border-radius:3px;background:#E8E8EA;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.rtl .clip{left:0}
.rtl .clip .vl{position:absolute;left:0;right:0;top:46px;height:1.5px;background:rgba(255,255,255,.9);z-index:4}
.rtl .bcut{position:absolute;left:-1px;top:160px;width:2px;height:132px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9);z-index:5;opacity:0}
.rcur{position:absolute;left:0;top:0;z-index:30;pointer-events:none;opacity:0}
.rcur svg{display:block}
/* client chat: one light message window */
#chatS{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
.cwin{position:absolute;left:470px;top:146px;width:980px;height:788px;border-radius:30px;background:#fff;overflow:hidden;transform-origin:50% 60%;
  box-shadow:0 0 0 1px rgba(20,30,60,.06),0 50px 110px -40px rgba(30,40,80,.35),0 18px 40px -24px rgba(30,40,80,.25)}
.cwin .hd{height:100px;display:flex;align-items:center;gap:18px;padding:0 34px;border-bottom:1px solid #EEF0F4}
.cwin .av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#F7B267,#F25F5C);display:grid;place-items:center;color:#fff;font:700 24px/1 "Jakarta"}
.cwin .hd .nm{font:700 25px/1.2 "Jakarta";color:var(--ink);letter-spacing:-.01em}
.cwin .hd .nm small{display:flex;align-items:center;gap:8px;font:500 16px/1.4 "Jakarta";color:var(--ink3);letter-spacing:0}
.cwin .hd .nm small i{width:9px;height:9px;border-radius:50%;background:#16B386}
.cwin .hd .dots{margin-left:auto;display:flex;gap:5px}.cwin .hd .dots i{width:6px;height:6px;border-radius:50%;background:#C3C8D3}
.cwin .list{position:absolute;left:0;right:0;top:101px;bottom:100px;overflow:hidden}
.cwin .msg{position:absolute;left:34px;right:34px;top:0;display:flex;flex-direction:column;transform-origin:50% 100%}
.cwin .msg.c{align-items:flex-start;transform-origin:0 100%}.cwin .msg.m{align-items:flex-end;transform-origin:100% 100%}
.cwin .bb{max-width:72%;padding:17px 24px;border-radius:26px;font:500 30px/1.3 "Jakarta";letter-spacing:-.005em;color:var(--ink);background:#EEF0F5}
.cwin .msg.c .bb{border-bottom-left-radius:8px}
.cwin .msg.m .bb{background:#3B5BFD;color:#fff;border-bottom-right-radius:8px}
.cwin .ts{margin-top:8px;padding:0 6px;font:500 14px/1 "DM Mono";color:var(--ink3)}
.cwin .msg.sys{align-items:center}
.cwin .ap{display:flex;align-items:center;gap:10px;padding:13px 24px 13px 18px;border-radius:999px;background:#16B386;color:#fff;font:700 22px/1 "Jakarta";box-shadow:0 10px 24px -10px rgba(22,179,134,.6)}
.cwin .typing{position:absolute;left:34px;top:0;display:flex;gap:7px;padding:22px 24px;border-radius:26px;border-bottom-left-radius:8px;background:#EEF0F5;opacity:0}
.cwin .typing i{width:10px;height:10px;border-radius:50%;background:#8C92A1}
.cwin .inp{position:absolute;left:28px;right:28px;bottom:24px;height:58px;border-radius:18px;background:#F3F5F9;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font:500 18px/1 "Jakarta";color:var(--ink3)}
/* the quiet line */
#quiet{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
#quiet .ql{position:absolute;left:0;width:1920px;text-align:center;font:400 46px/1.2 "Fraunces",serif;letter-spacing:-.01em;color:var(--ink);opacity:0}
#quiet .ql:nth-child(1){top:466px}#quiet .ql:nth-child(2){top:530px}
/* the desk: one group */
#desk{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;border-radius:27px;overflow:hidden}
#desk #pBg,#desk #pFg{opacity:1}
#dshadow{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;border-radius:27px;background:#DCE0E8;box-shadow:0 34px 64px rgba(30,40,80,.26),0 10px 22px rgba(30,40,80,.12);opacity:0}
.rinsp .vsec{position:absolute;left:0;right:0;top:420px;border-top:1px solid #161618;padding-top:12px}
#world,#world video{will-change:transform}   /* own compositor layers: the monitor video updates without re-rasterising the Resolve UI around it */