/* Styles of the Motion film "TSM Engineering Journey" (base.css v4), scoped to the website world. */
.mworld { --ground:#F5F7FA; --main:#1F5FBF; --second:#14213D; --accent:#E8912D; color:var(--second); font-family:var(--sans, system-ui, sans-serif) }
.mworld .ground { position:absolute; inset:0; background:radial-gradient(120% 95% at 50% 42%, var(--ground), color-mix(in srgb, var(--ground) 93%, var(--second))); overflow:hidden }
.mworld .box { position:absolute; margin:0 }
.mworld .box { border:2px solid var(--second); box-sizing:border-box; font-size:30px; letter-spacing:.12em }
.mworld .box::after { content:attr(data-label); position:absolute; left:14px; bottom:10px }
.mworld .art { position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.mworld .art polygon, .mworld .art path.l, .mworld .art ellipse { stroke:color-mix(in srgb, var(--second) 18%, transparent); stroke-width:.5; stroke-linejoin:round }
.mworld .t { fill:var(--c) }
.mworld .l { fill:color-mix(in srgb, var(--c) 90%, var(--second)) }
.mworld .r { fill:color-mix(in srgb, var(--c) 78%, var(--second)) }
.mworld .mw { --c:color-mix(in srgb, var(--ground) 97%, var(--main)) }
.mworld .mk { --c:color-mix(in srgb, var(--ground) 82%, var(--second)) }
.mworld .mg { --c:color-mix(in srgb, var(--second) 72%, var(--ground)) }
.mworld .mn { --c:color-mix(in srgb, var(--second) 92%, var(--main)) }
.mworld .mb { --c:var(--main) }
.mworld .ma { --c:var(--accent) }
.mworld .mc { --c:color-mix(in srgb, var(--accent) 38%, var(--ground)) }
.mworld .mf { --c:color-mix(in srgb, var(--ground) 94%, var(--second)) }
.mworld .art .site { fill:color-mix(in srgb, var(--ground) 96%, var(--second)); stroke:none }
.mworld .art .pad { fill:color-mix(in srgb, var(--ground) 92%, var(--main)); stroke:none }
.mworld .art .road { fill:color-mix(in srgb, var(--ground) 86%, var(--second)); stroke:none }
.mworld .art .lane { fill:var(--ground); stroke:none }
.mworld .art .sh { fill:color-mix(in srgb, var(--second) 8%, transparent); stroke:none }
.mworld .art .zone { fill:none; stroke:color-mix(in srgb, var(--second) 12%, transparent); stroke-width:.8 }
.mworld .art .zon { fill:color-mix(in srgb, var(--main) 8%, transparent); stroke:var(--main); stroke-width:1.6 }
.mworld .path { fill:none; stroke:color-mix(in srgb, var(--main) 20%, var(--ground)); stroke-width:5; stroke-linecap:round }
.mworld .prog { fill:none; stroke:var(--main); stroke-width:5; stroke-linecap:round }
.mworld .pdot { fill:var(--main); stroke:var(--ground); stroke-width:2.5 }
.mworld .node { fill:var(--ground); stroke:color-mix(in srgb, var(--main) 45%, var(--ground)); stroke-width:2 }
.mworld .art .scr { fill:color-mix(in srgb, var(--second) 88%, var(--main)) }
.mworld .art .sb { fill:none; stroke:color-mix(in srgb, var(--main) 55%, var(--ground)) }
.mworld .sl { fill:none; stroke:color-mix(in srgb, var(--main) 50%, var(--ground)); stroke-linecap:round; stroke-linejoin:round }
.mworld .sd { fill:var(--accent) }
.mworld .art .glass { fill:color-mix(in srgb, var(--main) 12%, transparent); stroke:color-mix(in srgb, var(--second) 30%, transparent); stroke-width:.6 }
.mworld .art .mbf { fill:var(--main) }
.mworld .limb { fill:none; stroke:color-mix(in srgb, var(--c) 82%, var(--second)); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round }
.mworld .sk1 { fill:color-mix(in srgb, var(--accent) 34%, var(--ground)) }
.mworld .sk2 { fill:color-mix(in srgb, var(--accent) 55%, var(--second)) }
.mworld .sk3 { fill:color-mix(in srgb, var(--accent) 60%, var(--ground)) }
.mworld .hair { fill:var(--second) }
.mworld .arm { fill:none; stroke:var(--accent); stroke-width:7; stroke-linecap:round; stroke-linejoin:round }
.mworld .grip { fill:none; stroke:var(--second); stroke-width:3; stroke-linecap:round }
.mworld .jt { fill:var(--second) }
.mworld .led { fill:var(--main) }
.mworld .lamp { fill:var(--accent) }
.mworld .mp { --c:color-mix(in srgb, var(--ground) 88%, var(--second)) }
.mworld .art .win { fill:color-mix(in srgb, var(--main) 16%, var(--ground)) }
.mworld .art .mesh { fill:color-mix(in srgb, var(--accent) 7%, transparent); stroke:none }
.mworld .rail { fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round }
.mworld .dial { fill:color-mix(in srgb, var(--main) 30%, var(--ground)); stroke:var(--main); stroke-width:.8 }
.mworld .art .kp { fill:color-mix(in srgb, var(--second) 55%, var(--ground)) }
.mworld .mz { --c:color-mix(in srgb, var(--accent) 70%, var(--second)) }
.mworld .art .pnl { fill:var(--ground) }
.mworld .kpd { fill:color-mix(in srgb, var(--second) 60%, var(--ground)) }
.mworld { position:absolute; inset:0; }
.mworld .ground { position:absolute; inset:0; }